Replace the color picker component with the new version (#35220)

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

packages/components/src/color-edit/index.js

@@ -16,7 +16,7 @@ import { edit, close, chevronDown, chevronUp, plus } from '@wordpress/icons';
  */
 import Dropdown from '../dropdown';
 import CircularOptionPicker from '../circular-option-picker';
-import ColorPicker from '../color-picker';
+import { ColorPicker } from '../color-picker';
 import Button from '../button';
 import TextControl from '../text-control';
 import BaseControl from '../base-control';

packages/components/src/color-palette/index.js

@@ -15,7 +15,7 @@ import { useCallback, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import ColorPicker from '../color-picker';
+import { ColorPicker } from '../color-picker';
 import CircularOptionPicker from '../circular-option-picker';
 
 extend( [ namesPlugin, a11yPlugin ] );

packages/components/src/color-palette/test/__snapshots__/index.js.snap

@@ -1,89 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ColorPalette Dropdown .renderContent should render dropdown content 1`] = `
-<div
-  className="components-color-picker is-alpha-disabled"
->
-  <div
-    className="components-color-picker__saturation"
-  >
-    <Pure(WithInstanceId(Saturation))
-      hsl={
-        Object {
-          "a": 1,
-          "h": 0,
-          "l": 50,
-          "s": 100,
-        }
-      }
-      hsv={
-        Object {
-          "a": 1,
-          "h": 0,
-          "s": 100,
-          "v": 100,
-        }
-      }
-      onChange={[Function]}
-    />
-  </div>
-  <div
-    className="components-color-picker__body"
-  >
-    <div
-      className="components-color-picker__controls"
-    >
-      <div
-        className="components-color-picker__swatch"
-      >
-        <div
-          className="components-color-picker__active"
-          style={
-            Object {
-              "backgroundColor": "rgb(255, 0, 0)",
-            }
-          }
-        />
-      </div>
-      <div
-        className="components-color-picker__toggles"
-      >
-        <Pure(WithInstanceId(Hue))
-          hsl={
-            Object {
-              "a": 1,
-              "h": 0,
-              "l": 50,
-              "s": 100,
-            }
-          }
-          onChange={[Function]}
-        />
-      </div>
-    </div>
-    <Inputs
-      disableAlpha={true}
-      hex="#ff0000"
-      hsl={
-        Object {
-          "a": 1,
-          "h": 0,
-          "l": 50,
-          "s": 100,
-        }
-      }
-      onChange={[Function]}
-      rgb={
-        Object {
-          "a": 1,
-          "b": 0,
-          "g": 0,
-          "r": 255,
-        }
-      }
-    />
-  </div>
-</div>
+<ColorPicker
+  color={
+    Object {
+      "a": 1,
+      "h": 0,
+      "l": 0.5,
+      "s": 1,
+    }
+  }
+  enableAlpha={false}
+  onChange={[Function]}
+/>
 `;
 
 exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`] = `

packages/components/src/color-picker/README.md

@@ -1,24 +1,53 @@
 # ColorPicker
 
-Accessible color picker.
-
-_Parts of the source code were derived and modified from [react-color](https://github.com/casesandberg/react-color/), released under the MIT license._
+`ColorPicker` is a color picking component based on `react-colorful`. It lets you pick a color visually or by manipulating the individual RGB(A), HSL(A) and Hex(8) color values.
 
 ## Usage
 
 ```jsx
-import { ColorPicker } from '@wordpress/components';
-import { useState } from '@wordpress/element';
-
-const MyColorPicker = () => {
-	const [ color, setColor ] = useState( '#f00' );
+import { ColorPicker } from '@wordpress/components/ui';
 
+function Example() {
+	const [color, setColor] = useState();
 	return (
 		<ColorPicker
-			color={ color }
-			onChangeComplete={ ( value ) => setColor( value.hex ) }
-			disableAlpha
+			color={color}
+			onChange={setColor}
+			enableAlpha
+			defaultValue="#000"
 		/>
 	);
-};
+}
 ```
+
+## Props
+
+### `color`
+
+**Type**: `string`
+
+The current color value to display in the picker. Must be a hex or hex8 string.
+
+### `onChange`
+
+**Type**: `(hex8Color: string) => void`
+
+Fired when the color changes. Always passes a hex8 color string.
+
+### `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.
+
+### `defaultValue`
+
+**Type**: `string | undefined`
+
+An optional default value to use for the color picker.
+
+### `copyFormat`
+
+**Type**: `'hex' | 'hsl' | 'rgb' | undefined`
+
+The format to copy when clicking the displayed color format.

packages/components/src/ui/color-picker/color-display.tsx → packages/components/src/color-picker/color-display.tsx

@@ -13,11 +13,11 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { Text } from '../../text';
-import { Flex, FlexItem } from '../../flex';
-import { Tooltip } from '../tooltip';
+import { Text } from '../text';
+import { Flex, FlexItem } from '../flex';
+import { Tooltip } from '../ui/tooltip';
 import type { ColorType } from './types';
-import { space } from '../utils/space';
+import { space } from '../ui/utils/space';
 
 interface ColorDisplayProps {
 	color: ColorFormats.HSLA;