Add new Icon parameter to BitProPanel (#12246)

[msynk]

closes #12246

Summary by CodeRabbit

• New Features
  • Customizable close button icons: The ProPanel component now supports configurable close button icons through new CloseIcon and CloseIconName parameters
  • External icon library support: Seamlessly integrate with external icon libraries like FontAwesome for enhanced visual customization
  • Flexible configuration: When both parameters are provided, explicit icon configuration takes precedence for maximum control
  • Enhanced documentation: Updated demo examples showcase practical implementation patterns with external icon library integration

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

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 958f008f-4909-4d0b-bb77-5e4513b3ae33

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

The changes implement a new icon customization feature for the BitProPanel component's close button, introducing two new parameters (CloseIcon and CloseIconName) that allow developers to configure custom icons. The component's close button rendering was updated to dynamically derive icon descriptors instead of using hardcoded CSS classes. Demo examples demonstrate FontAwesome icon integration.

Changes

Cohort / File(s)	Summary
ProPanel Component Implementation src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor, src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs	Added CloseIcon (BitIconInfo?) and CloseIconName (string?) parameters to customize the close button icon. Updated icon rendering to use BitIconInfo.From() and dynamically apply CSS classes from the icon descriptor, replacing hardcoded bit-icon bit-icon--Cancel classes.
Demo and Documentation src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor, src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs	Added new "External Icon" demo featuring FontAwesome CDN integration and BitProPanel configured with custom close icon. Added parameter documentation for CloseIcon and CloseIconName. Renumbered previous RTL demo from example 7 to example 8 to accommodate the new demo.

Poem

🐰 A button so fair, with icons galore,
Now customizable—what could we adore?
FontAwesome marks, or custom designs,
The close button glows with new icon signs!
Configuration blooms, the panel now shines ✨

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 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 accurately summarizes the main change: adding a new Icon parameter to BitProPanel component.
Linked Issues check	✅ Passed	The PR fulfills the requirement from issue #12246 by implementing CloseIcon parameter support for customizing the close button icon.
Out of Scope Changes check	✅ Passed	All changes are in scope: the new CloseIcon and CloseIconName parameters, updated close button rendering, and corresponding demo examples align with the stated 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

---

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

[Copilot]

Pull request overview

This PR adds close-button icon customization to the BitProPanel component (extras), aligning it with the existing BitIconInfo-based icon extensibility pattern used across Bit.BlazorUI, and updates the demo page to document and showcase the new capability.

Changes:

• Added CloseIcon (BitIconInfo?) and CloseIconName (string?) parameters to BitProPanel, with CloseIcon taking precedence and a "Cancel" fallback.
• Updated BitProPanel rendering to use BitIconInfo.From(...) for the close icon.
• Extended the ProPanel demo documentation and added an “External Icon” example.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.

File	Description
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs	Documents new parameters and adds a demo code snippet for using an external close icon.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor	Adds a new “External Icon” demo example rendering a ProPanel with a FontAwesome close icon.
src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs	Introduces the new CloseIcon/CloseIconName public parameters and XML docs.
src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor	Switches close icon markup to use resolved BitIconInfo CSS classes.

[coderabbitai]

Actionable comments posted: 1

🤖 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/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor`:
- Around line 45-49: In BitProPanel.razor the CloseIcon fallback only handles
null which allows empty/whitespace CloseIconName to produce a null icon; update
the BitIconInfo.From call to use a whitespace-safe fallback by passing
CloseIconName when not string.IsNullOrWhiteSpace(CloseIconName) and "Cancel"
otherwise (i.e., replace the CloseIconName ?? "Cancel" usage), so
BitIconInfo.From always receives a valid name and the close button icon won't be
blank.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: f060dd73-2205-47ef-8dea-f5f5a64c3042

📥 Commits

Reviewing files that changed from the base of the PR and between 4952363 and 905b1b3.

📒 Files selected for processing (4)

• src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor
• src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.