diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Buttons/BitButtonTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/Buttons/BitButtonTests.cs index 209feda1f1..8139e18eb8 100644 --- a/src/BlazorUI/Bit.BlazorUI.Tests/Buttons/BitButtonTests.cs +++ b/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(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(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)); + } + } diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Buttons/BitLoadingButtonTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/Buttons/BitLoadingButtonTests.cs deleted file mode 100644 index 090dfba7c3..0000000000 --- a/src/BlazorUI/Bit.BlazorUI.Tests/Buttons/BitLoadingButtonTests.cs +++ /dev/null @@ -1,138 +0,0 @@ -using Bunit; -using Microsoft.VisualStudio.TestTools.UnitTesting; - -namespace Bit.BlazorUI.Tests.Buttons; - -[TestClass] -public class BitLoadingButtonTests : BunitTestContext -{ - [DataTestMethod, - DataRow(true), - DataRow(false) - ] - public void BitLoadingButtonTest(bool isEnabled) - { - var com = RenderComponent(parameters => - { - parameters.Add(p => p.IsEnabled, isEnabled); - }); - - var bitLoadingButton = com.Find(".bit-ldb"); - - if (isEnabled) - { - Assert.IsFalse(bitLoadingButton.ClassList.Contains("bit-dis")); - } - else - { - Assert.IsTrue(bitLoadingButton.ClassList.Contains("bit-dis")); - } - } - - [DataTestMethod, - DataRow(BitButtonStyle.Primary, BitButtonType.Button), - DataRow(BitButtonStyle.Primary, BitButtonType.Submit), - DataRow(BitButtonStyle.Primary, BitButtonType.Reset), - - DataRow(BitButtonStyle.Standard, BitButtonType.Button), - DataRow(BitButtonStyle.Standard, BitButtonType.Submit), - DataRow(BitButtonStyle.Standard, BitButtonType.Reset) - ] - public void BitLoadingButtonStyleAndTypeTest(BitButtonStyle style, BitButtonType type) - { - var com = RenderComponent(parameters => - { - parameters.Add(p => p.ButtonStyle, style); - parameters.Add(p => p.ButtonType, type); - }); - - var styleClass = style is BitButtonStyle.Standard ? "bit-ldb-std" : "bit-ldb-pri"; - - var bitLoadingButton = com.Find(".bit-ldb"); - - Assert.IsTrue(bitLoadingButton.ClassList.Contains(styleClass)); - - Assert.IsTrue(bitLoadingButton.GetAttribute("type").Equals(type.GetValue())); - } - - [DataTestMethod, - DataRow(true), - DataRow(false), - ] - public void BitLoadingButtonContentTest(bool isLoading) - { - const string textContent = "Hi"; - - var com = RenderComponent(parameters => - { - parameters.Add(p => p.ChildContent, textContent); - parameters.Add(p => p.IsLoading, isLoading); - }); - - var bitLoadingButton = com.Find(".bit-ldb"); - - if (isLoading) - { - Assert.IsTrue(bitLoadingButton.FirstElementChild.ClassList.Contains("bit-ldb-ldg")); - } - else - { - Assert.AreEqual(textContent, bitLoadingButton.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 BitLoadingButtonLoaderTest(BitLabelPosition? labelPosition) - { - const string loadingLabel = "I'm Loading Label"; - - var com = RenderComponent(parameters => - { - parameters.Add(p => p.IsLoading, true); - parameters.Add(p => p.LoadingLabel, loadingLabel); - if (labelPosition.HasValue) - { - parameters.Add(p => p.LoadingLabelPosition, labelPosition.Value); - } - }); - - var bitLoadingButton = com.Find(".bit-ldb"); - - var labelPositionClass = labelPosition switch - { - BitLabelPosition.Top => "bit-ldb-top", - BitLabelPosition.Right => "bit-ldb-right", - BitLabelPosition.Bottom => "bit-ldb-bottom", - BitLabelPosition.Left => "bit-ldb-left", - _ => "bit-ldb-right" - }; - - Assert.AreEqual(loadingLabel, bitLoadingButton.LastElementChild.TextContent); - - Assert.IsTrue(bitLoadingButton.FirstElementChild.ClassList.Contains("bit-ldb-ldg")); - - Assert.IsTrue(bitLoadingButton.FirstElementChild.ClassList.Contains(labelPositionClass)); - } -} diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor index dc7b33a077..37af1ce130 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor +++ b/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) } 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 + { +
+
+ @if (LoadingLabel.HasValue()) + { +
+ @LoadingLabel +
+ } +
+ } + } + else + { + @(Content ?? ChildContent) + } } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor.cs index 5d27bf0252..b8730ffbbc 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor.cs @@ -49,6 +49,21 @@ public BitButtonStyle ButtonStyle } } + /// + /// The type of the button + /// + [Parameter] public BitButtonType? ButtonType { get; set; } + + /// + /// The content of button, It can be Any custom tag or a text + /// + [Parameter] public RenderFragment? ChildContent { get; set; } + + /// + /// Custom CSS classes for different parts of the BitButton. + /// + [Parameter] public BitButtonClassStyles? Classes { get; set; } + /// /// The color of button /// @@ -64,7 +79,42 @@ public BitButtonColor? Color ClassBuilder.Reset(); } } - + + /// + /// Alias of ChildContent. + /// + [Parameter] public RenderFragment? Content { get; set; } + + /// + /// URL the link points to, if provided, button renders as an anchor + /// + [Parameter] public string? Href { get; set; } + + /// + /// Determine whether the button is in loading mode or not. + /// + [Parameter] public bool IsLoading { get; set; } + + /// + /// The loading label to show next to the spinner. + /// + [Parameter] public string? LoadingLabel { get; set; } + + /// + /// The position of the loading Label in regards to the spinner animation. + /// + [Parameter] public BitLabelPosition LoadingLabelPosition { get; set; } = BitLabelPosition.Right; + + /// + /// Used to customize the content inside the Button in the Loading state. + /// + [Parameter] public RenderFragment? LoadingTemplate { get; set; } + + /// + /// Callback for when the button clicked + /// + [Parameter] public EventCallback OnClick { get; set; } + /// /// The size of button, Possible values: Small | Medium | Large /// @@ -82,24 +132,9 @@ public BitButtonSize? Size } /// - /// The type of the button - /// - [Parameter] public BitButtonType? ButtonType { get; set; } - - /// - /// The content of button, It can be Any custom tag or a text - /// - [Parameter] public RenderFragment? ChildContent { get; set; } - - /// - /// URL the link points to, if provided, button renders as an anchor + /// Custom CSS styles for different parts of the BitButton. /// - [Parameter] public string? Href { get; set; } - - /// - /// Callback for when the button clicked - /// - [Parameter] public EventCallback OnClick { get; set; } + [Parameter] public BitButtonClassStyles? Styles { get; set; } /// /// 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) { diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.scss b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.scss index f4f6e8ab4c..6d649d67ea 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.scss @@ -8,6 +8,7 @@ min-width: spacing(8); min-height: spacing(4); box-sizing: border-box; + justify-content: center; font-size: spacing(1.75); padding: spacing(0.5) spacing(2); border-width: $shape-border-width; @@ -15,12 +16,24 @@ border-radius: $shape-border-radius; font-family: $typography-font-family; font-weight: $typography-font-weight; + --bit-btn-lbl-size: #{spacing(1.5)}; + --bit-btn-spn-size: #{spacing(2.5)}; &.bit-dis { cursor: default; pointer-events: none; color: $color-foreground-disabled; } + + @keyframes bit-btn-spinner-animation { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } + } } .bit-btn-pri { @@ -32,6 +45,7 @@ --bit-btn-pri-brd-clr: #{$color-primary-main}; --bit-btn-pri-hover-bg-clr: #{$color-action-hover-primary}; --bit-btn-pri-active-bg-clr: #{$color-action-active-primary}; + --bit-btn-ldg-brd-top-clr: #{$color-primary-dark}; @media (hover: hover) { &:hover { @@ -59,6 +73,7 @@ --bit-btn-sec-brd-clr: #{$color-secondary-text}; --bit-btn-sec-hover-bg-clr: #{$color-action-hover-secondary}; --bit-btn-sec-active-bg-clr: #{$color-action-active-secondary}; + --bit-btn-ldg-brd-top-clr: #{$color-primary-dark}; @media (hover: hover) { &:hover { @@ -82,6 +97,7 @@ --bit-btn-sec-clr: #{$color-secondary-text}; --bit-btn-sec-hover-bg-clr: #{$color-action-hover-secondary}; --bit-btn-sec-active-bg-clr: #{$color-action-active-secondary}; + --bit-btn-ldg-brd-top-clr: #{$color-primary-dark}; @media (hover: hover) { &:hover { @@ -94,8 +110,35 @@ } } +.bit-btn-spn { + border-radius: 50%; + width: var(--bit-btn-spn-size); + height: var(--bit-btn-spn-size); + border-width: spacing(0.2125); + border-style: $shape-border-style; + border-color: $color-border-secondary; + border-top-color: var(--bit-btn-ldg-brd-top-clr); + animation: bit-btn-spinner-animation 1.3s linear infinite; + animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67); +} + +.bit-btn-ldg { + display: flex; + gap: spacing(1); + align-items: center; + justify-content: center; + background-color: transparent; +} + +.bit-btn-lbl { + color: inherit; + text-align: center; + font-size: var(--bit-btn-lbl-size); +} + .bit-btn-inf { --bit-btn-bg-clr: #{$color-state-info-bg}; + --bit-btn-ldg-brd-top-clr: #{$color-state-info}; --bit-btn-pri-clr: #{$color-foreground-primary}; --bit-btn-pri-brd-clr: #{$color-state-info-bg}; --bit-btn-pri-hover-bg-clr: #{$color-action-hover-state-info-bg}; @@ -108,6 +151,7 @@ .bit-btn-suc { --bit-btn-bg-clr: #{$color-state-success-bg}; + --bit-btn-ldg-brd-top-clr: #{$color-state-success}; --bit-btn-pri-clr: #{$color-foreground-primary}; --bit-btn-pri-brd-clr: #{$color-state-success-bg}; --bit-btn-pri-hover-bg-clr: #{$color-action-hover-state-success-bg}; @@ -120,6 +164,7 @@ .bit-btn-wrn { --bit-btn-bg-clr: #{$color-state-warning-bg}; + --bit-btn-ldg-brd-top-clr: #{$color-state-warning}; --bit-btn-pri-clr: #{$color-foreground-primary}; --bit-btn-pri-brd-clr: #{$color-state-warning-bg}; --bit-btn-pri-hover-bg-clr: #{$color-action-hover-state-warning-bg}; @@ -132,6 +177,7 @@ .bit-btn-swr { --bit-btn-bg-clr: #{$color-state-severe-warning-bg}; + --bit-btn-ldg-brd-top-clr: #{$color-state-severe-warning}; --bit-btn-pri-clr: #{$color-foreground-primary}; --bit-btn-pri-brd-clr: #{$color-state-severe-warning-bg}; --bit-btn-pri-hover-bg-clr: #{$color-action-hover-state-severe-warning-bg}; @@ -144,6 +190,7 @@ .bit-btn-err { --bit-btn-bg-clr: #{$color-state-error-bg}; + --bit-btn-ldg-brd-top-clr: #{$color-state-error}; --bit-btn-pri-clr: #{$color-foreground-primary}; --bit-btn-pri-brd-clr: #{$color-state-error-bg}; --bit-btn-pri-hover-bg-clr: #{$color-action-hover-state-error-bg}; @@ -159,6 +206,8 @@ min-height: spacing(3); font-size: spacing(1.5); padding: spacing(0.3) spacing(1.5); + --bit-btn-lbl-size: #{spacing(1.75)}; + --bit-btn-spn-size: #{spacing(1.75)}; } .bit-btn-lg { @@ -166,4 +215,22 @@ min-height: spacing(5); font-size: spacing(2); padding: spacing(0.7) spacing(2.5); + --bit-btn-lbl-size: #{spacing(1.75)}; + --bit-btn-spn-size: #{spacing(3.25)}; +} + +.bit-btn-top { + flex-direction: column-reverse; +} + +.bit-btn-btm { + flex-direction: column; +} + +.bit-btn-rgt { + flex-direction: row; +} + +.bit-btn-lft { + flex-direction: row-reverse; } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitLoadingButton/BitLoadingButtonClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButtonClassStyles.cs similarity index 68% rename from src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitLoadingButton/BitLoadingButtonClassStyles.cs rename to src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButtonClassStyles.cs index dafa1c9d5f..f7c9a60d94 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitLoadingButton/BitLoadingButtonClassStyles.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButtonClassStyles.cs @@ -1,24 +1,24 @@ namespace Bit.BlazorUI; -public class BitLoadingButtonClassStyles +public class BitButtonClassStyles { /// - /// Custom CSS classes/styles for the root element of the BitLoadingButton. + /// Custom CSS classes/styles for the root element of the BitButton. /// public string? Root { get; set; } /// - /// Custom CSS classes/styles for the internal container of the BitLoadingButton. + /// Custom CSS classes/styles for the internal container of the BitButton. /// public string? LoadingContainer { get; set; } /// - /// Custom CSS classes/styles for the spinner of the BitLoadingButton. + /// Custom CSS classes/styles for the spinner of the BitButton. /// public string? Spinner { get; set; } /// - /// Custom CSS classes/styles for the label of the BitLoadingButton. + /// Custom CSS classes/styles for the label of the BitButton. /// public string? LoadingLabel { get; set; } } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitLoadingButton/BitLoadingButton.razor b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitLoadingButton/BitLoadingButton.razor deleted file mode 100644 index 0959dd4382..0000000000 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitLoadingButton/BitLoadingButton.razor +++ /dev/null @@ -1,37 +0,0 @@ -@namespace Bit.BlazorUI -@inherits BitComponentBase - - \ No newline at end of file diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitLoadingButton/BitLoadingButton.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitLoadingButton/BitLoadingButton.razor.cs deleted file mode 100644 index db6f98bbb6..0000000000 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitLoadingButton/BitLoadingButton.razor.cs +++ /dev/null @@ -1,145 +0,0 @@ -using Microsoft.AspNetCore.Components.Forms; - -namespace Bit.BlazorUI; - -public partial class BitLoadingButton -{ - private BitButtonStyle buttonStyle = BitButtonStyle.Primary; - - private int? _tabIndex; - private BitButtonType _buttonType; - - - /// - /// The EditContext, which is set if the button is inside an - /// - [CascadingParameter] public EditContext? EditContext { get; set; } - - - /// - /// Whether the icon button can have focus in disabled mode. - /// - [Parameter] public bool AllowDisabledFocus { get; set; } = true; - - /// - /// Detailed description of the icon button for the benefit of screen readers. - /// - [Parameter] public string? AriaDescription { get; set; } - - /// - /// If true, add an aria-hidden attribute instructing screen readers to ignore the element. - /// - [Parameter] public bool AriaHidden { get; set; } - - /// - /// The style of button, Possible values: Primary | Standard. - /// - [Parameter] - public BitButtonStyle ButtonStyle - { - get => buttonStyle; - set - { - buttonStyle = value; - ClassBuilder.Reset(); - } - } - - /// - /// The type of the button - /// - [Parameter] public BitButtonType? ButtonType { get; set; } - - /// - /// The content of button, It can be Any custom tag or a text. - /// - [Parameter] public RenderFragment? ChildContent { get; set; } - - /// - /// Custom CSS classes for different parts of the BitLoadingButton. - /// - [Parameter] public BitLoadingButtonClassStyles? Classes { get; set; } - - /// - /// Determine whether the button is in loading mode or not. - /// - [Parameter] public bool IsLoading { get; set; } - - /// - /// The loading label to show next to the spinner. - /// - [Parameter] public string? LoadingLabel { get; set; } - - /// - /// The position of the loading Label in regards to the spinner animation. - /// - [Parameter] public BitLabelPosition LoadingLabelPosition { get; set; } = BitLabelPosition.Right; - - /// - /// Used to customize the content inside the Button in the Loading state. - /// - [Parameter] public RenderFragment? LoadingTemplate { get; set; } - - /// - /// Callback for when the button clicked. - /// - [Parameter] public EventCallback OnClick { get; set; } - - /// - /// Custom CSS styles for different parts of the BitLoadingButton. - /// - [Parameter] public BitLoadingButtonClassStyles? Styles { get; set; } - - /// - /// The tooltip to show when the mouse is placed on the icon button. - /// - [Parameter] public string? Title { get; set; } - - - protected override string RootElementClass => "bit-ldb"; - - protected override void RegisterCssClasses() - { - ClassBuilder.Register(() => Classes?.Root); - - ClassBuilder.Register(() => ButtonStyle == BitButtonStyle.Primary - ? $"{RootElementClass}-pri" - : $"{RootElementClass}-std"); - } - - protected override void RegisterCssStyles() - { - StyleBuilder.Register(() => Styles?.Root); - } - - protected override void OnParametersSet() - { - if (IsEnabled is false) - { - _tabIndex = AllowDisabledFocus ? null : -1; - } - - _buttonType = ButtonType ?? (EditContext is null ? BitButtonType.Button : BitButtonType.Submit); - - base.OnParametersSet(); - } - - - private string GetLabelPositionClass() - => LoadingLabelPosition switch - { - BitLabelPosition.Top => $"{RootElementClass}-top", - BitLabelPosition.Right => $"{RootElementClass}-right", - BitLabelPosition.Bottom => $"{RootElementClass}-bottom", - BitLabelPosition.Left => $"{RootElementClass}-left", - _ => $"{RootElementClass}-right" - }; - - protected virtual async Task HandleOnClick(MouseEventArgs e) - { - if (IsEnabled) - { - await OnClick.InvokeAsync(e); - } - } -} diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitLoadingButton/BitLoadingButton.scss b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitLoadingButton/BitLoadingButton.scss deleted file mode 100644 index 0c67b3b19d..0000000000 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitLoadingButton/BitLoadingButton.scss +++ /dev/null @@ -1,145 +0,0 @@ -@import "../../../Styles/functions.scss"; - -.bit-ldb { - cursor: pointer; - overflow: hidden; - position: relative; - white-space: nowrap; - text-decoration: none; - min-width: spacing(15); - min-height: spacing(4); - box-sizing: border-box; - text-overflow: ellipsis; - font-size: spacing(1.75); - border-width: spacing(0.1875); - padding: spacing(0.5) spacing(2); - border-style: $shape-border-style; - border-radius: $shape-border-radius; - font-family: $typography-font-family; - font-weight: $typography-font-weight; - - &.bit-dis { - cursor: default; - pointer-events: none; - color: $color-foreground-disabled; - border-color: $color-border-disabled; - background-color: $color-background-disabled; - } - - @keyframes bit-ldb-spinner-animation { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } - } -} - -.bit-ldb-pri { - color: $color-primary-text; - border-color: $color-primary-main; - background-color: $color-primary-main; - - .bit-ldb-spn { - border-color: $color-border-secondary; - border-top-color: $color-primary-dark; - } - - .bit-ldb-lbl { - color: $color-primary-text; - } - - @media (hover: hover) { - &:hover { - border-color: $color-action-hover-primary; - background-color: $color-action-hover-primary; - } - } - - &:active { - border-color: $color-action-active-primary; - background-color: $color-action-active-primary; - } -} - -.bit-ldb-std { - color: $color-secondary-text; - border-color: $color-border-primary; - background-color: $color-secondary-main; - - .bit-ldb-spn { - border-color: $color-border-secondary; - border-top-color: $color-primary-dark; - } - - .bit-ldb-lbl { - color: $color-foreground-primary; - } - - @media (hover: hover) { - &:hover { - background-color: $color-action-hover-secondary; - } - } - - &:active { - background-color: $color-action-active-secondary; - } -} - -.bit-ldb-spn { - border-radius: 50%; - width: spacing(2.5); - height: spacing(2.5); - border-width: spacing(0.2125); - border-style: $shape-border-style; - animation: bit-ldb-spinner-animation 1.3s linear infinite; - animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67); -} - -.bit-ldb-lbl { - text-align: center; - font-size: spacing(1.5); - margin: spacing(0.25) spacing(1); -} - -.bit-ldb-top { - flex-direction: column-reverse; - - .bit-ldb-lbl { - margin: 0 0 spacing(1); - } -} - -.bit-ldb-bottom { - flex-direction: column; - - .bit-ldb-lbl { - margin: spacing(1) 0 0; - } -} - -.bit-ldb-right { - flex-direction: row; - - .bit-ldb-lbl { - margin: 0 0 0 spacing(1); - } -} - -.bit-ldb-left { - flex-direction: row-reverse; - - .bit-ldb-lbl { - margin: 0 spacing(1) 0 0; - } -} - -.bit-ldb-ldg { - display: flex; - align-items: center; - justify-content: center; - background-color: transparent; -} diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scss b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scss index 588f79778d..fc82f967ef 100644 --- a/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scss +++ b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scss @@ -75,7 +75,7 @@ --bit-clr-act-hover-sta-info: #202020; --bit-clr-act-active-sta-info: #303030; --bit-clr-act-hover-sta-info-bg: #E0E0E0; - --bit-clr-act-active-sta-info-bg: #D0D0D0; + --bit-clr-act-active-sta-info-bg: #D8D8D8; --bit-clr-act-hover-sta-success: #008800; --bit-clr-act-active-sta-success: #007700; --bit-clr-act-hover-sta-success-bg: #B0EEB0; diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/components.scss b/src/BlazorUI/Bit.BlazorUI/Styles/components.scss index 023d775f77..e2f8530b47 100644 --- a/src/BlazorUI/Bit.BlazorUI/Styles/components.scss +++ b/src/BlazorUI/Bit.BlazorUI/Styles/components.scss @@ -5,7 +5,6 @@ @import "../Components/Buttons/BitButtonGroup/BitButtonGroup.scss"; @import "../Components/Buttons/BitCompoundButton/BitCompoundButton.scss"; @import "../Components/Buttons/BitIconButton/BitIconButton.scss"; -@import "../Components/Buttons/BitLoadingButton/BitLoadingButton.scss"; @import "../Components/Buttons/BitSplitButton/BitSplitButton.scss"; @import "../Components/Buttons/BitMenuButton/BitMenuButton.scss"; @import "../Components/Buttons/BitToggleButton/BitToggleButton.scss"; diff --git a/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitButtonDemo.razor b/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitButtonDemo.razor index 3a03780521..1a72bc8d12 100644 --- a/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitButtonDemo.razor +++ b/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitButtonDemo.razor @@ -7,7 +7,8 @@ + ComponentSubEnums="componentSubEnums" + ComponentSubClasses="componentSubClasses">
@@ -21,7 +22,7 @@
- +
@@ -35,7 +36,7 @@
- +
@@ -49,7 +50,7 @@
- +
@@ -63,7 +64,7 @@
- +
@@ -72,159 +73,281 @@
Click me (@clickCounter) -
- - - - - -
- Offering a range of specialized color variants, providing visual cues for specific actions or states within your application. -
-
-
-
- Info - Info - Info
+ + + + +
- Success - Success - Success + Offering a range of specialized color variants, providing visual cues for specific actions or states within your application.
-
- Warning - Warning - Warning +
+
+
+ Info + Info + Info +
+
+ Success + Success + Success +
+
+ Warning + Warning + Warning +
+
+ SevereWarning + SevereWarning + SevereWarning +
+
+ Error + Error + Error +
+ + + + +
- SevereWarning - SevereWarning - SevereWarning + Varying sizes for buttons tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.
-
- Error - Error - Error +
+
+
+ Small + Medium + Large +
+
+ Small + Medium + Large +
+
+ Small + Medium + Large +
-
- - - - - -
- Varying sizes for buttons tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface. -
-
-
+ + + + +
- Small - Medium - Large + Here are some examples of customizing the button content.
-
- Small - Medium - Large +
+
+ + + A Primary custom content + + + + + + A Standard custom content + + + + + + A Text custom content + +
+ + + + +
- Small - Medium - Large + BitButton supports three different types, 'Submit' for sending form data, 'Reset' to clear form inputs, and 'Button' to provide flexibility for different interaction purposes.
+
+
+ @if (formIsValidSubmit is false) + { + + + + + +
+ + +
+
+ Submit + Reset + Button +
+ + } + else + { + + The form submitted successfully. + + }
- +
- Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements. + Demonstrate the dynamic loading state of buttons using the "IsLoading" property. Customize the loading label to provide users with feedback on ongoing processes.

- - Styled Button + + Primary - - Classed Button + + + Standard - - Styled Classed Button + + + Text
- +
- Here are some examples of customizing the button content. + Explore different loading label positions for buttons, including right, left, bottom, and top. Customize the loading labels and positions to enhance the user experience.

- - - A Primary custom content - + + Right + + + Left +
+
+
- - - A Standard custom content - + + Bottom - - - A Text custom content - + + Top
- +
- BitButton supports three different types, 'Submit' for sending form data, 'Reset' to clear form inputs, and 'Button' to provide flexibility for different interaction purposes. + Utilize the "LoadingTemplate" feature to design personalized loading indicators and messages, providing a unique visual experience during loading states.

-
- @if (formIsValidSubmit is false) - { - - - - - -
- - -
-
- Submit - Reset - Button +
+ + +
+ + Wait...
- - } - else - { - - The form submitted successfully. - - } + + + Ellipsis... + + +
+ + + + + +
+ Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements. +
+
+
Component's Style & Class:
+
+
+ + Styled Button + + + Classed Button + +
+


+
Styles & Classes:
+
+
+ + Primary + + + + Standard +
- +
- You can control the display of buttons with three settings, 'Visible' for full display, 'Hidden' for concealing buttons without altering layout, and 'Collapsed' to remove the button and its space. + You can control the display of buttons with three settings, 'Visible' for full display, 'Hidden' for concealing buttons without altering layout, and 'Collapsed' to remove the button and its space.

@@ -238,6 +361,48 @@ @code { + private bool primaryIsLoading; + private bool standardIsLoading; + private bool textIsLoading; + + private bool stylesIsLoading; + private bool classesIsLoading; + + private async Task LoadingPrimaryClick() + { + primaryIsLoading = true; + await Task.Delay(3000); + primaryIsLoading = false; + } + + private async Task LoadingStandardClick() + { + standardIsLoading = true; + await Task.Delay(3000); + standardIsLoading = false; + } + + private async Task LoadingTextClick() + { + textIsLoading = true; + await Task.Delay(3000); + textIsLoading = false; + } + + private async Task LoadingStylesClick() + { + stylesIsLoading = true; + await Task.Delay(3000); + stylesIsLoading = false; + } + + private async Task LoadingClassesClick() + { + classesIsLoading = true; + await Task.Delay(3000); + classesIsLoading = false; + } + private int clickCounter; private bool formIsValidSubmit; diff --git a/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitButtonDemo.razor.cs b/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitButtonDemo.razor.cs index dafc93b989..ed5b740bd7 100644 --- a/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitButtonDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitButtonDemo.razor.cs @@ -44,15 +44,6 @@ public partial class BitButtonDemo Description = "The color of the button.", }, new() - { - Name = "Size", - Type = "BitButtonSize", - LinkType = LinkType.Link, - Href = "#button-size-enum", - DefaultValue = "null", - Description = "The size of button, Possible values: Small | Medium | Large.", - }, - new() { Name = "ButtonType", Type = "BitButtonType", @@ -69,6 +60,22 @@ public partial class BitButtonDemo Description = "The content of button, It can be Any custom tag or a text.", }, new() + { + Name = "Classes", + Type = "BitButtonClassStyles?", + LinkType = LinkType.Link, + Href = "#button-class-styles", + DefaultValue = "null", + Description = "Custom CSS classes for different parts of the BitButton.", + }, + new() + { + Name = "Content", + Type = "RenderFragment?", + DefaultValue = "null", + Description = "Alias of ChildContent", + }, + new() { Name = "Href", Type = "string?", @@ -76,12 +83,60 @@ public partial class BitButtonDemo Description = "URL the link points to, if provided, button renders as an anchor.", }, new() + { + Name = "IsLoading", + Type = "bool", + DefaultValue = "false", + Description = "Determine whether the button is in loading mode or not." + }, + new() + { + Name = "LoadingLabel", + Type = "string?", + DefaultValue = "null", + Description = "The loading label to show next to the spinner." + }, + new() + { + Name = "LoadingLabelPosition", + Type = "BitLabelPosition", + DefaultValue = "BitLabelPosition.Right", + Description = "The position of the loading Label in regards to the spinner animation.", + LinkType = LinkType.Link, + Href = "#spinner-position-enum" + }, + new() + { + Name = "LoadingTemplate", + Type = "RenderFragment?", + DefaultValue = "null", + Description = "Used to customize the content inside the Button in the Loading state.", + }, + new() { Name = "OnClick", Type = "EventCallback", Description = "Callback for when the button clicked.", }, new() + { + Name = "Size", + Type = "BitButtonSize", + LinkType = LinkType.Link, + Href = "#button-size-enum", + DefaultValue = "null", + Description = "The size of button, Possible values: Small | Medium | Large.", + }, + new() + { + Name = "Styles", + Type = "BitButtonClassStyles?", + LinkType = LinkType.Link, + Href = "#class-styles", + DefaultValue = "null", + Description = "Custom CSS styles for different parts of the BitButton.", + }, + new() { Name = "Target", Type = "string?", @@ -221,6 +276,46 @@ public partial class BitButtonDemo } }; + private readonly List componentSubClasses = new() + { + new() + { + Id = "button-class-styles", + Title = "BitButtonClassStyles", + Parameters = new() + { + new() + { + Name = "Root", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the root element of the BitButton." + }, + new() + { + Name = "LoadingContainer", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the internal container of the BitButton." + }, + new() + { + Name = "Spinner", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the spinner section of the BitButton." + }, + new() + { + Name = "LoadingLabel", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the label section of the BitButton." + }, + } + } + }; + private readonly string example1RazorCode = @" @@ -245,7 +340,6 @@ public partial class BitButtonDemo private readonly string example5RazorCode = @" clickCounter++"">Click me (@clickCounter)"; - private readonly string example5CsharpCode = @" private int clickCounter;"; @@ -282,27 +376,8 @@ public partial class BitButtonDemo Small Medium Large"; - - private readonly string example8RazorCode = @" - - -Styled Button -Classed Button - - Styled Classed Button -"; - private readonly string example11RazorCode = @" -Visible: [ Visible Button ] -Hidden: [ Hidden Button ] -Collapsed: [ Collapsed Button ]"; - - private readonly string example9RazorCode = @" + private readonly string example8RazorCode = @" + A Primary custom content @@ -329,7 +405,7 @@ Styled Classed Button "; - private readonly string example10RazorCode = @" + private readonly string example9RazorCode = @" @if (formIsValidSubmit is false) { @@ -351,7 +427,7 @@ Styled Classed Button The form submitted successfully. }"; - private readonly string example10CsharpCode = @" + private readonly string example9CsharpCode = @" public class ButtonValidationModel { [Required] @@ -375,4 +451,187 @@ private void HandleInvalidSubmit() { formIsValidSubmit = false; }"; + + private readonly string example10RazorCode = @" + + Primary + + + + Standard + + + + Text +"; + private readonly string example10CsharpCode = @" +private bool primaryIsLoading; +private bool standardIsLoading; +private bool textIsLoading; + +private async Task LoadingPrimaryClick() +{ + primaryIsLoading = true; + await Task.Delay(3000); + primaryIsLoading = false; +} + +private async Task LoadingStandardClick() +{ + standardIsLoading = true; + await Task.Delay(3000); + standardIsLoading = false; +} + +private async Task LoadingTextClick() +{ + textIsLoading = true; + await Task.Delay(3000); + textIsLoading = false; +}"; + + private readonly string example11RazorCode = @" + + Right + + + + Left + + + + Bottom + + + + Top +"; + + private readonly string example12RazorCode = @" + + + + + +
+ + Wait... +
+ + + Ellipsis... + +"; + + private readonly string example13RazorCode = @" + + + + + Styled Button + + + + Classed Button + + + + + Primary + + + + Standard +"; + private readonly string example13CsharpCode = @" +private bool stylesIsLoading; +private bool classesIsLoading; + +private async Task LoadingStylesClick() +{ + stylesIsLoading = true; + await Task.Delay(3000); + stylesIsLoading = false; +} + +private async Task LoadingClassesClick() +{ + classesIsLoading = true; + await Task.Delay(3000); + classesIsLoading = false; +}"; + + private readonly string example14RazorCode = @" +Visible: [ Visible Button ] +Hidden: [ Hidden Button ] +Collapsed: [ Collapsed Button ]"; } diff --git a/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitButtonDemo.razor.scss b/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitButtonDemo.razor.scss index 666cfa89e7..56e09db5c0 100644 --- a/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitButtonDemo.razor.scss +++ b/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitButtonDemo.razor.scss @@ -2,6 +2,7 @@ gap: 0.5rem; display: flex; flex-flow: row wrap; + align-items: flex-start; } .buttons-container-grid { @@ -9,6 +10,13 @@ display: grid; } +.custom-loading { + display: flex; + gap: 0.3125rem; + align-items: center; + justify-content: center; +} + .form-container { max-width: 20rem; } @@ -28,4 +36,22 @@ .validation-message { color: red; } + + .custom-root { + min-width: 7.2rem; + box-shadow: aqua 0 0 0.5rem; + } + + .custom-container { + text-shadow: aqua 0 0 0.5rem; + } + + .custom-label { + color: goldenrod; + } + + .custom-spinner { + border-color: aqua; + border-top-color: goldenrod; + } } diff --git a/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitLoadingButtonDemo.razor b/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitLoadingButtonDemo.razor deleted file mode 100644 index 332abc6957..0000000000 --- a/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitLoadingButtonDemo.razor +++ /dev/null @@ -1,241 +0,0 @@ -@page "/components/loadingbutton" -@page "/components/loading-button" - - - - - - -
- - Primary (@BasicPrimaryCounter) - - - - Standard (@BasicStandardCounter) - - - Disabled - - -
- - - - - -
- - Styled - - - - Classed - - - -
- - - - - -
-
Visible: [ Visible loading button ]
-
Hidden: [ Hidden loading button ]
-
Collapsed: [ Collapsed loading button ]
-
- - - - - -
- - Primary (@LoadingLabelPrimaryCounter) - - - - Standard (@LoadingLabelStandardCounter) - - - -
- - - - - -
- - Top (@TopPositionCounter) - - - - Right (@RightPositionCounter) - - - - Bottom (@BottomPositionCounter) - - - - Left (@LeftPositionCounter) - - - -
- - - - - -
- - -
- - wait... -
- - - Ellipsis... - - - - - -
- - wait... -
- - - Roller... - - - - -
- - - - - -
- @if (formIsValidSubmit is false) - { - - - - - -
- - -
-
- Submit - Reset - Button -
- - } - else - { - - The form submitted successfully. - - } -
- - - - - -
- - Primary (@ClassStylesPrimaryCounter) - - - - Standard (@ClassStylesStandardCounter) - - - -
- - - - - -@code { - private bool formIsValidSubmit; - private ButtonValidationModel buttonValidationModel = new(); - - private async Task HandleValidSubmit() - { - formIsValidSubmit = true; - - await Task.Delay(2000); - - buttonValidationModel = new(); - - formIsValidSubmit = false; - - StateHasChanged(); - } - - private void HandleInvalidSubmit() - { - formIsValidSubmit = false; - } -} \ No newline at end of file diff --git a/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitLoadingButtonDemo.razor.cs b/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitLoadingButtonDemo.razor.cs deleted file mode 100644 index d8c5b1ed87..0000000000 --- a/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitLoadingButtonDemo.razor.cs +++ /dev/null @@ -1,880 +0,0 @@ -namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Buttons; - -public partial class BitLoadingButtonDemo -{ - private readonly List componentParameters = new() - { - new() - { - Name = "AllowDisabledFocus", - Type = "bool", - DefaultValue = "true", - Description = "Whether the icon button can have focus in disabled mode." - }, - new() - { - Name = "AriaDescription", - Type = "string?", - DefaultValue = "null", - Description = "Detailed description of the icon button for the benefit of screen readers." - }, - new() - { - Name = "AriaHidden", - Type = "bool", - DefaultValue = "false", - Description = "If true, add an aria-hidden attribute instructing screen readers to ignore the element." - }, - new() - { - Name = "ButtonStyle", - Type = "BitButtonStyle", - DefaultValue = "BitButtonStyle.Primary", - Description = "The style of button, Possible values: Primary | Standard.", - LinkType = LinkType.Link, - Href = "#button-style-enum" - }, - new() - { - Name = "ButtonType", - Type = "BitButtonType?", - LinkType = LinkType.Link, - Href = "#button-type-enum", - DefaultValue = "null", - Description = "The type of the button." - }, - new() - { - Name = "ChildContent", - Type = "RenderFragment?", - Description = "The content of button, It can be Any custom tag or a text." - }, - new() - { - Name = "Classes", - Type = "BitLoadingButtonClassStyles?", - LinkType = LinkType.Link, - Href = "#class-styles", - DefaultValue = "null", - Description = "Custom CSS classes for different parts of the BitLoadingButton.", - }, - new() - { - Name = "IsLoading", - Type = "bool", - DefaultValue = "false", - Description = "Determine whether the button is in loading mode or not." - }, - new() - { - Name = "LoadingLabel", - Type = "string?", - DefaultValue = "null", - Description = "The loading label to show next to the spinner." - }, - new() - { - Name = "LoadingLabelPosition", - Type = "BitLabelPosition", - DefaultValue = "BitLabelPosition.Right", - Description = "The position of the loading Label in regards to the spinner animation.", - LinkType = LinkType.Link, - Href = "#spinner-position-enum" - }, - new() - { - Name = "LoadingTemplate", - Type = "RenderFragment?", - DefaultValue = "null", - Description = "Used to customize the content inside the Button in the Loading state.", - }, - new() - { - Name = "OnClick", - Type = "EventCallback", - Description = "Callback for when the button clicked." - }, - new() - { - Name = "Styles", - Type = "BitLoadingButtonClassStyles?", - LinkType = LinkType.Link, - Href = "#class-styles", - DefaultValue = "null", - Description = "Custom CSS styles for different parts of the BitLoadingButton.", - }, - new() - { - Name = "Title", - Type = "string?", - DefaultValue = "null", - Description = "The tooltip to show when the mouse is placed on the icon button." - }, - }; - - private readonly List componentSubClasses = new() - { - new() - { - Id = "class-styles", - Title = "BitLoadingButtonClassStyles", - Parameters = new() - { - new() - { - Name = "Root", - Type = "string?", - DefaultValue = "null", - Description = "Custom CSS classes/styles for the root element of the BitLoadingButton." - }, - new() - { - Name = "LoadingContainer", - Type = "string?", - DefaultValue = "null", - Description = "Custom CSS classes/styles for the internal container of the BitLoadingButton." - }, - new() - { - Name = "Spinner", - Type = "string?", - DefaultValue = "null", - Description = "Custom CSS classes/styles for the spinner section of the BitLoadingButton." - }, - new() - { - Name = "LoadingLabel", - Type = "string?", - DefaultValue = "null", - Description = "Custom CSS classes/styles for the label section of the BitLoadingButton." - }, - } - } - }; - - private readonly List componentSubEnums = new() - { - new() - { - Id = "button-style-enum", - Name = "BitButtonStyle", - Description = "", - Items = new List() - { - new() - { - Name= "Primary", - Description="The button with white text on a blue background.", - Value="0", - }, - new() - { - Name= "Standard", - Description="The button with black text on a white background.", - Value="1", - } - } - }, - new() - { - Id = "button-type-enum", - Name = "BitButtonType", - Description = "", - Items = new List() - { - new() - { - Name= "Button", - Description="The button is a clickable button.", - Value="0", - }, - new() - { - Name= "Submit", - Description="The button is a submit button (submits form-data).", - Value="1", - }, - new() - { - Name= "Reset", - Description="The button is a reset button (resets the form-data to its initial values).", - Value="2", - } - } - }, - new() - { - Id = "spinner-position-enum", - Name = "BitSpinnerSize", - Description = "", - Items = new List() - { - new() - { - Name= "Medium", - Description="20px Spinner diameter.", - Value="0", - }, - new() - { - Name= "Large", - Description="28px Spinner diameter.", - Value="1", - }, - new() - { - Name= "Small", - Description="16px Spinner diameter.", - Value="2", - }, - new() - { - Name= "XSmall", - Description="12px Spinner diameter.", - Value="3", - }, - } - }, - }; - - - - private bool Example1Toggle; - private bool Example2Toggle; - private bool Example3Toggle; - private bool Example4Toggle; - private bool Example5Toggle; - private bool Example7Toggle; - - private void Example1ToggleOnChange() - { - BasicPrimaryIsLoading = Example1Toggle; - BasicStandardIsLoading = Example1Toggle; - } - - private void Example2ToggleOnChange() - { - StyleClassPrimaryIsLoading = Example2Toggle; - StyleClassStandardIsLoading = Example2Toggle; - } - - private void Example3ToggleOnChange() - { - LoadingLabelPrimaryIsLoading = Example3Toggle; - LoadingLabelStandardIsLoading = Example3Toggle; - } - - private void Example4ToggleOnChange() - { - TopPositionIsLoading = Example4Toggle; - RightPositionIsLoading = Example4Toggle; - BottomPositionIsLoading = Example4Toggle; - LeftPositionIsLoading = Example4Toggle; - } - - private void Example5ToggleOnChange() - { - EllipsisIsLoading = Example5Toggle; - RollerIsLoading = Example5Toggle; - } - - private void Example7ToggleOnChange() - { - ClassStylesPrimaryIsLoading = Example7Toggle; - ClassStylesStandardIsLoading = Example7Toggle; - } - - - #region Basic - - private bool BasicPrimaryIsLoading; - private int BasicPrimaryCounter; - private bool BasicStandardIsLoading; - private int BasicStandardCounter; - - private async Task BasicPrimaryOnClick() - { - BasicPrimaryIsLoading = true; - await Task.Delay(1000); - BasicPrimaryCounter++; - BasicPrimaryIsLoading = false; - } - - private async Task BasicStandardOnClick() - { - BasicStandardIsLoading = true; - await Task.Delay(1000); - BasicStandardCounter++; - BasicStandardIsLoading = false; - } - - #endregion - - #region StyleClass - - private bool StyleClassPrimaryIsLoading; - private int StyleClassPrimaryCounter; - private bool StyleClassStandardIsLoading; - private int StyleClassStandardCounter; - - private async Task StyleClassPrimaryOnClick() - { - StyleClassPrimaryIsLoading = true; - await Task.Delay(1000); - StyleClassPrimaryCounter++; - StyleClassPrimaryIsLoading = false; - } - - private async Task StyleClassStandardOnClick() - { - StyleClassStandardIsLoading = true; - await Task.Delay(1000); - StyleClassStandardCounter++; - StyleClassStandardIsLoading = false; - } - - #endregion - - #region Visibility - - private bool VisibilityIsLoading; - - private async Task VisibilityOnClick() - { - VisibilityIsLoading = true; - await Task.Delay(1000); - VisibilityIsLoading = false; - } - - #endregion - - #region LoadingLabel - - private bool LoadingLabelPrimaryIsLoading; - private int LoadingLabelPrimaryCounter; - private bool LoadingLabelStandardIsLoading; - private int LoadingLabelStandardCounter; - - private async Task LoadingLabelPrimaryOnClick() - { - LoadingLabelPrimaryIsLoading = true; - await Task.Delay(1000); - LoadingLabelPrimaryCounter++; - LoadingLabelPrimaryIsLoading = false; - } - - private async Task LoadingLabelStandardOnClick() - { - LoadingLabelStandardIsLoading = true; - await Task.Delay(1000); - LoadingLabelStandardCounter++; - LoadingLabelStandardIsLoading = false; - } - - #endregion - - #region LabelPosition - - private bool TopPositionIsLoading; - private int TopPositionCounter; - private bool RightPositionIsLoading; - private int RightPositionCounter; - private bool BottomPositionIsLoading; - private int BottomPositionCounter; - private bool LeftPositionIsLoading; - private int LeftPositionCounter; - - private async Task TopPositionOnClick() - { - TopPositionIsLoading = true; - await Task.Delay(1000); - TopPositionCounter++; - TopPositionIsLoading = false; - } - - private async Task RightPositionOnClick() - { - RightPositionIsLoading = true; - await Task.Delay(1000); - RightPositionCounter++; - RightPositionIsLoading = false; - } - - private async Task BottomPositionOnClick() - { - BottomPositionIsLoading = true; - await Task.Delay(1000); - BottomPositionCounter++; - BottomPositionIsLoading = false; - } - - private async Task LeftPositionOnClick() - { - LeftPositionIsLoading = true; - await Task.Delay(1000); - LeftPositionCounter++; - LeftPositionIsLoading = false; - } - - #endregion - - #region LoadingTemplate - - private bool EllipsisIsLoading; - private bool RollerIsLoading; - - private async Task EllipsisOnClick() - { - EllipsisIsLoading = true; - await Task.Delay(1000); - EllipsisIsLoading = false; - } - - private async Task RollerOnClick() - { - RollerIsLoading = true; - await Task.Delay(1000); - RollerIsLoading = false; - } - - #endregion - - #region ClassStyles - - private bool ClassStylesPrimaryIsLoading; - private int ClassStylesPrimaryCounter; - private bool ClassStylesStandardIsLoading; - private int ClassStylesStandardCounter; - - private async Task ClassStylesPrimaryOnClick() - { - ClassStylesPrimaryIsLoading = true; - await Task.Delay(1000); - ClassStylesPrimaryCounter++; - ClassStylesPrimaryIsLoading = false; - } - - private async Task ClassStylesStandardOnClick() - { - ClassStylesStandardIsLoading = true; - await Task.Delay(1000); - ClassStylesStandardCounter++; - ClassStylesStandardIsLoading = false; - } - - #endregion - - - - private readonly string example1RazorCode = @" - - Primary (@BasicPrimaryCounter) - - - - Standard (@BasicStandardCounter) - - -Disabled - -"; - private readonly string example1CsharpCode = @" -private bool BasicPrimaryIsLoading; -private int BasicPrimaryCounter; -private bool BasicStandardIsLoading; -private int BasicStandardCounter; -private bool Example1Toggle; - -private async Task BasicPrimaryOnClick() -{ - BasicPrimaryIsLoading = true; - await Task.Delay(1000); - BasicPrimaryCounter++; - BasicPrimaryIsLoading = false; -} - -private async Task BasicStandardOnClick() -{ - BasicStandardIsLoading = true; - await Task.Delay(1000); - BasicStandardCounter++; - BasicStandardIsLoading = false; -} - -private void Example1ToggleOnChange() -{ - BasicPrimaryIsLoading = Example1Toggle; - BasicStandardIsLoading = Example1Toggle; -}"; - - private readonly string example2RazorCode = @" - - - - Styled Button - - - - Classed Button - - -"; - private readonly string example2CsharpCode = @" -private bool StyleClassPrimaryIsLoading; -private int StyleClassPrimaryCounter; -private bool StyleClassStandardIsLoading; -private int StyleClassStandardCounter; -private bool Example2Toggle; - -private async Task StyleClassPrimaryOnClick() -{ - StyleClassPrimaryIsLoading = true; - await Task.Delay(1000); - StyleClassPrimaryCounter++; - StyleClassPrimaryIsLoading = false; -} - -private async Task StyleClassStandardOnClick() -{ - StyleClassStandardIsLoading = true; - await Task.Delay(1000); - StyleClassStandardCounter++; - StyleClassStandardIsLoading = false; -} - -private void Example1ToggleOnChange() -{ - StyleClassPrimaryIsLoading = Example2Toggle; - StyleClassStandardIsLoading = Example2Toggle; -}"; - - private readonly string example3RazorCode = @" -Visible: [ Visible loading button ] -Hidden: [ Hidden loading button ] -Collapsed: [ Collapsed loading button ]"; - private readonly string example3CsharpCode = @" -private bool VisibilityIsLoading; - -private async Task VisibilityOnClick() -{ - VisibilityIsLoading = true; - await Task.Delay(1000); - VisibilityIsLoading = false; -}"; - - private readonly string example4RazorCode = @" - - Primary (@LoadingLabelPrimaryCounter) - - - - Standard (@LoadingLabelStandardCounter) - - -"; - private readonly string example4CsharpCode = @" -private bool LoadingLabelPrimaryIsLoading; -private int LoadingLabelPrimaryCounter; -private bool LoadingLabelStandardIsLoading; -private int LoadingLabelStandardCounter; -private bool Example3Toggle; - -private async Task LoadingLabelPrimaryOnClick() -{ - LoadingLabelPrimaryIsLoading = true; - await Task.Delay(1000); - LoadingLabelPrimaryCounter++; - LoadingLabelPrimaryIsLoading = false; -} - -private async Task LoadingLabelStandardOnClick() -{ - LoadingLabelStandardIsLoading = true; - await Task.Delay(1000); - LoadingLabelStandardCounter++; - LoadingLabelStandardIsLoading = false; -} - -private void Example3ToggleOnChange() -{ - LoadingLabelPrimaryIsLoading = Example3Toggle; - LoadingLabelStandardIsLoading = Example3Toggle; -}"; - - private readonly string example5RazorCode = @" - - Top (@TopPositionCounter) - - - - Right (@RightPositionCounter) - - - - Bottom (@BottomPositionCounter) - - - - Left (@LeftPositionCounter) - - -"; - private readonly string example5CsharpCode = @" -private bool TopPositionIsLoading; -private int TopPositionCounter; -private bool RightPositionIsLoading; -private int RightPositionCounter; -private bool BottomPositionIsLoading; -private int BottomPositionCounter; -private bool LeftPositionIsLoading; -private int LeftPositionCounter; -private bool Example4Toggle; - -private async Task TopPositionOnClick() -{ - TopPositionIsLoading = true; - await Task.Delay(1000); - TopPositionCounter++; - TopPositionIsLoading = false; -} - -private async Task RightPositionOnClick() -{ - RightPositionIsLoading = true; - await Task.Delay(1000); - RightPositionCounter++; - RightPositionIsLoading = false; -} - -private async Task BottomPositionOnClick() -{ - BottomPositionIsLoading = true; - await Task.Delay(1000); - BottomPositionCounter++; - BottomPositionIsLoading = false; -} - -private async Task LeftPositionOnClick() -{ - LeftPositionIsLoading = true; - await Task.Delay(1000); - LeftPositionCounter++; - LeftPositionIsLoading = false; -} - -private void Example4ToggleOnChange() -{ - TopPositionIsLoading = Example4Toggle; - RightPositionIsLoading = Example4Toggle; - BottomPositionIsLoading = Example4Toggle; - LeftPositionIsLoading = Example4Toggle; -}"; - - private readonly string example6RazorCode = @" - - - - -
- - wait... -
- - - Ellipsis Loading - - - - - -
- - wait... -
- - - Roller Loading - - - -"; - private readonly string example6CsharpCode = @" -private bool EllipsisIsLoading; -private bool RollerIsLoading; -private bool Example5Toggle; - -private async Task EllipsisOnClick() -{ - EllipsisIsLoading = true; - await Task.Delay(1000); - EllipsisIsLoading = false; -} - -private async Task RollerOnClick() -{ - RollerIsLoading = true; - await Task.Delay(1000); - RollerIsLoading = false; -} - -private void Example5ToggleOnChange() -{ - EllipsisIsLoading = Example5Toggle; - RollerIsLoading = Example5Toggle; -}"; - - private readonly string example7RazorCode = @" -@if (formIsValidSubmit is false) -{ - - - - - buttonValidationModel.RequiredText"" /> - - - buttonValidationModel.NonRequiredText"" /> - -
- Submit - Reset - Button -
- -} -else -{ - - The form submitted successfully. - -}"; - private readonly string example7CsharpCode = @" -public class ButtonValidationModel -{ - [Required] - public string RequiredText { get; set; } = string.Empty; - - public string? NonRequiredText { get; set; } -} - -private bool formIsValidSubmit; -private ButtonValidationModel buttonValidationModel = new(); - -private async Task HandleValidSubmit() -{ - formIsValidSubmit = true; - - await Task.Delay(2000); - - buttonValidationModel = new(); - - formIsValidSubmit = false; - - StateHasChanged(); -} - -private void HandleInvalidSubmit() -{ - formIsValidSubmit = false; -}"; - - private readonly string example8RazorCode = @" - - - - - Primary (@ClassStylesPrimaryCounter) - - - - Standard (@ClassStylesStandardCounter) - - -"; - private readonly string example8CsharpCode = @" -private bool ClassStylesPrimaryIsLoading; -private int ClassStylesPrimaryCounter; -private bool ClassStylesStandardIsLoading; -private int ClassStylesStandardCounter; -private bool Example7Toggle; - -private async Task ClassStylesPrimaryOnClick() -{ - ClassStylesPrimaryIsLoading = true; - await Task.Delay(1000); - ClassStylesPrimaryCounter++; - ClassStylesPrimaryIsLoading = false; -} - -private async Task ClassStylesStandardOnClick() -{ - ClassStylesStandardIsLoading = true; - await Task.Delay(1000); - ClassStylesStandardCounter++; - ClassStylesStandardIsLoading = false; -} - -private void Example7ToggleOnChange() -{ - ClassStylesPrimaryIsLoading = Example7Toggle; - ClassStylesStandardIsLoading = Example7Toggle; -}"; -} diff --git a/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitLoadingButtonDemo.razor.scss b/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitLoadingButtonDemo.razor.scss deleted file mode 100644 index 45b6db2056..0000000000 --- a/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitLoadingButtonDemo.razor.scss +++ /dev/null @@ -1,44 +0,0 @@ -.example-box { - gap: 0.5rem; - display: flex; - width: fit-content; - flex-flow: row wrap; - align-items: center; - - &.column { - flex-flow: column wrap; - align-items: flex-start; - } -} - -.buttons-container { - gap: 0.5rem; - display: flex; - flex-flow: row wrap; -} - -.custom-loading { - display: flex; - gap: 0.3125rem; - align-items: center; - justify-content: center; -} - -.form-container { - max-width: 30rem; -} - -::deep { - .custom-class { - color: blueviolet; - border-radius: 1rem; - } - - .validation-message { - color: red; - } - - .custom-label { - color: blue; - } -} diff --git a/src/BlazorUI/Demo/Client/Core/Pages/Home/ComponentsSection.razor b/src/BlazorUI/Demo/Client/Core/Pages/Home/ComponentsSection.razor index dd4ac2b43b..4a82df470a 100644 --- a/src/BlazorUI/Demo/Client/Core/Pages/Home/ComponentsSection.razor +++ b/src/BlazorUI/Demo/Client/Core/Pages/Home/ComponentsSection.razor @@ -22,9 +22,6 @@ IconButton - - LoadingButton - MenuButton diff --git a/src/BlazorUI/Demo/Client/Core/Shared/NavMenu.razor.cs b/src/BlazorUI/Demo/Client/Core/Shared/NavMenu.razor.cs index 085185c982..1e802d23a4 100644 --- a/src/BlazorUI/Demo/Client/Core/Shared/NavMenu.razor.cs +++ b/src/BlazorUI/Demo/Client/Core/Shared/NavMenu.razor.cs @@ -21,7 +21,6 @@ public partial class NavMenu : IDisposable new() { Text = "ButtonGroup", Url = "/components/button-group" }, new() { Text = "CompoundButton", Url = "/components/compoundbutton", AdditionalUrls = new string[] { "/components/compound-button" } }, new() { Text = "IconButton", Url = "/components/iconbutton", AdditionalUrls = new string[] { "/components/icon-button" } }, - new() { Text = "LoadingButton", Url = "/components/loadingbutton", AdditionalUrls = new string[] { "/components/loading-button" } }, new() { Text = "MenuButton", Url = "/components/menubutton", AdditionalUrls = new string[] { "/components/menu-button" } }, new() { Text = "SplitButton", Url = "/components/splitbutton", AdditionalUrls = new string[] { "/components/split-button" } }, new() { Text = "ToggleButton", Url = "/components/togglebutton", AdditionalUrls = new string[] { "/components/toggle-button" } } diff --git a/src/BlazorUI/Demo/Client/Core/compilerconfig.json b/src/BlazorUI/Demo/Client/Core/compilerconfig.json index cba2eb266c..74d5f342e1 100644 --- a/src/BlazorUI/Demo/Client/Core/compilerconfig.json +++ b/src/BlazorUI/Demo/Client/Core/compilerconfig.json @@ -149,12 +149,6 @@ "minify": { "enabled": false }, "options": { "sourceMap": false } }, - { - "outputFile": "Pages/Components/Buttons/BitLoadingButtonDemo.razor.css", - "inputFile": "Pages/Components/Buttons/BitLoadingButtonDemo.razor.scss", - "minify": { "enabled": false }, - "options": { "sourceMap": false } - }, { "outputFile": "Pages/Components/Buttons/MenuButton/BitMenuButtonDemo.razor.css", "inputFile": "Pages/Components/Buttons/MenuButton/BitMenuButtonDemo.razor.scss",