@wordpress/components 20.0.0 → 21.0.0

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

@@ -4,6 +4,8 @@
 import { createHigherOrderComponent, useDebounce } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
 
+/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
+
 /**
  * A Higher Order Component used to be provide speak and debounced speak
  * functions.

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>
+	);
+};

package/src/icon/test/index.js

@@ -1,71 +1,67 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
  */
-import Dashicon from '../../dashicon';
 import Icon from '../';
 import { Path, SVG } from '../../';
 
 describe( 'Icon', () => {
+	const testId = 'icon';
 	const className = 'example-class';
 	const svg = (
 		<SVG>
 			<Path d="M5 4v3h5.5v12h3V7H19V4z" />
 		</SVG>
 	);
-	const style = { fill: 'red' };
 
 	it( 'renders nothing when icon omitted', () => {
-		const wrapper = shallow( <Icon /> );
+		render( <Icon data-testid={ testId } /> );
 
-		expect( wrapper.type() ).toBeNull();
+		expect( screen.queryByTestId( testId ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'renders a dashicon by slug', () => {
-		const wrapper = shallow( <Icon icon="format-image" /> );
+		render( <Icon data-testid={ testId } icon="format-image" /> );
 
-		expect( wrapper.find( 'Dashicon' ).prop( 'icon' ) ).toBe(
-			'format-image'
+		expect( screen.getByTestId( testId ) ).toHaveClass(
+			'dashicons-format-image'
 		);
 	} );
 
 	it( 'renders a function', () => {
-		const wrapper = shallow( <Icon icon={ () => <span /> } /> );
+		render( <Icon icon={ () => <span data-testid={ testId } /> } /> );
 
-		expect( wrapper.name() ).toBe( 'span' );
+		expect( screen.getByTestId( testId ) ).toBeVisible();
 	} );
 
 	it( 'renders an element', () => {
-		const wrapper = shallow( <Icon icon={ <span /> } /> );
+		render( <Icon icon={ <span data-testid={ testId } /> } /> );
 
-		expect( wrapper.name() ).toBe( 'span' );
+		expect( screen.getByTestId( testId ) ).toBeVisible();
 	} );
 
 	it( 'renders an svg element', () => {
-		const wrapper = shallow( <Icon icon={ svg } /> );
+		render( <Icon data-testid={ testId } icon={ svg } /> );
 
-		expect( wrapper.name() ).toBe( 'SVG' );
+		expect( screen.getByTestId( testId ) ).toBeVisible();
 	} );
 
 	it( 'renders an svg element with a default width and height of 24', () => {
-		const wrapper = shallow( <Icon icon={ svg } /> );
+		render( <Icon data-testid={ testId } icon={ svg } /> );
+		const icon = screen.getByTestId( testId );
 
-		expect( wrapper.prop( 'width' ) ).toBe( 24 );
-		expect( wrapper.prop( 'height' ) ).toBe( 24 );
+		expect( icon ).toHaveAttribute( 'width', '24' );
+		expect( icon ).toHaveAttribute( 'height', '24' );
 	} );
 
-	it( 'renders an svg element and passes the size as its width and height', () => {
-		const wrapper = shallow(
+	it( 'renders an svg element and override its width and height', () => {
+		render(
 			<Icon
+				data-testid={ testId }
 				icon={
 					<SVG width={ 64 } height={ 64 }>
 						<Path d="M5 4v3h5.5v12h3V7H19V4z" />
@@ -74,73 +70,26 @@ describe( 'Icon', () => {
 				size={ 32 }
 			/>
 		);
+		const icon = screen.getByTestId( testId );
 
-		expect( wrapper.prop( 'width' ) ).toBe( 64 );
-		expect( wrapper.prop( 'height' ) ).toBe( 64 );
+		expect( icon ).toHaveAttribute( 'width', '32' );
+		expect( icon ).toHaveAttribute( 'height', '32' );
 	} );
 
 	it( 'renders an svg element and does not override width and height if already specified', () => {
-		const wrapper = shallow( <Icon icon={ svg } size={ 32 } /> );
+		render( <Icon data-testid={ testId } icon={ svg } size={ 32 } /> );
+		const icon = screen.getByTestId( testId );
 
-		expect( wrapper.prop( 'width' ) ).toBe( 32 );
-		expect( wrapper.prop( 'height' ) ).toBe( 32 );
+		expect( icon ).toHaveAttribute( 'width', '32' );
+		expect( icon ).toHaveAttribute( 'height', '32' );
 	} );
 
 	it( 'renders a component', () => {
-		class MyComponent extends Component {
-			render() {
-				return <span />;
-			}
-		}
-		const wrapper = shallow( <Icon icon={ MyComponent } /> );
-
-		expect( wrapper.name() ).toBe( 'MyComponent' );
-	} );
-
-	describe( 'props passing', () => {
-		class MyComponent extends Component {
-			render() {
-				return <span className={ this.props.className } />;
-			}
-		}
-
-		describe.each( [
-			[ 'dashicon', { icon: 'format-image' } ],
-			[ 'dashicon element', { icon: <Dashicon icon="format-image" /> } ],
-			[ 'element', { icon: <span /> } ],
-			[ 'svg element', { icon: svg } ],
-			[ 'component', { icon: MyComponent } ],
-		] )( '%s', ( label, props ) => {
-			it( 'should pass through size', () => {
-				if ( label === 'svg element' ) {
-					// Custom logic for SVG elements tested separately.
-					//
-					// See: `renders an svg element and passes the size as its width and height`
-					return;
-				}
-
-				if ( [ 'dashicon', 'dashicon element' ].includes( label ) ) {
-					// `size` prop isn't passed through, since dashicon doesn't accept it.
-					return;
-				}
-
-				const wrapper = shallow( <Icon { ...props } size={ 32 } /> );
-
-				expect( wrapper.prop( 'size' ) ).toBe( 32 );
-			} );
-
-			it( 'should pass through all other props', () => {
-				const wrapper = shallow(
-					<Icon
-						{ ...props }
-						style={ style }
-						className={ className }
-					/>
-				);
+		const MyComponent = () => (
+			<span data-testid={ testId } className={ className } />
+		);
+		render( <Icon icon={ MyComponent } /> );
 
-				expect( wrapper.prop( 'style' ) ).toBe( style );
-				expect( wrapper.prop( 'className' ) ).toBe( className );
-			} );
-		} );
+		expect( screen.getByTestId( testId ) ).toHaveClass( className );
 	} );
 } );

package/src/input-control/input-base.tsx

@@ -19,7 +19,6 @@ import {
 	Root,
 	Prefix,
 	Suffix,
-	LabelWrapper,
 	getSizeConfig,
 } from './styles/input-control-styles';
 import type { InputBaseProps, LabelPosition } from './types';
@@ -91,20 +90,19 @@ export function InputBase(
 			{ ...props }
 			{ ...getUIFlexProps( labelPosition ) }
 			className={ className }
+			gap={ 2 }
 			isFocused={ isFocused }
 			labelPosition={ labelPosition }
 			ref={ ref }
 		>
-			<LabelWrapper>
-				<Label
-					className="components-input-control__label"
-					hideLabelFromVision={ hideLabelFromVision }
-					labelPosition={ labelPosition }
-					htmlFor={ id }
-				>
-					{ label }
-				</Label>
-			</LabelWrapper>
+			<Label
+				className="components-input-control__label"
+				hideLabelFromVision={ hideLabelFromVision }
+				labelPosition={ labelPosition }
+				htmlFor={ id }
+			>
+				{ label }
+			</Label>
 			<Container
 				__unstableInputWidth={ __unstableInputWidth }
 				className="components-input-control__container"

package/src/input-control/label.tsx

@@ -2,7 +2,10 @@
  * Internal dependencies
  */
 import { VisuallyHidden } from '../visually-hidden';
-import { Label as BaseLabel } from './styles/input-control-styles';
+import {
+	Label as BaseLabel,
+	LabelWrapper,
+} from './styles/input-control-styles';
 import type { WordPressComponentProps } from '../ui/context';
 import type { InputControlLabelProps } from './types';
 
@@ -23,8 +26,10 @@ export default function Label( {
 	}
 
 	return (
-		<BaseLabel htmlFor={ htmlFor } { ...props }>
-			{ children }
-		</BaseLabel>
+		<LabelWrapper>
+			<BaseLabel htmlFor={ htmlFor } { ...props }>
+				{ children }
+			</BaseLabel>
+		</LabelWrapper>
 	);
 }

package/src/input-control/styles/input-control-styles.tsx

@@ -33,33 +33,11 @@ const rootFocusedStyles = ( { isFocused }: RootProps ) => {
 	return css( { zIndex: 1 } );
 };
 
-const rootLabelPositionStyles = ( { labelPosition }: RootProps ) => {
-	switch ( labelPosition ) {
-		case 'top':
-			return css`
-				align-items: flex-start;
-				flex-direction: column;
-			`;
-		case 'bottom':
-			return css`
-				align-items: flex-start;
-				flex-direction: column-reverse;
-			`;
-		case 'edge':
-			return css`
-				justify-content: space-between;
-			`;
-		default:
-			return '';
-	}
-};
-
 export const Root = styled( Flex )< RootProps >`
 	position: relative;
 	border-radius: 2px;
 	padding-top: 0;
 	${ rootFocusedStyles }
-	${ rootLabelPositionStyles }
 `;
 
 const containerDisabledStyles = ( { disabled }: ContainerProps ) => {
@@ -70,11 +48,6 @@ const containerDisabledStyles = ( { disabled }: ContainerProps ) => {
 	return css( { backgroundColor } );
 };
 
-// Normalizes the margins from the <Flex /> (components/ui/flex/) container.
-const containerMarginStyles = ( { hideLabel }: ContainerProps ) => {
-	return hideLabel ? css( { margin: '0 !important' } ) : null;
-};
-
 const containerWidthStyles = ( {
 	__unstableInputWidth,
 	labelPosition,
@@ -101,7 +74,6 @@ export const Container = styled.div< ContainerProps >`
 	position: relative;
 
 	${ containerDisabledStyles }
-	${ containerMarginStyles }
 	${ containerWidthStyles }
 `;
 
@@ -256,20 +228,6 @@ export const Input = styled.input< InputProps >`
 	}
 `;
 
-const labelMargin = ( {
-	labelPosition,
-}: {
-	labelPosition?: LabelPosition;
-} ) => {
-	let marginBottom = 8;
-
-	if ( labelPosition === 'edge' || labelPosition === 'side' ) {
-		marginBottom = 0;
-	}
-
-	return css( { marginTop: 0, marginRight: 0, marginBottom, marginLeft: 0 } );
-};
-
 const BaseLabel = styled( Text )< { labelPosition?: LabelPosition } >`
 	&&& {
 		${ baseLabelTypography };
@@ -281,7 +239,6 @@ const BaseLabel = styled( Text )< { labelPosition?: LabelPosition } >`
 		max-width: 100%;
 		z-index: 1;
 
-		${ labelMargin }
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;

package/src/input-control/types.ts

@@ -165,6 +165,9 @@ export interface InputBaseProps extends BaseProps, FlexProps {
 	 * @default false
 	 */
 	disabled?: boolean;
+	/**
+	 * The class name to be added to the wrapper element.
+	 */
 	className?: string;
 	id?: string;
 	/**

package/src/isolated-event-container/index.js

@@ -4,6 +4,9 @@
 import { forwardRef } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
 
+/**
+ * @type {import('react').MouseEventHandler<HTMLDivElement>}
+ */
 function stopPropagation( event ) {
 	event.stopPropagation();
 }

package/src/isolated-event-container/test/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -9,21 +10,62 @@ import { shallow } from 'enzyme';
 import IsolatedEventContainer from '../';
 
 describe( 'IsolatedEventContainer', () => {
-	it( 'should pass props to container', () => {
-		const isolated = shallow(
-			<IsolatedEventContainer className="test" onClick="click" />
+	it( 'should pass props to container', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+		const clickHandler = jest.fn();
+		render(
+			<IsolatedEventContainer
+				title="Container"
+				className="test"
+				onClick={ clickHandler }
+			/>
 		);
 
-		expect( isolated.hasClass( 'test' ) ).toBe( true );
-		expect( isolated.prop( 'onClick' ) ).toBe( 'click' );
+		const container = screen.getByTitle( 'Container' );
+		expect( container ).toHaveClass( 'test' );
+
+		await user.click( container );
+
+		expect( clickHandler ).toHaveBeenCalledTimes( 1 );
 		expect( console ).toHaveWarned();
 	} );
 
-	it( 'should stop mousedown event propagation', () => {
-		const isolated = shallow( <IsolatedEventContainer /> );
-		const event = { stopPropagation: jest.fn() };
+	it( 'should render children', async () => {
+		render(
+			<IsolatedEventContainer title="Container">
+				<p>Child</p>
+			</IsolatedEventContainer>
+		);
+
+		expect(
+			within( screen.getByTitle( 'Container' ) ).getByText( 'Child' )
+		).toBeVisible();
+	} );
+
+	it( 'should stop event propagation only for mousedown, but not for keydown', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		const mousedownHandler = jest.fn();
+		const keydownHandler = jest.fn();
+		render(
+			<button
+				onMouseDown={ mousedownHandler }
+				onKeyDown={ keydownHandler }
+			>
+				<IsolatedEventContainer title="Container" />
+			</button>
+		);
+
+		const container = screen.getByTitle( 'Container' );
+
+		await user.click( container );
+		await user.keyboard( '[Enter]' );
 
-		isolated.simulate( 'mousedown', event );
-		expect( event.stopPropagation ).toHaveBeenCalled();
+		expect( mousedownHandler ).not.toHaveBeenCalled();
+		expect( keydownHandler ).toHaveBeenCalledTimes( 1 );
 	} );
 } );

package/src/item-group/test/__snapshots__/index.js.snap

@@ -11,8 +11,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-1uo9kmu-View-medium-item-spacedAround em57xhy0"
-+       class="components-item css-10mizr-View-large-item-spacedAround em57xhy0"
+-       class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
++       class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -24,8 +24,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-1uo9kmu-View-medium-item-spacedAround em57xhy0"
-+       class="components-item css-10mizr-View-large-item-spacedAround em57xhy0"
+-       class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
++       class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -44,8 +44,8 @@ Snapshot Diff:
     role="listitem"
   >
     <div
--     class="components-item css-bsdqin-View-medium-item em57xhy0"
-+     class="components-item css-1ohjtsa-View-large-item em57xhy0"
+-     class="components-item css-bsdqin-View-medium-item e19lxcc00"
++     class="components-item css-1ohjtsa-View-large-item e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Item"
     >
@@ -110,8 +110,8 @@ Snapshot Diff:
 
 @@ -1,17 +1,17 @@
   <div
--   class="components-item-group css-kj8mvb-View-rounded em57xhy0"
-+   class="components-item-group css-18qvw1m-View-separated-rounded em57xhy0"
+-   class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
++   class="components-item-group css-18qvw1m-View-separated-rounded e19lxcc00"
     data-wp-c16t="true"
     data-wp-component="ItemGroup"
     role="list"
@@ -121,8 +121,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-1uo9kmu-View-medium-item-spacedAround em57xhy0"
-+       class="components-item css-bsdqin-View-medium-item em57xhy0"
+-       class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
++       class="components-item css-bsdqin-View-medium-item e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -137,8 +137,8 @@ Snapshot Diff:
 
 @@ -1,17 +1,17 @@
   <div
--   class="components-item-group css-kj8mvb-View-rounded em57xhy0"
-+   class="components-item-group css-acyoj6-View-bordered-rounded em57xhy0"
+-   class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
++   class="components-item-group css-acyoj6-View-bordered-rounded e19lxcc00"
     data-wp-c16t="true"
     data-wp-component="ItemGroup"
     role="list"
@@ -148,8 +148,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-1uo9kmu-View-medium-item-spacedAround em57xhy0"
-+       class="components-item css-bsdqin-View-medium-item em57xhy0"
+-       class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
++       class="components-item css-bsdqin-View-medium-item e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -164,8 +164,8 @@ Snapshot Diff:
 
 @@ -1,7 +1,7 @@
   <div
--   class="components-item-group css-kj8mvb-View-rounded em57xhy0"
-+   class="components-item-group css-1mm2cvy-View em57xhy0"
+-   class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
++   class="components-item-group css-1mm2cvy-View e19lxcc00"
     data-wp-c16t="true"
     data-wp-component="ItemGroup"
     role="list"