Skip to content

Commit

Permalink
replace Severity parameter with Color in BitTag #8147
Browse files Browse the repository at this point in the history
  • Loading branch information
@msynk
msynk committed Aug 1, 2024
1 parent a8026b2 commit 90e8134
Show file tree
Hide file tree
Showing 7 changed files with 228 additions and 427 deletions.
18 changes: 8 additions & 10 deletions src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,15 @@
}
else
{
<div style="@Styles?.Content" class="bit-tag-ctn @Classes?.Content">
@if (IconName is not null)
{
<i style="@Styles?.Icon" class="bit-tag-icn bit-icon bit-icon--@IconName @Classes?.Icon" />
}
@if (IconName is not null)
{
<i style="@Styles?.Icon" class="bit-tag-icn bit-icon bit-icon--@IconName @Classes?.Icon" />
}

@if (Text is not null)
{
<span style="@Styles?.Text" class="bit-tag-tex @Classes?.Text">@Text</span>
}
</div>
@if (Text is not null)
{
<span style="@Styles?.Text" class="bit-tag-tex @Classes?.Text">@Text</span>
}
}

@if (OnDismiss.HasDelegate)
Expand Down
35 changes: 19 additions & 16 deletions src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@ public partial class BitTag : BitComponentBase
/// </summary>
[Parameter] public BitTagClassStyles? Classes { get; set; }

/// <summary>
/// The general color of the tag.
/// </summary>
[Parameter, ResetClassBuilder]
public BitColor? Color { get; set; }

/// <summary>
/// The icon to show inside the tag.
/// </summary>
Expand All @@ -27,12 +33,6 @@ public partial class BitTag : BitComponentBase
/// </summary>
[Parameter] public EventCallback<MouseEventArgs> OnDismiss { get; set; }

/// <summary>
/// The severity of the tag.
/// </summary>
[Parameter, ResetClassBuilder]
public BitSeverity? Severity { get; set; }

/// <summary>
/// Custom CSS styles for different parts of the BitTag.
/// </summary>
Expand All @@ -57,23 +57,26 @@ 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",
BitVariant.Outline => "bit-tag-otl",
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()
Expand Down
181 changes: 43 additions & 138 deletions src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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};
}
5 changes: 0 additions & 5 deletions src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTagClassStyles.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,6 @@ public class BitTagClassStyles
/// </summary>
public string? Root { get; set; }

/// <summary>
/// Custom CSS classes/styles for the content of the BitTag.
/// </summary>
public string? Content { get; set; }

/// <summary>
/// Custom CSS classes/styles for the text of the BitTag.
/// </summary>
Expand Down
Loading

0 comments on commit 90e8134

Please sign in to comment.