Skip to content

Add Color parameter to BitDropdown (#10693)#12323

Merged
msynk merged 3 commits into
bitfoundation:developfrom
msynk:10693-blazorui-dropdown-color
May 13, 2026
Merged

Add Color parameter to BitDropdown (#10693)#12323
msynk merged 3 commits into
bitfoundation:developfrom
msynk:10693-blazorui-dropdown-color

Conversation

@msynk
Copy link
Copy Markdown
Member

@msynk msynk commented May 13, 2026

closes #10693

Summary by CodeRabbit

  • New Features

    • BitDropdown now supports selectable color themes (Primary, Secondary, Tertiary, Info, Success, Warning, SevereWarning, Error).
  • Style

    • Dropdown styling migrated to CSS custom properties to enable themed colors across dropdown parts.
  • Documentation

    • Demo pages and examples updated with a new "Color" demo showcasing color variants; demo examples reindexed accordingly.
  • Tests

    • Added tests validating dropdown color classes on root and callout elements.

Review Change Stack

@msynk msynk requested a review from Copilot May 13, 2026 02:44
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 13, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 57a1f4dd-4ad6-4b99-8d38-004aa4ce2baf

📥 Commits

Reviewing files that changed from the base of the PR and between db784f7 and e297d5e.

📒 Files selected for processing (6)
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs
✅ Files skipped from review due to trivial changes (1)
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
🚧 Files skipped from review as they are similar to previous changes (4)
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs

Walkthrough

Adds a nullable Color parameter to BitDropdown, maps it to bit-drp-* modifier classes (applied to root and callout), migrates SCSS to use CSS custom properties for dropdown colors, updates demo pages and sample strings to showcase all color variants, and adds tests verifying produced classes.

Changes

BitDropdown Color Parameter

Layer / File(s) Summary
Color parameter contract and CSS class registration
src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs, src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
Adds Color parameter (BitColor?), registers corresponding bit-drp-* CSS class in RegisterCssClasses() and appends it in GetCalloutCssClasses() via GetColorClass(). Updates aria-labelledby invocation and refactors several small handlers to block-bodied methods.
CSS custom properties and theme styling
src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss
Introduces CSS custom properties --bit-drp-clr, --bit-drp-clr-hover, and --bit-drp-clr-text on .bit-drp. Replaces hardcoded SCSS color variables across focus/border/item/indicator styles with these properties. Adds theme modifier classes .bit-drp-pri.bit-drp-err that set the custom property values.
Demo parameter registration and enum definition
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs
Registers Color parameter in demo metadata as BitColor? (null default) and appends color-enum documenting BitColor options including background/foreground/border variants.
Demo examples showcasing Color variants across demo pages
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor, _BitDropdownCustomDemo.razor.samples.cs, _BitDropdownItemDemo.razor, _BitDropdownItemDemo.razor.samples.cs, _BitDropdownOptionDemo.razor, _BitDropdownOptionDemo.razor.samples.cs
Adds a new "Color" demo example (example16) showing multi-select dropdowns for each BitColor variant, inserts/updates virtualization and RTL sample strings, and renumbers subsequent examples (Style & Class → example17, RTL → example18, Virtualization → example19).
Tests
src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Dropdown/BitDropdownTests.cs
Adds data-driven tests asserting root .bit-drp and callout .bit-drp-cal contain expected bit-drp-* classes for multiple BitColor values and null.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 I hopped into code to paint the dropdown bright,
From Primary through Error, each hue in sight.
Variables now dance with classes in tow,
Demos parade the colors in a row.
twitches whiskers, very pleased

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and specifically describes the main change: adding a Color parameter to the BitDropdown component, with issue reference.
Linked Issues check ✅ Passed The PR fully implements the objective from #10693 by adding a Color parameter to BitDropdown with design system support and CSS class mapping.
Out of Scope Changes check ✅ Passed All changes are directly related to implementing the Color parameter feature. Event handler refactoring and demo updates are necessary supporting changes.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a Color parameter to BitDropdown so consumers can apply Bit.BlazorUI color variants consistently across the dropdown root and callout, with corresponding demo and API documentation updates.

Changes:

  • Adds Color to BitDropdown and maps BitColor values to dropdown CSS classes.
  • Updates dropdown SCSS to use color CSS variables for focus, selected items, icons, headers, and related states.
  • Adds Color examples and parameter/enum documentation across Item, Custom, and Option dropdown demos.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs Adds the Color parameter and color class mapping for root/callout.
src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss Introduces dropdown color variables and color variant classes.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs Documents the new parameter and BitColor enum.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor Adds the Item API Color demo and renumbers later examples.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs Adds Item API Color sample code and updates sample numbering.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor Adds the Custom API Color demo and renumbers later examples.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs Adds Custom API Color sample code and updates sample numbering.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor Adds the Option API Color demo and renumbers later examples.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs Adds Option API Color sample code and updates sample numbering.

Comment thread src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs Outdated
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (1)
src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs (1)

929-949: ⚡ Quick win

Extract Color-to-class mapping into a single helper.

Line 929 and Line 1677 duplicate the same switch. Centralizing it prevents future drift between root and callout classes.

♻️ Proposed refactor
 protected override void RegisterCssClasses()
 {
     ClassBuilder.Register(() => Classes?.Root);
-
-    ClassBuilder.Register(() => Color switch
-    {
-        BitColor.Primary => "bit-drp-pri",
-        ...
-        _ => "bit-drp-pri"
-    });
+    ClassBuilder.Register(() => GetColorClassName());

     ClassBuilder.Register(() => Required ? "bit-drp-req" : string.Empty);
     ...
 }

+private string GetColorClassName() => 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"
+};

 private string GetCalloutCssClasses()
 {
     List<string> classes = ["bit-drp-cal"];
     ...
-    classes.Add(Color switch { ... });
+    classes.Add(GetColorClassName());
     return string.Join(' ', classes).Trim();
 }

Also applies to: 1677-1697

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs`
around lines 929 - 949, The Color-to-class switch used in ClassBuilder.Register
is duplicated; extract it into a single private helper method (e.g.,
GetDropdownColorClass(BitColor color) or a private static method on BitDropdown)
that returns the CSS class string for a BitColor, then replace the inline switch
in ClassBuilder.Register (the lambda that references Color) and the duplicate
switch at the other location with calls to that helper (pass Color). Ensure the
helper covers all BitColor cases and preserves the current default value.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor`:
- Around line 551-613: The MultiSelect demos are using the single-value
attribute DefaultValue which is ignored for MultiSelect; update each BitDropdown
in this color-sample block to either remove the DefaultValue attribute or
replace it with the plural DefaultValues and supply a collection type (e.g., an
array/List of values that match the items from GetBasicItems()), ensuring the
attribute name is exactly DefaultValues for MultiSelect; search for BitDropdown
entries in this block (Label values: "Primary", "Secondary", "Tertiary", "Info",
"Success", "Warning", "SevereWarning", "Error") and change DefaultValue ->
DefaultValues or remove it consistently.

In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs`:
- Around line 1201-1203: Update the Description string for the dropdown item
with Name="Primary" (Value="0") in BitDropdownDemo so the user-facing text no
longer reads "Info Primary general color." — change it to a correct phrase such
as "Primary general color." by editing the Description property in the dropdown
items collection in BitDropdownDemo.razor.cs where the item Name="Primary" is
defined.

---

Nitpick comments:
In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs`:
- Around line 929-949: The Color-to-class switch used in ClassBuilder.Register
is duplicated; extract it into a single private helper method (e.g.,
GetDropdownColorClass(BitColor color) or a private static method on BitDropdown)
that returns the CSS class string for a BitColor, then replace the inline switch
in ClassBuilder.Register (the lambda that references Color) and the duplicate
switch at the other location with calls to that helper (pass Color). Ensure the
helper covers all BitColor cases and preserves the current default value.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: fb3bb2df-abb9-4615-9847-5f8979f88193

📥 Commits

Reviewing files that changed from the base of the PR and between 5a73e90 and 330b1ba.

📒 Files selected for processing (9)
  • src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
  • src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs

@msynk
Copy link
Copy Markdown
Member Author

msynk commented May 13, 2026

@coderabbitai re-review

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 13, 2026

@msynk Sure! I'll re-review the changes in this PR right away.

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated 3 comments.

@msynk msynk requested a review from Copilot May 13, 2026 06:14
@msynk
Copy link
Copy Markdown
Member Author

msynk commented May 13, 2026

@coderabbitai re-review

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 13, 2026

@msynk Sure! I'll re-review the changes in this PR right away.

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated no new comments.

@msynk msynk merged commit 85a4864 into bitfoundation:develop May 13, 2026
7 checks passed
@msynk msynk deleted the 10693-blazorui-dropdown-color branch May 13, 2026 07:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Missing Color parameter from the BitDropdown component

2 participants