Seperate text truncation and dropdown arrow

- requires shifting out some props
elastic · Nov 20, 2023 · e8b9a5f · e8b9a5f
1 parent db527a2
commit e8b9a5f
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 39 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>