CustomGradientBar: Fix insertion and control point positioning to more closely follow cursor #41492
Conversation
This file contains 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
andrewserong
added
[Package] Components
|
Size Change: +3 B (0%) Total Size: 1.24 MB
ℹ️ View Unchanged
|
This was referenced Jun 2, 2022
aaronrobertshaw
approved these changes
Jun 2, 2022
There was a problem hiding this comment.
Nice touch @andrewserong! ✨
This is testing well for me and I believe the proposed approach make sense.
✅ Could replicate issue on trunk
✅ Works well in Storybook example
✅ Works well in the editor
✅ Unit tests are passing
Storybook
| Before | After |
|---|---|
Screen.Recording.2022-06-02.at.5.07.54.pm.mp4 |
Screen.Recording.2022-06-02.at.5.03.25.pm.mp4 |
Editor
| Before | After |
|---|---|
Screen.Recording.2022-06-02.at.5.15.54.pm.mp4 |
Screen.Recording.2022-06-02.at.5.17.11.pm.mp4 |
ciampo
approved these changes
Jun 2, 2022
There was a problem hiding this comment.
Thank you for working on this, @andrewserong — a subtle improvement, but really appreciated!
…t it more closely follows the cursor
andrewserong
force-pushed
the
fix/custom-gradient-bar-control-points-positioning
branch
from
6e3b304 to
6be7c2b
Compare
|
Thanks for the reviews, folks! And good idea about adding in the |
andrewserong
deleted the
fix/custom-gradient-bar-control-points-positioning
branch
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.
What?
Fixes part of #41390
This is a pretty subtle issue to look at visually, but it's much more noticeable when interacting with the component.
Update the
CustomGradientBarcomponent to fix the positioning of the control points and inserter so that it follows the cursor position more accurately.Why?
As raised in #41390, the existing logic for where to position the control points and inserter in the custom gradient bar is slightly off — it's more noticeable at larger viewport sizes when the component is rendered in Storybook, however it's still a bit fiddly in real world usage in the gradient color picker in the editor, so this PR should hopefully help improve the UX of interacting with the controls.
How?
calc()rule when rendering the position to offset the control point so that it's centered in its position.padding-rightsetting, we use a container with slightly less width.reffor tracking the positions of control points to the container of the markers, to improve accuracy (this is the component that the markers are positioned in relation to, so I think this should help with the accuracy, too)Testing Instructions
npm run storybook:devCheck that tests pass (they can be run locally via:
npm run test-unit -- --testPathPattern packages/components/src/custom-gradient-bar/test/utils.js)Screenshots or screencast