feat(blazorui): add loading features to BitButton and remove BitLoadi…

…ngButton #6009 (#6017)

src/BlazorUI/Bit.BlazorUI.Tests/Buttons/BitButtonTests.cs

@@ -282,4 +282,86 @@ public void BitButtonSizeOfButtonTest(BitButtonSize? size)
             Assert.AreEqual(2, bitButton.ClassList.Length);
         }
     }
+
+    [DataTestMethod,
+        DataRow(true),
+        DataRow(false),
+    ]
+    public void BitButtonLoadingContentTest(bool isLoading)
+    {
+        const string textContent = "Hi";
+
+        var com = RenderComponent<BitButton>(parameters =>
+        {
+            parameters.Add(p => p.Content, textContent);
+            parameters.Add(p => p.IsLoading, isLoading);
+        });
+
+        var bitButton = com.Find(".bit-btn");
+
+        if (isLoading)
+        {
+            Assert.IsTrue(bitButton.FirstElementChild.ClassList.Contains("bit-btn-ldg"));
+        }
+        else
+        {
+            Assert.AreEqual(textContent, bitButton.TextContent);
+        }
+    }
+
+    [DataTestMethod,
+        DataRow(BitLabelPosition.Top),
+        DataRow(BitLabelPosition.Top),
+        DataRow(BitLabelPosition.Top),
+        DataRow(BitLabelPosition.Top),
+
+        DataRow(BitLabelPosition.Right),
+        DataRow(BitLabelPosition.Right),
+        DataRow(BitLabelPosition.Right),
+        DataRow(BitLabelPosition.Right),
+
+        DataRow(BitLabelPosition.Bottom),
+        DataRow(BitLabelPosition.Bottom),
+        DataRow(BitLabelPosition.Bottom),
+        DataRow(BitLabelPosition.Bottom),
+
+        DataRow(BitLabelPosition.Left),
+        DataRow(BitLabelPosition.Left),
+        DataRow(BitLabelPosition.Left),
+        DataRow(BitLabelPosition.Left),
+
+        DataRow(null),
+    ]
+    public void BitButtonLoaderTest(BitLabelPosition? labelPosition)
+    {
+        const string loadingLabel = "I'm Loading Label";
+
+        var com = RenderComponent<BitButton>(parameters =>
+        {
+            parameters.Add(p => p.IsLoading, true);
+            parameters.Add(p => p.LoadingLabel, loadingLabel);
+            if (labelPosition.HasValue)
+            {
+                parameters.Add(p => p.LoadingLabelPosition, labelPosition.Value);
+            }
+        });
+
+        var bitButton = com.Find(".bit-btn");
+
+        var labelPositionClass = labelPosition switch
+        {
+            BitLabelPosition.Top => "bit-btn-top",
+            BitLabelPosition.Right => "bit-btn-rgt",
+            BitLabelPosition.Bottom => "bit-btn-btm",
+            BitLabelPosition.Left => "bit-btn-lft",
+            _ => "bit-btn-rgt"
+        };
+
+        Assert.AreEqual(loadingLabel, bitButton.LastElementChild.TextContent);
+
+        Assert.IsTrue(bitButton.FirstElementChild.ClassList.Contains("bit-btn-ldg"));
+
+        Assert.IsTrue(bitButton.FirstElementChild.ClassList.Contains(labelPositionClass));
+    }
+
 }

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

@@ -14,7 +14,7 @@
        aria-label="@AriaLabel"
        aria-hidden="@AriaHidden"
        aria-describedby="@AriaDescription">
-        @ChildContent
+        @(Content ?? ChildContent)
     </a>
 }
 else
@@ -29,6 +29,28 @@ else
             aria-label="@AriaLabel"
             aria-hidden="@AriaHidden"
             aria-describedby="@AriaDescription">
-        @ChildContent
+        @if (IsLoading)
+        {
+            if (LoadingTemplate is not null)
+            {
+                @LoadingTemplate
+            }
+            else
+            {
+                <div style="@Styles?.LoadingContainer" class="bit-btn-ldg @GetLabelPositionClass() @Classes?.LoadingContainer">
+                    <div style="@Styles?.Spinner" class="bit-btn-spn @Classes?.Spinner"></div>
+                    @if (LoadingLabel.HasValue())
+                    {
+                        <div style="@Styles?.LoadingLabel" class="bit-btn-lbl @Classes?.LoadingLabel">
+                            @LoadingLabel
+                        </div>
+                    }
+                </div>
+            }
+        }
+        else
+        {
+            @(Content ?? ChildContent)
+        }
     </button>
 }

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

@@ -49,6 +49,21 @@ public BitButtonStyle ButtonStyle
         }
     }
 
+    /// <summary>
+    /// The type of the button
+    /// </summary>
+    [Parameter] public BitButtonType? ButtonType { get; set; }
+
+    /// <summary>
+    /// The content of button, It can be Any custom tag or a text
+    /// </summary>
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes for different parts of the BitButton.
+    /// </summary>
+    [Parameter] public BitButtonClassStyles? Classes { get; set; }
+
     /// <summary>
     /// The color of button
     /// </summary>
@@ -64,7 +79,42 @@ public BitButtonColor? Color
             ClassBuilder.Reset();
         }
     }
-
+
+    /// <summary>
+    /// Alias of ChildContent.
+    /// </summary>
+    [Parameter] public RenderFragment? Content { get; set; }
+
+    /// <summary>
+    /// URL the link points to, if provided, button renders as an anchor
+    /// </summary>
+    [Parameter] public string? Href { get; set; }
+
+    /// <summary>
+    /// Determine whether the button is in loading mode or not.
+    /// </summary>        
+    [Parameter] public bool IsLoading { get; set; }
+
+    /// <summary>
+    /// The loading label to show next to the spinner.
+    /// </summary>
+    [Parameter] public string? LoadingLabel { get; set; }
+
+    /// <summary>
+    /// The position of the loading Label in regards to the spinner animation.
+    /// </summary>
+    [Parameter] public BitLabelPosition LoadingLabelPosition { get; set; } = BitLabelPosition.Right;
+
+    /// <summary>
+    /// Used to customize the content inside the Button in the Loading state.
+    /// </summary>
+    [Parameter] public RenderFragment? LoadingTemplate { get; set; }
+
+    /// <summary>
+    /// Callback for when the button clicked
+    /// </summary>
+    [Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
+
     /// <summary>
     /// The size of button, Possible values: Small | Medium | Large
     /// </summary>
@@ -82,24 +132,9 @@ public BitButtonSize? Size
     }
 
     /// <summary>
-    /// The type of the button
-    /// </summary>
-    [Parameter] public BitButtonType? ButtonType { get; set; }
-
-    /// <summary>
-    /// The content of button, It can be Any custom tag or a text
-    /// </summary>
-    [Parameter] public RenderFragment? ChildContent { get; set; }
-
-    /// <summary>
-    /// URL the link points to, if provided, button renders as an anchor
+    /// Custom CSS styles for different parts of the BitButton.
     /// </summary>
-    [Parameter] public string? Href { get; set; }
-
-    /// <summary>
-    /// Callback for when the button clicked
-    /// </summary>
-    [Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
+    [Parameter] public BitButtonClassStyles? Styles { get; set; }
 
     /// <summary>
     /// If Href provided, specifies how to open the link
@@ -116,6 +151,8 @@ public BitButtonSize? Size
 
     protected override void RegisterCssClasses()
     {
+        ClassBuilder.Register(() => Classes?.Root);
+
         ClassBuilder.Register(() => ButtonStyle switch
         {
             BitButtonStyle.Primary => "bit-btn-pri",
@@ -143,6 +180,11 @@ protected override void RegisterCssClasses()
         });
     }
 
+    protected override void RegisterCssStyles()
+    {
+        StyleBuilder.Register(() => Styles?.Root);
+    }
+
     protected override void OnParametersSet()
     {
         if (IsEnabled is false)
@@ -154,6 +196,16 @@ protected override void OnParametersSet()
 
         base.OnParametersSet();
     }
+
+    private string GetLabelPositionClass()
+        => LoadingLabelPosition switch
+        {
+            BitLabelPosition.Top => "bit-btn-top",
+            BitLabelPosition.Left => "bit-btn-lft",
+            BitLabelPosition.Right => "bit-btn-rgt",
+            BitLabelPosition.Bottom => "bit-btn-btm",
+            _ => "bit-btn-rgt"
+        };
 
     protected virtual async Task HandleOnClick(MouseEventArgs e)
     {