From db527a2e3c3c03d57093ae228121b092af0a49ba Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Sun, 19 Nov 2023 22:37:32 -0800
Subject: [PATCH 1/4] [docs] Update popover example with truncating text

---
 src-docs/src/views/breadcrumbs/popover_content.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src-docs/src/views/breadcrumbs/popover_content.tsx b/src-docs/src/views/breadcrumbs/popover_content.tsx
index e148ec85066..f5ab29a0198 100644
--- a/src-docs/src/views/breadcrumbs/popover_content.tsx
+++ b/src-docs/src/views/breadcrumbs/popover_content.tsx
@@ -33,7 +33,7 @@ export default () => {
       prepend: <EuiAvatar type="space" size="s" name="Michael" />,
     },
     {
-      label: "Dwight's space",
+      label: "Assistant Manager Dwight's space",
       prepend: <EuiAvatar type="space" size="s" name="Dwight" />,
     },
   ]);
@@ -75,10 +75,10 @@ export default () => {
       popoverProps: { panelPaddingSize: 'none' },
     },
     {
-      text: 'My space',
+      text: spaces.find((space) => space.checked === 'on')!.label,
       popoverContent: (
         <EuiSelectable
-          singleSelection
+          singleSelection="always"
           options={spaces}
           onChange={(newOptions) => setSpaces(newOptions)}
           searchable

From e8b9a5f09fb69fa63304a32edc3f74f3bc573aa4 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Sun, 19 Nov 2023 22:41:05 -0800
Subject: [PATCH 2/4] Seperate text truncation and dropdown arrow

- requires shifting out some props
---
 .../__snapshots__/breadcrumb.test.tsx.snap    | 11 ++--
 .../__snapshots__/breadcrumbs.test.tsx.snap   | 66 ++++++++++++-------
 .../breadcrumbs/breadcrumb.styles.ts          |  8 +++
 src/components/breadcrumbs/breadcrumb.tsx     | 19 +++---
 4 files changed, 65 insertions(+), 39 deletions(-)

diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap
index 0fb3af824a7..5ef137b65ef 100644
--- a/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap
+++ b/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap
@@ -8,13 +8,16 @@ exports[`EuiBreadcrumbContent renders breadcrumbs with \`popoverContent\` with p
       data-test-subj="popover"
     >
       <button
-        class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-page"
+        class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
         data-test-subj="popoverToggle"
-        title="Toggles a popover  - Clicking this button will toggle a popover dialog."
+        title="Toggles a popover - Clicking this button will toggle a popover dialog."
         type="button"
       >
-        Toggles a popover
-         
+        <span
+          class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
+        >
+          Toggles a popover
+        </span>
         <span
           data-euiicon-type="arrowDown"
         >
diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap
index 5cdb3484794..b061b8432d6 100644
--- a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap
+++ b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap
@@ -42,16 +42,19 @@ exports[`EuiBreadcrumbs is rendered 1`] = `
         class="euiPopover emotion-euiPopover-inline-block"
       >
         <button
-          class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-page"
+          class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
           title="See collapsed breadcrumbs"
           type="button"
         >
           <span
-            aria-label="See collapsed breadcrumbs"
+            class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
           >
-            …
+            <span
+              aria-label="See collapsed breadcrumbs"
+            >
+              …
+            </span>
           </span>
-           
           <span
             data-euiicon-type="arrowDown"
           >
@@ -143,16 +146,19 @@ exports[`EuiBreadcrumbs is rendered with final item as link 1`] = `
         class="euiPopover emotion-euiPopover-inline-block"
       >
         <button
-          class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-page"
+          class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
           title="See collapsed breadcrumbs"
           type="button"
         >
           <span
-            aria-label="See collapsed breadcrumbs"
+            class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
           >
-            …
+            <span
+              aria-label="See collapsed breadcrumbs"
+            >
+              …
+            </span>
           </span>
-           
           <span
             data-euiicon-type="arrowDown"
           >
@@ -326,16 +332,19 @@ exports[`EuiBreadcrumbs props max renders 1 item 1`] = `
         class="euiPopover emotion-euiPopover-inline-block"
       >
         <button
-          class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-page"
+          class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
           title="See collapsed breadcrumbs"
           type="button"
         >
           <span
-            aria-label="See collapsed breadcrumbs"
+            class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
           >
-            …
+            <span
+              aria-label="See collapsed breadcrumbs"
+            >
+              …
+            </span>
           </span>
-           
           <span
             data-euiicon-type="arrowDown"
           >
@@ -508,16 +517,19 @@ exports[`EuiBreadcrumbs props responsive is rendered 1`] = `
         class="euiPopover emotion-euiPopover-inline-block"
       >
         <button
-          class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-page"
+          class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
           title="See collapsed breadcrumbs"
           type="button"
         >
           <span
-            aria-label="See collapsed breadcrumbs"
+            class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
           >
-            …
+            <span
+              aria-label="See collapsed breadcrumbs"
+            >
+              …
+            </span>
           </span>
-           
           <span
             data-euiicon-type="arrowDown"
           >
@@ -608,16 +620,19 @@ exports[`EuiBreadcrumbs props responsive is rendered as false 1`] = `
         class="euiPopover emotion-euiPopover-inline-block"
       >
         <button
-          class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-page"
+          class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
           title="See collapsed breadcrumbs"
           type="button"
         >
           <span
-            aria-label="See collapsed breadcrumbs"
+            class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
           >
-            …
+            <span
+              aria-label="See collapsed breadcrumbs"
+            >
+              …
+            </span>
           </span>
-           
           <span
             data-euiicon-type="arrowDown"
           >
@@ -683,16 +698,19 @@ exports[`EuiBreadcrumbs props responsive is rendered with custom breakpoints 1`]
         class="euiPopover emotion-euiPopover-inline-block"
       >
         <button
-          class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-page"
+          class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
           title="See collapsed breadcrumbs"
           type="button"
         >
           <span
-            aria-label="See collapsed breadcrumbs"
+            class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
           >
-            …
+            <span
+              aria-label="See collapsed breadcrumbs"
+            >
+              …
+            </span>
           </span>
-           
           <span
             data-euiicon-type="arrowDown"
           >
diff --git a/src/components/breadcrumbs/breadcrumb.styles.ts b/src/components/breadcrumbs/breadcrumb.styles.ts
index a9a9b291ba1..8870b6e1e6b 100644
--- a/src/components/breadcrumbs/breadcrumb.styles.ts
+++ b/src/components/breadcrumbs/breadcrumb.styles.ts
@@ -80,6 +80,14 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
       ${euiTextTruncate('none')}
     `,
 
+    // Popover styles
+    euiBreadcrumb__popoverButton: css`
+      max-inline-size: 100%;
+      display: inline-flex;
+      align-items: center;
+      gap: ${euiTheme.size.xs};
+    `,
+
     // Types
     page: css`
       &:is(a):focus {
diff --git a/src/components/breadcrumbs/breadcrumb.tsx b/src/components/breadcrumbs/breadcrumb.tsx
index 2d5d927c4e5..fc393f01982 100644
--- a/src/components/breadcrumbs/breadcrumb.tsx
+++ b/src/components/breadcrumbs/breadcrumb.tsx
@@ -162,13 +162,8 @@ export const EuiBreadcrumbContent: FunctionComponent<
       {(ref, innerText) => {
         const title = innerText === '' ? undefined : innerText;
 
-        const sharedProps = {
-          ref,
-          title,
-          'aria-current': ariaCurrent,
-          className: classes,
-          css: cssStyles,
-        };
+        const baseProps = { ref, title, 'aria-current': ariaCurrent };
+        const styleProps = { className: classes, css: cssStyles };
 
         if (isPopoverBreadcrumb) {
           return (
@@ -178,13 +173,14 @@ export const EuiBreadcrumbContent: FunctionComponent<
               closePopover={() => setIsPopoverOpen(false)}
               button={
                 <EuiLink
-                  {...sharedProps}
+                  {...baseProps}
                   color={linkColor}
+                  css={styles.euiBreadcrumb__popoverButton}
                   // Avoid passing href and onClick - should only toggle the popover
                   onClick={() => setIsPopoverOpen((isOpen) => !isOpen)}
                   {...rest}
                 >
-                  {text}{' '}
+                  <span {...styleProps}>{text}</span>
                   <EuiIcon
                     type="arrowDown"
                     size="s"
@@ -199,7 +195,8 @@ export const EuiBreadcrumbContent: FunctionComponent<
         } else if (isInteractiveBreadcrumb) {
           return (
             <EuiLink
-              {...sharedProps}
+              {...baseProps}
+              {...styleProps}
               color={linkColor}
               onClick={onClick}
               href={href}
@@ -212,7 +209,7 @@ export const EuiBreadcrumbContent: FunctionComponent<
         } else {
           return (
             <EuiTextColor color={plainTextColor} cloneElement>
-              <span {...sharedProps} {...rest}>
+              <span {...baseProps} {...styleProps} {...rest}>
                 {text}
               </span>
             </EuiTextColor>

From a9cf1e4ce5facc425c6eefa130e5254eb720f901 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Sun, 19 Nov 2023 22:46:11 -0800
Subject: [PATCH 3/4] Fix responsive edge case - where separators can disappear
 on small screens/containers

---
 .../__snapshots__/breadcrumb.test.tsx.snap           |  2 +-
 .../__snapshots__/breadcrumbs.test.tsx.snap          | 12 ++++++------
 src/components/breadcrumbs/breadcrumb.styles.ts      |  7 +++++++
 src/components/breadcrumbs/breadcrumb.tsx            |  1 +
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap
index 5ef137b65ef..5a803bb40ce 100644
--- a/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap
+++ b/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`EuiBreadcrumbContent renders breadcrumbs with \`popoverContent\` with p
 <body>
   <div>
     <div
-      class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
+      class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
       data-test-subj="popover"
     >
       <button
diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap
index b061b8432d6..27252750a54 100644
--- a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap
+++ b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap
@@ -39,7 +39,7 @@ exports[`EuiBreadcrumbs is rendered 1`] = `
       data-test-subj="euiBreadcrumb"
     >
       <div
-        class="euiPopover emotion-euiPopover-inline-block"
+        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
       >
         <button
           class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
@@ -143,7 +143,7 @@ exports[`EuiBreadcrumbs is rendered with final item as link 1`] = `
       data-test-subj="euiBreadcrumb"
     >
       <div
-        class="euiPopover emotion-euiPopover-inline-block"
+        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
       >
         <button
           class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
@@ -329,7 +329,7 @@ exports[`EuiBreadcrumbs props max renders 1 item 1`] = `
       data-test-subj="euiBreadcrumb"
     >
       <div
-        class="euiPopover emotion-euiPopover-inline-block"
+        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
       >
         <button
           class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
@@ -514,7 +514,7 @@ exports[`EuiBreadcrumbs props responsive is rendered 1`] = `
       data-test-subj="euiBreadcrumb"
     >
       <div
-        class="euiPopover emotion-euiPopover-inline-block"
+        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
       >
         <button
           class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
@@ -617,7 +617,7 @@ exports[`EuiBreadcrumbs props responsive is rendered as false 1`] = `
       data-test-subj="euiBreadcrumb"
     >
       <div
-        class="euiPopover emotion-euiPopover-inline-block"
+        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
       >
         <button
           class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
@@ -695,7 +695,7 @@ exports[`EuiBreadcrumbs props responsive is rendered with custom breakpoints 1`]
       data-test-subj="euiBreadcrumb"
     >
       <div
-        class="euiPopover emotion-euiPopover-inline-block"
+        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
       >
         <button
           class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
diff --git a/src/components/breadcrumbs/breadcrumb.styles.ts b/src/components/breadcrumbs/breadcrumb.styles.ts
index 8870b6e1e6b..2950c4951e9 100644
--- a/src/components/breadcrumbs/breadcrumb.styles.ts
+++ b/src/components/breadcrumbs/breadcrumb.styles.ts
@@ -87,6 +87,13 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
       align-items: center;
       gap: ${euiTheme.size.xs};
     `,
+    euiBreadcrumb__popoverWrapper: css`
+      /* At small container widths, the popover anchor needs to leave room for the breadcrumb separator,
+         which is weird to get an exact width for because it's transformed at an angle */
+      max-inline-size: calc(
+        100% - ${mathWithUnits(euiTheme.size.base, (x) => x + 1)}
+      );
+    `,
 
     // Types
     page: css`
diff --git a/src/components/breadcrumbs/breadcrumb.tsx b/src/components/breadcrumbs/breadcrumb.tsx
index fc393f01982..5730e219dc3 100644
--- a/src/components/breadcrumbs/breadcrumb.tsx
+++ b/src/components/breadcrumbs/breadcrumb.tsx
@@ -171,6 +171,7 @@ export const EuiBreadcrumbContent: FunctionComponent<
               {...popoverProps}
               isOpen={isPopoverOpen}
               closePopover={() => setIsPopoverOpen(false)}
+              css={!isLastBreadcrumb && styles.euiBreadcrumb__popoverWrapper}
               button={
                 <EuiLink
                   {...baseProps}

From 21ec763bf07fc2e456dc8c63792afd2529b4ca46 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Sun, 19 Nov 2023 23:09:06 -0800
Subject: [PATCH 4/4] changelog

---
 changelogs/upcoming/7375.md | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 changelogs/upcoming/7375.md

diff --git a/changelogs/upcoming/7375.md b/changelogs/upcoming/7375.md
new file mode 100644
index 00000000000..63611add618
--- /dev/null
+++ b/changelogs/upcoming/7375.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed visual text truncation of `EuiBreadcrumb`s with `popoverContent`