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

package/src/gradient-picker/index.js

@@ -26,7 +26,6 @@ function SingleOrigin( {
 	onChange,
 	value,
 	actions,
-	content,
 } ) {
 	const gradientOptions = useMemo( () => {
 		return map( gradients, ( { gradient, name } ) => (
@@ -60,9 +59,7 @@ function SingleOrigin( {
 			className={ className }
 			options={ gradientOptions }
 			actions={ actions }
-		>
-			{ content }
-		</CircularOptionPicker>
+		/>
 	);
 }
 
@@ -73,7 +70,6 @@ function MultipleOrigin( {
 	onChange,
 	value,
 	actions,
-	content,
 } ) {
 	return (
 		<VStack spacing={ 3 } className={ className }>
@@ -87,10 +83,7 @@ function MultipleOrigin( {
 							onChange={ onChange }
 							value={ value }
 							{ ...( gradients.length === index + 1
-								? {
-										actions,
-										content,
-								  }
+								? { actions }
 								: {} ) }
 						/>
 					</VStack>
@@ -129,47 +122,48 @@ export default function GradientPicker( {
 		} );
 	}
 
-	// Can be removed when deprecation period is over
 	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

@@ -83,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/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-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();
 	} );
 } );

package/src/icon/index.tsx

@@ -82,9 +82,9 @@ function Icon< P >( {
 
 	if ( icon && ( icon.type === 'svg' || icon.type === SVG ) ) {
 		const appliedProps = {
+			...icon.props,
 			width: size,
 			height: size,
-			...icon.props,
 			...additionalProps,
 		};
 

package/src/icon/stories/index.js

@@ -13,6 +13,7 @@ import { wordpress } from '@wordpress/icons';
  * Internal dependencies
  */
 import Icon from '../';
+import { VStack } from '../../v-stack';
 
 export default {
 	title: 'Components/Icon',
@@ -108,3 +109,20 @@ export const withAnSVG = () => {
 		/>
 	);
 };
+
+/**
+ * Although it's preferred to use icons from the `@wordpress/icons` package, Dashicons are still supported,
+ * as long as you are in a context where the Dashicons stylesheet is loaded. To simulate that here,
+ * use the Global CSS Injector in the Storybook toolbar at the top and select the "WordPress" preset.
+ */
+export const withADashicon = () => {
+	return (
+		<VStack>
+			<Icon icon="wordpress" />
+			<small>
+				This won’t show an icon if the Dashicons stylesheet isn’t
+				loaded.
+			</small>
+		</VStack>
+	);
+};