[Flyout system] Improve flyout animations #9025
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ternal `onAnimationEnd` handler
…w down the animation slightly
…unt for the added `<div>` wrapper
… EuiOverlayMask support is added back
… that render EuiFlyout
tkajtoch
added
the
skip-changelog
9 tasks
tkajtoch
commented
Sep 16, 2025
| // of the animations into a tailspin. One option would be to flat-out _hide_ this | ||
| // mask. :shrug: | ||
| if (hasOverlayMask) { | ||
| }> = ({ children, hasOverlayMask, isPortalled }) => { |
Member
Author
There was a problem hiding this comment.
The overlay mask is temporarily removed for easier implementation of other features. We have a separate issue to add it back: #8989
tkajtoch
commented
Sep 16, 2025
| id="id" | ||
| role="dialog" | ||
| style="inline-size: 240px;" | ||
| <div> |
Member
Author
There was a problem hiding this comment.
This and a couple other snapshots differ because of the EuiOverlayMask change I added a comment about below. We'll revert these back when EuiOverlayMask is fixed here: #8989
tkajtoch
changed the title
isOpen prop for better opening and closing animations
Collaborator
💚 Build SucceededHistory
cc @tkajtoch |
Collaborator
💚 Build Succeeded
History
cc @tkajtoch |
acstll
approved these changes
Sep 16, 2025
Contributor
acstll
left a comment
acstll
left a comment
There was a problem hiding this comment.
🟢 Thanks for creating separate PRs!
acstll
pushed a commit
to acstll/eui
that referenced
this pull request
Sep 17, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Resolves #8896
This PR improves the existing opening animation and introduces a new closing animation when the new optional
isOpenprop is used.Why are we making this change?
This work is needed for the flyout system initiative and is a prerequisite to the managed flyout changes in this PR: #9015
Impact to users
The added
isOpenandonClosingprops are optional, and the changes should have no impact to end users. There's a small snapshot difference because of the new class names, but it should be very easy to sort out by consumers who use snapshot tests.QA
Please note that these changes do not affect managed flyouts since managed flyouts are not aware of the new
isOpenprop needed for the closing animation to work. This work is included in #9015.General checklist
@defaultif default values are missing) and playground toggles