Add new Icon parameter to BitActionButton (#11958)

[msynk]

closes #11958

Summary by CodeRabbit

• New Features

  • Added support for external icon libraries in ActionButton component via new Icon parameter.
  • Icon parameter takes precedence over the built-in IconName when both are specified.

• Tests

  • Added comprehensive test coverage for Icon parameter handling and library-specific icon helpers.

• Documentation

  • Updated demo with examples showcasing FontAwesome and Bootstrap Icons integration with ActionButton.

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

[coderabbitai]

Walkthrough

This PR introduces a new Icon parameter of type BitIconInfo? to the BitActionButton component, enabling support for external icon libraries via custom CSS classes. The icon takes precedence over IconName when both are set, with corresponding updates to rendering logic, documentation, demo content, and comprehensive unit tests.

Changes

Cohort / File(s)	Summary
Component Implementation src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.razor	Introduces local icon variable via BitIconInfo.From(). Replaces IconName-based checks with icon-based conditionals. Updates icon element CSS class composition from hard-coded bit-icon--@IconName to dynamic icon.GetCssClasses().
Component Implementation src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.razor.cs	Adds new public parameter Icon (type BitIconInfo?) with XML documentation detailing precedence over IconName. Updates IconName documentation to indicate external libraries should use Icon.
Component Parameters src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButtonParams.cs	Adds public property Icon (BitIconInfo?). Extends UpdateParameters() to propagate Icon to target component. Updates documentation for both Icon and IconName.
Demo Content src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor	Replaces "Size" example (example12) with "External Icons" showcase featuring FontAwesome and Bootstrap Icons. Renumbers subsequent examples (example13→example14, example14→example15).
Demo Code-Behind src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.cs	Adds Icon parameter entry (BitIconInfo?) to demo component. Introduces BitIconInfo documentation entity under componentSubClasses with Name, BaseClass, and Prefix parameters. Updates IconName description.
Demo Sample Code src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cs	Adds new example12RazorCode block demonstrating external icon library usage (FontAwesome, Bootstrap Icons). Renames example13RazorCode to example14RazorCode and example14RazorCode to example15RazorCode.
Unit Tests src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/ActionButton/BitActionButtonTests.cs	Adds five new test methods: BitActionButtonIconParameterWithCssClassesTest, BitActionButtonIconInfoCssHelperTest, BitActionButtonIconInfoFaHelperTest, BitActionButtonIconInfoBiHelperTest, and BitActionButtonIconTakesPrecedenceOverIconNameTest. Tests cover CSS class handling, helper methods, and precedence logic.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 Hops of joy for icons new,
External libraries shining through,
No more FontAwesome left behind,
Flexible icons, carefully designed!
CSS classes render so fine,
With precedence rules that align. ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 12.50% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Add new Icon parameter to BitActionButton (#11958)' accurately and concisely summarizes the main change in the changeset.
Linked Issues check	✅ Passed	The pull request successfully implements the new Icon infrastructure for BitActionButton as requested in issue #11958, adding the Icon parameter to all relevant components.
Out of Scope Changes check	✅ Passed	All changes directly support the Icon infrastructure implementation objective; no out-of-scope modifications detected outside the stated requirements.

✨ 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/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.razor.cs (1)

93-105: Clarify FontAwesome usage pattern in documentation examples.

The XML documentation example shows:

Icon="BitIconInfo.Fa("solid house")"

However, the demo file shows both shorthand and full class patterns:

• Shorthand: BitIconInfo.Fa("solid rocket")
• Full: BitIconInfo.Fa("fa-brands fa-github")

For consistency and clarity, consider either:

1. Documenting both supported formats with examples, or
2. Standardizing on one format throughout documentation and demos

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor (1)

455-514: Consider moving external CSS links to app-level resources.

The inline <link> tags on Lines 461 and 489 load external CSS each time this demo component renders. For a demo page this is acceptable, but consider moving these to a shared location (e.g., index.html, App.razor, or _Host.cshtml) to avoid potential duplication and improve loading performance.

The Icon parameter examples effectively demonstrate the new feature with FontAwesome and Bootstrap Icons using various BitIconInfo helper methods.

📜 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 e0b7d46 and 5ca72bc.

📒 Files selected for processing (7)

• src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.razor
• src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.razor.cs
• src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButtonParams.cs
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.cs
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cs
• src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/ActionButton/BitActionButtonTests.cs

🧰 Additional context used

🧬 Code graph analysis (2)

src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButtonParams.cs (1)

src/BlazorUI/Bit.BlazorUI/Components/BitComponentBase.cs (1)

• HasNotBeenSet (349-352)

src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/ActionButton/BitActionButtonTests.cs (1)

src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.razor.cs (1)

• BitActionButton (9-300)

⏰ 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 (15)

src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.razor.cs (1)

108-121: LGTM! IconName documentation updated appropriately.

The updated documentation clearly directs users to the new Icon parameter for external libraries while maintaining backward compatibility guidance for built-in Fluent UI icons.

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

280-379: LGTM! Sample code accurately reflects demo changes.

The new example12RazorCode demonstrates external icon usage with both FontAwesome and Bootstrap Icons, and the subsequent examples are correctly renumbered to maintain consistency with the demo page structure.

src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButtonParams.cs (2)

66-73: LGTM! Icon property properly defined.

The Icon property is correctly typed as BitIconInfo? with comprehensive documentation that matches the main component's parameter definition.

---

228-231: LGTM! Icon parameter propagation follows established pattern.

The UpdateParameters logic correctly propagates the Icon property when set, following the same pattern used for other parameters with appropriate null and HasNotBeenSet checks.

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

91-98: LGTM! Clear and comprehensive documentation.

The Icon parameter documentation is well-structured and clearly explains the precedence behavior over IconName. The link to the BitIconInfo subclass documentation provides good navigation.

---

104-104: LGTM! Clarifies the distinction between IconName and Icon.

The updated description clearly indicates that IconName is for built-in Fluent UI icons, helping users understand when to use each parameter.

---

233-261: LGTM! Comprehensive BitIconInfo documentation.

The BitIconInfo subclass documentation is thorough and includes helpful examples for both built-in and external icon libraries. The descriptions clearly explain the purpose of each property.

src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/ActionButton/BitActionButtonTests.cs (5)

53-71: LGTM! Well-structured test for CSS class rendering.

The test correctly verifies that CSS classes from the Icon parameter are rendered on the icon element. Using DataRow to test multiple icon library formats (FontAwesome, Bootstrap Icons) provides good coverage.

---

73-85: LGTM! Validates the Css helper method.

The test correctly verifies that BitIconInfo.Css() renders the provided CSS classes on the icon element.

---

87-99: LGTM! Validates the FontAwesome helper method.

The test correctly verifies that BitIconInfo.Fa() transforms the input into proper FontAwesome CSS class format (fa-solid fa-rocket).

---

101-113: LGTM! Validates the Bootstrap Icons helper method.

The test correctly verifies that BitIconInfo.Bi() generates proper Bootstrap Icons CSS classes (bi and bi-github).

---

115-133: LGTM! Critical test for precedence behavior.

This test correctly verifies that the Icon parameter takes precedence over IconName when both are set, which is a key requirement of the new feature. The negative assertions ensure IconName classes are not rendered.

src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.razor (3)

68-71: LGTM! Anchor path mirrors button path icon rendering.

The icon rendering logic in the anchor (<a>) element correctly mirrors the changes in the button path (lines 41-44), ensuring consistent behavior whether the component renders as a button or link.

---

7-7: BitIconInfo.From implementation and precedence behavior verified.

The BitIconInfo.From(Icon, IconName) method correctly implements the expected behavior: it returns null when neither parameter is provided, gives precedence to Icon over IconName, and falls back to creating a standard Bit icon when only iconName is supplied.

---

41-44: Icon rendering logic correctly updated for new Icon parameter.

The changes properly handle both the new Icon parameter and the existing IconName by checking icon is not null (where icon is derived from both parameters). The dynamic CSS class generation via icon.GetCssClasses() enables support for external icon libraries like FontAwesome and Bootstrap Icons.