Caption inputs with font tokens (#13555)

[msynk]

closes #13555

Summary by CodeRabbit

• Style
  • Markdown editor, rich text editor, and rating labels now use the theme’s field-label font weight.
  • The documented default for toggle label weight now matches the field-label theme setting; runtime styling is unchanged.
  • Rating label defaults also match the field-label theme setting, including in the demo.

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

• Configuration used: Repository UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 79cc2a9e-8dd9-4b35-afa9-1d27c56de619

---

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Repository UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 58d60093-d5dd-4624-a63b-8ffbf638cfe3

---

---

📥 Commits

Reviewing files that changed from the base of the PR and between 5b9cd60 and 7bf0b05.

---

---

📒 Files selected for processing (6)

• src/BlazorUI/Bit.BlazorUI.Extras/Components/MarkdownEditor/BitMarkdownEditor.scss
• src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/BitRichTextEditor.scss
• src/BlazorUI/Bit.BlazorUI/Components/Inputs/Rating/BitRating.scss
• src/BlazorUI/Bit.BlazorUI/Components/Inputs/Toggle/BitToggle.scss
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Rating/BitRatingDemo.razor.cs
• src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitFieldLabelFontWeightContractTests.cs

---

---

Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 0 remain after this review.

---

---

---

Walkthrough

Several input-caption styles and documented font-weight defaults now use the field-label token. A new contract test scans component SCSS files, checks caption classifications, and validates field-caption font-weight declarations.

Changes

Field label font weight

Layer / File(s)	Summary
Update caption tokens src/BlazorUI/Bit.BlazorUI.Extras/Components/MarkdownEditor/BitMarkdownEditor.scss, src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/BitRichTextEditor.scss, src/BlazorUI/Bit.BlazorUI/Components/Inputs/Rating/BitRating.scss, src/BlazorUI/Bit.BlazorUI/Components/Inputs/Toggle/BitToggle.scss, src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Rating/BitRatingDemo.razor.cs	Markdown Editor, Rich Text Editor, and Rating caption styles now use the field-label token. Rating and Toggle documented defaults also reference the token. The Rating demo default uses the corresponding typography variable. The Toggle CSS declaration is unchanged.
Add caption style contract src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitFieldLabelFontWeightContractTests.cs	The test inventories caption-like selectors, checks that listed classes appear in stylesheets, and validates field-caption font-weight declarations. Selector helpers process nested and grouped Sass selectors and distinguish selector subjects from descendants and pseudo-elements.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Bug fix · Severity of issue fixed: Low

Merge Risk: ⚪ Minimal · up to 7bf0b

This change aligns input caption font weights with the field-label token and adds a test guarding it. No actionable merge risk was found.

Pre-merge checks | 2 | 3

❌ Failed checks (3 warnings)

Check name	Status	Explanation	Resolution
Linked Issues check		Issue #13555 requires the listed core input captions to use $tg-field-label-font-weight and requires updated defaults in the ChoiceGroup, DateRangePicker, Dropdown, NumberField, OtpInput, and TimePi…	Update every core stylesheet listed in #13555 and all six listed demo tables. Keep each field-caption weight on $tg-field-label-font-weight. Add or update automated coverage that verifies the field-label alias and the BitThemeProvider s…
Out of Scope Changes check		The pull request changes BitRichTextEditor.scss, BitRating.scss, and BitRatingDemo.razor.cs. Issue #13555 names BitMarkdownEditor and BitPhoneInput as the possible Extras additions, but it does …	Remove the BitRichTextEditor and BitRating changes, and limit the contract test to the components in #13555. Alternatively, link a direct coding requirement that includes the additional components and broader test scope.
Docstring Coverage		Docstring coverage is 28.57% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 7 functions across 2 files. (4 skipped: 4…	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly summarizes the main change: replacing caption font-weight tokens for input components.

---

---

Full details: Linked Issues check

Explanation

Issue #13555 requires the listed core input captions to use $tg-field-label-font-weight and requires updated defaults in the ChoiceGroup, DateRangePicker, Dropdown, NumberField, OtpInput, and TimePicker demo tables. The reviewed changes update only BitToggle among the listed core inputs. They update BitMarkdownEditor, but not the required core set. They update only the Rating demo, not the six required demo tables. The summary does not establish the required BitThemeProvider semibold override behavior.

Resolution

Update every core stylesheet listed in #13555 and all six listed demo tables. Keep each field-caption weight on $tg-field-label-font-weight. Add or update automated coverage that verifies the field-label alias and the BitThemeProvider semibold override path.

---

---

Full details: Out of Scope Changes check

Explanation

The pull request changes BitRichTextEditor.scss, BitRating.scss, and BitRatingDemo.razor.cs. Issue #13555 names BitMarkdownEditor and BitPhoneInput as the possible Extras additions, but it does not name BitRichTextEditor or BitRating. The broad contract test also scans component styles beyond the specified caption and demo scope. These changes have no stated connection to the linked issue.

---

---

Full details: Docstring Coverage

Explanation

Docstring coverage is 28.57% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 7 functions across 2 files. (4 skipped: 4 unsupported.)

---

---

---

✨ Finishing Touches 💡 2

📝 Generate docstrings 💡

• Commit to this branch
• Create a new PR

---

---

---

---

---

---

---

⚔️ Resolve merge conflicts 💡

• Resolve merge conflict in branch msynk/13555-blazorui-input-caption-using-font-tokens

---

---

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

---

---

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

---

_{A rabbit checks each caption’s weight,
And swaps the token, neat and straight.
The Sass selectors join the test,
Field labels match the rule expressed.
I twitch my nose and hop away,
With tidy labels in the day.}

_{Comment @coderabbitai help to get the list of available commands.}

[msynk]

@coderabbitai full-review

[coderabbitai]

@msynk I will trigger a full review of all changes in PR #13768.

✅ Action performed

Full review finished.