Fix some issues on the color picker component; Remove tinycolor2;

package.json

@@ -117,7 +117,6 @@
 		"@types/requestidlecallback": "0.3.4",
 		"@types/semver": "7.3.8",
 		"@types/sprintf-js": "1.1.2",
-		"@types/tinycolor2": "1.4.3",
 		"@types/uuid": "8.3.1",
 		"@wordpress/babel-plugin-import-jsx-pragma": "file:packages/babel-plugin-import-jsx-pragma",
 		"@wordpress/babel-plugin-makepot": "file:packages/babel-plugin-makepot",

packages/components/CHANGELOG.md

@@ -9,12 +9,18 @@
 ### Enhancements
 
 -   Removed the separator shown between `ToggleGroupControl` items ([#35497](https://github.com/WordPress/gutenberg/pull/35497)).
+-   The `ColorPicker` component property `onChangeComplete`, a function accepting a color object, was replaced with the property `onChange`, a function accepting a  string on  ([#35220](https://github.com/WordPress/gutenberg/pull/35220)).
+-   The property `disableAlpha`, was removed from the `ColorPicker` component. Use the new opposite property `enableAlpha` instead ([#35220](https://github.com/WordPress/gutenberg/pull/35220)).
 
 ### Experimental
 
 -   Removed the `fieldset` wrapper from the `FontAppearanceControl` component ([35461](https://github.com/WordPress/gutenberg/pull/35461)).
 -   Refactored the `ToggleGroupControl` component's structure and embedded `ToggleGroupControlButton` directly into `ToggleGroupControlOption` ([#35600](https://github.com/WordPress/gutenberg/pull/35600)).
 
+### Breaking Changes
+
+-   The `color` property a `tinycolor2` color object passed on `onChangeComplete` property of the `ColorPicker` component was removed. Please use the new `onChange` property that accepts a string color representation ([#35562](https://github.com/WordPress/gutenberg/pull/35562)).
+
 ## 18.0.0 (2021-10-12)
 
 ### Breaking Changes

packages/components/package.json

@@ -66,7 +66,6 @@
 		"react-use-gesture": "^9.0.0",
 		"reakit": "^1.3.8",
 		"rememo": "^3.0.0",
-		"tinycolor2": "^1.4.2",
 		"uuid": "^8.3.0"
 	},
 	"peerDependencies": {

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

@@ -2,14 +2,7 @@
 
 exports[`ColorPalette Dropdown .renderContent should render dropdown content 1`] = `
 <ColorPicker
-  color={
-    Object {
-      "a": 1,
-      "h": 0,
-      "l": 0.5,
-      "s": 1,
-    }
-  }
+  color="#f00"
   enableAlpha={false}
   onChange={[Function]}
 />

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import colorize, { ColorFormats } from 'tinycolor2';
+import { colord, extend, Colord } from 'colord';
 
 /**
  * WordPress dependencies
@@ -20,13 +20,13 @@ import type { ColorType } from './types';
 import { space } from '../ui/utils/space';
 
 interface ColorDisplayProps {
-	color: ColorFormats.HSLA;
+	color: Colord;
 	colorType: ColorType;
 	enableAlpha: boolean;
 }
 
 interface DisplayProps {
-	color: ColorFormats.HSLA;
+	color: Colord;
 	enableAlpha: boolean;
 }
 
@@ -50,7 +50,7 @@ const ValueDisplay = ( { values }: ValueDisplayProps ) => (
 );
 
 const HslDisplay = ( { color, enableAlpha }: DisplayProps ) => {
-	const { h, s, l, a } = colorize( color ).toHsl();
+	const { h, s, l, a } = color.toHsl();
 
 	const values: Values = [
 		[ Math.floor( h ), 'H' ],
@@ -65,7 +65,7 @@ const HslDisplay = ( { color, enableAlpha }: DisplayProps ) => {
 };
 
 const RgbDisplay = ( { color, enableAlpha }: DisplayProps ) => {
-	const { r, g, b, a } = colorize( color ).toRgb();
+	const { r, g, b, a } = color.toRgb();
 
 	const values: Values = [
 		[ r, 'R' ],
@@ -80,14 +80,8 @@ const RgbDisplay = ( { color, enableAlpha }: DisplayProps ) => {
 	return <ValueDisplay values={ values } />;
 };
 
-const HexDisplay = ( { color, enableAlpha }: DisplayProps ) => {
-	const colorized = colorize( color );
-	const colorWithoutHash = ( enableAlpha
-		? colorized.toHex8String()
-		: colorized.toHexString()
-	)
-		.slice( 1 )
-		.toUpperCase();
+const HexDisplay = ( { color }: DisplayProps ) => {
+	const colorWithoutHash = color.toHex().slice( 1 ).toUpperCase();
 	return (
 		<FlexItem>
 			<Text color="blue">#</Text>
@@ -114,32 +108,29 @@ export const ColorDisplay = ( {
 	enableAlpha,
 }: ColorDisplayProps ) => {
 	const [ copiedColor, setCopiedColor ] = useState< string | null >( null );
-	const copyTimer = useRef< number | undefined >();
+	const copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();
 	const props = { color, enableAlpha };
 	const Component = getComponent( colorType );
 	const copyRef = useCopyToClipboard< HTMLDivElement >(
 		() => {
 			switch ( colorType ) {
 				case 'hsl': {
-					return colorize( color ).toHslString();
+					return color.toHslString();
 				}
 				case 'rgb': {
-					return colorize( color ).toRgbString();
+					return color.toRgbString();
 				}
 				default:
 				case 'hex': {
-					const colorized = colorize( color );
-					return enableAlpha
-						? colorized.toHex8String()
-						: colorized.toHexString();
+					return color.toHex();
 				}
 			}
 		},
 		() => {
 			if ( copyTimer.current ) {
 				clearTimeout( copyTimer.current );
 			}
-			setCopiedColor( colorize( color ).toHex8String() );
+			setCopiedColor( color.toHex() );
 			copyTimer.current = setTimeout( () => {
 				setCopiedColor( null );
 				copyTimer.current = undefined;
@@ -158,7 +149,7 @@ export const ColorDisplay = ( {
 		<Tooltip
 			content={
 				<Text color="white">
-					{ copiedColor === colorize( color ).toHex8String()
+					{ copiedColor === color.toHex()
 						? __( 'Copied!' )
 						: __( 'Copy' ) }
 				</Text>

packages/components/src/color-picker/color-input.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ColorFormats } from 'tinycolor2';
+import { colord, extend, Colord } from 'colord';
 
 /**
  * Internal dependencies
@@ -12,8 +12,8 @@ import { HexInput } from './hex-input';
 
 interface ColorInputProps {
 	colorType: 'hsl' | 'hex' | 'rgb';
-	color: ColorFormats.HSLA;
-	onChange: ( value: ColorFormats.HSLA ) => void;
+	color: Colord;
+	onChange: ( nextColor: Colord ) => void;
 	enableAlpha: boolean;
 }
 

packages/components/src/color-picker/component.tsx

@@ -2,13 +2,14 @@
  * External dependencies
  */
 // eslint-disable-next-line no-restricted-imports
-import type { Ref } from 'react';
-import type { ColorFormats } from 'tinycolor2';
+import { Ref, useCallback } from 'react';
+import { colord, extend, Colord } from 'colord';
+import namesPlugin from 'colord/plugins/names';
 
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
 import { settings } from '@wordpress/icons';
 import { useDebounce } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
@@ -36,11 +37,13 @@ import { useControlledValue } from '../utils/hooks';
 
 import type { ColorType } from './types';
 
+extend( [ namesPlugin ] );
+
 export interface ColorPickerProps {
 	enableAlpha?: boolean;
-	color?: ColorFormats.HSL | ColorFormats.HSLA;
-	onChange?: ( color: ColorFormats.HSL | ColorFormats.HSLA ) => void;
-	defaultValue?: ColorFormats.HSL | ColorFormats.HSLA;
+	color?: string;
+	onChange?: ( color: string ) => void;
+	defaultValue?: string;
 	copyFormat?: ColorType;
 }
 
@@ -50,12 +53,6 @@ const options = [
 	{ label: 'Hex', value: 'hex' as const },
 ];
 
-const getSafeColor = (
-	color: ColorFormats.HSL | ColorFormats.HSLA | undefined
-): ColorFormats.HSLA => {
-	return color ? { a: 1, ...color } : { h: 0, s: 0, l: 100, a: 1 };
-};
-
 const ColorPicker = (
 	props: WordPressComponentProps< ColorPickerProps, 'div', false >,
 	forwardedRef: Ref< any >
@@ -75,17 +72,20 @@ const ColorPicker = (
 		defaultValue,
 	} );
 
+	// Use a safe default value for the color and remove the possibility of `undefined`.
+	const safeColordColor = useMemo( () => {
+		return color ? colord( color ) : colord( '#fff' );
+	}, [ color ] );
+
 	// Debounce to prevent rapid changes from conflicting with one another.
 	const debouncedSetColor = useDebounce( setColor );
 
-	const handleChange = (
-		nextValue: ColorFormats.HSLA | ColorFormats.HSL
-	) => {
-		debouncedSetColor( nextValue );
-	};
-
-	// Use a safe default value for the color and remove the possibility of `undefined`.
-	const safeColor = getSafeColor( color );
+	const handleChange = useCallback(
+		( nextValue: Colord ) => {
+			debouncedSetColor( nextValue.toHex() );
+		},
+		[ debouncedSetColor ]
+	);
 
 	const [ showInputs, setShowInputs ] = useState< boolean >( false );
 	const [ colorType, setColorType ] = useState< ColorType >(
@@ -96,7 +96,7 @@ const ColorPicker = (
 		<ColorfulWrapper ref={ forwardedRef } { ...divProps }>
 			<Picker
 				onChange={ handleChange }
-				color={ safeColor }
+				color={ safeColordColor }
 				enableAlpha={ enableAlpha }
 			/>
 			<AuxiliaryColorArtefactWrapper>
@@ -113,7 +113,7 @@ const ColorPicker = (
 						/>
 					) : (
 						<ColorDisplay
-							color={ safeColor }
+							color={ safeColordColor }
 							colorType={ copyFormat || colorType }
 							enableAlpha={ enableAlpha }
 						/>
@@ -134,7 +134,7 @@ const ColorPicker = (
 				{ showInputs && (
 					<ColorInput
 						colorType={ colorType }
-						color={ safeColor }
+						color={ safeColordColor }
 						onChange={ handleChange }
 						enableAlpha={ enableAlpha }
 					/>

packages/components/src/color-picker/hex-input.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import colorize, { ColorFormats } from 'tinycolor2';
+import { colord, Colord } from 'colord';
 
 /**
  * WordPress dependencies
@@ -17,23 +17,18 @@ import { space } from '../ui/utils/space';
 import { ColorHexInputControl } from './styles';
 
 interface HexInputProps {
-	color: ColorFormats.HSLA;
-	onChange: ( value: ColorFormats.HSLA ) => void;
+	color: Colord;
+	onChange: ( nextColor: Colord ) => void;
 	enableAlpha: boolean;
 }
 
 export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 	const handleValidate = ( value: string ) => {
-		if ( ! colorize( value ).isValid() ) {
+		if ( ! colord( '#' + value ).isValid() ) {
 			throw new Error( 'Invalid hex color input' );
 		}
 	};
 
-	const colorized = colorize( color );
-	const value = enableAlpha
-		? colorized.toHex8String()
-		: colorized.toHexString();
-
 	return (
 		<ColorHexInputControl
 			prefix={
@@ -46,10 +41,10 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 					#
 				</Spacer>
 			}
-			value={ value.slice( 1 ).toUpperCase() }
-			onChange={ ( nextValue ) =>
-				onChange( colorize( nextValue ).toHsl() )
-			}
+			value={ color.toHex().slice( 1 ).toUpperCase() }
+			onChange={ ( nextValue ) => {
+				onChange( colord( '#' + nextValue ) );
+			} }
 			onValidate={ handleValidate }
 			maxLength={ enableAlpha ? 8 : 6 }
 			label={ __( 'Hex color' ) }