DropdownMenuV2: invert animation direction #63443
Conversation
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
ciampo
added
[Type] Enhancement
packages/components/CHANGELOG.md
Outdated
| @@ -11,6 +11,7 @@ | |||
| - `CustomSelectControl`: switch to ariakit-based implementation ([#63258](https://github.com/WordPress/gutenberg/pull/63258)). | |||
| - `CustomSelectControlV2`: animate select popover appearance. ([#63343](https://github.com/WordPress/gutenberg/pull/63343)) | |||
| - `CustomSelectControlV2`: do not flip popover if legacy adapter. ([#63357](https://github.com/WordPress/gutenberg/pull/63357)). | |||
| - `CustomSelectControlV2`: invert animation direction. ([#63443](https://github.com/WordPress/gutenberg/pull/63443)). | |||
There was a problem hiding this comment.
It is, but we usually log changes to private APIs in the Internal section
ciampo
force-pushed
the
fix/dropdown-menu-v2-animation
branch
from
61b0bac to
74c3663
Compare
|
Flaky tests detected in 74c3663. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9909119440
|
* DropdownMenuV2: invert animation direction * CHANGELOG * fix CHANGELOG --- Co-authored-by: ciampo <[email protected]> Co-authored-by: tyxla <[email protected]>
* DropdownMenuV2: invert animation direction * CHANGELOG * fix CHANGELOG --- Co-authored-by: ciampo <[email protected]> Co-authored-by: tyxla <[email protected]>
What?
Apply feedback received on
CustomSelectControl's popover animation in #63343 toDropdownMenuV2and invert the direction of the popover enter animation based on the popover placement.Why?
For consistency across the different components.
How?
By swapping left/right and up/down enter animation directions in code,
Testing Instructions
Open the Storybook examples for
DropdownMenuV2, and play with the dropdown popover (both the main one, and the sub-menu ones). Make sure that the popover animates "away from the trigger" — if the popover opens below the trigger, it should slide down; if it opens to the right of the trigger, it should animate towards the right.Note: the applied popover "placement" exposed by Ariakit doesn't take into account when the popover gets "flipped" for lack of viewport estate in the expected direction — and therefore we can not easily reflect that information in the animation.
Screenshots or screencast
ddmv2.animation.before.mp4
ddmv2.animation.after.mp4