CustomSelectControlV2: animate select popover appearance #63343

ciampo · 2024-07-10T08:49:19Z

What?

Part of #55023

Animate the select popover appearance in the new version of CustomSelectControl

Why?

To make UI interactions feel more polished and to uniform the component with the direction taken in other components.

How?

Using CSS animations to add a fade + slide down animation when the select popover appears

Note

For now, the slide direction in the animation will always be downwards. I tried to detect when Ariakit "flips" the popover from bottom to top for lack of space, so that I could apply a "slide down" animation instead, but I couldn't extract that information from the ariakit store (I tried the same technique used in the DropdownMenuV2 component.

Testing Instructions

Open the CustomSelectControlV2 Storybook default or legacy examples
Open and close the select popover, make sure the animation works
Using browser dev tools (or OS settings), enable the preference for reduced motion. Open and close the select popover again, and make sure that it doesn't animate.

Screenshots or screencast

Before (trunk)	After (this PR)
cscv1.animation.mp4	cscv2.animation.v2.mp4

github-actions · 2024-07-10T08:49:35Z

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.

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

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>

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

jasmussen · 2024-07-10T08:57:29Z

Thanks for sweating these details.

I would expect since this is an element that opens downwards, that the animation reflect that. Right now it appears heavy on the opacity fade, and looks like it animates upwards.

tyxla · 2024-07-10T09:10:36Z

I would expect since this is an element that opens downwards, that the animation reflect that. Right now it appears heavy on the opacity fade, and looks like it animates upwards.

Perhaps if we delay the transform part of the animation a bit?

packages/components/src/custom-select-control-v2/styles.ts

tyxla · 2024-07-10T09:13:27Z

packages/components/src/custom-select-control-v2/styles.ts

@@ -13,6 +13,13 @@ import { chevronIconSize } from '../select-control/styles/select-control-styles'
 import { fontSizeStyles } from '../input-control/styles/input-control-styles';
 import type { CustomSelectButtonSize } from './types';

+// TODO: extract to common utils and apply to relevant components
+const ANIMATION_PARAMS = {
+	SLIDE_AMOUNT: '2px',


Should this be increased in order to make it more obvious that the select options are dropping down?

Now that you changed it to starting from - SLIDE_AMOUNT, it looks good actually 👍 Nice touch!

ciampo · 2024-07-10T10:40:25Z

Hey @jasmussen

I would expect since this is an element that opens downwards, that the animation reflect that

Updated the animation to slide down, instead of up.

cscv2.animation.v2.mp4

Right now it appears heavy on the opacity fade

I'm not sure I understand what tweak you're suggesting to improve the fade.

Also, the opening animation is copied from DropdownMenuV2. Apart from having to refactor common variables / animations in one place (which we'll do at a later point), should I also update DropdownMenuV2 with the resulting feedback received in this PR?

jasmussen · 2024-07-10T10:42:50Z

That feels substantially better! Outside of exploring actual "roll out" animations to animate the height of the dropdown from zero to its max-height, this one feels good to go as a first step.

ciampo · 2024-07-10T10:52:00Z

this one feels good to go as a first step.

Thank you! I'll merge as soon as this PR gets an approval.

Outside of exploring actual "roll out" animations to animate the height of the dropdown from zero to its max-height,

That should be possible soon, when the transition-behavior and the @starting-style CSS features land in all major browsers (example: https://css-tricks.com/transitioning-to-auto-height/) instead of using CSS grid hacks

github-actions · 2024-07-10T10:54:43Z

Flaky tests detected in 449a066.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9872610839
📝 Reported issues:

[Flaky Test] should render embeds in the correct state #37503 in /test/e2e/specs/editor/various/embedding.spec.js

tyxla

LGTM, nice addition 👍 👏 🚀

tyxla · 2024-07-10T14:00:08Z

packages/components/CHANGELOG.md

@@ -41,6 +41,7 @@
 -   `CustomSelectControlV2`: keep item checkmark top aligned. ([#63230](https://github.com/WordPress/gutenberg/pull/63230))
 -   `CustomSelectControlV2`: keep legacy arrow down behavior only for legacy wrapper. ([#62919](https://github.com/WordPress/gutenberg/pull/62919))
 -   `CustomSelectControlV2`: fix trigger button font size. ([#63131](https://github.com/WordPress/gutenberg/pull/63131))
+-   `CustomSelectControlV2`: animate select popover appearance. ([#63343](https://github.com/WordPress/gutenberg/pull/63343))


After rebasing to the latest trunk, we need to move this up under Unreleased.

tyxla · 2024-07-10T14:01:03Z

packages/components/src/custom-select-control-v2/styles.ts

@@ -13,6 +13,13 @@ import { chevronIconSize } from '../select-control/styles/select-control-styles'
 import { fontSizeStyles } from '../input-control/styles/input-control-styles';
 import type { CustomSelectButtonSize } from './types';

+// TODO: extract to common utils and apply to relevant components
+const ANIMATION_PARAMS = {
+	SLIDE_AMOUNT: '2px',


Now that you changed it to starting from - SLIDE_AMOUNT, it looks good actually 👍 Nice touch!

…3343) * CustomSelectControlV2: animate select popover appearance * CHANGELOG * Change from slide up to slide down * update CHANGELOG --- Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org>

ciampo requested a review from ajitbohra as a code owner July 10, 2024 08:49

ciampo mentioned this pull request Jul 10, 2024

CustomSelectControl: refactor with ariakit #55023

Open

85 tasks

ciampo force-pushed the feat/custom-select-control-animation branch from 60004c1 to b65c7ee Compare July 10, 2024 08:52

ciampo self-assigned this Jul 10, 2024

ciampo added [Type] Enhancement A suggestion for improvement. [Package] Components /packages/components labels Jul 10, 2024

ciampo requested review from a team July 10, 2024 08:53

tyxla reviewed Jul 10, 2024

View reviewed changes

ciampo requested a review from tyxla July 10, 2024 10:54

ciampo requested a review from mirka July 10, 2024 12:42

tyxla approved these changes Jul 10, 2024

View reviewed changes

ciampo added 4 commits July 10, 2024 16:08

CustomSelectControlV2: animate select popover appearance

a84a9a2

CHANGELOG

2b24a4d

Change from slide up to slide down

ac42d93

update CHANGELOG

27297a0

ciampo force-pushed the feat/custom-select-control-animation branch from 449a066 to 27297a0 Compare July 10, 2024 14:09

ciampo enabled auto-merge (squash) July 10, 2024 14:10

ciampo disabled auto-merge July 10, 2024 14:43

ciampo enabled auto-merge (squash) July 10, 2024 14:43

ciampo merged commit 6f5de82 into trunk Jul 10, 2024
63 checks passed

ciampo deleted the feat/custom-select-control-animation branch July 10, 2024 14:46

github-actions bot added this to the Gutenberg 18.9 milestone Jul 10, 2024

ciampo mentioned this pull request Jul 11, 2024

DropdownMenuV2: invert animation direction #63443

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CustomSelectControlV2: animate select popover appearance #63343

CustomSelectControlV2: animate select popover appearance #63343

ciampo commented Jul 10, 2024 •

edited

Loading

github-actions bot commented Jul 10, 2024 •

edited

Loading

jasmussen commented Jul 10, 2024

tyxla commented Jul 10, 2024

tyxla Jul 10, 2024

tyxla Jul 10, 2024

ciampo commented Jul 10, 2024

jasmussen commented Jul 10, 2024

ciampo commented Jul 10, 2024 •

edited

Loading

github-actions bot commented Jul 10, 2024

tyxla left a comment

tyxla Jul 10, 2024

ciampo Jul 10, 2024

tyxla Jul 10, 2024

CustomSelectControlV2: animate select popover appearance #63343

CustomSelectControlV2: animate select popover appearance #63343

Conversation

ciampo commented Jul 10, 2024 • edited Loading

What?

Why?

How?

Testing Instructions

Screenshots or screencast

github-actions bot commented Jul 10, 2024 • edited Loading

jasmussen commented Jul 10, 2024

tyxla commented Jul 10, 2024

tyxla Jul 10, 2024

Choose a reason for hiding this comment

tyxla Jul 10, 2024

Choose a reason for hiding this comment

ciampo commented Jul 10, 2024

jasmussen commented Jul 10, 2024

ciampo commented Jul 10, 2024 • edited Loading

github-actions bot commented Jul 10, 2024

tyxla left a comment

Choose a reason for hiding this comment

tyxla Jul 10, 2024

Choose a reason for hiding this comment

ciampo Jul 10, 2024

Choose a reason for hiding this comment

tyxla Jul 10, 2024

Choose a reason for hiding this comment

ciampo commented Jul 10, 2024 •

edited

Loading

github-actions bot commented Jul 10, 2024 •

edited

Loading

ciampo commented Jul 10, 2024 •

edited

Loading