Skip to content

Commit

Permalink
feat(blazorui): add ClassStyles feature to BitBreadcrumb #8968 (#9030)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Cyrus-Sushiant
Cyrus-Sushiant authored Oct 27, 2024
1 parent 9e23ee1 commit 59c1740
Show file tree
Hide file tree
Showing 15 changed files with 711 additions and 276 deletions.
13 changes: 6 additions & 7 deletions src/BlazorUI/Bit.BlazorUI.Tests/Components/Navs/Breadcrumb/BitBreadcrumbTests.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ public void BitBreadcrumbShouldTakeDividerIcon(string icon)
[DataTestMethod,
DataRow((uint)0),
DataRow((uint)3)
]
]
public void BitBreadcrumbShouldRespectMaxDisplayItems(uint maxDisplayedItems)
{
var breadcrumbItems = GetBreadcrumbItems();
Expand All @@ -37,11 +37,11 @@ public void BitBreadcrumbShouldRespectMaxDisplayItems(uint maxDisplayedItems)
parameters.Add(p => p.MaxDisplayedItems, maxDisplayedItems);
});

var breadcrumbElements = component.FindAll(".bit-brc .bit-brc-iwp ul li");
var breadcrumbElements = component.FindAll(".bit-brc ul.bit-brc-icn li a");

if (maxDisplayedItems > 0)
{
Assert.AreEqual((uint)breadcrumbElements.Count, maxDisplayedItems + 1);
Assert.AreEqual((uint)breadcrumbElements.Count, maxDisplayedItems);
}
else
{
Expand All @@ -63,15 +63,14 @@ public void BitBreadcrumbShouldRespectOverflowChanges(string icon, uint maxDispl
parameters.Add(p => p.MaxDisplayedItems, maxDisplayedItems);
});

var breadcrumbOverflowIcon = component.Find(".bit-brc ul li button span i");
var breadcrumbOverflowIcon = component.Find(".bit-brc ul.bit-brc-icn li button i");

Assert.IsTrue(breadcrumbOverflowIcon.ClassList.Contains($"bit-icon--{icon}"));

var breadcrumbElements = component.FindAll(".bit-brc .bit-brc-iwp ul li");
var breadcrumbElements = component.FindAll(".bit-brc ul.bit-brc-icn li a");
var overflowItem = breadcrumbElements[(int)overflowIndex];

Assert.AreEqual((uint)breadcrumbElements.Count, maxDisplayedItems + 1);
Assert.IsTrue(overflowItem.InnerHtml.Contains("button"));
Assert.AreEqual((uint)breadcrumbElements.Count, maxDisplayedItems);
}

[DataTestMethod]
Expand Down
174 changes: 89 additions & 85 deletions src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,118 +14,121 @@
aria-label="@AriaLabel">

<div @onclick="CloseCallout" @onclick:stopPropagation
style="display:@(_isCalloutOpen ? "block" : "none")"
class="bit-brc-ovl"></div>
style="display:@(_isCalloutOpen ? "block" : "none");@Styles?.Overlay"
class="bit-brc-ovl @Classes?.Overlay"></div>

<div class="bit-brc-iwp">
<ul>
@foreach ((TItem item, int index) in _displayItems.Select((item, index) => (item, index)))
{
<li @key="GetKey(item)">
@if (_overflowItems.Any() && index == _internalOverflowIndex)
<ul style="@Styles?.ItemContainer" class="bit-brc-icn @Classes?.ItemContainer">
@foreach ((TItem item, int index) in _displayItems.Select((item, index) => (item, index)))
{
<li style="@Styles?.ItemWrapper" class="@Classes?.ItemWrapper" @key="GetKey(item)">
@if (index == _internalOverflowIndex && _overflowItems.Any())
{
<button id="@_overflowAnchorId"
type="button"
style="@Styles?.OverflowButton"
class="bit-brc-obt @Classes?.OverflowButton"
aria-label="@OverflowAriaLabel" @onclick="OpenCallout"
disabled="@(IsEnabled is false)">
@if (OverflowIconTemplate is not null)
{
@OverflowIconTemplate
}
else
{
<i style="@Styles?.OverflowButtonIcon" class="bit-icon bit-icon--@(OverflowIconName ?? "More") @Classes?.OverflowButtonIcon" />
}
</button>
}
else
{
var template = GetTemplate(item);
if (GetItemHref(item).HasValue())
{
<button id="@_overflowAnchorId"
type="button"
class="bit-brc-obt"
aria-label="@OverflowAriaLabel" @onclick="OpenCallout">
@if(OverflowIconTemplate is not null)
<a href="@GetItemHref(item)"
aria-current="@(GetIsSelected(item) ? "page" : null)"
style="@GetStyles(item, false)"
class="bit-brc-itm @GetClasses(item, false)">
@if (template is not null)
{
@OverflowIconTemplate
@template(item)
}
else if (ItemTemplate is not null)
{
@ItemTemplate(item)
}
else
{
<span class="bit-brc-oic">
<i class="bit-icon bit-icon--@OverflowIconName" />
</span>
var iconName = GetIconName(item);
@if (iconName.HasValue())
{
<i style="@Styles?.ItemIcon" class="bit-icon bit-icon--@iconName @Classes?.ItemIcon" />
}
<span style="@Styles?.ItemText" class="@Classes?.ItemText">@GetItemText(item)</span>
}
</button>
</a>
}
else
{
var template = GetTemplate(item);
if (GetItemHref(item).HasValue())
{
<a href="@GetItemHref(item)"
aria-current="@(GetIsSelected(item) ? "page" : null)"
style="@GetStyles(item)"
class="bit-brc-itm @GetClasses(item)">
@if (template is not null)
{
@template(item)
}
else if (ItemTemplate is not null)
{
@ItemTemplate(item)
}
else
{
var iconName = GetIconName(item);
@if (iconName.HasValue())
{
<i class="bit-icon bit-icon--@iconName" />
}
<span>@GetItemText(item)</span>
}
</a>
}
else
{
<button type="button"
aria-current="@(GetIsSelected(item) ? "page" : null)"
style="@GetStyles(item)"
class="bit-brc-itm @GetClasses(item)" @onclick="() => HandleOnItemClick(item)">
@if (template is not null)
{
@template(item)
}
else if (ItemTemplate is not null)
{
@ItemTemplate(item)
}
else
<button type="button"
aria-current="@(GetIsSelected(item) ? "page" : null)"
disabled="@(GetIsEnabled(item) is false)"
style="@GetStyles(item, false)"
class="bit-brc-itm @GetClasses(item, true)" @onclick="() => HandleOnItemClick(item)">
@if (template is not null)
{
@template(item)
}
else if (ItemTemplate is not null)
{
@ItemTemplate(item)
}
else
{
var iconName = GetIconName(item);
@if (iconName.HasValue())
{
var iconName = GetIconName(item);
@if (iconName.HasValue())
{
<i class="bit-icon bit-icon--@iconName" />
}
<span>@GetItemText(item)</span>
<i style="@Styles?.ItemIcon" class="bit-icon bit-icon--@iconName @Classes?.ItemIcon" />
}
</button>
}
<span style="@Styles?.ItemText" class="@Classes?.ItemText">@GetItemText(item)</span>
}
</button>
}
</li>
}
</li>

@if (index != _displayItems.Count - 1)
{
@if (index != _displayItems.Count - 1)
{
<li style="@Styles?.Divider" class="@Classes?.Divider">
@if (DividerIconTemplate is not null)
{
@DividerIconTemplate
}
else
{
<i class="bit-brc-div bit-icon bit-icon--@(DividerIconName ?? "ChevronRight") @(Dir == BitDir.Rtl && DividerIconName is null ? "bit-brc-rdi" : "")" />
<i style="@Styles?.DividerIcon"
class="bit-brc-div bit-icon bit-icon--@(DividerIconName ?? "ChevronRight") @(Dir == BitDir.Rtl && DividerIconName is null ? "bit-brc-rdi" : "") @Classes?.DividerIcon" />
}
}
</li>
}
</ul>
</div>
}
</ul>

<div id="@_calloutId"
tabindex="0"
role="listbox"
class="bit-brc-cal">
<ul id="@_scrollContainerId" class="bit-brc-scn">
style="@Styles?.Callout"
class="bit-brc-cal @Classes?.Callout">
<ul style="@Styles?.CalloutContainer" id="@_scrollContainerId" class="bit-brc-scn @Classes?.CalloutContainer">
@foreach (var item in _overflowItems)
{
var overflowTemplate = GetOverflowTemplate(item);
<li @key="GetKey(item)">
<li style="@Styles?.OverflowItemWrapper" class="@Classes?.OverflowItemWrapper" @key="GetKey(item)">
@if (GetItemHref(item).HasValue())
{
<a href="@GetItemHref(item)"
aria-current="@(GetIsSelected(item) ? "page" : null)"
style="@GetStyles(item)"
class="bit-brc-oitm @GetClasses(item)">
style="@GetStyles(item, true)"
class="bit-brc-ofi @GetClasses(item, true)">
@if (overflowTemplate is not null)
{
@overflowTemplate(item)
Expand All @@ -139,18 +142,19 @@
var iconName = GetIconName(item);
@if (iconName.HasValue())
{
<i class="bit-icon bit-icon--@iconName" />
<i style="@Styles?.OverflowItemIcon" class="bit-icon bit-icon--@iconName @Classes?.OverflowItemIcon" />
}
<span>@GetItemText(item)</span>
<span style="@Styles?.OverflowItemText" class="@Classes?.OverflowItemText">@GetItemText(item)</span>
}
</a>
}
else
{
<button type="button"
aria-current="@(GetIsSelected(item) ? "page" : null)"
style="@GetStyles(item)"
class="bit-brc-oitm @GetClasses(item)" @onclick="() => HandleOnItemClick(item)">
disabled="@(GetIsEnabled(item) is false)"
style="@GetStyles(item, true)"
class="bit-brc-ofi @GetClasses(item, true)" @onclick="() => HandleOnItemClick(item)">
@if (overflowTemplate is not null)
{
@overflowTemplate(item)
Expand All @@ -164,9 +168,9 @@
var iconName = GetIconName(item);
@if (iconName.HasValue())
{
<i class="bit-icon bit-icon--@iconName" />
<i style="@Styles?.OverflowItemIcon" class="bit-icon bit-icon--@iconName @Classes?.OverflowItemIcon" />
}
<span>@GetItemText(item)</span>
<span style="@Styles?.OverflowItemText" class="@Classes?.OverflowItemText">@GetItemText(item)</span>
}
</button>
}
Expand Down
Loading

0 comments on commit 59c1740

Please sign in to comment.