Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Components: Fix unwanted ToggleGroupControl backdrop vertical animation #59642

Merged
merged 3 commits into from Mar 6, 2024

Conversation

tyxla
Copy link
Member

@tyxla tyxla commented Mar 6, 2024

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 and layoutRoot to minimize surrounding content changes impact, as recommended by the official docs.

Testing Instructions

  • Verify ToggleGroupControl still works well in Storybook and this introduces no regressions to the backdrop animation.
  • Verify ToggleGroupControl still works well in the editor (font size picker in typography settings for example) - verify this introduces no regressions to the backdrop animation.
  • All checks should be green
  • With Parse.ly dev env locally, you can try it out with PCH: Redesign the PCH Editor Sidebar Parsely/wp-parsely#2238 from the plugin sidebar - cc @acicovic @vaurdan for confirmation

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

@tyxla tyxla added [Type] Enhancement A suggestion for improvement. [Package] Components /packages/components labels Mar 6, 2024
@tyxla tyxla requested review from jsnajdr and a team March 6, 2024 13:52
@tyxla tyxla self-assigned this Mar 6, 2024
@tyxla tyxla requested a review from ajitbohra as a code owner March 6, 2024 13:52
Copy link

github-actions bot commented Mar 6, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @acicovic.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: acicovic.

Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: andrewhayward <andrewhayward@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Copy link
Contributor

@andrewhayward andrewhayward left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From a components point of view 🚀

  • Verified that ToggleGroupControl still works well in Storybook, and no regressions to the backdrop animation are introduced
  • Verified that ToggleGroupControl still works well in the editor, and no regressions to the backdrop animation are introduced
  • Verified that ToggleGroupControl continues to work with "reduce motion" enabled

Will leave the parse.ly testing for folks who know better!

@acicovic
Copy link

acicovic commented Mar 6, 2024

@vaurdan has validated that the fix works for us!

@tyxla
Copy link
Member Author

tyxla commented Mar 6, 2024

Thanks, everyone!

@tyxla tyxla merged commit 0f37efd into trunk Mar 6, 2024
58 checks passed
@tyxla tyxla deleted the fix/toggle-group-unwanted-vertical-animation branch March 6, 2024 20:50
@github-actions github-actions bot added this to the Gutenberg 18.0 milestone Mar 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants