Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace Severity parameter with Color in BitTag (#8147) #8184

Merged
merged 1 commit into from
Aug 1, 2024
Merged

Replace Severity parameter with Color in BitTag (#8147) #8184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 8 additions & 10 deletions src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading