Add new Icon parameters to BitDialog (#12242)

[msynk]

closes #12242

Summary by CodeRabbit

• New Features

  • Dialog close button icons are now customizable through CloseIcon and CloseIconName parameters, with support for FontAwesome, Bootstrap Icons, and other custom icon libraries.

• Tests

  • Added comprehensive unit tests for dialog close button icon rendering.

[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: 45167eef-b3c9-4985-bb68-7083b68754c6

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 BitDialog component now supports customizable close button icons through two new parameters: CloseIcon (BitIconInfo) and CloseIconName (string), enabling integration with external icon libraries. The component logic, demo, and test coverage have been updated accordingly.

Changes

Cohort / File(s)	Summary
Component Implementation src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Dialog/BitDialog.razor, BitDialog.razor.cs	Added CloseIcon and CloseIconName parameters to customize close button icon. Updated markup to compute icon via BitIconInfo.From(), dynamically apply CSS classes, and adjust accessibility attributes (aria-hidden).
Demo Updates src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Dialog/BitDialogDemo.razor, BitDialogDemo.razor.cs	Introduced new "External Icons" demo (example9) showcasing close-button customization with FontAwesome and Bootstrap Icons using BitIconInfo.Fa(), BitIconInfo.Bi(), and BitIconInfo.Css(). Shifted RTL demo to example10. Added parameter documentation and code snippets.
Test Suite src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Surfaces/Dialog/BitDialogTests.cs	Added seven comprehensive unit tests verifying default icon rendering, CloseIconName parameter behavior, external CSS class application, and BitIconInfo helper constructors (.Css(), .Fa(), .Bi()). Confirms CloseIcon takes precedence over CloseIconName.

Poem

🐰 A dialog close button, once plain and so clear,
Now dresses in icons from far and from near!
FontAwesome, Bootstrap, or CSS so fine,
The close button glimmers—external designs!
With tests keeping guard o'er each icon that shines. ✨

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 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 PR title clearly and concisely summarizes the main change: adding new Icon parameters to the BitDialog component.
Linked Issues check	✅ Passed	The PR implements new Icon parameters (CloseIcon and CloseIconName) enabling external icon support for BitDialog's close button, fulfilling the requirement to add icon implementation for missing parts.
Out of Scope Changes check	✅ Passed	All changes are scoped to implementing the icon parameters requested in issue #12242; no unrelated modifications 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 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

Adds support for customizing the BitDialog close-button icon via the new CloseIcon (BitIconInfo?) and CloseIconName (string?) parameters, updating the demo and tests accordingly.

Changes:

• Add CloseIcon/CloseIconName parameters to BitDialog and render the resolved icon via BitIconInfo.From(...).
• Add bUnit tests covering default icon, icon name, external icon CSS helpers, and precedence.
• Extend the dialog demo with an “External Icons” example and BitIconInfo parameter docs.

Reviewed changes

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

Show a summary per file

File	Description
src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Dialog/BitDialog.razor.cs	Adds new public parameters for close icon customization.
src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Dialog/BitDialog.razor	Renders the close icon using BitIconInfo and updates button/icon markup.
src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Surfaces/Dialog/BitDialogTests.cs	Adds unit tests for default/custom/external close icon behavior and precedence.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Dialog/BitDialogDemo.razor.cs	Adds demo parameter docs and code snippets for external icon usage.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Dialog/BitDialogDemo.razor	Adds “External Icons” demo section showcasing new parameters.

[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/Bit.BlazorUI/Components/Surfaces/Dialog/BitDialog.razor`:
- Around line 36-41: The close button in BitDialog.razor is currently marked
aria-hidden="true", which hides an interactive control from assistive tech;
remove the aria-hidden attribute from the <button> that uses HandleOnCloseClick
and class "bit-dlg-cls" while keeping the aria-label="Close" and other
attributes intact so the control remains accessible to screen readers.

In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Dialog/BitDialogDemo.razor`:
- Line 215: The DemoExample instance for "External Icons" is missing its
CsharpCode binding so the state snippet (example9CsharpCode) isn't displayed;
update the DemoExample markup (the element with Title="External Icons" and
Id="example9") to include CsharpCode="@example9CsharpCode" alongside
RazorCode="@example9RazorCode" so the C# snippet defined in the code-behind is
shown.

🪄 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: b01989c5-b3b1-4856-81a8-62b61796f3a1

📥 Commits

Reviewing files that changed from the base of the PR and between 6843e7f and 7c83642.

📒 Files selected for processing (5)

• src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Dialog/BitDialog.razor
• src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Dialog/BitDialog.razor.cs
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Dialog/BitDialogDemo.razor
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Dialog/BitDialogDemo.razor.cs
• src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Surfaces/Dialog/BitDialogTests.cs

[Copilot]

Pull request overview

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