From 0ac5f8d62cfefaef20ab95b099fc84d1d1d89e31 Mon Sep 17 00:00:00 2001
From: Mohammad Aminsafaei <m.aminsafaei@outlook.com>
Date: Fri, 1 Nov 2024 14:09:24 +0330
Subject: [PATCH] feat(blazorui): add non-interactive items to BitBreadcrumb
 #9040 (#9070)

---
 .../Navs/Breadcrumb/BitBreadcrumb.razor       | 52 ++++++++++++++++++-
 .../Navs/Breadcrumb/BitBreadcrumb.razor.cs    |  1 +
 .../Navs/Breadcrumb/BitBreadcrumb.scss        | 16 ++++--
 3 files changed, 63 insertions(+), 6 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor
index 57fd4db421..7c16d4c6a9 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor
@@ -67,7 +67,7 @@
                             }
                         </a>
                     }
-                    else
+                    else if (OnItemClick.HasDelegate)
                     {
                         <button type="button"
                                 aria-current="@(GetIsSelected(item) ? "page" : null)"
@@ -93,6 +93,30 @@
                             }
                         </button>
                     }
+                    else 
+                    {
+                        <span aria-current="@(GetIsSelected(item) ? "page" : null)"
+                              style="@GetStyles(item, false)"
+                              class="bit-brc-nii @GetClasses(item, false)">
+                            @if (template is not null)
+                            {
+                                @template(item)
+                            }
+                            else if (ItemTemplate is not null)
+                            {
+                                @ItemTemplate(item)
+                            }
+                            else
+                            {
+                                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>
+                            }
+                        </span>
+                    }
                 }
             </li>
 
@@ -148,7 +172,7 @@
                             }
                         </a>
                     }
-                    else
+                    else if (OnItemClick.HasDelegate)
                     {
                         <button type="button"
                                 aria-current="@(GetIsSelected(item) ? "page" : null)"
@@ -174,6 +198,30 @@
                             }
                         </button>
                     }
+                    else
+                    {
+                        <span aria-current="@(GetIsSelected(item) ? "page" : null)"
+                              style="@GetStyles(item, true)"
+                              class="bit-brc-ofn @GetClasses(item, true)">
+                              @if (overflowTemplate is not null)
+                              {
+                                  @overflowTemplate(item)
+                              }
+                              else if (OverflowTemplate is not null)
+                              {
+                                  @OverflowTemplate(item)
+                              }
+                              else
+                              {
+                                  var iconName = GetIconName(item);
+                                  @if (iconName.HasValue())
+                                  {
+                                      <i style="@Styles?.OverflowItemIcon" class="bit-icon bit-icon--@iconName @Classes?.OverflowItemIcon" />
+                                  }
+                                  <span style="@Styles?.OverflowItemText" class="@Classes?.OverflowItemText">@GetItemText(item)</span>
+                              }
+                        </span>
+                    }
                 </li>
             }
         </ul>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor.cs
index c0055f33e9..cb46593227 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor.cs
@@ -176,6 +176,7 @@ private async Task HandleOnItemClick(TItem item)
     {
         if (IsEnabled is false) return;
         if (GetIsEnabled(item) is false) return;
+        if (OnItemClick.HasDelegate is false) return;
 
         await OnItemClick.InvokeAsync(item);
 
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.scss b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.scss
index fcaf433dc5..7166d0111c 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.scss
@@ -64,15 +64,19 @@
     }
 }
 
-.bit-brc-itm {
+.bit-brc-itm,
+.bit-brc-nii {
     display: flex;
     gap: spacing(1);
-    cursor: pointer;
     font-weight: 400;
     color: $clr-fg-pri;
     padding: 0 spacing(1);
     font-size: spacing(2.5);
     line-height: spacing(4.5);
+}
+
+.bit-brc-itm {
+    cursor: pointer;
 
     @media (hover: hover) {
         &:hover {
@@ -113,11 +117,11 @@
     max-height: spacing(88.875);
 }
 
-.bit-brc-ofi {
+.bit-brc-ofi,
+.bit-brc-ofn {
     width: 100%;
     display: flex;
     gap: spacing(1);
-    cursor: pointer;
     overflow: hidden;
     text-align: left;
     font-weight: 400;
@@ -137,6 +141,10 @@
     line-height: spacing(2.5);
     background-color: transparent;
     border: $shp-border-width $shp-border-style transparent;
+}
+
+.bit-brc-ofi {
+    cursor: pointer;
 
     @media (hover: hover) {
         &:hover {