@wordpress/components 17.0.0 → 19.0.2

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import colorize, { ColorFormats } from 'tinycolor2';
+import { colord, Colord } from 'colord';
 
 /**
  * Internal dependencies
@@ -9,13 +9,13 @@ import colorize, { ColorFormats } from 'tinycolor2';
 import { InputWithSlider } from './input-with-slider';
 
 interface RgbInputProps {
-	color: ColorFormats.HSLA;
-	onChange: ( color: ColorFormats.HSLA ) => void;
+	color: Colord;
+	onChange: ( nextColor: Colord ) => void;
 	enableAlpha: boolean;
 }
 
 export const RgbInput = ( { color, onChange, enableAlpha }: RgbInputProps ) => {
-	const { r, g, b, a } = colorize( color ).toRgb();
+	const { r, g, b, a } = color.toRgb();
 
 	return (
 		<>
@@ -26,7 +26,7 @@ export const RgbInput = ( { color, onChange, enableAlpha }: RgbInputProps ) => {
 				abbreviation="R"
 				value={ r }
 				onChange={ ( nextR: number ) =>
-					onChange( colorize( { r: nextR, g, b, a } ).toHsl() )
+					onChange( colord( { r: nextR, g, b, a } ) )
 				}
 			/>
 			<InputWithSlider
@@ -36,7 +36,7 @@ export const RgbInput = ( { color, onChange, enableAlpha }: RgbInputProps ) => {
 				abbreviation="G"
 				value={ g }
 				onChange={ ( nextG: number ) =>
-					onChange( colorize( { r, g: nextG, b, a } ).toHsl() )
+					onChange( colord( { r, g: nextG, b, a } ) )
 				}
 			/>
 			<InputWithSlider
@@ -46,7 +46,7 @@ export const RgbInput = ( { color, onChange, enableAlpha }: RgbInputProps ) => {
 				abbreviation="B"
 				value={ b }
 				onChange={ ( nextB: number ) =>
-					onChange( colorize( { r, g, b: nextB, a } ).toHsl() )
+					onChange( colord( { r, g, b: nextB, a } ) )
 				}
 			/>
 			{ enableAlpha && (
@@ -58,12 +58,12 @@ export const RgbInput = ( { color, onChange, enableAlpha }: RgbInputProps ) => {
 					value={ Math.trunc( a * 100 ) }
 					onChange={ ( nextA: number ) =>
 						onChange(
-							colorize( {
+							colord( {
 								r,
 								g,
 								b,
 								a: nextA / 100,
-							} ).toHsl()
+							} )
 						)
 					}
 				/>

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { boolean, select } from '@storybook/addon-knobs';
+
 /**
  * WordPress dependencies
  */
@@ -6,25 +11,71 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import ColorPicker from '../';
+import { ColorPicker } from '..';
+import { Flex } from '../../flex';
+import { Spacer } from '../../spacer';
+import { space } from '../../ui/utils/space';
+
+export default {
+	component: ColorPicker,
+	title: 'Components/ColorPicker',
+	parameters: {
+		knobs: { disabled: false },
+	},
+};
+
+const PROP_UNSET = 'unset';
 
-export default { title: 'Components/ColorPicker', component: ColorPicker };
+const Example = () => {
+	const [ color, setColor ] = useState( undefined );
+	const props = {
+		enableAlpha: boolean( 'enableAlpha', false ),
+		copyFormat: select(
+			'copyFormat',
+			[ PROP_UNSET, 'rgb', 'hsl', 'hex' ],
+			PROP_UNSET
+		),
+	};
+
+	if ( props.copyFormat === PROP_UNSET ) {
+		delete props.copyFormat;
+	}
 
-const ColorPickerWithState = ( { ...props } ) => {
-	const [ color, setColor ] = useState( '#f00' );
 	return (
-		<ColorPicker
-			{ ...props }
-			color={ color }
-			onChangeComplete={ ( value ) => setColor( value.hex ) }
-		/>
+		<Flex
+			as={ Spacer }
+			gap={ space( 2 ) }
+			justify="space-around"
+			align="flex-start"
+			marginTop={ space( 10 ) }
+		>
+			<ColorPicker { ...props } color={ color } onChange={ setColor } />
+			<div style={ { width: 200, textAlign: 'center' } }>{ color }</div>
+			<ColorPicker { ...props } color={ color } onChange={ setColor } />
+		</Flex>
 	);
 };
 
 export const _default = () => {
-	return <ColorPickerWithState disableAlpha />;
+	return <Example />;
 };
 
-export const alphaEnabled = () => {
-	return <ColorPickerWithState disableAlpha={ false } />;
+const LegacyExample = () => {
+	const [ legacyColor, setLegacyColor ] = useState( '#fff' );
+	const legacyProps = {
+		color: legacyColor,
+		onChangeComplete: setLegacyColor,
+		disableAlpha: boolean( 'disableAlpha', true ),
+	};
+
+	return (
+		<Flex align="flex-start" justify="flex-start">
+			<ColorPicker { ...legacyProps } />
+			<pre style={ { width: '20em' } }>
+				{ JSON.stringify( legacyColor, undefined, 4 ) }
+			</pre>
+		</Flex>
+	);
 };
+
+export const legacy = () => <LegacyExample />;

package/src/color-picker/styles.ts

@@ -0,0 +1,123 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * Internal dependencies
+ */
+import NumberControl from '../number-control';
+import InnerSelectControl from '../select-control';
+import InnerRangeControl from '../range-control';
+import { StyledField } from '../base-control/styles/base-control-styles';
+import { space } from '../ui/utils/space';
+import Button from '../button';
+import {
+	BackdropUI,
+	Container as InputControlContainer,
+	Input,
+} from '../input-control/styles/input-control-styles';
+import InputControl from '../input-control';
+import CONFIG from '../utils/config-values';
+
+export const NumberControlWrapper = styled( NumberControl )`
+	${ InputControlContainer } {
+		width: ${ space( 24 ) };
+	}
+`;
+
+export const SelectControl = styled( InnerSelectControl )`
+	margin-left: ${ space( -2 ) };
+	width: 5em;
+	${ BackdropUI } {
+		display: none;
+	}
+`;
+
+export const RangeControl = styled( InnerRangeControl )`
+	flex: 1;
+
+	${ StyledField } {
+		margin-bottom: 0;
+	}
+`;
+
+// All inputs should be the same height so this should be changed at the component level.
+// That involves changing heights of multiple input types probably buttons too etc.
+// So until that is done we are already using the new height on the color picker so it matches the mockups.
+const inputHeightStyle = `
+&&& ${ Input } {
+	height: 40px;
+}`;
+
+// Make the Hue circle picker not go out of the bar
+const interactiveHueStyles = `
+.react-colorful__interactive {
+	width: calc( 100% - ${ space( 2 ) } );
+	margin-left: ${ space( 1 ) };
+}`;
+
+export const AuxiliaryColorArtefactWrapper = styled.div`
+	padding: ${ space( 2 ) } ${ space( 4 ) };
+`;
+
+export const ColorfulWrapper = styled.div`
+	width: 216px;
+
+	.react-colorful {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: 216px;
+		height: auto;
+	}
+
+	.react-colorful__saturation {
+		width: 100%;
+		border-radius: 0;
+		height: 216px;
+		margin-bottom: ${ space( 4 ) };
+		border-bottom: none;
+	}
+
+	.react-colorful__hue,
+	.react-colorful__alpha {
+		width: 184px;
+		height: 16px;
+		border-radius: 16px;
+		margin-bottom: ${ space( 2 ) };
+	}
+
+	.react-colorful__pointer {
+		height: 16px;
+		width: 16px;
+		border: none;
+		box-shadow: 0 0 2px 0 rgba( 0, 0, 0, 0.25 );
+
+		// Shown instead of box-shadow to Windows high contrast mode.
+		outline: 2px solid transparent;
+	}
+
+	.react-colorful__pointer-fill {
+		box-shadow: inset 0 0 0 ${ CONFIG.borderWidthFocus } #fff;
+	}
+
+	${ interactiveHueStyles }
+
+	${ StyledField } {
+		margin-bottom: 0;
+	}
+
+	${ inputHeightStyle }
+`;
+
+export const DetailsControlButton = styled( Button )`
+	&&&&& {
+		min-width: ${ space( 6 ) };
+		padding: 0;
+	}
+`;
+
+export const ColorHexInputControl = styled( InputControl )`
+	width: 8em;
+`;

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

@@ -1,118 +1,145 @@
 /**
  * External dependencies
  */
-import TestRenderer from 'react-test-renderer';
+import { render, fireEvent } from '@testing-library/react';
 
 /**
- * WordPress dependencies
+ * Internal dependencies
  */
-import { DOWN, ENTER, UP } from '@wordpress/keycodes';
+import { ColorPicker } from '..';
 
 /**
- * Internal dependencies
+ * Ordinarily we'd try to select the compnoent by role but the silder role appears
+ * on several elements and we'd end up encoding assumptions about order when
+ * trying to select the appropriate element. We might as well just use the classname
+ * on the container which will be more durable if, for example, the order changes.
+ *
+ * @param {HTMLElement} container
+ * @return {HTMLElement} The saturation element
  */
-import ColorPicker from '../';
+function getSaturation( container ) {
+	return container.querySelector(
+		'.react-colorful__saturation .react-colorful__interactive'
+	);
+}
+
+// Fix to pass `pageX` and `pageY`
+// See https://github.com/testing-library/react-testing-library/issues/268
+class FakeMouseEvent extends window.MouseEvent {
+	constructor( type, values = {} ) {
+		super( type, { buttons: 1, bubbles: true, ...values } );
+
+		Object.assign( this, {
+			pageX: values.pageX || 0,
+			pageY: values.pageY || 0,
+		} );
+	}
+}
+
+function moveReactColorfulSlider( sliderElement, from, to ) {
+	fireEvent( sliderElement, new FakeMouseEvent( 'mousedown', from ) );
+	fireEvent( sliderElement, new FakeMouseEvent( 'mousemove', to ) );
+}
+
+const hslaMatcher = expect.objectContaining( {
+	h: expect.any( Number ),
+	s: expect.any( Number ),
+	l: expect.any( Number ),
+	a: expect.any( Number ),
+} );
+
+const legacyColorMatcher = {
+	hex: expect.any( String ),
+	hsl: hslaMatcher,
+	hsv: expect.objectContaining( {
+		h: expect.any( Number ),
+		s: expect.any( Number ),
+		v: expect.any( Number ),
+		a: expect.any( Number ),
+	} ),
+	rgb: expect.objectContaining( {
+		r: expect.any( Number ),
+		g: expect.any( Number ),
+		b: expect.any( Number ),
+		a: expect.any( Number ),
+	} ),
+	oldHue: expect.any( Number ),
+	source: 'hex',
+};
 
 describe( 'ColorPicker', () => {
-	const color = '#FFF';
-	let base;
+	describe( 'legacy props', () => {
+		it( 'should fire onChangeComplete with the legacy color format', async () => {
+			const onChangeComplete = jest.fn();
+			const color = '#fff';
 
-	beforeEach( () => {
-		base = TestRenderer.create(
-			<ColorPicker
-				color={ color }
-				onChangeComplete={ () => {} }
-				disableAlpha
-			/>
-		);
-	} );
+			const { container } = render(
+				<ColorPicker
+					onChangeComplete={ onChangeComplete }
+					color={ color }
+				/>
+			);
 
-	test( 'should render color picker', () => {
-		expect( base.toJSON() ).toMatchSnapshot();
+			const saturation = getSaturation( container );
+			moveReactColorfulSlider(
+				saturation,
+				{ pageX: 0, pageY: 0 },
+				{ pageX: 10, pageY: 10 }
+			);
+
+			expect( onChangeComplete ).toHaveBeenCalledWith(
+				legacyColorMatcher
+			);
+		} );
 	} );
 
-	test( 'should only update input view for draft changes', () => {
-		const testRenderer = TestRenderer.create(
-			<ColorPicker
-				color={ color }
-				onChangeComplete={ () => {} }
-				disableAlpha
-			/>
-		);
-		testRenderer.root
-			.findByType( 'input' )
-			.props.onChange( { target: { value: '#ABC' } } );
+	it( 'should fire onChange with the string value', async () => {
+		const onChange = jest.fn();
+		const color = 'rgba(1, 1, 1, 0.5)';
 
-		expect( testRenderer.toJSON() ).toMatchDiffSnapshot( base.toJSON() );
-	} );
+		const { container } = render(
+			<ColorPicker onChange={ onChange } color={ color } enableAlpha />
+		);
 
-	test( 'should commit changes to all views on blur', () => {
-		const testRenderer = TestRenderer.create(
-			<ColorPicker
-				color={ color }
-				onChangeComplete={ () => {} }
-				disableAlpha
-			/>
+		const saturation = getSaturation( container );
+		moveReactColorfulSlider(
+			saturation,
+			{ pageX: 0, pageY: 0 },
+			{ pageX: 10, pageY: 10 }
 		);
-		testRenderer.root
-			.findByType( 'input' )
-			.props.onChange( { target: { value: '#ABC' } } );
-		testRenderer.root.findByType( 'input' ).props.onBlur();
 
-		expect( testRenderer.toJSON() ).toMatchDiffSnapshot( base.toJSON() );
+		expect( onChange ).toHaveBeenCalledWith(
+			expect.stringMatching( /^#([a-fA-F0-9]{8})$/ )
+		);
 	} );
 
-	test( 'should commit changes to all views on keyDown = UP', () => {
-		const testRenderer = TestRenderer.create(
+	it( 'should fire onChange with the HSL value', async () => {
+		const onChange = jest.fn();
+		const color = {
+			h: 125,
+			s: 0.2,
+			l: 0.5,
+			// add alpha to prove it's ignored
+			a: 0.5,
+		};
+
+		const { container } = render(
 			<ColorPicker
+				onChange={ onChange }
 				color={ color }
-				onChangeComplete={ () => {} }
-				disableAlpha
+				enableAlpha={ false }
 			/>
 		);
-		testRenderer.root
-			.findByType( 'input' )
-			.props.onChange( { target: { value: '#ABC' } } );
-		testRenderer.root
-			.findByType( 'input' )
-			.props.onKeyDown( { keyCode: UP } );
-
-		expect( testRenderer.toJSON() ).toMatchDiffSnapshot( base.toJSON() );
-	} );
 
-	test( 'should commit changes to all views on keyDown = DOWN', () => {
-		const testRenderer = TestRenderer.create(
-			<ColorPicker
-				color={ color }
-				onChangeComplete={ () => {} }
-				disableAlpha
-			/>
+		const saturation = getSaturation( container );
+		moveReactColorfulSlider(
+			saturation,
+			{ pageX: 0, pageY: 0 },
+			{ pageX: 10, pageY: 10 }
 		);
-		testRenderer.root
-			.findByType( 'input' )
-			.props.onChange( { target: { value: '#ABC' } } );
-		testRenderer.root
-			.findByType( 'input' )
-			.props.onKeyDown( { keyCode: DOWN } );
-
-		expect( testRenderer.toJSON() ).toMatchDiffSnapshot( base.toJSON() );
-	} );
 
-	test( 'should commit changes to all views on keyDown = ENTER', () => {
-		const testRenderer = TestRenderer.create(
-			<ColorPicker
-				color={ color }
-				onChangeComplete={ () => {} }
-				disableAlpha
-			/>
+		expect( onChange ).toHaveBeenCalledWith(
+			expect.stringMatching( /^#([a-fA-F0-9]{6})$/ )
 		);
-		testRenderer.root
-			.findByType( 'input' )
-			.props.onChange( { target: { value: '#ABC' } } );
-		testRenderer.root
-			.findByType( 'input' )
-			.props.onKeyDown( { keyCode: ENTER } );
-
-		expect( testRenderer.toJSON() ).toMatchDiffSnapshot( base.toJSON() );
 	} );
 } );

package/src/{ui/color-picker → color-picker}/use-deprecated-props.ts

@@ -1,7 +1,15 @@
 /**
  * External dependencies
  */
-import colorize, { ColorFormats } from 'tinycolor2';
+import {
+	colord,
+	HslColor,
+	HslaColor,
+	HsvColor,
+	HsvaColor,
+	RgbColor,
+	RgbaColor,
+} from 'colord';
 // eslint-disable-next-line no-restricted-imports
 import type { ComponentProps } from 'react';
 import memoize from 'memize';
@@ -24,11 +32,10 @@ type ColorPickerProps = ComponentProps< typeof ColorPicker >;
 type LegacyColor =
 	| string
 	| {
-			color: colorize.Instance;
 			hex: string;
-			hsl: ColorFormats.HSL | ColorFormats.HSLA;
-			hsv: ColorFormats.HSV | ColorFormats.HSVA;
-			rgb: ColorFormats.RGB | ColorFormats.RGBA;
+			hsl: HslColor | HslaColor;
+			hsv: HsvColor | HsvaColor;
+			rgb: RgbColor | RgbaColor;
 			/**
 			 * @deprecated
 			 */
@@ -43,7 +50,7 @@ type LegacyColor =
  * @deprecated
  */
 export interface LegacyProps {
-	color: LegacyColor;
+	color?: LegacyColor;
 	/**
 	 * @deprecated
 	 */
@@ -62,48 +69,32 @@ export interface LegacyProps {
 function isLegacyProps( props: any ): props is LegacyProps {
 	return (
 		typeof props.onChangeComplete !== 'undefined' ||
-		typeof props.color === 'string' ||
+		typeof props.disableAlpha !== 'undefined' ||
 		typeof props.color?.hex === 'string'
 	);
 }
 
-function getColorFromLegacyProps(
-	props: LegacyProps
-): ColorFormats.HSL | ColorFormats.HSLA {
+function getColorFromLegacyProps( props: LegacyProps ): string | undefined {
+	if ( typeof props?.color === 'undefined' ) {
+		return undefined;
+	}
 	if ( typeof props.color === 'string' ) {
-		return colorize( props.color ).toHsl();
+		return props.color;
+	}
+	if ( props.color.hex ) {
+		return props.color.hex;
 	}
-
-	return props.color.hsl;
-}
-
-function toHsv(
-	color: colorize.Instance
-): ColorFormats.HSV | ColorFormats.HSVA {
-	const { h, s, v, a } = color.toHsv();
-
-	return {
-		h: Math.round( h ),
-		s: Math.round( s * 100 ),
-		v: Math.round( v * 100 ),
-		a,
-	};
 }
 
-const transformHslToLegacyColor = memoize(
-	( hsla: ColorFormats.HSL | ColorFormats.HSLA ): LegacyColor => {
-		const color = colorize( hsla );
-		const rawHex = color.toHex();
-		const rgb = color.toRgb();
-		const hsv = toHsv( color );
-		const hsl = hsla;
-
-		const isTransparent = rawHex === '000000' && rgb.a === 0;
-
-		const hex = isTransparent ? 'transparent' : `#${ rawHex }`;
+const transformColorStringToLegacyColor = memoize(
+	( color: string ): LegacyColor => {
+		const colordColor = colord( color );
+		const hex = colordColor.toHex();
+		const rgb = colordColor.toRgb();
+		const hsv = colordColor.toHsv();
+		const hsl = colordColor.toHsl();
 
 		return {
-			color,
 			hex,
 			rgb,
 			hsv,
@@ -118,14 +109,14 @@ export function useDeprecatedProps(
 	props: LegacyProps | ColorPickerProps
 ): ColorPickerProps {
 	const onChange = useCallback(
-		( hsla: ColorFormats.HSL | ColorFormats.HSLA ) => {
+		( color: string ) => {
 			if ( isLegacyProps( props ) ) {
 				return props.onChangeComplete(
-					transformHslToLegacyColor( hsla )
+					transformColorStringToLegacyColor( color )
 				);
 			}
 
-			return props.onChange?.( hsla );
+			return props.onChange?.( color );
 		},
 		[
 			( props as LegacyProps ).onChangeComplete,

package/src/custom-gradient-bar/constants.js

@@ -3,8 +3,8 @@ export const COLOR_POPOVER_PROPS = {
 	position: 'top',
 };
 
-export const GRADIENT_MARKERS_WIDTH = 18;
-export const INSERT_POINT_WIDTH = 23;
+export const GRADIENT_MARKERS_WIDTH = 16;
+export const INSERT_POINT_WIDTH = 16;
 export const MINIMUM_ABSOLUTE_LEFT_POSITION = 5;
 export const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10;
 export const MINIMUM_DISTANCE_BETWEEN_POINTS = 0;