Global Styles: Fix palette color popovers #49975
Merged
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
aaronrobertshaw
added
[Feature] UI Components
|
Size Change: +139 B (0%) Total Size: 1.37 MB
ℹ️ View Unchanged
|
aaronrobertshaw
force-pushed
the
try/popover-props-for-palette-popovers
branch
from
458a2b8 to
b1ac9e2
Compare
|
Thanks for the sanity check and the related issue link @mirka 👍 This PR should address #49040. I've tweaked the Screen.Recording.2023-04-24.at.11.09.50.am.mp4
This might be something I could help chip away at in follow-ups. |
aaronrobertshaw
changed the title
mirka
approved these changes
Apr 28, 2023
There was a problem hiding this comment.
I had some minor comments, but overall looks great 🚀 Thanks for fixing up the Storybook example as well.
I guess it's worth explicitly mentioning that the positioning of the Gradient popovers haven't been fully resolved. Not a blocker for this PR merging though, since it's already incrementally better.
|
Thank you for reviewing this one again @mirka 🙇 I think most of the feedback has been addressed. I did have a couple of follow-up questions/comments though that I left in reply to your review comments. I'll hold off on merging this for the moment to make sure that my latest changes are still in the right direction. |
I've put up a PR to reposition the gradient palette popovers based on this PR: #50233. I don't know what should happen with the duotone palette there. On trunk, no popover is displayed even at larger viewports. It's possible it isn't supposed to be there at all 🤷. I'll look into the code and any existing issues for that separately. |
aaronrobertshaw
force-pushed
the
try/popover-props-for-palette-popovers
branch
from
1efa153 to
1f6490c
Compare
To close the loop on this, the duotone palette was intentionally uneditable (see #36920). There are some ongoing explorations to make duotone filters editable via Global Styles (e.g. #49265). |
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.
Fixes: #41894
Fixes: #49040
What?
Why?
shiftprop on the palette color pickers they are rendered outside the viewport on smaller screensshiftis added to the palette color pickers they overlay the individual color elements that triggered them, adding the ability to pass through popover props will allow for fine-tuning the positioning of the popovers in a follow up.How?
ColorPickerPopoverPaletteEditcomponentuseViewportMatchand the newpopoverPropsto tweak the palette popovers when on small viewportsNext Steps
In a follow-up, we can refine the popover placement, including which elements they may be anchored to.
Testing Instructions
Screenshots or screencast
Screen.Recording.2023-04-21.at.2.26.49.pm.mp4
Screen.Recording.2023-04-21.at.2.20.40.pm.mp4