@wordpress/components 18.0.0 → 19.0.3

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/{ui/color-picker → color-picker}/styles.ts

@@ -6,19 +6,19 @@ 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 '../utils/space';
-import Button from '../../button';
+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';
+} from '../input-control/styles/input-control-styles';
+import InputControl from '../input-control';
+import CONFIG from '../utils/config-values';
 
 export const NumberControlWrapper = styled( NumberControl )`
 	${ InputControlContainer } {
@@ -112,7 +112,7 @@ export const ColorfulWrapper = styled.div`
 `;
 
 export const DetailsControlButton = styled( Button )`
-	&&&& {
+	&&&&& {
 		min-width: ${ space( 6 ) };
 		padding: 0;
 	}

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/control-points.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { colord } from 'colord';
 
 /**
  * WordPress dependencies
@@ -16,7 +17,7 @@ import { LEFT, RIGHT } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import Button from '../button';
-import ColorPicker from '../color-picker';
+import { ColorPicker } from '../color-picker';
 import Dropdown from '../dropdown';
 import { VisuallyHidden } from '../visually-hidden';
 
@@ -212,14 +213,14 @@ function ControlPoints( {
 					renderContent={ ( { onClose } ) => (
 						<>
 							<ColorPicker
-								disableAlpha={ disableAlpha }
+								enableAlpha={ ! disableAlpha }
 								color={ point.color }
-								onChangeComplete={ ( { color } ) => {
+								onChange={ ( color ) => {
 									onChange(
 										updateControlPointColor(
 											controlPoints,
 											index,
-											color.toRgbString()
+											colord( color ).toRgbString()
 										)
 									);
 								} }
@@ -290,14 +291,14 @@ function InsertPoint( {
 			) }
 			renderContent={ () => (
 				<ColorPicker
-					disableAlpha={ disableAlpha }
-					onChangeComplete={ ( { color } ) => {
+					enableAlpha={ ! disableAlpha }
+					onChange={ ( color ) => {
 						if ( ! alreadyInsertedPoint ) {
 							onChange(
 								addControlPoint(
 									controlPoints,
 									insertPosition,
-									color.toRgbString()
+									colord( color ).toRgbString()
 								)
 							);
 							setAlreadyInsertedPoint( true );
@@ -306,7 +307,7 @@ function InsertPoint( {
 								updateControlPointColorByPosition(
 									controlPoints,
 									insertPosition,
-									color.toRgbString()
+									colord( color ).toRgbString()
 								)
 							);
 						}

package/src/custom-select-control/index.js

@@ -14,7 +14,7 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import { Button, VisuallyHidden } from '../';
 
-const itemToString = ( item ) => item && item.name;
+const itemToString = ( item ) => item?.name;
 // This is needed so that in Windows, where
 // the menu does not necessarily open on
 // key up/down, you can still switch between
@@ -98,14 +98,9 @@ export default function CustomSelectControl( {
 		className: 'components-custom-select-control__menu',
 		'aria-hidden': ! isOpen,
 	} );
-	// We need this here, because the null active descendant is not
-	// fully ARIA compliant.
+	// We need this here, because the null active descendant is not fully ARIA compliant.
 	if (
-		menuProps[ 'aria-activedescendant' ] &&
-		menuProps[ 'aria-activedescendant' ].slice(
-			0,
-			'downshift-null'.length
-		) === 'downshift-null'
+		menuProps[ 'aria-activedescendant' ]?.startsWith( 'downshift-null' )
 	) {
 		delete menuProps[ 'aria-activedescendant' ];
 	}
@@ -161,12 +156,18 @@ export default function CustomSelectControl( {
 									{
 										'is-highlighted':
 											index === highlightedIndex,
+										'has-hint': !! item.__experimentalHint,
 									}
 								),
 								style: item.style,
 							} ) }
 						>
 							{ item.name }
+							{ item.__experimentalHint && (
+								<span className="components-custom-select-control__item-hint">
+									{ item.__experimentalHint }
+								</span>
+							) }
 							{ item === selectedItem && (
 								<Icon
 									icon={ check }

package/src/custom-select-control/style.scss

@@ -58,19 +58,25 @@
 
 .components-custom-select-control__item {
 	align-items: center;
-	display: flex;
+	display: grid;
+	grid-template-columns: auto auto;
 	list-style-type: none;
 	padding: $grid-unit-10;
 	cursor: default;
 	line-height: $icon-size + $grid-unit-05;
 
-
+	&.has-hint {
+		grid-template-columns: auto auto 30px;
+	}
 	&.is-highlighted {
 		background: $gray-300;
 	}
-
+	.components-custom-select-control__item-hint {
+		color: $gray-700;
+		text-align: right;
+		padding-right: $grid-unit-05;
+	}
 	.components-custom-select-control__item-icon {
-		margin-right: 0;
 		margin-left: auto;
 	}
 

package/src/date-time/README.md

@@ -64,12 +64,3 @@ A callback function which receives a Date object representing a day as an argume
 
 -   Type: `Function`
 -   Required: No
-
-### isDayHighlighted
-
-A callback function which receives a moment object representing a day as an argument, and should return a Boolean to signify if the day is visually highlighted in the calendar.
-
-This function will be called on each day, every time user browses into a different month. If you want to force an update to highlights, pass a new reference to your function. Otherwise, make sure the reference does not change between renders to fully leverage the caching.
-
--   Type: `Function`
--   Required: No

package/src/date-time/index.js

@@ -129,13 +129,14 @@ function DateTimePicker(
 							</li>
 							<li>
 								<abbr aria-label={ __( 'Home and End' ) }>
+									{ /* Translators: Home/End reffer to the 'Home' and 'End' buttons on the keyboard.*/ }
 									{ __( 'Home/End' ) }
 								</abbr>
 								{
 									' ' /* JSX removes whitespace, but a space is required for screen readers. */
 								}
 								{ __(
-									'Go to the first (home) or last (end) day of a week.'
+									'Go to the first (Home) or last (End) day of a week.'
 								) }
 							</li>
 						</ul>

package/src/date-time/stories/index.js

@@ -16,6 +16,9 @@ import DateTimePicker from '../';
 export default {
 	title: 'Components/DateTimePicker',
 	component: DateTimePicker,
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 const DateTimePickerWithState = ( { is12Hour } ) => {

package/src/date-time/stories/time.js

@@ -9,7 +9,13 @@ import TimePicker from '../time';
 import { date, boolean } from '@storybook/addon-knobs';
 import { noop } from 'lodash';
 
-export default { title: 'Components/TimePicker', component: TimePicker };
+export default {
+	title: 'Components/TimePicker',
+	component: TimePicker,
+	parameters: {
+		knobs: { disabled: false },
+	},
+};
 
 export const _default = () => {
 	return (