@wordpress/components 20.0.0 → 21.0.0

package/src/gradient-picker/index.js

@@ -8,6 +8,7 @@ import { map } from 'lodash';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useCallback, useMemo } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -25,7 +26,6 @@ function SingleOrigin( {
 	onChange,
 	value,
 	actions,
-	content,
 } ) {
 	const gradientOptions = useMemo( () => {
 		return map( gradients, ( { gradient, name } ) => (
@@ -59,9 +59,7 @@ function SingleOrigin( {
 			className={ className }
 			options={ gradientOptions }
 			actions={ actions }
-		>
-			{ content }
-		</CircularOptionPicker>
+		/>
 	);
 }
 
@@ -72,7 +70,6 @@ function MultipleOrigin( {
 	onChange,
 	value,
 	actions,
-	content,
 } ) {
 	return (
 		<VStack spacing={ 3 } className={ className }>
@@ -86,10 +83,7 @@ function MultipleOrigin( {
 							onChange={ onChange }
 							value={ value }
 							{ ...( gradients.length === index + 1
-								? {
-										actions,
-										content,
-								  }
+								? { actions }
 								: {} ) }
 						/>
 					</VStack>
@@ -120,47 +114,56 @@ export default function GradientPicker( {
 			? MultipleOrigin
 			: SingleOrigin;
 
-	// Can be removed when deprecation period is over
+	if ( ! __nextHasNoMargin ) {
+		deprecated( 'Outer margin styles for wp.components.GradientPicker', {
+			since: '6.1',
+			version: '6.4',
+			hint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version',
+		} );
+	}
+
 	const deprecatedMarginSpacerProps = ! __nextHasNoMargin
-		? { marginTop: 3 }
+		? {
+				marginTop: ! gradients?.length ? 3 : undefined,
+				marginBottom: ! clearable ? 6 : 0,
+		  }
 		: {};
 
 	return (
-		<Component
-			className={ className }
-			clearable={ clearable }
-			clearGradient={ clearGradient }
-			gradients={ gradients }
-			onChange={ onChange }
-			value={ value }
-			actions={
-				clearable &&
-				( gradients?.length || ! disableCustomGradients ) && (
-					<CircularOptionPicker.ButtonAction
-						onClick={ clearGradient }
-					>
-						{ __( 'Clear' ) }
-					</CircularOptionPicker.ButtonAction>
-				)
-			}
-			content={
-				! disableCustomGradients && (
-					<Spacer
-						marginTop={ gradients?.length ? 3 : 0 }
-						marginBottom={ 0 }
-						{ ...deprecatedMarginSpacerProps }
-					>
-						<CustomGradientPicker
-							__nextHasNoMargin={ __nextHasNoMargin }
-							__experimentalIsRenderedInSidebar={
-								__experimentalIsRenderedInSidebar
-							}
-							value={ value }
-							onChange={ onChange }
-						/>
-					</Spacer>
-				)
-			}
-		/>
+		// Outmost Spacer wrapper can be removed when deprecation period is over
+		<Spacer marginBottom={ 0 } { ...deprecatedMarginSpacerProps }>
+			<VStack spacing={ gradients?.length ? 4 : 0 }>
+				{ ! disableCustomGradients && (
+					<CustomGradientPicker
+						__nextHasNoMargin
+						__experimentalIsRenderedInSidebar={
+							__experimentalIsRenderedInSidebar
+						}
+						value={ value }
+						onChange={ onChange }
+					/>
+				) }
+				{ ( gradients?.length || clearable ) && (
+					<Component
+						className={ className }
+						clearable={ clearable }
+						clearGradient={ clearGradient }
+						gradients={ gradients }
+						onChange={ onChange }
+						value={ value }
+						actions={
+							clearable &&
+							! disableCustomGradients && (
+								<CircularOptionPicker.ButtonAction
+									onClick={ clearGradient }
+								>
+									{ __( 'Clear' ) }
+								</CircularOptionPicker.ButtonAction>
+							)
+						}
+					/>
+				) }
+			</VStack>
+		</Spacer>
 	);
 }

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

@@ -74,6 +74,7 @@ const Template = ( { onChange, ...props } ) => {
 
 export const Default = Template.bind( {} );
 Default.args = {
+	__nextHasNoMargin: true,
 	gradients: GRADIENTS,
 };
 
@@ -82,3 +83,13 @@ WithNoExistingGradients.args = {
 	...Default.args,
 	gradients: [],
 };
+
+export const MultipleOrigins = Template.bind( {} );
+MultipleOrigins.args = {
+	...Default.args,
+	__experimentalHasMultipleOrigins: true,
+	gradients: [
+		{ name: 'Origin 1', gradients: GRADIENTS },
+		{ name: 'Origin 2', gradients: GRADIENTS },
+	],
+};

package/src/guide/index.js

@@ -9,7 +9,6 @@ import classnames from 'classnames';
 import { useState, useEffect, Children, useRef } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
-import { LEFT, RIGHT } from '@wordpress/keycodes';
 import { focus } from '@wordpress/dom';
 
 /**
@@ -76,10 +75,14 @@ export default function Guide( {
 			contentLabel={ contentLabel }
 			onRequestClose={ onFinish }
 			onKeyDown={ ( event ) => {
-				if ( event.keyCode === LEFT ) {
+				if ( event.code === 'ArrowLeft' ) {
 					goBack();
-				} else if ( event.keyCode === RIGHT ) {
+					// Do not scroll the modal's contents.
+					event.preventDefault();
+				} else if ( event.code === 'ArrowRight' ) {
 					goForward();
+					// Do not scroll the modal's contents.
+					event.preventDefault();
 				}
 			} }
 			ref={ guideContainer }

package/src/guide/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -118,4 +118,141 @@ describe( 'Guide', () => {
 
 		expect( onFinish ).toHaveBeenCalled();
 	} );
+
+	describe( 'page navigation', () => {
+		it( 'renders an empty list when there are no pages', () => {
+			render( <Guide pages={ [] } /> );
+			expect(
+				screen.queryByRole( 'list', {
+					name: 'Guide controls',
+				} )
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByRole( 'button', {
+					name: /page \d of \d/i,
+				} )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'renders a button for each page', () => {
+			render(
+				<Guide
+					pages={ [
+						{ content: <p>Page 1</p> },
+						{ content: <p>Page 2</p> },
+						{ content: <p>Page 3</p> },
+						{ content: <p>Page 4</p> },
+					] }
+				/>
+			);
+			const listContainer = screen.getByRole( 'list', {
+				name: 'Guide controls',
+			} );
+			expect(
+				within( listContainer ).getAllByRole( 'button', {
+					name: /page \d of \d/i,
+				} )
+			).toHaveLength( 4 );
+		} );
+
+		it( 'sets the current page when a button is clicked', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			render(
+				<Guide
+					pages={ [
+						{ content: <p>Page 1</p> },
+						{ content: <p>Page 2</p> },
+						{ content: <p>Page 3</p> },
+					] }
+				/>
+			);
+
+			expect( screen.getByText( 'Page 1' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Page 2 of 3' } )
+			);
+
+			expect( screen.getByText( 'Page 2' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Page 3 of 3' } )
+			);
+
+			expect( screen.getByText( 'Page 3' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Page 1 of 3' } )
+			);
+
+			expect( screen.getByText( 'Page 1' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'allows navigating through the pages with the left and right arrows', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			render(
+				<Guide
+					pages={ [
+						{ content: <p>Page 1</p> },
+						{ content: <p>Page 2</p> },
+						{ content: <p>Page 3</p> },
+					] }
+				/>
+			);
+
+			expect( screen.getByText( 'Page 1' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
+
+			await user.keyboard( '[ArrowLeft]' );
+
+			expect( screen.getByText( 'Page 1' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
+
+			await user.keyboard( '[ArrowRight]' );
+
+			expect( screen.getByText( 'Page 2' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
+
+			await user.keyboard( '[ArrowRight]' );
+
+			expect( screen.getByText( 'Page 3' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
+
+			await user.keyboard( '[ArrowRight]' );
+
+			expect( screen.getByText( 'Page 3' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
+
+			await user.keyboard( '[ArrowLeft]' );
+
+			expect( screen.getByText( 'Page 2' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
+
+			await user.keyboard( '[ArrowLeft]' );
+
+			expect( screen.getByText( 'Page 1' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
+		} );
+	} );
 } );

package/src/h-stack/test/__snapshots__/index.tsx.snap

@@ -13,6 +13,7 @@ exports[`props should render alignment 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  gap: calc(4px * 2);
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
@@ -20,10 +21,6 @@ exports[`props should render alignment 1`] = `
   width: 100%;
 }
 
-.emotion-0>*+*:not( marquee ) {
-  margin-left: calc(4px * 2);
-}
-
 .emotion-0>* {
   min-width: 0;
 }
@@ -55,16 +52,13 @@ exports[`props should render correctly 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  gap: calc(4px * 2);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
   width: 100%;
 }
 
-.emotion-0>*+*:not( marquee ) {
-  margin-left: calc(4px * 2);
-}
-
 .emotion-0>* {
   min-width: 0;
 }
@@ -96,16 +90,13 @@ exports[`props should render spacing 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  gap: calc(4px * 5);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
   width: 100%;
 }
 
-.emotion-0>*+*:not( marquee ) {
-  margin-left: calc(4px * 5);
-}
-
 .emotion-0>* {
   min-width: 0;
 }

package/src/higher-order/with-constrained-tabbing/index.js

@@ -11,7 +11,7 @@ const withConstrainedTabbing = createHigherOrderComponent(
 		function ComponentWithConstrainedTabbing( props ) {
 			const ref = useConstrainedTabbing();
 			return (
-				<div ref={ ref } tabIndex="-1">
+				<div ref={ ref } tabIndex={ -1 }>
 					<WrappedComponent { ...props } />
 				</div>
 			);

package/src/higher-order/with-filters/test/__snapshots__/index.js.snap

@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`withFilters should display a component overridden by the filter 1`] = `
+<div>
+  <div>
+    Overridden component
+  </div>
+</div>
+`;
+
+exports[`withFilters should display original component when no filters applied 1`] = `
+<div>
+  <div>
+    My component
+  </div>
+</div>
+`;
+
+exports[`withFilters should display two components composed by the filter 1`] = `
+<div>
+  <div>
+    <div>
+      My component
+    </div>
+    <div>
+      Composed component
+    </div>
+  </div>
+</div>
+`;
+
+exports[`withFilters should not re-render component when new filter added before component was mounted 1`] = `
+<div>
+  <blockquote>
+    <div>
+      Spied component
+    </div>
+  </blockquote>
+</div>
+`;
+
+exports[`withFilters should re-render both components once each when one filter added 1`] = `
+<div>
+  <section>
+    <blockquote>
+      <div>
+        Spied component
+      </div>
+    </blockquote>
+    <blockquote>
+      <div>
+        Spied component
+      </div>
+    </blockquote>
+  </section>
+</div>
+`;
+
+exports[`withFilters should re-render component once when new filter added after component was mounted 1`] = `
+<div>
+  <blockquote>
+    <div>
+      Spied component
+    </div>
+  </blockquote>
+</div>
+`;
+
+exports[`withFilters should re-render component once when two filters added in the same animation frame 1`] = `
+<div>
+  <section>
+    <blockquote>
+      <div>
+        Spied component
+      </div>
+    </blockquote>
+  </section>
+</div>
+`;
+
+exports[`withFilters should re-render component twice when new filter added and removed in two different animation frames 1`] = `
+<div>
+  <div>
+    Spied component
+  </div>
+</div>
+`;

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

@@ -1,63 +1,32 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
-import TestUtils from 'react-dom/test-utils';
-import ReactDOM from 'react-dom';
+import { render } from '@testing-library/react';
 
 /**
  * WordPress dependencies
  */
 import { addFilter, removeAllFilters, removeFilter } from '@wordpress/hooks';
-import { Component } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import withFilters from '..';
 
-const assertExpectedHtml = ( wrapper, expectedHTML ) => {
-	// eslint-disable-next-line react/no-find-dom-node
-	const element = ReactDOM.findDOMNode( wrapper );
-	expect( element.outerHTML ).toBe( expectedHTML );
-};
-
-// This is needed because TestUtils does not accept a stateless component.
-// anything run through a HOC ends up as a stateless component.
-const getTestComponent = ( WrappedComponent ) => {
-	class TestComponent extends Component {
-		render() {
-			return <WrappedComponent { ...this.props } />;
-		}
-	}
-	return <TestComponent />;
-};
-
 describe( 'withFilters', () => {
-	let shallowWrapper, wrapper;
-
 	const hookName = 'EnhancedComponent';
 	const MyComponent = () => <div>My component</div>;
 
 	afterEach( () => {
-		if ( wrapper ) {
-			ReactDOM.unmountComponentAtNode(
-				// eslint-disable-next-line react/no-find-dom-node
-				ReactDOM.findDOMNode( wrapper ).parentNode
-			);
-		}
-		if ( shallowWrapper ) {
-			shallowWrapper.unmount();
-		}
 		removeAllFilters( hookName );
 	} );
 
 	it( 'should display original component when no filters applied', () => {
 		const EnhancedComponent = withFilters( hookName )( MyComponent );
 
-		shallowWrapper = shallow( <EnhancedComponent /> );
+		const { container } = render( <EnhancedComponent /> );
 
-		expect( shallowWrapper.html() ).toBe( '<div>My component</div>' );
+		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'should display a component overridden by the filter', () => {
@@ -69,11 +38,9 @@ describe( 'withFilters', () => {
 		);
 		const EnhancedComponent = withFilters( hookName )( MyComponent );
 
-		shallowWrapper = shallow( <EnhancedComponent /> );
+		const { container } = render( <EnhancedComponent /> );
 
-		expect( shallowWrapper.html() ).toBe(
-			'<div>Overridden component</div>'
-		);
+		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'should display two components composed by the filter', () => {
@@ -91,11 +58,9 @@ describe( 'withFilters', () => {
 		);
 		const EnhancedComponent = withFilters( hookName )( MyComponent );
 
-		shallowWrapper = shallow( <EnhancedComponent /> );
+		const { container } = render( <EnhancedComponent /> );
 
-		expect( shallowWrapper.html() ).toBe(
-			'<div><div>My component</div><div>Composed component</div></div>'
-		);
+		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'should not re-render component when new filter added before component was mounted', () => {
@@ -116,17 +81,13 @@ describe( 'withFilters', () => {
 		);
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
-		wrapper = TestUtils.renderIntoDocument(
-			getTestComponent( EnhancedComponent )
-		);
+		const { container } = render( <EnhancedComponent /> );
+
+		expect( container ).toMatchSnapshot();
 
 		jest.runAllTimers();
 
 		expect( spy ).toHaveBeenCalledTimes( 1 );
-		assertExpectedHtml(
-			wrapper,
-			'<blockquote><div>Spied component</div></blockquote>'
-		);
 	} );
 
 	it( 'should re-render component once when new filter added after component was mounted', () => {
@@ -137,9 +98,7 @@ describe( 'withFilters', () => {
 		};
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
-		wrapper = TestUtils.renderIntoDocument(
-			getTestComponent( EnhancedComponent )
-		);
+		const { container } = render( <EnhancedComponent /> );
 
 		spy.mockClear();
 		addFilter(
@@ -155,10 +114,7 @@ describe( 'withFilters', () => {
 		jest.runAllTimers();
 
 		expect( spy ).toHaveBeenCalledTimes( 1 );
-		assertExpectedHtml(
-			wrapper,
-			'<blockquote><div>Spied component</div></blockquote>'
-		);
+		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'should re-render component once when two filters added in the same animation frame', () => {
@@ -168,9 +124,8 @@ describe( 'withFilters', () => {
 			return <div>Spied component</div>;
 		};
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
-		wrapper = TestUtils.renderIntoDocument(
-			getTestComponent( EnhancedComponent )
-		);
+
+		const { container } = render( <EnhancedComponent /> );
 
 		spy.mockClear();
 
@@ -197,10 +152,7 @@ describe( 'withFilters', () => {
 		jest.runAllTimers();
 
 		expect( spy ).toHaveBeenCalledTimes( 1 );
-		assertExpectedHtml(
-			wrapper,
-			'<section><blockquote><div>Spied component</div></blockquote></section>'
-		);
+		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'should re-render component twice when new filter added and removed in two different animation frames', () => {
@@ -210,9 +162,7 @@ describe( 'withFilters', () => {
 			return <div>Spied component</div>;
 		};
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
-		wrapper = TestUtils.renderIntoDocument(
-			getTestComponent( EnhancedComponent )
-		);
+		const { container } = render( <EnhancedComponent /> );
 
 		spy.mockClear();
 		addFilter(
@@ -231,7 +181,7 @@ describe( 'withFilters', () => {
 		jest.runAllTimers();
 
 		expect( spy ).toHaveBeenCalledTimes( 2 );
-		assertExpectedHtml( wrapper, '<div>Spied component</div>' );
+		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'should re-render both components once each when one filter added', () => {
@@ -241,15 +191,14 @@ describe( 'withFilters', () => {
 			return <div>Spied component</div>;
 		};
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
+
 		const CombinedComponents = () => (
 			<section>
 				<EnhancedComponent />
 				<EnhancedComponent />
 			</section>
 		);
-		wrapper = TestUtils.renderIntoDocument(
-			getTestComponent( CombinedComponents )
-		);
+		const { container } = render( <CombinedComponents /> );
 
 		spy.mockClear();
 		addFilter(
@@ -265,9 +214,6 @@ describe( 'withFilters', () => {
 		jest.runAllTimers();
 
 		expect( spy ).toHaveBeenCalledTimes( 2 );
-		assertExpectedHtml(
-			wrapper,
-			'<section><blockquote><div>Spied component</div></blockquote><blockquote><div>Spied component</div></blockquote></section>'
-		);
+		expect( container ).toMatchSnapshot();
 	} );
 } );