Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

components: Add new ColorPicker #33714

Merged
merged 17 commits into from
Aug 10, 2021
Merged

components: Add new ColorPicker #33714

merged 17 commits into from
Aug 10, 2021

Conversation

sarayourfriend
Copy link
Contributor

@sarayourfriend sarayourfriend commented Jul 27, 2021

Description

Adds a new vastly simplified ColorPicker implementation based on react-colorful.

How has this been tested?

Storybook.

Screenshots

Gravacao.de.Tela.2021-07-28.as.12.43.58.mov

Types of changes

New feature.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

@github-actions
Copy link

github-actions bot commented Jul 27, 2021

Size Change: -35 kB (-3%)

Total Size: 1.03 MB

Filename Size Change
build/a11y/index.min.js 931 B -186 B (-17%) 👏
build/admin-manifest/index.min.js 1.09 kB -365 B (-25%) 🎉
build/annotations/index.min.js 2.7 kB -232 B (-8%)
build/api-fetch/index.min.js 2.19 kB -250 B (-10%) 👏
build/autop/index.min.js 2.08 kB -201 B (-9%)
build/blob/index.min.js 459 B -214 B (-32%) 🎉
build/block-directory/index.min.js 6.21 kB -410 B (-6%)
build/block-editor/index.min.js 118 kB -9.1 kB (-7%)
build/block-library/blocks/columns/editor-rtl.css 194 B +5 B (+3%)
build/block-library/blocks/columns/editor.css 193 B +5 B (+3%)
build/block-library/blocks/file/view.min.js 322 B -389 B (-55%) 🏆
build/block-library/blocks/navigation/editor-rtl.css 1.69 kB +19 B (+1%)
build/block-library/blocks/navigation/editor.css 1.69 kB +18 B (+1%)
build/block-library/blocks/navigation/view.min.js 2.52 kB -313 B (-11%) 👏
build/block-library/blocks/search/editor-rtl.css 165 B -44 B (-21%) 🎉
build/block-library/blocks/search/editor.css 165 B -44 B (-21%) 🎉
build/block-library/blocks/search/style-rtl.css 374 B +6 B (+2%)
build/block-library/blocks/search/style.css 375 B +3 B (+1%)
build/block-library/editor-rtl.css 9.86 kB -5 B (0%)
build/block-library/editor.css 9.84 kB -3 B (0%)
build/block-library/index.min.js 146 kB -1.24 kB (-1%)
build/block-library/reset-rtl.css 527 B +13 B (+3%)
build/block-library/reset.css 527 B +13 B (+3%)
build/block-library/style-rtl.css 10.2 kB +5 B (0%)
build/block-library/style.css 10.3 kB +4 B (0%)
build/block-serialization-default-parser/index.min.js 1.09 kB -209 B (-16%) 👏
build/block-serialization-spec-parser/index.min.js 2.79 kB -267 B (-9%)
build/blocks/index.min.js 47 kB -285 B (-1%)
build/components/index.min.js 208 kB -8.02 kB (-4%)
build/compose/index.min.js 10.2 kB -73 B (-1%)
build/core-data/index.min.js 12.3 kB -233 B (-2%)
build/customize-widgets/index.min.js 10.4 kB -366 B (-3%)
build/data-controls/index.min.js 614 B -217 B (-26%) 🎉
build/data/index.min.js 7.03 kB -193 B (-3%)
build/date/index.min.js 31.5 kB -366 B (-1%)
build/deprecated/index.min.js 428 B -309 B (-42%) 🎉
build/dom-ready/index.min.js 304 B -272 B (-47%) 🎉
build/dom/index.min.js 4.53 kB -248 B (-5%)
build/edit-navigation/index.min.js 13.4 kB -538 B (-4%)
build/edit-post/classic-rtl.css 492 B +13 B (+3%)
build/edit-post/classic.css 494 B +13 B (+3%)
build/edit-post/index.min.js 28.4 kB -1.56 kB (-5%)
build/edit-site/index.min.js 25.7 kB -282 B (-1%)
build/edit-widgets/index.min.js 15.9 kB -734 B (-4%)
build/editor/index.min.js 37.5 kB -713 B (-2%)
build/element/index.min.js 3.16 kB -279 B (-8%)
build/escape-html/index.min.js 517 B -222 B (-30%) 🎉
build/format-library/index.min.js 5.36 kB -360 B (-6%)
build/hooks/index.min.js 1.55 kB -213 B (-12%) 👏
build/html-entities/index.min.js 424 B -204 B (-32%) 🎉
build/i18n/index.min.js 3.59 kB -138 B (-4%)
build/is-shallow-equal/index.min.js 501 B -209 B (-29%) 🎉
build/keyboard-shortcuts/index.min.js 1.49 kB -250 B (-14%) 👏
build/keycodes/index.min.js 1.25 kB -236 B (-16%) 👏
build/list-reusable-blocks/index.min.js 1.85 kB -216 B (-10%) 👏
build/media-utils/index.min.js 2.88 kB -206 B (-7%)
build/notices/index.min.js 845 B -226 B (-21%) 🎉
build/nux/index.min.js 2.03 kB -281 B (-12%) 👏
build/plugins/index.min.js 1.83 kB -156 B (-8%)
build/primitives/index.min.js 921 B -142 B (-13%) 👏
build/priority-queue/index.min.js 582 B -209 B (-26%) 🎉
build/react-i18n/index.min.js 671 B -251 B (-27%) 🎉
build/redux-routine/index.min.js 2.63 kB -192 B (-7%)
build/reusable-blocks/index.min.js 2.28 kB -283 B (-11%) 👏
build/rich-text/index.min.js 10.5 kB -303 B (-3%)
build/server-side-render/index.min.js 1.32 kB -320 B (-20%) 🎉
build/shortcode/index.min.js 1.48 kB -204 B (-12%) 👏
build/token-list/index.min.js 562 B -285 B (-34%) 🎉
build/url/index.min.js 1.72 kB -237 B (-12%) 👏
build/viewport/index.min.js 1.02 kB -259 B (-20%) 🎉
build/warning/index.min.js 248 B -913 B (-79%) 🏆
build/widgets/index.min.js 6.27 kB -213 B (-3%)
build/wordcount/index.min.js 1.04 kB -202 B (-16%) 👏
ℹ️ View Unchanged
Filename Size
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/style-rtl.css 13.9 kB
build/block-editor/style.css 13.9 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 65 B
build/block-library/blocks/archives/style.css 65 B
build/block-library/blocks/audio/editor-rtl.css 58 B
build/block-library/blocks/audio/editor.css 58 B
build/block-library/blocks/audio/style-rtl.css 111 B
build/block-library/blocks/audio/style.css 111 B
build/block-library/blocks/audio/theme-rtl.css 125 B
build/block-library/blocks/audio/theme.css 125 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 474 B
build/block-library/blocks/button/editor.css 474 B
build/block-library/blocks/button/style-rtl.css 605 B
build/block-library/blocks/button/style.css 604 B
build/block-library/blocks/buttons/editor-rtl.css 315 B
build/block-library/blocks/buttons/editor.css 315 B
build/block-library/blocks/buttons/style-rtl.css 370 B
build/block-library/blocks/buttons/style.css 370 B
build/block-library/blocks/calendar/style-rtl.css 207 B
build/block-library/blocks/calendar/style.css 207 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 79 B
build/block-library/blocks/categories/style.css 79 B
build/block-library/blocks/code/style-rtl.css 90 B
build/block-library/blocks/code/style.css 90 B
build/block-library/blocks/code/theme-rtl.css 131 B
build/block-library/blocks/code/theme.css 131 B
build/block-library/blocks/columns/style-rtl.css 474 B
build/block-library/blocks/columns/style.css 475 B
build/block-library/blocks/cover/editor-rtl.css 666 B
build/block-library/blocks/cover/editor.css 670 B
build/block-library/blocks/cover/style-rtl.css 1.23 kB
build/block-library/blocks/cover/style.css 1.23 kB
build/block-library/blocks/embed/editor-rtl.css 488 B
build/block-library/blocks/embed/editor.css 488 B
build/block-library/blocks/embed/style-rtl.css 400 B
build/block-library/blocks/embed/style.css 400 B
build/block-library/blocks/embed/theme-rtl.css 124 B
build/block-library/blocks/embed/theme.css 124 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 255 B
build/block-library/blocks/file/style.css 255 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 707 B
build/block-library/blocks/gallery/editor.css 706 B
build/block-library/blocks/gallery/style-rtl.css 1.05 kB
build/block-library/blocks/gallery/style.css 1.05 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 B
build/block-library/blocks/group/editor-rtl.css 159 B
build/block-library/blocks/group/editor.css 159 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 93 B
build/block-library/blocks/group/theme.css 93 B
build/block-library/blocks/heading/editor-rtl.css 152 B
build/block-library/blocks/heading/editor.css 152 B
build/block-library/blocks/heading/style-rtl.css 76 B
build/block-library/blocks/heading/style.css 76 B
build/block-library/blocks/home-link/style-rtl.css 247 B
build/block-library/blocks/home-link/style.css 247 B
build/block-library/blocks/html/editor-rtl.css 283 B
build/block-library/blocks/html/editor.css 284 B
build/block-library/blocks/image/editor-rtl.css 728 B
build/block-library/blocks/image/editor.css 728 B
build/block-library/blocks/image/style-rtl.css 482 B
build/block-library/blocks/image/style.css 487 B
build/block-library/blocks/image/theme-rtl.css 124 B
build/block-library/blocks/image/theme.css 124 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 B
build/block-library/blocks/latest-posts/editor-rtl.css 137 B
build/block-library/blocks/latest-posts/editor.css 137 B
build/block-library/blocks/latest-posts/style-rtl.css 528 B
build/block-library/blocks/latest-posts/style.css 527 B
build/block-library/blocks/list/style-rtl.css 63 B
build/block-library/blocks/list/style.css 63 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 488 B
build/block-library/blocks/media-text/style.css 485 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 474 B
build/block-library/blocks/navigation-link/editor.css 474 B
build/block-library/blocks/navigation-link/style-rtl.css 94 B
build/block-library/blocks/navigation-link/style.css 94 B
build/block-library/blocks/navigation/style-rtl.css 1.65 kB
build/block-library/blocks/navigation/style.css 1.64 kB
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 310 B
build/block-library/blocks/page-list/editor.css 310 B
build/block-library/blocks/page-list/style-rtl.css 242 B
build/block-library/blocks/page-list/style.css 242 B
build/block-library/blocks/paragraph/editor-rtl.css 157 B
build/block-library/blocks/paragraph/editor.css 157 B
build/block-library/blocks/paragraph/style-rtl.css 248 B
build/block-library/blocks/paragraph/style.css 248 B
build/block-library/blocks/post-author/editor-rtl.css 210 B
build/block-library/blocks/post-author/editor.css 210 B
build/block-library/blocks/post-author/style-rtl.css 182 B
build/block-library/blocks/post-author/style.css 181 B
build/block-library/blocks/post-comments-form/style-rtl.css 140 B
build/block-library/blocks/post-comments-form/style.css 140 B
build/block-library/blocks/post-comments/style-rtl.css 360 B
build/block-library/blocks/post-comments/style.css 359 B
build/block-library/blocks/post-content/editor-rtl.css 138 B
build/block-library/blocks/post-content/editor.css 138 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 412 B
build/block-library/blocks/post-featured-image/editor.css 412 B
build/block-library/blocks/post-featured-image/style-rtl.css 143 B
build/block-library/blocks/post-featured-image/style.css 143 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 378 B
build/block-library/blocks/post-template/style.css 379 B
build/block-library/blocks/post-terms/style-rtl.css 73 B
build/block-library/blocks/post-terms/style.css 73 B
build/block-library/blocks/post-title/style-rtl.css 60 B
build/block-library/blocks/post-title/style.css 60 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 198 B
build/block-library/blocks/pullquote/editor.css 198 B
build/block-library/blocks/pullquote/style-rtl.css 361 B
build/block-library/blocks/pullquote/style.css 360 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 270 B
build/block-library/blocks/query-pagination/editor.css 262 B
build/block-library/blocks/query-pagination/style-rtl.css 168 B
build/block-library/blocks/query-pagination/style.css 168 B
build/block-library/blocks/query-title/editor-rtl.css 85 B
build/block-library/blocks/query-title/editor.css 85 B
build/block-library/blocks/query/editor-rtl.css 131 B
build/block-library/blocks/query/editor.css 132 B
build/block-library/blocks/quote/style-rtl.css 169 B
build/block-library/blocks/quote/style.css 169 B
build/block-library/blocks/quote/theme-rtl.css 220 B
build/block-library/blocks/quote/theme.css 222 B
build/block-library/blocks/rss/editor-rtl.css 202 B
build/block-library/blocks/rss/editor.css 204 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/theme-rtl.css 64 B
build/block-library/blocks/search/theme.css 64 B
build/block-library/blocks/separator/editor-rtl.css 99 B
build/block-library/blocks/separator/editor.css 99 B
build/block-library/blocks/separator/style-rtl.css 250 B
build/block-library/blocks/separator/style.css 250 B
build/block-library/blocks/separator/theme-rtl.css 172 B
build/block-library/blocks/separator/theme.css 172 B
build/block-library/blocks/shortcode/editor-rtl.css 474 B
build/block-library/blocks/shortcode/editor.css 474 B
build/block-library/blocks/site-logo/editor-rtl.css 462 B
build/block-library/blocks/site-logo/editor.css 464 B
build/block-library/blocks/site-logo/style-rtl.css 153 B
build/block-library/blocks/site-logo/style.css 153 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 84 B
build/block-library/blocks/site-title/editor.css 84 B
build/block-library/blocks/social-link/editor-rtl.css 165 B
build/block-library/blocks/social-link/editor.css 165 B
build/block-library/blocks/social-links/editor-rtl.css 812 B
build/block-library/blocks/social-links/editor.css 811 B
build/block-library/blocks/social-links/style-rtl.css 1.33 kB
build/block-library/blocks/social-links/style.css 1.33 kB
build/block-library/blocks/spacer/editor-rtl.css 307 B
build/block-library/blocks/spacer/editor.css 307 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 471 B
build/block-library/blocks/table/editor.css 472 B
build/block-library/blocks/table/style-rtl.css 481 B
build/block-library/blocks/table/style.css 481 B
build/block-library/blocks/table/theme-rtl.css 188 B
build/block-library/blocks/table/theme.css 188 B
build/block-library/blocks/tag-cloud/style-rtl.css 146 B
build/block-library/blocks/tag-cloud/style.css 146 B
build/block-library/blocks/template-part/editor-rtl.css 636 B
build/block-library/blocks/template-part/editor.css 635 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/term-description/editor-rtl.css 90 B
build/block-library/blocks/term-description/editor.css 90 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 571 B
build/block-library/blocks/video/editor.css 572 B
build/block-library/blocks/video/style-rtl.css 173 B
build/block-library/blocks/video/style.css 173 B
build/block-library/blocks/video/theme-rtl.css 124 B
build/block-library/blocks/video/theme.css 124 B
build/block-library/common-rtl.css 1.29 kB
build/block-library/common.css 1.29 kB
build/block-library/theme-rtl.css 688 B
build/block-library/theme.css 692 B
build/components/style-rtl.css 15.8 kB
build/components/style.css 15.8 kB
build/customize-widgets/style-rtl.css 1.5 kB
build/customize-widgets/style.css 1.49 kB
build/edit-navigation/style-rtl.css 3.1 kB
build/edit-navigation/style.css 3.1 kB
build/edit-post/style-rtl.css 7.18 kB
build/edit-post/style.css 7.17 kB
build/edit-site/style-rtl.css 5.01 kB
build/edit-site/style.css 5.01 kB
build/edit-widgets/style-rtl.css 4.01 kB
build/edit-widgets/style.css 4.02 kB
build/editor/style-rtl.css 3.92 kB
build/editor/style.css 3.91 kB
build/format-library/style-rtl.css 668 B
build/format-library/style.css 669 B
build/list-reusable-blocks/style-rtl.css 838 B
build/list-reusable-blocks/style.css 838 B
build/nux/style-rtl.css 747 B
build/nux/style.css 743 B
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/widgets/style-rtl.css 1.04 kB
build/widgets/style.css 1.04 kB

compressed-size-action

@skorasaurus skorasaurus added the [Package] Components /packages/components label Jul 28, 2021
@sarayourfriend sarayourfriend added [Type] Enhancement A suggestion for improvement. [Feature] Component System WordPress component system [Feature] UI Components Impacts or related to the UI component system Storybook Storybook and its stories for components labels Jul 28, 2021
@sarayourfriend sarayourfriend marked this pull request as ready for review July 28, 2021 19:48
Copy link
Contributor

@ciampo ciampo left a comment

Choose a reason for hiding this comment

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

Nicely done so far, @sarayourfriend! This was quite a large PR to get through.

I've left a few inline comments, but I also have a few more general pieces of feedback:

  • I haven't reviewed any InputControl-related changes because I assume that they're actually being worked on in a separate PR components: InputControl to TypeScript #33696 , and that this PR will be rebased once those changes land on trunk
  • Is there a reason why the conversion to TS of the SelectControl component isn't also done in a separate PR?
  • Should we make some small changes to the APIs (props) of the ColorPicker component, in order to match the "legacy" ColorPicker?
  • I haven't done an exhaustive review in terms of accessibility, but at a quick glance I can see that focus styles are not very prominent (not sure if the original designs have any specs for that) cc @diegohaz

Comparing the Storybook prototype against the latest designs, I could spot a few differences, which I annotated over a couple of screenshots:

image

image

image

packages/components/tsconfig.json Show resolved Hide resolved
packages/components/src/select-control/index.tsx Outdated Show resolved Hide resolved
Comment on lines +41 to +45
### `enableAlpha`

**Type**: `boolean`

Defaults to `false`. When `true` the color picker will display the alpha channel both in the bottom inputs as well as in the color picker itself.
Copy link
Contributor

Choose a reason for hiding this comment

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

Nit: should we use the same format we've been using for newer components?

Suggested change
### `enableAlpha`
**Type**: `boolean`
Defaults to `false`. When `true` the color picker will display the alpha channel both in the bottom inputs as well as in the color picker itself.
### `enableAlpha`: `boolean`
When `true` the color picker will display the alpha channel both in the bottom inputs as well as in the color picker itself.
- Required: No
- Default: `false`

packages/components/src/ui/color-picker/styles.ts Outdated Show resolved Hide resolved
@sarayourfriend
Copy link
Contributor Author

Yup, definitely aware of the design differences 🙂

However, I'm not sure how best to address them.

On one hand, we can change the default styles for these components to match the designs. This would update all of Gutenberg.

On the other hand, we could create wrappers for all these components and manually change the styles using styled components and careful targeting. This would have two problems in my book:

  1. It would present one section of the UI as completely visually separate from the rest of the UI
  2. It would replicate the complexities of Sass based styling, i.e., targeting and overriding specific classes on the components we want to manipulate

It would also be code we would hopefully anticipate deleting in the near future when the designs of the underlying components were updated.

My preference is for the first approach, simply update the existing component designs.

However, of course, I don't want to do that all in one PR. So in some sense this PR isn't at all mergable not because it's incomplete but becuase it's uncovered a dearth of dependencies that need to be resolved before it can be merged (esentially all of the visual issues you pointed out save the spacing ones).

@sarayourfriend
Copy link
Contributor Author

Should we make some small changes to the APIs (props) of the ColorPicker component, in order to match the "legacy" ColorPicker?

I don't think we should take any cues from the existing ColorPicker component. It's massively over complicated.

@ciampo
Copy link
Contributor

ciampo commented Jul 30, 2021

I don't think we should take any cues from the existing ColorPicker component. It's massively over complicated.

If we wanted this ColorPicker to be a drop-in replacement for the existing ColorPicker, shouldn't we make sure that the new one has the same props as the legacy one (or that, at least, there is a useDeprecatedProps compat-layer which is able to parse the props of the legacy ColorPicker and adapt them to the new one)?

I know that this can be done at a later point in time when we promote the g2 ColorPicker, but I thought it'd be better to discuss it sooner rather than later.

@sarayourfriend
Copy link
Contributor Author

I think my proposal for the ColorPicker is to add a prop like __unstableSimplified which switches between the legacy and the new color picker, instead of trying to adapt the legacy props.

Primarily the issue I have the with the existing ColorPicker is that it's API is far too broad, especially in the change handlers.

It also uses "backwards" props like disableAlpha instead of positive boolean props like enableAlpha.

I'd love to fully deprecate the existing ColorPicker entirely, to be honest. Or export the new one under a separate name to allow for good tree-shaking (for example SimpleColorPicker or similar be a great name I think).

@ciampo
Copy link
Contributor

ciampo commented Jul 30, 2021

I think my proposal for the ColorPicker is to add a prop like __unstableSimplified which switches between the legacy and the new color picker, instead of trying to adapt the legacy props.

Primarily the issue I have the with the existing ColorPicker is that it's API is far too broad, especially in the change handlers.

It also uses "backwards" props like disableAlpha instead of positive boolean props like enableAlpha.

I'd love to fully deprecate the existing ColorPicker entirely, to be honest. Or export the new one under a separate name to allow for good tree-shaking (for example SimpleColorPicker or similar be a great name I think).

Thank you for elaborating. What you suggest is definitely a possibility. This kind of approach should be probably discussed in the context of coming up with a strategy that can work across the whole components library (for example, we may have a similar situation with the Flyout and the Slider component). Definitely not a blocker for this PR

@sarayourfriend
Copy link
Contributor Author

Let's get #33784 and #33696 merged then revisit this.

@sarayourfriend sarayourfriend marked this pull request as draft July 30, 2021 19:41
@sarayourfriend
Copy link
Contributor Author

I think we have to change the output/input value to also be HSL(A) otherwise the HSL encoding is immediately lost the second that it leaves the component and gets passed back in (in the case of a controlled component like in the stories).

@sarayourfriend
Copy link
Contributor Author

I'm not sure how to solve this because changing the external contract to HSL(A) makes it a lot more complicated from a consumer perspective. But on the other hand trying to simplify it and accept any color format as input, allows the user to incorrectly push a hex value which will cause the internals to no longer be able to encode valid HSL(A) values (even if they have no visual difference)

@ciampo
Copy link
Contributor

ciampo commented Aug 9, 2021

Probably the best tradeoff would be to switch to HSL(A) for both the internal representation and for the accepted format of the color prop.

We could then expose the colorize function as a separate utility — useful in case the user of ColorPicker needs to convert color values to HSL(A).

@sarayourfriend
Copy link
Contributor Author

We could then expose the colorize function as a separate utility — useful in case the user of ColorPicker needs to convert color values to HSL(A).

I'd rather we didn't expose colorize directly... people can easily import tinycolor2 if they want rather than making it part of the public WP api.

@sarayourfriend
Copy link
Contributor Author

At the moment this component's folder structure is different from the usual one. Not a blocker for this PR, but we should probably look into "normalising" it once we reconcile this new Color Picker with the legacy one.

What would you suggest? I'm mirroring the way lots of other of these high-level composition components are structured. I don't think an individual folder and README for each of these internal components makes any sense at all. Do you have a suggestion for this?

Copy link
Contributor

@ciampo ciampo left a comment

Choose a reason for hiding this comment

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

After the switch to HSL(A)-based input, the UX has definitely improved!

I'm happy to work on unit tests, folder structure, and design refinements in follow-up PRs.

(cc @diegohaz in case you want to give this PR a final look)

What would you suggest? I'm mirroring the way lots of other of these high-level composition components are structured. I don't think an individual folder and README for each of these internal components makes any sense at all. Do you have a suggestion for this?

I agree that one folder for each subcomponent doesn't make sense — especially because these subcomponents are not going to be exported.

My idea was more about splitting the component's "entry point" (e.g. component.tsx) from the remaining sub-components.
Maybe having a few folders grouping sub-components with similar functionality, like pickers/ (with hex-color-picker and rgba-color-picker) and inputs/ (color-input, hex-input, hsl-input, rgb-input).

Another difference compared to "standard" g2 components is that there's no hook.ts file.

As explained before, these considerations should not be considered blockers for this PR.

packages/components/src/ui/color-picker/component.tsx Outdated Show resolved Hide resolved
@ciampo
Copy link
Contributor

ciampo commented Aug 10, 2021

Actually, flagging these accessibility warnings from Storybook

Screenshot 2021-08-10 at 12 31 16

@diegohaz
Copy link
Member

Also flagging these accessibility warnings from Storybook

The first one seems to be a problem with the react-colorful package. The aria-valuenow attribute is required on role="slider" elements: https://w3c.github.io/aria/#slider

Do we have control over the elements that react-colorful renders? If so, we should be able to add that prop.

@sarayourfriend
Copy link
Contributor Author

Do we have control over the elements that react-colorful renders

We don't 😞

It looks like they've already done some accessibility work so I'm sure they'd be open to a PR to fix this: omgovich/react-colorful#57

I'll see about opening one upstream.

@sarayourfriend
Copy link
Contributor Author

Another difference compared to "standard" g2 components is that there's no hook.ts file

Does it need a hook?

It feels like we shouldn't thoughtlessly follow the hook + component pattern if it just adds redirection/complexity to something that can just be a regular component (especially if the hook isn't meant to be reusable, which is the primary benefit of extrapolating things into hooks, but in this case what would be the reusable version of the hook for this?)

Copy link
Contributor

@ciampo ciampo left a comment

Choose a reason for hiding this comment

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

All accessibility issues that can be fixed on our end are now solved.

I'll see about opening one upstream.

That sounds great, thank you!

Does it need a hook?

You actually make a good point about the logic of this component not needing to be "reusable". I agree with you, it doesn't need a hook.

@sarayourfriend sarayourfriend merged commit 5cca2e1 into trunk Aug 10, 2021
@sarayourfriend sarayourfriend deleted the add/new-color-picker branch August 10, 2021 13:59
@github-actions github-actions bot added this to the Gutenberg 11.3 milestone Aug 10, 2021
@diegohaz
Copy link
Member

Great work! 🎉

For the record, here's the issue about the lack of the aria-valuenow attribute: omgovich/react-colorful#152

@omgovich
Copy link

omgovich commented Aug 11, 2021

Hi guys! Thanks for choosing react-colorful for your project!
I will try to improve a11y as soon as possible 🤝

P.S. I noticed that your project using tinycolor2 which is pretty slow, heavy, and requires a separate @types/tinycolor2 package to make it work in TS project. So you might be interested in using colord which is 3 times lighter, 3 times faster, has all of the types, modular and extendable.
https://colord.omgovich.ru/
https://github.com/omgovich/colord

The API is kinda the same as tinycolor2 has, so the migration shouldn't be a big deal if you decide to do that).

For example, cssnano recently migrated from color (kinda the same old-school package as tinycolor2) to colord and after that their performance became 2x faster.

}
}
},
() => setCopiedColor( colorize( color ).toHex8String() )
Copy link
Contributor

Choose a reason for hiding this comment

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

I just noticed a minor UX improvement that we could make:

  1. User clicks on the color, value is copied in the clipboard. The tooltip changes from "Copy" to "Copied!"
  2. User interacts with other parts of the UI, maybe copies another string of text
  3. User remembers that they need the color value, and so they hover over the color string again. But the tooltip keeps saying "Copied!", instead of "Copy"

This to say, should we use a timer to unset the copiedColor after some time has passed?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Component System WordPress component system [Feature] UI Components Impacts or related to the UI component system [Package] Components /packages/components Storybook Storybook and its stories for components [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants