diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitCompoundButton/BitCompoundButton.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitCompoundButton/BitCompoundButton.razor.cs index ed7c53e30d..de36fa9f12 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitCompoundButton/BitCompoundButton.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitCompoundButton/BitCompoundButton.razor.cs @@ -4,6 +4,8 @@ namespace Bit.BlazorUI; public partial class BitCompoundButton { + private BitButtonSize? size; + private BitButtonColor? color; private BitButtonStyle buttonStyle = BitButtonStyle.Primary; private int? _tabIndex; @@ -60,6 +62,22 @@ public BitButtonStyle ButtonStyle /// [Parameter] public BitCompoundButtonClassStyles? Classes { get; set; } + /// + /// The color of button + /// + [Parameter] + public BitButtonColor? Color + { + get => color; + set + { + if (color == value) return; + + color = value; + ClassBuilder.Reset(); + } + } + /// /// The value of the href attribute of the link rendered by the BitCompoundButton. If provided, the component will be rendered as an anchor. /// @@ -85,6 +103,22 @@ public BitButtonStyle ButtonStyle /// [Parameter] public RenderFragment? SecondaryTemplate { get; set; } + /// + /// The size of button, Possible values: Small | Medium | Large + /// + [Parameter] + public BitButtonSize? Size + { + get => size; + set + { + if (size == value) return; + + size = value; + ClassBuilder.Reset(); + } + } + /// /// Custom CSS styles for different parts of the BitCompoundButton. /// @@ -107,9 +141,31 @@ protected override void RegisterCssClasses() { ClassBuilder.Register(() => Classes?.Root); - ClassBuilder.Register(() => ButtonStyle == BitButtonStyle.Primary - ? $"{RootElementClass}-pri" - : $"{RootElementClass}-std"); + ClassBuilder.Register(() => ButtonStyle switch + { + BitButtonStyle.Primary => "bit-cmb-pri", + BitButtonStyle.Standard => "bit-cmb-std", + BitButtonStyle.Text => "bit-cmb-txt", + _ => "bit-cmb-pri" + }); + + ClassBuilder.Register(() => Color switch + { + BitButtonColor.Info => "bit-cmb-inf", + BitButtonColor.Success => "bit-cmb-suc", + BitButtonColor.Warning => "bit-cmb-wrn", + BitButtonColor.SevereWarning => "bit-cmb-swr", + BitButtonColor.Error => "bit-cmb-err", + _ => string.Empty + }); + + ClassBuilder.Register(() => Size switch + { + BitButtonSize.Small => "bit-cmb-sm", + BitButtonSize.Medium => "bit-cmb-md", + BitButtonSize.Large => "bit-cmb-lg", + _ => string.Empty + }); } protected override void RegisterCssStyles() diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitCompoundButton/BitCompoundButton.scss b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitCompoundButton/BitCompoundButton.scss index 1cc36862da..fe1a4e172f 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitCompoundButton/BitCompoundButton.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitCompoundButton/BitCompoundButton.scss @@ -17,44 +17,81 @@ &.bit-dis { cursor: default; + user-select: none; pointer-events: none; + -webkit-user-select: none; color: $color-foreground-disabled; - border-color: $color-border-disabled; - background-color: $color-background-disabled; } } .bit-cmb-pri { - color: $color-primary-text; - border-color: $color-primary-main; - background-color: $color-primary-main; + color: var(--bit-cmb-pri-clr); + background-color: var(--bit-cmb-bg-clr); + border-color: var(--bit-cmb-pri-brd-clr); + --bit-cmb-bg-clr: #{$color-primary-main}; + --bit-cmb-pri-clr: #{$color-primary-text}; + --bit-cmb-pri-brd-clr: #{$color-primary-main}; + --bit-cmb-pri-hover-bg-clr: #{$color-action-hover-primary}; + --bit-cmb-pri-active-bg-clr: #{$color-action-active-primary}; @media (hover: hover) { &:hover { - border-color: $color-action-hover-primary; - background-color: $color-action-hover-primary; + border-color: var(--bit-cmb-pri-hover-bg-clr); + background-color: var(--bit-cmb-pri-hover-bg-clr); } } &:active { - border-color: $color-action-active-primary; - background-color: $color-action-active-primary; + border-color: var(--bit-cmb-pri-active-bg-clr); + background-color: var(--bit-cmb-pri-active-bg-clr); + } + + &.bit-dis { + border-color: $color-border-disabled; + background-color: $color-background-disabled; } } .bit-cmb-std { - color: $color-secondary-text; - border-color: $color-border-primary; + color: var(--bit-cmb-sec-clr); background-color: $color-secondary-main; + border-color: var(--bit-cmb-sec-brd-clr); + --bit-cmb-sec-clr: #{$color-secondary-text}; + --bit-cmb-sec-brd-clr: #{$color-secondary-text}; + --bit-cmb-sec-hover-bg-clr: #{$color-action-hover-secondary}; + --bit-cmb-sec-active-bg-clr: #{$color-action-active-secondary}; + + @media (hover: hover) { + &:hover { + background-color: var(--bit-cmb-sec-hover-bg-clr); + } + } + + &:active { + background-color: var(--bit-cmb-sec-active-bg-clr); + } + + &.bit-dis { + border-color: $color-border-disabled; + } +} + +.bit-cmb-txt { + border-color: transparent; + color: var(--bit-cmb-sec-clr); + background-color: transparent; + --bit-cmb-sec-clr: #{$color-secondary-text}; + --bit-cmb-sec-hover-bg-clr: #{$color-action-hover-secondary}; + --bit-cmb-sec-active-bg-clr: #{$color-action-active-secondary}; @media (hover: hover) { &:hover { - background-color: $color-action-hover-secondary; + background-color: var(--bit-cmb-sec-hover-bg-clr); } } &:active { - background-color: $color-action-active-secondary; + background-color: var(--bit-cmb-sec-active-bg-clr); } } @@ -73,3 +110,91 @@ font-weight: 400; font-size: spacing(1.5); } + +.bit-cmb-inf { + --bit-cmb-bg-clr: #{$color-state-info-bg}; + --bit-cmb-pri-clr: #{$color-foreground-primary}; + --bit-cmb-pri-brd-clr: #{$color-state-info-bg}; + --bit-cmb-pri-hover-bg-clr: #{$color-action-hover-state-info-bg}; + --bit-cmb-pri-active-bg-clr: #{$color-action-active-state-info-bg}; + --bit-cmb-sec-clr: #{$color-state-info}; + --bit-cmb-sec-brd-clr: #{$color-state-info}; + --bit-cmb-sec-hover-bg-clr: #{$color-action-hover-state-info-bg}; + --bit-cmb-sec-active-bg-clr: #{$color-action-active-state-info-bg}; +} + +.bit-cmb-suc { + --bit-cmb-bg-clr: #{$color-state-success-bg}; + --bit-cmb-pri-clr: #{$color-foreground-primary}; + --bit-cmb-pri-brd-clr: #{$color-state-success-bg}; + --bit-cmb-pri-hover-bg-clr: #{$color-action-hover-state-success-bg}; + --bit-cmb-pri-active-bg-clr: #{$color-action-active-state-success-bg}; + --bit-cmb-sec-clr: #{$color-state-success}; + --bit-cmb-sec-brd-clr: #{$color-state-success}; + --bit-cmb-sec-hover-bg-clr: #{$color-action-hover-state-success-bg}; + --bit-cmb-sec-active-bg-clr: #{$color-action-active-state-success-bg}; +} + +.bit-cmb-wrn { + --bit-cmb-bg-clr: #{$color-state-warning-bg}; + --bit-cmb-pri-clr: #{$color-foreground-primary}; + --bit-cmb-pri-brd-clr: #{$color-state-warning-bg}; + --bit-cmb-pri-hover-bg-clr: #{$color-action-hover-state-warning-bg}; + --bit-cmb-pri-active-bg-clr: #{$color-action-active-state-warning-bg}; + --bit-cmb-sec-clr: #{$color-state-warning}; + --bit-cmb-sec-brd-clr: #{$color-state-warning}; + --bit-cmb-sec-hover-bg-clr: #{$color-action-hover-state-warning-bg}; + --bit-cmb-sec-active-bg-clr: #{$color-action-active-state-warning-bg}; +} + +.bit-cmb-swr { + --bit-cmb-bg-clr: #{$color-state-severe-warning-bg}; + --bit-cmb-pri-clr: #{$color-foreground-primary}; + --bit-cmb-pri-brd-clr: #{$color-state-severe-warning-bg}; + --bit-cmb-pri-hover-bg-clr: #{$color-action-hover-state-severe-warning-bg}; + --bit-cmb-pri-active-bg-clr: #{$color-action-active-state-severe-warning-bg}; + --bit-cmb-sec-clr: #{$color-state-severe-warning}; + --bit-cmb-sec-brd-clr: #{$color-state-severe-warning}; + --bit-cmb-sec-hover-bg-clr: #{$color-action-hover-state-severe-warning-bg}; + --bit-cmb-sec-active-bg-clr: #{$color-action-active-state-severe-warning-bg}; +} + +.bit-cmb-err { + --bit-cmb-bg-clr: #{$color-state-error-bg}; + --bit-cmb-pri-clr: #{$color-foreground-primary}; + --bit-cmb-pri-brd-clr: #{$color-state-error-bg}; + --bit-cmb-pri-hover-bg-clr: #{$color-action-hover-state-error-bg}; + --bit-cmb-pri-active-bg-clr: #{$color-action-active-state-error-bg}; + --bit-cmb-sec-clr: #{$color-state-error}; + --bit-cmb-sec-brd-clr: #{$color-state-error}; + --bit-cmb-sec-hover-bg-clr: #{$color-action-hover-state-error-bg}; + --bit-cmb-sec-active-bg-clr: #{$color-action-active-state-error-bg}; +} + +.bit-cmb-sm { + min-width: spacing(6); + min-height: spacing(3); + padding: spacing(1.75) spacing(1.25); + + .bit-cmb-prt { + font-size: spacing(1.5); + } + + .bit-cmb-sct { + font-size: spacing(1.25); + } +} + +.bit-cmb-lg { + min-width: spacing(10); + min-height: spacing(5); + padding: spacing(2.25) spacing(1.75); + + .bit-cmb-prt { + font-size: spacing(2.5); + } + + .bit-cmb-sct { + font-size: spacing(2); + } +} diff --git a/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitCompoundButtonDemo.razor b/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitCompoundButtonDemo.razor index e0f9aacfc3..d0fb2e6bd1 100644 --- a/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitCompoundButtonDemo.razor +++ b/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitCompoundButtonDemo.razor @@ -12,55 +12,78 @@ ComponentSubEnums="componentSubEnums"> +
+ The CompoundButton offers three style options: Primary (default), Standard, and Text. +
+
Primary - Standard - Disabled + Standard + Text
- + +
+ Primary buttons are attention-grabbing, featuring a filled appearance. They're designed for essential actions at the core of your application. +
+
- Styled - Classed + Primary + Disabled + Link
- + -
-
Visible: [ Visible ]
-
Hidden: [Hidden]
-
Collapsed: [ Collapsed ]
+
+ Standard buttons offer a moderate level of emphasis, suitable for important actions that aren't central to the application. They serve as a middle ground between Text buttons and the more prominent Primary buttons, providing flexibility in emphasis. +
+
+
+ Standard + Disabled + Link
- + +
+ Text buttons are best suited for understated actions, serving as a less prominent choice in various interface elements. +
+
- - AriaDescription - - AriaHidden + Text + Disabled + Link
- + +
+ Managing button click event (OnClick). +
+
- Open the site - Open the site + Click me
+
+ BitCompoundButton 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) { @@ -92,6 +115,10 @@ +
+ Here are some examples of customizing the button content. +
+
@@ -116,17 +143,83 @@ - + + +
+ Offering a range of specialized color variants, providing visual cues for specific actions or states within your application. +
+
+
+
+ Info + Info + Info +
+
+ Success + Success + Success +
+
+ Warning + Warning + Warning +
+
+ SevereWarning + SevereWarning + SevereWarning +
+
+ Error + Error + Error +
+
+ + + + + +
+ Varying sizes for buttons tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface. +
+
+
+
+ Small + Medium + Large +
+
+ Small + Medium + Large +
+
+ Small + Medium + Large +
+
+ + + + +
+ Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements. +
+
- Primary - + + +
+ 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. +
+
+
+
Visible: [ Visible ]
+
Hidden: [Hidden]
+
Collapsed: [ Collapsed ]
+
+ + + @code { + private int clickCounter; + private bool formIsValidSubmit; private ButtonValidationModel buttonValidationModel = new(); diff --git a/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitCompoundButtonDemo.razor.cs b/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitCompoundButtonDemo.razor.cs index 29ad0b47f7..e8b4dc50c3 100644 --- a/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitCompoundButtonDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitCompoundButtonDemo.razor.cs @@ -60,6 +60,15 @@ public partial class BitCompoundButtonDemo Description = "Custom CSS classes for different parts of the BitCompoundButton.", }, new() + { + Name = "Color", + Type = "BitButtonColor", + LinkType = LinkType.Link, + Href = "#button-color-enum", + DefaultValue = "null", + Description = "The color of the button.", + }, + new() { Name = "Href", Type = "string?", @@ -94,6 +103,15 @@ public partial class BitCompoundButtonDemo Description = "The RenderFragment for the secondary section of the BitCompoundButton.", }, 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 = "BitCompoundButtonClassStyles?", @@ -207,41 +225,101 @@ public partial class BitCompoundButtonDemo Value="2", } } - } + }, + new() + { + Id = "button-color-enum", + Name = "BitButtonColor", + Description = "", + Items = new() + { + new() + { + Name= "Info", + Description="Info styled Button.", + Value="0", + }, + new() + { + Name= "Success", + Description="Success styled Button.", + Value="1", + }, + new() + { + Name= "Warning", + Description="Warning styled Button.", + Value="2", + }, + new() + { + Name= "SevereWarning", + Description="Severe Warning styled Button.", + Value="3", + }, + new() + { + Name= "Error", + Description="Error styled Button.", + Value="4", + } + } + }, + new() + { + Id = "button-size-enum", + Name = "BitButtonSize", + Description = "", + Items = new() + { + new() + { + Name= "Small", + Description="The small size button.", + Value="0", + }, + new() + { + Name= "Medium", + Description="The medium size button.", + Value="1", + }, + new() + { + Name= "Large", + Description="The large size button.", + Value="2", + } + } + }, }; private readonly string example1RazorCode = @" - - -"; +Primary +Standard +Text"; private readonly string example2RazorCode = @" - - - -"; +Primary +Disabled +Link"; private readonly string example3RazorCode = @" -Visible: [ ] -Hidden: [ ] -Collapsed: [ ]"; +Standard +Disabled +Link"; private readonly string example4RazorCode = @" - - -"; +Text +Disabled +Link"; private readonly string example5RazorCode = @" - - -"; + clickCounter++"" SecondaryText=""@($""Click count is: {@clickCounter}"")"">Click me"; + private readonly string example5CsharpCode = @" +private int clickCounter;"; private readonly string example6RazorCode = @" @if (formIsValidSubmit is false) @@ -320,6 +398,40 @@ private void HandleInvalidSubmit() "; private readonly string example8RazorCode = @" +Info +Info +Info + +Success +Success +Success + +Warning +Warning +Warning + +SevereWarning +SevereWarning +SevereWarning + +Error +Error +Error"; + + private readonly string example9RazorCode = @" +Small +Medium +Large + +Small +Medium +Large + +Small +Medium +Large"; + + private readonly string example10RazorCode = @"