Components: Fix unwanted ToggleGroupControl backdrop vertical animation #59642
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.
What?
This PR updates the
ToggleGroupControl
backdrop animation to be contained inside the component.Why?
To fix an edge case where the backdrop animation will sometimes incorrectly animate outside of the
ToggleGroupControl
component if another surrounding component changes height. I'm unable to repro this in Gutenberg, but it was easily reproducible with the Parse.ly plugin.How?
We're utilizing
layout
andlayoutRoot
to minimize surrounding content changes impact, as recommended by the official docs.Testing Instructions
ToggleGroupControl
still works well in Storybook and this introduces no regressions to the backdrop animation.ToggleGroupControl
still works well in the editor (font size picker in typography settings for example) - verify this introduces no regressions to the backdrop animation.Testing Instructions for Keyboard
None
Screenshots or screencast
Before:
Screen.Recording.2024-03-06.at.15.48.29.mov
After:
Screen.Recording.2024-03-06.at.15.45.52.mov