[Flyout System] Ensure the push padding for managed flyout does not remain for other session #9207
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
Closed
10 tasks
tsullivan
changed the title
tsullivan
changed the title
tsullivan
commented
Nov 11, 2025
| * before child components render. This prevents RemoveScrollBar from measuring the body | ||
| * in an inconsistent state during flyout transitions. | ||
| */ | ||
| useLayoutEffect(() => { |
Member
Author
There was a problem hiding this comment.
Moving the padding logic into useLayoutEffect ensures the body is updated before paint and before any measurement by scroll-lock utilities
tsullivan
commented
Nov 11, 2025
| const managerSide = side === 'left' ? 'left' : 'right'; | ||
|
|
||
| // EUI doesn't use this css variable, but it is useful for consumers | ||
| if (shouldApplyPadding) { |
Member
Author
There was a problem hiding this comment.
The code inside the if and else handle where padding should be set or cleared based on a push flyout being active in its session
tsullivan
added
the
skip-changelog
tsullivan
changed the title
Member
Author
|
/ci |
Member
|
Changes look good and work as expected. I see that the branch history is a bit broken - @tsullivan would you be able to discard the old merge commits and rebase/merge the latest |
tkajtoch
force-pushed
the
feat/flyout-system
branch
from
41f8990 to
e2b53f0
Compare
…dding only for active flyouts and disabling scroll lock for overlay flyouts when push padding exists.
tsullivan
force-pushed
the
flyout-system/fix-overlay-subsequent
branch
from
416f2b2 to
1b725ae
Compare
Collaborator
💚 Build SucceededHistory
|
Collaborator
💚 Build Succeeded
History
|
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
This fix makes push padding conditional for managed push flyouts: padding is only applied when the flyout is active in its session. When a flyout becomes active, it updates push padding data in the Flyout Manager's state. When a flyout becomes inactive, it explicitly clears the padding.
Unmanaged push flyouts continue to behave as before, always applying padding.
Why are we making this change?
Closes #9159
Screenshots #
Before
After
Impact to users
Higher quality UX when multiple flyout sessions are used and they are configured differently.
QA
Remove or strikethrough items that do not apply to your PR.
General checklist
[ ] Checked in both MacOS and Windows high contrast modes(emulate forced colors if you do not have access to a Windows machine.)[ ] Added documentation[ ] Props have proper autodocs (using@defaultif default values are missing) and playground toggles[ ] Checked Code Sandbox works for any docs examples[ ] Updated visual regression tests[ ] 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)[ ] 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)