[EuiBreadcrumbs] Fix broken truncation for breadcrumbs that toggle po…

…povers (#7375)
elastic · Nov 20, 2023 · 16396c0 · 16396c0
1 parent ef5b92e
commit 16396c0
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 49 deletions.
diff --git a/changelogs/upcoming/7375.md b/changelogs/upcoming/7375.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed visual text truncation of `EuiBreadcrumb`s with `popoverContent`
diff --git 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

diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap
@@ -4,17 +4,20 @@ 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
-        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
@@ -39,19 +39,22 @@ 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 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"
           >
@@ -140,19 +143,22 @@ 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 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"
           >
@@ -323,19 +329,22 @@ 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 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"
           >
@@ -505,19 +514,22 @@ 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 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"
           >
@@ -605,19 +617,22 @@ 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 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"
           >
@@ -680,19 +695,22 @@ 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 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
@@ -80,6 +80,21 @@ 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};
+    `,
+    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`
       &:is(a):focus {

diff --git a/src/components/breadcrumbs/breadcrumb.tsx b/src/components/breadcrumbs/breadcrumb.tsx
@@ -162,29 +162,26 @@ 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 (
             <EuiPopover
               {...popoverProps}
               isOpen={isPopoverOpen}
               closePopover={() => setIsPopoverOpen(false)}
+              css={!isLastBreadcrumb && styles.euiBreadcrumb__popoverWrapper}
               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 +196,8 @@ export const EuiBreadcrumbContent: FunctionComponent<
         } else if (isInteractiveBreadcrumb) {
           return (
             <EuiLink
-              {...sharedProps}
+              {...baseProps}
+              {...styleProps}
               color={linkColor}
               onClick={onClick}
               href={href}
@@ -212,7 +210,7 @@ export const EuiBreadcrumbContent: FunctionComponent<
         } else {
           return (
             <EuiTextColor color={plainTextColor} cloneElement>
-              <span {...sharedProps} {...rest}>
+              <span {...baseProps} {...styleProps} {...rest}>
                 {text}
               </span>
             </EuiTextColor>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Bug fixes

		- Fixed visual text truncation of `EuiBreadcrumb`s with `popoverContent`