[EuiPopover] Change `hasArrow`, `position` and `offset` defaults #9218

mgadewoll · 2025-11-17T08:32:07Z

Summary

This PR updates EuiPopover by changing the default values of these props to change the visual output of the component:

hasArrow
position
offset

prop	type	new default	old default
`hasArrow`	`boolean`	`false`	`true`
`position`	`union`	`downLeft`	`downCenter`
`offset`	`number`	`hasArrow` ? `0` : `4`	`4`

Additionally, EuiInputPopover is updated by changing its offset.

prop	type	new default	old default
`offset`	`number`	`2`	`0`

EuiTourStep is updated to only set hasArrow on its underlying EuiPopover by default when decoration="beacon" and not decoration="none" (unless manually overridden).

Why are we making this change?

🎨 UI refresh: The changes are part of the effort to refresh and modernize the UI (#9183)

Screenshots #

EuiPopover

before	after

EuiInputPopover

before	after

EuiTourStep with decoration="none"

before	after

Impact to users

🟢 No implementation updates required on consumer side.

⚠️ If tests check popover position, they likely fail and require update. Otherwise, snapshot tests might also fail based on updated props.

QA

🧪 Storybook:

Checks:

verify EuiPopover updates are correct and that manually set props apply as expected
- it's rendered without arrow by default
- its default position is downLeft
- its default offset is 4 with hasArrow=false and 0 with hasArrow=0 (same as production)
verify EuiInputPopover has a default offset of 2
verify EuiTourStep with decoration="none" does not render an arrow by default (applying hasArrow will still override this)
verify there is otherwise no unexpected regression between production and staging states

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)
- If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)
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)

JoseLuisGJ · 2025-11-17T17:34:41Z

LGTM @mgadewoll BTW the related Figma component was added to the new Borealis library and is using the same new defaults here

mgadewoll · 2025-11-18T08:26:49Z

LGTM @mgadewoll BTW the related Figma component was added to the new Borealis library and is using the same new defaults here

@JoseLuisGJ Awesome, thanks a lot for the update! 🎉

JoseLuisGJ · 2025-11-18T08:50:14Z

Not sure which version of EUI are we using in Storybook but I see this border in the union of the arrow and the Popover content in dark mode.

mgadewoll · 2025-11-18T09:44:34Z

Not sure which version of EUI are we using in Storybook but I see this border in the union of the arrow and the Popover content in dark mode.

@JoseLuisGJ I can see it on a Retina display in Chrome and only for the left aligned positions (leftUp, leftCenter, leftDown). That means it's most likely related to different sub-pixel calculations which browsers handle differently.

browser	retina	non-retina
Chrome
Safari
Firefox

If we try to change the position further inwards, then other displays look not aligned.

I think it's somewhat of an edge case.
It's only happening for left-aligned popovers because the position depends on the content width. If the width has sub-pixels, it'll be calculated differently (some round up, some down).
Depending on the content it looks fine or not. So the specific content "This is a popover" results in a width that results in exactly that arrow position that results in a visible line due to sub pixels. (also, if you zoom it's fine again)

Examples

looks fine

popover min width

same issue

JoseLuisGJ · 2025-11-19T16:45:27Z

Thanks Lene for the deep research on this rendering issue. This confirms that I was seeng this issue randomly, and it makes sense if it¡s related to the content width. I guess that's a trade off we can assume.

acstll

🟢 Changes on the code side look correct and it's working as expected (checked Storybook following QA steps). Left a single non-blocking comment.

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

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

acstll

I did a second review going through the VRT updates, let me know what you think 🙂

packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Playground.png

packages/eui/.loki/reference/chrome_mobile_Layout_EuiWrappingPopover_Playground.png

acstll · 2025-11-20T11:16:04Z

...loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png

maybe this looks better still centered?

acstll · 2025-11-20T11:16:36Z

packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_VRT.png

this should probably remain centered as well?

Good question. Right now it follows the popover default.
I would agree that centered looks better, but let's get that also agreed on by design. Maybe @JoseLuisGJ could provide an opinion?

ℹ️ That's how it would look like centered:

I agree too centered looks better, as you suggest, let's wait for @JoseLuisGJ's blessing 🙂‍↕️

I agree that initially might be following the Popover default offset, but in this case is more appropriate to center it completely IMO as well.

- triggered by updated popover positioning

…tewidePopover

elasticmachine · 2025-11-21T10:33:53Z

💚 Build Succeeded

History

💚 Build #2010 succeeded 7d9abac
💚 Build #1967 succeeded e72009c
💚 Build #1963 succeeded 6d513e7
💚 Build #1962 succeeded 5557349
💚 Build #1960 succeeded 0db0acd
💚 Build #1959 succeeded 1a0a2c9

cc @mgadewoll

elasticmachine · 2025-11-21T10:48:49Z

💚 Build Succeeded

Buildkite Build
Commit: 2c1dfa7

History

💚 Build #5273 succeeded 7d9abac
💚 Build #5238 succeeded e72009c

cc @mgadewoll

- `@elastic/eui`: `v109.1.0` ⏩ `v109.2.0` - `@elastic/eui-theme-borealis`: `v5.0.0` ⏩ `v5.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) --- ## Changes - Only snapshot updates related to EuiPopover, ToolTip and Table changes (see below) ## Package updates ### `@elastic/eui` v109.2.0 - Updated `EuiFlexItem` to fall back to `grow={true}` if invalid values for `grow` are passed ([#9228](elastic/eui#9228)) - Updated shared button styles in `useEuiButtonColorCSS` to use `euiDisabledSelector` ([#9226](elastic/eui#9226)) - Added `euiTextTruncateCSS` Emotion style utility ([#9231](elastic/eui#9231)) - Added `hasBackground` prop on `EuiTable`, `EuiBasicTable` and `EuiInMemoryTable` ([#9224](elastic/eui#9224)) - Added component token `components.tableFooterBackground` ([#9224](elastic/eui#9224)) - Updated the color of mobile table header cells to use `colors.textSubdued` ([#9224](elastic/eui#9224)) - Updated `EuiSuperDatePicker` to show a tooltip with the full range details when the button displays a pretty duration e.g. "Last 15 minutes" ([#9221](elastic/eui#9221)) - Updated `EuiPopover` default prop values of `hasArrow`, `position` and `offset`: ([#9218](elastic/eui#9218)) - Changed `hasArrow` to `false` - Changed `position` to `downLeft` - Changed `offset` to `4` when `hasArrow=false` - Updated `EuiInputPopover` `offset` default value to `2` ([#9218](elastic/eui#9218)) - Updated `EuiTourStep` to not apply `hasArrow=true` by default when `decoration="none"` ([#9218](elastic/eui#9218)) - Updated `EuiSuperDatePicker` to have a more forgiving manual input for absolute dates. ([#9199](elastic/eui#9199)) **Bug fixes** - Updated EuiButtonGroup disabled style selectors to use `euiDisabledSelector` to ensure high contrast mode styles apply correctly ([#9226](elastic/eui#9226)) - Updated `EuiSuperDatePicker` to ensure its pretty format button dates are truncated correctly ([#9231](elastic/eui#9231)) - Fixed a visual bug for mobile table action buttons that causes shifting positions when changing color mode ([#8231](elastic/eui#8231)) ([#9224](elastic/eui#9224)) **Accessibility** - Improved the navigation of sibling `EuiToolTip` anchor elements in NVDA browse mode by adding an `id` to ensure they are unique ([#9208](elastic/eui#9208)) ### `@elastic/eui-theme-borealis` v5.1.0 - Added component token `components.tableFooterBackground` ([#9224](elastic/eui#9224)) --------- Co-authored-by: Jorge Sanz <[email protected]> Co-authored-by: Lene Gadewoll <[email protected]>

- `@elastic/eui`: `v109.1.0` ⏩ `v109.2.0` - `@elastic/eui-theme-borealis`: `v5.0.0` ⏩ `v5.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) --- ## Changes - Only snapshot updates related to EuiPopover, ToolTip and Table changes (see below) ## Package updates ### `@elastic/eui` v109.2.0 - Updated `EuiFlexItem` to fall back to `grow={true}` if invalid values for `grow` are passed ([elastic#9228](elastic/eui#9228)) - Updated shared button styles in `useEuiButtonColorCSS` to use `euiDisabledSelector` ([elastic#9226](elastic/eui#9226)) - Added `euiTextTruncateCSS` Emotion style utility ([elastic#9231](elastic/eui#9231)) - Added `hasBackground` prop on `EuiTable`, `EuiBasicTable` and `EuiInMemoryTable` ([elastic#9224](elastic/eui#9224)) - Added component token `components.tableFooterBackground` ([elastic#9224](elastic/eui#9224)) - Updated the color of mobile table header cells to use `colors.textSubdued` ([elastic#9224](elastic/eui#9224)) - Updated `EuiSuperDatePicker` to show a tooltip with the full range details when the button displays a pretty duration e.g. "Last 15 minutes" ([elastic#9221](elastic/eui#9221)) - Updated `EuiPopover` default prop values of `hasArrow`, `position` and `offset`: ([elastic#9218](elastic/eui#9218)) - Changed `hasArrow` to `false` - Changed `position` to `downLeft` - Changed `offset` to `4` when `hasArrow=false` - Updated `EuiInputPopover` `offset` default value to `2` ([elastic#9218](elastic/eui#9218)) - Updated `EuiTourStep` to not apply `hasArrow=true` by default when `decoration="none"` ([elastic#9218](elastic/eui#9218)) - Updated `EuiSuperDatePicker` to have a more forgiving manual input for absolute dates. ([elastic#9199](elastic/eui#9199)) **Bug fixes** - Updated EuiButtonGroup disabled style selectors to use `euiDisabledSelector` to ensure high contrast mode styles apply correctly ([elastic#9226](elastic/eui#9226)) - Updated `EuiSuperDatePicker` to ensure its pretty format button dates are truncated correctly ([elastic#9231](elastic/eui#9231)) - Fixed a visual bug for mobile table action buttons that causes shifting positions when changing color mode ([elastic#8231](elastic/eui#8231)) ([elastic#9224](elastic/eui#9224)) **Accessibility** - Improved the navigation of sibling `EuiToolTip` anchor elements in NVDA browse mode by adding an `id` to ensure they are unique ([elastic#9208](elastic/eui#9208)) ### `@elastic/eui-theme-borealis` v5.1.0 - Added component token `components.tableFooterBackground` ([elastic#9224](elastic/eui#9224)) --------- Co-authored-by: Jorge Sanz <[email protected]> Co-authored-by: Lene Gadewoll <[email protected]>

…ck on its content (#245162) ## Summary This PR fixes a UI issue with the `kbn-cell-actions` rendering in hover mode. A recent [EUI PR](#244032) made a change to the default `offset` value: ### Context ``` - Updated EuiPopover default prop values of hasArrow, position and offset: (elastic/eui#9218) - Changed hasArrow to false - Changed position to downLeft - Changed offset to 4 when hasArrow=false ``` This offset change ended up making our cell actions almost unusable, as the gap that is now present between the hovered content and the content of the `EuiPopover` is not 4 pixels (instead of previously 0). This means that when leaving the hovered content and before reaching the `EuiPopover` content, the popover is actually being removed... Before the EUI `109.2.0` commit https://github.com/user-attachments/assets/4ff1e2ef-38cc-486e-a236-1df400b2a5d0 Right at the EUI `109.2.0` commit https://github.com/user-attachments/assets/e4af2ca6-36fc-48e9-aee7-c8a9fc00ede3 ### Solution Add `offset={0}` to the `EuiPopover` in the `kbn-cell-actions` package. That way we do not have to change the UI and the correct behavior is restored. ### Checklist - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [x] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels.

- `@elastic/eui`: `v109.1.0` ⏩ `v109.2.0` - `@elastic/eui-theme-borealis`: `v5.0.0` ⏩ `v5.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) --- ## Changes - Only snapshot updates related to EuiPopover, ToolTip and Table changes (see below) ## Package updates ### `@elastic/eui` v109.2.0 - Updated `EuiFlexItem` to fall back to `grow={true}` if invalid values for `grow` are passed ([elastic#9228](elastic/eui#9228)) - Updated shared button styles in `useEuiButtonColorCSS` to use `euiDisabledSelector` ([elastic#9226](elastic/eui#9226)) - Added `euiTextTruncateCSS` Emotion style utility ([elastic#9231](elastic/eui#9231)) - Added `hasBackground` prop on `EuiTable`, `EuiBasicTable` and `EuiInMemoryTable` ([elastic#9224](elastic/eui#9224)) - Added component token `components.tableFooterBackground` ([elastic#9224](elastic/eui#9224)) - Updated the color of mobile table header cells to use `colors.textSubdued` ([elastic#9224](elastic/eui#9224)) - Updated `EuiSuperDatePicker` to show a tooltip with the full range details when the button displays a pretty duration e.g. "Last 15 minutes" ([elastic#9221](elastic/eui#9221)) - Updated `EuiPopover` default prop values of `hasArrow`, `position` and `offset`: ([elastic#9218](elastic/eui#9218)) - Changed `hasArrow` to `false` - Changed `position` to `downLeft` - Changed `offset` to `4` when `hasArrow=false` - Updated `EuiInputPopover` `offset` default value to `2` ([elastic#9218](elastic/eui#9218)) - Updated `EuiTourStep` to not apply `hasArrow=true` by default when `decoration="none"` ([elastic#9218](elastic/eui#9218)) - Updated `EuiSuperDatePicker` to have a more forgiving manual input for absolute dates. ([elastic#9199](elastic/eui#9199)) **Bug fixes** - Updated EuiButtonGroup disabled style selectors to use `euiDisabledSelector` to ensure high contrast mode styles apply correctly ([elastic#9226](elastic/eui#9226)) - Updated `EuiSuperDatePicker` to ensure its pretty format button dates are truncated correctly ([elastic#9231](elastic/eui#9231)) - Fixed a visual bug for mobile table action buttons that causes shifting positions when changing color mode ([elastic#8231](elastic/eui#8231)) ([elastic#9224](elastic/eui#9224)) **Accessibility** - Improved the navigation of sibling `EuiToolTip` anchor elements in NVDA browse mode by adding an `id` to ensure they are unique ([elastic#9208](elastic/eui#9208)) ### `@elastic/eui-theme-borealis` v5.1.0 - Added component token `components.tableFooterBackground` ([elastic#9224](elastic/eui#9224)) --------- Co-authored-by: Jorge Sanz <[email protected]> Co-authored-by: Lene Gadewoll <[email protected]>

…ck on its content (elastic#245162) ## Summary This PR fixes a UI issue with the `kbn-cell-actions` rendering in hover mode. A recent [EUI PR](elastic#244032) made a change to the default `offset` value: ### Context ``` - Updated EuiPopover default prop values of hasArrow, position and offset: (elastic/eui#9218) - Changed hasArrow to false - Changed position to downLeft - Changed offset to 4 when hasArrow=false ``` This offset change ended up making our cell actions almost unusable, as the gap that is now present between the hovered content and the content of the `EuiPopover` is not 4 pixels (instead of previously 0). This means that when leaving the hovered content and before reaching the `EuiPopover` content, the popover is actually being removed... Before the EUI `109.2.0` commit https://github.com/user-attachments/assets/4ff1e2ef-38cc-486e-a236-1df400b2a5d0 Right at the EUI `109.2.0` commit https://github.com/user-attachments/assets/e4af2ca6-36fc-48e9-aee7-c8a9fc00ede3 ### Solution Add `offset={0}` to the `EuiPopover` in the `kbn-cell-actions` package. That way we do not have to change the UI and the correct behavior is restored. ### Checklist - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [x] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels.

mgadewoll requested a review from ryankeairns November 17, 2025 08:32

mgadewoll self-assigned this Nov 17, 2025

mgadewoll force-pushed the popover/9184-updated-arrow-default branch 3 times, most recently from 6d513e7 to e72009c Compare November 17, 2025 11:59

mgadewoll marked this pull request as ready for review November 17, 2025 12:32

mgadewoll requested a review from a team as a code owner November 17, 2025 12:32

mgadewoll requested review from JoseLuisGJ and removed request for ryankeairns November 17, 2025 12:38

JoseLuisGJ approved these changes Nov 17, 2025

View reviewed changes

acstll self-requested a review November 20, 2025 10:50

acstll approved these changes Nov 20, 2025

View reviewed changes

packages/eui/src/components/popover/popover.tsx Show resolved Hide resolved

packages/eui/src/components/tour/tour_step.tsx Show resolved Hide resolved

acstll reviewed Nov 20, 2025

View reviewed changes

mgadewoll force-pushed the popover/9184-updated-arrow-default branch from 3970140 to 31c6626 Compare November 20, 2025 11:46

mgadewoll added 10 commits November 21, 2025 11:13

refactor: update popover defaults

793b84a

docs(storybook): ensure updated prop defaults are output

311056b

test: update snapshots

414e2f4

test(vrt): update reference images

2833e77

test: update React17 test snapshot

6b46817

test: update cypress test positions

d5d84ce

- triggered by updated popover positioning

chore: add changelog

324db24

test(vrt): adjust timeout to ensure VRT images are taken on time

9f9587c

refactor: set fixed popover anchorPosition on EuiSelectableTemplateSi…

38029a4

…tewidePopover

test(vrt) update reference images

2c1dfa7

mgadewoll force-pushed the popover/9184-updated-arrow-default branch from 7d9abac to 2c1dfa7 Compare November 21, 2025 10:15

mgadewoll enabled auto-merge (squash) November 21, 2025 10:15

mgadewoll disabled auto-merge November 21, 2025 10:17

mgadewoll merged commit 1ad8cd9 into elastic:main Nov 21, 2025
7 checks passed

JasonStoltz mentioned this pull request Nov 24, 2025

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

Closed

weronikaolejniczak mentioned this pull request Nov 24, 2025

Update EUI to 109.2.0 elastic/kibana#244032

Merged

ryankeairns mentioned this pull request Dec 1, 2025

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

Closed

13 tasks

[EuiPopover] Change hasArrow, position and offset defaults #9218

[EuiPopover] Change hasArrow, position and offset defaults #9218

Uh oh!

Conversation

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

Uh oh!

Summary

Why are we making this change?

Screenshots #

Impact to users

QA

General checklist

Uh oh!

JoseLuisGJ commented Nov 17, 2025

Uh oh!

mgadewoll commented Nov 18, 2025

Uh oh!

JoseLuisGJ commented Nov 18, 2025

Uh oh!

mgadewoll commented Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

JoseLuisGJ commented Nov 19, 2025

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

acstll Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

acstll Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

mgadewoll Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

mgadewoll Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

acstll Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

JoseLuisGJ Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Nov 21, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Nov 21, 2025

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[EuiPopover] Change `hasArrow`, `position` and `offset` defaults #9218

[EuiPopover] Change `hasArrow`, `position` and `offset` defaults #9218

mgadewoll commented Nov 17, 2025 •

edited

Loading

mgadewoll commented Nov 18, 2025 •

edited

Loading