feat(EuiPopover): change default offset and disable arrow by default #9086

ryankeairns · 2025-10-07T23:37:33Z

Closes #8931

Summary

Primary change

Update EuiPopover defaults for modern popover appearance

hasArrow: false
offset: 4
anchorPosition: downLeft

Secondary changes

Set EuiInputPopover default offset to 2px to retain tighter association for inputs (effectively no visual change)
Change EuiTourStep to keep the arrow when beacon is present (effectively no visual change)
Change EuiTourStep story to use popover default instead of hardcoded value
Update positioning tests to reflect new default behavior

Why are we making this change?

Part of a larger effort to modernize our product UIs.

Screenshots

`EuiPopover`

(default 4px offset)

`EuiInputPopover` (visually unchanged)

(default 2px offset)

`EuiContextMenu` (in Popover; this is an existing storybook)

`EuiTour` (visually unchanged)

Impact to users

Minimal - visual only

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- Checked Code Sandbox works for any docs examples
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately.
- If applicable, added the breaking change issue label (and filled out the breaking change checklist)
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

- Update EuiPopover default offset from 0 to 4px for better visual spacing - Disable arrow by default (hasArrow: false) for cleaner popover appearance - Fix EuiTourStep to use popover default instead of hardcoded 0 - Update positioning tests to reflect new default behavior

- Add cross-axis position clamping in getCrossAxisPosition() to prevent popover from being positioned outside container bounds after arrow buffer adjustments - Update early termination logic in findPopoverPosition() to prioritize user's preferred anchorPosition when multiple positions achieve perfect fit (1.0) - Synchronize CSS transform with JavaScript offset by making translateDistance dynamic based on hasArrow prop - Pass offset and hasArrow props to EuiPopoverPanel for accurate transform calculations - Fix useMemo dependencies in EuiPopoverPanel to include offset and hasArrow This fixes an issue where popovers with hasArrow: false would incorrectly reposition to alternative positions (e.g., 'right' instead of 'bottom') even when the preferred position had sufficient space. The root cause was arrow buffer logic pushing the popover slightly outside container bounds (~3px on cross-axis), artificially lowering the fit score from 1.0 to 0.9947 for the preferred position.

Updated Loki reference images to reflect corrected popover positioning behavior. These changes show popovers now correctly respecting the user's preferred anchorPosition when sufficient space is available, rather than incorrectly repositioning to alternative positions.

- Update arrow positioning test expectations to reflect clamping behavior - Update offset test expectations to match new visual offset calculations

The offset parameter was not used in the CSS styles calculation. The translateDistance only depends on hasArrow to determine if an 8px transform should be applied.

ryankeairns · 2025-10-17T19:47:37Z

packages/eui/src/components/popover/popover_panel/_popover_panel.tsx

  const euiThemeContext = useEuiTheme();
  const cssStyles = useMemo(() => {
-    const styles = euiPopoverPanelStyles(euiThemeContext);
+    const styles = euiPopoverPanelStyles(euiThemeContext, hasArrow);


The hasArrow prop synchronizes the CSS transform distance (8px when true, 0px when false) with the JavaScript positioning calculations, ensuring accurate fit scores and preventing incorrect popover repositioning.

ryankeairns · 2025-10-17T19:48:41Z

packages/eui/src/components/popover/input_popover.tsx

  className,
  closePopover,
  anchorPosition = 'downLeft',
+  offset = 2,


This is very nitpicky, but it somehow looks better when the input-related popovers a just a tiny bit closer. Forgive me :D

ryankeairns · 2025-10-17T19:49:16Z

packages/eui/src/components/popover/popover.stories.tsx

    panelPaddingSize: 'm',
    buffer: 16,
-    hasArrow: true,
-    anchorPosition: 'downCenter',


Removed this to let the story apply the defaults

ryankeairns · 2025-10-17T19:49:47Z

packages/eui/src/components/popover/popover.tsx

+    anchorPosition: 'downLeft',
    panelPaddingSize: 'm',
-    hasArrow: true,
+    hasArrow: false,
+    offset: 3,


The heart of the change - new defaults for a more modern look

ryankeairns · 2025-10-17T19:52:58Z

packages/eui/src/components/tour/tour_step.tsx

      button={button as HTMLElement & ReactNode}
      className={anchorClasses}
      anchorPosition={anchorPosition}
+      hasArrow={hasBeacon}


Choosing to keep the arrow on tour popovers 1) as it points to a specific part of the tour and 2) when a beacon presen, it attaches to/near the arrow space. Removing it would require further refactoring, and the arrow seems still relevant for tours.

ryankeairns · 2025-10-17T19:55:19Z

packages/eui/src/services/popover/popover_positioning.ts


-      // If we've already found the ideal fit, use that position.
-      if (bestFit === 1) {
+      // If we've found a perfect fit for the user's preferred position, use it


This used to stop after the first perfect fit position is found. However, more than one position can be a perfect fit (i.e. has enough room to fit the entire popover). A bug was found that made the likelihood of this happening low (it not impossible) thus why it surfaced here.

The logic starts by checking the bottom position scoring - regardless of what you passed (e.g. rightDown) which meant if bottom scores a fit of 1, then your desired selection may never get tested/applied.

ryankeairns · 2025-10-17T19:59:06Z

packages/eui/src/components/popover/popover.tsx

+    const visualOffset = this.props.attachToAnchor
+      ? offset
+      : this.props.hasArrow
+      ? 16 + offset - 8 // JavaScript offset minus CSS transform
+      : offset; // No penalty for hasArrow: false - let the algorithm choose naturally
+


The visualOffset calculation is now in sync with the CSS transform in _popover_panel.styles.ts. When hasArrow: true, we subtract the 8px CSS transform from the total offset so the positioning algorithm uses the actual visual distance.

This fixes incorrect repositioning that occurred when the algorithm thought it needed more space than was visually required.

ryankeairns · 2025-10-17T20:06:23Z

packages/eui/src/services/popover/popover_positioning.ts

+  // Ensure the popover stays within container bounds after arrow adjustment
+  // Get the buffer values to know the actual container bounds
+  const [topBuffer, rightBuffer, bottomBuffer, leftBuffer] =
+    getBufferValues(buffer);
+  const combinedBounds = intersectBoundingBoxes(
+    windowBoundingBox,
+    containerBoundingBox
+  );
+
+  // Calculate the minimum position (accounting for buffer)
+  const minPosition =
+    combinedBounds[crossAxisFirstSide] +
+    (crossAxisFirstSide === 'top'
+      ? topBuffer
+      : crossAxisFirstSide === 'right'
+      ? rightBuffer
+      : crossAxisFirstSide === 'bottom'
+      ? bottomBuffer
+      : leftBuffer);
+
+  // Clamp the position to not go outside the container bounds
+  if (crossAxisPosition < minPosition) {
+    crossAxisPosition = minPosition;
+  }
+


Prevent the popover from being positioned outside container bounds after arrow buffer adjustments.

The arrow buffer logic shifts the popover to ensure the arrow has adequate spacing from the popover edges/corner (i.e. so that CSS triangle does not sit on the edge/overlap). However, this could push the popover slightly (~3px to the left in this particular data grid story) outside the container boundaries on the cross-axis, artificially lowering the fit score from 1.0 to 0.9947 for the preferred position.

By ensureing crossAxisPosition stays within the combinedBounds (accounting for buffer values), we ensure accurate fit calculations and prevent the algorithm from incorrectly choosing alternative positions.

In short, this led to bottom fit score being .99 and right being 1 while both had sufficient space for the size of the popover.

- EuiInputPopover: left position now 16px (was 0px) due to cross-axis clamping - EuiDataGrid cell popover: positions updated to 16px left and 75px top due to clamping and new offset calculations - Draggable columns: reordered assertions to wait for popover close before checking focus - Keyboard shortcuts: updated snapshot for popover positioning changes

The keyboard shortcuts popover now uses the new default hasArrow: false, resulting in different positioning and no arrow element in the snapshot.

Reorder to check for popover closure before checking focus in three more tests. This addresses timing issues where focus checks could fail before the popover finishes closing.

The 'should close data grid toolbar popovers' test was failing because the Columns popover now overlaps both the column headers with the new EuiPopover defaults (hasArrow: false, smaller offset).

elasticmachine · 2025-10-20T23:39:35Z

💚 Build Succeeded

History

💚 Build #1631 succeeded f2f7281
💚 Build #1621 succeeded b20188f
💚 Build #1620 succeeded b20188f
💚 Build #1606 succeeded 71defc6
💚 Build #1602 succeeded c133aee
💚 Build #1601 succeeded c133aee

elasticmachine · 2025-10-20T23:53:35Z

💚 Build Succeeded

Buildkite Build
Commit: fcd75f2

History

💚 Build #4982 succeeded f2f7281
💔 Build #4973 failed b20188f
💔 Build #4964 failed 71defc6
💔 Build #4871 failed 2c97900
💔 Build #4869 failed 2443656

ryankeairns · 2025-10-21T03:43:20Z

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

+      // Click on the toolbar area (outside the popover) to dismiss it
+      cy.get('[data-test-subj="dataGridControls"]').realClick({
+        position: 'center',


With no arrow, the popover covers the header cell which caused the test to fail as the click happens on top of the popover. This changes places the click in the center of the control bar - above the header cells and on the same row as the anchor button - which seems like a more typical user behavior. Clicking on a visible header cell would also work, but this control bar element felt more reliable for testing purposes.

With arrow (before)

Without arrow (after)

ryankeairns force-pushed the rk/8931-popover-hide-arrow branch from 1ddf661 to 2c97900 Compare October 8, 2025 04:14

ryankeairns mentioned this pull request Oct 10, 2025

[Epic][UI Audit] Overlays elastic/kibana#238349

Open

ryankeairns added 6 commits October 17, 2025 12:21

Add changelog for EuiPopover changes

5f1f670

Update unit tests for popover positioning changes

1343c3f

- Update arrow positioning test expectations to reflect clamping behavior - Update offset test expectations to match new visual offset calculations

Update Jest snapshots for popover positioning changes

4a42303

ryankeairns force-pushed the rk/8931-popover-hide-arrow branch from 10b3587 to 4a42303 Compare October 17, 2025 19:23

Remove unused offset parameter from euiPopoverPanelStyles

3f45af2

The offset parameter was not used in the CSS styles calculation. The translateDistance only depends on hasArrow to determine if an 8px transform should be applied.

ryankeairns commented Oct 17, 2025

View reviewed changes

ryankeairns added 5 commits October 17, 2025 13:20

Update React 17 snapshot for keyboard shortcuts test

71defc6

The keyboard shortcuts popover now uses the new default hasArrow: false, resulting in different positioning and no arrow element in the snapshot.

Fix additional focus assertion timing issues in draggable_columns tests

b20188f

Reorder to check for popover closure before checking focus in three more tests. This addresses timing issues where focus checks could fail before the popover finishes closing.

Fix Cypress test: click toolbar instead of popover-covered area

f2f7281

The 'should close data grid toolbar popovers' test was failing because the Columns popover now overlaps both the column headers with the new EuiPopover defaults (hasArrow: false, smaller offset).

Merge branch 'main' into rk/8931-popover-hide-arrow

fcd75f2

ryankeairns commented Oct 21, 2025

View reviewed changes

JasonStoltz mentioned this pull request Nov 5, 2025

[EuiPopover] Remove arrow and change default position to downLeft #9184

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(EuiPopover): change default offset and disable arrow by default #9086

feat(EuiPopover): change default offset and disable arrow by default #9086

Uh oh!

ryankeairns commented Oct 7, 2025 •

edited

Loading

Uh oh!

ryankeairns Oct 17, 2025

Uh oh!

ryankeairns Oct 17, 2025

Uh oh!

ryankeairns Oct 17, 2025

Uh oh!

ryankeairns Oct 17, 2025

Uh oh!

ryankeairns Oct 17, 2025 •

edited

Loading

Uh oh!

ryankeairns Oct 17, 2025 •

edited

Loading

Uh oh!

ryankeairns Oct 17, 2025 •

edited

Loading

Uh oh!

ryankeairns Oct 17, 2025 •

edited

Loading

Uh oh!

elasticmachine commented Oct 20, 2025

Uh oh!

elasticmachine commented Oct 20, 2025

Uh oh!

ryankeairns Oct 21, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat(EuiPopover): change default offset and disable arrow by default #9086

Are you sure you want to change the base?

feat(EuiPopover): change default offset and disable arrow by default #9086

Uh oh!

Conversation

ryankeairns commented Oct 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Primary change

Secondary changes

Why are we making this change?

Screenshots

EuiPopover

EuiInputPopover (visually unchanged)

EuiContextMenu (in Popover; this is an existing storybook)

EuiTour (visually unchanged)

Impact to users

QA

General checklist

Uh oh!

ryankeairns Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

ryankeairns Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

ryankeairns Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

ryankeairns Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

ryankeairns Oct 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ryankeairns Oct 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ryankeairns Oct 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ryankeairns Oct 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Oct 20, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Oct 20, 2025

💚 Build Succeeded

History

Uh oh!

ryankeairns Oct 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ryankeairns commented Oct 7, 2025 •

edited

Loading

`EuiPopover`

`EuiInputPopover` (visually unchanged)

`EuiContextMenu` (in Popover; this is an existing storybook)

`EuiTour` (visually unchanged)

ryankeairns Oct 17, 2025 •

edited

Loading

ryankeairns Oct 17, 2025 •

edited

Loading

ryankeairns Oct 17, 2025 •

edited

Loading

ryankeairns Oct 17, 2025 •

edited

Loading

ryankeairns Oct 21, 2025 •

edited

Loading