Skip to content

Add missing new Icon parameters to BitDropdown (#12201)#12202

Merged
msynk merged 2 commits intobitfoundation:developfrom
msynk:12201-blazorui-dropdown-missing-new-icons
Mar 21, 2026
Merged

Add missing new Icon parameters to BitDropdown (#12201)#12202
msynk merged 2 commits intobitfoundation:developfrom
msynk:12201-blazorui-dropdown-missing-new-icons

Conversation

@msynk
Copy link
Copy Markdown
Member

@msynk msynk commented Mar 20, 2026

closes #12201

Summary by CodeRabbit

  • New Features

    • Added customizable icon support for dropdown UI elements, including clear button, chips remove, search box, and responsive controls.
    • Supported integration with external icon libraries and Fluent UI icon names.
  • Tests

    • Added test coverage for icon rendering across dropdown components.

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 20, 2026

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: b54d5688-015e-46fc-9a0e-86da3203c7f6

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

Walkthrough

This pull request adds icon customization support to the BitDropdown component by introducing parameters for configurable external icons (chips remove, clear button, responsive close, and search box icons) alongside existing icon support, with corresponding demo examples and test coverage.

Changes

Cohort / File(s) Summary
BitDropdown Component Implementation
src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor, BitDropdown.razor.cs
Added 12 new icon configuration parameters (ChipsRemoveIcon/ChipsRemoveIconName, ClearButtonIcon/ClearButtonIconName, ComboBoxAddButtonIcon/ComboBoxAddButtonIconName, ResponsiveCloseIcon/ResponsiveCloseIconName, SearchBoxClearIcon/SearchBoxClearIconName, SearchBoxIcon/SearchBoxIconName). Updated Razor markup to compute icon CSS classes dynamically. Swapped CalloutHeaderTemplate and CalloutFooterTemplate parameter meanings and updated documentation.
Demo Component Markup & Configuration
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor*, _BitDropdownCustomDemo.razor*, _BitDropdownItemDemo.razor*, _BitDropdownOptionDemo.razor*
Updated demo text to reference new icon parameters. Added demo instances showcasing external icon usage for clear button, chips remove, search box icons with Font Awesome examples. Updated parameter metadata for new icon configurations and callout template swap.
Test Coverage
src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Dropdown/BitDropdownTests.cs
Added five parameterized test methods validating icon class rendering: ChipsRemoveIconNameTest, ClearButtonIconNameTest, ResponsiveCloseIconNameTest, SearchBoxIconNameTest, and SearchBoxClearIconNameTest, with tests for both custom icons and default fallbacks.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Poem

🐰 With icons new, so bright and free,
External libraries we now can see!
Dropdowns dance with customized flair,
Clear buttons, chips, and searches fair!
Configuration blooms in every layer,
A rabbit's joy—no more CSS despair!

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

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.
Out of Scope Changes check ❓ Inconclusive The PR includes a parameter swap of CalloutHeaderTemplate and CalloutFooterTemplate that appears unrelated to the Icon parameters objective. Clarify whether the CalloutHeaderTemplate/CalloutFooterTemplate parameter swap is intentional or should be separated into a distinct PR for better traceability.
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'Add missing new Icon parameters to BitDropdown (#12201)' clearly and specifically describes the main change—adding Icon parameters to the BitDropdown component.
Linked Issues check ✅ Passed The PR successfully adds Icon parameters to BitDropdown for external icon customization, addressing the requirement in issue #12201 to implement missing Icon functionality.

✏️ 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.

Tip

CodeRabbit can use Trivy to scan for security misconfigurations and secrets in Infrastructure as Code files.

Add a .trivyignore file to your project to customize which findings Trivy reports.

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 the missing BitIconInfo-based icon parameters to BitDropdown so consumers can use external icon libraries (FontAwesome/Bootstrap/etc.) for more UI elements, and updates demos/tests/docs accordingly.

Changes:

  • Added new BitIconInfo? / string? ...IconName parameters for chips remove, clear button, search box (icon + clear), responsive close, and responsive ComboBox add button.
  • Updated BitDropdown.razor rendering to use BitIconInfo.From(...).GetCssClasses() for these icons.
  • Expanded demo examples/documentation and added MSTest coverage for the new *IconName parameters.

Reviewed changes

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

Show a summary per file
File Description
src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs Adds new public parameters for icon customization (external + Fluent UI icon-name variants).
src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor Wires new icon parameters into the rendered markup via computed CSS classes.
src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Dropdown/BitDropdownTests.cs Adds tests for the new *IconName parameters and default fallbacks.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs Updates the demo parameter table to include the new icon parameters (and reorders callout template params).
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor Enables the introduction video URL in the demo page header.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor Adds external-icon examples for clear button, chips remove, and search box icons.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs Adds sample code blocks demonstrating external icons for new parameters.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor Updates external-icons description text to list the new icon parameters.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs Adds option-based samples for external clear/search icons.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor Updates external-icons description text to list the new icon parameters.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs Adds custom-item samples for external clear/search icons.

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: 4

🧹 Nitpick comments (1)
src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Dropdown/BitDropdownTests.cs (1)

1019-1186: Consider adding tests for *Icon (BitIconInfo) parameters.

The tests cover the *IconName parameters well, but the corresponding *Icon parameters (e.g., ChipsRemoveIcon, ClearButtonIcon) which accept BitIconInfo are not tested. These would use different CSS class patterns (e.g., via BitIconInfo.Css()). Consider adding tests to verify the precedence behavior documented in the component (Icon takes precedence over IconName).

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Dropdown/BitDropdownTests.cs`
around lines 1019 - 1186, Add tests that use the BitIconInfo-based parameters
(e.g., ChipsRemoveIcon, ClearButtonIcon, ResponsiveCloseIcon, SearchBoxIcon,
SearchBoxClearIcon) to assert the rendered icon uses BitIconInfo.Css() classes
and to verify precedence: when both the Icon (BitIconInfo) and IconName are
supplied the Icon must win; extend or add counterparts to
BitDropdownChipsRemoveIconNameTest, BitDropdownClearButtonIconNameTest,
BitDropdownResponsiveCloseIconNameTest, BitDropdownSearchBoxIconNameTest, and
BitDropdownSearchBoxClearIconNameTest to pass a BitIconInfo with a unique CSS
class and assert that class appears and that it overrides the IconName case.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs`:
- Around line 127-139: Add a unit test in BitDropdownTests.cs to cover the new
ComboBoxAddButtonIconName parameter: create a test (e.g.,
ComboBoxAddButtonIconNameTest) that renders BitDropdown with
ComboBoxAddButtonIconName set and asserts the rendered markup contains the
expected Fluent icon class/name; also add a test to ensure ComboBoxAddButtonIcon
(BitIconInfo) takes precedence when both ComboBoxAddButtonIcon and
ComboBoxAddButtonIconName are provided, mirroring patterns used in
ChipsRemoveIconNameTest and ClearButtonIconNameTest and referencing the
BitDropdown component constructors/render methods.

In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs`:
- Around line 1209-1224: The sample file _BitDropdownCustomDemo.razor.samples.cs
adds examples using BitDropdown with ShowClearButton/ClearButtonIcon and
ShowSearchBox/SearchBoxIcon/SearchBoxClearIcon but the rendered demo in
_BitDropdownCustomDemo.razor (External Icons section) was not updated, causing
sample/render drift; update the External Icons section in
_BitDropdownCustomDemo.razor to include matching BitDropdown usages (use the
same props: ShowClearButton + ClearButtonIcon and ShowSearchBox + SearchBoxIcon
+ SearchBoxClearIcon, Items/GetBasicCustoms(), NameSelectors/nameSelectors,
Placeholder, DefaultValue where applicable) so the displayed demo matches the
samples.cs entries and keep labels consistent ("Clear button icon (external)",
"Search box icons (external)").

In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs`:
- Around line 865-887: The sample string was updated to include external
clear/search icon examples (BitDropdown with ShowClearButton, ClearButtonIcon,
DefaultValue and BitDropdown with ShowSearchBox, SearchBoxIcon,
SearchBoxClearIcon) but the rendered "External Icons" demo in
_BitDropdownOptionDemo.razor doesn't match; fix by synchronizing the rendered
demo with the sample: update the External Icons block in the
_BitDropdownOptionDemo.razor page to include the two BitDropdown instances using
the same props (ShowClearButton + ClearButtonIcon + DefaultValue and
ShowSearchBox + SearchBoxIcon + SearchBoxClearIcon) and the same item loop over
basicItems/BitDropdownOption so the live demo matches the sample snippet.

In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs`:
- Around line 16-19: The metadata entry for CalloutFooterTemplate incorrectly
sets DefaultValue = "false" while its Type is "RenderFragment?"; locate the
metadata object where Name = "CalloutFooterTemplate" (in the
BitDropdownDemo.razor.cs metadata list) and change the DefaultValue from "false"
to "null" so the default reflects a nullable RenderFragment; keep the Name,
Type, and Description unchanged.

---

Nitpick comments:
In
`@src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Dropdown/BitDropdownTests.cs`:
- Around line 1019-1186: Add tests that use the BitIconInfo-based parameters
(e.g., ChipsRemoveIcon, ClearButtonIcon, ResponsiveCloseIcon, SearchBoxIcon,
SearchBoxClearIcon) to assert the rendered icon uses BitIconInfo.Css() classes
and to verify precedence: when both the Icon (BitIconInfo) and IconName are
supplied the Icon must win; extend or add counterparts to
BitDropdownChipsRemoveIconNameTest, BitDropdownClearButtonIconNameTest,
BitDropdownResponsiveCloseIconNameTest, BitDropdownSearchBoxIconNameTest, and
BitDropdownSearchBoxClearIconNameTest to pass a BitIconInfo with a unique CSS
class and assert that class appears and that it overrides the IconName case.
🪄 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: d82349cd-7f3c-4285-a1a9-c29a93b863b9

📥 Commits

Reviewing files that changed from the base of the PR and between 067044a and 593896b.

📒 Files selected for processing (11)
  • src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
  • src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor
  • 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
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Dropdown/BitDropdownTests.cs

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 1 comment.

@msynk msynk merged commit a692bfd into bitfoundation:develop Mar 21, 2026
7 checks passed
@msynk msynk deleted the 12201-blazorui-dropdown-missing-new-icons branch March 21, 2026 09:34
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 new Icon implementation for the BitDropdown component

2 participants