From 076b739972d864bd1e8958acf059eba00f2edb82 Mon Sep 17 00:00:00 2001 From: Mohammad Hossein Rastegarinia Date: Tue, 14 Nov 2023 18:25:44 +0330 Subject: [PATCH] feat(blazorui): add Size & Text style to BitToggleButton #6041 (#6042) --- .../BitToggleButton/BitToggleButton.razor | 2 +- .../BitToggleButton/BitToggleButton.razor.cs | 37 ++++- .../BitToggleButton/BitToggleButton.scss | 121 +++++++++----- .../Buttons/BitToggleButtonDemo.razor | 154 ++++++++++++++---- .../Buttons/BitToggleButtonDemo.razor.cs | 125 +++++++++++--- .../Buttons/BitToggleButtonDemo.razor.scss | 12 ++ 6 files changed, 348 insertions(+), 103 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitToggleButton/BitToggleButton.razor b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitToggleButton/BitToggleButton.razor index b74c21c25d..0fc97d71a7 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitToggleButton/BitToggleButton.razor +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitToggleButton/BitToggleButton.razor @@ -23,7 +23,7 @@ { } - @GetText() + @GetText() } 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 a9418a4095..abe5116391 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitToggleButton/BitToggleButton.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitToggleButton/BitToggleButton.razor.cs @@ -5,6 +5,7 @@ public partial class BitToggleButton private bool IsCheckedHasBeenSet; private bool isChecked; + private BitButtonSize? size; private BitButtonStyle buttonStyle = BitButtonStyle.Primary; private int? _tabIndex; @@ -117,6 +118,22 @@ public bool IsChecked /// [Parameter] public string? OnTitle { 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 BitToggleButton component. /// @@ -139,11 +156,23 @@ protected override void RegisterCssClasses() { ClassBuilder.Register(() => Classes?.Root); - ClassBuilder.Register(() => ButtonStyle == BitButtonStyle.Primary - ? $"{RootElementClass}-pri" - : $"{RootElementClass}-std"); + ClassBuilder.Register(() => IsChecked ? "bit-tgb-chk" : string.Empty); - ClassBuilder.Register(() => IsChecked ? $"{RootElementClass}-chk" : string.Empty); + ClassBuilder.Register(() => ButtonStyle switch + { + BitButtonStyle.Primary => "bit-tgb-pri", + BitButtonStyle.Standard => "bit-tgb-std", + BitButtonStyle.Text => "bit-tgb-txt", + _ => "bit-tgb-pri" + }); + + ClassBuilder.Register(() => Size switch + { + BitButtonSize.Small => "bit-tgb-sm", + BitButtonSize.Medium => "bit-tgb-md", + BitButtonSize.Large => "bit-tgb-lg", + _ => string.Empty + }); } protected override void RegisterCssStyles() diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitToggleButton/BitToggleButton.scss b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitToggleButton/BitToggleButton.scss index e023f316cb..370a1ff642 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitToggleButton/BitToggleButton.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitToggleButton/BitToggleButton.scss @@ -2,13 +2,15 @@ .bit-tgb { cursor: pointer; - text-align: center; position: relative; - display: inline-block; + text-align: center; + align-items: center; + display: inline-flex; text-decoration: none; min-width: spacing(10); 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; @@ -21,74 +23,101 @@ cursor: default; pointer-events: none; color: $color-foreground-disabled; - border-color: $color-border-disabled; - background-color: $color-background-disabled; } } .bit-tgb-pri { - color: $color-primary-text; - border-color: $color-primary-main; - background-color: $color-primary-main; + color: var(--bit-tgb-pri-clr); + background-color: var(--bit-tgb-bg-clr); + border-color: var(--bit-tgb-pri-brd-clr); + --bit-tgb-bg-clr: #{$color-primary-main}; + --bit-tgb-pri-clr: #{$color-primary-text}; + --bit-tgb-pri-brd-clr: #{$color-primary-main}; + --bit-tgb-pri-hover-bg-clr: #{$color-action-hover-primary}; + --bit-tgb-pri-active-bg-clr: #{$color-action-active-primary}; + --bit-tgb-chk-bg-clr: #{$color-primary-dark}; + --bit-tgb-chk-brd-clr: #{$color-primary-dark}; @media (hover: hover) { &:hover { - border-color: $color-action-hover-primary; - background-color: $color-action-hover-primary; + border-color: var(--bit-tgb-pri-hover-bg-clr); + background-color: var(--bit-tgb-pri-hover-bg-clr); } } &:active { - border-color: $color-action-active-primary; - background-color: $color-action-active-primary; + border-color: var(--bit-tgb-pri-active-bg-clr); + background-color: var(--bit-tgb-pri-active-bg-clr); } - &.bit-tgb-chk { - border-color: $color-primary-dark; - background-color: $color-primary-dark; - - @media (hover: hover) { - &:hover { - border-color: $color-primary-dark; - background-color: $color-primary-dark; - } - } - - &:active { - border-color: $color-primary-dark; - background-color: $color-primary-dark; - } + &.bit-dis { + border-color: $color-border-disabled; + background-color: $color-background-disabled; } } .bit-tgb-std { - color: $color-secondary-text; - border-color: $color-border-primary; + color: var(--bit-tgb-sec-clr); background-color: $color-secondary-main; + border-color: var(--bit-tgb-sec-brd-clr); + --bit-tgb-sec-clr: #{$color-secondary-text}; + --bit-tgb-sec-brd-clr: #{$color-secondary-text}; + --bit-tgb-sec-hover-bg-clr: #{$color-action-hover-secondary}; + --bit-tgb-sec-active-bg-clr: #{$color-action-active-secondary}; + --bit-tgb-chk-bg-clr: #{$color-secondary-dark}; + --bit-tgb-chk-brd-clr: #{$color-secondary-text}; @media (hover: hover) { &:hover { - background-color: $color-action-hover-secondary; + background-color: var(--bit-tgb-sec-hover-bg-clr); } } &:active { - background-color: $color-action-active-secondary; + background-color: var(--bit-tgb-sec-active-bg-clr); } - &.bit-tgb-chk { - background-color: $color-secondary-dark; + &.bit-dis { + border-color: $color-border-disabled; + } +} + +.bit-tgb-txt { + border-color: transparent; + color: var(--bit-tgb-sec-clr); + background-color: transparent; + --bit-tgb-sec-clr: #{$color-secondary-text}; + --bit-tgb-sec-hover-bg-clr: #{$color-action-hover-secondary}; + --bit-tgb-sec-active-bg-clr: #{$color-action-active-secondary}; + --bit-tgb-chk-bg-clr: #{$color-secondary-dark}; + --bit-tgb-chk-brd-clr: transparent; - @media (hover: hover) { - &:hover { - background-color: $color-secondary-dark; - } + @media (hover: hover) { + &:hover { + background-color: var(--bit-tgb-sec-hover-bg-clr); } + } + + &:active { + background-color: var(--bit-tgb-sec-active-bg-clr); + } +} + +.bit-tgb-chk { + border-color: var(--bit-tgb-chk-brd-clr); + background-color: var(--bit-tgb-chk-bg-clr); - &:active { - background-color: $color-secondary-dark; + @media (hover: hover) { + &:hover { + border-color: var(--bit-tgb-chk-brd-clr); + background-color: var(--bit-tgb-chk-bg-clr); } } + + &:active { + border-color: var(--bit-tgb-chk-brd-clr); + background-color: var(--bit-tgb-chk-bg-clr); + } } .bit-tgb-con { @@ -104,6 +133,20 @@ } } -.bit-tgb-txt { +.bit-tgb-btx { display: block; } + +.bit-tgb-sm { + min-width: spacing(6); + min-height: spacing(3); + font-size: spacing(1.5); + padding: spacing(0.3) spacing(1.5); +} + +.bit-tgb-lg { + min-width: spacing(10); + min-height: spacing(5); + font-size: spacing(2); + padding: spacing(0.7) spacing(2.5); +} diff --git a/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitToggleButtonDemo.razor b/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitToggleButtonDemo.razor index 2466d9353e..799ba506c2 100644 --- a/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitToggleButtonDemo.razor +++ b/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitToggleButtonDemo.razor @@ -10,8 +10,12 @@ ComponentParameters="componentParameters" ComponentSubClasses="componentSubClasses" ComponentSubEnums="componentSubEnums"> - + +
+ The ToggleButton offers three style options: Primary (default), Standard, and Text. +
+
@@ -20,53 +24,63 @@ OffIconName="@BitIconName.Microphone" OnIconName="@BitIconName.MicOff" ButtonStyle="BitButtonStyle.Standard" /> - +
- + -
Style & Class:
+
+ Primary buttons are attention-grabbing, featuring a filled appearance. They're designed for essential actions at the core of your application. +

-
- + + +
+ + - + + +
+ 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.
-

-
Styles & Classes:

-
- - - + + ButtonStyle="BitButtonStyle.Standard" /> +
- + -
-
Visible: [ Visible toggle button ]
-
Hidden: [ Hidden toggle button ]
-
Collapsed: [ Collapsed toggle button ]
+
+ Text buttons are best suited for understated actions, serving as a less prominent choice in various interface elements. +
+
+
+ +
- + +
+ Explore default checked state, two-way binding, and handling change events for a customizable user experience. +
+
DefaultIsChecked:

@@ -78,19 +92,93 @@
Two-way bound:

- - + +



OnChange:

- - Check status is: @example32Value + Check status is: @example52Value +
+ + + + + +
+ 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. +
+
+
Component's Style & Class:
+
+
+ + + +
+

+
Styles & Classes:
+
+
+ + + +
+ + + + + +
+ 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 toggle button ]
+
Hidden: [ Hidden toggle button ]
+
Collapsed: [ Collapsed toggle button ]
 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 e4a6ec6cd2..33cff510e3 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 @@ -120,6 +120,15 @@ public partial class BitToggleButtonDemo Description = "The title of the BitToggleButton when it is checked.", }, 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 = "BitToggleButtonClassStyles?", @@ -204,14 +213,47 @@ public partial class BitToggleButtonDemo Name= "Standard", Description="The button with black text on a white background.", Value="1", + }, + new() + { + Name= "Text", + Description="The button for less-pronounced actions.", + Value="2", + } + } + }, + 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 bool example31Value; - private bool example32Value; + private bool example51Value; + private bool example52Value; private readonly string example1RazorCode = @" @@ -222,10 +264,59 @@ public partial class BitToggleButtonDemo OffIconName=""@BitIconName.Microphone"" OnIconName=""@BitIconName.MicOff"" ButtonStyle=""BitButtonStyle.Standard"" /> -"; - private readonly string example1CsharpCode = @""; +"; private readonly string example2RazorCode = @" + +"; + + private readonly string example3RazorCode = @" + +"; + + private readonly string example4RazorCode = @" + +"; + + private readonly string example5RazorCode = @" + + + + + + example52Value = v"" + OffText=""Unmute"" OnText=""Mute"" + OffIconName=""@BitIconName.Microphone"" OnIconName=""@BitIconName.MicOff"" /> +Check status is: @example52Value"; + private readonly string example5CsharpCode = @" +private bool example51Value; +private bool example52Value;"; + + private readonly string example6RazorCode = @" +Small +Medium +Large + +Small +Medium +Large + +Small +Medium +Large"; + + private readonly string example7RazorCode = @" + @@ -257,34 +349,15 @@ public partial class BitToggleButtonDemo + Styles=""@(new() { Container = ""font-size: 18px;"", Icon = ""color: red;"", Text = ""color: blue;"" })"" /> "; - private readonly string example2CsharpCode = @""; + Classes=""@(new() { Container = ""custom-container"", Icon = ""custom-icon"", Text = ""custom-text"" })"" />"; - private readonly string example3RazorCode = @" + private readonly string example8RazorCode = @" Visible: [ Visible toggle button ] Hidden: [ Hidden toggle button ] Collapsed: [ Collapsed toggle button ]"; - - private readonly string example4RazorCode = @" - - - - - - example32Value = v"" - OffText=""Unmute"" OnText=""Mute"" - OffIconName=""@BitIconName.Microphone"" OnIconName=""@BitIconName.MicOff"" /> -Check status is: @example32Value"; - private readonly string example4CsharpCode = @" -private bool example31Value; -private bool example32Value;"; } diff --git a/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitToggleButtonDemo.razor.scss b/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitToggleButtonDemo.razor.scss index 24175ce582..83ab080adb 100644 --- a/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitToggleButtonDemo.razor.scss +++ b/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitToggleButtonDemo.razor.scss @@ -11,6 +11,18 @@ } } +.buttons-container { + gap: 0.5rem; + display: flex; + flex-flow: row wrap; + align-items: flex-start; +} + +.buttons-container-grid { + gap: 0.5rem; + display: grid; +} + ::deep { .custom-class { color: aqua;