[Flyout System / Flyout Overlay] Pass containerRect to Flyout Overlay by tsullivan · Pull Request #9512 · elastic/eui

tsullivan · 2026-03-16T21:11:32Z

Summary

Fixes the clipping of EuiFlyout overlay mask to the container bounds when the container prop is provided, so the mask no longer covers the full viewport for app-scoped flyouts.

Follow up on elastic/kibana#253800 (comment)

API Changes

component / parent	prop / child	change	description
`EuiFlyoutOverlay`	`containerRect`	Added	When provided, clips the overlay mask to the container's bounding rect rather than covering the full viewport. Passed from EuiFlyoutComponent when a `container` prop is provided.

Screenshots

Before	After

Impact Assessment

~~[ ] 🔴 Breaking changes — What will break? How many usages in Kibana/Cloud UI are impacted?~~
~~[ ] 💅 Visual changes — May impact style overrides; could require visual testing. Explain and estimate impact.~~
~~[ ] 🧪 Test impact — May break functional or snapshot tests (e.g., HTML structure, class names, default values).~~
~~[ ] 🔧 Hard to integrate — If integration is complex, stage commits in Kibana/Cloud UI branches for cherry-picking and link to them below.~~

Impact level: 🟢 None

Release Readiness

~~[ ] Documentation: {link to docs page(s)}~~
~~[ ] Figma: {link to Figma or issue}~~
~~[ ] Migration guide: {steps or link, for breaking/visual changes or deprecations}~~
~~[ ] Adoption plan (new features): {link to issue/doc or outline who will integrate this and where}~~

QA instructions for reviewer

Checklist before marking Ready for Review

Filled out all sections above
QA: Tested light/dark modes, high contrast, mobile, Chrome/Safari/Edge/Firefox, keyboard-only, screen reader
QA: Tested in CodeSandbox and Kibana
~~[ ] QA: Tested docs changes~~
Tests: Added/updated Jest, Cypress, and VRT
Changelog: Added changelog entry
~~[ ] Breaking changes: Added breaking change label (if applicable)~~

Reviewer checklist

Approved Impact Assessment — Acceptable to merge given the consumer impact.
Approved Release Readiness — Docs, Figma, and migration info are sufficient to ship.

Copilot

Pull request overview

Updates EuiFlyout’s overlay mask behavior so that when a container is provided, the mask can be constrained to the container’s bounds instead of always covering the full viewport.

Changes:

Passes containerRect from EuiFlyoutComponent down into EuiFlyoutOverlay.
Extends EuiFlyoutOverlay styling to size/position the EuiOverlayMask using the container’s bounding rect.
Adds a unit test to verify containerRect is passed through; updates related snapshots and adds a changelog entry.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/eui/src/components/flyout/flyout.component.tsx	Passes `containerRect` into the overlay wrapper so the mask can be container-scoped.
packages/eui/src/components/flyout/_flyout_overlay.tsx	Introduces `containerRect` prop + rect-based overlay mask styling.
packages/eui/src/components/flyout/flyout_container.test.tsx	Adds test coverage ensuring `containerRect` is passed to the overlay when `container` is set.
packages/eui/src/components/flyout/snapshots/flyout.test.tsx.snap	Updates snapshot classnames due to overlay style changes.
packages/eui/src/components/collapsible_nav/snapshots/collapsible_nav.test.tsx.snap	Updates snapshot classnames due to flyout overlay style changes.
packages/eui/changelogs/upcoming/9512.md	Documents the container-scoped overlay mask clipping fix.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/eui/src/components/flyout/_flyout_overlay.tsx

…s template literal (which generates a new CSS class on every scroll/resize), positioning is now applied via direct DOM style manipulation through a ref.

tkajtoch

Overall, the code looks great and works as expected. Great work! I found one tiny thing I'd like addressed in this PR so that people playing with this story can actually see the container-scoping functionality working as expected.

packages/eui/src/components/flyout/_flyout_overlay.tsx

…nder

elasticmachine · 2026-03-19T19:43:19Z

💚 Build Succeeded

History

💚 Build #3016 succeeded e13b942
💚 Build #3015 succeeded 12ff48e
💚 Build #3013 succeeded 2f0ceb6
💚 Build #2995 succeeded 6277ba7

elasticmachine · 2026-03-19T20:00:18Z

💚 Build Succeeded

Buildkite Build
Commit: 864178b

History

💚 Build #6080 succeeded e13b942
💚 Build #6079 succeeded 12ff48e
💚 Build #6077 succeeded 2f0ceb6
💚 Build #6064 succeeded 6277ba7

tkajtoch

Thank you for addressing my comment! LGTM

## Dependency updates - `@elastic/eui` - v113.3.0 ⏩ v114.0.0 - `@elastic/eui-theme-borealis` - v6.2.0 ⏩ v7.0.0 - `@elastic/eslint-plugin-eui` - v2.10.0 ⏩ v2.11.0 --- ## Package updates ### [`v114.0.0`](https://github.com/elastic/eui/releases/v114.0.0) - Fixed the clipping of `EuiFlyout` overlay mask to the container bounds when the `container` prop is provided, so the mask no longer covers the full viewport for app-scoped flyouts. ([#9512](elastic/eui#9512)) - Updated `EuiFlyout` to support `pushAnimation` prop for `type="overlay"` ([#9428](elastic/eui#9428)) - Added `hasAnimation` prop on `EuiFlyout` (replaces `pushAnimation`) ([#9428](elastic/eui#9428)) - Added `hasAnimation` prop on `EuiOverlayMask` to conditionally add animation styles ([#9428](elastic/eui#9428)) - Added `historyKey` prop (type `symbol`) to `EuiFlyout` and the flyout manager API to support scoped flyout history. ([#9413](elastic/eui#9413)) - Only flyouts sharing the same `Symbol` reference share Back button navigation and history entries; omitting `historyKey` gives each session its own isolated history group. - `ACTION_CLOSE_ALL` now closes only the current history group rather than all open flyouts. **Bug fixes** - Fixed `EuiTreeView` expanded nodes clipping content and causing sibling overlap when children exceed viewport height ([#9510](elastic/eui#9510)) - Fixed `EuiDataGrid` scroll bouncing back to the focused element in certain cases ([#9453](elastic/eui#9453)) - Fixed support for intraword underscores in `EuiMarkdownFormat` ([#9408](elastic/eui#9408)) **Deprecations** - Deprecated `pushAnimation` prop on `EuiFlyout`. Use `hasAnimation` instead. ([#9428](elastic/eui#9428)) **Breaking changes** - Removed `severity.assistance` color token ([#9507](elastic/eui#9507)) - Removed assistance datavis color tokens: ([#9507](elastic/eui#9507)) - `vis.euiColorVisAssistance` - `vis.euiColorVis10` - `vis.euiColorVis11` - `vis.euiColorVisText10` - `vis.euiColorVisText11` - `vis.euiColorVisBehindText10` - `vis.euiColorVisBehindText11` - The positional signature of `FlyoutManagerApi.addFlyout` and the flyout store's `addFlyout` now includes `historyKey` before the `iconType`/`minWidth` arguments. Call sites that pass arguments positionally must be updated (or switched to named parameters) to account for this new parameter ordering. ([#9413](elastic/eui#9413)) **Accessibility** - Fixed `aria-label` not being applied to `EuiColorPicker`'s input element ([#9436](elastic/eui#9436)) ### @elastic/eui-theme-borealis v7.0.0 **Breaking changes** - Removed `severity.assistance` color token ([#9507](elastic/eui#9507)) - Removed assistance datavis color tokens: ([#9507](elastic/eui#9507)) - `vis.euiColorVisAssistance` - `vis.euiColorVis10` - `vis.euiColorVis11` - `vis.euiColorVisText10` - `vis.euiColorVisText11` - `vis.euiColorVisBehindText10` - `vis.euiColorVisBehindText11` ### @elastic/eslint-plugin-eui v2.11.0 - Updated `no-unnamed-interactive-element` to include checking `EuiColorPicker` ([#9436](elastic/eui#9436)) --------- Co-authored-by: Timothy Sullivan <tsullivan@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Weronika Olejniczak <32842468+weronikaolejniczak@users.noreply.github.com> Co-authored-by: Weronika Olejniczak <weronika.olejniczak@elastic.co>

## Dependency updates - `@elastic/eui` - v113.3.0 ⏩ v114.0.0 - `@elastic/eui-theme-borealis` - v6.2.0 ⏩ v7.0.0 - `@elastic/eslint-plugin-eui` - v2.10.0 ⏩ v2.11.0 --- ## Package updates ### [`v114.0.0`](https://github.com/elastic/eui/releases/v114.0.0) - Fixed the clipping of `EuiFlyout` overlay mask to the container bounds when the `container` prop is provided, so the mask no longer covers the full viewport for app-scoped flyouts. ([elastic#9512](elastic/eui#9512)) - Updated `EuiFlyout` to support `pushAnimation` prop for `type="overlay"` ([elastic#9428](elastic/eui#9428)) - Added `hasAnimation` prop on `EuiFlyout` (replaces `pushAnimation`) ([elastic#9428](elastic/eui#9428)) - Added `hasAnimation` prop on `EuiOverlayMask` to conditionally add animation styles ([elastic#9428](elastic/eui#9428)) - Added `historyKey` prop (type `symbol`) to `EuiFlyout` and the flyout manager API to support scoped flyout history. ([elastic#9413](elastic/eui#9413)) - Only flyouts sharing the same `Symbol` reference share Back button navigation and history entries; omitting `historyKey` gives each session its own isolated history group. - `ACTION_CLOSE_ALL` now closes only the current history group rather than all open flyouts. **Bug fixes** - Fixed `EuiTreeView` expanded nodes clipping content and causing sibling overlap when children exceed viewport height ([elastic#9510](elastic/eui#9510)) - Fixed `EuiDataGrid` scroll bouncing back to the focused element in certain cases ([elastic#9453](elastic/eui#9453)) - Fixed support for intraword underscores in `EuiMarkdownFormat` ([elastic#9408](elastic/eui#9408)) **Deprecations** - Deprecated `pushAnimation` prop on `EuiFlyout`. Use `hasAnimation` instead. ([elastic#9428](elastic/eui#9428)) **Breaking changes** - Removed `severity.assistance` color token ([elastic#9507](elastic/eui#9507)) - Removed assistance datavis color tokens: ([elastic#9507](elastic/eui#9507)) - `vis.euiColorVisAssistance` - `vis.euiColorVis10` - `vis.euiColorVis11` - `vis.euiColorVisText10` - `vis.euiColorVisText11` - `vis.euiColorVisBehindText10` - `vis.euiColorVisBehindText11` - The positional signature of `FlyoutManagerApi.addFlyout` and the flyout store's `addFlyout` now includes `historyKey` before the `iconType`/`minWidth` arguments. Call sites that pass arguments positionally must be updated (or switched to named parameters) to account for this new parameter ordering. ([elastic#9413](elastic/eui#9413)) **Accessibility** - Fixed `aria-label` not being applied to `EuiColorPicker`'s input element ([elastic#9436](elastic/eui#9436)) ### @elastic/eui-theme-borealis v7.0.0 **Breaking changes** - Removed `severity.assistance` color token ([elastic#9507](elastic/eui#9507)) - Removed assistance datavis color tokens: ([elastic#9507](elastic/eui#9507)) - `vis.euiColorVisAssistance` - `vis.euiColorVis10` - `vis.euiColorVis11` - `vis.euiColorVisText10` - `vis.euiColorVisText11` - `vis.euiColorVisBehindText10` - `vis.euiColorVisBehindText11` ### @elastic/eslint-plugin-eui v2.11.0 - Updated `no-unnamed-interactive-element` to include checking `EuiColorPicker` ([elastic#9436](elastic/eui#9436)) --------- Co-authored-by: Timothy Sullivan <tsullivan@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Weronika Olejniczak <32842468+weronikaolejniczak@users.noreply.github.com> Co-authored-by: Weronika Olejniczak <weronika.olejniczak@elastic.co>

…elastic#9512)

tsullivan added 3 commits March 17, 2026 10:54

Pass containerRect to Flyout Overlay

d368a09

unit test for containerRect

1afd50e

add changelog

2f0ceb6

tsullivan force-pushed the flyout/overlay-work-with-container branch from 6277ba7 to 2f0ceb6 Compare March 17, 2026 18:05

tsullivan marked this pull request as ready for review March 17, 2026 18:10

tsullivan requested a review from a team as a code owner March 17, 2026 18:10

Copilot AI review requested due to automatic review settings March 17, 2026 18:10

Copilot started reviewing on behalf of tsullivan March 17, 2026 18:11 View session

Copilot AI reviewed Mar 17, 2026

View reviewed changes

packages/eui/src/components/flyout/_flyout_overlay.tsx Outdated Show resolved Hide resolved

packages/eui/src/components/flyout/_flyout_overlay.tsx Show resolved Hide resolved

tsullivan added 2 commits March 17, 2026 13:43

Instead of interpolating containerRect pixel values into Emotion's cs…

12ff48e

…s template literal (which generates a new CSS class on every scroll/resize), positioning is now applied via direct DOM style manipulation through a ref.

update code comments

e13b942

tkajtoch self-requested a review March 18, 2026 15:42

tkajtoch requested changes Mar 19, 2026

View reviewed changes

packages/eui/src/components/flyout/_flyout_overlay.tsx Outdated Show resolved Hide resolved

toggling ownFocus while the flyout is already open should cause re-re…

864178b

…nder

tkajtoch approved these changes Mar 19, 2026

View reviewed changes

tsullivan merged commit bbcaf3a into elastic:main Mar 19, 2026
5 checks passed

tsullivan deleted the flyout/overlay-work-with-container branch March 19, 2026 21:58

acstll mentioned this pull request Mar 25, 2026

Update EUI to v114.0.0 elastic/kibana#259497

Merged

weronikaolejniczak pushed a commit to weronikaolejniczak/eui that referenced this pull request Apr 7, 2026

[Flyout System / Flyout Overlay] Pass containerRect to Flyout Overlay (…

203e9c6

…elastic#9512)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Flyout System / Flyout Overlay] Pass containerRect to Flyout Overlay#9512

[Flyout System / Flyout Overlay] Pass containerRect to Flyout Overlay#9512
tsullivan merged 6 commits intoelastic:mainfrom
tsullivan:flyout/overlay-work-with-container

tsullivan commented Mar 16, 2026 •

edited by tkajtoch

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

tkajtoch left a comment

Uh oh!

Uh oh!

elasticmachine commented Mar 19, 2026

Uh oh!

elasticmachine commented Mar 19, 2026

Uh oh!

tkajtoch left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

tsullivan commented Mar 16, 2026 • edited by tkajtoch Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

API Changes

Screenshots

Impact Assessment

Release Readiness

QA instructions for reviewer

Checklist before marking Ready for Review

Reviewer checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

tkajtoch left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

elasticmachine commented Mar 19, 2026

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Mar 19, 2026

💚 Build Succeeded

History

Uh oh!

tkajtoch left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

tsullivan commented Mar 16, 2026 •

edited by tkajtoch

Loading