[Flyout System] Integrate unmanaged EuiFlyout animations with state transition animations of managed flyouts

[tkajtoch]

Summary

Note: This PR targets the feat/flyout-system feature branch and needs rebasing. Please review #9025 first.

Resolves #8990

Why are we making this change?

As part of the Flyout System work, we need to update and improve flyout animations. This work includes:

• Updating managed flyouts to support the new isOpen prop and call addFlyout and closeFlyout accordingly
• Updating managed flyouts activity stage-based animations to work alongside the updated flyout animations

Impact to users

This PR gets merged into a feature branch, and the work is considered WIP. There's no impact to users at this point other than the temporary removal of EuiOverlayMask from EuiFlyout that'll be re-added in #8989.

QA

Please note that the shopping cart storybook example is outdated and doesn't reflect the expected real world usage of the flyout system. It's expected that closing the Item details flyout is not animated when closing the Shopping cart flyout.

• Go to /?path=/story/layout-euiflyout-flyout-manager--flyout-child-demo (link TBD) and confirm the opening and closing of main and child flyouts is fully animated and there's no "choppiness" observed
  • Confirm that transitioning between Shopping cart and Review order flyouts is animated correctly
  • Confirm that closing Review order flyout reopens Shopping cart in an animated way
• Go to /?path=/story/layout-euiflyout-flyout-manager--fill-mode and confirm the opening and closing of fill size flyouts animates as expected

General checklist

• Browser QA
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Added or updated jest and cypress tests
  • Updated visual regression tests
• Release checklist

[tsullivan]

Updating managed flyouts to support the new isOpen prop and call addFlyout and closeFlyout accordingly

@tkajtoch @acstll I'm concerned the isOpen prop will be a new requirement for consuming EuiFlyout and will impede consumers from migrating into the Flyout System. There was an informal promise that consumers would just need to add session={true} to the EuiFlyout to make that happen.

I don't see a problem with it temporarily, but long-term we should make it as easy as possible to switch existing flyouts into managed session flyouts.

[tsullivan]

Tested the PR and I think I have a fix for the bug where the "child" flyout of a previous session stays visible when the next session is loaded.

[tsullivan]

When I apply this fix: #9052 into this branch, I see an issue with using a fill-mode main flyout and opening a child. The session does not apply the calculated resizes until the child animation is done.

animation-bug-fill-mode-with-child.mov

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 8060a57
• Documentation website
• Storybook

History

• 💚 Build #1285 succeeded b528850
• 💔 Build #1234 failed b36b43d

cc @acstll @tkajtoch

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 8060a57

History

• 💚 Build #4748 succeeded b528850
• 💔 Build #4708 failed b36b43d

cc @acstll @tkajtoch

[acstll]

I'm concerned the isOpen prop will be a new requirement for consuming EuiFlyout and will impede consumers from migrating into the Flyout System

I double-checked and, if I'm not mistaken, isOpen is not required for the system to work, only the animations won't will be missing, if that makes sense.

I don't see a problem with it temporarily, but long-term we should make it as easy as possible to switch existing flyouts into managed session flyouts.

@tsullivan that means we can merge this now (if we consider the bug described above minor)?

[tsullivan]

@acstll

I double-checked and, if I'm not mistaken, isOpen is not required for the system to work, only the animations will be missing, if that makes sense.

I've also checked and can confirm this. I initially got concerned from looking at the changes to the storybook files. When I tested locally without the changes made to the storybook files, everything does still work, but the opening of flyouts isn't animated.

@tsullivan that means we can merge this now (if we consider the #9015 (comment) minor)?

Yes, that bug is minor. I'm OK with approving this!

[tsullivan]

LGTM! Thanks for double-checking everything in regards to the isOpen prop

[acstll]

Apart from the issue found by @tsullivan, described above, I found another one I'll post below. This we would need to double-check and if needed, create a separate issue. (Posting here because it's related.)

• closing flyouts with the close button triggers no exit animation; closing it with the ESC key does, but
  • exit animation for child flyouts has a different z-index than enter

Kapture.2025-09-26.at.16.31.23.mp4

cc @tkajtoch