Add new Icon parameters to BitNumberField (#12088)

[msynk]

closes #12088

Summary by CodeRabbit

• New Features
  • BitNumberField now supports custom external icons via new Icon, IncrementIcon, DecrementIcon, and ClearButtonIcon properties.
  • Added ClearButtonIconName property for built-in icon customization.
  • New demo examples demonstrate integration with FontAwesome and Bootstrap Icon libraries.

[coderabbitai]

Walkthrough

BitNumberField component now supports external icon libraries through new BitIconInfo properties (Icon, IncrementIcon, DecrementIcon, ClearButtonIcon) that take precedence over string-based icon names. The component's markup is refactored to use dynamic CSS class generation via GetCssClasses() for icon elements. Demo pages are updated with FontAwesome and Bootstrap icon examples.

Changes

Cohort / File(s)	Summary
BitNumberField Component Core src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.razor, src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.razor.cs	Introduces five new public BitIconInfo\? properties (Icon, IncrementIcon, DecrementIcon, ClearButtonIcon) and a string\? ClearButtonIconName property. Refactors markup to use local icon info variables and GetCssClasses() for dynamic class generation. Updates XML documentation with external icon library usage examples and precedence rules.
BitNumberField Demo & Examples src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/NumberField/BitNumberFieldDemo.razor, src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/NumberField/BitNumberFieldDemo.razor.cs, src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/NumberField/BitNumberFieldDemo.razor.samples.cs	Adds new "External Icons" demo with FontAwesome and Bootstrap icon examples. Introduces new public component parameters mirroring the core BitNumberField icon properties. Documents BitIconInfo as a sub-class with Name, BaseClass, and Prefix properties. Reorganizes demo examples and adds corresponding code samples for external icon usage.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Poem

🐰 Hops through icons with glee!
External libraries dance free,
FontAwesome, Bootstrap aligned,
BitIconInfo refined,
Prettier fields now you see! ✨

🚥 Pre-merge checks | ✅ 6

✅ Passed checks (6 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title clearly and concisely summarizes the main change: adding new Icon parameters to BitNumberField with direct reference to the issue number.
Linked Issues check	✅ Passed	The PR successfully implements the new Icon approach for BitNumberField by adding BitIconInfo-based parameters (Icon, IncrementIcon, DecrementIcon, ClearButtonIcon) enabling external icon support.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing the new Icon parameters for BitNumberField and updating corresponding demo/documentation; no unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into develop

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/NumberField/BitNumberFieldDemo.razor.cs (1)

298-315: Consider ordering ClearButtonIcon/ClearButtonIconName closer to other "C"-prefixed parameters.

These two parameters sit between PrefixTemplate and ShowClearButton, breaking alphabetical ordering. Other icon pairs (Decrement, Increment) are placed alphabetically. This is a minor consistency nit.

src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.razor (1)

73-73: Inconsistent null-conditional operator usage on GetCssClasses() calls.

decrementIcon and incrementIcon are never null (they always have a fallback icon name in BitIconInfo.From()), yet some call sites use ?. (lines 171, 190, 211, 229, 249) while others don't (line 73). Consider making this consistent—either drop ?. everywhere for these guaranteed non-null variables, or add it everywhere.

Also applies to: 171-171, 190-190

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/NumberField/BitNumberFieldDemo.razor (1)

230-230: <link> stylesheet tags embedded inside component body.

Loading external CSS via <link> tags mid-body works but is non-standard HTML placement and may cause FOUC. For a demo this is acceptable, but consider adding a brief comment noting this is for demo purposes only, or moving these to the <head> section.

Also applies to: 254-254

---

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

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