Add new Icon parameter to BitChoiceGroup (#12078)

src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs

@@ -1,4 +1,4 @@
-using System.Text;
+using System.Text;
 using System.Diagnostics.CodeAnalysis;
 
 namespace Bit.BlazorUI;
@@ -339,7 +339,7 @@ internal string GetItemContainerCssClasses(TItem item)
             cssClass.Append(' ').Append("bit-chg-ids");
         }
 
-        if (GetImageSrc(item).HasValue() || GetIconName(item).HasValue())
+        if (GetImageSrc(item).HasValue() || GetIcon(item) is not null)
         {
             cssClass.Append(' ').Append("bit-chg-ihi");
         }
@@ -349,7 +349,7 @@ internal string GetItemContainerCssClasses(TItem item)
 
     internal string GetItemLabelCssClasses(TItem item)
     {
-        var hasImageOrIcon = GetImageSrc(item).HasValue() || GetIconName(item).HasValue();
+        var hasImageOrIcon = GetImageSrc(item).HasValue() || GetIcon(item) is not null;
         return hasImageOrIcon && ItemLabelTemplate is null && Inline is false
                 ? "bit-chg-ili"
                 : string.Empty;
@@ -404,6 +404,43 @@ internal bool GetIsEnabled(TItem item)
         return item.GetValueFromProperty(NameSelectors.IsEnabled.Name, true);
     }
 
+    internal BitIconInfo? GetIcon(TItem item)
+    {
+        if (item is BitChoiceGroupItem<TValue> choiceGroupItem)
+        {
+            return BitIconInfo.From(choiceGroupItem.Icon, choiceGroupItem.IconName);
+        }
+
+        if (item is BitChoiceGroupOption<TValue> choiceGroupOption)
+        {
+            return BitIconInfo.From(choiceGroupOption.Icon, choiceGroupOption.IconName);
+        }
+
+        if (NameSelectors is null) return null;
+
+        BitIconInfo? icon = null;
+        if (NameSelectors.Icon.Selector is not null)
+        {
+            icon = NameSelectors.Icon.Selector!(item);
+        }
+        else
+        {
+            icon = item.GetValueFromProperty<BitIconInfo?>(NameSelectors.Icon.Name);
+        }
+
+        string? iconName = null;
+        if (NameSelectors.IconName.Selector is not null)
+        {
+            iconName = NameSelectors.IconName.Selector!(item);
+        }
+        else
+        {
+            iconName = item.GetValueFromProperty<string?>(NameSelectors.IconName.Name);
+        }
+
+        return BitIconInfo.From(icon, iconName);
+    }
+
     internal string? GetIconName(TItem item)
     {
         if (item is BitChoiceGroupItem<TValue> choiceGroupItem)

src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss

@@ -1,4 +1,4 @@
-@import "../../../Styles/functions.scss";
+@import "../../../Styles/functions.scss";
 
 .bit-chg {
     display: flex;
@@ -99,8 +99,8 @@
         box-sizing: border-box;
         transform: translateY(-50%);
         width: var(--bit-chg-circle-size);
-        transition: border-color 0.2s cubic-bezier(0.4, 0, 0.23, 1);
         border: $shp-border-width $shp-border-style $clr-brd-pri;
+        transition: border-color 0.2s cubic-bezier(0.4, 0, 0.23, 1);
     }
 
     &::after {
@@ -111,12 +111,12 @@
         position: absolute;
         border-radius: 50%;
         box-sizing: border-box;
-        transform: translateY(-50%);
+        inset-inline-start: 50%;
+        transform: translate(-50%, -50%);
         background-color: $clr-fg-sec-hover;
         transition-property: background-color;
         width: calc(var(--bit-chg-circle-size) / 2);
         transition: border-width 0.2s cubic-bezier(0.4, 0, 0.23, 1);
-        inset-inline-start: calc(var(--bit-chg-circle-size) / 4);
     }
 
     @media (hover: hover) {
@@ -226,11 +226,12 @@
     height: var(--bit-chg-ico-size);
     font-size: var(--bit-chg-ico-size);
     line-height: var(--bit-chg-ico-size);
+}
 
-    i {
-        speak: none;
-        display: inline-block;
-    }
+.bit-chg-ico {
+    speak: none;
+    display: inline-block;
+    //width: var(--bit-chg-ico-size);
 }
 
 .bit-chg-inl {
@@ -248,6 +249,10 @@
         padding: 0;
         font-size: calc(var(--bit-chg-fontsize) + spacing(0.25));
     }
+
+    .bit-chg-ico {
+        //width: unset;
+    }
 }
 
 .bit-chg-ich {
@@ -329,10 +334,10 @@
 
     .bit-chg-icw {
         color: $clr-fg-dis;
+    }
 
-        i {
-            color: $clr-fg-dis;
-        }
+    .bit-chg-ico {
+        color: $clr-fg-dis;
     }
 }
 
@@ -491,4 +496,4 @@
     &.bit-chg-lg {
         --bit-chg-item-gap: #{spacing(3)};
     }
-}
+}

src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupItem.cs

@@ -22,6 +22,19 @@ public class BitChoiceGroupItem<TValue>
     /// </summary>
     public bool IsEnabled { get; set; } = true;
 
+    /// <summary>
+    /// The icon to show as content of the BitChoiceGroup item.
+    /// Takes precedence over <see cref="IconName"/> when both are set.
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="IconName"/> instead.
+    /// </summary>
+    /// <example>
+    /// Bootstrap: Icon="BitIconInfo.Bi("gear-fill")"
+    /// FontAwesome: Icon = BitIconInfo.Fa("solid house")
+    /// Custom CSS: Icon = BitIconInfo.Css("my-icon-class")
+    /// </example>
+    public BitIconInfo? Icon { get; set; }
+
     /// <summary>
     /// The icon to show as content of the BitChoiceGroup item.
     /// </summary>

src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupNameSelectors.cs

@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI;
+namespace Bit.BlazorUI;
 
 public class BitChoiceGroupNameSelectors<TItem, TValue>
 {
@@ -22,6 +22,11 @@ public class BitChoiceGroupNameSelectors<TItem, TValue>
     /// </summary>
     public BitNameSelectorPair<TItem, bool> IsEnabled { get; set; } = new(nameof(BitChoiceGroupItem<TValue>.IsEnabled));
 
+    /// <summary>
+    /// The Icon field name and selector of the custom input class.
+    /// </summary>
+    public BitNameSelectorPair<TItem, BitIconInfo?> Icon { get; set; } = new(nameof(BitChoiceGroupItem<TValue>.Icon));
+
     /// <summary>
     /// The IconName field name and selector of the custom input class.
     /// </summary>

src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupOption.cs

@@ -26,6 +26,19 @@ public partial class BitChoiceGroupOption<TValue> : ComponentBase, IDisposable
     /// </summary>
     [Parameter] public bool IsEnabled { get; set; } = true;
 
+    /// <summary>
+    /// The icon to show as content of the BitChoiceGroup option.
+    /// Takes precedence over <see cref="IconName"/> when both are set.
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="IconName"/> instead.
+    /// </summary>
+    /// <example>
+    /// Bootstrap: Icon="BitIconInfo.Bi("gear-fill")"
+    /// FontAwesome: Icon="BitIconInfo.Fa("solid house")"
+    /// Custom CSS: Icon="BitIconInfo.Css("my-icon-class")"
+    /// </example>
+    [Parameter] public BitIconInfo? Icon { get; set; }
+
     /// <summary>
     /// The icon to show as content of the BitChoiceGroup option.
     /// </summary>

src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/_BitChoiceGroupItem.razor

@@ -1,4 +1,4 @@
-@namespace Bit.BlazorUI
+@namespace Bit.BlazorUI
 @typeparam TItem
 @typeparam TValue
 
@@ -57,17 +57,17 @@
                     </div>
                 }
 
-                var iconName = ChoiceGroup.GetIconName(Item);
-                @if (iconName.HasValue())
+                var icon = ChoiceGroup.GetIcon(Item);
+                @if (icon is not null)
                 {
                     <div style="@ChoiceGroup.Styles?.ItemIconWrapper" class="bit-chg-icw @ChoiceGroup.Classes?.ItemIconWrapper">
                         <i aria-hidden="true"
                            style="@ChoiceGroup.Styles?.ItemIcon"
-                           class="bit-icon bit-icon--@iconName @ChoiceGroup.Classes?.ItemIcon" />
+                           class="bit-chg-ico @icon.GetCssClasses() @ChoiceGroup.Classes?.ItemIcon" />
                     </div>
                 }
 
-                @if (imageSrc.HasValue() || iconName.HasValue())
+                @if (imageSrc.HasValue() || icon is not null)
                 {
                     <div style="@ChoiceGroup.Styles?.ItemTextWrapper" class="bit-chg-itw @ChoiceGroup.Classes?.ItemTextWrapper">
                         <span style="@ChoiceGroup.Styles?.ItemText" class="bit-chg-itx @ChoiceGroup.Classes?.ItemText">@ChoiceGroup.GetText(Item)</span>

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs

@@ -341,11 +341,20 @@ public partial class BitChoiceGroupDemo
                    Description = "Whether the BitChoiceGroup item is enabled.",
                },
                new()
+               {
+                   Name = "Icon",
+                   Type = "BitIconInfo?",
+                   DefaultValue = "null",
+                   Description = "The icon to show as content of the BitChoiceGroup item. Takes precedence over IconName when both are set.",
+                   LinkType = LinkType.Link,
+                   Href = "#bit-icon-info",
+               },
+               new()
                {
                    Name = "IconName",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "The icon to show as content of the BitChoiceGroup item.",
+                   Description = "The icon name (built-in Fluent UI) to show as content of the BitChoiceGroup item.",
                },
                new()
                {
@@ -461,11 +470,20 @@ public partial class BitChoiceGroupDemo
                    Description = "Whether the BitChoiceGroup option is enabled.",
                },
                new()
+               {
+                   Name = "Icon",
+                   Type = "BitIconInfo?",
+                   DefaultValue = "null",
+                   Description = "The icon to show as content of the BitChoiceGroup option. Takes precedence over IconName when both are set.",
+                   LinkType = LinkType.Link,
+                   Href = "#bit-icon-info",
+               },
+               new()
                {
                    Name = "IconName",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "The icon to show as content of the BitChoiceGroup option.",
+                   Description = "The icon name (built-in Fluent UI) to show as content of the BitChoiceGroup option.",
                },
                new()
                {
@@ -581,11 +599,20 @@ public partial class BitChoiceGroupDemo
                    Description = "Whether the BitChoiceGroup option is enabled.",
                },
                new()
+               {
+                   Name = "Icon",
+                   Type = "BitNameSelectorPair<TItem, BitIconInfo?>",
+                   DefaultValue = "new(nameof(BitChoiceGroupItem<TValue>.Icon))",
+                   Description = "Icon field name and selector of the custom input class.",
+                   LinkType = LinkType.Link,
+                   Href = "#bit-icon-info",
+               },
+               new()
                {
                    Name = "IconName",
                    Type = "BitNameSelectorPair<TItem, string?>",
                    DefaultValue = "new(nameof(BitChoiceGroupItem<TValue>.IconName))",
-                   Description = "The icon to show as content of the BitChoiceGroup option.",
+                   Description = "IconName field name and selector of the custom input class.",
                },
                new()
                {
@@ -778,6 +805,35 @@ public partial class BitChoiceGroupDemo
                    Description = "Custom CSS classes/styles for the text of each item of the BitChoiceGroup.",
                },
             ]
+        },
+        new()
+        {
+            Id = "bit-icon-info",
+            Title = "BitIconInfo",
+            Parameters =
+            [
+               new()
+               {
+                   Name = "Name",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Gets or sets the name of the icon."
+               },
+               new()
+               {
+                   Name = "BaseClass",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to \"bit-icon\". For external icon libraries like FontAwesome, you might set this to \"fa\" or leave empty."
+               },
+               new()
+               {
+                   Name = "Prefix",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to \"bit-icon--\". For external icon libraries, you might set this to \"fa-\" or leave empty."
+               },
+            ]
         }
     ];
 }

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/Order.cs

@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.ChoiceGroup;
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.ChoiceGroup;
 
 public class Order
 {
@@ -8,6 +8,7 @@ public class Order
     public string? ImageDescription { get; set; }
     public BitImageSize? ImageSize { get; set; }
     public string? SelectedImageAddress { get; set; }
+    public BitIconInfo? Icon { get; set; }
     public string? IconName { get; set; }
     public bool IsDisabled { get; set; }
     public string? Class { get; set; }