Add new Icon parameters to BitBreadcrumb (#12102)#12103
Add new Icon parameters to BitBreadcrumb (#12102)#12103msynk merged 1 commit intobitfoundation:developfrom
Conversation
WalkthroughThis pull request adds Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
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 |
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/BitBreadcrumbDemo.razor.cs (1)
319-330:⚠️ Potential issue | 🟡 MinorPre-existing:
OverflowTemplateandTemplatetypes referenceBitBreadcrumbIteminstead ofBitBreadcrumbOption.Lines 322-323 and 328-329 in the
BitBreadcrumbOptionsection showRenderFragment<BitBreadcrumbItem>?as the type, but these should beRenderFragment<BitBreadcrumbOption>?to match the actualBitBreadcrumbOption.csdeclarations. This predates this PR but is worth fixing while you're here.Proposed fix
new() { Name = "OverflowTemplate", - Type = "RenderFragment<BitBreadcrumbItem>?", + Type = "RenderFragment<BitBreadcrumbOption>?", Description = "The custom template for the item in overflow list.", }, new() { Name = "Template", - Type = "RenderFragment<BitBreadcrumbItem>?", + Type = "RenderFragment<BitBreadcrumbOption>?", Description = "The custom template for the item.", }🤖 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/Navs/Breadcrumb/BitBreadcrumbDemo.razor.cs` around lines 319 - 330, The metadata entries for OverflowTemplate and Template incorrectly reference RenderFragment<BitBreadcrumbItem>?; update both entries to use RenderFragment<BitBreadcrumbOption>? so they match the BitBreadcrumbOption.cs declarations—locate the two new() objects named OverflowTemplate and Template in BitBreadcrumbDemo.razor.cs and change their Type values from "RenderFragment<BitBreadcrumbItem>?" to "RenderFragment<BitBreadcrumbOption>?".src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor (1)
73-77:⚠️ Potential issue | 🟡 MinorPre-existing:
GetClasses(item, true)should beGetClasses(item, false)for non-overflow button items.Line 77 passes
true(isOverflowItem) toGetClasses, but this button is in the main display items loop—not in the overflow callout. The anchor (Line 51) and span (Line 101) paths correctly passfalse. This causes overflow-specific CSS classes/styles to be incorrectly applied to button-rendered display items.Proposed fix
- class="bit-brc-itm `@GetClasses`(item, true)" `@onclick`="() => HandleOnItemClick(item)"> + class="bit-brc-itm `@GetClasses`(item, false)" `@onclick`="() => HandleOnItemClick(item)">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor` around lines 73 - 77, The button in BitBreadcrumb.razor is calling GetClasses(item, true) which incorrectly applies overflow-item styles to main display items; change the second argument to false so it matches the anchor/span variants. Locate the button element that uses GetIsSelected, GetIsEnabled, GetStyles and HandleOnItemClick and update GetClasses(item, true) -> GetClasses(item, false) to ensure non-overflow CSS is applied.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor`:
- Around line 73-77: The button in BitBreadcrumb.razor is calling
GetClasses(item, true) which incorrectly applies overflow-item styles to main
display items; change the second argument to false so it matches the anchor/span
variants. Locate the button element that uses GetIsSelected, GetIsEnabled,
GetStyles and HandleOnItemClick and update GetClasses(item, true) ->
GetClasses(item, false) to ensure non-overflow CSS is applied.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/BitBreadcrumbDemo.razor.cs`:
- Around line 319-330: The metadata entries for OverflowTemplate and Template
incorrectly reference RenderFragment<BitBreadcrumbItem>?; update both entries to
use RenderFragment<BitBreadcrumbOption>? so they match the
BitBreadcrumbOption.cs declarations—locate the two new() objects named
OverflowTemplate and Template in BitBreadcrumbDemo.razor.cs and change their
Type values from "RenderFragment<BitBreadcrumbItem>?" to
"RenderFragment<BitBreadcrumbOption>?".
---
Duplicate comments:
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbCustomDemo.razor`:
- Around line 178-215: This demo currently inlines external CDN stylesheet tags
(the FontAwesome and Bootstrap Icons <link> entries) inside the Example block
that reference Font Awesome 7.0.1; remove these in-component <link
rel="stylesheet"...> tags and instead load the icon CSS centrally (e.g., in the
app host like index.html/_Host.cshtml or as a local npm/package asset) so the
BitBreadcrumb examples (CustomBreadcrumbItemsWithExternalIcon1,
CustomBreadcrumbItemsWithExternalIcon2, CustomBreadcrumbItemsWithExternalIcon3,
CustomBreadcrumbItemsWithExternalIcon4 and the DemoExample with Id="example9")
rely on the centrally-provided CSS; if a specific vetted version is required,
update the central include to that approved version and ensure only one global
include exists to avoid duplicate loads.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbOptionDemo.razor`:
- Around line 236-288: This demo embeds an external Font Awesome 7.0.1 CDN link
(and a Bootstrap Icons CDN) which matches the same CDN concern raised earlier;
update the examples to stop hardcoding external CDNs by either using the
project's approved icon package (install/import FontAwesome/Bootstrap Icons via
the app's static assets or NuGet/npm package) or switching the <link
rel="stylesheet"> tags to the approved CDN/version used elsewhere, and ensure
the BitBreadcrumb/BitBreadcrumbOption examples and BitIconInfo.Fa /
BitIconInfo.Bi usages reference the locally-hosted or approved icon CSS so the
demo does not inline an unapproved external CDN.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbOptionDemo.razor.samples.cs`:
- Around line 173-210: The Font Awesome CDN URL in the example9RazorCode string
references a potentially invalid version (7.0.1) which can break icon rendering;
update the href to a valid Font Awesome CDN URL or a known existing version
(e.g., latest stable) or switch to a bundled/local asset, then verify icons
render; locate the example9RazorCode constant in
_BitBreadcrumbOptionDemo.razor.samples.cs and replace the invalid CDN link
accordingly.
closes #12102
Summary by CodeRabbit
Release Notes
New Features
DividerIconandOverflowIconparameters for divider and overflow customizationIconpropertyDocumentation