Fix responsive edge case

- where separators can disappear on small screens/containers
elastic · Nov 20, 2023 · a9cf1e4 · a9cf1e4
1 parent e8b9a5f
commit a9cf1e4
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -171,6 +171,7 @@ export const EuiBreadcrumbContent: FunctionComponent<
               {...popoverProps}
               isOpen={isPopoverOpen}
               closePopover={() => setIsPopoverOpen(false)}
+              css={!isLastBreadcrumb && styles.euiBreadcrumb__popoverWrapper}
               button={
                 <EuiLink
                   {...baseProps}
-Original file line number
+Diff line change
@@ Expand Up @@
     <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
@@ Expand Down @@