ColorPalette: Add an accessible color picker based on ChromePicker (#…

…10564) * Add color picker component * Add color picker styles to build * Update to buttons for focus handles * Update styles * Update class name * Add color-picker component to exports * Update name to ColorPicker * Add labels to color input groups * Fix describedby prop name * Update view to use `getDerivedStateFromProps` * Add “Input” component to handle intermediate state when entering values Specifically needed for hex colors, which can be invalid while they’re being entered * Add space around text inputs * Translate toggle label * Add focus styles to colourpicker pointers. * Remove react-color dependency * Add class name to better find the component in the devtools * Add tinycolor2 dependency * Add reference to react-color license & copyright * Better label * Update snapshot * Decouple valueKey and label so we can use semantic labels. * Use KeyboardShortcuts component to avoid separate instances of Mousetrap * Use createRef * Normalize HSV / HSL values H: 0 - 260 S, L, V: 0 - 100 * Omit `valueKey` from being passed to input * Use createRef in all components * Update saturation handle label * Prevent key events on slider handles Fixes the issue where VoiceOver grabs arrow-key input as navigation * Use a focusable div for slider handle * Apply focus style to alpha handle * Add description to hue controls * Add speak commands for view change * Update snapshot * Remove test as the component API surface changed We have done some changes to the ChromePicker so this test can no longer be replicated. * Add README, tests and update Changelog * Remove react-color dependency * Add docs manifest file
WordPress · Oct 19, 2018 · 3fa55cb · 3fa55cb
1 parent 48c1209
commit 3fa55cb
Show file tree

Hide file tree

Showing 19 changed files with 1,606 additions and 72 deletions.
diff --git a/docs/manifest.json b/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",

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/CHANGELOG.md b/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`.

diff --git a/packages/components/package.json b/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"
 	}
-}
+}
diff --git a/packages/components/src/color-palette/index.js b/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

diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/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`] = `

diff --git a/packages/components/src/color-palette/test/index.js b/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 );
-			} );
 		} );
 	} );
 } );
diff --git a/packages/components/src/color-picker/README.md b/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
+		/>
+	);
+} );
+```