Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ryankeairns wants to merge 12 commits into from
Closed

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
cfa8bf1
feat(EuiPopover): change default offset and disable arrow by default
ryankeairns Oct 7, 2025
5f1f670
Add changelog for EuiPopover changes
ryankeairns Oct 8, 2025
34c1bed
Fix EuiPopover positioning algorithm for accurate fit calculations
ryankeairns Oct 17, 2025
68fc610
Update visual regression baselines for popover positioning fix
ryankeairns Oct 17, 2025
1343c3f
Update unit tests for popover positioning changes
ryankeairns Oct 17, 2025
4a42303
Update Jest snapshots for popover positioning changes
ryankeairns Oct 17, 2025
3f45af2
Remove unused offset parameter from euiPopoverPanelStyles
ryankeairns Oct 17, 2025
c133aee
Update test expectations for popover positioning changes
ryankeairns Oct 17, 2025
71defc6
Update React 17 snapshot for keyboard shortcuts test
ryankeairns Oct 17, 2025
b20188f
Fix additional focus assertion timing issues in draggable_columns tests
ryankeairns Oct 20, 2025
f2f7281
Fix Cypress test: click toolbar instead of popover-covered area
ryankeairns Oct 20, 2025
fcd75f2
Merge branch 'main' into rk/8931-popover-hide-arrow
ryankeairns Oct 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_High_Contrast.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_High_Contrast_Mode.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_High_Contrast.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...oki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_High_Contrast_Mode.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions packages/eui/changelogs/upcoming/9086.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- Changed `EuiPopover` defaults for `hasArrow`, `anchorPosition`, and `offset` for more modern look
22 changes: 2 additions & 20 deletions packages/eui/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: 16px; left: -3px; 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"
Expand Down Expand Up @@ -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: 16px; left: -3px; 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"
Expand Down
11 changes: 1 addition & 10 deletions packages/eui/src/components/breadcrumbs/__snapshots__/_breadcrumb_content.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: 3px; left: 16px; 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"
Expand Down
11 changes: 1 addition & 10 deletions packages/eui/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: 3px; left: 16px; 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"
Expand Down
11 changes: 1 addition & 10 deletions packages/eui/src/components/code/__snapshots__/code_block_annotations.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: 3px; left: 16px; 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"
Expand Down
13 changes: 2 additions & 11 deletions ...ble_nav_beta/_kibana_solution/__snapshots__/collapsible_nav_kibana_solution.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: 16px; left: 3px; 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"
Expand Down Expand Up @@ -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: 16px; z-index: 2000; inline-size: 0px;"
tabindex="0"
>
<p
Expand Down
4 changes: 2 additions & 2 deletions ..._nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_button.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,11 @@ exports[`EuiCollapsedNavButton renders a tooltip around the icon button 1`] = `
id="generated-id"
position="left"
role="tooltip"
style="top: -10px; left: -16px;"
style="top: 16px; left: -16px;"
>
<div
class="euiToolTip__arrow emotion-euiToolTip__arrow-left"
style="top: 3px; left: 100%;"
style="top: -23px; left: 100%;"
/>
<div>
Nav item
Expand Down
11 changes: 1 addition & 10 deletions ...nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: 16px; left: 3px; 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"
Expand Down
2 changes: 1 addition & 1 deletion ...onents/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: 16px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;"
>
<div>
<div
Expand Down
2 changes: 1 addition & 1 deletion packages/eui/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: 16px; z-index: 2000; inline-size: 0px;"
>
<div>
<div
Expand Down
4 changes: 2 additions & 2 deletions packages/eui/src/components/context_menu/__snapshots__/context_menu_item.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ exports[`EuiContextMenuItem tooltip behavior 1`] = `
id="generated-id"
position="top"
role="tooltip"
style="top: -16px; left: -10px;"
style="top: -16px; left: 16px;"
>
<div
class="euiToolTip__title emotion-euiToolTip__title"
Expand All @@ -100,7 +100,7 @@ exports[`EuiContextMenuItem tooltip behavior 1`] = `
</div>
<div
class="euiToolTip__arrow emotion-euiToolTip__arrow-top"
style="left: 3px; top: 100%;"
style="left: -23px; top: 100%;"
/>
<div>
tooltip content
Expand Down
6 changes: 3 additions & 3 deletions packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,8 +218,8 @@ describe('EuiDataGridCellPopover', () => {

openCellPopover('A');
cy.get('[data-test-subj="euiDataGridExpansionPopover"]')
.should('have.css', 'left', '1px')
.should('have.css', 'top', '72px')
.should('have.css', 'left', '16px')
.should('have.css', 'top', '75px')
.should('have.css', 'width', '112px');
});

Expand All @@ -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', '75px')
.should('have.css', 'width', '375px');
});

Expand Down
2 changes: 1 addition & 1 deletion packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: 3px; left: 16px; will-change: transform, opacity; max-inline-size: min(75vw, max(0px, 400px)); max-block-size: 50vh; z-index: 1000;"
tabindex="0"
>
<p
Expand Down
11 changes: 1 addition & 10 deletions packages/eui/src/components/datagrid/body/header/__snapshots__/column_actions.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,18 +42,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: 7px; left: 16px; 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"
Expand Down
12 changes: 6 additions & 6 deletions packages/eui/src/components/datagrid/body/header/draggable_columns.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,8 +232,8 @@ describe('draggable columns', () => {
cy.get('[data-popover-open]').should('have.focus');

cy.get('[data-test-subj=dataGridHeaderCell-a]').realClick();
cy.get('[data-test-subj=dataGridHeaderCell-a]').should('have.focus');
cy.get('[data-popover-open]').should('not.exist');
cy.get('[data-test-subj=dataGridHeaderCell-a]').should('have.focus');

// Should not interefere with column actions popover toggle
cy.wait(250);
Expand All @@ -252,8 +252,8 @@ describe('draggable columns', () => {
cy.get('[data-popover-open]').should('have.focus');

cy.get('[data-test-subj=dataGridHeaderCell-b]').realClick();
cy.get('[data-test-subj=dataGridHeaderCell-b]').should('have.focus');
cy.get('[data-popover-open]').should('not.exist');
cy.get('[data-test-subj=dataGridHeaderCell-b]').should('have.focus');
});

it('should close row cell expansion popovers', () => {
Expand All @@ -268,8 +268,8 @@ describe('draggable columns', () => {
cy.get('[data-test-subj=dataGridHeaderCell-a]').realClick({
position: 'right',
});
cy.get('[data-test-subj=dataGridHeaderCell-a]').should('have.focus');
cy.get('[data-popover-open]').should('not.exist');
cy.get('[data-test-subj=dataGridHeaderCell-a]').should('have.focus');
});

it('should close data grid toolbar popovers', () => {
Expand All @@ -278,10 +278,10 @@ describe('draggable columns', () => {
cy.get('[data-test-subj="dataGridColumnSelectorButton"]').realClick();
cy.get('[data-popover-open]').should('have.focus');

cy.get('[data-test-subj=dataGridHeaderCell-a]').realClick({
position: 'right',
// Click on the toolbar area (outside the popover) to dismiss it
cy.get('[data-test-subj="dataGridControls"]').realClick({
position: 'center',
Comment on lines +281 to +283
Copy link
Contributor Author

@ryankeairns ryankeairns Oct 21, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)

Image

Without arrow (after)
Image

});
cy.get('[data-test-subj=dataGridHeaderCell-a]').should('have.focus');
cy.get('[data-popover-open]').should('not.exist');
});
});
Expand Down
11 changes: 1 addition & 10 deletions packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: 3px; left: 16px; 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"
Expand Down
11 changes: 1 addition & 10 deletions packages/eui/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: 3px; left: 16px; 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"
Expand Down
11 changes: 1 addition & 10 deletions packages/eui/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: 3px; left: 16px; 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"
Expand Down
22 changes: 2 additions & 20 deletions packages/eui/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: 3px; left: 16px; 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"
Expand Down Expand Up @@ -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: 3px; left: 16px; 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"
Expand Down
Loading