Add new Icon parameter to BitSplitter (#12176)

[msynk]

closes #12176

Summary by CodeRabbit

• New Features

  • Splitter component now supports external icon libraries (FontAwesome, Bootstrap Icons) for gutter customization
  • Added GutterIconName parameter for built-in Fluent UI icons

• Documentation

  • Updated with examples demonstrating external icon library integration

• Tests

  • Added comprehensive icon rendering and precedence coverage

[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: e3b0df77-db47-47c0-ac62-3c327bc6d7ec

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

BitSplitter component now supports external icon libraries through a new BitIconInfo-based approach for the gutter icon. The GutterIcon property type changed from string to BitIconInfo, with a new GutterIconName property added for built-in Fluent UI icons. Demos and tests updated accordingly to showcase FontAwesome, Bootstrap Icons, and CSS-based icon integration.

Changes

Cohort / File(s)	Summary
Component Core src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Splitter/BitSplitter.razor, BitSplitter.razor.cs	Changed GutterIcon from string? to BitIconInfo?, added GutterIconName property for built-in icons, updated rendering logic to use BitIconInfo.GetCssClasses() for external icon support, removed ResetStyleBuilder attribute. BOM character removed from file header.
Demo & Documentation src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Splitter/BitSplitterDemo.razor, BitSplitterDemo.razor.cs	Updated demo to use GutterIconName for built-in icons, added "External Icons" example block demonstrating FontAwesome and Bootstrap Icons integration via BitIconInfo, documented BitIconInfo as component subclass with parameters for external library support.
Tests src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Surfaces/Splitter/BitSplitterTests.cs	Replaced GutterIcon usage with GutterIconName in existing test, added comprehensive test suite covering BitIconInfo rendering, external CSS class application, FontAwesome/Bootstrap class validation, and precedence rules between BitIconInfo and GutterIconName.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 The splitter now grips icons bright,
From FontAwesome or Bootstrap's light,
External libraries dance with glee,
While BitIconInfo holds the key,
A gutter adorned with endless sight! ✨

🚥 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 PR title accurately describes the main change: adding a new icon parameter mechanism to the BitSplitter component.
Linked Issues check	✅ Passed	The PR implements the new icon mechanism for BitSplitter [#12176] by introducing BitIconInfo-based approach and GutterIconName parameter for external icon support.
Out of Scope Changes check	✅ Passed	All changes align with implementing the new icon mechanism for BitSplitter. Minor cleanup (BOM character removal) is incidental to the primary scope.

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

Tip

CodeRabbit can enforce grammar and style rules using `languagetool`.

Configure the reviews.tools.languagetool setting to enable/disable rules and categories. Refer to the LanguageTool Community to learn more.

[Copilot]

Pull request overview

Updates BitSplitter to support rendering gutter icons via BitIconInfo (enabling external icon libraries) while introducing GutterIconName for built-in Fluent UI icons, and refreshes the demo/tests accordingly.

Changes:

• Replace GutterIcon (string) with GutterIcon (BitIconInfo?) and add GutterIconName (string?) for built-in icons.
• Update the splitter rendering to resolve the effective icon via BitIconInfo.From(...).
• Expand demo and tests to cover BitIconInfo scenarios (FontAwesome/Bootstrap) and precedence behavior.

Reviewed changes

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

Show a summary per file

File	Description
src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Splitter/BitSplitter.razor.cs	Changes the public API for gutter icon support (BitIconInfo + new GutterIconName).
src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Splitter/BitSplitter.razor	Updates markup to render the resolved icon via BitIconInfo.From(...).
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Splitter/BitSplitterDemo.razor.cs	Updates demo parameter docs and adds BitIconInfo subclass documentation + new example code.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Splitter/BitSplitterDemo.razor	Updates demo usage to GutterIconName and adds an “External Icons” example.
src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Surfaces/Splitter/BitSplitterTests.cs	Updates existing test and adds new tests for BitIconInfo rendering and precedence.

[coderabbitai]

Actionable comments posted: 3

🤖 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/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Splitter/BitSplitterDemo.razor`:
- Line 182: Update the demo text and usages to reference the correct parameter
name GutterIcon instead of "Icon" and replace the raw string icon classes with
the documented factory methods; specifically change the help text in
BitSplitterDemo.razor to mention GutterIcon and update the icon assignments that
currently use @("fa-solid fa-arrows-left-right") and @("bi bi-grip-vertical") to
use BitIconInfo.Fa(...)/BitIconInfo.Bi(...) or BitIconInfo.Css(...) as shown in
BitSplitterDemo.razor.cs so the live demo matches the documented factory
pattern.

In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Splitter/BitSplitterDemo.razor.cs`:
- Around line 19-21: Update the misleading parameter description so it correctly
states precedence: change the Description that currently mentions "Takes
precedence over GutterIcon when both are set" to say that the BitIconInfo value
takes precedence over GutterIcon, and that GutterIconName is ignored when
GutterIcon is set (not when Icon is set). Locate the description strings used
for the BitSplitter gutter icon parameters (references to BitIconInfo,
GutterIcon, GutterIconName, Icon) and apply the corrected wording to both
occurrences that document this precedence.

In
`@src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Surfaces/Splitter/BitSplitterTests.cs`:
- Line 67: Tests in
Bit.BlazorUI.Tests/Components/Surfaces/Splitter/BitSplitterTests.cs are querying
a non-existent CSS class `.bit-spl-gtr-ico` while BitSplitter.razor renders
`.bit-spl-gic`; update the tests (references in BitSplitterTests.cs) to use
`.bit-spl-gic` consistently (or alternatively rename the class in
BitSplitter.razor and its CSS to match `.bit-spl-gtr-ico`) so the component
queries find the rendered element (search for the occurrences of
`.bit-spl-gtr-ico` in the test file and replace them with `.bit-spl-gic` or make
the matching change in BitSplitter.razor/CSS).

🪄 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: 13611b6c-e864-4659-81ab-24364eccd16e

📥 Commits

Reviewing files that changed from the base of the PR and between 42d9667 and 2762aad.

📒 Files selected for processing (5)

• src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Splitter/BitSplitter.razor
• src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Splitter/BitSplitter.razor.cs
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Splitter/BitSplitterDemo.razor
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Splitter/BitSplitterDemo.razor.cs
• src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Surfaces/Splitter/BitSplitterTests.cs

[Copilot]

Pull request overview

Updates BitSplitter to support external icon libraries via BitIconInfo while preserving a dedicated API (GutterIconName) for built-in Fluent UI gutter icons, and aligns demos/tests with the new behavior.

Changes:

• Changed BitSplitter gutter icon API to GutterIcon: BitIconInfo? + added GutterIconName: string? fallback.
• Updated BitSplitter rendering logic to resolve icon via BitIconInfo.From(...) and render the computed CSS classes.
• Expanded unit tests and updated the demo page to document and showcase external icon usage.

Reviewed changes

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

Show a summary per file

File	Description
src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Surfaces/Splitter/BitSplitterTests.cs	Updates existing test for new param name and adds coverage for BitIconInfo/external icon class rendering + precedence.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Splitter/BitSplitterDemo.razor.cs	Updates parameter docs, adds BitIconInfo subclass docs, and adds a new external-icons example snippet.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Splitter/BitSplitterDemo.razor	Updates demo usage to GutterIconName for Fluent icons and adds an “External Icons” demo section.
src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Splitter/BitSplitter.razor.cs	Introduces GutterIcon (BitIconInfo?) and GutterIconName (string?) API with updated XML docs.
src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Splitter/BitSplitter.razor	Updates markup to resolve and render gutter icon via BitIconInfo.From(...) and GetCssClasses().

[Copilot]

Pull request overview

Updates BitSplitter to support external icon libraries via BitIconInfo while documenting and testing the new gutter icon behavior.

Changes:

• Changed gutter icon API to use BitIconInfo? (GutterIcon) and added GutterIconName for built-in Fluent UI icons.
• Updated Splitter demo to document/illustrate external icons and added BitIconInfo subclass docs.
• Expanded Splitter unit tests to cover BitIconInfo variants and precedence rules.

Reviewed changes

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

Show a summary per file

File	Description
src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Splitter/BitSplitter.razor.cs	Introduces GutterIcon as BitIconInfo? and adds GutterIconName with updated XML docs.
src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Splitter/BitSplitter.razor	Renders the gutter icon via BitIconInfo.From(...).GetCssClasses() and adds a new icon element class.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Splitter/BitSplitterDemo.razor.cs	Updates parameter docs and adds BitIconInfo subclass documentation plus new example code.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Splitter/BitSplitterDemo.razor	Updates demo usage (GutterIconName) and adds an “External Icons” example section.
src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Surfaces/Splitter/BitSplitterTests.cs	Updates/extends tests for GutterIconName, BitIconInfo rendering, and precedence.