Add new Icon parameter to BitSnackBar (#12172)

[msynk]

closes #12172

Summary by CodeRabbit

• New Features

  • Added DismissIcon parameter to customize the dismiss button icon using FontAwesome, Bootstrap Icons, or CSS classes.

• Documentation

  • Added examples demonstrating external icon usage in SnackBar components.

• Tests

  • Added test coverage for various dismiss icon configurations and precedence rules.

[coderabbitai]

Walkthrough

The changes introduce support for customizable dismiss icons in BitSnackBar by adding a new DismissIcon parameter, enabling integration with external icon libraries like FontAwesome and Bootstrap Icons. Updates include component refactoring, comprehensive demo pages, usage samples, and test coverage validating various icon specification methods.

Changes

Cohort / File(s)	Summary
Component Implementation src/BlazorUI/Bit.BlazorUI/Components/Notifications/SnackBar/BitSnackBar.razor, BitSnackBar.razor.cs	Refactored icon rendering to support dynamic BitIconInfo-based approach; added new public parameter DismissIcon of type BitIconInfo? for customizable dismiss icons; removed stray BOM character.
Demo & Documentation src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/SnackBar/BitSnackBarDemo.razor, BitSnackBarDemo.razor.cs, BitSnackBarDemo.razor.samples.cs	Replaced "Style & Class" demo with comprehensive "External Icons" section; added examples for FontAwesome, CSS classes, and Bootstrap Icons integration; introduced new methods and references for icon variant demos; added corresponding C# handlers and Razor snippets.
Test Coverage src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Notifications/SnackBar/BitSnackBarTests.cs	Added five new test methods validating DismissIcon parameter with CSS classes, BitIconInfo helpers (Css, Fa, Bi), and precedence over DismissIconName.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 With icons dancing in the night,
FontAwesome, Bootstrap—what a sight!
The SnackBar grins, dismiss button bright,
External libraries shining light,
Custom icons made just right! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ 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 BitSnackBar (#12172)' clearly and accurately summarizes the main change - adding a new icon parameter to the BitSnackBar component.
Linked Issues check	✅ Passed	The PR successfully implements the new Icon mechanism for BitSnackBar by adding a DismissIcon parameter and support for external icons, meeting all coding requirements from issue #12172.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing the new DismissIcon parameter and external icon support; no unrelated modifications detected.

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

📝 Coding Plan

• Generate coding plan for human review comments

---

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 BitSnackBar’s dismiss icon via BitIconInfo, enabling external icon libraries (e.g., FontAwesome / Bootstrap Icons) while keeping DismissIconName for built-in Fluent UI icons.

Changes:

• Introduces DismissIcon: BitIconInfo? to BitSnackBar and renders the effective icon via BitIconInfo.From(...) (icon takes precedence over icon name).
• Adds bUnit coverage for CSS-class icons and helper constructors (Css, Fa, Bi), plus precedence behavior.
• Updates the SnackBar demo/docs to include “External Icons” examples and documents BitIconInfo.

Reviewed changes

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

Show a summary per file

File	Description
src/BlazorUI/Bit.BlazorUI/Components/Notifications/SnackBar/BitSnackBar.razor.cs	Adds new DismissIcon parameter to the component API.
src/BlazorUI/Bit.BlazorUI/Components/Notifications/SnackBar/BitSnackBar.razor	Uses BitIconInfo.From(DismissIcon, DismissIconName ?? "Cancel") to render the dismiss icon consistently.
src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Notifications/SnackBar/BitSnackBarTests.cs	Adds tests for external icon CSS classes, helper methods, and precedence over DismissIconName.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/SnackBar/BitSnackBarDemo.razor.samples.cs	Adds/renumbers demo code samples for external dismiss icons.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/SnackBar/BitSnackBarDemo.razor.cs	Documents DismissIcon parameter and adds BitIconInfo sub-class docs + demo backing fields/methods.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/SnackBar/BitSnackBarDemo.razor	Adds an “External Icons” demo section showcasing DismissIcon usage.

[coderabbitai]

🧹 Nitpick comments (1)

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/SnackBar/BitSnackBarDemo.razor (1)

124-136: Move external stylesheet <link> tags to <HeadContent> instead of inline body markup.

At lines 124 and 135, the FontAwesome and Bootstrap Icons stylesheets should be wrapped in <HeadContent> (which renders via the configured HeadOutlet in App.razor) rather than placed inline in the component body. This follows Blazor's recommended pattern for page-specific head elements and ensures proper stylesheet lifecycle management.

♻️ Suggested refactor

+<HeadContent>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
+</HeadContent>
+
 <DemoExample Title="External Icons" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
     <div>
         Use icons from external libraries like FontAwesome and Bootstrap Icons with the <b>DismissIcon</b> parameter.
     </div>
@@
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
@@
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/SnackBar/BitSnackBarDemo.razor`
around lines 124 - 136, The two external <link> stylesheet tags currently inline
near the BitSnackBar examples (the FontAwesome link before the BitSnackBar with
`@ref`="dismissIconFaRef" and the Bootstrap Icons link after the BitSnackBar with
`@ref`="dismissIconCssRef") must be moved into a <HeadContent> block instead of
the component body; wrap each <link rel="stylesheet" .../> inside
<HeadContent>...</HeadContent> in BitSnackBarDemo.razor, remove the inline
copies from the markup next to BitSnackBar/BitButton, and keep the BitSnackBar
refs and handlers (dismissIconFaRef, dismissIconCssRef, OpenDismissIconFa,
OpenDismissIconCss) unchanged so only the stylesheet tags move to the
head-managed section.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/SnackBar/BitSnackBarDemo.razor`:
- Around line 124-136: The two external <link> stylesheet tags currently inline
near the BitSnackBar examples (the FontAwesome link before the BitSnackBar with
`@ref`="dismissIconFaRef" and the Bootstrap Icons link after the BitSnackBar with
`@ref`="dismissIconCssRef") must be moved into a <HeadContent> block instead of
the component body; wrap each <link rel="stylesheet" .../> inside
<HeadContent>...</HeadContent> in BitSnackBarDemo.razor, remove the inline
copies from the markup next to BitSnackBar/BitButton, and keep the BitSnackBar
refs and handlers (dismissIconFaRef, dismissIconCssRef, OpenDismissIconFa,
OpenDismissIconCss) unchanged so only the stylesheet tags move to the
head-managed section.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: edbb6742-e0ac-498c-b9a9-4672def1adb5

📥 Commits

Reviewing files that changed from the base of the PR and between fdcae81 and 22cc10c.

📒 Files selected for processing (6)

• src/BlazorUI/Bit.BlazorUI/Components/Notifications/SnackBar/BitSnackBar.razor
• src/BlazorUI/Bit.BlazorUI/Components/Notifications/SnackBar/BitSnackBar.razor.cs
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/SnackBar/BitSnackBarDemo.razor
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/SnackBar/BitSnackBarDemo.razor.cs
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/SnackBar/BitSnackBarDemo.razor.samples.cs
• src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Notifications/SnackBar/BitSnackBarTests.cs