Add new Icon parameters to BitSearchBox (#12092)

[msynk]

closes #12092

Summary by CodeRabbit

• New Features

  • Added support for external icon libraries (FontAwesome, Bootstrap Icons) in the SearchBox component
  • New parameters enable independent customization of the main icon, clear button icon, and search button icon
  • Users can now choose between external icons or built-in Fluent UI icons with automatic precedence handling

• Documentation

  • Expanded demo page with comprehensive examples showing FontAwesome and Bootstrap Icons integration scenarios

[coderabbitai]

Walkthrough

This pull request adds external icon library support to the BitSearchBox component by introducing Icon (BitIconInfo) and IconName parameters for the leading icon, clear button, and search button. The component template is updated to use GetCssClasses() for dynamic icon styling, and comprehensive demo examples with FontAwesome and Bootstrap Icons are included.

Changes

Cohort / File(s)	Summary
SearchBox Component Implementation src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor, src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs	Introduces dual icon parameters (BitIconInfo and string) for leading icon, clear button, and search button. Replaces hard-coded CSS class construction with BitIconInfo-derived objects and GetCssClasses() method calls for dynamic styling.
SearchBox Demo Content src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor, src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.cs, src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cs	Expands demo with new External Icons section showcasing FontAwesome and Bootstrap Icons for various icon scenarios. Updates component metadata and example code to reflect new icon parameters. Adjusts example numbering (example13 for external icons, RTL demo shifts to example15).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 A hop, a skip, icons take flight!
External libraries shine so bright,
BitSearchBox now wears FontAwesome threads,
Bootstrap icons crown its head,
Search, clear, and leading icons blend—
A picturesque journey without end! ✨

🚥 Pre-merge checks | ✅ 6

✅ Passed checks (6 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main objective of the pull request: adding new Icon parameters to the BitSearchBox component.
Linked Issues check	✅ Passed	The pull request adds Icon parameters and implementation enabling external icon support for BitSearchBox, directly fulfilling the requirements of issue #12092.
Out of Scope Changes check	✅ Passed	All changes are scoped to implementing the new Icon parameters for BitSearchBox and updating demo components; no unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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 docstrings

🧪 Generate unit tests (beta)

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

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor (1)

12-18: Default icon names are embedded in the template rather than the parameter declarations.

The defaults for IconName ("Search"), ClearButtonIconName ("Cancel"), and SearchButtonIconName ("ChromeBackMirrored") are applied via ?? in the .razor template instead of as parameter default values in the .razor.cs file. This means programmatic inspection of these parameters will show null rather than the effective default. Consider whether this is intentional — it's a minor discrepancy from the demo docs which list these as DefaultValue.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor (1)

328-344: External stylesheet <link> tags are placed inside the component body.

These <link> elements for Font Awesome and Bootstrap Icons are rendered inside a <div>, which works but is non-standard HTML placement. For a demo page this is likely acceptable, but consider adding a brief comment noting this is for demo purposes only — in production, users should load these in <head> or via HeadContent.

---

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.}

[sonarqubecloud]

Quality Gate failed

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

See analysis details on SonarQube Cloud