@wordpress/components 19.13.0 → 19.16.0

package/src/select-control/index.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { isEmpty } from 'lodash';
 import classNames from 'classnames';
 import type { ChangeEvent, FocusEvent, ForwardedRef } from 'react';
 
@@ -59,7 +58,7 @@ function UnforwardedSelectControl(
 	const helpId = help ? `${ id }__help` : undefined;
 
 	// Disable reason: A select with an onchange throws a warning.
-	if ( isEmpty( options ) && ! children ) return null;
+	if ( ! options?.length && ! children ) return null;
 
 	const handleOnBlur = ( event: FocusEvent< HTMLSelectElement > ) => {
 		onBlur( event );

package/src/select-control/styles/select-control-styles.ts

@@ -10,7 +10,8 @@ import styled from '@emotion/styled';
 import { COLORS, rtl } from '../../utils';
 import type { SelectControlProps } from '../types';
 
-interface SelectProps extends Pick< SelectControlProps, 'disabled' > {
+interface SelectProps
+	extends Pick< SelectControlProps, '__next36pxDefaultSize' | 'disabled' > {
 	// Using `selectSize` instead of `size` to avoid a type conflict with the
 	// `size` HTML attribute of the `select` element.
 	selectSize?: SelectControlProps[ 'size' ];
@@ -45,11 +46,14 @@ const fontSizeStyles = ( { selectSize = 'default' }: SelectProps ) => {
 	`;
 };
 
-const sizeStyles = ( { selectSize = 'default' }: SelectProps ) => {
+const sizeStyles = ( {
+	__next36pxDefaultSize,
+	selectSize = 'default',
+}: SelectProps ) => {
 	const sizes = {
 		default: {
-			height: 30,
-			minHeight: 30,
+			height: 36,
+			minHeight: 36,
 			paddingTop: 0,
 			paddingBottom: 0,
 		},
@@ -67,16 +71,28 @@ const sizeStyles = ( { selectSize = 'default' }: SelectProps ) => {
 		},
 	};
 
-	const style = sizes[ selectSize ];
+	if ( ! __next36pxDefaultSize ) {
+		sizes.default = {
+			height: 30,
+			minHeight: 30,
+			paddingTop: 0,
+			paddingBottom: 0,
+		};
+	}
+
+	const style = sizes[ selectSize ] || sizes.default;
 
 	return css( style );
 };
 
-const sizePaddings = ( { selectSize = 'default' }: SelectProps ) => {
+const sizePaddings = ( {
+	__next36pxDefaultSize,
+	selectSize = 'default',
+}: SelectProps ) => {
 	const sizes = {
 		default: {
-			paddingLeft: 8,
-			paddingRight: 24,
+			paddingLeft: 16,
+			paddingRight: 32,
 		},
 		small: {
 			paddingLeft: 8,
@@ -87,7 +103,15 @@ const sizePaddings = ( { selectSize = 'default' }: SelectProps ) => {
 			paddingRight: 32,
 		},
 	};
-	return rtl( sizes[ selectSize ] );
+
+	if ( ! __next36pxDefaultSize ) {
+		sizes.default = {
+			paddingLeft: 8,
+			paddingRight: 24,
+		};
+	}
+
+	return rtl( sizes[ selectSize ] || sizes.default );
 };
 
 // TODO: Resolve need to use &&& to increase specificity

package/src/select-control/test/select-control.tsx

@@ -1,21 +1,29 @@
 /**
  * External dependencies
  */
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
 import SelectControl from '..';
 
+const setupUser = () =>
+	userEvent.setup( {
+		advanceTimers: jest.advanceTimersByTime,
+	} );
+
 describe( 'SelectControl', () => {
 	it( 'should not render when no options or children are provided', () => {
-		const { container } = render( <SelectControl /> );
+		render( <SelectControl /> );
 
-		expect( container.firstChild ).toBeNull();
+		// use `queryByRole` to avoid throwing an error with `getByRole`
+		expect( screen.queryByRole( 'combobox' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should not render its children', async () => {
+		const user = setupUser();
 		const handleChangeMock = jest.fn();
 
 		render(
@@ -30,13 +38,12 @@ describe( 'SelectControl', () => {
 			</SelectControl>
 		);
 
-		expect( screen.getByText( 'Option 1' ) ).toBeInTheDocument();
+		expect(
+			screen.getByRole( 'option', { name: 'Option 1' } )
+		).toBeInTheDocument();
 
-		const selectElement = screen.getByLabelText( 'Select' );
-
-		fireEvent.change( selectElement, {
-			target: { value: 'option-group-option-1' },
-		} );
+		const selectElement = screen.getByRole( 'combobox' );
+		await user.selectOptions( selectElement, 'option-group-option-1' );
 
 		expect( handleChangeMock ).toHaveBeenCalledWith(
 			'option-group-option-1',
@@ -45,6 +52,7 @@ describe( 'SelectControl', () => {
 	} );
 
 	it( 'should not render its options', async () => {
+		const user = setupUser();
 		const handleChangeMock = jest.fn();
 
 		render(
@@ -66,13 +74,12 @@ describe( 'SelectControl', () => {
 			/>
 		);
 
-		expect( screen.getByText( 'Option 1' ) ).toBeInTheDocument();
-
-		const selectElement = screen.getByLabelText( 'Select' );
+		expect(
+			screen.getByRole( 'option', { name: 'Option 1' } )
+		).toBeInTheDocument();
 
-		fireEvent.change( selectElement, {
-			target: { value: 'option-2' },
-		} );
+		const selectElement = screen.getByRole( 'combobox' );
+		await user.selectOptions( selectElement, 'option-2' );
 
 		expect( handleChangeMock ).toHaveBeenCalledWith(
 			'option-2',

package/src/select-control/types.ts

@@ -12,6 +12,7 @@ import type { BaseControlProps } from '../base-control/types';
 export interface SelectControlProps
 	extends Pick<
 			InputBaseProps,
+			| '__next36pxDefaultSize'
 			| 'disabled'
 			| 'hideLabelFromVision'
 			| 'label'

package/src/shortcut/index.tsx

@@ -0,0 +1,32 @@
+/**
+ * Internal dependencies
+ */
+import type { ShortcutProps } from './types';
+
+function Shortcut( props: ShortcutProps ) {
+	const { shortcut, className } = props;
+
+	if ( ! shortcut ) {
+		return null;
+	}
+
+	let displayText;
+	let ariaLabel;
+
+	if ( typeof shortcut === 'string' ) {
+		displayText = shortcut;
+	}
+
+	if ( shortcut !== null && typeof shortcut === 'object' ) {
+		displayText = shortcut.display;
+		ariaLabel = shortcut.ariaLabel;
+	}
+
+	return (
+		<span className={ className } aria-label={ ariaLabel }>
+			{ displayText }
+		</span>
+	);
+}
+
+export default Shortcut;

package/src/shortcut/test/__snapshots__/index.tsx.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Shortcut renders passed className 1`] = `
+<span
+  class="my-class"
+>
+  shortcut text
+</span>
+`;
+
+exports[`Shortcut renders the shortcut display text when a string is passed as the shortcut 1`] = `
+<span>
+  shortcut text
+</span>
+`;

package/src/shortcut/test/index.tsx

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import Shortcut from '..';
+
+describe( 'Shortcut', () => {
+	it( 'does not render anything if no shortcut prop is provided', () => {
+		const { container } = render( <Shortcut /> );
+		expect( container.firstChild ).toBe( null );
+	} );
+
+	it( 'renders the shortcut display text when a string is passed as the shortcut', () => {
+		render( <Shortcut shortcut="shortcut text" /> );
+		expect( screen.getByText( 'shortcut text' ) ).toMatchSnapshot();
+	} );
+
+	it( 'renders the shortcut display text and aria-label when an object is passed as the shortcut with the correct properties', () => {
+		render(
+			<Shortcut
+				shortcut={ {
+					display: 'shortcut text',
+					ariaLabel: 'shortcut label',
+				} }
+			/>
+		);
+
+		expect( screen.getByLabelText( 'shortcut label' ) ).toHaveTextContent(
+			'shortcut text'
+		);
+	} );
+
+	it( 'renders passed className', () => {
+		render( <Shortcut shortcut="shortcut text" className="my-class" /> );
+		expect( screen.getByText( 'shortcut text' ) ).toMatchSnapshot();
+	} );
+} );

package/src/shortcut/types.ts

@@ -0,0 +1,10 @@
+export type ShortcutProps = {
+	/**
+	 * Classname to apply to the shortcut.
+	 */
+	className?: string;
+	/**
+	 * Shortcut configuration
+	 */
+	shortcut?: string | { display: string; ariaLabel: string };
+};

package/src/slot-fill/index.native.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { omit } from 'lodash';
-
 /**
  * Internal dependencies
  */
@@ -12,8 +7,8 @@ import Provider from './provider';
 
 export { Fill, Provider };
 
-export function Slot( props ) {
-	return <BaseSlot { ...omit( props, 'bubblesVirtually' ) } />;
+export function Slot( { bubblesVirtually, ...restProps } ) {
+	return <BaseSlot { ...restProps } />;
 }
 
 export function createSlotFill( name ) {

package/src/slot-fill/provider.js

@@ -1,9 +1,4 @@
 // @ts-nocheck
-/**
- * External dependencies
- */
-import { without } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -78,7 +73,8 @@ export default class SlotFillProvider extends Component {
 	}
 
 	unregisterFill( name, instance ) {
-		this.fills[ name ] = without( this.fills[ name ], instance );
+		this.fills[ name ] =
+			this.fills[ name ]?.filter( ( fill ) => fill !== instance ) ?? [];
 		this.forceUpdateSlot( name );
 	}
 
@@ -115,7 +111,7 @@ export default class SlotFillProvider extends Component {
 		this.listeners.push( listener );
 
 		return () => {
-			this.listeners = without( this.listeners, listener );
+			this.listeners = this.listeners.filter( ( l ) => l !== listener );
 		};
 	}
 

package/src/slot-fill/slot.js

@@ -1,9 +1,4 @@
 // @ts-nocheck
-/**
- * External dependencies
- */
-import { isString, map } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -72,25 +67,27 @@ class SlotComponent extends Component {
 	render() {
 		const { children, name, fillProps = {}, getFills } = this.props;
 
-		const fills = map( getFills( name, this ), ( fill ) => {
-			const fillChildren = isFunction( fill.children )
-				? fill.children( fillProps )
-				: fill.children;
-
-			return Children.map( fillChildren, ( child, childIndex ) => {
-				if ( ! child || isString( child ) ) {
-					return child;
-				}
-
-				const childKey = child.key || childIndex;
-				return cloneElement( child, { key: childKey } );
-			} );
-		} ).filter(
-			// In some cases fills are rendered only when some conditions apply.
-			// This ensures that we only use non-empty fills when rendering, i.e.,
-			// it allows us to render wrappers only when the fills are actually present.
-			( element ) => ! isEmptyElement( element )
-		);
+		const fills = ( getFills( name, this ) ?? [] )
+			.map( ( fill ) => {
+				const fillChildren = isFunction( fill.children )
+					? fill.children( fillProps )
+					: fill.children;
+
+				return Children.map( fillChildren, ( child, childIndex ) => {
+					if ( ! child || typeof child === 'string' ) {
+						return child;
+					}
+
+					const childKey = child.key || childIndex;
+					return cloneElement( child, { key: childKey } );
+				} );
+			} )
+			.filter(
+				// In some cases fills are rendered only when some conditions apply.
+				// This ensures that we only use non-empty fills when rendering, i.e.,
+				// it allows us to render wrappers only when the fills are actually present.
+				( element ) => ! isEmptyElement( element )
+			);
 
 		return <>{ isFunction( children ) ? children( fills ) : fills }</>;
 	}

package/src/slot-fill/test/slot.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { isEmpty } from 'lodash';
 import { render, fireEvent } from '@testing-library/react';
 
 /**
@@ -120,9 +119,9 @@ describe( 'Slot', () => {
 				<div>
 					<Slot name="chicken">
 						{ ( fills ) =>
-							! isEmpty( fills ) && (
+							[ ...fills ].length ? (
 								<blockquote>{ fills }</blockquote>
-							)
+							) : null
 						}
 					</Slot>
 				</div>

package/src/spacer/README.md

@@ -33,87 +33,93 @@ function Example() {
 
 ## Props
 
-### `margin`: `number`
-
-Adjusts all margins.
-
-- Required: No
-
-### `marginY`: `number`
+### `children`: `ReactNode`
 
-Adjusts top and bottom margins, potentially overriding the value from the more generic `margin` prop.
-
-- Required: No
-
-### `marginX`: `number`
-
-Adjusts left and right margins, potentially overriding the value from the more generic `margin` prop.
+The children elements.
 
-- Required: No
+-   Required: No
 
-### `marginTop`: `number`
+### `margin`: `number`
 
-Adjusts top margin, potentially overriding the value from the more generic `margin` and `marginY` props.
+Adjusts all margins.
 
-- Required: No
+-   Required: No
 
 ### `marginBottom`: `number`
 
 Adjusts bottom margin, potentially overriding the value from the more generic `margin` and `marginY` props.
 
-- Required: No
-- Default: `2`
+-   Required: No
+-   Default: `2`
 
 ### `marginLeft`: `number`
 
 Adjusts left margin, potentially overriding the value from the more generic `margin` and `marginX` props.
 
-- Required: No
+-   Required: No
 
 ### `marginRight`: `number`
 
 Adjusts right margin, potentially overriding the value from the more generic `margin` and `marginX` props.
 
-- Required: No
+-   Required: No
 
-### `padding`: `number`
+### `marginTop`: `number`
 
-Adjusts all padding.
+Adjusts top margin, potentially overriding the value from the more generic `margin` and `marginY` props.
 
-- Required: No
+-   Required: No
 
-### `paddingY`: `number`
+### `marginX`: `number`
 
-Adjusts top and bottom padding, potentially overriding the value from the more generic `padding` prop.
+Adjusts left and right margins, potentially overriding the value from the more generic `margin` prop.
 
-- Required: No
+-   Required: No
 
-### `paddingX`: `number`
+### `marginY`: `number`
 
-Adjusts left and right padding, potentially overriding the value from the more generic `padding` prop.
+Adjusts top and bottom margins, potentially overriding the value from the more generic `margin` prop.
 
-- Required: No
+-   Required: No
 
-### `paddingTop`: `number`
+### `padding`: `number`
 
-Adjusts top padding, potentially overriding the value from the more generic `padding` and `paddingY` props.
+Adjusts all padding.
 
-- Required: No
+-   Required: No
 
 ### `paddingBottom`: `number`
 
 Adjusts bottom padding, potentially overriding the value from the more generic `padding` and `paddingY` props.
 
-- Required: No
+-   Required: No
 
 ### `paddingLeft`: `number`
 
 Adjusts left padding, potentially overriding the value from the more generic `padding` and `paddingX` props.
 
-- Required: No
+-   Required: No
 
 ### `paddingRight`: `number`
 
 Adjusts right padding, potentially overriding the value from the more generic `padding` and `paddingX` props.
 
-- Required: No
+-   Required: No
+
+### `paddingTop`: `number`
+
+Adjusts top padding, potentially overriding the value from the more generic `padding` and `paddingY` props.
+
+-   Required: No
+
+### `paddingX`: `number`
+
+Adjusts left and right padding, potentially overriding the value from the more generic `padding` prop.
+
+-   Required: No
+
+### `paddingY`: `number`
+
+Adjusts top and bottom padding, potentially overriding the value from the more generic `padding` prop.
+
+-   Required: No

package/src/spacer/component.tsx

@@ -9,10 +9,10 @@ import type { ForwardedRef } from 'react';
 import { contextConnect, WordPressComponentProps } from '../ui/context';
 import { View } from '../view';
 import { useSpacer } from './hook';
-import type { Props } from './types';
+import type { SpacerProps } from './types';
 
-function Spacer(
-	props: WordPressComponentProps< Props, 'div' >,
+function UnconnectedSpacer(
+	props: WordPressComponentProps< SpacerProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const spacerProps = useSpacer( props );
@@ -23,9 +23,10 @@ function Spacer(
 /**
  * `Spacer` is a primitive layout component that providers inner (`padding`) or outer (`margin`) space in-between components. It can also be used to adaptively provide space within an `HStack` or `VStack`.
  *
- * `Spacer` comes with a bunch of shorthand props to adjust `margin` and `padding`. The values of these props work as a multiplier to the library's grid system (base of `4px`).
+ * `Spacer` comes with a bunch of shorthand props to adjust `margin` and `padding`. The values of these props
+ * can either be a number (which will act as a multiplier to the library's grid system base of 4px),
+ * or a literal CSS value string.
  *
- * @example
  * ```jsx
  * import { Spacer } from `@wordpress/components`
  *
@@ -43,6 +44,6 @@ function Spacer(
  * }
  * ```
  */
-const ConnectedSpacer = contextConnect( Spacer, 'Spacer' );
+export const Spacer = contextConnect( UnconnectedSpacer, 'Spacer' );
 
-export default ConnectedSpacer;
+export default Spacer;

package/src/spacer/hook.ts

@@ -9,12 +9,14 @@ import { css } from '@emotion/react';
 import { useContextSystem, WordPressComponentProps } from '../ui/context';
 import { space } from '../ui/utils/space';
 import { rtl, useCx } from '../utils';
-import type { Props } from './types';
+import type { SpacerProps } from './types';
 
 const isDefined = < T >( o: T ): o is Exclude< T, null | undefined > =>
 	typeof o !== 'undefined' && o !== null;
 
-export function useSpacer( props: WordPressComponentProps< Props, 'div' > ) {
+export function useSpacer(
+	props: WordPressComponentProps< SpacerProps, 'div' >
+) {
 	const {
 		className,
 		margin,

package/src/spacer/index.ts

@@ -1,3 +1,3 @@
 export { default as Spacer } from './component';
 export { useSpacer } from './hook';
-export type { Props as SpacerProps } from './types';
+export type { SpacerProps } from './types';

package/src/spacer/stories/index.tsx

@@ -0,0 +1,70 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Spacer } from '..';
+
+const controls = [
+	'margin',
+	'marginY',
+	'marginX',
+	'marginTop',
+	'marginBottom',
+	'marginLeft',
+	'marginRight',
+
+	'padding',
+	'paddingY',
+	'paddingX',
+	'paddingTop',
+	'paddingBottom',
+	'paddingLeft',
+	'paddingRight',
+].reduce(
+	( acc, prop ) => ( { ...acc, [ prop ]: { control: { type: 'text' } } } ),
+	{}
+);
+
+const meta: ComponentMeta< typeof Spacer > = {
+	component: Spacer,
+	title: 'Components (Experimental)/Spacer',
+	argTypes: {
+		as: { control: { type: 'text' } },
+		children: {
+			control: { type: 'text' },
+		},
+		...controls,
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const BlackBox = () => (
+	<div
+		style={ { backgroundColor: 'black', width: '100px', height: '100px' } }
+	/>
+);
+
+const Template: ComponentStory< typeof Spacer > = ( { onChange, ...args } ) => {
+	return (
+		<>
+			<BlackBox />
+			<Spacer { ...args } />
+			<BlackBox />
+		</>
+	);
+};
+
+export const Default: ComponentStory< typeof Spacer > = Template.bind( {} );
+Default.args = {
+	children: 'This is the spacer',
+};

package/src/spacer/test/__snapshots__/{index.js.snap → index.tsx.snap}

@@ -39,6 +39,7 @@ exports[`props should render correctly 1`] = `
 
 <div
   class="components-spacer emotion-0 emotion-1"
+  data-testid="spacer"
   data-wp-c16t="true"
   data-wp-component="Spacer"
 />