Add Color parameter to BitDropdown (#10693)#12323
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (6)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (4)
WalkthroughAdds 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. ChangesBitDropdown Color Parameter
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
There was a problem hiding this comment.
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
ColortoBitDropdownand mapsBitColorvalues 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. |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs (1)
929-949: ⚡ Quick winExtract 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
📒 Files selected for processing (9)
src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scsssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs
|
@coderabbitai re-review |
|
✅ Actions performedReview triggered.
|
|
@coderabbitai re-review |
|
✅ Actions performedReview triggered.
|
closes #10693
Summary by CodeRabbit
New Features
Style
Documentation
Tests