@wordpress/components 19.15.0 → 20.0.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';
 
@@ -10,16 +9,16 @@ import type { ChangeEvent, FocusEvent, ForwardedRef } from 'react';
  */
 import { useInstanceId } from '@wordpress/compose';
 import { useState, forwardRef } from '@wordpress/element';
-import { Icon, chevronDown } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import BaseControl from '../base-control';
 import InputBase from '../input-control/input-base';
-import { Select, DownArrowWrapper } from './styles/select-control-styles';
+import { Select } from './styles/select-control-styles';
 import type { WordPressComponentProps } from '../ui/context';
 import type { SelectControlProps } from './types';
+import SelectControlChevronDown from './chevron-down';
 
 const noop = () => {};
 
@@ -49,6 +48,7 @@ function UnforwardedSelectControl(
 		children,
 		prefix,
 		suffix,
+		__next36pxDefaultSize = false,
 		__nextHasNoMarginBottom = false,
 		...props
 	}: WordPressComponentProps< SelectControlProps, 'select', false >,
@@ -59,7 +59,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 );
@@ -101,18 +101,14 @@ function UnforwardedSelectControl(
 				isFocused={ isFocused }
 				label={ label }
 				size={ size }
-				suffix={
-					suffix || (
-						<DownArrowWrapper>
-							<Icon icon={ chevronDown } size={ 18 } />
-						</DownArrowWrapper>
-					)
-				}
+				suffix={ suffix || <SelectControlChevronDown /> }
 				prefix={ prefix }
 				labelPosition={ labelPosition }
+				__next36pxDefaultSize={ __next36pxDefaultSize }
 			>
 				<Select
 					{ ...props }
+					__next36pxDefaultSize={ __next36pxDefaultSize }
 					aria-describedby={ helpId }
 					className="components-select-control__input"
 					disabled={ disabled }

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

@@ -8,9 +8,12 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import { COLORS, rtl } from '../../utils';
+import { space } from '../../ui/utils/space';
 import type { SelectControlProps } from '../types';
+import InputControlSuffixWrapper from '../../input-control/input-suffix-wrapper';
 
-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 +48,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,27 +73,51 @@ 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 ) => {
+export const chevronIconSize = 18;
+
+const sizePaddings = ( {
+	__next36pxDefaultSize,
+	selectSize = 'default',
+}: SelectProps ) => {
+	const iconWidth = chevronIconSize;
+
 	const sizes = {
 		default: {
-			paddingLeft: 8,
-			paddingRight: 24,
+			paddingLeft: 16,
+			paddingRight: 16 + iconWidth,
 		},
 		small: {
 			paddingLeft: 8,
-			paddingRight: 24,
+			paddingRight: 8 + iconWidth,
 		},
 		'__unstable-large': {
 			paddingLeft: 16,
-			paddingRight: 32,
+			paddingRight: 16 + iconWidth,
 		},
 	};
-	return rtl( sizes[ selectSize ] );
+
+	if ( ! __next36pxDefaultSize ) {
+		sizes.default = {
+			paddingLeft: 8,
+			paddingRight: 8 + iconWidth,
+		};
+	}
+
+	return rtl( sizes[ selectSize ] || sizes.default );
 };
 
 // TODO: Resolve need to use &&& to increase specificity
@@ -105,6 +135,11 @@ export const Select = styled.select< SelectProps >`
 		font-family: inherit;
 		margin: 0;
 		width: 100%;
+		max-width: none;
+		cursor: pointer;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
 
 		${ disabledStyles };
 		${ fontSizeStyles };
@@ -114,18 +149,15 @@ export const Select = styled.select< SelectProps >`
 `;
 
 export const DownArrowWrapper = styled.div`
-	align-items: center;
-	bottom: 0;
-	box-sizing: border-box;
-	display: flex;
-	padding: 0 4px;
-	pointer-events: none;
+	margin-inline-end: ${ space( -1 ) }; // optically adjust the icon
+	line-height: 0;
+`;
+
+export const InputControlSuffixWrapperWithClickThrough = styled(
+	InputControlSuffixWrapper
+)`
 	position: absolute;
-	top: 0;
+	pointer-events: none;
 
 	${ rtl( { right: 0 } ) }
-
-	svg {
-		display: block;
-	}
 `;

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.js → index.tsx}

@@ -1,15 +1,11 @@
-/** @typedef {string | { display: string, ariaLabel: string }} Shortcut */
 /**
- * @typedef Props
- * @property {Shortcut} shortcut    Shortcut configuration
- * @property {string}   [className] Classname
+ * Internal dependencies
  */
+import type { ShortcutProps } from './types';
+
+function Shortcut( props: ShortcutProps ) {
+	const { shortcut, className } = props;
 
-/**
- * @param {Props} props Props
- * @return {JSX.Element | null} Element
- */
-function Shortcut( { shortcut, className } ) {
 	if ( ! shortcut ) {
 		return null;
 	}

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/test/slot.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -95,7 +95,7 @@ describe( 'Slot', () => {
 	it( 'calls the functions passed as the Slot’s fillProps in the Fill', () => {
 		const onClose = jest.fn();
 
-		const { getByText } = render(
+		render(
 			<Provider>
 				<Slot name="chicken" fillProps={ { onClose } } />
 				<Fill name="chicken">
@@ -108,7 +108,7 @@ describe( 'Slot', () => {
 			</Provider>
 		);
 
-		fireEvent.click( getByText( 'Click me' ) );
+		fireEvent.click( screen.getByText( 'Click me' ) );
 
 		expect( onClose ).toHaveBeenCalledTimes( 1 );
 	} );
@@ -150,7 +150,7 @@ describe( 'Slot', () => {
 	} );
 
 	it( 'should re-render Slot when not bubbling virtually', () => {
-		const { container, getByRole } = render(
+		const { container } = render(
 			<Provider>
 				<div>
 					<Slot name="egg" />
@@ -161,7 +161,7 @@ describe( 'Slot', () => {
 
 		expect( container ).toMatchSnapshot();
 
-		fireEvent.click( getByRole( 'button' ) );
+		fireEvent.click( screen.getByRole( 'button' ) );
 
 		expect( container ).toMatchSnapshot();
 	} );

package/src/snackbar/list.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -67,6 +66,8 @@ function SnackbarList( { notices, className, children, onRemove = noop } ) {
 			{ children }
 			<AnimatePresence>
 				{ notices.map( ( notice ) => {
+					const { content, ...restNotice } = notice;
+
 					return (
 						<motion.div
 							layout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations
@@ -82,7 +83,7 @@ function SnackbarList( { notices, className, children, onRemove = noop } ) {
 						>
 							<div className="components-snackbar-list__notice-container">
 								<Snackbar
-									{ ...omit( notice, [ 'content' ] ) }
+									{ ...restNotice }
 									onRemove={ removeNotice( notice ) }
 									listRef={ listRef }
 								>

package/src/spacer/component.tsx

@@ -23,7 +23,9 @@ function UnconnectedSpacer(
 /**
  * `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.
  *
  * ```jsx
  * import { Spacer } from `@wordpress/components`

package/src/spinner/index.tsx

@@ -23,6 +23,8 @@ export function UnforwardedSpinner(
 		<StyledSpinner
 			className={ classNames( 'components-spinner', className ) }
 			viewBox="0 0 100 100"
+			width="16"
+			height="16"
 			xmlns="http://www.w3.org/2000/svg"
 			role="presentation"
 			focusable="false"

package/src/style-provider/index.tsx

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+import memoize from 'memize';
+import * as uuid from 'uuid';
+
+/**
+ * Internal dependencies
+ */
+import type { StyleProviderProps } from './types';
+
+const uuidCache = new Set();
+
+const memoizedCreateCacheWithContainer = memoize(
+	( container: HTMLElement ) => {
+		// Emotion only accepts alphabetical and hyphenated keys so we just
+		// strip the numbers from the UUID. It _should_ be fine.
+		let key = uuid.v4().replace( /[0-9]/g, '' );
+		while ( uuidCache.has( key ) ) {
+			key = uuid.v4().replace( /[0-9]/g, '' );
+		}
+		uuidCache.add( key );
+		return createCache( { container, key } );
+	}
+);
+
+export function StyleProvider( props: StyleProviderProps ) {
+	const { children, document } = props;
+
+	if ( ! document ) {
+		return null;
+	}
+
+	const cache = memoizedCreateCacheWithContainer( document.head );
+
+	return <CacheProvider value={ cache }>{ children }</CacheProvider>;
+}
+
+export default StyleProvider;

package/src/style-provider/types.ts

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export type StyleProviderProps = {
+	/**
+	 * The children elements.
+	 */
+	children: ReactNode;
+	/**
+	 * Current document.
+	 */
+	document: Document;
+};

package/src/style.scss

@@ -11,7 +11,6 @@
 @import "./color-palette/style.scss";
 @import "./custom-gradient-picker/style.scss";
 @import "./custom-select-control/style.scss";
-@import "./date-time/style.scss";
 @import "./dimension-control/style.scss";
 @import "./draggable/style.scss";
 @import "./drop-zone/style.scss";
@@ -39,7 +38,6 @@
 @import "./search-control/style.scss";
 @import "./select-control/style.scss";
 @import "./snackbar/style.scss";
-@import "./swatch/style.scss";
 @import "./tab-panel/style.scss";
 @import "./text-control/style.scss";
 @import "./tip/style.scss";

package/src/text/hook.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { css } from '@emotion/react';
-import { isPlainObject } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -167,8 +166,11 @@ export default function useText( props ) {
 	 */
 	if ( ! truncate && Array.isArray( children ) ) {
 		content = Children.map( children, ( child ) => {
-			// @ts-ignore
-			if ( ! isPlainObject( child ) || ! ( 'props' in child ) ) {
+			if (
+				typeof child !== 'object' ||
+				child === null ||
+				! ( 'props' in child )
+			) {
 				return child;
 			}
 

package/src/text/styles.js

@@ -27,7 +27,7 @@ export const destructive = css`
 `;
 
 export const muted = css`
-	color: ${ COLORS.mediumGray.text };
+	color: ${ COLORS.gray[ 700 ] };
 `;
 
 export const highlighterText = css`

package/src/text/test/index.tsx

@@ -53,7 +53,7 @@ describe( 'Text', () => {
 			<Text variant="muted">Lorem ipsum.</Text>
 		);
 		expect( container.firstChild ).toHaveStyle( {
-			color: COLORS.mediumGray.text,
+			color: COLORS.gray[ 700 ],
 		} );
 	} );
 

package/src/toggle-group-control/stories/index.tsx

@@ -0,0 +1,127 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { formatLowercase, formatUppercase } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import {
+	ToggleGroupControl,
+	ToggleGroupControlOption,
+	ToggleGroupControlOptionIcon,
+} from '../index';
+import type {
+	ToggleGroupControlOptionProps,
+	ToggleGroupControlOptionIconProps,
+	ToggleGroupControlProps,
+} from '../types';
+
+const meta: ComponentMeta< typeof ToggleGroupControl > = {
+	component: ToggleGroupControl,
+	title: 'Components (Experimental)/ToggleGroupControl',
+	subcomponents: { ToggleGroupControlOption, ToggleGroupControlOptionIcon },
+	argTypes: {
+		help: { control: { type: 'text' } },
+		onChange: { action: 'onChange' },
+		value: { control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof ToggleGroupControl > = ( {
+	onChange,
+	...props
+} ) => {
+	const [ value, setValue ] =
+		useState< ToggleGroupControlProps[ 'value' ] >();
+
+	return (
+		<ToggleGroupControl
+			{ ...props }
+			onChange={ ( ...changeArgs ) => {
+				setValue( ...changeArgs );
+				onChange?.( ...changeArgs );
+			} }
+			value={ value }
+		/>
+	);
+};
+
+const mapPropsToOptionComponent = ( {
+	value,
+	...props
+}: ToggleGroupControlOptionProps ) => (
+	<ToggleGroupControlOption value={ value } key={ value } { ...props } />
+);
+
+const mapPropsToOptionIconComponent = ( {
+	value,
+	...props
+}: ToggleGroupControlOptionIconProps ) => (
+	<ToggleGroupControlOptionIcon value={ value } key={ value } { ...props } />
+);
+
+export const Default: ComponentStory< typeof ToggleGroupControl > =
+	Template.bind( {} );
+Default.args = {
+	children: [
+		{ value: 'left', label: 'Left' },
+		{ value: 'center', label: 'Center' },
+		{ value: 'right', label: 'Right' },
+		{ value: 'justify', label: 'Justify' },
+	].map( mapPropsToOptionComponent ),
+	label: 'Label',
+};
+
+/**
+ * A tooltip can be shown for each option by enabling the `showTooltip` prop.
+ * The `aria-label` will be used in the tooltip if provided. Otherwise, the
+ * `label` will be used.
+ */
+export const WithTooltip: ComponentStory< typeof ToggleGroupControl > =
+	Template.bind( {} );
+WithTooltip.args = {
+	...Default.args,
+	children: [
+		{
+			value: 'asc',
+			label: 'A→Z',
+			'aria-label': 'Ascending',
+			showTooltip: true,
+		},
+		{
+			value: 'desc',
+			label: 'Z→A',
+			'aria-label': 'Descending',
+			showTooltip: true,
+		},
+	].map( mapPropsToOptionComponent ),
+};
+
+/**
+ * The `ToggleGroupControlOptionIcon` component can be used for icon options. A `label` is required
+ * on each option for accessibility, which will be shown in a tooltip.
+ *
+ * When using icon options within `ToggleGroupControl`, the `__experimentalIsIconGroup` style is preferred.
+ */
+export const WithIcons: ComponentStory< typeof ToggleGroupControl > =
+	Template.bind( {} );
+WithIcons.args = {
+	...Default.args,
+	__experimentalIsIconGroup: true,
+	children: [
+		{ value: 'uppercase', label: 'Uppercase', icon: formatUppercase },
+		{ value: 'lowercase', label: 'Lowercase', icon: formatLowercase },
+	].map( mapPropsToOptionIconComponent ),
+};