From 1d893e122dd27174f02ad99a7f3e454c50f4573c Mon Sep 17 00:00:00 2001
From: Hanieh <105555666+Hanieh-Sadeghi@users.noreply.github.com>
Date: Mon, 9 Oct 2023 03:20:06 -0400
Subject: [PATCH] feat(blazorui): add missing Root property from the
 BitToggleButtonClassStyles #5387 (#5494)

---
 .../BitToggleButton/BitToggleButton.razor.cs        |  7 +++++++
 .../BitToggleButton/BitToggleButtonClassStyles.cs   | 11 ++++++++---
 .../Components/Buttons/BitToggleButtonDemo.razor.cs | 13 ++++++++++---
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitToggleButton/BitToggleButton.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitToggleButton/BitToggleButton.razor.cs
index a64650eb51..a9418a4095 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitToggleButton/BitToggleButton.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitToggleButton/BitToggleButton.razor.cs
@@ -137,12 +137,19 @@ public bool IsChecked
 
     protected override void RegisterCssClasses()
     {
+        ClassBuilder.Register(() => Classes?.Root);
+
         ClassBuilder.Register(() => ButtonStyle == BitButtonStyle.Primary
                                           ? $"{RootElementClass}-pri"
                                           : $"{RootElementClass}-std");
 
         ClassBuilder.Register(() => IsChecked ? $"{RootElementClass}-chk" : string.Empty);
     }
+    
+    protected override void RegisterCssStyles()
+    {
+        StyleBuilder.Register(() => Styles?.Root);
+    }
 
     protected override async Task OnInitializedAsync()
     {
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitToggleButton/BitToggleButtonClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitToggleButton/BitToggleButtonClassStyles.cs
index e2b7260a2b..5713ffb8ee 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitToggleButton/BitToggleButtonClassStyles.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitToggleButton/BitToggleButtonClassStyles.cs
@@ -3,17 +3,22 @@
 public class BitToggleButtonClassStyles
 {
     /// <summary>
-    /// Custom CSS classes/styles for the icon element.
+    /// Custom CSS classes/styles for the root element of the BitToggleButton.
+    /// </summary>
+    public string? Root { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the icon element of the BitToggleButton.
     /// </summary>
     public string? Icon { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the label and icon container.
+    /// Custom CSS classes/styles for the label and icon container of the BitToggleButton.
     /// </summary>
     public string? Container { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the text element.
+    /// Custom CSS classes/styles for the text element of the BitToggleButton.
     /// </summary>
     public string? Text { get; set; }
 }
diff --git a/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitToggleButtonDemo.razor.cs b/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitToggleButtonDemo.razor.cs
index 2c2ff5eaef..e4a6ec6cd2 100644
--- a/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitToggleButtonDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitToggleButtonDemo.razor.cs
@@ -152,26 +152,33 @@ public partial class BitToggleButtonDemo
             Title = "BitToggleButtonClassStyles",
             Parameters = new()
             {
+               new()
+               {
+                   Name = "Root",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the root element of the BitToggleButton.",
+               },
                new()
                {
                    Name = "Icon",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the icon element.",
+                   Description = "Custom CSS classes/styles for the icon element of the BitToggleButton.",
                },
                new()
                {
                    Name = "Container",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the icon and label container.",
+                   Description = "Custom CSS classes/styles for the icon and label container of the BitToggleButton.",
                },
                new()
                {
                    Name = "Text",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the text element.",
+                   Description = "Custom CSS classes/styles for the text element of the BitToggleButton.",
                }
             }
         }