From 233ae6a5dfb6d190579b891f8c727e522a101de4 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Fri, 30 Sep 2022 11:57:31 -0700
Subject: [PATCH 1/5] [REVERT ME] Local reproduction of last breadcrumb issue

- not respecting `truncate: true` on child breadcrumb when it should
---
 src-docs/src/views/breadcrumbs/truncate_single.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src-docs/src/views/breadcrumbs/truncate_single.js b/src-docs/src/views/breadcrumbs/truncate_single.js
index 5aa30b1804b..6eb93162279 100644
--- a/src-docs/src/views/breadcrumbs/truncate_single.js
+++ b/src-docs/src/views/breadcrumbs/truncate_single.js
@@ -37,6 +37,7 @@ export default () => {
     {
       text:
         'Nebulosa subspecies is also a real mouthful, especially for creatures without mouths',
+      truncate: true,
     },
   ];
 

From 1d1a64688a133c7c856eee85263d933b0f9275af Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Fri, 30 Sep 2022 12:04:24 -0700
Subject: [PATCH 2/5] Fix last EuiBreadcrumb in array to respect `truncate:
 true` or `false` over parent `truncate`

+ minor opinioted change: don't allow `breadcrumb` objs coming in from consumers to override internal props coming in from EuiBreadcrumbs parent
---
 src/components/breadcrumbs/breadcrumb.tsx  | 6 ++++--
 src/components/breadcrumbs/breadcrumbs.tsx | 9 ++++++---
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/breadcrumbs/breadcrumb.tsx b/src/components/breadcrumbs/breadcrumb.tsx
index 895bc70966a..84a5c8c5941 100644
--- a/src/components/breadcrumbs/breadcrumb.tsx
+++ b/src/components/breadcrumbs/breadcrumb.tsx
@@ -63,6 +63,7 @@ type _EuiBreadcrumbProps = {
   isLastBreadcrumb?: boolean;
   isOnlyBreadcrumb?: boolean;
   highlightLastBreadcrumb?: boolean;
+  truncateLastBreadcrumb?: boolean;
 } & Pick<EuiBreadcrumbProps, 'truncate'>;
 
 export const EuiBreadcrumb: FunctionComponent<
@@ -100,6 +101,7 @@ export const EuiBreadcrumbContent: FunctionComponent<
   isLastBreadcrumb,
   isOnlyBreadcrumb,
   highlightLastBreadcrumb,
+  truncateLastBreadcrumb,
   ...rest
 }) => {
   const classes = classNames('euiBreadcrumb__content', className);
@@ -109,8 +111,8 @@ export const EuiBreadcrumbContent: FunctionComponent<
   const cssStyles = [
     styles.euiBreadcrumb__content,
     styles[type],
-    truncate &&
-      (isLastBreadcrumb ? styles.isTruncatedLast : styles.isTruncated),
+    truncate && !truncateLastBreadcrumb && styles.isTruncated,
+    truncateLastBreadcrumb && styles.isTruncatedLast,
   ];
   if (type === 'application') {
     if (isOnlyBreadcrumb) {
diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx
index e2c978befa4..71d381982cd 100644
--- a/src/components/breadcrumbs/breadcrumbs.tsx
+++ b/src/components/breadcrumbs/breadcrumbs.tsx
@@ -120,7 +120,7 @@ export const EuiBreadcrumbs: FunctionComponent<EuiBreadcrumbsProps> = ({
         const isLastBreadcrumb = index === visibleBreadcrumbs.length - 1;
         const isOnlyBreadcrumb = visibleBreadcrumbs.length === 1;
 
-        const sharedProps = { type, truncate };
+        const sharedProps = { type, truncate: breadcrumb.truncate ?? truncate };
 
         return breadcrumb.isCollapsedButton ? (
           <EuiBreadcrumbCollapsed
@@ -139,14 +139,17 @@ export const EuiBreadcrumbs: FunctionComponent<EuiBreadcrumbsProps> = ({
         ) : (
           <EuiBreadcrumb key={index} {...sharedProps}>
             <EuiBreadcrumbContent
+              {...breadcrumb}
+              {...sharedProps}
               isFirstBreadcrumb={isFirstBreadcrumb}
               isLastBreadcrumb={isLastBreadcrumb}
               isOnlyBreadcrumb={isOnlyBreadcrumb}
               highlightLastBreadcrumb={
                 isLastBreadcrumb && lastBreadcrumbIsCurrentPage
               }
-              {...sharedProps}
-              {...breadcrumb}
+              truncateLastBreadcrumb={
+                isLastBreadcrumb && truncate && breadcrumb.truncate == null
+              }
             />
           </EuiBreadcrumb>
         );

From dc1eeea5facb6d1646a1d00caab2b2e4f524a42c Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Fri, 30 Sep 2022 12:10:35 -0700
Subject: [PATCH 3/5] write a bunch of unit tests

---
 .../__snapshots__/breadcrumbs.test.tsx.snap   |  63 +----------
 .../breadcrumbs/breadcrumbs.test.tsx          | 106 ++++++++++++++++--
 2 files changed, 99 insertions(+), 70 deletions(-)

diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap
index 0796f578cdc..be1f13f5f1e 100644
--- a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap
+++ b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap
@@ -629,7 +629,7 @@ exports[`EuiBreadcrumbs props responsive is rendered with custom breakpoints 1`]
 </nav>
 `;
 
-exports[`EuiBreadcrumbs props truncate as false is rendered 1`] = `
+exports[`EuiBreadcrumbs truncation setting truncate on breadcrumbs parents cascades down to all children 1`] = `
 <nav
   aria-label="Breadcrumbs"
   class="euiBreadcrumbs"
@@ -637,72 +637,15 @@ exports[`EuiBreadcrumbs props truncate as false is rendered 1`] = `
   <ol
     class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list"
   >
-    <li
-      class="euiBreadcrumb emotion-euiBreadcrumb-page"
-    >
-      <a
-        class="euiLink euiBreadcrumb__content customClass emotion-euiLink-primary-euiBreadcrumb__content-page"
-        data-test-subj="breadcrumbsAnimals"
-        href="#"
-        rel="noreferrer"
-      >
-        Animals
-      </a>
-    </li>
     <li
       class="euiBreadcrumb emotion-euiBreadcrumb-page"
     >
       <span
         class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page-euiTextColor-subdued"
       >
-        Metazoans
+        A
       </span>
     </li>
-    <li
-      class="euiBreadcrumb emotion-euiBreadcrumb-page-isCollapsed"
-    >
-      <div
-        class="euiPopover emotion-euiPopover"
-      >
-        <div
-          class="euiPopover__anchor css-16vtueo-render"
-        >
-          <button
-            aria-label="See collapsed breadcrumbs"
-            class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-page"
-            title="See collapsed breadcrumbs"
-            type="button"
-          >
-            … 
-            <span
-              data-euiicon-type="arrowDown"
-            />
-          </button>
-        </div>
-      </div>
-    </li>
-    <li
-      class="euiBreadcrumb emotion-euiBreadcrumb-page"
-    >
-      <button
-        class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-page"
-        type="button"
-      >
-        Reptiles
-      </button>
-    </li>
-    <li
-      class="euiBreadcrumb emotion-euiBreadcrumb-page"
-    >
-      <a
-        class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-page-isTruncated"
-        href="#"
-        rel="noreferrer"
-        title="Boa constrictor has an error"
-      >
-        Boa constrictor
-      </a>
-    </li>
     <li
       class="euiBreadcrumb emotion-euiBreadcrumb-page"
     >
@@ -710,7 +653,7 @@ exports[`EuiBreadcrumbs props truncate as false is rendered 1`] = `
         aria-current="page"
         class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page-euiTextColor-default"
       >
-        Edit
+        B
       </span>
     </li>
   </ol>
diff --git a/src/components/breadcrumbs/breadcrumbs.test.tsx b/src/components/breadcrumbs/breadcrumbs.test.tsx
index d66dc712f8f..e068283cb1c 100644
--- a/src/components/breadcrumbs/breadcrumbs.test.tsx
+++ b/src/components/breadcrumbs/breadcrumbs.test.tsx
@@ -8,7 +8,7 @@
 
 import React from 'react';
 import { render } from 'enzyme';
-import { requiredProps } from '../../test';
+import { requiredProps, replaceEmotionPrefix } from '../../test';
 
 import { EuiBreadcrumbs, EuiBreadcrumb } from './';
 
@@ -74,6 +74,101 @@ describe('EuiBreadcrumbs', () => {
     expect(component).toMatchSnapshot();
   });
 
+  describe('truncation', () => {
+    test('setting truncate on breadcrumbs parents cascades down to all children', () => {
+      const component = render(
+        <EuiBreadcrumbs
+          breadcrumbs={[{ text: 'A' }, { text: 'B' }]}
+          truncate={false}
+        />
+      );
+      expect(component).toMatchSnapshot();
+    });
+
+    const getBreadcrumbClass = (component: Cheerio, dataTestSubj: string) =>
+      replaceEmotionPrefix(
+        component.find(`[data-test-subj=${dataTestSubj}]`).attr('class')
+      );
+
+    test('child breadcrumbs can override truncate set on parent breadcrumbs', () => {
+      const component = render(
+        <>
+          <EuiBreadcrumbs
+            breadcrumbs={[
+              { text: 'A', 'data-test-subj': 'A', truncate: false },
+              { text: 'B', 'data-test-subj': 'B' },
+            ]}
+            truncate
+          />
+          <EuiBreadcrumbs
+            breadcrumbs={[
+              { text: 'C', 'data-test-subj': 'C', truncate: true },
+              { text: 'D', 'data-test-subj': 'D' },
+            ]}
+            truncate={false}
+          />
+        </>
+      );
+      expect(getBreadcrumbClass(component, 'A')).toEqual(
+        'emotion-euiBreadcrumb__content-page-euiTextColor-subdued'
+      );
+      expect(getBreadcrumbClass(component, 'C')).toEqual(
+        'emotion-euiBreadcrumb__content-page-isTruncated-euiTextColor-subdued'
+      );
+    });
+
+    describe('last breadcrumb', () => {
+      describe('if the parent truncate is true and the last breadcrumb does not have its own truncate property', () => {
+        it('sets a isTruncatedLast style that allows the last breadcrumb to occupy the remaining width of the breadcrumbs line', () => {
+          const component = render(
+            <EuiBreadcrumbs
+              breadcrumbs={[
+                { text: 'A' },
+                { text: 'B', 'data-test-subj': 'last' },
+              ]}
+              truncate
+            />
+          );
+          expect(getBreadcrumbClass(component, 'last')).toEqual(
+            'emotion-euiBreadcrumb__content-page-isTruncatedLast-euiTextColor-default'
+          );
+        });
+      });
+
+      describe('if the last breadcrumb has its own truncate property', () => {
+        it('uses the normal isTruncated if truncate is true', () => {
+          const component = render(
+            <EuiBreadcrumbs
+              breadcrumbs={[
+                { text: 'A' },
+                { text: 'B', 'data-test-subj': 'last', truncate: true },
+              ]}
+              truncate
+            />
+          );
+          expect(getBreadcrumbClass(component, 'last')).toEqual(
+            'emotion-euiBreadcrumb__content-page-isTruncated-euiTextColor-default'
+          );
+        });
+
+        it('does not set any truncation classes if truncate is false', () => {
+          const component = render(
+            <EuiBreadcrumbs
+              breadcrumbs={[
+                { text: 'A' },
+                { text: 'B', 'data-test-subj': 'last', truncate: false },
+              ]}
+              truncate
+            />
+          );
+          expect(getBreadcrumbClass(component, 'last')).toEqual(
+            'emotion-euiBreadcrumb__content-page-euiTextColor-default'
+          );
+        });
+      });
+    });
+  });
+
   describe('props', () => {
     describe('responsive', () => {
       test('is rendered', () => {
@@ -101,15 +196,6 @@ describe('EuiBreadcrumbs', () => {
       });
     });
 
-    describe('truncate as false', () => {
-      test('is rendered', () => {
-        const component = render(
-          <EuiBreadcrumbs breadcrumbs={breadcrumbs} truncate={false} />
-        );
-        expect(component).toMatchSnapshot();
-      });
-    });
-
     describe('max', () => {
       test('renders 1 item', () => {
         const component = render(

From 076e7fd5e021685da2457045a7012920cb032ada Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Fri, 30 Sep 2022 12:33:48 -0700
Subject: [PATCH 4/5] changelog

---
 upcoming_changelogs/6280.md | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 upcoming_changelogs/6280.md

diff --git a/upcoming_changelogs/6280.md b/upcoming_changelogs/6280.md
new file mode 100644
index 00000000000..459b804513a
--- /dev/null
+++ b/upcoming_changelogs/6280.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed the last breadcrumb in `EuiBreadcrumbs`'s `breadcrumbs` array not respecting `truncate` overrides

From 896d90549c10634ebf1142dd870fcaa4b869a41d Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Fri, 30 Sep 2022 14:20:39 -0700
Subject: [PATCH 5/5] Revert "[REVERT ME] Local reproduction of last breadcrumb
 issue"

This reverts commit 233ae6a5dfb6d190579b891f8c727e522a101de4.
---
 src-docs/src/views/breadcrumbs/truncate_single.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src-docs/src/views/breadcrumbs/truncate_single.js b/src-docs/src/views/breadcrumbs/truncate_single.js
index 6eb93162279..5aa30b1804b 100644
--- a/src-docs/src/views/breadcrumbs/truncate_single.js
+++ b/src-docs/src/views/breadcrumbs/truncate_single.js
@@ -37,7 +37,6 @@ export default () => {
     {
       text:
         'Nebulosa subspecies is also a real mouthful, especially for creatures without mouths',
-      truncate: true,
     },
   ];