Add Icon parameter to BitButton (#11962)

[msynk]

closes #11962

Summary by CodeRabbit

Release Notes

• New Features

  • BitButton component now supports external icon libraries such as FontAwesome and Bootstrap Icons through a new Icon parameter, enabling greater design flexibility and customization options.

• Documentation

  • Enhanced demo documentation with new examples showcasing external icon library integration and RTL button styling configurations.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

This pull request introduces external icon library support to the BitButton component by adding a new Icon parameter of type BitIconInfo?. The component template is refactored to use a unified icon descriptor object and dynamically resolve CSS classes. Demo examples showcase integration with external icon libraries like FontAwesome and Bootstrap Icons.

Changes

Cohort / File(s)	Summary
Component Implementation src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.razor, src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.razor.cs	Adds new Icon parameter of type BitIconInfo? for external icon libraries. Template refactored to instantiate BitIconInfo from Icon or IconName, uses icon.GetCssClasses() for CSS generation, and prioritizes Icon over IconName when both are provided.
Demo Page & Samples src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor, src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.cs, src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cs	Demo shifted to showcase external icons with FontAwesome and Bootstrap Icons CSS integration. Example numbering reorganized (example17 → external icons, example18 → style & class, example19 → RTL). New Icon parameter documentation added to component API docs. Duplicate BitIconInfo documentation entry present in razor.cs file.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 Hop hop, external icons bloom!
BitButton now adorns its room,
With FontAwesome and Bootstrap cheer,
Icons from beyond now appear!
CSS classes dance so bright,
Making buttons styled just right! ✨

🚥 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 pull request title clearly summarizes the main change: adding an Icon parameter to the BitButton component, which aligns directly with the primary objective.
Linked Issues check	✅ Passed	The pull request implements the Icon parameter for BitButton as required by issue #11962, with component updates, rendering logic changes, and comprehensive demo examples.
Out of Scope Changes check	✅ Passed	All code changes are directly related to implementing the Icon parameter feature for BitButton and its documentation. No unrelated or out-of-scope changes detected.
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 docstrings

🧪 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: 0

🧹 Nitpick comments (2)

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor (1)

570-635: Consider CDN link placement in the demo.

The demo embeds <link> tags for FontAwesome and Bootstrap Icons (lines 576, 607) directly in the component content. While this works, consider whether:

1. These should be in the app's <head> for production use
2. A comment should be added explaining this is demo-specific setup
3. The demo should include a note about proper CDN link placement in production

The demo effectively showcases multiple Icon parameter usage patterns (direct string, BitIconInfo.Css(), BitIconInfo.Fa(), BitIconInfo.Bi()).

🔎 Suggested improvement

Add a note in the demo description:

-    <DemoExample Title="External Icons" RazorCode="@example17RazorCode" Id="example17">
-        <div>Use icons from external libraries like FontAwesome, Material Icons, and Bootstrap Icons with the <b>Icon</b> parameter.</div>
+    <DemoExample Title="External Icons" RazorCode="@example17RazorCode" Id="example17">
+        <div>Use icons from external libraries like FontAwesome, Material Icons, and Bootstrap Icons with the <b>Icon</b> parameter.</div>
+        <div><i>Note: In production, add icon library CDN links to your app's &lt;head&gt; section instead of inline.</i></div>

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cs (1)

520-556: Consider updating to the latest CDN versions.

Font Awesome 7.0.1 and Bootstrap Icons 1.11.3 are both valid, stable releases. However, Font Awesome 7.1.0 and Bootstrap Icons 1.13.1 are now available; updating would provide access to security patches and new features.

📜 Review details

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 29b4148 and a124ae2.

📒 Files selected for processing (5)

• src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.razor
• src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.razor.cs
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.cs
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cs

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build Bit.BlazorUI

🔇 Additional comments (10)

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cs (2)

558-648: LGTM - Example renumbering.

The Style & Class example has been correctly renumbered from example17 to example18 to accommodate the new External Icons example. The content remains unchanged.

---

650-673: LGTM - Example renumbering.

The RTL example has been correctly renumbered from example18 to example19 to accommodate the new examples. The content remains unchanged.

src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.razor.cs (1)

119-132: LGTM - Well-documented Icon parameter.

The Icon parameter is properly declared with clear, comprehensive documentation. The XML comments effectively explain:

• The purpose and precedence over IconName
• Recommended usage for external vs. built-in icons
• Concrete examples for FontAwesome, Material Icons, and custom CSS

The implementation aligns with the PR objectives to support external icon libraries.

src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.razor (2)

26-33: LGTM - Consistent icon rendering across button and anchor paths.

The icon rendering logic is correctly implemented:

• Uses the unified icon descriptor from BitIconInfo.From()
• Applies proper null checks with icon is not null
• Calls icon.GetCssClasses() to generate CSS classes for external icons
• Preserves the IconUrl fallback when no icon descriptor exists
• Both button and anchor rendering paths have identical logic

The implementation is clean and maintainable.

Also applies to: 98-105

---

7-7: BitIconInfo.From() implementation verified as correct.

The static factory method exists and properly implements the documented behavior: Icon parameter takes precedence over IconName, and returns null when both parameters are null or empty. Implementation is well-tested and working as intended.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor (2)

637-676: LGTM - Consistent example renumbering.

The Style & Class example has been correctly renumbered to example18 (RazorCode, CsharpCode, and Id) to accommodate the new External Icons example.

---

678-710: LGTM - Consistent example renumbering.

The RTL example has been correctly renumbered to example19 (RazorCode and Id) to accommodate the new examples.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.cs (3)

128-135: LGTM - Well-documented Icon parameter.

The Icon parameter documentation entry is properly structured with:

• Correct type (BitIconInfo?)
• Clear description mentioning external icon libraries and precedence
• Link to the BitIconInfo documentation section

---

141-141: LGTM - Clarified IconName description.

The IconName description has been updated to specify "from the built-in Fluent UI icons," which appropriately distinguishes it from the new Icon parameter for external libraries.

---

347-375: Well-structured BitIconInfo documentation.

The BitIconInfo documentation entry provides clear descriptions of the three properties (Name, BaseClass, Prefix) with helpful examples for both built-in Fluent UI icons and external libraries like FontAwesome.