diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor index 50df2f2db2..f7627c0d5f 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor @@ -51,7 +51,7 @@ aria-required="@Required" aria-disabled="@(IsEnabled is false)" aria-expanded=@(IsOpen ? "true" : "false") - aria-labelledby="@GetDropdownAriaLabelledby" + aria-labelledby="@GetDropdownAriaLabelledby()" aria-controls="@(IsOpen? _calloutId : null)"> @if (PrefixTemplate is not null) diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs index 632140bf9c..465a742bc1 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs @@ -5,7 +5,8 @@ namespace Bit.BlazorUI; /// -/// A dropdown is a list in which the selected item is always visible while other items are visible on demand by clicking a dropdown button. Dropdowns are typically used for forms. +/// A dropdown is a list in which the selected item is always visible while other items are +/// visible on demand by clicking a dropdown button. Dropdowns are typically used for forms. /// public partial class BitDropdown : BitInputBase where TItem : class, new() { @@ -106,6 +107,12 @@ namespace Bit.BlazorUI; /// [Parameter] public BitDropdownClassStyles? Classes { get; set; } + /// + /// The general color of the dropdown. + /// + [Parameter, ResetClassBuilder] + public BitColor? Color { get; set; } + /// /// The icon of the clear button of the dropdown. /// Takes precedence over when both are set. @@ -920,6 +927,8 @@ protected override void RegisterCssClasses() { ClassBuilder.Register(() => Classes?.Root); + ClassBuilder.Register(() => GetColorClass()); + ClassBuilder.Register(() => Required ? "bit-drp-req" : string.Empty); ClassBuilder.Register(() => _selectedItems?.Count > 0 ? "bit-drp-hvl" : string.Empty); @@ -1182,13 +1191,25 @@ private async Task HandleOnClick(MouseEventArgs e) await FocusOnSearchBox(); } - private void HandleOnValueChanged(object? sender, EventArgs args) => UpdateSelectedItemsFromValues(); + private void HandleOnValueChanged(object? sender, EventArgs args) + { + UpdateSelectedItemsFromValues(); + } - private void HandleSearchBoxFocusIn() => _inputSearchHasFocus = true; + private void HandleSearchBoxFocusIn() + { + _inputSearchHasFocus = true; + } - private void HandleSearchBoxFocusOut() => _inputSearchHasFocus = false; + private void HandleSearchBoxFocusOut() + { + _inputSearchHasFocus = false; + } - private Task HandleSearchBoxOnClear() => ClearSearchBox(); + private Task HandleSearchBoxOnClear() + { + return ClearSearchBox(); + } private async Task HandleFilterChange(ChangeEventArgs e) { @@ -1278,7 +1299,10 @@ private string GetSearchBoxClasses() return className.ToString(); } - private string GetDropdownAriaLabelledby => Label.HasValue() ? $"{_labelId} {_dropdownTextContainerId}" : _dropdownTextContainerId; + private string GetDropdownAriaLabelledby() + { + return Label.HasValue() ? $"{_labelId} {_dropdownTextContainerId}" : _dropdownTextContainerId; + } private async Task SearchVirtualized() { @@ -1445,7 +1469,10 @@ private async Task HandleOnKeyDown(KeyboardEventArgs eventArgs) } } - private Task HandleOnClickUnselectItem(TItem? item) => UnselectItem(item); + private Task HandleOnClickUnselectItem(TItem? item) + { + return UnselectItem(item); + } private async Task HandleOnComboInput(ChangeEventArgs e) { @@ -1646,10 +1673,35 @@ private string GetCalloutCssClasses() classes.Add("bit-drp-rtl"); } + classes.Add(GetColorClass()); + return string.Join(' ', classes).Trim(); } - + private string GetColorClass() + { + return Color switch + { + BitColor.Primary => "bit-drp-pri", + BitColor.Secondary => "bit-drp-sec", + BitColor.Tertiary => "bit-drp-ter", + BitColor.Info => "bit-drp-inf", + BitColor.Success => "bit-drp-suc", + BitColor.Warning => "bit-drp-wrn", + BitColor.SevereWarning => "bit-drp-swr", + BitColor.Error => "bit-drp-err", + BitColor.PrimaryBackground => "bit-drp-pbg", + BitColor.SecondaryBackground => "bit-drp-sbg", + BitColor.TertiaryBackground => "bit-drp-tbg", + BitColor.PrimaryForeground => "bit-drp-pfg", + BitColor.SecondaryForeground => "bit-drp-sfg", + BitColor.TertiaryForeground => "bit-drp-tfg", + BitColor.PrimaryBorder => "bit-drp-pbr", + BitColor.SecondaryBorder => "bit-drp-sbr", + BitColor.TertiaryBorder => "bit-drp-tbr", + _ => "bit-drp-pri" + }; + } protected override async ValueTask DisposeAsync(bool disposing) { diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss index b236acee23..c1dddd43b9 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss @@ -7,6 +7,9 @@ position: relative; flex-direction: column; font-family: $tg-font-family; + --bit-drp-clr: #{$clr-pri}; + --bit-drp-clr-hover: #{$clr-pri-hover}; + --bit-drp-clr-text: #{$clr-pri-text}; &.bit-drp-req { .bit-drp-lbl { @@ -173,7 +176,7 @@ pointer-events: none; inset: spacing(-0.125); border-radius: $shp-border-radius; - border: spacing(0.25) $shp-border-style $clr-pri; + border: spacing(0.25) $shp-border-style var(--bit-drp-clr); } } } @@ -257,12 +260,12 @@ background-color: $clr-bg-sec; .bit-drp-chb { - border-color: $clr-pri; - background-color: $clr-pri; + border-color: var(--bit-drp-clr); + background-color: var(--bit-drp-clr); .bit-drp-chm { opacity: 1; - color: $clr-pri-text; + color: var(--bit-drp-clr-text); } } @@ -271,8 +274,8 @@ background-color: $clr-bg-pri-hover; .bit-drp-chb { - border-color: $clr-pri-hover; - background-color: $clr-pri-hover; + border-color: var(--bit-drp-clr-hover); + background-color: var(--bit-drp-clr-hover); } } } @@ -420,7 +423,7 @@ .bit-drp-sic { i { - color: $clr-pri-hover; + color: var(--bit-drp-clr-hover); } } } @@ -453,7 +456,7 @@ .bit-drp-sic { i { - color: $clr-pri-hover; + color: var(--bit-drp-clr-hover); } } } @@ -464,7 +467,7 @@ &:hover { .bit-drp-sic { width: spacing(0.5); - color: $clr-pri-hover; + color: var(--bit-drp-clr-hover); i { opacity: 0; @@ -475,7 +478,7 @@ } &.bit-drp-shf { - border-bottom: spacing(0.25) $shp-border-style $clr-pri; + border-bottom: spacing(0.25) $shp-border-style var(--bit-drp-clr); .bit-drp-sic { width: spacing(0.5); @@ -488,7 +491,7 @@ @media (hover: hover) { &:hover { border-width: 0 0 $shp-border-width; - border-bottom: spacing(0.25) $shp-border-style $clr-pri; + border-bottom: spacing(0.25) $shp-border-style var(--bit-drp-clr); } } } @@ -503,7 +506,7 @@ font-size: spacing(2); flex-direction: column; justify-content: center; - color: $clr-pri; + color: var(--bit-drp-clr); transition: width 0.167s ease 0s; i { @@ -512,7 +515,7 @@ width: unset; height: unset; display: inline-block; - color: $clr-pri; + color: var(--bit-drp-clr); transition: opacity 0.167s ease 0s; } } @@ -573,7 +576,7 @@ box-sizing: border-box; padding: 0 spacing(0.5); font-size: spacing(1.75); - color: $clr-pri; + color: var(--bit-drp-clr); background-color: transparent; font-family: $tg-font-family; border-radius: 0 spacing(0.125) spacing(0.125) 0; @@ -649,7 +652,7 @@ .bit-drp-ihd { width: 100%; - color: $clr-pri; + color: var(--bit-drp-clr); cursor: default; font-weight: 600; user-select: none; @@ -796,3 +799,106 @@ transform: translateX(-100%); } } + + +.bit-drp-pri { + --bit-drp-clr: #{$clr-pri}; + --bit-drp-clr-hover: #{$clr-pri-hover}; + --bit-drp-clr-text: #{$clr-pri-text}; +} + +.bit-drp-sec { + --bit-drp-clr: #{$clr-sec}; + --bit-drp-clr-hover: #{$clr-sec-hover}; + --bit-drp-clr-text: #{$clr-sec-text}; +} + +.bit-drp-ter { + --bit-drp-clr: #{$clr-ter}; + --bit-drp-clr-hover: #{$clr-ter-hover}; + --bit-drp-clr-text: #{$clr-ter-text}; +} + +.bit-drp-inf { + --bit-drp-clr: #{$clr-inf}; + --bit-drp-clr-hover: #{$clr-inf-hover}; + --bit-drp-clr-text: #{$clr-inf-text}; +} + +.bit-drp-suc { + --bit-drp-clr: #{$clr-suc}; + --bit-drp-clr-hover: #{$clr-suc-hover}; + --bit-drp-clr-text: #{$clr-suc-text}; +} + +.bit-drp-wrn { + --bit-drp-clr: #{$clr-wrn}; + --bit-drp-clr-hover: #{$clr-wrn-hover}; + --bit-drp-clr-text: #{$clr-wrn-text}; +} + +.bit-drp-swr { + --bit-drp-clr: #{$clr-swr}; + --bit-drp-clr-hover: #{$clr-swr-hover}; + --bit-drp-clr-text: #{$clr-swr-text}; +} + +.bit-drp-err { + --bit-drp-clr: #{$clr-err}; + --bit-drp-clr-hover: #{$clr-err-hover}; + --bit-drp-clr-text: #{$clr-err-text}; +} + +.bit-drp-pbg { + --bit-drp-clr: #{$clr-bg-pri}; + --bit-drp-clr-hover: #{$clr-bg-pri-hover}; + --bit-drp-clr-text: #{$clr-fg-pri}; +} + +.bit-drp-sbg { + --bit-drp-clr: #{$clr-bg-sec}; + --bit-drp-clr-hover: #{$clr-bg-sec-hover}; + --bit-drp-clr-text: #{$clr-fg-sec}; +} + +.bit-drp-tbg { + --bit-drp-clr: #{$clr-bg-ter}; + --bit-drp-clr-hover: #{$clr-bg-ter-hover}; + --bit-drp-clr-text: #{$clr-fg-ter}; +} + +.bit-drp-pfg { + --bit-drp-clr: #{$clr-fg-pri}; + --bit-drp-clr-hover: #{$clr-fg-pri-hover}; + --bit-drp-clr-text: #{$clr-bg-pri}; +} + +.bit-drp-sfg { + --bit-drp-clr: #{$clr-fg-sec}; + --bit-drp-clr-hover: #{$clr-fg-sec-hover}; + --bit-drp-clr-text: #{$clr-bg-sec}; +} + +.bit-drp-tfg { + --bit-drp-clr: #{$clr-fg-ter}; + --bit-drp-clr-hover: #{$clr-fg-ter-hover}; + --bit-drp-clr-text: #{$clr-bg-ter}; +} + +.bit-drp-pbr { + --bit-drp-clr: #{$clr-brd-pri}; + --bit-drp-clr-hover: #{$clr-brd-pri-hover}; + --bit-drp-clr-text: #{$clr-fg-pri}; +} + +.bit-drp-sbr { + --bit-drp-clr: #{$clr-brd-sec}; + --bit-drp-clr-hover: #{$clr-brd-sec-hover}; + --bit-drp-clr-text: #{$clr-fg-sec}; +} + +.bit-drp-tbr { + --bit-drp-clr: #{$clr-brd-ter}; + --bit-drp-clr-hover: #{$clr-brd-ter-hover}; + --bit-drp-clr-text: #{$clr-fg-ter}; +} diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs index e83898d2df..5a3d89bc81 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs @@ -88,6 +88,15 @@ public partial class BitDropdownDemo Href = "#class-styles" }, new() + { + Name = "Color", + Type = "BitColor?", + DefaultValue = "null", + Description = "The general color of the dropdown.", + LinkType = LinkType.Link, + Href = "#color-enum", + }, + new() { Name = "ClearButtonIcon", Type = "BitIconInfo?", @@ -1180,6 +1189,117 @@ public partial class BitDropdownDemo } ] }, + new() + { + Id = "color-enum", + Name = "BitColor", + Description = "Defines the general colors available in the bit BlazorUI.", + Items = + [ + new() + { + Name= "Primary", + Description="Primary general color.", + Value="0", + }, + new() + { + Name= "Secondary", + Description="Secondary general color.", + Value="1", + }, + new() + { + Name= "Tertiary", + Description="Tertiary general color.", + Value="2", + }, + new() + { + Name= "Info", + Description="Info general color.", + Value="3", + }, + new() + { + Name= "Success", + Description="Success general color.", + Value="4", + }, + new() + { + Name= "Warning", + Description="Warning general color.", + Value="5", + }, + new() + { + Name= "SevereWarning", + Description="SevereWarning general color.", + Value="6", + }, + new() + { + Name= "Error", + Description="Error general color.", + Value="7", + }, + new() + { + Name= "PrimaryBackground", + Description="Primary background color.", + Value="8", + }, + new() + { + Name= "SecondaryBackground", + Description="Secondary background color.", + Value="9", + }, + new() + { + Name= "TertiaryBackground", + Description="Tertiary background color.", + Value="10", + }, + new() + { + Name= "PrimaryForeground", + Description="Primary foreground color.", + Value="11", + }, + new() + { + Name= "SecondaryForeground", + Description="Secondary foreground color.", + Value="12", + }, + new() + { + Name= "TertiaryForeground", + Description="Tertiary foreground color.", + Value="13", + }, + new() + { + Name= "PrimaryBorder", + Description="Primary border color.", + Value="14", + }, + new() + { + Name= "SecondaryBorder", + Description="Secondary border color.", + Value="15", + }, + new() + { + Name= "TertiaryBorder", + Description="Tertiary border color.", + Value="16", + } + ] + }, ]; private readonly List componentPublicMembers = [ diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor index 7031899f81..15edb7cde2 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor @@ -556,7 +556,69 @@ - + +
Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.
+
+
+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +
+ + +
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.


@@ -598,7 +660,7 @@
- +
Use BitDropdown in right-to-left (RTL).

@@ -626,7 +688,7 @@ - +
Demonstrates virtualization in the BitDropdown component for handling large datasets efficiently.



diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs index e5c6357805..ca6627bbb7 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs @@ -810,7 +810,7 @@ public class Product Value = { Selector = c => c.Value }, };"; - private readonly string example18RazorCode = @" + private readonly string example19RazorCode = @" "; - private readonly string example18CsharpCode = @" + private readonly string example19CsharpCode = @" public class Product { public string? Label { get; set; } @@ -1333,6 +1333,103 @@ public class Product };"; private readonly string example16RazorCode = @" + + + + + + + + + + + + + + +"; + private readonly string example16CsharpCode = @" +public class Product +{ + public string? Label { get; set; } + public string? Key { get; set; } + public object? Payload { get; set; } + public bool Disabled { get; set; } + public bool Visible { get; set; } = true; + public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal; + public string? Text { get; set; } + public string? Title { get; set; } + public string? Value { get; set; } +} + +private List GetBasicCustoms() => new() +{ + new() { Text = ""Fruits"", Type = BitDropdownItemType.Header }, + new() { Text = ""Apple"", Value = ""f-app"" }, + new() { Text = ""Banana"", Value = ""f-ban"" }, + new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true }, + new() { Text = ""Grape"", Value = ""f-gra"" }, + new() { Type = BitDropdownItemType.Divider }, + new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header }, + new() { Text = ""Broccoli"", Value = ""v-bro"" }, + new() { Text = ""Carrot"", Value = ""v-car"" }, + new() { Text = ""Lettuce"", Value = ""v-let"" } +}; + +private BitDropdownNameSelectors nameSelectors = new() +{ + AriaLabel = { Selector = c => c.Label }, + Id = { Selector = c => c.Key }, + Data = { Selector = c => c.Payload }, + IsEnabled = { Selector = c => c.Disabled is false }, + IsHidden = { Selector = c => c.Visible is false }, + ItemType = { Selector = c => c.Type }, + Text = { Selector = c => c.Text }, + Title = { Selector = c => c.Title }, + Value = { Selector = c => c.Value }, +};"; + + private readonly string example17RazorCode = @"