ColorPalette: Add an accessible color picker based on ChromePicker

docs/manifest.json

@@ -581,6 +581,12 @@
 		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/src/color-palette/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "ColorPicker",
+		"slug": "color-picker",
+		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/src/color-picker/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "Dashicon",
 		"slug": "dashicon",

packages/components/CHANGELOG.md

@@ -1,5 +1,9 @@
 ## 4.2.0 (Unreleased)
 
+### New Feature
+
+- Added a new `ColorPicker` component ([#10564](https://github.com/WordPress/gutenberg/pull/10564)).
+
 ### Deprecation
 
 - `wp.components.PanelColor` has been deprecated in favor of `wp.editor.PanelColorSettings`.

packages/components/package.json

@@ -42,9 +42,9 @@
 		"mousetrap": "^1.6.2",
 		"re-resizable": "^4.7.1",
 		"react-click-outside": "^2.3.1",
-		"react-color": "^2.13.4",
 		"react-dates": "^17.1.1",
 		"rememo": "^3.0.0",
+		"tinycolor2": "^1.4.1",
 		"uuid": "^3.1.0"
 	},
 	"devDependencies": {
@@ -54,4 +54,4 @@
 	"publishConfig": {
 		"access": "public"
 	}
-}
+}

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { ChromePicker } from 'react-color';
 import { map } from 'lodash';
 
 /**
@@ -16,6 +15,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import Button from '../button';
 import Dropdown from '../dropdown';
 import Tooltip from '../tooltip';
+import ColorPicker from '../color-picker';
 
 export default function ColorPalette( { colors, disableCustomColors = false, value, onChange, className } ) {
 	function applyOrUnset( color ) {
@@ -71,7 +71,7 @@ export default function ColorPalette( { colors, disableCustomColors = false, val
 						</Tooltip>
 					) }
 					renderContent={ () => (
-						<ChromePicker
+						<ColorPicker
 							color={ value }
 							onChangeComplete={ ( color ) => onChange( color.hex ) }
 							disableAlpha

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

@@ -1,38 +1,89 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ColorPalette Dropdown .renderContent should render dropdown content 1`] = `
-<Chrome
-  color="#f00"
-  disableAlpha={true}
-  hex="#ff0000"
-  hsl={
-    Object {
-      "a": 1,
-      "h": 0,
-      "l": 0.5,
-      "s": 1,
-    }
-  }
-  hsv={
-    Object {
-      "a": 1,
-      "h": 0,
-      "s": 1,
-      "v": 1,
-    }
-  }
-  oldHue={0}
-  onChange={[Function]}
-  onChangeComplete={[Function]}
-  rgb={
-    Object {
-      "a": 1,
-      "b": 0,
-      "g": 0,
-      "r": 255,
-    }
-  }
-/>
+<div
+  className="components-color-picker is-alpha-disabled"
+>
+  <div
+    className="components-color-picker__saturation"
+  >
+    <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"
+      >
+        <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>
 `;
 
 exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`] = `

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

@@ -90,13 +90,6 @@ describe( 'ColorPalette', () => {
 			test( 'should render dropdown content', () => {
 				expect( renderedContent ).toMatchSnapshot();
 			} );
-
-			test( 'should call onToggle on click.', () => {
-				renderedContent.simulate( 'changeComplete', { hex: currentColor } );
-
-				expect( onChange ).toHaveBeenCalledTimes( 1 );
-				expect( onChange ).toHaveBeenCalledWith( currentColor );
-			} );
 		} );
 	} );
 } );

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

@@ -0,0 +1,23 @@
+# 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._
+
+## Usage
+```jsx
+import { ColorPicker } from '@wordpress/components';
+import { withState } from '@wordpress/compose';
+
+const MyColorPicker = withState( {
+	color: '#f00',
+} )( ( { color, setState } ) => {
+	return (
+		<ColorPicker
+			color={ color }
+			onChangeComplete={ ( value ) => setState( value.hex ) }
+			disableAlpha
+		/>
+	);
+} );
+```