Skip to content

Conversation

@ciampo
Copy link
Contributor

@ciampo ciampo commented Dec 11, 2024

What?

Related to https://github.com/WordPress/gutenberg/pull/67611/files#r1880356463

Tweaks the animation applied to the thumb and track elements of RangeControl, so that the animations only apply when the component is showing "marks"

Why?

The animation can introduce a subtle delay that can make the experience of dragging the thumb feel slow and unresponsive.

This PR tries to achieve a good compromise by keeping the animation enabled when the component shows marks, since the experience of dragging the thumb is "stepped" and the animation doesn't really introduce a delay.

How?

CSS changes

Testing Instructions

  • Drag the thumb on a RangeControl that doesn't show marks — the thumb and the slider should update instantly following the cursor (ie. no animation)
  • Add marks to the RangeControl — the thumb and track should animate, like they already do on trunk

The difference is subtle. Artificially slowing down the transition duration could help debug the changes.

@ciampo ciampo added [Type] Enhancement A suggestion for improvement. [Package] Components /packages/components labels Dec 11, 2024
@ciampo ciampo requested review from a team and youknowriad December 11, 2024 15:36
@ciampo ciampo self-assigned this Dec 11, 2024
@ciampo ciampo requested a review from ajitbohra as a code owner December 11, 2024 15:36
Copy link
Contributor

@jameskoster jameskoster left a comment

Choose a reason for hiding this comment

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

Seems okay to me :)

@github-actions
Copy link

github-actions bot commented Dec 11, 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.

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 <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: mirka <[email protected]>
Co-authored-by: tyxla <[email protected]>

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

Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

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

Thanks for the follow-up :)

Copy link
Member

@mirka mirka left a comment

Choose a reason for hiding this comment

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

🚀

Copy link
Member

@tyxla tyxla left a comment

Choose a reason for hiding this comment

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

Tests well for me 👍 Thanks!

@ciampo
Copy link
Contributor Author

ciampo commented Dec 12, 2024

Thank you all for all the reviews! I'm not going to add a CHANGELOG entry since this PR basically stacks with #67611

@ciampo ciampo merged commit 9437f7e into trunk Dec 12, 2024
74 of 75 checks passed
@ciampo ciampo deleted the fix/range-control-thumb-animation-marked branch December 12, 2024 17:47
@github-actions github-actions bot added this to the Gutenberg 20.0 milestone Dec 12, 2024
yogeshbhutkar pushed a commit to yogeshbhutkar/gutenberg that referenced this pull request Dec 18, 2024
…s#67836)

Co-authored-by: ciampo <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: mirka <[email protected]>
Co-authored-by: tyxla <[email protected]>
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.

6 participants