[EuiBreadcrumb] Fix styling on application types with popovers + pe…

…rf improvements (#7580)
elastic · Mar 18, 2024 · 0f3609a · 0f3609a
1 parent 9f9a6b2
commit 0f3609a
Show file tree

Hide file tree

Showing 17 changed files with 839 additions and 577 deletions.
diff --git a/changelogs/upcoming/7580.md b/changelogs/upcoming/7580.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed a visual bug with `EuiHeaderBreadcrumbs` with popovers
diff --git a/src/components/breadcrumbs/__snapshots__/_breadcrumb_content.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/_breadcrumb_content.test.tsx.snap
@@ -0,0 +1,104 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiBreadcrumbContent breadcrumbs with popovers renders with \`popoverContent\` 1`] = `
+<body>
+  <div>
+    <div
+      class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper-page"
+      data-test-subj="popover"
+    >
+      <button
+        class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-page"
+        data-test-subj="popoverToggle"
+        title="Toggles a popover - Clicking this button will toggle a popover dialog."
+        type="button"
+      >
+        <span
+          class="emotion-euiBreadcrumb__popoverTruncation"
+        >
+          Toggles a popover
+        </span>
+        <span
+          data-euiicon-type="arrowDown"
+        >
+           - Clicking this button will toggle a popover dialog.
+        </span>
+      </button>
+    </div>
+  </div>
+  <div
+    data-euiportal="true"
+  >
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="0"
+    />
+    <div
+      data-focus-lock-disabled="false"
+    >
+      <div
+        aria-describedby="generated-id"
+        aria-live="off"
+        aria-modal="true"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-bottom"
+        data-autofocus="true"
+        data-popover-open="true"
+        data-popover-panel="true"
+        role="dialog"
+        style="top: 16px; left: -22px; z-index: 2000;"
+        tabindex="0"
+      >
+        <div
+          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+          data-popover-arrow="bottom"
+          style="left: 10px; top: 0px;"
+        />
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a dialog. Press Escape, or tap/click outside the dialog to close.
+        </p>
+        <div>
+          Hello popover world
+        </div>
+      </div>
+    </div>
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="0"
+    />
+  </div>
+</body>
+`;
+
+exports[`EuiBreadcrumbContent renders interactive breadcrumbs with href or onClick 1`] = `
+<div>
+  <a
+    class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-page"
+    href="#"
+    rel="noreferrer"
+    title="Link"
+  >
+    Link
+  </a>
+  <button
+    class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-page"
+    title="Button"
+    type="button"
+  >
+    Button
+  </button>
+</div>
+`;
+
+exports[`EuiBreadcrumbContent renders plain uninteractive breadcrumb text 1`] = `
+<span
+  class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page-euiTextColor-subdued"
+  title="Text"
+>
+  Text
+</span>
+`;
diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap
@@ -1,52 +1,67 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiBreadcrumbContent breadcrumbs with popovers renders with \`popoverContent\` 1`] = `
+exports[`EuiBreadcrumb is a light <li> wrapper around the content 1`] = `
+<li
+  class="euiBreadcrumb emotion-euiBreadcrumb-page-isTruncated"
+  data-test-subj="euiBreadcrumb"
+>
+  Hello world
+</li>
+`;
+
+exports[`EuiBreadcrumbCollapsed renders a ... breadcrumb with collapsed content in a popover 1`] = `
 <body>
   <div>
-    <div
-      class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
-      data-test-subj="popover"
+    <li
+      class="euiBreadcrumb emotion-euiBreadcrumb-application-isCollapsed"
+      data-test-subj="euiBreadcrumb"
     >
-      <button
-        class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
-        data-test-subj="popoverToggle"
-        title="Toggles a popover - Clicking this button will toggle a popover dialog."
-        type="button"
+      <div
+        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
       >
-        <span
-          class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
+        <button
+          class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-application"
+          title="See collapsed breadcrumbs"
+          type="button"
         >
-          Toggles a popover
-        </span>
-        <span
-          data-euiicon-type="arrowDown"
-        >
-           - Clicking this button will toggle a popover dialog.
-        </span>
-      </button>
-    </div>
+          <span
+            class="emotion-euiBreadcrumb__popoverTruncation"
+          >
+            <span
+              aria-label="See collapsed breadcrumbs"
+            >
+              …
+            </span>
+          </span>
+          <span
+            data-euiicon-type="arrowDown"
+          >
+             - Clicking this button will toggle a popover dialog.
+          </span>
+        </button>
+      </div>
+    </li>
   </div>
   <div
     data-euiportal="true"
   >
     <div
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="0"
+      tabindex="-1"
     />
     <div
-      data-focus-lock-disabled="false"
+      data-focus-lock-disabled="disabled"
     >
       <div
         aria-describedby="generated-id"
         aria-live="off"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-hasTransform"
         data-autofocus="true"
-        data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; z-index: 2000;"
+        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
       >
         <div
@@ -61,46 +76,15 @@ exports[`EuiBreadcrumbContent breadcrumbs with popovers renders with \`popoverCo
           You are in a dialog. Press Escape, or tap/click outside the dialog to close.
         </p>
         <div>
-          Hello popover world
+          I render inside the popover
         </div>
       </div>
     </div>
     <div
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="0"
+      tabindex="-1"
     />
   </div>
 </body>
 `;
-
-exports[`EuiBreadcrumbContent renders interactive breadcrumbs with href or onClick 1`] = `
-<div>
-  <a
-    class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-page"
-    href="#"
-    rel="noreferrer"
-    title="Link"
-  >
-    Link
-  </a>
-  <button
-    class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-page"
-    title="Button"
-    type="button"
-  >
-    Button
-  </button>
-</div>
-`;
-
-exports[`EuiBreadcrumbContent renders plain uninteractive breadcrumb text 1`] = `
-<div>
-  <span
-    class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page-euiTextColor-subdued"
-    title="Text"
-  >
-    Text
-  </span>
-</div>
-`;
diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap
@@ -39,15 +39,15 @@ exports[`EuiBreadcrumbs is rendered 1`] = `
       data-test-subj="euiBreadcrumb"
     >
       <div
-        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
+        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper-page"
       >
         <button
-          class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
+          class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-page"
           title="See collapsed breadcrumbs"
           type="button"
         >
           <span
-            class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
+            class="emotion-euiBreadcrumb__popoverTruncation"
           >
             <span
               aria-label="See collapsed breadcrumbs"
@@ -143,15 +143,15 @@ exports[`EuiBreadcrumbs is rendered with final item as link 1`] = `
       data-test-subj="euiBreadcrumb"
     >
       <div
-        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
+        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper-page"
       >
         <button
-          class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
+          class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-page"
           title="See collapsed breadcrumbs"
           type="button"
         >
           <span
-            class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
+            class="emotion-euiBreadcrumb__popoverTruncation"
           >
             <span
               aria-label="See collapsed breadcrumbs"
@@ -329,15 +329,15 @@ exports[`EuiBreadcrumbs props max renders 1 item 1`] = `
       data-test-subj="euiBreadcrumb"
     >
       <div
-        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
+        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper-page"
       >
         <button
-          class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
+          class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-page"
           title="See collapsed breadcrumbs"
           type="button"
         >
           <span
-            class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
+            class="emotion-euiBreadcrumb__popoverTruncation"
           >
             <span
               aria-label="See collapsed breadcrumbs"
@@ -514,15 +514,15 @@ exports[`EuiBreadcrumbs props responsive is rendered 1`] = `
       data-test-subj="euiBreadcrumb"
     >
       <div
-        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
+        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper-page"
       >
         <button
-          class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
+          class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-page"
           title="See collapsed breadcrumbs"
           type="button"
         >
           <span
-            class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
+            class="emotion-euiBreadcrumb__popoverTruncation"
           >
             <span
               aria-label="See collapsed breadcrumbs"
@@ -617,15 +617,15 @@ exports[`EuiBreadcrumbs props responsive is rendered as false 1`] = `
       data-test-subj="euiBreadcrumb"
     >
       <div
-        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
+        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper-page"
       >
         <button
-          class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
+          class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-page"
           title="See collapsed breadcrumbs"
           type="button"
         >
           <span
-            class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
+            class="emotion-euiBreadcrumb__popoverTruncation"
           >
             <span
               aria-label="See collapsed breadcrumbs"
@@ -695,15 +695,15 @@ exports[`EuiBreadcrumbs props responsive is rendered with custom breakpoints 1`]
       data-test-subj="euiBreadcrumb"
     >
       <div
-        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
+        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper-page"
       >
         <button
-          class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
+          class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-page"
           title="See collapsed breadcrumbs"
           type="button"
         >
           <span
-            class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
+            class="emotion-euiBreadcrumb__popoverTruncation"
           >
             <span
               aria-label="See collapsed breadcrumbs"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Bug fixes

		- Fixed a visual bug with `EuiHeaderBreadcrumbs` with popovers