Add missing new Icon parameters to BitFileUpload (#12209)

[msynk]

closes #12209

Summary by CodeRabbit

• New Features
  • Added custom icon parameters to FileUpload component for upload, pause, cancel, and remove actions.
  • Support for external icon libraries including FontAwesome and Bootstrap Icons.
  • New demo example demonstrates icon customization using CSS classes or icon helper methods.

[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: 0cc28610-3c3a-4587-8291-7e1b9ec95cfd

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

Added custom icon rendering support to the BitFileUpload component through new public parameters (UploadIcon/UploadIconName, PauseIcon/PauseIconName, CancelIcon/CancelIconName, RemoveIcon/RemoveIconName) that accept both BitIconInfo objects and icon name strings. Updated the file upload item template to dynamically resolve icon CSS classes and added comprehensive demo and test coverage.

Changes

Cohort / File(s)	Summary
Component Implementation src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor.cs	Added 8 new public parameters for icon customization (4 icon-related pairs with BitIconInfo? and string? types) plus reintroduced FileViewTemplate parameter.
Template Updates src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/_BitFileUploadItem.razor	Replaced hard-coded icon CSS classes with dynamically resolved icon CSS via BitIconInfo.From() helper method; refactored inline markup to multi-line format while preserving functionality.
Demo and Documentation src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor, BitFileUploadDemo.razor.cs	Added new example demonstrating icon customization using FontAwesome and Bootstrap Icons; documented all icon parameters with precedence rules; extended subclass metadata to include BitIconInfo configuration details.
Test Coverage src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileUpload/BitFileUploadTests.cs	Added 12 new test methods validating BitFileUpload accepts all icon-related parameters via BitIconInfo.Css(), BitIconInfo.Fa(), and BitIconInfo.Bi() constructors.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 With icons now dancing in custom attire,
Upload, pause, cancel—what more could we desire?
From FontAwesome hops to Bootstrap's bright glow,
Files bloom with new colors wherever they go! 🌸

🚥 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 clearly identifies the main change: adding missing Icon parameters to BitFileUpload component, directly matching the changeset.
Linked Issues check	✅ Passed	The PR implements all required Icon parameters (UploadIcon, PauseIcon, CancelIcon, RemoveIcon with corresponding IconName variants) to enable external icon customization in BitFileUpload, fully addressing issue #12209.
Out of Scope Changes check	✅ Passed	All changes are directly related to adding Icon parameters and their implementation: component code, markup updates, demo additions, and comprehensive tests all support the core objective.

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

Tip

CodeRabbit can use Trivy to scan for security misconfigurations and secrets in Infrastructure as Code files.

Add a .trivyignore file to your project to customize which findings Trivy reports.

[Copilot]

Pull request overview

Adds missing icon customization parameters to BitFileUpload so consumers can use either built-in Fluent UI icon names or external icon libraries via BitIconInfo, aligning this component with the newer “Icon/IconName” pattern used elsewhere in Bit.BlazorUI.

Changes:

• Introduces UploadIcon/PauseIcon/CancelIcon/RemoveIcon (BitIconInfo?) and *IconName (string?) parameters on BitFileUpload.
• Updates _BitFileUploadItem to resolve and render the effective icons using BitIconInfo.From(...).
• Updates the demo page and adds basic tests covering the new parameters’ presence.

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/Inputs/FileUpload/BitFileUpload.razor.cs	Adds new Icon/IconName parameters for upload/pause/cancel/remove actions.
src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/_BitFileUploadItem.razor	Uses BitIconInfo.From(...) to render the resolved action icons.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor	Adds an “External Icons” demo example showing FontAwesome/Bootstrap usage.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs	Documents new parameters and adds sample code strings for external icon usage.
src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileUpload/BitFileUploadTests.cs	Adds tests ensuring the new parameters are accepted by the component.

[coderabbitai]

🧹 Nitpick comments (2)

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor (1)

176-176: Consider moving CDN links to the page head or a shared location.

Placing <link> elements inline within the demo content means they may be loaded multiple times if the component re-renders, and they're not in the conventional <head> location. Consider documenting that users should add these links to their index.html or _Host.cshtml instead, or use a component that ensures single registration.

Also applies to: 196-196

🤖 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/Inputs/FileUpload/BitFileUploadDemo.razor`
at line 176, The BitFileUploadDemo.razor currently injects a Font Awesome CDN
<link> inline which can be duplicated on re-render and is not in the document
head; update the demo so the CDN stylesheet is referenced from a shared location
instead—either add a note in the BitFileUploadDemo (or its README) instructing
users to include the Font Awesome <link> in index.html/_Host.cshtml, or
implement a single-registration helper component (e.g., a HeadLinkRegistrar used
by BitFileUploadDemo) that ensures the stylesheet is only added once to the
document head rather than rendering the <link> directly in the component markup.

src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileUpload/BitFileUploadTests.cs (1)

81-223: Tests verify parameter acceptance but not rendered output.

These tests confirm that the component accepts the new icon parameters without throwing, but they don't verify that the icons are actually rendered with the correct CSS classes. Consider adding assertions that check for the presence of the icon element with the expected CSS class in the rendered markup.

For example:

[TestMethod]
public void BitFileUploadShouldRenderUploadIconWithCustomCssClass()
{
    var com = RenderComponent<BitFileUpload>(parameters =>
    {
        parameters.Add(p => p.UploadIcon, BitIconInfo.Css("fa-solid fa-upload"));
        // Add file to trigger icon rendering
    });

    var icon = com.Find(".fa-solid.fa-upload");
    Assert.IsNotNull(icon);
}

🤖 Prompt for AI Agents

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

In
`@src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileUpload/BitFileUploadTests.cs`
around lines 81 - 223, The tests currently named like
BitFileUploadShouldAcceptUploadIconParameter,
BitFileUploadShouldAcceptPauseIconParameter,
BitFileUploadShouldAcceptCancelIconParameter,
BitFileUploadShouldAcceptRemoveIconParameter (and the *Name/*BitInfo variants)
only verify parameters don't throw — update each to also assert the rendered
icon element appears by: set the appropriate parameter (e.g., UploadIcon /
PauseIcon / CancelIcon / RemoveIcon or the *Name versions), ensure any
preconditions that make the icon render (simulate adding a file or toggling the
upload state if required by BitFileUpload), and then use com.Find with the
expected CSS selector (e.g., ".fa-solid.fa-upload", ".fa-solid.fa-pause",
".fa-solid.fa-xmark", ".fa-solid.fa-trash" or the equivalent classes for
BitIconInfo.Bi/Fa) and Assert.IsNotNull on the result so the test verifies
actual DOM output.

🤖 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/Inputs/FileUpload/BitFileUploadDemo.razor`:
- Line 176: The BitFileUploadDemo.razor currently injects a Font Awesome CDN
<link> inline which can be duplicated on re-render and is not in the document
head; update the demo so the CDN stylesheet is referenced from a shared location
instead—either add a note in the BitFileUploadDemo (or its README) instructing
users to include the Font Awesome <link> in index.html/_Host.cshtml, or
implement a single-registration helper component (e.g., a HeadLinkRegistrar used
by BitFileUploadDemo) that ensures the stylesheet is only added once to the
document head rather than rendering the <link> directly in the component markup.

In
`@src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileUpload/BitFileUploadTests.cs`:
- Around line 81-223: The tests currently named like
BitFileUploadShouldAcceptUploadIconParameter,
BitFileUploadShouldAcceptPauseIconParameter,
BitFileUploadShouldAcceptCancelIconParameter,
BitFileUploadShouldAcceptRemoveIconParameter (and the *Name/*BitInfo variants)
only verify parameters don't throw — update each to also assert the rendered
icon element appears by: set the appropriate parameter (e.g., UploadIcon /
PauseIcon / CancelIcon / RemoveIcon or the *Name versions), ensure any
preconditions that make the icon render (simulate adding a file or toggling the
upload state if required by BitFileUpload), and then use com.Find with the
expected CSS selector (e.g., ".fa-solid.fa-upload", ".fa-solid.fa-pause",
".fa-solid.fa-xmark", ".fa-solid.fa-trash" or the equivalent classes for
BitIconInfo.Bi/Fa) and Assert.IsNotNull on the result so the test verifies
actual DOM output.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 6ad8c7e6-9e9e-43c6-a1af-525a69f0d0d0

📥 Commits

Reviewing files that changed from the base of the PR and between 994f6cf and 6282340.

📒 Files selected for processing (5)

• src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor.cs
• src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/_BitFileUploadItem.razor
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs
• src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileUpload/BitFileUploadTests.cs