@wordpress/components 19.17.0 → 20.0.2-next.957ca95e4c.0

package/src/dropdown/index.js

@@ -40,6 +40,7 @@ export default function Dropdown( props ) {
 		popoverProps,
 		onClose,
 		onToggle,
+		style,
 	} = props;
 	const containerRef = useRef();
 	const [ isOpen, setIsOpen ] = useObservableState( false, onToggle );
@@ -95,6 +96,7 @@ export default function Dropdown( props ) {
 			// clicked. Making this div focusable ensures such UAs will focus
 			// it and `closeIfFocusOutside` can tell if the toggle was clicked.
 			tabIndex="-1"
+			style={ style }
 		>
 			{ renderToggle( args ) }
 			{ isOpen && (
@@ -108,11 +110,7 @@ export default function Dropdown( props ) {
 					// This value is used to ensure that the dropdowns
 					// align with the editor header by default.
 					offset={ 13 }
-					anchorRef={
-						! hasAnchorRef
-							? containerRef?.current?.firstChild // Anchor to the rendered toggle.
-							: undefined
-					}
+					anchorRef={ ! hasAnchorRef ? containerRef : undefined }
 					{ ...popoverProps }
 					className={ classnames(
 						'components-dropdown__content',

package/src/dropdown-menu/index.js

@@ -7,7 +7,6 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { DOWN } from '@wordpress/keycodes';
 import { menu } from '@wordpress/icons';
 
 /**
@@ -87,7 +86,7 @@ function DropdownMenu( dropdownMenuProps ) {
 						return;
 					}
 
-					if ( ! isOpen && event.keyCode === DOWN ) {
+					if ( ! isOpen && event.code === 'ArrowDown' ) {
 						event.preventDefault();
 						onToggle();
 					}

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

@@ -6,7 +6,6 @@ import { Platform } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { DOWN } from '@wordpress/keycodes';
 import { BottomSheet, PanelBody } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { menu } from '@wordpress/icons';
@@ -76,12 +75,6 @@ function DropdownMenu( {
 			className={ classnames( 'components-dropdown-menu', className ) }
 			popoverProps={ mergedPopoverProps }
 			renderToggle={ ( { isOpen, onToggle } ) => {
-				const openOnArrowDown = ( event ) => {
-					if ( ! isOpen && event.keyCode === DOWN ) {
-						event.preventDefault();
-						onToggle();
-					}
-				};
 				const mergedToggleProps = mergeProps(
 					{
 						className: classnames(
@@ -104,12 +97,6 @@ function DropdownMenu( {
 								mergedToggleProps.onClick( event );
 							}
 						} }
-						onKeyDown={ ( event ) => {
-							openOnArrowDown( event );
-							if ( mergedToggleProps.onKeyDown ) {
-								mergedToggleProps.onKeyDown( event );
-							}
-						} }
 						aria-haspopup="true"
 						aria-expanded={ isOpen }
 						label={ label }

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/dropdown-menu/test/index.js

@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import { fireEvent, render } from '@testing-library/react';
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
  */
-import { DOWN } from '@wordpress/keycodes';
 import { arrowLeft, arrowRight, arrowUp, arrowDown } from '@wordpress/icons';
 
 /**
@@ -15,19 +15,27 @@ import { arrowLeft, arrowRight, arrowUp, arrowDown } from '@wordpress/icons';
 import DropdownMenu from '../';
 import { MenuItem } from '../../';
 
-function getMenuToggleButton( container ) {
-	return container.querySelector( '.components-dropdown-menu__toggle' );
-}
-function getNavigableMenu( container ) {
-	return container.querySelector( '.components-dropdown-menu__menu' );
-}
-
 describe( 'DropdownMenu', () => {
-	const children = ( { onClose } ) => <MenuItem onClick={ onClose } />;
+	it( 'should not render when neither controls nor children are assigned', () => {
+		render( <DropdownMenu /> );
+
+		// The button toggle should not even be rendered
+		expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'should not render when controls are empty and children is not specified', () => {
+		render( <DropdownMenu controls={ [] } /> );
+
+		// The button toggle should not even be rendered
+		expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'should open menu when pressing arrow down on the toggle and the controls prop is used to define menu items', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
-	let controls;
-	beforeEach( () => {
-		controls = [
+		const controls = [
 			{
 				title: 'Up',
 				icon: arrowUp,
@@ -49,62 +57,50 @@ describe( 'DropdownMenu', () => {
 				onClick: jest.fn(),
 			},
 		];
-	} );
 
-	describe( 'basic rendering', () => {
-		it( 'should render a null element when neither controls nor children are assigned', () => {
-			const { container } = render( <DropdownMenu /> );
+		render( <DropdownMenu controls={ controls } /> );
 
-			expect( container.firstChild ).toBeNull();
-		} );
+		// Move focus on the toggle button
+		await user.tab();
 
-		it( 'should render a null element when controls are empty and children is not specified', () => {
-			const { container } = render( <DropdownMenu controls={ [] } /> );
+		await user.keyboard( '[ArrowDown]' );
 
-			expect( container.firstChild ).toBeNull();
+		let menu;
+		await waitFor( () => {
+			menu = screen.getByRole( 'menu' );
+			return expect( menu ).toBeVisible();
 		} );
 
-		it( 'should open menu on arrow down (controls)', () => {
-			const {
-				container: { firstChild: dropdownMenuContainer },
-			} = render( <DropdownMenu controls={ controls } /> );
-
-			const button = getMenuToggleButton( dropdownMenuContainer );
-			button.focus();
-			fireEvent.keyDown( button, {
-				keyCode: DOWN,
-				preventDefault: () => {},
-			} );
-			const menu = getNavigableMenu( dropdownMenuContainer );
-			expect( menu ).toBeTruthy();
-
-			expect(
-				dropdownMenuContainer.querySelectorAll(
-					'.components-dropdown-menu__menu-item'
-				)
-			).toHaveLength( controls.length );
-		} );
+		expect( within( menu ).getAllByRole( 'menuitem' ) ).toHaveLength(
+			controls.length
+		);
+	} );
 
-		it( 'should open menu on arrow down (children)', () => {
-			const {
-				container: { firstChild: dropdownMenuContainer },
-			} = render( <DropdownMenu children={ children } /> );
+	it( 'should open menu when pressing arrow down on the toggle and the children prop is used to define menu items', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
-			const button = getMenuToggleButton( dropdownMenuContainer );
-			button.focus();
-			fireEvent.keyDown( button, {
-				keyCode: DOWN,
-				preventDefault: () => {},
-			} );
+		render(
+			<DropdownMenu
+				children={ ( { onClose } ) => <MenuItem onClick={ onClose } /> }
+			/>
+		);
 
-			expect( getNavigableMenu( dropdownMenuContainer ) ).toBeTruthy();
+		const button = screen.getByRole( 'button' );
+		button.focus();
 
-			const menuItem = dropdownMenuContainer.querySelector(
-				'.components-menu-item__button'
-			);
-			fireEvent.click( menuItem );
+		await user.keyboard( '[ArrowDown]' );
 
-			expect( getNavigableMenu( dropdownMenuContainer ) ).toBeNull();
+		let menu;
+		await waitFor( () => {
+			menu = screen.getByRole( 'menu' );
+			return expect( menu ).toBeVisible();
 		} );
+
+		// Clicking the menu item will close the dropdown menu
+		await user.click( within( menu ).getByRole( 'menuitem' ) );
+
+		expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
 	} );
 } );

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/README.md

@@ -18,10 +18,6 @@ const Example = () => {
 	} );
 
 	const url = '/path/to/image';
-	const dimensions = {
-		width: 400,
-		height: 100,
-	};
 
 	/* Example function to render the CSS styles based on Focal Point Picker value */
 	const style = {
@@ -33,9 +29,10 @@ const Example = () => {
 		<>
 			<FocalPointPicker
 				url={ url }
-				dimensions={ dimensions }
 				value={ focalPoint }
-				onChange={ ( focalPoint ) => setFocalPoint( { focalPoint } ) }
+				onDragStart={ setFocalPoint }
+				onDrag={ setFocalPoint }
+				onChange={ setFocalPoint }
 			/>
 			<div style={ style } />
 		</>

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

@@ -18,19 +18,19 @@ const noop = () => {};
 
 export default function FocalPointPickerControls( {
 	onChange = noop,
-	percentages = {
+	point = {
 		x: 0.5,
 		y: 0.5,
 	},
 } ) {
-	const valueX = fractionToPercentage( percentages.x );
-	const valueY = fractionToPercentage( percentages.y );
+	const valueX = fractionToPercentage( point.x );
+	const valueY = fractionToPercentage( point.y );
 
 	const handleChange = ( value, axis ) => {
 		const num = parseInt( value, 10 );
 
 		if ( ! isNaN( num ) ) {
-			onChange( { ...percentages, [ axis ]: num / 100 } );
+			onChange( { ...point, [ axis ]: num / 100 } );
 		}
 	};
 

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

@@ -13,18 +13,12 @@ import {
  */
 import classnames from 'classnames';
 
-export default function FocalPoint( {
-	coordinates = { left: '50%', top: '50%' },
-	...props
-} ) {
+export default function FocalPoint( { left = '50%', top = '50%', ...props } ) {
 	const classes = classnames(
 		'components-focal-point-picker__icon_container'
 	);
 
-	const style = {
-		left: coordinates.left,
-		top: coordinates.top,
-	};
+	const style = { left, top };
 
 	return (
 		<FocalPointWrapper { ...props } className={ classes } style={ style }>

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

@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
@@ -11,25 +6,16 @@ import {
 	GridLineX,
 	GridLineY,
 } from './styles/focal-point-picker-style';
-import { useUpdateEffect } from '../utils/hooks';
-
-export default function FocalPointPickerGrid( {
-	bounds = {},
-	value,
-	...props
-} ) {
-	const animationProps = useRevealAnimation( value );
-	const style = {
-		width: bounds.width,
-		height: bounds.height,
-	};
 
+export default function FocalPointPickerGrid( { bounds, ...props } ) {
 	return (
 		<GridView
 			{ ...props }
-			{ ...animationProps }
 			className="components-focal-point-picker__grid"
-			style={ style }
+			style={ {
+				width: bounds.width,
+				height: bounds.height,
+			} }
 		>
 			<GridLineX style={ { top: '33%' } } />
 			<GridLineX style={ { top: '66%' } } />
@@ -38,25 +24,3 @@ export default function FocalPointPickerGrid( {
 		</GridView>
 	);
 }
-
-/**
- * Custom hook that renders the "flash" animation whenever the value changes.
- *
- * @param {string} value Value of (box) side.
- */
-function useRevealAnimation( value ) {
-	const [ isActive, setIsActive ] = useState( false );
-
-	useUpdateEffect( () => {
-		setIsActive( true );
-		const timeout = window.setTimeout( () => {
-			setIsActive( false );
-		}, 600 );
-
-		return () => window.clearTimeout( timeout );
-	}, [ value ] );
-
-	return {
-		isActive,
-	};
-}