@wordpress/components 17.0.0 → 19.0.2

package/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.

package/src/{ui/color-picker → color-picker}/color-display.tsx

@@ -1,32 +1,32 @@
 /**
  * External dependencies
  */
-import colorize, { ColorFormats } from 'tinycolor2';
+import { colord, extend, Colord } from 'colord';
 
 /**
  * WordPress dependencies
  */
 import { useCopyToClipboard } from '@wordpress/compose';
-import { useState } from '@wordpress/element';
+import { useState, useEffect, useRef } from '@wordpress/element';
 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;
+	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,39 +108,59 @@ export const ColorDisplay = ( {
 	enableAlpha,
 }: ColorDisplayProps ) => {
 	const [ copiedColor, setCopiedColor ] = useState< string | null >( null );
+	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();
 				}
 			}
 		},
-		() => setCopiedColor( colorize( color ).toHex8String() )
+		() => {
+			if ( copyTimer.current ) {
+				clearTimeout( copyTimer.current );
+			}
+			setCopiedColor( color.toHex() );
+			copyTimer.current = setTimeout( () => {
+				setCopiedColor( null );
+				copyTimer.current = undefined;
+			}, 3000 );
+		}
 	);
+	useEffect( () => {
+		// clear copyTimer on component unmount.
+		return () => {
+			if ( copyTimer.current ) {
+				clearTimeout( copyTimer.current );
+			}
+		};
+	}, [] );
 	return (
 		<Tooltip
 			content={
 				<Text color="white">
-					{ copiedColor === colorize( color ).toHex8String()
+					{ copiedColor === color.toHex()
 						? __( 'Copied!' )
 						: __( 'Copy' ) }
 				</Text>
 			}
 		>
-			<Flex justify="flex-start" gap={ space( 1 ) } ref={ copyRef }>
+			<Flex
+				justify="flex-start"
+				gap={ space( 1 ) }
+				ref={ copyRef }
+				style={ { height: 30 } }
+			>
 				<Component { ...props } />
 			</Flex>
 		</Tooltip>

package/src/{ui/color-picker → 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;
 }
 

package/src/color-picker/component.tsx

@@ -0,0 +1,138 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import { Ref, useCallback } from 'react';
+import { colord, extend, Colord } from 'colord';
+import namesPlugin from 'colord/plugins/names';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useMemo } from '@wordpress/element';
+import { settings } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import {
+	useContextSystem,
+	contextConnect,
+	WordPressComponentProps,
+} from '../ui/context';
+import { HStack } from '../h-stack';
+import { Spacer } from '../spacer';
+import {
+	ColorfulWrapper,
+	SelectControl,
+	AuxiliaryColorArtefactWrapper,
+	DetailsControlButton,
+} from './styles';
+import { ColorDisplay } from './color-display';
+import { ColorInput } from './color-input';
+import { Picker } from './picker';
+
+import type { ColorType } from './types';
+
+extend( [ namesPlugin ] );
+
+export interface ColorPickerProps {
+	enableAlpha?: boolean;
+	color?: string;
+	onChange?: ( color: string ) => void;
+	defaultValue?: string;
+	copyFormat?: ColorType;
+}
+
+const options = [
+	{ label: 'RGB', value: 'rgb' as const },
+	{ label: 'HSL', value: 'hsl' as const },
+	{ label: 'Hex', value: 'hex' as const },
+];
+
+const ColorPicker = (
+	props: WordPressComponentProps< ColorPickerProps, 'div', false >,
+	forwardedRef: Ref< any >
+) => {
+	const {
+		enableAlpha = false,
+		color,
+		onChange,
+		defaultValue = '#fff',
+		copyFormat,
+		...divProps
+	} = useContextSystem( props, 'ColorPicker' );
+
+	// Use a safe default value for the color and remove the possibility of `undefined`.
+	const safeColordColor = useMemo( () => {
+		return color ? colord( color ) : colord( defaultValue );
+	}, [ color, defaultValue ] );
+
+	const handleChange = useCallback(
+		( nextValue: Colord ) => {
+			onChange( nextValue.toHex() );
+		},
+		[ onChange ]
+	);
+
+	const [ showInputs, setShowInputs ] = useState< boolean >( false );
+	const [ colorType, setColorType ] = useState< ColorType >(
+		copyFormat || 'hex'
+	);
+
+	return (
+		<ColorfulWrapper ref={ forwardedRef } { ...divProps }>
+			<Picker
+				onChange={ handleChange }
+				color={ safeColordColor }
+				enableAlpha={ enableAlpha }
+			/>
+			<AuxiliaryColorArtefactWrapper>
+				<HStack justify="space-between">
+					{ showInputs ? (
+						<SelectControl
+							options={ options }
+							value={ colorType }
+							onChange={ ( nextColorType ) =>
+								setColorType( nextColorType as ColorType )
+							}
+							label={ __( 'Color format' ) }
+							hideLabelFromVision
+						/>
+					) : (
+						<ColorDisplay
+							color={ safeColordColor }
+							colorType={ copyFormat || colorType }
+							enableAlpha={ enableAlpha }
+						/>
+					) }
+					<DetailsControlButton
+						isSmall
+						onClick={ () => setShowInputs( ! showInputs ) }
+						icon={ settings }
+						isPressed={ showInputs }
+						label={
+							showInputs
+								? __( 'Hide detailed inputs' )
+								: __( 'Show detailed inputs' )
+						}
+					/>
+				</HStack>
+				<Spacer margin={ 4 } />
+				{ showInputs && (
+					<ColorInput
+						colorType={ colorType }
+						color={ safeColordColor }
+						onChange={ handleChange }
+						enableAlpha={ enableAlpha }
+					/>
+				) }
+			</AuxiliaryColorArtefactWrapper>
+		</ColorfulWrapper>
+	);
+};
+
+const ConnectedColorPicker = contextConnect( ColorPicker, 'ColorPicker' );
+
+export default ConnectedColorPicker;

package/src/color-picker/hex-input.tsx

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { colord, Colord } from 'colord';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { Text } from '../text';
+import { Spacer } from '../spacer';
+import { space } from '../ui/utils/space';
+import { ColorHexInputControl } from './styles';
+
+interface HexInputProps {
+	color: Colord;
+	onChange: ( nextColor: Colord ) => void;
+	enableAlpha: boolean;
+}
+
+export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
+	const handleValidate = ( value: string ) => {
+		if ( ! colord( '#' + value ).isValid() ) {
+			throw new Error( 'Invalid hex color input' );
+		}
+	};
+
+	return (
+		<ColorHexInputControl
+			prefix={
+				<Spacer
+					as={ Text }
+					marginLeft={ space( 3.5 ) }
+					color="blue"
+					lineHeight={ 1 }
+				>
+					#
+				</Spacer>
+			}
+			value={ color.toHex().slice( 1 ).toUpperCase() }
+			onChange={ ( nextValue ) => {
+				onChange( colord( '#' + nextValue ) );
+			} }
+			onValidate={ handleValidate }
+			maxLength={ enableAlpha ? 8 : 6 }
+			label={ __( 'Hex color' ) }
+			hideLabelFromVision
+		/>
+	);
+};

package/src/{ui/color-picker → color-picker}/hsl-input.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ColorFormats } from 'tinycolor2';
+import { colord, Colord } from 'colord';
 
 /**
  * Internal dependencies
@@ -9,45 +9,59 @@ import type { ColorFormats } from 'tinycolor2';
 import { InputWithSlider } from './input-with-slider';
 
 interface HslInputProps {
-	color: ColorFormats.HSLA;
-	onChange: ( color: ColorFormats.HSLA ) => void;
+	color: Colord;
+	onChange: ( nextColor: Colord ) => void;
 	enableAlpha: boolean;
 }
 
 export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
-	const { h, s, l, a } = color;
+	const { h, s, l, a } = color.toHsl();
 
 	return (
 		<>
 			<InputWithSlider
-				min={ 1 }
-				max={ 360 }
+				min={ 0 }
+				max={ 359 }
 				label="Hue"
 				abbreviation="H"
-				value={ Math.trunc( h ) }
-				onChange={ ( nextH: number ) =>
-					onChange( { h: nextH, s, l, a } )
-				}
+				value={ h }
+				onChange={ ( nextH: number ) => {
+					onChange( colord( { h: nextH, s, l, a } ) );
+				} }
 			/>
 			<InputWithSlider
 				min={ 0 }
 				max={ 100 }
 				label="Saturation"
 				abbreviation="S"
-				value={ s <= 1 ? Math.trunc( 100 * s ) : s }
-				onChange={ ( nextS: number ) =>
-					onChange( { h, s: nextS / 100, l, a } )
-				}
+				value={ s }
+				onChange={ ( nextS: number ) => {
+					onChange(
+						colord( {
+							h,
+							s: nextS,
+							l,
+							a,
+						} )
+					);
+				} }
 			/>
 			<InputWithSlider
 				min={ 0 }
 				max={ 100 }
 				label="Lightness"
 				abbreviation="L"
-				value={ l <= 1 ? Math.trunc( 100 * l ) : l }
-				onChange={ ( nextL: number ) =>
-					onChange( { h, s, l: nextL / 100, a } )
-				}
+				value={ l }
+				onChange={ ( nextL: number ) => {
+					onChange(
+						colord( {
+							h,
+							s,
+							l: nextL,
+							a,
+						} )
+					);
+				} }
 			/>
 			{ enableAlpha && (
 				<InputWithSlider
@@ -56,14 +70,16 @@ export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 					label="Alpha"
 					abbreviation="A"
 					value={ Math.trunc( 100 * a ) }
-					onChange={ ( nextA: number ) =>
-						onChange( {
-							h,
-							s,
-							l,
-							a: nextA / 100,
-						} )
-					}
+					onChange={ ( nextA: number ) => {
+						onChange(
+							colord( {
+								h,
+								s,
+								l,
+								a: nextA / 100,
+							} )
+						);
+					} }
 				/>
 			) }
 		</>

package/src/color-picker/index.native.js

@@ -3,7 +3,8 @@
  */
 import { View, Text, TouchableWithoutFeedback, Platform } from 'react-native';
 import HsvColorPicker from 'react-native-hsv-color-picker';
-import tinycolor from 'tinycolor2';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
 /**
  * WordPress dependencies
  */
@@ -17,6 +18,8 @@ import { Icon, check, close } from '@wordpress/icons';
  */
 import styles from './style.scss';
 
+extend( [ namesPlugin ] );
+
 function ColorPicker( {
 	shouldEnableBottomSheetScroll,
 	shouldEnableBottomSheetMaxHeight,
@@ -35,11 +38,11 @@ function ColorPicker( {
 	const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
 	const { h: initH, s: initS, v: initV } =
 		! isGradientColor && activeColor
-			? tinycolor( activeColor ).toHsv()
-			: { h: 0, s: 0.5, v: 0.5 };
+			? colord( activeColor ).toHsv()
+			: { h: 0, s: 50, v: 50 };
 	const [ hue, setHue ] = useState( initH );
-	const [ sat, setSaturation ] = useState( initS );
-	const [ val, setValue ] = useState( initV );
+	const [ sat, setSaturation ] = useState( initS / 100 );
+	const [ val, setValue ] = useState( initV / 100 );
 	const [ savedColor ] = useState( activeColor );
 
 	const {
@@ -71,9 +74,11 @@ function ColorPicker( {
 		styles.footerDark
 	);
 
-	const currentColor = tinycolor(
-		`hsv ${ hue } ${ sat } ${ val }`
-	).toHexString();
+	const currentColor = colord( {
+		h: hue,
+		s: sat * 100,
+		v: val * 100,
+	} ).toHex();
 
 	useEffect( () => {
 		if ( ! didMount.current ) {
@@ -205,4 +210,4 @@ function ColorPicker( {
 	);
 }
 
-export default ColorPicker;
+export { ColorPicker };

package/src/{ui/color-picker → color-picker}/index.ts

@@ -1 +1,4 @@
+/**
+ * Internal dependencies
+ */
 export { LegacyAdapter as ColorPicker } from './legacy-adapter';

package/src/{ui/color-picker → color-picker}/input-with-slider.tsx

@@ -1,12 +1,11 @@
 /**
  * Internal dependencies
  */
-import NumberControl from '../../number-control';
-import { HStack } from '../../h-stack';
-import { Text } from '../../text';
-import { Spacer } from '../../spacer';
-import { space } from '../utils/space';
-import { RangeControl } from './styles';
+import { HStack } from '../h-stack';
+import { Text } from '../text';
+import { Spacer } from '../spacer';
+import { space } from '../ui/utils/space';
+import { RangeControl, NumberControlWrapper } from './styles';
 
 interface InputWithSliderProps {
 	min: number;
@@ -26,9 +25,8 @@ export const InputWithSlider = ( {
 	value,
 }: InputWithSliderProps ) => {
 	return (
-		<Spacer as={ HStack }>
-			<NumberControl
-				__unstableInputWidth="5em"
+		<Spacer as={ HStack } spacing={ 4 }>
+			<NumberControlWrapper
 				min={ min }
 				max={ max }
 				label={ label }
@@ -36,7 +34,12 @@ export const InputWithSlider = ( {
 				value={ value }
 				onChange={ onChange }
 				prefix={
-					<Spacer as={ Text } paddingLeft={ space( 1 ) } color="blue">
+					<Spacer
+						as={ Text }
+						paddingLeft={ space( 3.5 ) }
+						color="blue"
+						lineHeight={ 1 }
+					>
 						{ abbreviation }
 					</Spacer>
 				}

package/src/color-picker/picker.tsx

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { RgbStringColorPicker, RgbaStringColorPicker } from 'react-colorful';
+import { colord, Colord } from 'colord';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+interface PickerProps {
+	color: Colord;
+	enableAlpha: boolean;
+	onChange: ( nextColor: Colord ) => void;
+}
+
+export const Picker = ( { color, enableAlpha, onChange }: PickerProps ) => {
+	const Component = enableAlpha
+		? RgbaStringColorPicker
+		: RgbStringColorPicker;
+	const rgbColor = useMemo( () => color.toRgbString(), [ color ] );
+
+	return (
+		<Component
+			color={ rgbColor }
+			onChange={ ( nextColor ) => {
+				onChange( colord( nextColor ) );
+			} }
+		/>
+	);
+};