[Visual Refresh] Introduce shared popover arrow styles to Borealis (#…

…8212)
elastic · Dec 13, 2024 · e162ad1 · e162ad1
1 parent 10ba396
commit e162ad1
Show file tree

Hide file tree

Showing 60 changed files with 565 additions and 582 deletions.
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input.png
diff --git a/...es/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input_With_Popover.png b/...es/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input_With_Popover.png
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Levels.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Levels.png
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Ticks.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Ticks.png
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input.png
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input_With_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input_With_Popover.png
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Levels.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Levels.png
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Ticks.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Ticks.png
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Value_Tooltip.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Value_Tooltip.png
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input.png
diff --git a/...ges/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input_With_Popover.png b/...ges/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input_With_Popover.png
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Levels.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Levels.png
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Ticks.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Ticks.png
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input.png
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input_With_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input_With_Popover.png
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Levels.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Levels.png
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Ticks.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Ticks.png
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Value_Tooltip.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Value_Tooltip.png
diff --git a/packages/eui/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap b/packages/eui/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
@@ -48,14 +48,18 @@ exports[`CollapsedItemActions custom actions 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: -22px; left: -16px; z-index: 2000;"
+        style="top: -18px; left: -16px; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-left"
-          data-popover-arrow="left"
-          style="left: 0px; top: 10px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="top: 9px; left: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-left"
+            data-popover-arrow="left"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
@@ -158,14 +162,18 @@ exports[`CollapsedItemActions default actions 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: -22px; left: -16px; z-index: 2000;"
+        style="top: -18px; left: -16px; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-left"
-          data-popover-arrow="left"
-          style="left: 0px; top: 10px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="top: 9px; left: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-left"
+            data-popover-arrow="left"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"

diff --git a/packages/eui/src/components/breadcrumbs/__snapshots__/_breadcrumb_content.test.tsx.snap b/packages/eui/src/components/breadcrumbs/__snapshots__/_breadcrumb_content.test.tsx.snap
@@ -46,14 +46,18 @@ exports[`EuiBreadcrumbContent breadcrumbs with popovers renders with \`popoverCo
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; z-index: 2000;"
+        style="top: 16px; left: -18px; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"

diff --git a/packages/eui/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap b/packages/eui/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap
@@ -61,14 +61,18 @@ exports[`EuiBreadcrumbCollapsed renders a ... breadcrumb with collapsed content
         data-autofocus="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 16px; left: -18px; 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;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"

diff --git a/packages/eui/src/components/code/__snapshots__/code_block_annotations.test.tsx.snap b/packages/eui/src/components/code/__snapshots__/code_block_annotations.test.tsx.snap
@@ -41,14 +41,18 @@ exports[`EuiCodeBlockAnnotation renders 1`] = `
         data-popover-panel="true"
         data-test-subj="euiCodeBlockAnnotationPopover"
         role="dialog"
-        style="top: 16px; left: -22px; z-index: 6001;"
+        style="top: 16px; left: -18px; z-index: 6001;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"

diff --git a/...ble_nav_beta/_kibana_solution/__snapshots__/collapsible_nav_kibana_solution.test.tsx.snap b/...ble_nav_beta/_kibana_solution/__snapshots__/collapsible_nav_kibana_solution.test.tsx.snap
@@ -61,14 +61,18 @@ exports[`KibanaCollapsibleNavSolution renders docked icons: popover 1`] = `
   data-popover-open="true"
   data-popover-panel="true"
   role="dialog"
-  style="top: -22px; left: 16px; z-index: 2000;"
+  style="top: -18px; left: 16px; z-index: 2000;"
   tabindex="0"
 >
   <div
-    class="euiPopover__arrow emotion-euiPopoverArrow-right"
-    data-popover-arrow="right"
-    style="left: 0px; top: 10px;"
-  />
+    class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+    style="top: 9px; right: 100%;"
+  >
+    <div
+      class="euiPopover__arrow emotion-euiPopoverArrow-right"
+      data-popover-arrow="right"
+    />
+  </div>
   <p
     class="emotion-euiScreenReaderOnly"
     id="generated-id"
@@ -188,7 +192,7 @@ exports[`KibanaCollapsibleNavSolution renders with a solution switcher: popover
   data-popover-open="true"
   data-popover-panel="true"
   role="dialog"
-  style="top: 0px; left: -22px; z-index: 2000; inline-size: 0px;"
+  style="top: 0px; left: -18px; z-index: 2000; inline-size: 0px;"
   tabindex="0"
 >
   <p

diff --git a/..._nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_button.test.tsx.snap b/..._nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_button.test.tsx.snap
@@ -39,7 +39,7 @@ exports[`EuiCollapsedNavButton renders a tooltip around the icon button 1`] = `
     >
       <div
         class="euiToolTip__arrow emotion-euiToolTip__arrow-left"
-        style="left: 0px; top: 4px;"
+        style="top: 3px; left: 100%;"
       />
       <div>
         Nav item

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
@@ -47,14 +47,18 @@ exports[`EuiCollapsedNavPopover renders 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: -22px; left: 16px; z-index: 2000;"
+        style="top: -18px; left: 16px; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-right"
-          data-popover-arrow="right"
-          style="left: 0px; top: 10px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="top: 9px; right: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-right"
+            data-popover-arrow="right"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"

diff --git a/...onents/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap b/...onents/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
@@ -381,7 +381,7 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
         class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-light-isAttached-bottom"
         data-popover-panel="true"
         role="dialog"
-        style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;"
+        style="top: 0px; left: -18px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;"
       >
         <div>
           <div

diff --git a/packages/eui/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/packages/eui/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
@@ -141,7 +141,7 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 0px; left: -22px; z-index: 2000; inline-size: 0px;"
+        style="top: 0px; left: -18px; z-index: 2000; inline-size: 0px;"
       >
         <div>
           <div

diff --git a/packages/eui/src/components/context_menu/__snapshots__/context_menu_item.test.tsx.snap b/packages/eui/src/components/context_menu/__snapshots__/context_menu_item.test.tsx.snap
@@ -100,7 +100,7 @@ exports[`EuiContextMenuItem tooltip behavior 1`] = `
       </div>
       <div
         class="euiToolTip__arrow emotion-euiToolTip__arrow-top"
-        style="left: 4px; top: 0px;"
+        style="left: 3px; top: 100%;"
       />
       <div>
         tooltip content

diff --git a/packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.spec.tsx b/packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.spec.tsx
@@ -254,7 +254,7 @@ describe('EuiDataGridCellPopover', () => {
         openCellPopover('B');
         cy.get('[data-test-subj="euiDataGridExpansionPopover"]')
           .should('have.css', 'width', '400px')
-          .should('have.css', 'height', '88px');
+          .should('have.css', 'height', '90px');
       });
 
       it('matches the width of the column if the column width is larger than 400px', () => {
@@ -270,7 +270,7 @@ describe('EuiDataGridCellPopover', () => {
         openCellPopover('B');
         cy.get('[data-test-subj="euiDataGridExpansionPopover"]')
           .should('have.css', 'width', '500px')
-          .should('have.css', 'height', '64px');
+          .should('have.css', 'height', '66px');
       });
     });
   });

diff --git a/packages/eui/src/components/datagrid/body/header/__snapshots__/column_actions.test.tsx.snap b/packages/eui/src/components/datagrid/body/header/__snapshots__/column_actions.test.tsx.snap
@@ -42,14 +42,18 @@ exports[`ColumnActions renders 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 23px; left: -22px; z-index: 2000;"
+        style="top: 23px; left: -18px; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"

diff --git a/packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap b/packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
@@ -54,14 +54,18 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
         data-autofocus="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 16px; left: -18px; 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;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"

diff --git a/packages/eui/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/packages/eui/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
@@ -54,14 +54,18 @@ exports[`DataGridSortingControl renders a toolbar button/popover allowing users
         data-autofocus="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 16px; left: -18px; 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;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"

diff --git a/packages/eui/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap b/packages/eui/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap
@@ -240,14 +240,18 @@ exports[`useDataGridDisplaySelector displaySelector renders a toolbar button/pop
         data-autofocus="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 16px; left: -18px; 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;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"

diff --git a/packages/eui/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap b/packages/eui/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap
@@ -50,14 +50,18 @@ exports[`useDataGridKeyboardShortcuts [React 16] returns a popover containing a
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; z-index: 2000;"
+        style="top: 16px; left: -18px; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
@@ -299,14 +303,18 @@ exports[`useDataGridKeyboardShortcuts [React 17] returns a popover containing a
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; z-index: 2000;"
+        style="top: 16px; left: -18px; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
@@ -549,14 +557,18 @@ exports[`useDataGridKeyboardShortcuts [React 18] returns a popover containing a
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; z-index: 2000;"
+        style="top: 16px; left: -18px; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"