@wordpress/components 19.17.0 → 20.0.0

package/src/dropdown-menu/stories/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { text } from '@storybook/addon-knobs';
+import { text, boolean } from '@storybook/addon-knobs';
 
 /**
  * Internal dependencies
@@ -25,6 +25,10 @@ export const _default = () => {
 	const label = text( 'Label', 'Select a direction.' );
 	const firstMenuItemLabel = text( 'First Menu Item Label', 'Up' );
 	const secondMenuItemLabel = text( 'First Menu Item Label', 'Down' );
+	const toggleButtonTootip = boolean(
+		'Show tooltip on a toggle button',
+		true
+	);
 
 	const controls = [
 		{
@@ -37,5 +41,12 @@ export const _default = () => {
 		},
 	];
 
-	return <DropdownMenu icon={ menu } label={ label } controls={ controls } />;
+	return (
+		<DropdownMenu
+			icon={ menu }
+			label={ label }
+			controls={ controls }
+			toggleProps={ { showTooltip: toggleButtonTootip } }
+		/>
+	);
 };

package/src/duotone-picker/custom-duotone-bar.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import CustomGradientBar from '../custom-gradient-bar';
+import CustomGradientBar from '../custom-gradient-picker/gradient-bar';
 
 import {
 	getColorStopsFromColors,

package/src/duotone-picker/duotone-picker.js

@@ -14,9 +14,11 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import ColorListPicker from '../color-list-picker';
 import CircularOptionPicker from '../circular-option-picker';
+import { VStack } from '../v-stack';
 
 import CustomDuotoneBar from './custom-duotone-bar';
 import { getDefaultColors, getGradientFromCSSColors } from './utils';
+import { Spacer } from '../spacer';
 
 function DuotonePicker( {
 	clearable = true,
@@ -97,32 +99,38 @@ function DuotonePicker( {
 				)
 			}
 		>
-			{ ! disableCustomColors && ! disableCustomDuotone && (
-				<CustomDuotoneBar
-					value={ isUnset ? undefined : value }
-					onChange={ onChange }
-				/>
-			) }
-			{ ! disableCustomDuotone && (
-				<ColorListPicker
-					labels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }
-					colors={ colorPalette }
-					value={ isUnset ? undefined : value }
-					disableCustomColors={ disableCustomColors }
-					enableAlpha
-					onChange={ ( newColors ) => {
-						if ( ! newColors[ 0 ] ) {
-							newColors[ 0 ] = defaultDark;
-						}
-						if ( ! newColors[ 1 ] ) {
-							newColors[ 1 ] = defaultLight;
-						}
-						const newValue =
-							newColors.length >= 2 ? newColors : undefined;
-						onChange( newValue );
-					} }
-				/>
-			) }
+			<Spacer paddingTop={ 4 }>
+				<VStack spacing={ 3 }>
+					{ ! disableCustomColors && ! disableCustomDuotone && (
+						<CustomDuotoneBar
+							value={ isUnset ? undefined : value }
+							onChange={ onChange }
+						/>
+					) }
+					{ ! disableCustomDuotone && (
+						<ColorListPicker
+							labels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }
+							colors={ colorPalette }
+							value={ isUnset ? undefined : value }
+							disableCustomColors={ disableCustomColors }
+							enableAlpha
+							onChange={ ( newColors ) => {
+								if ( ! newColors[ 0 ] ) {
+									newColors[ 0 ] = defaultDark;
+								}
+								if ( ! newColors[ 1 ] ) {
+									newColors[ 1 ] = defaultLight;
+								}
+								const newValue =
+									newColors.length >= 2
+										? newColors
+										: undefined;
+								onChange( newValue );
+							} }
+						/>
+					) }
+				</VStack>
+			</Spacer>
 		</CircularOptionPicker>
 	);
 }

package/src/duotone-picker/duotone-swatch.js

@@ -1,15 +1,22 @@
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
-import Swatch from '../swatch';
+import { swatch } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import ColorIndicator from '../color-indicator';
+import Icon from '../icon';
 import { getGradientFromCSSColors } from './utils';
 
 function DuotoneSwatch( { values } ) {
-	return (
-		<Swatch
-			fill={ values && getGradientFromCSSColors( values, '135deg' ) }
+	return values ? (
+		<ColorIndicator
+			colorValue={ getGradientFromCSSColors( values, '135deg' ) }
 		/>
+	) : (
+		<Icon icon={ swatch } />
 	);
 }
 

package/src/duotone-picker/stories/duotone-picker.js

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { DuotonePicker } from '../';
+
+export default {
+	title: 'Components/DuotonePicker',
+	component: DuotonePicker,
+	argTypes: {
+		clearable: { control: { type: 'boolean' } },
+		disableCustomColors: { control: { type: 'boolean' } },
+		disableCustomDuotone: { control: { type: 'boolean' } },
+		onChange: { action: 'onChange' },
+		unsetable: { control: { type: 'boolean' } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+
+const DUOTONE_PALETTE = [
+	{
+		colors: [ '#8c00b7', '#fcff41' ],
+		name: 'Purple and yellow',
+		slug: 'purple-yellow',
+	},
+	{
+		colors: [ '#000097', '#ff4747' ],
+		name: 'Blue and red',
+		slug: 'blue-red',
+	},
+];
+
+const COLOR_PALETTE = [
+	{ color: '#ff4747', name: 'Red', slug: 'red' },
+	{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },
+	{ color: '#000097', name: 'Blue', slug: 'blue' },
+	{ color: '#8c00b7', name: 'Purple', slug: 'purple' },
+];
+
+const Template = ( { onChange, ...args } ) => {
+	const [ value, setValue ] = useState();
+
+	return (
+		<DuotonePicker
+			{ ...args }
+			onChange={ ( ...changeArgs ) => {
+				setValue( ...changeArgs );
+				onChange( ...changeArgs );
+			} }
+			value={ value }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	colorPalette: COLOR_PALETTE,
+	duotonePalette: DUOTONE_PALETTE,
+};

package/src/duotone-picker/stories/duotone-swatch.js

@@ -0,0 +1,32 @@
+/**
+ * Internal dependencies
+ */
+import { DuotoneSwatch } from '../';
+
+export default {
+	title: 'Components/DuotoneSwatch',
+	component: DuotoneSwatch,
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+
+const Template = ( args ) => {
+	return <DuotoneSwatch { ...args } />;
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	values: [ '#000', '#fff' ],
+};
+
+export const SingleColor = Template.bind( {} );
+SingleColor.args = {
+	values: [ 'pink' ],
+};
+
+export const Null = Template.bind( {} );
+Null.args = {
+	values: null,
+};

package/src/focal-point-picker/index.js

@@ -9,7 +9,6 @@ import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { Component, createRef } from '@wordpress/element';
 import { withInstanceId } from '@wordpress/compose';
-import { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -171,15 +170,21 @@ export class FocalPointPicker extends Component {
 		this.props.onDragEnd?.( event );
 	}
 	onKeyDown( event ) {
-		const { keyCode, shiftKey } = event;
-		if ( ! [ UP, DOWN, LEFT, RIGHT ].includes( keyCode ) ) return;
+		const { code, shiftKey } = event;
+		if (
+			! [ 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight' ].includes(
+				code
+			)
+		)
+			return;
 
 		event.preventDefault();
 
 		const next = { ...this.state.percentages };
 		const step = shiftKey ? 0.1 : 0.01;
-		const delta = keyCode === UP || keyCode === LEFT ? -1 * step : step;
-		const axis = keyCode === UP || keyCode === DOWN ? 'y' : 'x';
+		const delta =
+			code === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;
+		const axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';
 		const value = parseFloat( next[ axis ] ) + delta;
 
 		next[ axis ] = roundClamp( value, 0, 1, step );

package/src/focal-point-picker/styles/focal-point-style.js

@@ -42,6 +42,5 @@ export const PointerIconPathOutline = styled( Path )`
 `;
 
 export const PointerIconPathFill = styled( Path )`
-	fill: ${ COLORS.blue.wordpress[ 700 ] };
 	fill: ${ COLORS.ui.theme };
 `;

package/src/focal-point-picker/test/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { act, fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -10,31 +11,49 @@ import Picker from '../index.js';
 
 describe( 'FocalPointPicker', () => {
 	describe( 'focus and blur', () => {
-		let firedDragEnd;
-		let firedDrag;
-		const { getByRole, unmount } = render(
-			<Picker
-				onChange={ () => {} }
-				onDragEnd={ () => ( firedDragEnd = true ) }
-				onDrag={ () => ( firedDrag = true ) }
-			/>
-		);
-		const dragArea = getByRole( 'button' );
-		fireEvent.mouseDown( dragArea );
-		const gainedFocus = dragArea.ownerDocument.activeElement === dragArea;
-
-		fireEvent.blur( dragArea );
-		fireEvent.mouseMove( dragArea );
-
-		// cleans up as it's not automated for renders outside of test blocks
-		unmount();
-
-		it( 'should focus the draggable area', () => {
-			expect( gainedFocus ).toBe( true );
+		it( 'clicking the draggable area should focus it', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			const mockOnChange = jest.fn();
+
+			render( <Picker onChange={ mockOnChange } /> );
+
+			const draggableArea = screen.getByRole( 'button' );
+
+			await user.click( draggableArea );
+
+			expect( draggableArea ).toHaveFocus();
 		} );
 
 		it( 'should stop a drag operation when focus is lost', () => {
-			expect( firedDragEnd && ! firedDrag ).toBe( true );
+			const mockOnDrag = jest.fn();
+			const mockOnDragEnd = jest.fn();
+			const mockOnChange = jest.fn();
+
+			render(
+				<Picker
+					onChange={ mockOnChange }
+					onDrag={ mockOnDrag }
+					onDragEnd={ mockOnDragEnd }
+				/>
+			);
+
+			const draggableArea = screen.getByRole( 'button' );
+
+			// `user-event` is not capable of testing drag interactions properly.
+			// we could consider using playwright instead.
+			fireEvent.mouseDown( draggableArea );
+
+			expect( mockOnDrag ).not.toHaveBeenCalled();
+			expect( mockOnDragEnd ).not.toHaveBeenCalled();
+
+			fireEvent.blur( draggableArea );
+			fireEvent.mouseMove( draggableArea );
+
+			expect( mockOnDrag ).not.toHaveBeenCalled();
+			expect( mockOnDragEnd ).toHaveBeenCalledTimes( 1 );
 		} );
 	} );
 
@@ -47,13 +66,17 @@ describe( 'FocalPointPicker', () => {
 			events.forEach( ( name ) => {
 				handlers[ name ] = ( ...all ) => eventLogger( name, all );
 			} );
-			const { getByRole } = render( <Picker { ...handlers } /> );
-			const dragArea = getByRole( 'button' );
-			act( () => {
-				fireEvent.mouseDown( dragArea );
-				fireEvent.mouseMove( dragArea );
-				fireEvent.mouseUp( dragArea );
-			} );
+
+			render( <Picker { ...handlers } /> );
+
+			const dragArea = screen.getByRole( 'button' );
+
+			// `user-event` is not capable of testing drag interactions properly.
+			// we could consider using playwright instead.
+			fireEvent.mouseDown( dragArea );
+			fireEvent.mouseMove( dragArea );
+			fireEvent.mouseUp( dragArea );
+
 			expect(
 				events.reduce( ( last, eventName, index ) => {
 					return last && logs[ index ].name === eventName;
@@ -64,9 +87,14 @@ describe( 'FocalPointPicker', () => {
 
 	describe( 'resolvePoint handling', () => {
 		it( 'should allow value altering', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			const spyChange = jest.fn();
 			const spy = jest.fn();
-			const { getByRole } = render(
+
+			render(
 				<Picker
 					value={ { x: 0.25, y: 0.25 } }
 					onChange={ spyChange }
@@ -76,12 +104,13 @@ describe( 'FocalPointPicker', () => {
 					} }
 				/>
 			);
+
 			// Click and press arrow up
-			const dragArea = getByRole( 'button' );
-			act( () => {
-				fireEvent.mouseDown( dragArea );
-				fireEvent.keyDown( dragArea, { charCode: 0, keyCode: 38 } );
-			} );
+			const dragArea = screen.getByRole( 'button' );
+
+			await user.click( dragArea );
+			await user.keyboard( '[ArrowUp]' );
+
 			expect( spy ).toHaveBeenCalled();
 			expect( spyChange ).toHaveBeenCalledWith( {
 				x: '0.91',
@@ -92,27 +121,31 @@ describe( 'FocalPointPicker', () => {
 
 	describe( 'controllability', () => {
 		it( 'should update value from props', () => {
-			const { rerender, getByRole } = render(
+			const { rerender } = render(
 				<Picker value={ { x: 0.25, y: 0.5 } } />
 			);
-			const xInput = getByRole( 'spinbutton', { name: 'Left' } );
+			const xInput = screen.getByRole( 'spinbutton', { name: 'Left' } );
 			rerender( <Picker value={ { x: 0.93, y: 0.5 } } /> );
 			expect( xInput.value ).toBe( '93' );
 		} );
 		it( 'call onChange with the expected values', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			const spyChange = jest.fn();
-			const { getByRole } = render(
+			render(
 				<Picker value={ { x: 0.14, y: 0.62 } } onChange={ spyChange } />
 			);
 			// Click and press arrow up
-			const dragArea = getByRole( 'button' );
-			act( () => {
-				fireEvent.mouseDown( dragArea );
-				fireEvent.keyDown( dragArea, { charCode: 0, keyCode: 38 } );
-			} );
+			const dragArea = screen.getByRole( 'button' );
+
+			await user.click( dragArea );
+			await user.keyboard( '[ArrowDown]' );
+
 			expect( spyChange ).toHaveBeenCalledWith( {
 				x: '0.14',
-				y: '0.61',
+				y: '0.63',
 			} );
 		} );
 	} );