Add new Icon parameter to BitDropdown (#12086)

[msynk]

closes #12086

Summary by CodeRabbit

• New Features
  • Added customizable icons for dropdown items and the dropdown caret chevron using BitIconInfo
  • Support for external icon libraries including FontAwesome and Bootstrap Icons alongside Fluent UI icons
  • Per-item icon configuration allowing Icon to override IconName for flexible icon selection
  • Item icons render inline with item text in dropdown item lists
  • New demo examples demonstrating external icon library integration and usage patterns

[coderabbitai]

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.

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 PR adds external icon support to the BitDropdown component, enabling custom icons via a new CaretDownIcon parameter and item-level Icon/IconName properties. It extends the component hierarchy with icon definitions in items, options, name selectors, and styling classes, while also removing BOM characters and updating demo pages with FontAwesome and Bootstrap Icons examples.

Changes

Cohort / File(s)	Summary
Core Dropdown Component BitDropdown.razor, BitDropdown.razor.cs	Added CaretDownIcon parameter and internal GetIcon(TItem) method to resolve item icons from explicit properties or NameSelectors. Replaced inline icon CSS with computed BitIconInfo-based approach. Removed BOM characters.
Item & Option Models BitDropdownItem.cs, BitDropdownOption.cs	Added Icon (BitIconInfo?) and IconName (string?) properties to enable external and Fluent UI icon specification per item, with precedence documentation.
Name Selectors & Styling BitDropdownNameSelectors.cs, BitDropdownClassStyles.cs	Extended with Icon and IconName selector pairs for item resolution, and added ItemIcon property for custom CSS styling of item icons.
Item Rendering _BitDropdownItem.razor	Integrated icon rendering before item text by calling Dropdown.GetIcon(Item) and conditionally rendering icon elements with proper styling in MultiSelect and single-select paths.
Styling BitDropdown.scss	Added gap: spacing(1) and explicit text color: $clr-fg-pri to .bit-drp-itm rule; removed BOM character. Consolidated duplicate color declarations.
Demo Data Model Product.cs	Extended with Icon (BitIconInfo?) and IconName (string?) properties for use with BitDropdown NameSelectors in demo scenarios.
Demo Pages BitDropdownDemo.razor, BitDropdownDemo.razor.cs, _BitDropdownCustomDemo.razor*, _BitDropdownItemDemo.razor*, _BitDropdownOptionDemo.razor*	Extensively updated to showcase external icon support. Added new demo sections for FontAwesome and Bootstrap Icons integration, including helper methods (GetExternalIconCustoms, GetExternalIconFaCustoms, GetExternalIconBiCustoms). Reorganized and renumbered example blocks. Updated sample code blocks with icon-related configurations and CSS library links. Deactivated IntroductionVideoUrl in BitDropdownDemo.razor.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Poem

🐰 With icons from without, the dropdown hops,
No BOM chars disturb where bold code stops.
From Font Awesome dreams to Bootstrap delight,
Each caret and item now glows just right!
Name selectors sing of Icon's new way,
A more vibrant dropdown awaits the day! ✨

🚥 Pre-merge checks | ✅ 5 | ❌ 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 (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'Add new Icon parameter to BitDropdown (#12086)' clearly and concisely describes the main change: adding an Icon parameter to the BitDropdown component.
Linked Issues check	✅ Passed	The PR implements the Icon feature across BitDropdown and related components, enabling external icon support as required by issue #12086.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing Icon support for BitDropdown. Some BOM character removals and demo updates are incidental cleanup/documentation.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into develop

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

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 4

🤖 Fix all issues with AI agents

In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.cs`:
- Around line 97-109: GetExternalIconBiItems contains invalid Bootstrap Icon
names for the items with Value "f-gra" and "v-car" (currently
BitIconInfo.Bi("grape") and BitIconInfo.Bi("carrot")). Replace those two Bi(...)
calls with valid Bootstrap icon names from the Bootstrap Icons catalog (e.g.,
pick appropriate alternatives) by updating the Icon property for the
BitDropdownItem entries inside GetExternalIconBiItems so they use valid
BitIconInfo.Bi("valid-name") values.

In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs`:
- Around line 795-878: The demo uses the Pro-only Font Awesome "fa-grapes" which
won't render with the free CDN and references an older Bootstrap Icons CDN;
update occurrences of the Pro icon in GetExternalIconFaItems and the razor
sample (example15CsharpCode / example15RazorCode) to a free Font Awesome icon
(e.g., replace "fa-solid fa-grapes" with a free alternative like "fa-solid
fa-seedling" or another free icon) and update the bootstrap-icons CDN version in
example15RazorCode from "@1.11.3" to the current stable release (e.g.,
"@1.13.1"); apply the same replacement in the runtime file
_BitDropdownItemDemo.razor.cs where GetExternalIconFaItems is defined.

In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor`:
- Line 717: The BitDropdownOption line uses an invalid FontAwesome icon via
BitIconInfo.Fa("solid orange"); update the BitDropdownOption that contains
BitIconInfo.Fa("solid orange") to use a valid icon (for example replace with
BitIconInfo.Css("fa-solid fa-circle") or BitIconInfo.Fa("solid sun")) so the
rendered class is a real FontAwesome icon; locate the BitDropdownOption instance
in _BitDropdownOptionDemo.razor and swap the BitIconInfo.Fa(...) call
accordingly.
- Line 733: The BitDropdownOption instance using Icon="@BitIconInfo.Bi("grape")"
is referencing a non-existent Bootstrap Icons name; update the Icon argument on
the BitDropdownOption (in _BitDropdownOptionDemo.razor) to use a valid Bootstrap
Icons name (for example "circle-fill" or another name from the official
Bootstrap Icons set) by replacing "grape" with the chosen valid icon string so
Icon="@BitIconInfo.Bi(\"circle-fill\")" (or your selected valid name).

🧹 Nitpick comments (4)

src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss (1)

1-2: Pre-existing Stylelint violation: .scss extension in @import.

Stylelint (scss/load-partial-extension) flags the .scss extension on both import lines. Since this is a pre-existing pattern (line 2 is unchanged and uses the same convention), it's not introduced by this PR — but worth noting for a future cleanup pass. Modern Sass recommends @use / @forward over @import, and omitting the extension for partials.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor (1)

18-19: Consider removing commented-out code or adding context.

The IntroductionVideoUrl is commented out without explanation. If this is intentional and temporary, a brief note on why would help future maintainers.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor (1)

683-684: External stylesheets loaded inline within the component body.

These <link> tags are rendered inside the component body rather than in <head>. Every time this demo component renders, these elements get injected into the DOM body. Consider moving them to index.html / _Host.cshtml / App.razor <head> section, or use Blazor's <HeadContent> to place them properly.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs (1)

447-461: Inconsistent ordering of Icon/IconName between BitDropdownItem and BitDropdownOption parameter lists.

In BitDropdownItem (line 447), Icon and IconName are placed right after Id, before Data. In BitDropdownOption (line 585), they're placed after IsSelected, before ItemType. Consider aligning the field order for consistency across the two types, as developers will reference both.

Also applies to: 585-599

[sonarqubecloud]

Quality Gate failed

Failed conditions
35.5% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud