Add new Icon parameter to BitChoiceGroup (#12078)

[msynk]

closes #12078

Summary by CodeRabbit

• New Features

  • Added support for external icon libraries (FontAwesome, Bootstrap Icons) in ChoiceGroup components with a new Icon property, enabling more flexible icon customization alongside the existing IconName option.

• Documentation

  • Updated demo pages with examples showcasing external icon library integration and usage patterns.

[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.

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

Walkthrough

This PR adds external icon support to the BitChoiceGroup component. A new Icon property of type BitIconInfo? is introduced in BitChoiceGroupItem, BitChoiceGroupOption, and BitChoiceGroupNameSelectors classes. A new GetIcon() helper method resolves icons from items, and styling is updated with a new .bit-chg-ico CSS class for icon rendering. Demo content is reorganized to showcase external icon usage.

Changes

Cohort / File(s)	Summary
Core Component Logic src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs	Added internal GetIcon(TItem item) helper method supporting direct property access and NameSelector-based resolution for BitChoiceGroupItem<TValue> and BitChoiceGroupOption<TValue>. Updated GetItemContainerCssClasses and GetItemLabelCssClasses to use GetIcon(item) is not null instead of GetIconName(item) for CSS class assignment.
Styling Updates src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss	Removed BOM, introduced new .bit-chg-ico class for icon rendering (display: inline-block, speak: none), updated .bit-chg-rad::after positioning to use centered transform approach, and reordered properties in .bit-chg-rad::before.
API Additions src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupItem.cs, BitChoiceGroupOption.cs, BitChoiceGroupNameSelectors.cs	Added Icon property of type BitIconInfo? to BitChoiceGroupItem and BitChoiceGroupOption with documentation indicating precedence over IconName. Added Icon property of type BitNameSelectorPair<TItem, BitIconInfo?> to BitChoiceGroupNameSelectors with default initializer referencing BitChoiceGroupItem.Icon.
Component Template src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/_BitChoiceGroupItem.razor	Replaced GetIconName(Item) with GetIcon(Item), updated icon rendering from "bit-icon bit-icon--@iconName" to "bit-chg-ico @icon.GetCssClasses()", and adjusted conditional rendering for icon/text area presence.
Demo & Documentation src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs, Order.cs	Added Icon property documentation and metadata for BitChoiceGroupItem, BitChoiceGroupOption, and BitChoiceGroupNameSelectors. Introduced BitIconInfo as a public type with Name, BaseClass, and Prefix parameters. Added Icon property to Order model class.
Demo Examples src/BlazorUI/Demo/Client/.../Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor*, _BitChoiceGroupItemDemo.razor*, _BitChoiceGroupOptionDemo.razor*	Reorganized demo sections: introduced new "External Icons" demo blocks (with FontAwesome and Bootstrap Icons variants), renamed and renumbered example blocks (example12→13, example13→14), added externalIconCustoms and externalIconItems sample data lists with BitIconInfo icon specifications. Minor BOM/formatting cleanup in file headers.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Poem

🐰 External icons hop into place,
With new BitIconInfo's grace,
GetIcon() resolves with care,
CSS classes float in the air,
Demos dance in reordered space!

🚥 Pre-merge checks | ✅ 5 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Add new Icon parameter to BitChoiceGroup' accurately and concisely summarizes the main change—adding a new Icon parameter to the BitChoiceGroup component.
Linked Issues check	✅ Passed	The PR successfully implements the Icon parameter for BitChoiceGroup to enable external icons. The changes include new Icon properties in BitChoiceGroupItem, BitChoiceGroupOption, and BitChoiceGroupNameSelectors, alongside supporting changes to the component logic and SCSS.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing the Icon parameter feature. While demo files and samples are updated to showcase the new functionality, these are appropriate supporting changes for a feature addition.
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 unit tests (beta)

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

---

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.}

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs (1)

444-464: ⚠️ Potential issue | 🔴 Critical

GetIconName is dead code and should be removed.

The search across the codebase confirms this internal method has no callers. Other components (Message, Timeline, NavBar, Breadcrumb, Nav) have their own GetIconName methods that are actively used, but the BitChoiceGroup version remains unused after the rendering was switched to use GetIcon instead.

🤖 Fix all issues with AI agents

In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs`:
- Around line 569-583: The sample Razor string example12RazorCode is missing the
Bootstrap Icons stylesheet needed by BitIconInfo.Bi("calendar-month"); update
example12RazorCode to include the Bootstrap Icons CSS link (the same link used
in the actual demo) alongside the existing FontAwesome link so the Bi icon
renders correctly.

🧹 Nitpick comments (3)

src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupOption.cs (1)

36-38: Minor inconsistency in XML doc example formatting.

The examples have inconsistent spacing around =: Line 36 uses Icon="..." (no spaces) while lines 37-38 use Icon = ... (with spaces). Same issue exists in BitChoiceGroupItem.cs lines 32-34.

Proposed fix for consistency

     /// <example>
-    /// Bootstrap: Icon="BitIconInfo.Bi("gear-fill")"
-    /// FontAwesome: Icon = BitIconInfo.Fa("solid house")
-    /// Custom CSS: Icon = BitIconInfo.Css("my-icon-class")
+    /// Bootstrap: Icon = BitIconInfo.Bi("gear-fill")
+    /// FontAwesome: Icon = BitIconInfo.Fa("solid house")
+    /// Custom CSS: Icon = BitIconInfo.Css("my-icon-class")
     /// </example>

src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupItem.cs (1)

38-41: Consider adding a deprecation hint or cross-reference to the IconName doc.

Now that Icon exists and takes precedence, the IconName summary could mention: "For external icons, prefer Icon instead." This would help guide API consumers toward the right property.

Proposed doc enhancement

     /// <summary>
-    /// The icon to show as content of the BitChoiceGroup item.
+    /// The built-in Fluent UI icon name to show as content of the BitChoiceGroup item.
+    /// For external icon libraries, use <see cref="Icon"/> instead.
     /// </summary>
     public string? IconName { get; set; }

This applies to both BitChoiceGroupItem.cs and BitChoiceGroupOption.cs.

src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss (1)

231-235: Commented-out CSS rules should be removed or uncommented.

Lines 234 and 254 have commented-out width properties (//width: var(--bit-chg-ico-size); and //width: unset;). These look like debug artifacts. If the width is intentionally omitted (to let external icon libraries control sizing), remove the comments. If it's needed, uncomment them.

The static analysis also flags these for missing a space after // and a missing empty line before the comment (stylelint scss/double-slash-comment-whitespace-inside, scss/double-slash-comment-empty-line-before).

🔧 Proposed fix: remove commented-out rules

 .bit-chg-ico {
     speak: none;
     display: inline-block;
-    //width: var(--bit-chg-ico-size);
 }

     .bit-chg-ico {
-        //width: unset;
     }

[sonarqubecloud]

Quality Gate failed

Failed conditions
33.3% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud