From 90e81344143c90a03f8e3de5e3a61a204609c500 Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Thu, 1 Aug 2024 20:35:34 +0330 Subject: [PATCH] replace Severity parameter with Color in BitTag #8147 --- .../Components/Notifications/Tag/BitTag.razor | 18 +- .../Notifications/Tag/BitTag.razor.cs | 35 +-- .../Components/Notifications/Tag/BitTag.scss | 181 ++++----------- .../Notifications/Tag/BitTagClassStyles.cs | 5 - .../Notifications/Tag/BitTagDemo.razor | 183 +++++---------- .../Notifications/Tag/BitTagDemo.razor.cs | 213 ++++++++---------- .../Notifications/Tag/BitTagDemo.razor.scss | 20 +- 7 files changed, 228 insertions(+), 427 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor index a71f581101..285148027d 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor +++ b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor @@ -13,17 +13,15 @@ } else { -
- @if (IconName is not null) - { - - } + @if (IconName is not null) + { + + } - @if (Text is not null) - { - @Text - } -
+ @if (Text is not null) + { + @Text + } } @if (OnDismiss.HasDelegate) diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor.cs index ba71f84024..10c6d4f96a 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor.cs @@ -12,6 +12,12 @@ public partial class BitTag : BitComponentBase /// [Parameter] public BitTagClassStyles? Classes { get; set; } + /// + /// The general color of the tag. + /// + [Parameter, ResetClassBuilder] + public BitColor? Color { get; set; } + /// /// The icon to show inside the tag. /// @@ -27,12 +33,6 @@ public partial class BitTag : BitComponentBase /// [Parameter] public EventCallback OnDismiss { get; set; } - /// - /// The severity of the tag. - /// - [Parameter, ResetClassBuilder] - public BitSeverity? Severity { get; set; } - /// /// Custom CSS styles for different parts of the BitTag. /// @@ -57,6 +57,19 @@ protected override void RegisterCssClasses() { ClassBuilder.Register(() => Classes?.Root); + ClassBuilder.Register(() => Color switch + { + BitColor.Primary => "bit-tag-pri", + BitColor.Secondary => "bit-tag-sec", + BitColor.Tertiary => "bit-tag-ter", + BitColor.Info => "bit-tag-inf", + BitColor.Success => "bit-tag-suc", + BitColor.Warning => "bit-tag-wrn", + BitColor.SevereWarning => "bit-tag-swr", + BitColor.Error => "bit-tag-err", + _ => "bit-tag-pri" + }); + ClassBuilder.Register(() => Variant switch { BitVariant.Fill => "bit-tag-fil", @@ -64,16 +77,6 @@ protected override void RegisterCssClasses() BitVariant.Text => "bit-tag-txt", _ => "bit-tag-fil" }); - - ClassBuilder.Register(() => Severity switch - { - BitSeverity.Info => "bit-tag-inf", - BitSeverity.Success => "bit-tag-suc", - BitSeverity.Warning => "bit-tag-wrn", - BitSeverity.SevereWarning => "bit-tag-swr", - BitSeverity.Error => "bit-tag-err", - _ => string.Empty - }); } protected override void RegisterCssStyles() diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scss b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scss index 9b01803d2a..3e14d8a9d3 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scss @@ -5,84 +5,37 @@ overflow: hidden; align-items: center; display: inline-flex; - min-height: spacing(4); - max-width: max-content; font-size: spacing(1.75); + font-family: $tg-font-family; + font-weight: $tg-font-weight; border-style: $shp-border-style; border-width: $shp-border-width; border-radius: $shp-border-radius; - font-family: $tg-font-family; - font-weight: $tg-font-weight; - user-select: none; - -moz-user-select: none; - -webkit-user-select: none; + padding: spacing(0.75) spacing(1.5); &.bit-dis { cursor: default; - pointer-events: none; + user-select: none; color: $clr-fg-dis; + pointer-events: none; } } -.bit-tag-ctn { - gap: spacing(1); - align-items: center; - display: inline-flex; - padding-inline: spacing(1); -} - .bit-tag-cls { + padding: 0; border: none; display: flex; color: inherit; cursor: pointer; - font-weight: 400; - width: spacing(4); - height: spacing(4); - align-self: normal; - text-align: center; - align-items: center; - text-decoration: none; box-sizing: border-box; - justify-content: center; - font-size: spacing(1.75); - margin-inline-start: auto; - padding-inline: spacing(0.5); background-color: transparent; - - span { - height: 100%; - display: flex; - flex-wrap: nowrap; - align-items: center; - justify-content: center; - - i { - margin-inline: spacing(0.5); - } - } } -.bit-tag-fil { - color: var(--bit-tag-pri-clr); - background-color: var(--bit-tag-bg-clr); - border-color: var(--bit-tag-pri-brd-clr); - --bit-tag-bg-clr: #{$clr-pri}; - --bit-tag-pri-clr: #{$clr-pri-text}; - --bit-tag-pri-brd-clr: #{$clr-pri}; - --bit-tag-pri-hover-bg-clr: #{$clr-pri-hover}; - --bit-tag-pri-active-bg-clr: #{$clr-pri-active}; - --bit-tag-ldg-brd-top-clr: #{$clr-pri-dark}; - - @media (hover: hover) { - .bit-tag-cls:hover { - background-color: var(--bit-tag-pri-hover-bg-clr); - } - } - .bit-tag-cls:active { - background-color: var(--bit-tag-pri-active-bg-clr); - } +.bit-tag-fil { + color: var(--bit-tag-clr-txt); + border-color: var(--bit-tag-clr); + background-color: var(--bit-tag-clr); &.bit-dis { border-color: $clr-brd-dis; @@ -91,111 +44,63 @@ } .bit-tag-otl { - color: var(--bit-tag-sec-clr); - background-color: $clr-sec; - border-color: var(--bit-tag-sec-brd-clr); - --bit-tag-sec-clr: #{$clr-sec-text}; - --bit-tag-sec-brd-clr: #{$clr-sec-text}; - --bit-tag-sec-hover-bg-clr: #{$clr-sec-hover}; - --bit-tag-sec-active-bg-clr: #{$clr-sec-active}; - --bit-tag-ldg-brd-top-clr: #{$clr-pri-dark}; - - @media (hover: hover) { - .bit-tag-cls:hover { - background-color: var(--bit-tag-sec-hover-bg-clr); - } - } - - .bit-tag-cls:active { - background-color: var(--bit-tag-sec-active-bg-clr); - } + color: var(--bit-tag-clr); + border-color: var(--bit-tag-clr); + background-color: transparent; &.bit-dis { border-color: $clr-brd-dis; + background-color: transparent; } } .bit-tag-txt { + color: var(--bit-tag-clr); border-color: transparent; - color: var(--bit-tag-sec-clr); background-color: transparent; - --bit-tag-sec-clr: #{$clr-sec-text}; - --bit-tag-sec-hover-bg-clr: #{$clr-sec-hover}; - --bit-tag-sec-active-bg-clr: #{$clr-sec-active}; - --bit-tag-ldg-brd-top-clr: #{$clr-pri-dark}; - - @media (hover: hover) { - .bit-tag-cls:hover { - background-color: var(--bit-tag-sec-hover-bg-clr); - } - } - .bit-tag-cls:active { - background-color: var(--bit-tag-sec-active-bg-clr); + &.bit-dis { + border-color: transparent; + background-color: transparent; } } +.bit-tag-pri { + --bit-tag-clr: #{$clr-pri}; + --bit-tag-clr-txt: #{$clr-pri-text}; +} + +.bit-tag-sec { + --bit-tag-clr: #{$clr-sec}; + --bit-tag-clr-txt: #{$clr-sec-text}; +} + +.bit-tag-ter { + --bit-tag-clr: #{$clr-ter}; + --bit-tag-clr-txt: #{$clr-ter-text}; +} + .bit-tag-inf { - --bit-tag-bg-clr: #{$clr-inf}; - --bit-tag-ldg-brd-top-clr: #{$clr-inf}; - --bit-tag-pri-clr: #{$clr-fg-pri}; - --bit-tag-pri-brd-clr: #{$clr-inf}; - --bit-tag-pri-hover-bg-clr: #{$clr-inf-hover}; - --bit-tag-pri-active-bg-clr: #{$clr-inf-active}; - --bit-tag-sec-clr: #{$clr-inf}; - --bit-tag-sec-brd-clr: #{$clr-inf}; - --bit-tag-sec-hover-bg-clr: #{$clr-inf-hover}; - --bit-tag-sec-active-bg-clr: #{$clr-inf-active}; + --bit-tag-clr: #{$clr-inf}; + --bit-tag-clr-txt: #{$clr-inf-text}; } .bit-tag-suc { - --bit-tag-bg-clr: #{$clr-suc}; - --bit-tag-ldg-brd-top-clr: #{$clr-suc}; - --bit-tag-pri-clr: #{$clr-fg-pri}; - --bit-tag-pri-brd-clr: #{$clr-suc}; - --bit-tag-pri-hover-bg-clr: #{$clr-suc-hover}; - --bit-tag-pri-active-bg-clr: #{$clr-suc-active}; - --bit-tag-sec-clr: #{$clr-suc}; - --bit-tag-sec-brd-clr: #{$clr-suc}; - --bit-tag-sec-hover-bg-clr: #{$clr-suc-hover}; - --bit-tag-sec-active-bg-clr: #{$clr-suc-active}; + --bit-tag-clr: #{$clr-suc}; + --bit-tag-clr-txt: #{$clr-suc-text}; } .bit-tag-wrn { - --bit-tag-bg-clr: #{$clr-wrn}; - --bit-tag-ldg-brd-top-clr: #{$clr-wrn}; - --bit-tag-pri-clr: #{$clr-fg-pri}; - --bit-tag-pri-brd-clr: #{$clr-wrn}; - --bit-tag-pri-hover-bg-clr: #{$clr-wrn-hover}; - --bit-tag-pri-active-bg-clr: #{$clr-wrn-active}; - --bit-tag-sec-clr: #{$clr-wrn}; - --bit-tag-sec-brd-clr: #{$clr-wrn}; - --bit-tag-sec-hover-bg-clr: #{$clr-wrn-hover}; - --bit-tag-sec-active-bg-clr: #{$clr-wrn-active}; + --bit-tag-clr: #{$clr-wrn}; + --bit-tag-clr-txt: #{$clr-wrn-text}; } .bit-tag-swr { - --bit-tag-bg-clr: #{$clr-swr}; - --bit-tag-ldg-brd-top-clr: #{$clr-swr}; - --bit-tag-pri-clr: #{$clr-fg-pri}; - --bit-tag-pri-brd-clr: #{$clr-swr}; - --bit-tag-pri-hover-bg-clr: #{$clr-swr-hover}; - --bit-tag-pri-active-bg-clr: #{$clr-swr-active}; - --bit-tag-sec-clr: #{$clr-swr}; - --bit-tag-sec-brd-clr: #{$clr-swr}; - --bit-tag-sec-hover-bg-clr: #{$clr-swr-hover}; - --bit-tag-sec-active-bg-clr: #{$clr-swr-active}; + --bit-tag-clr: #{$clr-swr}; + --bit-tag-clr-txt: #{$clr-swr-text}; } .bit-tag-err { - --bit-tag-bg-clr: #{$clr-err}; - --bit-tag-ldg-brd-top-clr: #{$clr-err}; - --bit-tag-pri-clr: #{$clr-fg-pri}; - --bit-tag-pri-brd-clr: #{$clr-err}; - --bit-tag-pri-hover-bg-clr: #{$clr-err-hover}; - --bit-tag-pri-active-bg-clr: #{$clr-err-active}; - --bit-tag-sec-clr: #{$clr-err}; - --bit-tag-sec-brd-clr: #{$clr-err}; - --bit-tag-sec-hover-bg-clr: #{$clr-err-hover}; - --bit-tag-sec-active-bg-clr: #{$clr-err-active}; + --bit-tag-clr: #{$clr-err}; + --bit-tag-clr-txt: #{$clr-err-text}; } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTagClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTagClassStyles.cs index b97b15e151..4a64e7e65b 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTagClassStyles.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTagClassStyles.cs @@ -7,11 +7,6 @@ public class BitTagClassStyles /// public string? Root { get; set; } - /// - /// Custom CSS classes/styles for the content of the BitTag. - /// - public string? Content { get; set; } - /// /// Custom CSS classes/styles for the text of the BitTag. /// diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor index 0ea41ebd20..c3099d1121 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor @@ -11,9 +11,7 @@ ComponentSubClasses="componentSubClasses"> -
- -
+ @@ -21,65 +19,19 @@
The tag offers three variants: Fill (default), Outline, and Text.

-
- -
-
- -
-
- -
+   +   + - + -
- Fill tags are attention-grabbing, featuring a filled appearance. They're designed for essential actions at the core of your application. -
-
-
- - -
+ - - -
- Outline tags 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 tags and the more prominent Fill tags, providing flexibility in emphasis. -
-
-
- - -
- - - - - -
- Text tags are best suited for understated actions, serving as a less prominent choice in various interface elements. -
-
-
- - -
- - - - - - - - - - + @if (isDismissed is false) { @@ -93,47 +45,45 @@ - + -
- Offering a range of specialized color variants, providing visual cues for specific actions or states within your application. -
+
Offering a range of specialized color variants, providing visual cues for specific actions or states within your application.

-
-
- - - -
-
-
- - - -
-
-
- - - -
-
-
- - - -
-
-
- - - -
-
+   +   + +

+   +   + +

+   +   + +

+   +   + +

+   +   + +

+   +   + +

+   +   + +

+   +   + - + @@ -144,51 +94,32 @@ - + -
- Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements. -
+
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.

Component's Style & Class:

-
+
+ Style="border-radius: 1rem; font-weight:bold" />  +


+
Styles & Classes:
+
+ +   +
-


-
Styles & Classes:
-
-
- @if (isDismissed2 is false) - { - - } - - @if (isDismissed3 is false) - { - - } -
-
- - Dismissed, click to reset - \ No newline at end of file diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cs index b448e19f92..883172f562 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cs @@ -21,6 +21,15 @@ public partial class BitTagDemo Href = "#tag-class-styles" }, new() + { + Name = "Color", + Type = "BitColor?", + DefaultValue = "null", + Description = "The general color of the tag.", + LinkType = LinkType.Link, + Href = "#color-enum" + }, + new() { Name = "IconName", Type = "string?", @@ -42,15 +51,6 @@ public partial class BitTagDemo Description = "Dismiss button click event, if set the dismiss icon will show up." }, new() - { - Name = "Severity", - Type = "BitSeverity?", - DefaultValue = "null", - Description = "The severity of the tag.", - LinkType = LinkType.Link, - Href = "#severity-enum" - }, - new() { Name = "Styles", Type = "BitTagClassStyles?", @@ -93,13 +93,6 @@ public partial class BitTagDemo Description = "Custom CSS classes/styles for the root element of the BitTag." }, new() - { - Name = "Content", - Type = "string?", - DefaultValue = "null", - Description = "Custom CSS classes/styles for the content of the BitTag." - }, - new() { Name = "Text", Type = "string?", @@ -135,67 +128,85 @@ public partial class BitTagDemo [ new() { - Id = "variant-enum", - Name = "BitVariant", - Description = "Determines the variant of the content that controls the rendered style of the corresponding element(s).", + Id = "color-enum", + Name = "BitColor", + Description = "Defines the general colors available in the bit BlazorUI.", Items = [ new() { - Name= "Fill", - Description="Fill styled variant.", + Name= "Primary", + Description="Info Primary general color.", Value="0", }, new() { - Name= "Outline", - Description="Outline styled variant.", + Name= "Secondary", + Description="Secondary general color.", Value="1", }, new() { - Name= "Text", - Description="Text styled variant.", + Name= "Tertiary", + Description="Tertiary general color.", Value="2", - } - ] - }, - new() - { - Id = "severity-enum", - Name = "BitSeverity", - Description = "", - Items = - [ + }, new() { Name= "Info", - Description="Info styled tag.", - Value="0", + Description="Info general color.", + Value="3", }, new() { Name= "Success", - Description="Success styled tag.", - Value="1", + Description="Success general color.", + Value="4", }, new() { Name= "Warning", - Description="Warning styled tag.", - Value="2", + Description="Warning general color.", + Value="5", }, new() { Name= "SevereWarning", - Description="Severe Warning styled tag.", - Value="3", + Description="SevereWarning general color.", + Value="6", }, new() { Name= "Error", - Description="Error styled tag.", - Value="4", + Description="Error general color.", + Value="7", + } + ] + }, + new() + { + Id = "variant-enum", + Name = "BitVariant", + Description = "Determines the variant of the content that controls the rendered style of the corresponding element(s).", + Items = + [ + new() + { + Name= "Fill", + Description="Fill styled variant.", + Value="0", + }, + new() + { + Name= "Outline", + Description="Outline styled variant.", + Value="1", + }, + new() + { + Name= "Text", + Description="Text styled variant.", + Value="2", } ] }, @@ -204,35 +215,21 @@ public partial class BitTagDemo private bool isDismissed; - private bool isDismissed2; - private bool isDismissed3; private readonly string example1RazorCode = @" -"; +"; private readonly string example2RazorCode = @" - - + + "; private readonly string example3RazorCode = @" - -"; +"; private readonly string example4RazorCode = @" - -"; - - private readonly string example5RazorCode = @" - -"; - - private readonly string example6RazorCode = @" -"; - - private readonly string example7RazorCode = @" @if (isDismissed is false) { isDismissed = true"" /> @@ -241,31 +238,43 @@ public partial class BitTagDemo isDismissed = false""> Dismissed, click to reset "; - private readonly string example7CsharpCode = @" + private readonly string example4CsharpCode = @" private bool isDismissed;"; - private readonly string example8RazorCode = @" - - - + private readonly string example5RazorCode = @" + + + - - - + + + - - - + + + - - - + + + - - -"; + + + - private readonly string example9RazorCode = @" + + + + + + + + + + +"; + + private readonly string example6RazorCode = @" Custom content @@ -273,7 +282,7 @@ public partial class BitTagDemo "; - private readonly string example10RazorCode = @" + private readonly string example7RazorCode = @" + -@if (isDismissed2 is false) -{ - isDismissed2 = true"" - Styles=""@(new() { Root = ""border-color: darkblue; border-width: 0.25rem;"", - Text = ""color: darkblue; font-weight: 600;"", - DismissIcon = ""color: darkblue; font-weight: 600;"" })"" /> -} -@if (isDismissed3 is false) -{ - isDismissed3 = true"" - Variant=""BitVariant.Outline"" - Classes=""@(new() { Root = ""custom-root"", - Icon = ""custom-icon"", - DismissButton = ""custom-dismiss"" })"" /> -} + - isDismissed2 = isDismissed3 = false""> - Dismissed, click to reset -"; - private readonly string example10CsharpCode = @" -private bool isDismissed2; -private bool isDismissed3;"; +"; } diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.scss index c32a69f983..02f448dd03 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.scss +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.scss @@ -1,16 +1,4 @@ -.tags-container { - gap: 0.5rem; - display: flex; - flex-flow: row wrap; - align-items: flex-start; -} - -.tags-container-grid { - gap: 0.5rem; - display: grid; -} - -::deep { +::deep { .custom-class { border-radius: 0.25rem; box-shadow: aqua 0 0 0.5rem; @@ -27,10 +15,4 @@ font-size: 1.25rem; font-weight: bolder; } - - .custom-dismiss { - margin: 0.25rem; - border-radius: 50%; - border: 1px solid mediumpurple; - } } \ No newline at end of file