@wordpress/components 19.17.0 → 20.0.0

package/src/form-token-field/types.ts

@@ -158,6 +158,13 @@ export interface FormTokenFieldProps
 	 * @default false
 	 */
 	__next36pxDefaultSize?: boolean;
+	/**
+	 * If true, the select the first matching suggestion when the user presses
+	 * the Enter key (or space when tokenizeOnSpace is true).
+	 *
+	 * @default false
+	 */
+	__experimentalAutoSelectFirstMatch?: boolean;
 	/**
 	 * Custom renderer for suggestions.
 	 */

package/src/gradient-picker/index.js

@@ -16,6 +16,7 @@ import CircularOptionPicker from '../circular-option-picker';
 import CustomGradientPicker from '../custom-gradient-picker';
 import { VStack } from '../v-stack';
 import { ColorHeading } from '../color-palette/styles';
+import { Spacer } from '../spacer';
 
 function SingleOrigin( {
 	className,
@@ -99,6 +100,8 @@ function MultipleOrigin( {
 }
 
 export default function GradientPicker( {
+	/** Start opting into the new margin-free styles that will become the default in a future version. */
+	__nextHasNoMargin = false,
 	className,
 	gradients,
 	onChange,
@@ -117,6 +120,11 @@ export default function GradientPicker( {
 			? MultipleOrigin
 			: SingleOrigin;
 
+	// Can be removed when deprecation period is over
+	const deprecatedMarginSpacerProps = ! __nextHasNoMargin
+		? { marginTop: 3 }
+		: {};
+
 	return (
 		<Component
 			className={ className }
@@ -137,13 +145,20 @@ export default function GradientPicker( {
 			}
 			content={
 				! disableCustomGradients && (
-					<CustomGradientPicker
-						__experimentalIsRenderedInSidebar={
-							__experimentalIsRenderedInSidebar
-						}
-						value={ value }
-						onChange={ onChange }
-					/>
+					<Spacer
+						marginTop={ gradients?.length ? 3 : 0 }
+						marginBottom={ 0 }
+						{ ...deprecatedMarginSpacerProps }
+					>
+						<CustomGradientPicker
+							__nextHasNoMargin={ __nextHasNoMargin }
+							__experimentalIsRenderedInSidebar={
+								__experimentalIsRenderedInSidebar
+							}
+							value={ value }
+							onChange={ onChange }
+						/>
+					</Spacer>
 				)
 			}
 		/>

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { text, boolean, object } from '@storybook/addon-knobs';
-
 /**
  * WordPress dependencies
  */
@@ -16,94 +11,74 @@ import GradientPicker from '../';
 export default {
 	title: 'Components/GradientPicker',
 	component: GradientPicker,
-	parameters: {
-		knobs: { disable: false },
+	argTypes: {
+		__nextHasNoMargin: { control: { type: 'boolean' } },
+		clearable: { control: { type: 'boolean' } },
+		disableCustomGradients: { control: { type: 'boolean' } },
+		onChange: { action: 'onChange' },
 	},
 };
 
-const GradientPickerWithState = ( props ) => {
+const GRADIENTS = [
+	{
+		name: 'Vivid cyan blue to vivid purple',
+		gradient:
+			'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+		slug: 'vivid-cyan-blue-to-vivid-purple',
+	},
+	{
+		name: 'Light green cyan to vivid green cyan',
+		gradient:
+			'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
+		slug: 'light-green-cyan-to-vivid-green-cyan',
+	},
+	{
+		name: 'Luminous vivid amber to luminous vivid orange',
+		gradient:
+			'linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)',
+		slug: 'luminous-vivid-amber-to-luminous-vivid-orange',
+	},
+	{
+		name: 'Luminous vivid orange to vivid red',
+		gradient:
+			'linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)',
+		slug: 'luminous-vivid-orange-to-vivid-red',
+	},
+	{
+		name: 'Very light gray to cyan bluish gray',
+		gradient:
+			'linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)',
+		slug: 'very-light-gray-to-cyan-bluish-gray',
+	},
+	{
+		name: 'Cool to warm spectrum',
+		gradient:
+			'linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)',
+		slug: 'cool-to-warm-spectrum',
+	},
+];
+
+const Template = ( { onChange, ...props } ) => {
 	const [ gradient, setGradient ] = useState();
 	return (
 		<GradientPicker
 			{ ...props }
 			value={ gradient }
-			onChange={ setGradient }
+			onChange={ ( ...changeArgs ) => {
+				setGradient( ...changeArgs );
+				onChange?.( ...changeArgs );
+			} }
 		/>
 	);
 };
 
-export const _default = () => {
-	const disableCustomGradients = boolean( 'Disable Custom Gradients', false );
-	const clearable = boolean( 'Clearable', true );
-	const className = text( 'Class Name', '' );
-	const gradients = object( 'Gradients', [
-		{
-			name: 'Vivid cyan blue to vivid purple',
-			gradient:
-				'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
-			slug: 'vivid-cyan-blue-to-vivid-purple',
-		},
-		{
-			name: 'Light green cyan to vivid green cyan',
-			gradient:
-				'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
-			slug: 'light-green-cyan-to-vivid-green-cyan',
-		},
-		{
-			name: 'Luminous vivid amber to luminous vivid orange',
-			gradient:
-				'linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)',
-			slug: 'luminous-vivid-amber-to-luminous-vivid-orange',
-		},
-		{
-			name: 'Luminous vivid orange to vivid red',
-			gradient:
-				'linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)',
-			slug: 'luminous-vivid-orange-to-vivid-red',
-		},
-		{
-			name: 'Very light gray to cyan bluish gray',
-			gradient:
-				'linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)',
-			slug: 'very-light-gray-to-cyan-bluish-gray',
-		},
-		{
-			name: 'Cool to warm spectrum',
-			gradient:
-				'linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)',
-			slug: 'cool-to-warm-spectrum',
-		},
-	] );
-
-	return (
-		<GradientPickerWithState
-			disableCustomGradients={ disableCustomGradients }
-			gradients={ gradients }
-			clearable={ clearable }
-			className={ className }
-		/>
-	);
+export const Default = Template.bind( {} );
+Default.args = {
+	gradients: GRADIENTS,
 };
 
-export const WithNoExistingGradients = () => {
-	const disableCustomGradients = boolean( 'Disable Custom Gradients', false );
-	const __experimentalHasMultipleOrigins = boolean(
-		'Experimental Has Multiple Origins',
-		true
-	);
-	const clearable = boolean( 'Clearable', true );
-	const className = text( 'Class Name', '' );
-	const gradients = object( 'Gradients', [] );
-
-	return (
-		<GradientPickerWithState
-			__experimentalHasMultipleOrigins={
-				__experimentalHasMultipleOrigins
-			}
-			disableCustomGradients={ disableCustomGradients }
-			gradients={ gradients }
-			clearable={ clearable }
-			className={ className }
-		/>
-	);
+export const WithNoExistingGradients = Template.bind( {} );
+WithNoExistingGradients.args = {
+	...Default.args,
+	gradients: [],
 };

package/src/guide/index.js

@@ -42,7 +42,9 @@ export default function Guide( {
 	useEffect( () => {
 		// Each time we change the current page, start from the first element of the page.
 		// This also solves any focus loss that can happen.
-		focus.tabbable.find( guideContainer.current )?.[ 0 ]?.focus();
+		if ( guideContainer.current ) {
+			focus.tabbable.find( guideContainer.current )?.[ 0 ]?.focus();
+		}
 	}, [ currentPage ] );
 
 	if ( Children.count( children ) ) {

package/src/guide/page-control.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { times } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -24,7 +19,7 @@ export default function PageControl( {
 			className="components-guide__page-control"
 			aria-label={ __( 'Guide controls' ) }
 		>
-			{ times( numberOfPages, ( page ) => (
+			{ Array.from( { length: numberOfPages } ).map( ( _, page ) => (
 				<li
 					key={ page }
 					// Set aria-current="step" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current

package/src/guide/stories/index.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { times } from 'lodash';
 import { text, number } from '@storybook/addon-knobs';
 
 /**
@@ -41,16 +40,18 @@ const ModalExample = ( { numberOfPages, ...props } ) => {
 				<Guide
 					{ ...props }
 					onFinish={ closeGuide }
-					pages={ times( numberOfPages, ( page ) => ( {
-						content: (
-							<>
-								<h1>
-									Page { page + 1 } of { numberOfPages }
-								</h1>
-								<p>{ loremIpsum }</p>
-							</>
-						),
-					} ) ) }
+					pages={ Array.from( { length: numberOfPages } ).map(
+						( _, page ) => ( {
+							content: (
+								<>
+									<h1>
+										Page { page + 1 } of { numberOfPages }
+									</h1>
+									<p>{ loremIpsum }</p>
+								</>
+							),
+						} )
+					) }
 				/>
 			) }
 		</>

package/src/guide/test/index.js

@@ -1,23 +1,22 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
 import Guide from '../';
-import PageControl from '../page-control';
-import Modal from '../../modal';
 
 describe( 'Guide', () => {
 	it( 'renders nothing when there are no pages', () => {
-		const wrapper = shallow( <Guide /> );
-		expect( wrapper.isEmptyRender() ).toBe( true );
+		render( <Guide pages={ [] } /> );
+		expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'renders one page at a time', () => {
-		const wrapper = shallow(
+		render(
 			<Guide
 				pages={ [
 					{ content: <p>Page 1</p> },
@@ -25,11 +24,14 @@ describe( 'Guide', () => {
 				] }
 			/>
 		);
-		expect( wrapper.find( 'p' ) ).toHaveLength( 1 );
+
+		expect( screen.queryByRole( 'dialog' ) ).toBeVisible();
+		expect( screen.queryByText( 'Page 1' ) ).toBeVisible();
+		expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'hides back button and shows forward button on the first page', () => {
-		const wrapper = shallow(
+		render(
 			<Guide
 				pages={ [
 					{ content: <p>Page 1</p> },
@@ -37,20 +39,23 @@ describe( 'Guide', () => {
 				] }
 			/>
 		);
-		expect( wrapper.find( PageControl ).prop( 'currentPage' ) ).toBe( 0 );
-		expect( wrapper.find( '.components-guide__back-button' ) ).toHaveLength(
-			0
-		);
+
+		expect(
+			screen.queryByRole( 'button', { name: 'Previous' } )
+		).not.toBeInTheDocument();
 		expect(
-			wrapper.find( '.components-guide__forward-button' )
-		).toHaveLength( 1 );
+			screen.queryByRole( 'button', { name: 'Next' } )
+		).toBeVisible();
 		expect(
-			wrapper.find( '.components-guide__finish-button' )
-		).toHaveLength( 0 );
+			screen.queryByRole( 'button', { name: 'Finish' } )
+		).not.toBeInTheDocument();
 	} );
 
-	it( 'shows back button and shows finish button on the last page', () => {
-		const wrapper = shallow(
+	it( 'shows back button and shows finish button on the last page', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+		render(
 			<Guide
 				pages={ [
 					{ content: <p>Page 1</p> },
@@ -58,47 +63,59 @@ describe( 'Guide', () => {
 				] }
 			/>
 		);
-		wrapper.find( '.components-guide__forward-button' ).simulate( 'click' );
-		expect( wrapper.find( PageControl ).prop( 'currentPage' ) ).toBe( 1 );
-		expect( wrapper.find( '.components-guide__back-button' ) ).toHaveLength(
-			1
-		);
+		await user.click( screen.getByRole( 'button', { name: 'Next' } ) );
+
+		expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
+		expect( screen.queryByText( 'Page 2' ) ).toBeVisible();
+
 		expect(
-			wrapper.find( '.components-guide__forward-button' )
-		).toHaveLength( 0 );
+			screen.queryByRole( 'button', { name: 'Previous' } )
+		).toBeVisible();
 		expect(
-			wrapper.find( '.components-guide__finish-button' )
-		).toHaveLength( 1 );
+			screen.queryByRole( 'button', { name: 'Next' } )
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole( 'button', { name: 'Finish' } )
+		).toBeVisible();
 	} );
 
 	it( "doesn't display the page control if there is only one page", () => {
-		const wrapper = shallow(
-			<Guide pages={ [ { content: <p>Page 1</p> } ] } />
-		);
-		expect( wrapper.find( PageControl ).exists() ).toBeFalsy();
+		render( <Guide pages={ [ { content: <p>Page 1</p> } ] } /> );
+		expect(
+			screen.queryByRole( 'list', { name: 'Guide controls' } )
+		).not.toBeInTheDocument();
 	} );
 
-	it( 'calls onFinish when the finish button is clicked', () => {
+	it( 'calls onFinish when the finish button is clicked', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const onFinish = jest.fn();
-		const wrapper = shallow(
+		render(
 			<Guide
 				onFinish={ onFinish }
 				pages={ [ { content: <p>Page 1</p> } ] }
 			/>
 		);
-		wrapper.find( '.components-guide__finish-button' ).simulate( 'click' );
+		await user.click( screen.getByRole( 'button', { name: 'Finish' } ) );
+
 		expect( onFinish ).toHaveBeenCalled();
 	} );
 
-	it( 'calls onFinish when the modal is closed', () => {
+	it( 'calls onFinish when the modal is closed', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const onFinish = jest.fn();
-		const wrapper = shallow(
+		render(
 			<Guide
 				onFinish={ onFinish }
 				pages={ [ { content: <p>Page 1</p> } ] }
 			/>
 		);
-		wrapper.find( Modal ).prop( 'onRequestClose' )();
+
+		await user.keyboard( '[Escape]' );
+
 		expect( onFinish ).toHaveBeenCalled();
 	} );
 } );

package/src/guide/test/page-control.js

@@ -1,12 +1,8 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
-
-/**
- * WordPress dependencies
- */
-import { Button } from '@wordpress/components';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -15,29 +11,30 @@ import PageControl from '../page-control';
 
 describe( 'PageControl', () => {
 	it( 'renders an empty list when there are no pages', () => {
-		const wrapper = shallow(
-			<PageControl currentPage={ 0 } numberOfPages={ 0 } />
-		);
-		expect( wrapper.find( Button ) ).toHaveLength( 0 );
+		render( <PageControl currentPage={ 0 } numberOfPages={ 0 } /> );
+		expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'renders a button for each page', () => {
-		const wrapper = shallow(
-			<PageControl currentPage={ 0 } numberOfPages={ 5 } />
-		);
-		expect( wrapper.find( Button ) ).toHaveLength( 5 );
+		render( <PageControl currentPage={ 0 } numberOfPages={ 5 } /> );
+		expect( screen.getAllByRole( 'button' ) ).toHaveLength( 5 );
 	} );
 
-	it( 'sets the current page when a button is clicked', () => {
+	it( 'sets the current page when a button is clicked', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const setCurrentPage = jest.fn();
-		const wrapper = shallow(
+		render(
 			<PageControl
 				currentPage={ 0 }
 				numberOfPages={ 2 }
 				setCurrentPage={ setCurrentPage }
 			/>
 		);
-		wrapper.find( Button ).at( 1 ).simulate( 'click' );
+
+		await user.click( screen.getAllByRole( 'button' )[ 1 ] );
+
 		expect( setCurrentPage ).toHaveBeenCalledWith( 1 );
 	} );
 } );

package/src/higher-order/with-notices/test/index.js

@@ -5,6 +5,7 @@ import {
 	act,
 	render,
 	fireEvent,
+	screen,
 	waitForElementToBeRemoved,
 	within,
 } from '@testing-library/react';
@@ -145,10 +146,11 @@ describe( 'withNotices rendering', () => {
 	it( 'should display notices with functioning dismissal triggers', async () => {
 		const messages = [ 'Aló!', 'hu dis?', 'Otis' ];
 		const notices = noticesFrom( messages );
-		const { container, getAllByLabelText } = render(
+		const { container } = render(
 			<TestComponent notifications={ notices } />
 		);
-		const [ buttonRemoveFirst ] = getAllByLabelText( stockDismissText );
+		const [ buttonRemoveFirst ] =
+			screen.getAllByLabelText( stockDismissText );
 		const getRemovalTarget = () =>
 			within( container ).getByText(
 				// The last item corresponds to the first notice in the DOM.

package/src/higher-order/with-spoken-messages/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from 'enzyme';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies

package/src/item-group/styles.ts

@@ -16,13 +16,13 @@ export const unstyledButton = css`
 	text-align: left;
 
 	&:hover {
-		color: ${ COLORS.admin.theme };
+		color: ${ COLORS.ui.theme };
 	}
 
 	&:focus {
 		background-color: transparent;
-		color: ${ COLORS.admin.theme };
-		border-color: ${ COLORS.admin.theme };
+		color: ${ COLORS.ui.theme };
+		border-color: ${ COLORS.ui.theme };
 		outline: 3px solid transparent;
 	}
 `;

package/src/menu-group/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -10,18 +10,29 @@ import { MenuGroup } from '../';
 
 describe( 'MenuGroup', () => {
 	test( 'should render null when no children provided', () => {
-		const wrapper = shallow( <MenuGroup /> );
+		render( <MenuGroup /> );
 
-		expect( wrapper.html() ).toBe( null );
+		expect( screen.queryByRole( 'group' ) ).not.toBeInTheDocument();
 	} );
 
-	test( 'should match snapshot', () => {
-		const wrapper = shallow(
-			<MenuGroup label="My group" instanceId="1">
+	test( 'should render children', () => {
+		render(
+			<MenuGroup>
 				<p>My item</p>
 			</MenuGroup>
 		);
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( screen.queryByRole( 'group' ) ).toBeVisible();
+		expect( screen.queryByText( 'My item' ) ).toBeVisible();
+	} );
+
+	test( 'should render with an accessible label', () => {
+		render( <MenuGroup label="My group">Example</MenuGroup> );
+
+		expect(
+			screen.queryByRole( 'group', {
+				name: 'My group',
+			} )
+		).toBeVisible();
 	} );
 } );

package/src/mobile/bottom-sheet/index.native.js

@@ -15,7 +15,6 @@ import {
 } from 'react-native';
 import Modal from 'react-native-modal';
 import SafeArea from 'react-native-safe-area';
-import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -400,6 +399,7 @@ class BottomSheet extends Component {
 			children,
 			withHeaderSeparator = false,
 			hasNavigation,
+			onDismiss,
 			...rest
 		} = this.props;
 		const {
@@ -527,9 +527,7 @@ class BottomSheet extends Component {
 					panResponder.panHandlers.onMoveShouldSetResponderCapture
 				}
 				onAccessibilityEscape={ this.onCloseBottomSheet }
-				// We need to prevent overwriting the onDismiss prop,
-				// for this reason it is excluded from the rest object.
-				{ ...omit( rest, 'onDismiss' ) }
+				{ ...rest }
 			>
 				<KeyboardAvoidingView
 					behavior={ Platform.OS === 'ios' && 'padding' }

package/src/mobile/global-styles-context/utils.native.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { find, get, camelCase, has } from 'lodash';
+import { camelCase } from 'change-case';
+import { find, get, has } from 'lodash';
 import { Dimensions } from 'react-native';
 
 /**