[EuiPopover][EuiInputPopover] Misc fixes and CSS cleanup (#7211)

elastic · Sep 22, 2023 · 3a653d4 · 3a653d4
1 parent 5d3838b
commit 3a653d4
Show file tree

Hide file tree

Showing 22 changed files with 248 additions and 249 deletions.
diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
@@ -48,6 +48,7 @@ exports[`CollapsedItemActions render with href and _target provided 1`] = `
   ownFocus={true}
   panelPaddingSize="none"
   popoverRef={[Function]}
+  repositionToCrossAxis={true}
 >
   <EuiContextMenuPanel
     items={

diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap
@@ -42,7 +42,7 @@ exports[`EuiBreadcrumbContent renders breadcrumbs with \`popoverContent\` with p
         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-isOpen-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"

diff --git a/src/components/code/__snapshots__/code_block_annotations.test.tsx.snap b/src/components/code/__snapshots__/code_block_annotations.test.tsx.snap
@@ -39,7 +39,7 @@ exports[`EuiCodeBlockAnnotation renders 1`] = `
         aria-label="aria-label"
         aria-live="off"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"

diff --git a/...nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap b/...nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap
@@ -46,7 +46,7 @@ exports[`EuiCollapsedNavPopover renders the title and sub-items within the popov
         aria-label="aria-label"
         aria-live="off"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPopover__panel  emotion-euiPanel-grow-m-plain-euiPopover__panel-isOpen-right-euiCollapsedNavPopover__panel"
+        class="euiPanel euiPanel--plain euiPopover__panel  emotion-euiPanel-grow-m-plain-euiPopover__panel-isOpen-hasTransform-right-euiCollapsedNavPopover__panel"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"

diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
@@ -522,7 +522,7 @@ exports[`props option.prepend & option.append renders in single selection 1`] =
 
 exports[`props option.prepend & option.append renders in the options dropdown 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPopover__panel euiComboBoxOptionsList emotion-euiPanel-grow-m-plain-euiPopover__panel-isOpen-bottom-isOpen-bottom"
+  class="euiPanel euiPanel--plain euiPopover__panel euiComboBoxOptionsList emotion-euiPanel-grow-m-plain-euiPopover__panel-isOpen-isAttached-bottom"
   data-popover-open="true"
   data-popover-panel="true"
   data-test-subj="comboBoxOptionsList"
@@ -675,7 +675,7 @@ exports[`props options list is rendered 1`] = `
     </div>
   </div>
   <div
-    class="euiPanel euiPanel--plain euiPopover__panel euiComboBoxOptionsList emotion-euiPanel-grow-m-plain-euiPopover__panel-isOpen-bottom-isOpen-bottom"
+    class="euiPanel euiPanel--plain euiPopover__panel euiComboBoxOptionsList emotion-euiPanel-grow-m-plain-euiPopover__panel-isOpen-isAttached-bottom"
     data-popover-open="true"
     data-popover-panel="true"
     data-test-subj="comboBoxOptionsList alsoGetsAppliedToOptionsList-optionsList"

diff --git a/src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap b/src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap
@@ -57,6 +57,7 @@ exports[`EuiDataGridHeaderCell renders 1`] = `
         token="euiDataGridHeaderCell.actionsPopoverScreenReaderText"
       />
     }
+    repositionToCrossAxis={true}
   >
     <EuiListGroup
       data-test-subj="dataGridHeaderCellActionGroup-someColumn"

diff --git a/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap
@@ -30,6 +30,7 @@ exports[`useDataGridDisplaySelector displaySelector renders a toolbar button/pop
     ownFocus={true}
     panelClassName="euiDataGrid__displayPopoverPanel"
     panelPaddingSize="s"
+    repositionToCrossAxis={true}
   >
     <EuiI18n
       defaults={

diff --git a/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap
@@ -50,7 +50,7 @@ exports[`useDataGridKeyboardShortcuts returns a popover containing a list of key
         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-isOpen-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"

diff --git a/src/components/form/range/__snapshots__/range.test.tsx.snap b/src/components/form/range/__snapshots__/range.test.tsx.snap
@@ -461,11 +461,11 @@ exports[`EuiRange props slider should display in popover 1`] = `
         aria-describedby="generated-id"
         aria-live="assertive"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-isAttached-bottom"
         data-popover-panel="true"
         data-test-subj="test"
         role="dialog"
-        style="top: 8px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000;"
       >
         <p
           class="emotion-euiScreenReaderOnly"

diff --git a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
@@ -142,10 +142,10 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
     <div
       aria-live="assertive"
       aria-modal="true"
-      class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-bottom"
+      class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-isAttached-bottom"
       data-popover-panel="true"
       role="dialog"
-      style="top: 8px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+      style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000;"
     >
       <div>
         <div
@@ -387,10 +387,10 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
     <div
       aria-live="assertive"
       aria-modal="true"
-      class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-bottom"
+      class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-isAttached-bottom"
       data-popover-panel="true"
       role="dialog"
-      style="top: 8px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+      style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000;"
     >
       <div>
         <div
@@ -533,10 +533,10 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
     <div
       aria-live="assertive"
       aria-modal="true"
-      class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-bottom"
+      class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-isAttached-bottom"
       data-popover-panel="true"
       role="dialog"
-      style="top: 8px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+      style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000;"
     >
       <div>
         <div
@@ -678,10 +678,10 @@ exports[`EuiSuperSelect props renders popoverProps on the underlying EuiPopover
     <div
       aria-live="assertive"
       aria-modal="true"
-      class="euiPanel euiPanel--plain euiPopover__panel goes-on-popover-panel emotion-euiPanel-grow-m-plain-euiPopover__panel-bottom"
+      class="euiPanel euiPanel--plain euiPopover__panel goes-on-popover-panel emotion-euiPanel-grow-m-plain-euiPopover__panel-isAttached-bottom"
       data-popover-panel="true"
       role="dialog"
-      style="top: 8px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+      style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000;"
     >
       <div>
         <div

diff --git a/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap b/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap
@@ -47,7 +47,7 @@ exports[`EuiPopover snapshot testing renders with popover contents 1`] = `
         aria-label="aria-label"
         aria-live="off"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"

diff --git a/src/components/popover/__snapshots__/popover.test.tsx.snap b/src/components/popover/__snapshots__/popover.test.tsx.snap
@@ -83,7 +83,7 @@ exports[`EuiPopover props arrowChildren is rendered 1`] = `
 <div>
   <div
     class="euiPopover euiPopover-isOpen emotion-euiPopover"
-    id="19"
+    id="20"
   >
     <div
       class="euiPopover__anchor css-16vtueo-render"
@@ -102,7 +102,7 @@ exports[`EuiPopover props arrowChildren is rendered 1`] = `
         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-isOpen-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"
@@ -139,7 +139,7 @@ exports[`EuiPopover props buffer 1`] = `
 <div>
   <div
     class="euiPopover euiPopover-isOpen emotion-euiPopover"
-    id="20"
+    id="21"
   >
     <div
       class="euiPopover__anchor css-16vtueo-render"
@@ -158,7 +158,7 @@ exports[`EuiPopover props buffer 1`] = `
         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-isOpen-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"
@@ -193,7 +193,7 @@ exports[`EuiPopover props buffer for all sides 1`] = `
 <div>
   <div
     class="euiPopover euiPopover-isOpen emotion-euiPopover"
-    id="21"
+    id="22"
   >
     <div
       class="euiPopover__anchor css-16vtueo-render"
@@ -212,7 +212,7 @@ exports[`EuiPopover props buffer for all sides 1`] = `
         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-isOpen-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"
@@ -279,7 +279,7 @@ exports[`EuiPopover props focusTrapProps is rendered 1`] = `
         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-isOpen-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"
@@ -346,7 +346,7 @@ exports[`EuiPopover props isOpen renders true 1`] = `
         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-isOpen-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"
@@ -377,109 +377,6 @@ exports[`EuiPopover props isOpen renders true 1`] = `
 </div>
 `;
 
-exports[`EuiPopover props offset with arrow 1`] = `
-<div>
-  <div
-    class="euiPopover euiPopover-isOpen emotion-euiPopover"
-    id="17"
-  >
-    <div
-      class="euiPopover__anchor css-16vtueo-render"
-    >
-      <button />
-    </div>
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
-    <div
-      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-isOpen-bottom"
-        data-autofocus="true"
-        data-popover-open="true"
-        data-popover-panel="true"
-        role="dialog"
-        style="top: 26px; left: -22px; will-change: transform, opacity; 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 />
-      </div>
-    </div>
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
-  </div>
-</div>
-`;
-
-exports[`EuiPopover props offset without arrow 1`] = `
-<div>
-  <div
-    class="euiPopover euiPopover-isOpen emotion-euiPopover"
-    id="18"
-  >
-    <div
-      class="euiPopover__anchor css-16vtueo-render"
-    >
-      <button />
-    </div>
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
-    <div
-      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-isOpen-bottom"
-        data-autofocus="true"
-        data-popover-open="true"
-        data-popover-panel="true"
-        role="dialog"
-        style="top: 18px; left: -22px; will-change: transform, opacity; z-index: 2000;"
-        tabindex="0"
-      >
-        <p
-          class="emotion-euiScreenReaderOnly"
-          id="generated-id"
-        >
-          You are in a dialog. Press Escape, or tap/click outside the dialog to close.
-        </p>
-        <div />
-      </div>
-    </div>
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
-  </div>
-</div>
-`;
-
 exports[`EuiPopover props ownFocus defaults to true 1`] = `
 <div>
   <div
@@ -503,7 +400,7 @@ exports[`EuiPopover props ownFocus defaults to true 1`] = `
         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-isOpen-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"
@@ -556,7 +453,7 @@ exports[`EuiPopover props ownFocus renders false 1`] = `
       <div
         aria-live="assertive"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
@@ -602,7 +499,7 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
         aria-describedby="generated-id"
         aria-live="off"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel test emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel test emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"
@@ -656,7 +553,7 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
         aria-describedby="generated-id"
         aria-live="off"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-isOpen-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-isOpen-hasTransform-bottom"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"
@@ -710,7 +607,7 @@ exports[`EuiPopover props panelProps is rendered 1`] = `
         aria-describedby="generated-id"
         aria-live="off"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-bottom-euiTestCss"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom-euiTestCss"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"
@@ -746,7 +643,7 @@ exports[`EuiPopover props popoverScreenReaderText 1`] = `
 <div>
   <div
     class="euiPopover euiPopover-isOpen emotion-euiPopover"
-    id="22"
+    id="23"
   >
     <div
       class="euiPopover__anchor css-16vtueo-render"
@@ -765,7 +662,7 @@ exports[`EuiPopover props popoverScreenReaderText 1`] = `
         aria-describedby="generated-id"
         aria-live="assertive"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"