fix: add separator on breadcrumb-item when a new item is added (micro…

…soft#4611) * add function to check for separator, add example and update style for not href item * Change files * combined item separator method * refactored setItemSeparator and addItem functions
mihsta · Apr 20, 2021 · e8efeef · e8efeef
1 parent e53592c
commit e8efeef
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 2 deletions.
diff --git a/change/@microsoft-fast-components-b941cce6-aad9-473d-bc4e-0b03c92661e6.json b/change/@microsoft-fast-components-b941cce6-aad9-473d-bc4e-0b03c92661e6.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add function to check for separator, add example and update style for not href item",
+  "packageName": "@microsoft/fast-components",
+  "email": "khamu@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-foundation-efa3c97d-df28-4674-b07f-e81ff8d2b3b2.json b/change/@microsoft-fast-foundation-efa3c97d-df28-4674-b07f-e81ff8d2b3b2.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add function to check for separator, add example and update style for not href item",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "khamu@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-components/src/breadcrumb-item/breadcrumb-item.styles.ts b/packages/web-components/fast-components/src/breadcrumb-item/breadcrumb-item.styles.ts
@@ -28,6 +28,7 @@ export const BreadcrumbItemStyles = css`
     .listitem {
         display: flex;
         align-items: center;
+        width: max-content;
     }
 
     .separator {

diff --git a/packages/web-components/fast-components/src/breadcrumb/breadcrumb.stories.ts b/packages/web-components/fast-components/src/breadcrumb/breadcrumb.stories.ts
@@ -1,7 +1,32 @@
+import { STORY_RENDERED } from "@storybook/core-events";
+import addons from "@storybook/addons";
 import BreadcrumbTemplate from "./fixtures/base.html";
 import "../breadcrumb-item";
 import "./index";
 
+function addItem(): void {
+    const breadcrumbElement = document.getElementById("mybreadcrumb");
+    const items = breadcrumbElement?.querySelectorAll("fast-breadcrumb-item");
+
+    if (items !== undefined) {
+        const lastItem = items[items.length - 1];
+        const item: any = document.createElement("fast-breadcrumb-item");
+        item.setAttribute("href", "#");
+        item.textContent = `Breadcrumb item ${items.length + 1}`;
+
+        if (lastItem.parentNode !== null) {
+            lastItem.parentNode.insertBefore(item, lastItem.nextSibling);
+        }
+    }
+}
+
+addons.getChannel().addListener(STORY_RENDERED, (name: string) => {
+    if (name.toLowerCase() === "breadcrumb--breadcrumb") {
+        const button = document.getElementById("add-button") as HTMLElement;
+        button.addEventListener("click", addItem);
+    }
+});
+
 export default {
     title: "Breadcrumb",
 };

diff --git a/packages/web-components/fast-components/src/breadcrumb/fixtures/base.html b/packages/web-components/fast-components/src/breadcrumb/fixtures/base.html
@@ -174,3 +174,13 @@ <h2>With aria-current</h2>
     <fast-breadcrumb-item href="#">Breadcrumb item 2</fast-breadcrumb-item>
     <fast-breadcrumb-item href="#">Breadcrumb item 3</fast-breadcrumb-item>
 </fast-breadcrumb>
+
+<h2>Adding breadcrumb-items</h2>
+<fast-breadcrumb id="mybreadcrumb">
+    <fast-breadcrumb-item href="#">Breadcrumb item 1</fast-breadcrumb-item>
+    <fast-breadcrumb-item href="#">Breadcrumb item 2</fast-breadcrumb-item>
+    <fast-breadcrumb-item>Breadcrumb item 3</fast-breadcrumb-item>
+</fast-breadcrumb>
+<fast-button id="add-button" appearance="accent">
+    Add Breadcrumb item
+</fast-button>
diff --git a/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.ts b/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.ts
@@ -25,12 +25,17 @@ export class Breadcrumb extends FASTElement {
                 this.slottedBreadcrumbItems.length - 1
             ];
 
-            this.removeLastItemSeparator(lastNode);
+            this.setItemSeparator(lastNode);
             this.setLastItemAriaCurrent(lastNode);
         }
     }
 
-    private removeLastItemSeparator(lastNode: HTMLElement): void {
+    private setItemSeparator(lastNode: HTMLElement): void {
+        this.slottedBreadcrumbItems.forEach((item: HTMLElement) => {
+            if (item instanceof BreadcrumbItem) {
+                (item as BreadcrumbItem).separator = true;
+            }
+        });
         if (lastNode instanceof BreadcrumbItem) {
             (lastNode as BreadcrumbItem).separator = false;
         }