Updated ColorPicker

[ciampo]

This is an overview issue to track all of the tasks necessary to update the ColorPicker component with the new design and primitives.

Component

• Add experimental ColorPicker component to the repo (done in components: Add new ColorPicker #33714)
• Components: use colord instead of tinycolor2 in ColorPicker #34286
• Components: add reset timeout to ColorPicker's copy functionality #34289
• Components: enable "copy to clipboard" functionality with keyboard #34795
• Match design proposal: (Enhance the new color picker design #34598)
  • Adjust the white border on the circle controls to match design (compare storybook with design mockup).
  • The input padding is off, not sure if this is something we need to affect on all inputs or we can just start with the input + slider case.
  • Spacing between slider and input is off.
  • Icons: update settings icon to latest version #34288
  • Use the new settings icon from wp/icons.
  • the color format dropdown should be rendered without borders (not sure how we want to handle this at the component level since it should be an optional thing used rarely)
  • Adjust circular handle of slider since it's too big compared to designs
• Follow-up tasks following previous design enhancement PR:
  • Redesign the input fields taking into consideration the new border color and height (removing specific height from this component).
  • Improve the RangeControl making the focus work on safari and implementing the new focus design.
  • Address the glitch with circle borders/shadows on chrome.
• Components: Support the EyeDropper API in ColorPicker #34487
• Components: ColorPicker "vibrates" when moving the circle slowly #35675
• Components: ColorPicker closes randomly on occasions when trying to interact with it #35677
• ColorPicker: allow customisation of the auxiliary controls #38065
• GradientPicker: allow custom ColorPicker #38066

Integration

• Add deprecated props adapter to transform the props for the "legacy" ColorPicker into the new format (done in components: Add deprecated props adapter for ColorPicker #34014)
• Components: replace legacy ColorPicker with new version #34287
• Enable Alpha and close Add background colour transparency to blocks that support background colour #18095

Related issues

I've also found a list of open issues/PRs that will likely be closed (or should otherwise be fixed) as a consequence of the work carried out in the tasks above:

• Iterating on the color picker #19785
• Color Picker component causes horizontal scrollbars in Block Settings sidebar #29544
• Changing the Alpha Slider on Color Picker changes RGB values on some colors #28758
• Alpha-enabled color-picker component doesn't run onChangeComplete when changed from the form #26568
• Code Quality: Refactor all React class components to functional components using hooks #22890 (with open PR Refactor: ColorPicker to use hooks #26770)
• ColorPicker enableAlpha=true breakes after alpha set to 100% #36314
• ColorPicker's colorspace not respected for output #11791

[mtias]

@ciampo are the open tasks still being actively pursued? Do they need to be tracked here or can this be considered done?

[ciampo]

This issue should be quite up-to-date. The components squad hasn't quite had the capacity to work on these tasks (to the point that the latest work re. the ColorPicker was done with the help of @jorgefilipecosta ), but it'd be great if we could work the final few tasks left.

[andreiglingeanu]

@ciampo Is there any way to help with this so that we can get this moving ahead? Can help with providing fixes for the remaining stuff.

[Mamaduka]

@ciampo, can we close #22890 and #26770? I think refactoring is no longer needed after #33714.

[ciampo]

Hey @Mamaduka !

• Refactor: ColorPicker to use hooks #26770 can be closed, as you pointed out
• Code Quality: Refactor all React class components to functional components using hooks #22890 should be kept open, since there are still a few React Class components in the @wordpress/components package (ColorPicker was only one of them)

[Mamaduka]

Thanks, @ciampo!

[annezazu]

Doing some clean up and closing this out as it seems most initiatives have been handled and active work hasn't continued in a few years. If this is incorrect, happy to reopen!