From 9ce57d2efb84130895a37e22e0fd7e5d713a9fa5 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 13 Jul 2021 11:21:36 -0400
Subject: [PATCH] feat(breadcrumbs): ionCollapsedClick event payload now
 contains references to collapsed breadcrumb elements (#23611)

resolves #23552
---
 .../breadcrumb/breadcrumb-interface.ts        |   1 +
 .../components/breadcrumbs/breadcrumbs.tsx    |   5 +-
 core/src/components/breadcrumbs/readme.md     | 102 +++++++++---------
 .../breadcrumbs/test/basic/index.html         |  59 +++++-----
 .../breadcrumbs/test/breadcrumbs.spec.ts      |  35 ++++++
 .../components/breadcrumbs/usage/angular.md   |  15 ++-
 .../breadcrumbs/usage/javascript.md           |  24 ++---
 .../src/components/breadcrumbs/usage/react.md |  20 ++--
 .../components/breadcrumbs/usage/stencil.md   |  24 ++---
 core/src/components/breadcrumbs/usage/vue.md  |  19 ++--
 10 files changed, 170 insertions(+), 134 deletions(-)
 create mode 100644 core/src/components/breadcrumbs/test/breadcrumbs.spec.ts

diff --git a/core/src/components/breadcrumb/breadcrumb-interface.ts b/core/src/components/breadcrumb/breadcrumb-interface.ts
index f8b3c0f29b..a0b45c1a84 100644
--- a/core/src/components/breadcrumb/breadcrumb-interface.ts
+++ b/core/src/components/breadcrumb/breadcrumb-interface.ts
@@ -1,3 +1,4 @@
 export interface BreadcrumbCollapsedClickEventDetail {
   ionShadowTarget?: HTMLElement;
+  collapsedBreadcrumbs?: HTMLIonBreadcrumbElement[];
 }
diff --git a/core/src/components/breadcrumbs/breadcrumbs.tsx b/core/src/components/breadcrumbs/breadcrumbs.tsx
index 94908cbb4e..a9d5a74890 100644
--- a/core/src/components/breadcrumbs/breadcrumbs.tsx
+++ b/core/src/components/breadcrumbs/breadcrumbs.tsx
@@ -55,7 +55,10 @@ export class Breadcrumbs implements ComponentInterface {
 
   @Listen('collapsedClick')
   onCollapsedClick(ev: CustomEvent) {
-    this.ionCollapsedClick.emit(ev.detail)
+    const breadcrumbs = this.getBreadcrumbs();
+    const collapsedBreadcrumbs = breadcrumbs.filter(breadcrumb => breadcrumb.collapsed);
+
+    this.ionCollapsedClick.emit({ ...ev.detail, collapsedBreadcrumbs });
   }
 
   @Watch('maxItems')
diff --git a/core/src/components/breadcrumbs/readme.md b/core/src/components/breadcrumbs/readme.md
index 705b71c3cc..55ca0c9d7d 100644
--- a/core/src/components/breadcrumbs/readme.md
+++ b/core/src/components/breadcrumbs/readme.md
@@ -349,6 +349,9 @@ export class BreadcrumbsExample {
   async presentPopover(ev: any) {
     const popover = await this.popoverController.create({
       component: PopoverComponent,
+      componentProps: {
+        collapsedBreadcrumbs: ev.detail.collapsedBreadcrumbs
+      },
       event: ev
     });
     await popover.present();
@@ -356,13 +359,23 @@ export class BreadcrumbsExample {
 }
 ```
 
+```html
+<ion-content>
+  <ion-list>
+    <ion-item *ngFor="let breadcrumb of collapsedBreadcrumbs" [href]="breadcrumb.href">
+      <ion-label>{{ breadcrumb.textContent }}</ion-label>
+    </ion-item>
+  </ion-list>
+</ion-content>
+```
 ```typescript
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'popover-component',
 })
 export class PopoverComponent {
+  @Input() collapsedBreadcrumbs: HTMLElement[] = [];
 
   constructor() {}
 
@@ -699,21 +712,18 @@ class ListPopover extends HTMLElement {
   }
 
   connectedCallback() {
+    let breadcrumbTemplate = ``;
+    this.collapsedBreadcrumbs.forEach(breadcrumb => {
+      breadcrumbTemplate += `
+        <ion-item href="${breadcrumb.href}">
+          <ion-label>${breadcrumb.textContent}</ion-label>
+        </ion-item>
+      `;
+    })
     this.innerHTML = `
       <ion-content>
         <ion-list>
-          <ion-item href="#">
-            <ion-label>Home</ion-label>
-          </ion-item>
-          <ion-item href="#electronics">
-            <ion-label>Electronics</ion-label>
-          </ion-item>
-          <ion-item href="#photography">
-            <ion-label>Photography</ion-label>
-          </ion-item>
-          <ion-item href="#cameras">
-            <ion-label>Cameras</ion-label>
-          </ion-item>
+          ${breadcrumbTemplate}
         </ion-list>
       </ion-content>
     `;
@@ -725,6 +735,9 @@ customElements.define('list-popover', ListPopover);
 async function presentPopover(ev) {
   const popover = Object.assign(document.createElement('ion-popover'), {
     component: 'list-popover',
+    componentProps: {
+      collapsedBreadcrumbs: ev.detail.collapsedBreadcrumbs
+    },
     event: ev
   });
   document.body.appendChild(popover);
@@ -1071,21 +1084,15 @@ import { IonBreadcrumb, IonBreadcrumbs, IonContent, IonItem, IonLabel, IonList,
 
 const PopoverList: React.FC<{
   onHide: () => void;
-}> = ({ onHide }) => (
+  collapsedBreadcrumbs: HTMLElement[]
+}> = ({ onHide, collapsedBreadcrumbs }) => (
   <IonContent>
     <IonList>
-      <IonItem href="#">
-        <IonLabel>Home</IonLabel>
-      </IonItem>
-      <IonItem href="#electronics">
-        <IonLabel>Electronics</IonLabel>
-      </IonItem>
-      <IonItem href="#photography">
-        <IonLabel>Photography</IonLabel>
-      </IonItem>
-      <IonItem href="#cameras">
-        <IonLabel>Cameras</IonLabel>
-      </IonItem>
+      {collapsedBreadcrumbs.map(breadcrumb => (
+        <IonItem href={breadcrumb.href}>
+          <IonLabel>{breadcrumb.textContent}</IonLabel>
+        </IonItem>
+      ))}
     </IonList>
   </IonContent>
 );
@@ -1510,6 +1517,9 @@ export class BreadcrumbsExample {
   async presentPopover(ev: any) {
     const popover = await popoverController.create({
       component: 'list-popover',
+      componentProps: {
+        collapsedBreadcrumbs: ev.detail.collapsedBreadcrumbs
+      },
       event: ev
     });
     await popover.present();
@@ -1543,29 +1553,24 @@ export class BreadcrumbsExample {
 ```
 
 ```tsx
-import { Component, h } from '@stencil/core';
+import { Component, h, Prop } from '@stencil/core';
 
 @Component({
   tag: 'list-popover',
   styleUrl: 'list-popover.css',
 })
 export class ListPopover {
+  @Prop() collapsedBreadcrumbs: HTMLElement[] = [];
+
   render() {
     return [
       <ion-content>
         <ion-list>
-          <ion-item href="#">
-            <ion-label>Home</ion-label>
-          </ion-item>
-          <ion-item href="#electronics">
-            <ion-label>Electronics</ion-label>
-          </ion-item>
-          <ion-item href="#photography">
-            <ion-label>Photography</ion-label>
-          </ion-item>
-          <ion-item href="#cameras">
-            <ion-label>Cameras</ion-label>
-          </ion-item>
+          {this.collapsedBreadcrumbs.map(breadcrumb => (
+            <ion-item href={breadcrumb.href}>
+              <ion-label>{breadcrumb.textContent}</ion-label>
+            </ion-item>
+          ))}
         </ion-list>
       </ion-content>
     ];
@@ -1990,6 +1995,9 @@ export default defineComponent({
     async presentPopover(ev: Event) {
       const popover = await popoverController.create({
         component: ListPopover,
+        componentProps: {
+          collapsedBreadcrumbs: ev.detail.collapsedBreadcrumbs
+        },
         event: ev
       });
       await popover.present();
@@ -2003,17 +2011,8 @@ export default defineComponent({
 <template>
   <ion-content>
     <ion-list>
-      <ion-item href="#">
-        <ion-label>Home</ion-label>
-      </ion-item>
-      <ion-item href="#electronics">
-        <ion-label>Electronics</ion-label>
-      </ion-item>
-      <ion-item href="#photography">
-        <ion-label>Photography</ion-label>
-      </ion-item>
-      <ion-item href="#cameras">
-        <ion-label>Cameras</ion-label>
+      <ion-item v-for="breadcrumb in $props.collapsedBreadcrumbs" :href="breadcrumb.href">
+        <ion-label>{{ breadcrumb.textContent }}</ion-label>
       </ion-item>
     </ion-list>
   </ion-content>
@@ -2025,6 +2024,9 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'ListPopover',
+  props: {
+    collapsedBreadcrumbs: { type: Array, default: [] }
+  },
   components: { IonContent, IonItem, IonLabel, IonList }
 });
 </script>
diff --git a/core/src/components/breadcrumbs/test/basic/index.html b/core/src/components/breadcrumbs/test/basic/index.html
index fb5220bc38..68141bf324 100644
--- a/core/src/components/breadcrumbs/test/basic/index.html
+++ b/core/src/components/breadcrumbs/test/basic/index.html
@@ -18,6 +18,13 @@
         <ion-title>Breadcrumbs - Basic</ion-title>
       </ion-toolbar>
       <ion-toolbar>
+        <ion-breadcrumbs max-items="2" items-before-collapse="1" items-after-collapse="1">
+          <ion-breadcrumb>First</ion-breadcrumb>
+          <ion-breadcrumb>Second</ion-breadcrumb>
+          <ion-breadcrumb>Third</ion-breadcrumb>
+          <ion-breadcrumb>Fourth</ion-breadcrumb>
+          <ion-breadcrumb>Fifth</ion-breadcrumb>
+        </ion-breadcrumbs>
         <ion-breadcrumbs>
           <ion-breadcrumb href="#">
             Home
@@ -281,27 +288,13 @@
       <h1>Breadcrumbs: collapsed / popover on click</h1>
 
       <ion-breadcrumbs id="popoverOnClick" max-items="4" items-before-collapse="0" items-after-collapse="3">
-        <ion-breadcrumb href="#">
-          Home
-        </ion-breadcrumb>
-        <ion-breadcrumb href="#electronics">
-          Cameras & Camcorders
-        </ion-breadcrumb>
-        <ion-breadcrumb href="#digital-camera-accessories">
-          Digital Camera Accessories
-        </ion-breadcrumb>
-        <ion-breadcrumb href="#camera-lenses">
-          Camera Lenses
-        </ion-breadcrumb>
-        <ion-breadcrumb href="#dslr-lenses">
-          DSLR Lenses
-        </ion-breadcrumb>
-        <ion-breadcrumb href="#prime-lenses">
-          Prime Lenses
-        </ion-breadcrumb>
-        <ion-breadcrumb>
-          Product Info
-        </ion-breadcrumb>
+        <ion-breadcrumb href="#">Home</ion-breadcrumb>
+        <ion-breadcrumb href="#electronics">Cameras & Camcorders</ion-breadcrumb>
+        <ion-breadcrumb href="#digital-camera-accessories">Digital Camera Accessories</ion-breadcrumb>
+        <ion-breadcrumb href="#camera-lenses">Camera Lenses</ion-breadcrumb>
+        <ion-breadcrumb href="#dslr-lenses">DSLR Lenses</ion-breadcrumb>
+        <ion-breadcrumb href="#prime-lenses">Prime Lenses</ion-breadcrumb>
+        <ion-breadcrumb>Product Info</ion-breadcrumb>
       </ion-breadcrumbs>
 
       <hr>
@@ -456,21 +449,20 @@
       }
 
       connectedCallback() {
+        let template = '';
+
+        this.collapsedBreadcrumbs.forEach(breadcrumb => {
+          template += `
+            <ion-item href="${breadcrumb.href}">
+              <ion-label>${breadcrumb.textContent}</ion-label>
+            </ion-item>
+          `;
+        });
+
         this.innerHTML = `
           <ion-content>
             <ion-list>
-              <ion-item href="#">
-                <ion-label>Home</ion-label>
-              </ion-item>
-              <ion-item href="#electronics">
-                <ion-label>Cameras & Camcorders</ion-label>
-              </ion-item>
-              <ion-item href="#digital-camera-accessories">
-                <ion-label>Digital Camera Accessories</ion-label>
-              </ion-item>
-              <ion-item href="#camera-lenses">
-                <ion-label>Camera Lenses</ion-label>
-              </ion-item>
+              ${template}
             </ion-list>
           </ion-content>
         `;
@@ -483,6 +475,7 @@
       console.log('present ev', ev);
       const popover = Object.assign(document.createElement('ion-popover'), {
         component: 'list-popover',
+        componentProps: ev.detail,
         event: ev,
       });
       document.body.appendChild(popover);
diff --git a/core/src/components/breadcrumbs/test/breadcrumbs.spec.ts b/core/src/components/breadcrumbs/test/breadcrumbs.spec.ts
new file mode 100644
index 0000000000..0035e07233
--- /dev/null
+++ b/core/src/components/breadcrumbs/test/breadcrumbs.spec.ts
@@ -0,0 +1,35 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { Breadcrumbs } from '../breadcrumbs.tsx';
+import { Breadcrumb } from '../../breadcrumb/breadcrumb.tsx';
+
+it('should correctly provide the collapsed breadcrumbs in the event payload', async () => {
+  const page = await newSpecPage({
+    components: [Breadcrumbs, Breadcrumb],
+    html: `
+      <ion-breadcrumbs max-items="2" items-before-collapse="1" items-after-collapse="1">
+        <ion-breadcrumb>First</ion-breadcrumb>
+        <ion-breadcrumb>Second</ion-breadcrumb>
+        <ion-breadcrumb>Third</ion-breadcrumb>
+        <ion-breadcrumb>Fourth</ion-breadcrumb>
+        <ion-breadcrumb>Fifth</ion-breadcrumb>
+      </ion-breadcrumbs>
+    `
+  });
+
+  const onCollapsedClick = jest.fn((ev) => ev);
+  const breadcrumbs = page.body.querySelector('ion-breadcrumbs');
+  const breadcrumb = page.body.querySelectorAll('ion-breadcrumb');
+
+  breadcrumbs.addEventListener('ionCollapsedClick', onCollapsedClick);
+
+  const event = new CustomEvent('collapsedClick');
+  breadcrumbs.dispatchEvent(event);
+
+  expect(onCollapsedClick).toHaveBeenCalledTimes(1);
+
+  const collapsedBreadcrumbs = onCollapsedClick.mock.calls[0][0].detail.collapsedBreadcrumbs;
+  expect(collapsedBreadcrumbs.length).toEqual(3);
+  expect(collapsedBreadcrumbs[0]).toBe(breadcrumb[1]);
+  expect(collapsedBreadcrumbs[1]).toBe(breadcrumb[2]);
+  expect(collapsedBreadcrumbs[2]).toBe(breadcrumb[3]);
+});
diff --git a/core/src/components/breadcrumbs/usage/angular.md b/core/src/components/breadcrumbs/usage/angular.md
index 0197fba6cf..571c25c7da 100644
--- a/core/src/components/breadcrumbs/usage/angular.md
+++ b/core/src/components/breadcrumbs/usage/angular.md
@@ -337,6 +337,9 @@ export class BreadcrumbsExample {
   async presentPopover(ev: any) {
     const popover = await this.popoverController.create({
       component: PopoverComponent,
+      componentProps: {
+        collapsedBreadcrumbs: ev.detail.collapsedBreadcrumbs
+      },
       event: ev
     });
     await popover.present();
@@ -344,13 +347,23 @@ export class BreadcrumbsExample {
 }
 ```
 
+```html
+<ion-content>
+  <ion-list>
+    <ion-item *ngFor="let breadcrumb of collapsedBreadcrumbs" [href]="breadcrumb.href">
+      <ion-label>{{ breadcrumb.textContent }}</ion-label>
+    </ion-item>
+  </ion-list>
+</ion-content>
+```
 ```typescript
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'popover-component',
 })
 export class PopoverComponent {
+  @Input() collapsedBreadcrumbs: HTMLElement[] = [];
 
   constructor() {}
 
diff --git a/core/src/components/breadcrumbs/usage/javascript.md b/core/src/components/breadcrumbs/usage/javascript.md
index 53e592d313..2d500725e7 100644
--- a/core/src/components/breadcrumbs/usage/javascript.md
+++ b/core/src/components/breadcrumbs/usage/javascript.md
@@ -325,21 +325,18 @@ class ListPopover extends HTMLElement {
   }
 
   connectedCallback() {
+    let breadcrumbTemplate = ``;
+    this.collapsedBreadcrumbs.forEach(breadcrumb => {
+      breadcrumbTemplate += `
+        <ion-item href="${breadcrumb.href}">
+          <ion-label>${breadcrumb.textContent}</ion-label>
+        </ion-item>
+      `;
+    })
     this.innerHTML = `
       <ion-content>
         <ion-list>
-          <ion-item href="#">
-            <ion-label>Home</ion-label>
-          </ion-item>
-          <ion-item href="#electronics">
-            <ion-label>Electronics</ion-label>
-          </ion-item>
-          <ion-item href="#photography">
-            <ion-label>Photography</ion-label>
-          </ion-item>
-          <ion-item href="#cameras">
-            <ion-label>Cameras</ion-label>
-          </ion-item>
+          ${breadcrumbTemplate}
         </ion-list>
       </ion-content>
     `;
@@ -351,6 +348,9 @@ customElements.define('list-popover', ListPopover);
 async function presentPopover(ev) {
   const popover = Object.assign(document.createElement('ion-popover'), {
     component: 'list-popover',
+    componentProps: {
+      collapsedBreadcrumbs: ev.detail.collapsedBreadcrumbs
+    },
     event: ev
   });
   document.body.appendChild(popover);
diff --git a/core/src/components/breadcrumbs/usage/react.md b/core/src/components/breadcrumbs/usage/react.md
index 11683e065f..ff242a3c1d 100644
--- a/core/src/components/breadcrumbs/usage/react.md
+++ b/core/src/components/breadcrumbs/usage/react.md
@@ -333,21 +333,15 @@ import { IonBreadcrumb, IonBreadcrumbs, IonContent, IonItem, IonLabel, IonList,
 
 const PopoverList: React.FC<{
   onHide: () => void;
-}> = ({ onHide }) => (
+  collapsedBreadcrumbs: HTMLElement[]
+}> = ({ onHide, collapsedBreadcrumbs }) => (
   <IonContent>
     <IonList>
-      <IonItem href="#">
-        <IonLabel>Home</IonLabel>
-      </IonItem>
-      <IonItem href="#electronics">
-        <IonLabel>Electronics</IonLabel>
-      </IonItem>
-      <IonItem href="#photography">
-        <IonLabel>Photography</IonLabel>
-      </IonItem>
-      <IonItem href="#cameras">
-        <IonLabel>Cameras</IonLabel>
-      </IonItem>
+      {collapsedBreadcrumbs.map(breadcrumb => (
+        <IonItem href={breadcrumb.href}>
+          <IonLabel>{breadcrumb.textContent}</IonLabel>
+        </IonItem>
+      ))}
     </IonList>
   </IonContent>
 );
diff --git a/core/src/components/breadcrumbs/usage/stencil.md b/core/src/components/breadcrumbs/usage/stencil.md
index 7ff7267d19..f14e6a10eb 100644
--- a/core/src/components/breadcrumbs/usage/stencil.md
+++ b/core/src/components/breadcrumbs/usage/stencil.md
@@ -387,6 +387,9 @@ export class BreadcrumbsExample {
   async presentPopover(ev: any) {
     const popover = await popoverController.create({
       component: 'list-popover',
+      componentProps: {
+        collapsedBreadcrumbs: ev.detail.collapsedBreadcrumbs
+      },
       event: ev
     });
     await popover.present();
@@ -420,29 +423,24 @@ export class BreadcrumbsExample {
 ```
 
 ```tsx
-import { Component, h } from '@stencil/core';
+import { Component, h, Prop } from '@stencil/core';
 
 @Component({
   tag: 'list-popover',
   styleUrl: 'list-popover.css',
 })
 export class ListPopover {
+  @Prop() collapsedBreadcrumbs: HTMLElement[] = [];
+
   render() {
     return [
       <ion-content>
         <ion-list>
-          <ion-item href="#">
-            <ion-label>Home</ion-label>
-          </ion-item>
-          <ion-item href="#electronics">
-            <ion-label>Electronics</ion-label>
-          </ion-item>
-          <ion-item href="#photography">
-            <ion-label>Photography</ion-label>
-          </ion-item>
-          <ion-item href="#cameras">
-            <ion-label>Cameras</ion-label>
-          </ion-item>
+          {this.collapsedBreadcrumbs.map(breadcrumb => (
+            <ion-item href={breadcrumb.href}>
+              <ion-label>{breadcrumb.textContent}</ion-label>
+            </ion-item>
+          ))}
         </ion-list>
       </ion-content>
     ];
diff --git a/core/src/components/breadcrumbs/usage/vue.md b/core/src/components/breadcrumbs/usage/vue.md
index 07c818dadb..9cf1f66489 100644
--- a/core/src/components/breadcrumbs/usage/vue.md
+++ b/core/src/components/breadcrumbs/usage/vue.md
@@ -412,6 +412,9 @@ export default defineComponent({
     async presentPopover(ev: Event) {
       const popover = await popoverController.create({
         component: ListPopover,
+        componentProps: {
+          collapsedBreadcrumbs: ev.detail.collapsedBreadcrumbs
+        },
         event: ev
       });
       await popover.present();
@@ -425,17 +428,8 @@ export default defineComponent({
 <template>
   <ion-content>
     <ion-list>
-      <ion-item href="#">
-        <ion-label>Home</ion-label>
-      </ion-item>
-      <ion-item href="#electronics">
-        <ion-label>Electronics</ion-label>
-      </ion-item>
-      <ion-item href="#photography">
-        <ion-label>Photography</ion-label>
-      </ion-item>
-      <ion-item href="#cameras">
-        <ion-label>Cameras</ion-label>
+      <ion-item v-for="breadcrumb in $props.collapsedBreadcrumbs" :href="breadcrumb.href">
+        <ion-label>{{ breadcrumb.textContent }}</ion-label>
       </ion-item>
     </ion-list>
   </ion-content>
@@ -447,6 +441,9 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'ListPopover',
+  props: {
+    collapsedBreadcrumbs: { type: Array, default: [] }
+  },
   components: { IonContent, IonItem, IonLabel, IonList }
 });
 </script>