fix(breadcrumbs): migrated from ngFor to new @for loop with proper item tracking #305

also renamed breadcrumbs class and fixed dropdown story typo

Author: m2rt

community/components/navigation/breadcrumbs/breadcrumbs.component.html

@@ -1,47 +1,38 @@
-<nav
-  *ngIf="this.breakpointInputs().crumbs.length > 0"
-  aria-label="Breadcrumb"
-  class="tedi__breadcrumbs"
->
-  <ol class="tedi__breadcrumbs__list">
-    <ng-container *ngIf="!this.breakpointInputs().shortCrumbs">
-      <ng-container
-        *ngFor="let crumb of this.breakpointInputs().crumbs; let last = last"
-      >
-        @if (!last) {
-          <li class="tedi__breadcrumbs__item">
-            <a tedi-link [routerLink]="crumb.href" [underline]="false">{{
-              crumb.label
-            }}</a>
-            <tedi-icon color="brand" name="chevron_right" />
-          </li>
-        } @else {
-          <li
-            aria-current="page"
-            tedi-text
-            modifiers="inline-block"
-            color="secondary"
-          >
-            {{ crumb.label }}
-          </li>
+@if (breakpointInputs().crumbs.length > 0) {
+  <nav aria-label="Breadcrumb" class="tedi-breadcrumbs">
+    <ol class="tedi-breadcrumbs__list">
+      @if (!breakpointInputs().shortCrumbs) {
+        @for (crumb of breakpointInputs().crumbs; track crumb.href; let last = $last) {
+          @if (!last) {
+            <li class="tedi-breadcrumbs__item">
+              <a tedi-link [routerLink]="crumb.href" [underline]="false">{{
+                crumb.label
+              }}</a>
+              <tedi-icon color="brand" name="chevron_right" />
+            </li>
+          } @else {
+            <li
+              aria-current="page"
+              tedi-text
+              modifiers="inline-block"
+              color="secondary"
+            >
+              {{ crumb.label }}
+            </li>
+          }
         }
-      </ng-container>
-    </ng-container>
-  </ol>
-  <ng-container
-    *ngIf="
-      this.breakpointInputs().crumbs.length > 1 &&
-      this.breakpointInputs().shortCrumbs
-    "
-  >
-    <div class="tedi__breadcrumbs__item">
-      <tedi-icon color="brand" name="arrow_back" />
-      <a
-        tedi-link
-        [routerLink]="getSecondLastCrumb()?.href"
-        [underline]="false"
-        >{{ getSecondLastCrumb()?.label }}</a
-      >
-    </div>
-  </ng-container>
-</nav>
+      }
+    </ol>
+    @if (breakpointInputs().crumbs.length > 1 && breakpointInputs().shortCrumbs) {
+      <div class="tedi-breadcrumbs__item">
+        <tedi-icon color="brand" name="arrow_back" />
+        <a
+          tedi-link
+          [routerLink]="getSecondLastCrumb()?.href"
+          [underline]="false"
+          >{{ getSecondLastCrumb()?.label }}</a
+        >
+      </div>
+    }
+  </nav>
+}

community/components/navigation/breadcrumbs/breadcrumbs.component.scss

@@ -2,7 +2,7 @@
   display: block;
 }
 
-.tedi__breadcrumbs {
+.tedi-breadcrumbs {
   &__list {
     display: flex;
     flex-wrap: wrap;

community/components/navigation/breadcrumbs/breadcrumbs.component.ts

@@ -1,5 +1,4 @@
 import { Component, computed, inject, input } from "@angular/core";
-import { CommonModule } from "@angular/common";
 import { RouterLink } from "@angular/router";
 import {
   IconComponent,
@@ -45,7 +44,6 @@ export type Breadcrumbs = {
   selector: "tedi-breadcrumbs",
   standalone: true,
   imports: [
-    CommonModule,
     RouterLink,
     LinkComponent,
     IconComponent,

tedi/components/overlay/dropdown/dropdown.stories.ts

@@ -150,7 +150,7 @@ export const Default: Story = {
     props: args,
     template: `
       <tedi-dropdown [position]="position" [preventOverflow]="preventOverflow" [appendTo]="appendTo">
-        <button tedi-button tedi-dropdown-trigger [ariaHasPopuo]="ariaHasPopup">
+        <button tedi-button tedi-dropdown-trigger [ariaHasPopup]="ariaHasPopup">
           Trigger
         </button>
         <tedi-dropdown-content [dropdownRole]="dropdownRole">