[EuiPopover] Change hasArrow, position and offset defaults

packages/eui/changelogs/upcoming/9218.md

@@ -0,0 +1,7 @@
+- Updated `EuiPopover` default prop values of `hasArrow`, `position` and `offset`:
+  - Changed `hasArrow` to `false`
+  - Changed `position` to `downLeft`
+  - Changed `offset` to `4` when `hasArrow=false`
+- Updated `EuiInputPopover` `offset` default value to `2`
+- Updated `EuiTourStep` to not apply `hasArrow=true` by default when `decoration="none"`
+

packages/eui/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap

@@ -48,18 +48,9 @@ exports[`CollapsedItemActions custom actions 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: -18px; left: -16px; z-index: 2000;"
+        style="top: 0px; left: -12px; z-index: 2000;"
         tabindex="0"
       >
-        <div
-          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"
@@ -162,18 +153,9 @@ exports[`CollapsedItemActions default actions 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: -18px; left: -16px; z-index: 2000;"
+        style="top: 0px; left: -12px; z-index: 2000;"
         tabindex="0"
       >
-        <div
-          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"

packages/eui/src/components/breadcrumbs/__snapshots__/_breadcrumb_content.test.tsx.snap

@@ -46,18 +46,9 @@ exports[`EuiBreadcrumbContent breadcrumbs with popovers renders with \`popoverCo
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -18px; z-index: 2000;"
+        style="top: 12px; left: 0px; z-index: 2000;"
         tabindex="0"
       >
-        <div
-          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"

packages/eui/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap

@@ -61,18 +61,9 @@ exports[`EuiBreadcrumbCollapsed renders a ... breadcrumb with collapsed content
         data-autofocus="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 12px; left: 0px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
       >
-        <div
-          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"

packages/eui/src/components/code/__snapshots__/code_block_annotations.test.tsx.snap

@@ -41,18 +41,9 @@ exports[`EuiCodeBlockAnnotation renders 1`] = `
         data-popover-panel="true"
         data-test-subj="euiCodeBlockAnnotationPopover"
         role="dialog"
-        style="top: 16px; left: -18px; z-index: 6001;"
+        style="top: 12px; left: 0px; z-index: 6001;"
         tabindex="0"
       >
-        <div
-          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"

packages/eui/src/components/collapsible_nav_beta/_kibana_solution/__snapshots__/collapsible_nav_kibana_solution.test.tsx.snap

@@ -61,18 +61,9 @@ exports[`KibanaCollapsibleNavSolution renders docked icons: popover 1`] = `
   data-popover-open="true"
   data-popover-panel="true"
   role="dialog"
-  style="top: -18px; left: 16px; z-index: 2000;"
+  style="top: 0px; left: 12px; z-index: 2000;"
   tabindex="0"
 >
-  <div
-    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"
@@ -192,7 +183,7 @@ exports[`KibanaCollapsibleNavSolution renders with a solution switcher: popover
   data-popover-open="true"
   data-popover-panel="true"
   role="dialog"
-  style="top: 0px; left: -18px; z-index: 2000; inline-size: 0px;"
+  style="top: 2px; left: 0px; z-index: 2000; inline-size: 0px;"
   tabindex="0"
 >
   <p

packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap

@@ -47,18 +47,9 @@ exports[`EuiCollapsedNavPopover renders 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: -18px; left: 16px; z-index: 2000;"
+        style="top: 0px; left: 12px; z-index: 2000;"
         tabindex="0"
       >
-        <div
-          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"

packages/eui/src/components/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: -18px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;"
+        style="top: 2px; left: 0px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;"
       >
         <div>
           <div

packages/eui/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap

@@ -143,7 +143,7 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 0px; left: -18px; z-index: 2000; inline-size: 0px;"
+        style="top: 2px; left: 0px; z-index: 2000; inline-size: 0px;"
       >
         <div>
           <div

packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.spec.tsx

@@ -219,7 +219,7 @@ describe('EuiDataGridCellPopover', () => {
       openCellPopover('A');
       cy.get('[data-test-subj="euiDataGridExpansionPopover"]')
         .should('have.css', 'left', '1px')
-        .should('have.css', 'top', '72px')
+        .should('have.css', 'top', '76px')
         .should('have.css', 'width', '112px');
     });
 
@@ -229,7 +229,7 @@ describe('EuiDataGridCellPopover', () => {
       openCellPopover('B');
       cy.get('[data-test-subj="euiDataGridExpansionPopover"]')
         .should('have.css', 'left', '109px')
-        .should('have.css', 'top', '72px')
+        .should('have.css', 'top', '76px')
         .should('have.css', 'width', '375px');
     });
 

packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.test.tsx

@@ -111,7 +111,7 @@ describe('useCellPopover', () => {
           data-popover-panel="true"
           data-test-subj="euiDataGridExpansionPopover"
           role="dialog"
-          style="top: 0px; left: 0px; will-change: transform, opacity; max-inline-size: min(75vw, max(0px, 400px)); max-block-size: 50vh; z-index: 1000;"
+          style="top: 4px; left: 0px; will-change: transform, opacity; max-inline-size: min(75vw, max(0px, 400px)); max-block-size: 50vh; z-index: 1000;"
           tabindex="0"
         >
           <p

packages/eui/src/components/datagrid/body/header/__snapshots__/column_actions.test.tsx.snap

@@ -41,18 +41,9 @@ exports[`ColumnActions renders 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 23px; left: -18px; z-index: 2000;"
+        style="top: 15px; left: 0px; z-index: 2000;"
         tabindex="0"
       >
-        <div
-          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"

packages/eui/src/components/datagrid/body/header/draggable_columns.spec.tsx

@@ -281,7 +281,7 @@ describe('draggable columns', () => {
       cy.get('[data-popover-open]').should('have.focus');
 
       cy.get('[data-test-subj=dataGridHeaderCell-a]').realClick({
-        position: 'right',
+        position: 'left',
       });
       cy.get('[data-test-subj=dataGridHeaderCell-a]').should('have.focus');
       cy.get('[data-popover-open]').should('not.exist');

packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap

@@ -54,18 +54,9 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
         data-autofocus="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 12px; left: 0px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
       >
-        <div
-          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"

packages/eui/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap

@@ -54,18 +54,9 @@ exports[`DataGridSortingControl renders a toolbar button/popover allowing users
         data-autofocus="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 12px; left: 0px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
       >
-        <div
-          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"

packages/eui/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap

@@ -240,18 +240,9 @@ exports[`useDataGridDisplaySelector displaySelector renders a toolbar button/pop
         data-autofocus="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 12px; left: 0px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
       >
-        <div
-          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"

packages/eui/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap

@@ -50,18 +50,9 @@ exports[`useDataGridKeyboardShortcuts [React 17] returns a popover containing a
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -18px; z-index: 2000;"
+        style="top: 12px; left: 0px; z-index: 2000;"
         tabindex="0"
       >
-        <div
-          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"
@@ -304,18 +295,9 @@ exports[`useDataGridKeyboardShortcuts [React 18] returns a popover containing a
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -18px; z-index: 2000;"
+        style="top: 12px; left: 0px; z-index: 2000;"
         tabindex="0"
       >
-        <div
-          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"

packages/eui/src/components/datagrid/data_grid.spec.tsx

@@ -901,7 +901,7 @@ a, footer\tb, footer
         .realHover()
         .realMouseDown({ position: 'center' })
         .realMouseMove(0, 0) // start drag
-        .realMouseMove(0, 120) // move (absolute coordinates)
+        .realMouseMove(150, 100) // move (absolute coordinates)
         .realMouseUp();
 
       cy.get('.euiDataGridColumnSelector__item').eq(0).should('have.text', 'b');

packages/eui/src/components/form/range/__snapshots__/range.test.tsx.snap

@@ -454,7 +454,7 @@ exports[`EuiRange props slider should display in popover 1`] = `
         data-popover-panel="true"
         data-test-subj="test"
         role="dialog"
-        style="top: 0px; left: -18px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;"
+        style="top: 2px; left: 0px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;"
       >
         <p
           class="emotion-euiScreenReaderOnly"

packages/eui/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap

@@ -190,7 +190,7 @@ exports[`EuiSuperSelect renders 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: -18px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;"
+        style="top: 2px; left: 0px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;"
       >
         <div>
           <div

packages/eui/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap

@@ -44,18 +44,9 @@ exports[`EuiPopover snapshot testing renders with popover contents 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 12px; left: 0px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
       >
-        <div
-          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"