Repository navigation
fix(studio): menus and popovers ease their scale in, not only their opacity - #7583
Merged
Merged
Conversation
Contributor
Edit accuracy: accurate 267 (base branch 267), smooth 107 of thoseThe gate passes. Quarantined, measured but not gated (8)
Unstable (1)
|
![heygengenesis[bot]](https://avatars.githubusercontent.com/in/2913576?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Approving at acf2315e. No blockers.
- The cause is right.
floatingMotionsets the starting style with the standalonescaleproperty, which is separate fromtransform. Listingtransformin the transition never animated it. Changing the list toopacity,scalecovers the only two properties the starting and ending styles set. No caller adds atranslate,rotateortransformstarting style that the old list would have animated. The callers are Menu, Select and Tooltip, plus Popover through Menu's shared classes. - Fails without the fix: I confirmed this locally. With the list put back to
opacity,transform, the new test fails withexpected [ 'opacity', 'transform' ] to include 'scale'(1 failed, 16 passed). With the fix, all 17 tests pass. - The newest CI, PR captures, regression and Windows runs at this head are green. Earlier runs on this head were cancelled or failed, and newer runs replaced them.
Non-blocking: the test reads the class string with a regex. It catches [prop:…] arbitrary values and the opacity/scale/translate/rotate- utilities, but not a raw transform utility. That is enough for a guard on one helper.
Merged
1 of 2 tasks
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Design: menus and popovers open from 85% scale over their open duration; the product's design lead set those values.
What changed
floatingMotion(shared by Menu, Popover, Select and Tooltip) sets the enter and exit state with the standalonescaleproperty but transitionedopacity,transform.scaleis its own CSS property, so it never transitioned: opacity eased and the scale snapped to 100% after the first frame. The transition list is nowopacity,scale; nothing in the shared classes usestransform.Before
A menu opening with Desktop's values (250 ms, 85% start): scale stays
noneat 0, 60, 120, 250 and 400 ms, only opacity eases, so the menu appears at full size.After
Same menu and values: scale reads 0.85, 0.96, 0.99, then none at 250 ms, easing with the opacity.
What I measured
Sampling
getComputedStyle(menu).scaleevery animation frame after opening a menu gave0.85, 0.85, 1, 1before the change, a snap. Menu tests: 17 of 17 pass with the fix.fails without the fix: with the transition list put back to
opacity,transform, the new test "transitions every property its starting and ending styles set" fails (1 failed, 16 passed).What I did NOT exercise
Only the Menu test file was run, on one machine, not the full studio suite. The captures are filmstrips made by seeking the menu's CSS transitions to fixed times in Chromium, not a screen recording.
Size
A one-property fix in a different package from any open PR of mine; nothing else can carry it.