Apply Icon improvements in BlazorUI component (#11684) #11945
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughIntroduces support for external icon libraries (FontAwesome, Material, Bootstrap) by adding a new Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroupItem.cs (1)
59-59: Remove incorrect[Parameter]attributes from non-component class.
BitButtonGroupItemis a plain class that does not inherit fromComponentBase. The[Parameter]attribute onOffIconName,OffText,OffTitle,OnIconName,OnText,OnTitle, andReversedIcon(lines 59, 64, 69, 89, 94, 99, 109) is invalid and has no effect. These attributes should be removed.🔎 Proposed fix
/// <summary> /// The icon of the item when it is not checked in toggle mode. /// </summary> - [Parameter] public string? OffIconName { get; set; } + public string? OffIconName { get; set; } /// <summary> /// The text of the item when it is not checked in toggle mode. /// </summary> - [Parameter] public string? OffText { get; set; } + public string? OffText { get; set; } /// <summary> /// The title of the item when it is not checked in toggle mode. /// </summary> - [Parameter] public string? OffTitle { get; set; } + public string? OffTitle { get; set; }Similar changes needed for
OnIconName,OnText,OnTitle, andReversedIconproperties.
🧹 Nitpick comments (5)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cs (1)
299-316: Consider adding CDN link examples for external icon libraries.The example code shows how to use FontAwesome, Material Icons, and Bootstrap Icons, but doesn't include the required CDN links (unlike example12RazorCode in BitActionButtonDemo). Consider adding comments with the CDN links needed for each library to help users understand the full setup.
🔎 Suggested enhancement with CDN links
private readonly string example6RazorCode = @" +<!-- FontAwesome CSS --> +<link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"" /> + +<!-- Material Icons CSS --> +<link rel=""stylesheet"" href=""https://fonts.googleapis.com/icon?family=Material+Icons"" /> + +<!-- Bootstrap Icons CSS --> +<link rel=""stylesheet"" href=""https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css"" /> + <!-- FontAwesome Icons (requires FontAwesome CSS to be loaded) --> <BitIcon Icon=""@BitIconInfo.FontAwesome(""fa-solid fa-house"")"" Size=""BitSize.Large"" />src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.razor (1)
68-73: Minor: Extra blank line at line 72.There's an extra blank line at line 72 that appears to be unintentional. While not a functional issue, consider removing it for consistency.
🔎 Proposed cleanup
@if (icon is not null) { <i style="@Styles?.Icon" class="bit-acb-ico @icon.GetCssClasses() @Classes?.Icon" /> } - @bodysrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor (1)
331-340: Potentially redundant FontAwesome loading.Line 336 states "FontAwesome 6 is already loaded in this demo" but line 340 adds another
<link>tag to load it. This could cause confusion or duplicate resource loading. Consider removing either the note or the<link>tag for consistency.🔎 Suggested options
Option 1: Remove the note if the
<link>tag is needed for the demo to work standalone:- <div><b>Note:</b> FontAwesome 6 is already loaded in this demo. The Icon parameter takes precedence over IconName.</div> + <div><b>Note:</b> The Icon parameter takes precedence over IconName.</div>Option 2: Remove the
<link>tag if FontAwesome is already loaded globally:- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor (1)
363-395: Good demonstration of external icon library integration.The "External Icons" demo effectively showcases FontAwesome usage with clear documentation. The note about Icon parameter precedence over IconName is helpful for users.
One consideration: loading external stylesheets inline via
<link>in a component may cause redundant network requests if this demo is viewed multiple times. For production demos, consider loading the stylesheet once at the app level or using a conditional check.src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIconInfo.cs (1)
139-184: Factory methods provide intuitive API for common icon libraries.The semantic methods (
FontAwesome,Material,Bootstrap) make the API self-documenting. TheCssmethod serves as a generic escape hatch for any CSS-based icon system.Note:
FontAwesome()andCss()have identical implementations, which is intentional for API clarity. Consider adding a brief comment noting this design choice for future maintainers.
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting
📒 Files selected for processing (34)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.razorsrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.razor.cssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButtonParams.cssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.razorsrc/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.razor.cssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroupItem.cssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroupOption.cssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razorsrc/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButtonItem.cssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButtonOption.cssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.razorsrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.razor.cssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.razor.cssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIconInfo.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/BitMenuButtonDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Icon/BitIconInfoTests.cs
🧰 Additional context used
🧬 Code graph analysis (12)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButtonItem.cs (2)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs (1)
BitIconInfo(347-371)src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.razor.cs (1)
BitIconInfo(271-285)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.razor.cs (2)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs (1)
BitIconInfo(347-371)src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.razor.cs (1)
BitIconInfo(271-285)
src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.razor.cs (1)
src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIconInfo.cs (10)
BitIconInfo(7-205)BitIconInfo(12-12)BitIconInfo(18-21)BitIconInfo(37-42)BitIconInfo(139-142)BitIconInfo(153-156)BitIconInfo(167-170)BitIconInfo(181-184)BitIconInfo(197-204)GetCssClasses(83-106)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroupItem.cs (2)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs (1)
BitIconInfo(347-371)src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.razor.cs (1)
BitIconInfo(271-285)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroupOption.cs (2)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs (1)
BitIconInfo(347-371)src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.razor.cs (1)
BitIconInfo(271-285)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs (2)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButtonItem.cs (1)
BitMenuButtonItem(3-64)src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButtonOption.cs (1)
BitMenuButtonOption(3-92)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.cs (1)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/Operation.cs (1)
Operation(3-34)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.cs (1)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroupItem.cs (1)
BitButtonGroupItem(4-135)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.razor.cs (1)
src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIconInfo.cs (9)
BitIconInfo(7-205)BitIconInfo(12-12)BitIconInfo(18-21)BitIconInfo(37-42)BitIconInfo(139-142)BitIconInfo(153-156)BitIconInfo(167-170)BitIconInfo(181-184)BitIconInfo(197-204)
src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Icon/BitIconInfoTests.cs (1)
src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIconInfo.cs (1)
GetCssClasses(83-106)
src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIconInfo.cs (1)
src/BlazorUI/Bit.BlazorUI/Extensions/StringExtensions.cs (1)
HasNoValue(12-17)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.razor.cs (1)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs (1)
BitIconInfo(347-371)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build Bit.BlazorUI
🔇 Additional comments (45)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor.cs (1)
68-138: LGTM! Clear documentation of Icon precedence.The addition of
Icon,OffIcon, andOnIconparameters (typeBitIconInfo?) properly documents their precedence over the correspondingIconNamevariants and clarifies thatIconNameis for built-in Fluent UI icons. This aligns well with the PR's objective to support external icon libraries.src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cs (2)
520-542: LGTM! Excellent FontAwesome integration example.The new
example17RazorCodedemonstrates proper usage of external icons viaBitIconInfo.FontAwesome()with various color and variant combinations. The inclusion of the FontAwesome stylesheet link (line 522) is a helpful reminder for users.
544-659: LGTM! Sample renumbering is correct.The renaming of example blocks (17→18, 18→19) accommodates the new FontAwesome example while maintaining sequential numbering.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cs (2)
404-434: LGTM! C# sample code structure is correct.The example12CsharpCode properly defines the Operation class and demonstrates styleClassCustoms with inline styles and custom CSS classes.
437-548: LGTM! Sample renumbering is correct.The renaming of example blocks (12→13, 13→14) maintains sequential ordering after the new external icon example.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.cs (1)
91-103: LGTM! Consistent Icon parameter addition.The
Iconparameter (typeBitIconInfo?) is properly documented with clear precedence rules and the updatedIconNamedescription correctly specifies "built-in Fluent UI icons". This matches the pattern used across other button components in this PR.src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.cs (1)
128-140: LGTM! Consistent Icon parameter addition.The
Iconparameter addition follows the same pattern as other button components, with clear documentation of external icon library support and precedence overIconName. The updatedIconNamedescription properly clarifies it's for built-in Fluent UI icons.src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/BitMenuButtonDemo.razor.cs (1)
77-89: LGTM! Clear documentation for the new Icon parameter.The documentation correctly describes the Icon parameter's precedence over IconName and provides helpful examples for external icon libraries (FontAwesome, Material, Custom CSS).
src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.razor.cs (1)
119-132: LGTM! Well-documented Icon parameter.The documentation is comprehensive with clear remarks and practical examples for different icon libraries.
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.razor.cs (1)
93-121: LGTM! Consistent Icon parameter implementation.The Icon parameter is well-documented with clear precedence rules and examples, consistent with BitButton and other components.
src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButtonItem.cs (1)
10-28: LGTM! Consistent Icon property implementation.The Icon property is properly documented with clear examples and precedence rules, consistent with the broader icon improvements.
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.razor (2)
7-7: LGTM! Efficient icon resolution.Computing the icon once at the top of the component is efficient and clean. The
BitIconInfo.Frommethod properly implements the precedence rule (Icon over IconName).
41-46: LGTM! Proper icon rendering with external library support.The refactored rendering correctly uses
icon.GetCssClasses()to support both built-in Fluent UI icons and external icon libraries while maintaining the same HTML structure.src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.razor (3)
7-7: LGTM! Consistent icon resolution pattern.The icon resolution follows the same efficient pattern as BitActionButton, computing the icon once at the component level.
26-33: LGTM! Proper icon rendering with IconUrl fallback.The refactored icon rendering correctly:
- Uses
icon.GetCssClasses()for BitIconInfo-based icons- Preserves the IconUrl fallback for image-based icons
- Maintains the same HTML structure
98-105: LGTM! Consistent anchor rendering.The anchor rendering path correctly mirrors the button rendering logic with the same icon handling and IconUrl fallback.
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.razor (1)
21-25: LGTM!The transition from string-based icon handling to
BitIconInfo?is well-implemented. The null-check replacesHasValue()appropriately, andGetCssClasses()correctly generates the CSS classes for both built-in and external icon libraries.src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButtonOption.cs (1)
15-28: LGTM!The new
Iconproperty is well-documented with clear examples for external icon libraries. The XML documentation correctly states the precedence overIconNameand aligns with the parallel implementation inBitMenuButtonItem.src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButtonParams.cs (2)
65-73: LGTM!The
Iconproperty documentation is thorough and consistent with other components. The remarks section clearly explains the use case for external icon libraries.
228-231: LGTM!The
UpdateParameterslogic for the newIconproperty correctly follows the established pattern: it propagates the value only ifIconis not null and hasn't been explicitly set on the target component.src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.razor.cs (3)
20-34: LGTM!The
Iconproperty is well-documented with practical examples for FontAwesome, Material, and custom CSS. The[ResetClassBuilder]attribute ensures CSS classes are rebuilt when the icon changes.
49-49: LGTM!The expression-bodied
_iconproperty correctly applies the precedence rule viaBitIconInfo.From(). This approach is appropriate as the resolution logic is lightweight.
78-78: LGTM!Using
_icon?.GetCssClasses()correctly generates the appropriate CSS classes for both built-in and external icons, with null-safety handled properly.src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor (3)
38-41: LGTM!The icon handling for selected items correctly uses the new
BitIconInfoapproach with null-check andGetCssClasses()for CSS generation.
50-59: LGTM!The header icon resolution via
BitIconInfo.From(Icon, IconName)correctly implements the precedence rule. The null-check andGetCssClasses()usage is consistent with other icon rendering paths.
121-124: LGTM!Item icon handling follows the same pattern as header and selected item icons, ensuring consistent behavior across all icon rendering scenarios in the menu button.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor (1)
342-362: LGTM!The External Icons demo effectively showcases the new
BitIconInfo-based icon support across different variants and colors, demonstrating the flexibility of the new API for external icon libraries.src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.razor.cs (4)
54-67: LGTM!The
Iconproperty is well-documented with clear examples for external icon libraries. The documentation style is consistent with other components in this PR.
96-109: LGTM!The
OffIconproperty follows the same documentation pattern asIcon, with appropriate examples and remarks about external library usage.
126-139: LGTM!The
OnIconproperty completes the set of external icon support properties with consistent documentation.
271-285: LGTM!The
GetIcon()method correctly implements the icon resolution logic:
- When checked, resolves
OnIcon/OnIconNameviaBitIconInfo.From()- When not checked and an off-icon exists, returns the
OffIcon/OffIconNameresolution- Falls back to
Icon/IconNameotherwiseThis mirrors the logic in
GetText()andGetTitle()methods, maintaining API consistency.src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Icon/BitIconInfoTests.cs (1)
1-355: Comprehensive test coverage for the new BitIconInfo API.The test suite thoroughly covers:
- All constructor overloads and property initialization
- CSS class generation logic with various combinations of BaseClass, Prefix, and Name
- Factory methods for FontAwesome, Material, Bootstrap, and custom CSS icons
- Implicit conversions between string and BitIconInfo
- Edge cases including null, empty, and whitespace values
The tests align well with the
GetCssClasses()implementation shown in the relevant code snippets and will help ensure backward compatibility as the API evolves.src/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroupOption.cs (1)
16-29: Well-documented Icon properties with consistent API.The new
Icon,OffIcon, andOnIconproperties follow the established pattern and include thorough XML documentation with usage examples. The precedence rules (Icon takes precedence over IconName) are clearly documented, matching theBitIconInfo.From()behavior seen in related components likeBitToggleButton.GetIcon().Also applies to: 46-59, 76-89
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroupItem.cs (1)
11-24: New Icon properties are correctly implemented.The new
Icon,OffIcon, andOnIconproperties of typeBitIconInfo?are correctly added without the[Parameter]attribute (since this is a POCO class), and include comprehensive XML documentation consistent withBitButtonGroupOption.Also applies to: 41-54, 71-84
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cs (1)
405-437: Sample code accurately demonstrates the new Icon parameter API.The
example12RazorCodeproperly shows:
- Loading FontAwesome CSS from CDN
- Using
BitIconInfo.FontAwesome()factory method- Various icon styles (fa-solid, fa-brands) and color combinations
This provides good reference documentation for users adopting the new external icon support.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor (1)
570-611: Well-structured External Icons demonstration for BitButton.The demo effectively shows:
- FontAwesome icons with various styles (fa-solid, fa-brands)
- Different color variants (Primary, Secondary, Tertiary, Error, Success)
- Clear note about Icon parameter precedence
The demonstration is consistent with the pattern used in other button component demos.
src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs (2)
75-88: Icon property follows established pattern with comprehensive documentation.The new
Iconproperty is well-documented with examples for FontAwesome, Material, and custom CSS icons, matching the documentation style used in other button components.
347-371: GetIcon method correctly implements BitIconInfo resolution.The refactored
GetIconmethod properly usesBitIconInfo.From()to merge theIconandIconNameproperties with correct precedence (Icon takes precedence). The implementation pattern is consistent withBitToggleButton.GetIcon().src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor (1)
455-493: External Icons demo for BitActionButton is complete and consistent.The demonstration shows FontAwesome icons across different color variants and follows the same pattern established in the other button component demos. The note about Icon precedence over IconName provides useful guidance.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor (1)
562-614: Well-structured demo for external icon support.The new "External Icons" section effectively demonstrates the
BitIconInfo.FontAwesome()factory method across different variants and colors. The note aboutIcontaking precedence overIconNameis helpful for developers.One consideration: Loading the FontAwesome CSS via an inline
<link>tag (line 571) works for demo purposes but would cause redundant network requests if the component is rendered multiple times. For production use, the CSS should be loaded in the application's head section.src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIconInfo.cs (5)
7-12: LGTM - Clean class structure with good documentation.The class design allows flexible icon configuration while maintaining backward compatibility with existing
IconNamestring parameters through implicit conversions.
14-42: Constructors provide appropriate flexibility.The three constructor overloads cover the expected use cases: simple built-in icons, and fully customized external icons. Documentation is comprehensive.
83-106: Well-implemented CSS class generation logic.The method correctly handles all combinations of
BaseClassandPrefixvalues, with appropriate defaults for built-in Fluent UI icons while supporting external icon libraries that may not need a base class or prefix.
108-127: Implicit operators ensure backward compatibility.These conversions allow existing code using
stringicon names to continue working without modification, while new code can leverage the fullBitIconInfoAPI.
186-204: Clean resolution logic for Icon/IconName precedence.The
From()method provides a single point of resolution for components that support bothIconandIconNameparameters, ensuring consistent behavior across the component library.
| private readonly string example12RazorCode = @" | ||
| <!-- FontAwesome Icons (using Icon parameter) --> | ||
| <link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"" integrity=""sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="" crossorigin=""anonymous"" referrerpolicy=""no-referrer"" /> | ||
| <BitActionButton Icon=""@BitIconInfo.FontAwesome(""fa-solid fa-house"")""> | ||
| Home (Primary color) | ||
| </BitActionButton> | ||
| <BitActionButton Icon=""@BitIconInfo.FontAwesome(""fa-solid fa-heart"")"" Color=""BitColor.Secondary""> | ||
| Like (Secondary color) | ||
| </BitActionButton> | ||
| <BitActionButton Icon=""@BitIconInfo.FontAwesome(""fa-brands fa-github"")"" Color=""BitColor.Tertiary""> | ||
| GitHub (Tertiary color) | ||
| </BitActionButton> | ||
| <BitActionButton Icon=""@BitIconInfo.FontAwesome(""fa-solid fa-rocket"")"" Color=""BitColor.Error""> | ||
| Launch (Error color) | ||
| </BitActionButton> | ||
| <BitActionButton Icon=""@BitIconInfo.FontAwesome(""fa-solid fa-download"")"" Color=""BitColor.Success""> | ||
| Download (Success color) | ||
| </BitActionButton>"; |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
FontAwesome 6.5.1 CDN integrity hash css
💡 Result:
Use this SRI for the Font Awesome 6.5.1 CSS (all.min.css):
Sources: cdnjs listing for font-awesome 6.5.1 and example uses. [1][2]
🌐 Web query:
latest FontAwesome version 2025
💡 Result:
The latest Font Awesome major release is Font Awesome 7, and the most recent patch is version 7.1.0 (released Oct 1, 2025). [1][2]
Sources:
- Font Awesome blog announcement for v7. [1]
- Release tracking (endoflife.date) showing 7.1.0 as latest (Oct 1, 2025). [2]
Update FontAwesome to the latest version (7.1.0).
The integrity hash for FontAwesome 6.5.1 is correct, but this version is outdated. FontAwesome 7.1.0 is the latest release (October 1, 2025). Update the example to use the current version for better compatibility and to avoid demonstrating deprecated code.
🤖 Prompt for AI Agents
In
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cs
around lines 280-302, the embedded FontAwesome stylesheet references v6.5.1;
update the link to use FontAwesome v7.1.0 by replacing the href URL with the
7.1.0 CSS URL and update the integrity attribute to the correct SHA384/SHA512
hash for that 7.1.0 file, keeping crossorigin and referrerpolicy as-is; also
verify and adjust any icon class names if required by v7 (e.g., ensure classes
used like fa-solid/fa-brands are valid) so the sample compiles and renders
correctly.
| private List<Operation> externalIconCustoms = | ||
| [ | ||
| new() { Name = "Increase", Icon = BitIconName.Add }, | ||
| new() { Name = "Reset", Icon = BitIconName.Reset }, | ||
| new() { Name = "Decrease", Icon = BitIconName.Remove } | ||
| ]; |
There was a problem hiding this comment.
Incomplete implementation: external icon demo data uses built-in icons.
The externalIconCustoms list mirrors eventsCustoms and uses BitIconName string values rather than external icon library class names. This doesn't demonstrate the new external icon capability.
For a proper demo of external icons with custom data types, populate the Icon property with external library class names:
🔎 Example using external icon class names
private List<Operation> externalIconCustoms =
[
- new() { Name = "Increase", Icon = BitIconName.Add },
- new() { Name = "Reset", Icon = BitIconName.Reset },
- new() { Name = "Decrease", Icon = BitIconName.Remove }
+ new() { Name = "Increase", Icon = "fa-solid fa-plus" },
+ new() { Name = "Reset", Icon = "fa-solid fa-rotate-right" },
+ new() { Name = "Decrease", Icon = "fa-solid fa-minus" }
];Note: The Operation class's Icon property is string?, so it should accept external icon class names directly. The NameSelectors would map this to the appropriate icon parameter.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| private List<Operation> externalIconCustoms = | |
| [ | |
| new() { Name = "Increase", Icon = BitIconName.Add }, | |
| new() { Name = "Reset", Icon = BitIconName.Reset }, | |
| new() { Name = "Decrease", Icon = BitIconName.Remove } | |
| ]; | |
| private List<Operation> externalIconCustoms = | |
| [ | |
| new() { Name = "Increase", Icon = "fa-solid fa-plus" }, | |
| new() { Name = "Reset", Icon = "fa-solid fa-rotate-right" }, | |
| new() { Name = "Decrease", Icon = "fa-solid fa-minus" } | |
| ]; |
🤖 Prompt for AI Agents
In
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.cs
around lines 77-82, the externalIconCustoms demo currently reuses BitIconName
values; replace those with external icon library class names (plain strings)
such as FontAwesome/Material class names (e.g. "fa fa-plus", "fa fa-undo", "fa
fa-minus" or the project's chosen external classes) so Operation.Icon (string?)
shows external icons; ensure the NameSelectors or mapping used by the component
binds the Icon string to the icon-rendering parameter (no code changes to
Operation type required, just populate Icon with external class names and adjust
the selector/mapping if needed).
| private readonly string example12RazorCode = @" | ||
| <link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"" integrity=""sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="" crossorigin=""anonymous"" referrerpolicy=""no-referrer"" /> | ||
| <BitButtonGroup Variant=""BitVariant.Fill"" Items=""externalIconCustoms"" NameSelectors=""nameSelector"" | ||
| <BitButtonGroup Variant=""BitVariant.Outline"" Color=""BitColor.Secondary"" Items=""externalIconCustoms"" NameSelectors=""nameSelector"" | ||
| <BitButtonGroup Variant=""BitVariant.Text"" Color=""BitColor.Tertiary"" Items=""externalIconCustoms"" NameSelectors=""nameSelector"" | ||
| <BitButtonGroup Variant=""BitVariant.Fill"" Color=""BitColor.Error"" Items=""externalIconCustoms"" NameSelectors=""nameSelector"" | ||
| <BitButtonGroup Variant=""BitVariant.Outline"" Color=""BitColor.Success"" Items=""externalIconCustoms"" NameSelectors=""nameSelector"" />"; |
There was a problem hiding this comment.
Incomplete code: example12RazorCode has truncated lines.
Lines 395-403 appear to be cut off mid-attribute. Each BitButtonGroup line ends abruptly without closing tags or complete attribute values:
<BitButtonGroup Variant="BitVariant.Fill" Items="externalIconCustoms" NameSelectors="nameSelector" This would cause compilation errors.
🤖 Prompt for AI Agents
In
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cs
around lines 392-403, the example12RazorCode string contains truncated Razor
lines that stop mid-attribute and will not compile; fix by completing each
<BitButtonGroup ...> declaration so attributes are fully specified and each tag
is properly closed (self-close with "/>" or provide matching closing tag),
ensure any missing attributes (e.g., Color) are added where intended, preserve
the surrounding string quotes and newlines, and verify the entire verbatim
string ends correctly so the file compiles.
| private List<BitButtonGroupItem> externalIconItems = | ||
| [ | ||
| new() { Text = "Increase", IconName = BitIconName.Add }, | ||
| new() { Text = "Reset", IconName = BitIconName.Reset }, | ||
| new() { Text = "Decrease", IconName = BitIconName.Remove } | ||
| ]; |
There was a problem hiding this comment.
Incomplete implementation: external icon demo data uses built-in icons.
The externalIconItems list is identical to eventsItems and uses BitIconName values (Add, Reset, Remove) rather than demonstrating external icon libraries like FontAwesome or Material Icons as intended by this PR.
To properly demonstrate the new external icon functionality, populate this list with BitIconInfo-based icons:
🔎 Example using external icons
private List<BitButtonGroupItem> externalIconItems =
[
- new() { Text = "Increase", IconName = BitIconName.Add },
- new() { Text = "Reset", IconName = BitIconName.Reset },
- new() { Text = "Decrease", IconName = BitIconName.Remove }
+ new() { Text = "Increase", Icon = BitIconInfo.FontAwesome("fa-solid fa-plus") },
+ new() { Text = "Reset", Icon = BitIconInfo.FontAwesome("fa-solid fa-rotate-right") },
+ new() { Text = "Decrease", Icon = BitIconInfo.FontAwesome("fa-solid fa-minus") }
];Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.cs
around lines 63-68, the externalIconItems list currently duplicates eventsItems
and uses BitIconName values; replace those with BitIconInfo-based icons that
reference an external icon library (e.g., FontAwesome or Material). Update each
BitButtonGroupItem to provide a BitIconInfo instance (setting the external icon
name/class and the icon library enum) instead of BitIconName so the demo shows
external icons (for example: use BitIconInfo with FontAwesome classes like
"fa-solid fa-plus"/"fa-solid fa-undo"/"fa-solid fa-minus" and set the library to
FontAwesome).
| private readonly string example12CsharpCode = @" | ||
| private List<BitButtonGroupItem> basicItems = | ||
| [ | ||
| new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } | ||
| ]; | ||
| private List<BitButtonGroupItem> styleClassItems = | ||
| [ | ||
| new() | ||
| { | ||
| Text = ""Styled"", | ||
| Style = ""color: tomato; border-color: brown; background-color: peachpuff;"", | ||
| IconName = BitIconName.Brush, | ||
| }, | ||
| new() | ||
| { | ||
| Text = ""Classed"", | ||
| Class = ""custom-item"", | ||
| IconName = BitIconName.FormatPainter, | ||
| } | ||
| ];"; |
There was a problem hiding this comment.
Sample code mismatch: externalIconItems is referenced but not defined.
The example12RazorCode references externalIconItems (lines 253-261), but example12CsharpCode defines basicItems and styleClassItems instead. The C# sample should define the externalIconItems list that demonstrates the new Icon property with BitIconInfo.FontAwesome(...) or similar factory methods.
🔎 Suggested fix
private readonly string example12CsharpCode = @"
-private List<BitButtonGroupItem> basicItems =
-[
- new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" }
-];
-
-private List<BitButtonGroupItem> styleClassItems =
+private List<BitButtonGroupItem> externalIconItems =
[
- new()
- {
- Text = ""Styled"",
- Style = ""color: tomato; border-color: brown; background-color: peachpuff;"",
- IconName = BitIconName.Brush,
- },
- new()
- {
- Text = ""Classed"",
- Class = ""custom-item"",
- IconName = BitIconName.FormatPainter,
- }
+ new() { Text = ""Add"", Icon = BitIconInfo.FontAwesome(""fa-solid fa-plus"") },
+ new() { Text = ""Edit"", Icon = BitIconInfo.FontAwesome(""fa-solid fa-pen"") },
+ new() { Text = ""Delete"", Icon = BitIconInfo.FontAwesome(""fa-solid fa-trash"") }
];";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| private readonly string example12CsharpCode = @" | |
| private List<BitButtonGroupItem> basicItems = | |
| [ | |
| new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } | |
| ]; | |
| private List<BitButtonGroupItem> styleClassItems = | |
| [ | |
| new() | |
| { | |
| Text = ""Styled"", | |
| Style = ""color: tomato; border-color: brown; background-color: peachpuff;"", | |
| IconName = BitIconName.Brush, | |
| }, | |
| new() | |
| { | |
| Text = ""Classed"", | |
| Class = ""custom-item"", | |
| IconName = BitIconName.FormatPainter, | |
| } | |
| ];"; | |
| private readonly string example12CsharpCode = @" | |
| private List<BitButtonGroupItem> externalIconItems = | |
| [ | |
| new() { Text = ""Add"", Icon = BitIconInfo.FontAwesome(""fa-solid fa-plus"") }, | |
| new() { Text = ""Edit"", Icon = BitIconInfo.FontAwesome(""fa-solid fa-pen"") }, | |
| new() { Text = ""Delete"", Icon = BitIconInfo.FontAwesome(""fa-solid fa-trash"") } | |
| ];"; |
| <DemoExample Title="External Icon Libraries" RazorCode="@example6RazorCode" Id="example6"> | ||
| <div>Use icons from external libraries like FontAwesome, Material Icons, Bootstrap Icons, or custom CSS classes.</div> | ||
| <br /> | ||
| <div><strong>Note:</strong> To use external icon libraries, you need to include their CSS/font files in your project.</div> | ||
| <br /> | ||
| <div class="example-box"> | ||
| <div><strong>Built-in Fluent UI Icons (using IconName):</strong></div> | ||
| <br /> | ||
| <BitIcon IconName="@BitIconName.Home" Size="BitSize.Large" /> | ||
| | ||
| <BitIcon IconName="@BitIconName.FavoriteStarFill" Color="BitColor.Error" /> | ||
| | ||
| <BitIcon IconName="@BitIconName.Accept" Color="BitColor.Success" /> | ||
| <br /><br /><br /> | ||
| @* | ||
| <div><strong>FontAwesome Icons (using Icon parameter):</strong></div> | ||
| <br /> | ||
| <BitIcon Icon="@BitIconInfo.FontAwesome("fa-solid fa-house")" Size="BitSize.Large" /> | ||
| | ||
| <BitIcon Icon="@BitIconInfo.FontAwesome("fa-solid fa-heart")" Color="BitColor.Error" /> | ||
| | ||
| <BitIcon Icon="@BitIconInfo.FontAwesome("fa-brands fa-github")" Size="BitSize.Large" /> | ||
| <br /><br /><br /> | ||
| <div><strong>Material Icons (using Icon parameter):</strong></div> | ||
| <br /> | ||
| <BitIcon Icon="@BitIconInfo.Material("home")" Size="BitSize.Large" /> | ||
| | ||
| <BitIcon Icon="@BitIconInfo.Material("favorite")" Color="BitColor.Error" /> | ||
| | ||
| <BitIcon Icon="@BitIconInfo.Material("search")" Color="BitColor.Info" /> | ||
| <br /><br /><br /> | ||
| <div><strong>Bootstrap Icons (using Icon parameter):</strong></div> | ||
| <br /> | ||
| <BitIcon Icon="@BitIconInfo.Bootstrap("house")" Size="BitSize.Large" /> | ||
| | ||
| <BitIcon Icon="@BitIconInfo.Bootstrap("heart-fill")" Color="BitColor.Error" /> | ||
| | ||
| <BitIcon Icon="@BitIconInfo.Bootstrap("github")" Size="BitSize.Medium" /> | ||
| *@ | ||
| </div> | ||
| </DemoExample> |
There was a problem hiding this comment.
Demo content is entirely commented out.
The new "External Icon Libraries" example includes valuable FontAwesome, Material Icons, and Bootstrap Icons demonstrations, but all the actual external icon usage (lines 144-168) is commented out. This leaves users with only a note about loading CSS files and basic built-in icon examples.
Consider uncommenting at least the FontAwesome examples to provide working demonstrations, or remove the section entirely if it's not ready.
🤖 Prompt for AI Agents
In
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor
around lines 130-170, the external icon library examples
(FontAwesome/Material/Bootstrap) are fully commented out so users can't see or
try them; either uncomment at least the FontAwesome example block and ensure
necessary CSS/class usage is correct and documented in the demo (and remove the
surrounding Razor comment markers), or delete the dead commented section
entirely. If you choose to uncomment, verify the BitIcon calls use the correct
BitIconInfo helpers and that the project includes the required external CSS/font
references (update demo notes if needed).
2 participants
closes #11684
Summary by CodeRabbit
New Features
Documentation
Tests
✏️ Tip: You can customize this high-level summary in your review settings.