feat(blazorui): add Classes/Styles parameters to BitButtonGroup #9514 (…

…#9546)

src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor

@@ -22,7 +22,7 @@
                 disabled="@(isEnabled is false)"
                 aria-disabled="@(isEnabled is false)"
                 title="@GetItemTitle(item)"
-                style="@GetStyle(item)"
+                style="@GetItemStyle(item)"
                 class="@GetItemClass(item)">
             @if (template is not null)
             {
@@ -37,13 +37,13 @@
                 var iconName = GetItemIconName(item);
                 @if (iconName.HasValue())
                 {
-                    <i class="bit-icon bit-icon--@iconName" />
+                    <i style="@Styles?.Icon" class="bit-icon bit-icon--@iconName @Classes?.Icon" />
                 }
 
                 var text = GetItemText(item);
                 if (text.HasValue())
                 {
-                    <span class="bit-btg-btx">@text</span>
+                    <span style="@Styles?.Text" class="bit-btg-btx @Classes?.Text">@text</span>
                 }
             }
         </button>

src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor.cs

@@ -21,6 +21,11 @@ public partial class BitButtonGroup<TItem> : BitComponentBase where TItem : clas
     /// </summary>
     [Parameter] public RenderFragment? ChildContent { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes for different parts of the ButtonGroup.
+    /// </summary>
+    [Parameter] public BitButtonGroupClassStyles? Classes { get; set; }
+
     /// <summary>
     /// Defines the general colors available in the bit BlazorUI.
     /// </summary>
@@ -63,6 +68,11 @@ public partial class BitButtonGroup<TItem> : BitComponentBase where TItem : clas
     [Parameter, ResetClassBuilder]
     public BitSize? Size { get; set; }
 
+    /// <summary>
+    /// Custom CSS styles for different parts of the ButtonGroup.
+    /// </summary>
+    [Parameter] public BitButtonGroupClassStyles? Styles { get; set; }
+
     /// <summary>
     /// Display ButtonGroup with toggle mode enabled for each button.
     /// </summary>
@@ -103,6 +113,8 @@ internal void UnregisterOption(BitButtonGroupOption option)
 
     protected override void RegisterCssClasses()
     {
+        ClassBuilder.Register(() => Classes?.Root);
+
         ClassBuilder.Register(() => Variant switch
         {
             BitVariant.Fill => "bit-btg-fil",
@@ -144,6 +156,11 @@ protected override void RegisterCssClasses()
         ClassBuilder.Register(() => Vertical ? "bit-btg-vrt" : string.Empty);
     }
 
+    protected override void RegisterCssStyles()
+    {
+        StyleBuilder.Register(() => Styles?.Root);
+    }
+
     protected override void OnParametersSet()
     {
         base.OnParametersSet();
@@ -211,6 +228,11 @@ private async Task HandleOnItemClick(TItem item)
         if (_toggleItem == item)
         {
             classes.Add("bit-btg-chk");
+
+            if (Classes?.ToggledButton.HasValue() ?? false)
+            {
+                classes.Add(Classes.ToggledButton!);
+            }
         }
 
         var classItem = GetClass(item);
@@ -219,9 +241,37 @@ private async Task HandleOnItemClick(TItem item)
             classes.Add(classItem!);
         }
 
+        if (Classes?.Button.HasValue() ?? false)
+        {
+            classes.Add(Classes.Button!);
+        }
+
         return string.Join(' ', classes);
     }
 
+    private string? GetItemStyle(TItem? item)
+    {
+        List<string> styles = new();
+
+        var style = GetStyle(item);
+        if (style.HasValue())
+        {
+            styles.Add(style!.Trim(';'));
+        }
+
+        if (Styles?.Button.HasValue() ?? false)
+        {
+            styles.Add(Styles.Button!.Trim(';'));
+        }
+
+        if (_toggleItem == item && (Styles?.ToggledButton.HasValue() ?? false))
+        {
+            styles.Add(Styles.ToggledButton!);
+        }
+
+        return string.Join(';', styles);
+    }
+
     private string? GetItemText(TItem? item)
     {
         if (IconOnly) return null;

src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupClassStyles.cs

@@ -0,0 +1,29 @@
+namespace Bit.BlazorUI;
+
+public class BitButtonGroupClassStyles
+{
+    /// <summary>
+    /// Custom CSS classes/styles for the root element of the BitButtonGroup.
+    /// </summary>
+    public string? Root { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the internal button of the BitButtonGroup.
+    /// </summary>
+    public string? Button { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the icon of the BitButtonGroup.
+    /// </summary>
+    public string? Icon { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the text of the BitButtonGroup.
+    /// </summary>
+    public string? Text { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the button when in toggle mode of the BitButtonGroup.
+    /// </summary>
+    public string? ToggledButton { get; set; }
+}

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.cs

@@ -19,6 +19,15 @@ public partial class BitButtonGroupDemo
             Description = "Determines that only the icon should be rendered.",
         },
         new()
+        {
+            Name = "Classes",
+            Type = "BitButtonGroupClassStyles?",
+            DefaultValue = "null",
+            Description = "Custom CSS classes for different parts of the ButtonGroup.",
+            LinkType = LinkType.Link,
+            Href = "#class-styles",
+        },
+        new()
         {
             Name = "Color",
             Type = "BitColor?",
@@ -82,6 +91,15 @@ public partial class BitButtonGroupDemo
             Href = "#button-size-enum",
         },
         new()
+        {
+            Name = "Styles",
+            Type = "BitButtonGroupClassStyles?",
+            DefaultValue = "null",
+            Description = "Custom CSS styles for different parts of the ButtonGroup.",
+            LinkType = LinkType.Link,
+            Href = "#class-styles",
+        },
+        new()
         {
             Name = "Variant",
             Type = "BitVariant?",
@@ -342,6 +360,49 @@ public partial class BitButtonGroupDemo
             ]
         },
         new()
+        {
+            Id = "class-styles",
+            Title = "BitButtonGroupClassStyles",
+            Parameters =
+            [
+               new()
+               {
+                   Name = "Root",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the root element of the BitButtonGroup.",
+               },
+               new()
+               {
+                   Name = "Button",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the internal button of the BitButtonGroup.",
+               },
+               new()
+               {
+                   Name = "Icon",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the icon of the BitButtonGroup."
+               },
+               new()
+               {
+                   Name = "Text",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the text of the BitButtonGroup."
+               },
+               new()
+               {
+                   Name = "ToggledButton",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the button when in toggle mode of the BitButtonGroup.",
+               },
+            ],
+        },
+        new()
         {
             Id = "name-selectors",
             Title = "BitButtonGroupNameSelectors",

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.scss

@@ -26,4 +26,10 @@
         color: peachpuff;
         background-color: tomato;
     }
+
+    .custom-btn {
+        color: aliceblue;
+        border-color: aliceblue;
+        background-color: crimson;
+    }
 }