Add missing new Icon parameters to BitDropdown (#12201)#12202
Add missing new Icon parameters to BitDropdown (#12201)#12202msynk merged 2 commits intobitfoundation:developfrom
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
WalkthroughThis 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
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 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 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. |
There was a problem hiding this comment.
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? ...IconNameparameters for chips remove, clear button, search box (icon + clear), responsive close, and responsive ComboBox add button. - Updated
BitDropdown.razorrendering to useBitIconInfo.From(...).GetCssClasses()for these icons. - Expanded demo examples/documentation and added MSTest coverage for the new
*IconNameparameters.
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. |
...ient/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs
Outdated
Show resolved
Hide resolved
src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Dropdown/BitDropdownTests.cs
Show resolved
Hide resolved
There was a problem hiding this comment.
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
*IconNameparameters well, but the corresponding*Iconparameters (e.g.,ChipsRemoveIcon,ClearButtonIcon) which acceptBitIconInfoare not tested. These would use different CSS class patterns (e.g., viaBitIconInfo.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
📒 Files selected for processing (11)
src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razorsrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razorsrc/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.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Dropdown/BitDropdownTests.cs
closes #12201
Summary by CodeRabbit
New Features
Tests