GradientPicker: remove padding and disable overflow of color picker popovers - #55265
Conversation
t-hamano
left a comment
There was a problem hiding this comment.
Thanks for the PR!
It's working as expected, but I'd like to leave a few comments.
| align-items: center; | ||
| width: 216px; | ||
| height: auto; | ||
| overflow: hidden; |
There was a problem hiding this comment.
If this style is removed, an unintended scroll bar will appear when I move the pointer to the right edge of the regular color picker. This problem can be reproduced on Windows, but it might be possible to reproduce it on MacOS by changing the scroll bar settings.
However, strangely, this problem does not occur in #55149, where the same style has been removed.
7eb7c82e55ad7e1c86ebb3999f2e2f63.mp4
There was a problem hiding this comment.
I think that's because it's missing the change to packages/components/src/color-palette/index.tsx setting resize: false for that specific instance of dropdown.
This can be confirmed by removing the resize : false change in this PR in the packages/components/src/custom-gradient-picker/gradient-bar/control-points.tsx file, and noting how the popover in GradientPicker will also start scrolling.
In short, I think this is behaving as expected.
Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
ab5ecbc to
f1019df
Compare
|
Flaky tests detected in 381fe99. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6493032039
|
What?
As flagged by @t-hamano in #55149 (comment), popovers containing the
ColorPickerin theGradientPickercomponent include some padding around the color picker. This PR removes the padding (and overflow: hidden styles) to have the popover look more uniform with other similar color picker popovers.Why?
UI polish and consistency
How?
ColorPicker-specific stylesresize: falsepopover prop (which also causesoverflow: hiddenstyles to be applied)DropdownContentWrappercomponent to easily remove the popover's internal paddingTesting Instructions
GradientPickerStorybook exampleScreenshots or screencast
trunk)