[EuiFlyout] Support `hasAnimation=false` for overlay flyouts by mgadewoll · Pull Request #9428 · elastic/eui

mgadewoll · 2026-03-05T13:21:23Z

Summary

This PR updates EuiFlyout and EuiOverlayMask to support disabling animations for flyouts with type="overlay".
Previously the prop pushAnimation only applied to flyouts with type="push".

Changes

Updated EuiFlyout to apply noAnimation styles dependent on pushAnimation only and independently of type
Added hasAnimation on EuiFlyout (replaces deprecated pushAnimation prop)
Added hasAnimation prop on EuiOverlayMask to conditionally add animation styles to match behaviours when used with flyouts

Why are we making this change?

💪 Feature request: This update was requested by @justinkambic to prevent animations when re-opening previously opened flyouts.

Screenshots #

EuiFlyout

`hasAnimation=true`	`hasAnimation=false`
Screen.Recording.2026-03-05.at.14.27.20.mov	Screen.Recording.2026-03-05.at.14.27.30.mov
Screen.Recording.2026-03-05.at.14.27.52.mov	Screen.Recording.2026-03-05.at.14.28.06.mov

EuiOverlayMask

`hasAnimation=true`	`hasAnimation=false`
Screen.Recording.2026-03-05.at.14.28.58.mov	Screen.Recording.2026-03-05.at.14.28.49.mov

Impact to users

🟢 This is an opt-in feature. There are no changes required on consumer side.

QA

verify that EuiFlyout (story) with type="overlay" renders with animation when pushAnimation=true
verify that EuiFlyout (story) with type="overlay" renders without animation when pushAnimation=false
verify that EuiOverlayMask (story) renders with animation when hasAnimation=true
verify that EuiOverlayMask (story) renders without animation when hasAnimation=false

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)

iblancof · 2026-03-05T14:27:35Z

Thanks for adding support for disabling animations on the non-push flyouts!

One thing I was wondering about is the naming. The pushAnimation prop seems somewhat tied to the concept of the push type, so I’m not completely sure if it fits with the non-push flyouts.

tkajtoch · 2026-03-05T14:44:22Z

One thing I was wondering about is the naming. The pushAnimation prop seems somewhat tied to the concept of the push type, so I’m not completely sure if it fits with the non-push flyouts.

I agree. We don't want to introduce a breaking change because of this small improvement, but I think it would be worth having a simple animation prop that's in sync with the existing pushAnimation

mgadewoll · 2026-03-05T14:49:48Z

One thing I was wondering about is the naming. The pushAnimation prop seems somewhat tied to the concept of the push type, so I’m not completely sure if it fits with the non-push flyouts.

I agree. We don't want to introduce a breaking change because of this small improvement, but I think it would be worth having a simple animation prop that's in sync with the existing pushAnimation

As you correctly mentioned, I didn't want to introduce a breaking change here.
I agree as well, that the naming isn't the best but it's kind of ok - imho - considering the animation is pushing the flyout into the view 😅

If we feel strongly about this, then adding an additional prop can be an option and we would deprecate pushAnimation and remove it fully after a reasonable deprecation period.

iblancof · 2026-03-05T16:07:01Z

One thing I was wondering about is the naming. The pushAnimation prop seems somewhat tied to the concept of the push type, so I’m not completely sure if it fits with the non-push flyouts.

I agree. We don't want to introduce a breaking change because of this small improvement, but I think it would be worth having a simple animation prop that's in sync with the existing pushAnimation

As you correctly mentioned, I didn't want to introduce a breaking change here. I agree as well, that the naming isn't the best but it's kind of ok - imho - considering the animation is pushing the flyout into the view 😅

If we feel strongly about this, then adding an additional prop can be an option and we would deprecate pushAnimation and remove it fully after a reasonable deprecation period.

Thanks for the quick feedback! I’m happy with whichever direction we decide to go, I just wanted to mention the naming in case it’s something worth considering 👍🏻

justinkambic

This LGTM. I did have a few nits or recommendations, but ultimately you all are the maintainers and thank you for working on this so quickly.

I did some practical verification via the storybook. I haven't stood up EUI DX in a while; you all have done some incredible work maturing the project since then. 👏

packages/eui/src/components/flyout/flyout.styles.ts

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

mgadewoll · 2026-03-06T08:53:03Z

ℹ️ Added hasAnimation prop and a deprecation note for pushAnimation in aafd5bf. (deprecation schedule)

tkajtoch

Thank you for deprecating the pushAnimation prop! Code changes look great and everything works as expected.

aligns it with the component default for overlay flyouts

mgadewoll · 2026-03-17T09:59:40Z

ℹ️ Rebased with latest main.

elasticmachine · 2026-03-17T10:18:29Z

💚 Build Succeeded

History

💚 Build #2886 succeeded 93aae2b
💚 Build #2883 succeeded 7af1402
💚 Build #2867 succeeded cf8c7c0

cc @mgadewoll

elasticmachine · 2026-03-17T10:37:43Z

💚 Build Succeeded

Buildkite Build
Commit: 0e34c52

History

💚 Build #5978 succeeded 93aae2b
💚 Build #5975 succeeded 7af1402
💚 Build #5964 succeeded cf8c7c0

cc @mgadewoll

## 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>

mgadewoll self-assigned this Mar 5, 2026

mgadewoll force-pushed the flyout/support-no-animation-overlay-flyout branch from c5102fb to cf8c7c0 Compare March 5, 2026 13:24

mgadewoll marked this pull request as ready for review March 5, 2026 14:22

mgadewoll requested a review from a team as a code owner March 5, 2026 14:22

tkajtoch self-requested a review March 5, 2026 14:23

justinkambic approved these changes Mar 5, 2026

View reviewed changes

packages/eui/src/components/flyout/flyout.styles.ts Outdated Show resolved Hide resolved

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

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

mgadewoll mentioned this pull request Mar 6, 2026

[Meta] Deprecation and Beta schedule #1469

Open

41 tasks

mgadewoll force-pushed the flyout/support-no-animation-overlay-flyout branch from 9c37802 to 7af1402 Compare March 6, 2026 08:51

mgadewoll changed the title ~~[EuiFlyout] Support pushAnimation=false for overlay flyouts~~ [EuiFlyout] Support hasAnimation=false for overlay flyouts Mar 6, 2026

tkajtoch approved these changes Mar 6, 2026

View reviewed changes

iblancof mentioned this pull request Mar 6, 2026

[Discover] [Traces] Keep waterfall flyout when switching tabs elastic/kibana#254305

Merged

7 tasks

justinkambic mentioned this pull request Mar 6, 2026

[Discover] [Traces] Replace trace flyout animation workaround with EUI native solution elastic/kibana#256531

Closed

mgadewoll added the support-duty-flywheel Label for PRs, see eui-private #310 label Mar 9, 2026

mgadewoll added 7 commits March 17, 2026 10:52

feat: support pushAnimation=false for overlay flyouts

fc0ca15

test: add/update tests

3433527

chore: add changelog

aff7320

chore: cleanup

b6bbee9

refactor: deprecate pushAnimation prop

6271668

chore: update changelog

f8f5d5c

docs(storybook): update hasAnimation control default

0e34c52

aligns it with the component default for overlay flyouts

mgadewoll force-pushed the flyout/support-no-animation-overlay-flyout branch from 93aae2b to 0e34c52 Compare March 17, 2026 09:59

mgadewoll enabled auto-merge (squash) March 17, 2026 10:00

mgadewoll merged commit 5ff6c07 into elastic:main Mar 17, 2026
5 checks passed

acstll mentioned this pull request Mar 25, 2026

Update EUI to v114.0.0 elastic/kibana#259497

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiFlyout] Support `hasAnimation=false` for overlay flyouts#9428

[EuiFlyout] Support `hasAnimation=false` for overlay flyouts#9428
mgadewoll merged 7 commits intoelastic:mainfrom
mgadewoll:flyout/support-no-animation-overlay-flyout

mgadewoll commented Mar 5, 2026 •

edited by tkajtoch

Loading

Uh oh!

iblancof commented Mar 5, 2026

Uh oh!

tkajtoch commented Mar 5, 2026

Uh oh!

mgadewoll commented Mar 5, 2026

Uh oh!

iblancof commented Mar 5, 2026

Uh oh!

justinkambic left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mgadewoll commented Mar 6, 2026 •

edited

Loading

Uh oh!

tkajtoch left a comment

Uh oh!

mgadewoll commented Mar 17, 2026

Uh oh!

elasticmachine commented Mar 17, 2026

Uh oh!

elasticmachine commented Mar 17, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

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

Uh oh!

Summary

Changes

Why are we making this change?

Screenshots #

Impact to users

QA

General checklist

Uh oh!

iblancof commented Mar 5, 2026

Uh oh!

tkajtoch commented Mar 5, 2026

Uh oh!

mgadewoll commented Mar 5, 2026

Uh oh!

iblancof commented Mar 5, 2026

Uh oh!

justinkambic left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mgadewoll commented Mar 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tkajtoch left a comment

Choose a reason for hiding this comment

Uh oh!

mgadewoll commented Mar 17, 2026

Uh oh!

elasticmachine commented Mar 17, 2026

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Mar 17, 2026

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

mgadewoll commented Mar 5, 2026 •

edited by tkajtoch

Loading

mgadewoll commented Mar 6, 2026 •

edited

Loading