Add new Icon parameter to BitPivot (#12132)

[msynk]

closes #12132

Summary by CodeRabbit

Release Notes

• New Features

  • Pivot component now supports external icon libraries through a new Icon parameter
  • External icons take precedence over built-in Fluent UI icons

• Documentation

  • Added comprehensive examples demonstrating FontAwesome and Bootstrap Icons integration with Pivot component

[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

External icon support has been added to the BitPivot component by introducing a new BitIconInfo parameter to BitPivotItem, enabling integration with external icon libraries (FontAwesome, Bootstrap Icons). The implementation includes rendering logic updates, API documentation, and comprehensive demo examples.

Changes

Cohort / File(s)	Summary
Core Icon Implementation src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivotItem.razor, src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivotItem.razor.cs	Adds public Icon parameter of type BitIconInfo? to BitPivotItem and updates rendering logic to derive icon data via BitIconInfo.From(), replacing direct IconName reliance with null-safe icon display using GetCssClasses().
Documentation & Demo src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor, src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cs	Replaces "Style & Class" example with "External Icons" example showcasing FontAwesome and Bootstrap Icons integration, introduces BitIconInfo type with Name, BaseClass, and Prefix properties, and updates demo code examples with external icon demonstrations and CSS references.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 Icons now flutter from libraries grand,
FontAwesome, Bootstrap across the land,
Pivot items paint with vibrant hues,
External icons—the component breaks through! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely summarizes the main change: adding a new Icon parameter to the BitPivot component, directly matching the changeset's primary objective.
Linked Issues check	✅ Passed	The pull request successfully implements the Icon parameter for BitPivot to enable external icon support, meeting all coding requirements from issue #12132.
Out of Scope Changes check	✅ Passed	All changes are directly related to adding Icon support to BitPivot; minor updates to demo content and documentation are complementary to the main objective.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ 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: 2

🤖 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/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor`:
- Line 538: The demo text in BitPivotDemo.razor claims “Material Icons” for the
Icon parameter but the examples only show FontAwesome and Bootstrap Icons;
either add a Material Icons example component usage (e.g. a pivot/tab using the
Icon parameter with a Material Icon name/class) or change the copy to remove
“Material Icons” so it matches the shown examples; update the sentence near the
Icon parameter description in BitPivotDemo.razor to reflect whichever choice you
make (add a Material icon usage snippet referencing the Icon parameter or remove
the “Material Icons” phrase).
- Around line 544-576: The two <link rel="stylesheet"> tags currently embedded
in the BitPivotDemo.razor component body (the FontAwesome and Bootstrap Icons
links) should be moved into a <HeadContent> section inside the same component
(or coordinated with the PageOutlet wrapper) so the styles are injected once per
page instead of on each component render; remove the inline link elements from
the BitPivotDemo markup and place those exact link elements inside <HeadContent>
at the top-level of the component, leaving the demo text/code samples
(BitPivotDemo.razor.cs strings) unchanged unless you also want to show the
improved example.

---

ℹ️ Review info

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting

📥 Commits

Reviewing files that changed from the base of the PR and between 09e8fda and d137fc8.

📒 Files selected for processing (4)

• src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivotItem.razor
• src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivotItem.razor.cs
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cs