From 330b1bac4b2ad1b7e4a2913c75b569638a4b9071 Mon Sep 17 00:00:00 2001 From: msynk Date: Wed, 13 May 2026 06:13:36 +0330 Subject: [PATCH 1/3] add Color parameter to BitDropdown #10693 --- .../Inputs/Dropdown/BitDropdown.razor.cs | 50 +++++++ .../Inputs/Dropdown/BitDropdown.scss | 136 ++++++++++++++++-- .../Inputs/Dropdown/BitDropdownDemo.razor.cs | 120 ++++++++++++++++ .../Dropdown/_BitDropdownCustomDemo.razor | 68 ++++++++- .../_BitDropdownCustomDemo.razor.samples.cs | 67 ++++++++- .../Dropdown/_BitDropdownItemDemo.razor | 76 +++++++++- .../_BitDropdownItemDemo.razor.samples.cs | 75 +++++++++- .../Dropdown/_BitDropdownOptionDemo.razor | 100 ++++++++++++- .../_BitDropdownOptionDemo.razor.samples.cs | 99 ++++++++++++- 9 files changed, 752 insertions(+), 39 deletions(-) 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..cb7ded3ad8 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs @@ -106,6 +106,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 +926,28 @@ protected override void RegisterCssClasses() { ClassBuilder.Register(() => Classes?.Root); + ClassBuilder.Register(() => 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" + }); + ClassBuilder.Register(() => Required ? "bit-drp-req" : string.Empty); ClassBuilder.Register(() => _selectedItems?.Count > 0 ? "bit-drp-hvl" : string.Empty); @@ -1646,6 +1674,28 @@ private string GetCalloutCssClasses() classes.Add("bit-drp-rtl"); } + classes.Add(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" + }); + return string.Join(' ', classes).Trim(); } 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..ee703bcc17 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="Info 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..3c88a1b8cb 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..ea258d06d5 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,63 @@ public class Product };"; private readonly string example16RazorCode = @" + + + + + + + + + + + + + + +"; + + private readonly string example17RazorCode = @"