@wordpress/components 19.14.0 → 19.17.0

package/src/focal-point-picker/styles/focal-point-picker-style.js

@@ -12,14 +12,12 @@ import { COLORS } from '../../utils';
 
 export const MediaWrapper = styled.div`
 	background-color: transparent;
-	box-sizing: border-box;
 	text-align: center;
 	width: 100%;
 `;
 
 export const MediaContainer = styled.div`
 	align-items: center;
-	box-sizing: border-box;
 	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.2 );
 	cursor: pointer;
 	display: inline-flex;
@@ -44,7 +42,6 @@ export const MediaContainer = styled.div`
 
 export const MediaPlaceholder = styled.div`
 	background: ${ COLORS.lightGray[ 300 ] };
-	box-sizing: border-box;
 	height: 170px;
 	max-width: 280px;
 	min-width: 200px;
@@ -61,7 +58,6 @@ export const ControlWrapper = styled( Flex )`
 `;
 
 export const GridView = styled.div`
-	box-sizing: border-box;
 	left: 50%;
 	opacity: 0;
 	overflow: hidden;
@@ -80,7 +76,6 @@ export const GridView = styled.div`
 `;
 
 export const GridLine = styled.div`
-	box-sizing: border-box;
 	background: white;
 	box-shadow: 0 0 2px rgba( 0, 0, 0, 0.6 );
 	position: absolute;

package/src/focal-point-picker/styles/focal-point-style.js

@@ -15,7 +15,6 @@ import { COLORS } from '../../utils';
 
 export const FocalPointWrapper = styled.div`
 	background-color: transparent;
-	box-sizing: border-box;
 	cursor: grab;
 	height: 30px;
 	margin: -15px 0 0 -15px;

package/src/focal-point-picker/tooltip/index.native.js

@@ -66,18 +66,17 @@ function Label( { align, text, xOffset, yOffset } ) {
 	}
 
 	useEffect( () => {
+		const startAnimation = () => {
+			Animated.timing( animationValue, {
+				toValue: visible ? 1 : 0,
+				duration: visible ? 300 : 150,
+				useNativeDriver: true,
+				delay: visible ? 500 : 0,
+				easing: Easing.out( Easing.quad ),
+			} ).start();
+		};
 		startAnimation();
-	}, [ visible ] );
-
-	const startAnimation = () => {
-		Animated.timing( animationValue, {
-			toValue: visible ? 1 : 0,
-			duration: visible ? 300 : 150,
-			useNativeDriver: true,
-			delay: visible ? 500 : 0,
-			easing: Easing.out( Easing.quad ),
-		} ).start();
-	};
+	}, [ animationValue, visible ] );
 
 	// Transforms rely upon onLayout to enable custom offsets additions.
 	let tooltipTransforms;

package/src/font-size-picker/index.js

@@ -8,6 +8,7 @@ import { useState, useMemo, forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import { BaseControl } from '../base-control';
 import Button from '../button';
 import RangeControl from '../range-control';
 import { Flex, FlexItem } from '../flex';
@@ -32,6 +33,8 @@ function FontSizePicker(
 		fontSizes = [],
 		disableCustomFontSizes = false,
 		onChange,
+		/** @type {'default' | '__unstable-large'} */
+		size = 'default',
 		value,
 		withSlider = false,
 		withReset = true,
@@ -52,7 +55,7 @@ function FontSizePicker(
 	 * than six and a select control when they are more.
 	 */
 	const fontSizesContainComplexValues = fontSizes.some(
-		( { size } ) => ! isSimpleCssValue( size )
+		( { size: sizeArg } ) => ! isSimpleCssValue( sizeArg )
 	);
 	const shouldUseSelectControl = fontSizes.length > 5;
 	const options = useMemo(
@@ -131,12 +134,16 @@ function FontSizePicker(
 				className={ `${ baseClassName }__header` }
 			>
 				<FlexItem>
-					{ __( 'Size' ) }
-					{ headerHint && (
-						<span className={ `${ baseClassName }__header__hint` }>
-							{ headerHint }
-						</span>
-					) }
+					<BaseControl.VisualLabel>
+						{ __( 'Size' ) }
+						{ headerHint && (
+							<span
+								className={ `${ baseClassName }__header__hint` }
+							>
+								{ headerHint }
+							</span>
+						) }
+					</BaseControl.VisualLabel>
 				</FlexItem>
 				{ ! disableCustomFontSizes && (
 					<FlexItem>
@@ -163,6 +170,7 @@ function FontSizePicker(
 					shouldUseSelectControl &&
 					! showCustomValueControl && (
 						<CustomSelectControl
+							__nextUnconstrainedWidth
 							className={ `${ baseClassName }__select` }
 							label={ __( 'Font size' ) }
 							hideLabelFromVision
@@ -181,6 +189,7 @@ function FontSizePicker(
 									setShowCustomValueControl( true );
 								}
 							} }
+							size={ size }
 						/>
 					) }
 				{ ! shouldUseSelectControl && ! showCustomValueControl && (
@@ -194,6 +203,7 @@ function FontSizePicker(
 							);
 						} }
 						isBlock
+						size={ size }
 					>
 						{ options.map( ( option ) => (
 							<ToggleGroupControlOption
@@ -233,6 +243,7 @@ function FontSizePicker(
 											);
 										}
 									} }
+									size={ size }
 									units={ hasUnits ? units : [] }
 								/>
 							</FlexItem>

package/src/font-size-picker/stories/index.js

@@ -17,6 +17,12 @@ export default {
 			description:
 				'If no value exists, this prop defines the starting position for the font size picker slider. Only relevant if `withSlider` is `true`.',
 		},
+		size: {
+			control: {
+				type: 'radio',
+				options: [ 'default', '__unstable-large' ],
+			},
+		},
 		withReset: {
 			description:
 				'If `true`, a reset button will be displayed alongside the input field when a custom font size is active. Has no effect when `disableCustomFontSizes` or `withSlider` is `true`.',

package/src/form-token-field/README.md

@@ -56,6 +56,7 @@ The `value` property is handled in a manner similar to controlled form component
     -   `removed` - The user removed an existing token.
     -   `remove` - The user focused the button to remove the token.
     -   `__experimentalInvalid` - The user tried to add a token that didn't pass the validation.
+-   `__experimentalRenderItem` - Custom renderer invoked for each option in the suggestion list. The render prop receives as its argument an object containing, under the `item` key, the single option's data (directly from the array of data passed to the `options` prop).
 -   `__experimentalExpandOnFocus` - If true, the suggestions list will be always expanded when the input field has the focus.
 -   `__experimentalShowHowTo` - If false, the text on how to use the select (ie: _Separate with commas or the Enter key._) will be hidden.
 -   `__experimentalValidateInput` - If passed, all introduced values will be validated before being added as tokens.
@@ -78,7 +79,7 @@ const continents = [
 const MyFormTokenField = () => {
 	const [ selectedContinents, setSelectedContinents ] = useState( [] );
 
-	return(
+	return (
 		<FormTokenField
 			value={ selectedContinents }
 			suggestions={ continents }

package/src/form-token-field/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { last, clone, uniq, map, difference, identity, some } from 'lodash';
+import { last, clone, uniq, map, difference, some } from 'lodash';
 import classnames from 'classnames';
 import type { KeyboardEvent, MouseEvent, TouchEvent } from 'react';
 
@@ -30,8 +30,13 @@ import isShallowEqual from '@wordpress/is-shallow-equal';
  */
 import Token from './token';
 import TokenInput from './token-input';
+import { TokensAndInputWrapperFlex } from './styles';
 import SuggestionsList from './suggestions-list';
 import type { FormTokenFieldProps, TokenItem } from './types';
+import { FlexItem } from '../flex';
+import { StyledLabel } from '../base-control/styles/base-control-styles';
+
+const identity = ( value: string ) => value;
 
 /**
  * A `FormTokenField` is a field similar to the tags and categories fields in the interim editor chrome,
@@ -68,9 +73,11 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 			remove: __( 'Remove item' ),
 			__experimentalInvalid: __( 'Invalid item' ),
 		},
+		__experimentalRenderItem,
 		__experimentalExpandOnFocus = false,
 		__experimentalValidateInput = () => true,
 		__experimentalShowHowTo = true,
+		__next36pxDefaultSize = false,
 	} = props;
 
 	const instanceId = useInstanceId( FormTokenField );
@@ -566,28 +573,35 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		const termsCount = tokens.length;
 
 		return (
-			<Token
-				key={ 'token-' + _value }
-				value={ _value }
-				status={ status }
-				title={ typeof token !== 'string' ? token.title : undefined }
-				displayTransform={ displayTransform }
-				onClickRemove={ onTokenClickRemove }
-				isBorderless={
-					( typeof token !== 'string' && token.isBorderless ) ||
-					isBorderless
-				}
-				onMouseEnter={
-					typeof token !== 'string' ? token.onMouseEnter : undefined
-				}
-				onMouseLeave={
-					typeof token !== 'string' ? token.onMouseLeave : undefined
-				}
-				disabled={ 'error' !== status && disabled }
-				messages={ messages }
-				termsCount={ termsCount }
-				termPosition={ termPosition }
-			/>
+			<FlexItem key={ 'token-' + _value }>
+				<Token
+					value={ _value }
+					status={ status }
+					title={
+						typeof token !== 'string' ? token.title : undefined
+					}
+					displayTransform={ displayTransform }
+					onClickRemove={ onTokenClickRemove }
+					isBorderless={
+						( typeof token !== 'string' && token.isBorderless ) ||
+						isBorderless
+					}
+					onMouseEnter={
+						typeof token !== 'string'
+							? token.onMouseEnter
+							: undefined
+					}
+					onMouseLeave={
+						typeof token !== 'string'
+							? token.onMouseLeave
+							: undefined
+					}
+					disabled={ 'error' !== status && disabled }
+					messages={ messages }
+					termsCount={ termsCount }
+					termPosition={ termPosition }
+				/>
+			</FlexItem>
 		);
 	}
 
@@ -647,12 +661,12 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 	/* eslint-disable jsx-a11y/no-static-element-interactions */
 	return (
 		<div { ...tokenFieldProps }>
-			<label
+			<StyledLabel
 				htmlFor={ `components-form-token-input-${ instanceId }` }
 				className="components-form-token-field__label"
 			>
 				{ label }
-			</label>
+			</StyledLabel>
 			<div
 				ref={ tokensAndInput }
 				className={ classes }
@@ -660,7 +674,16 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 				onMouseDown={ onContainerTouched }
 				onTouchStart={ onContainerTouched }
 			>
-				{ renderTokensAndInput() }
+				<TokensAndInputWrapperFlex
+					justify="flex-start"
+					align="center"
+					gap={ 1 }
+					wrap={ true }
+					__next36pxDefaultSize={ __next36pxDefaultSize }
+					hasTokens={ !! value.length }
+				>
+					{ renderTokensAndInput() }
+				</TokensAndInputWrapperFlex>
 				{ isExpanded && (
 					<SuggestionsList
 						instanceId={ instanceId }
@@ -671,6 +694,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 						scrollIntoView={ selectedSuggestionScroll }
 						onHover={ onSuggestionHovered }
 						onSelect={ onSuggestionSelected }
+						__experimentalRenderItem={ __experimentalRenderItem }
 					/>
 				) }
 			</div>

package/src/form-token-field/stories/index.tsx

@@ -101,3 +101,17 @@ Async.args = {
 	label: 'Type a continent',
 	suggestions: continents,
 };
+
+/**
+ * The rendered output of each suggestion can be customized by passing a
+ * render function to the `__experimentalRenderItem` prop. (This is still an experimental feature
+ * and is subject to change.)
+ */
+export const WithCustomRenderItem: ComponentStory< typeof FormTokenField > =
+	DefaultTemplate.bind( {} );
+WithCustomRenderItem.args = {
+	...Default.args,
+	__experimentalRenderItem: ( { item } ) => (
+		<div>{ `${ item } — a nice place to visit` }</div>
+	),
+};

package/src/form-token-field/style.scss

@@ -1,14 +1,10 @@
 .components-form-token-field__input-container {
 	@include input-control();
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
 	width: 100%;
 	margin: 0 0 $grid-unit-10 0;
-	padding: $grid-unit-05*0.5 $grid-unit-05;
+	padding: 0;
 	cursor: text;
 
-
 	&.is-disabled {
 		background: $gray-300;
 		border-color: $gray-300;
@@ -52,11 +48,6 @@
 	}
 }
 
-.components-form-token-field__label {
-	display: inline-block;
-	margin-bottom: $grid-unit-10;
-}
-
 .components-form-token-field__help {
 	font-size: $helptext-font-size;
 	font-style: normal;
@@ -67,7 +58,6 @@
 .components-form-token-field__token {
 	font-size: $default-font-size;
 	display: flex;
-	margin: 2px 4px 2px 0;
 	color: $gray-900;
 	max-width: 100%;
 
@@ -180,7 +170,7 @@
 	@include reduce-motion("transition");
 	list-style: none;
 	border-top: $border-width solid $gray-700;
-	margin: $grid-unit-05 (-$grid-unit-05) (-$grid-unit-05);
+	margin: 0;
 	padding: 0;
 }
 

package/src/form-token-field/styles.ts

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+/**
+ * Internal dependencies
+ */
+import { Flex } from '../flex';
+import { space } from '../ui/utils/space';
+
+type TokensAndInputWrapperProps = {
+	__next36pxDefaultSize: boolean;
+	hasTokens: boolean;
+};
+
+const deprecatedPaddings = ( {
+	__next36pxDefaultSize,
+	hasTokens,
+}: TokensAndInputWrapperProps ) =>
+	! __next36pxDefaultSize &&
+	css`
+		padding-top: ${ space( hasTokens ? 1 : 0.5 ) };
+		padding-bottom: ${ space( hasTokens ? 1 : 0.5 ) };
+	`;
+
+export const TokensAndInputWrapperFlex = styled( Flex )`
+	padding: 5px ${ space( 1 ) };
+
+	${ deprecatedPaddings }
+`;

package/src/form-token-field/suggestions-list.tsx

@@ -4,7 +4,7 @@
 import { map } from 'lodash';
 import scrollView from 'dom-scroll-into-view';
 import classnames from 'classnames';
-import type { MouseEventHandler } from 'react';
+import type { MouseEventHandler, ReactNode } from 'react';
 
 /**
  * WordPress dependencies
@@ -17,8 +17,6 @@ import { useRefEffect } from '@wordpress/compose';
  */
 import type { SuggestionsListProps } from './types';
 
-const { setTimeout, clearTimeout } = window;
-
 const handleMouseDown: MouseEventHandler = ( e ) => {
 	// By preventing default here, we will not lose focus of <input> when clicking a suggestion.
 	e.preventDefault();
@@ -33,6 +31,7 @@ export function SuggestionsList< T extends string | { value: string } >( {
 	suggestions = [],
 	displayTransform,
 	instanceId,
+	__experimentalRenderItem,
 }: SuggestionsListProps< T > ) {
 	const [ scrollingIntoView, setScrollingIntoView ] = useState( false );
 
@@ -54,14 +53,14 @@ export function SuggestionsList< T extends string | { value: string } >( {
 						onlyScrollIfNeeded: true,
 					}
 				);
-				id = setTimeout( () => {
+				id = window.setTimeout( () => {
 					setScrollingIntoView( false );
 				}, 100 );
 			}
 
 			return () => {
 				if ( id !== undefined ) {
-					clearTimeout( id );
+					window.clearTimeout( id );
 				}
 			};
 		},
@@ -124,6 +123,24 @@ export function SuggestionsList< T extends string | { value: string } >( {
 					}
 				);
 
+				let output: ReactNode;
+
+				if ( typeof __experimentalRenderItem === 'function' ) {
+					output = __experimentalRenderItem( { item: suggestion } );
+				} else if ( matchText ) {
+					output = (
+						<span aria-label={ displayTransform( suggestion ) }>
+							{ matchText.suggestionBeforeMatch }
+							<strong className="components-form-token-field__suggestion-match">
+								{ matchText.suggestionMatch }
+							</strong>
+							{ matchText.suggestionAfterMatch }
+						</span>
+					);
+				} else {
+					output = displayTransform( suggestion );
+				}
+
 				/* eslint-disable jsx-a11y/click-events-have-key-events */
 				return (
 					<li
@@ -141,17 +158,7 @@ export function SuggestionsList< T extends string | { value: string } >( {
 						onMouseEnter={ handleHover( suggestion ) }
 						aria-selected={ index === selectedIndex }
 					>
-						{ matchText ? (
-							<span aria-label={ displayTransform( suggestion ) }>
-								{ matchText.suggestionBeforeMatch }
-								<strong className="components-form-token-field__suggestion-match">
-									{ matchText.suggestionMatch }
-								</strong>
-								{ matchText.suggestionAfterMatch }
-							</span>
-						) : (
-							displayTransform( suggestion )
-						) }
+						{ output }
 					</li>
 				);
 				/* eslint-enable jsx-a11y/click-events-have-key-events */

package/src/form-token-field/test/index.js

@@ -162,7 +162,7 @@ describe( 'FormTokenField', () => {
 			);
 		} );
 
-		it( 'should show suggestions when when input is empty if expandOnFocus is set to true', () => {
+		it( 'should show suggestions when input is empty if expandOnFocus is set to true', () => {
 			setUp( { __experimentalExpandOnFocus: true } );
 			wrapper.setState( {
 				isExpanded: true,

package/src/form-token-field/types.ts

@@ -1,7 +1,11 @@
 /**
  * External dependencies
  */
-import type { ComponentPropsWithRef, MouseEventHandler } from 'react';
+import type {
+	ComponentPropsWithRef,
+	MouseEventHandler,
+	ReactNode,
+} from 'react';
 
 type Messages = {
 	/**
@@ -147,9 +151,25 @@ export interface FormTokenFieldProps
 	 * @default true
 	 */
 	__experimentalShowHowTo?: boolean;
+	/**
+	 * Start opting into the larger default height that will become the
+	 * default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next36pxDefaultSize?: boolean;
+	/**
+	 * Custom renderer for suggestions.
+	 */
+	__experimentalRenderItem?: ( args: { item: string } ) => ReactNode;
 }
 
-export interface SuggestionsListProps< T = string | { value: string } > {
+/**
+ * `T` can be either a `string` or an object which must have a `value` prop as a string.
+ */
+export interface SuggestionsListProps<
+	T = string | ( Record< string, unknown > & { value: string } )
+> {
 	selectedIndex: number;
 	scrollIntoView: boolean;
 	match: T;
@@ -158,6 +178,7 @@ export interface SuggestionsListProps< T = string | { value: string } > {
 	suggestions: T[];
 	displayTransform: ( value: T ) => string;
 	instanceId: string | number;
+	__experimentalRenderItem?: ( args: { item: T } ) => ReactNode;
 }
 
 export interface TokenProps extends TokenItem {

package/src/grid/README.md

@@ -27,56 +27,70 @@ function Example() {
 
 ## Props
 
-##### align
-
-**Type**: `CSS['alignItems']`
+##### `align`: `CSS['alignItems']`
 
 Adjusts the block alignment of children.
 
-##### alignment
+-   Required: No
 
-**Type**: `GridAlignment`
+##### `alignment`: `GridAlignment`
 
 Adjusts the horizontal and vertical alignment of children.
 
-##### columns
+-   Required: No
+
+##### `columnGap`: `CSSProperties['gridColumnGap']`
+
+Adjusts the `grid-column-gap`.
+
+-   Required: No
 
-**Type**: `number`,`(number`,`null)[]`
+##### `columns`: `number`
 
 Adjusts the number of columns of the `Grid`.
 
-##### gap
+-   Required: No
+-   Default: `2`
 
-**Type**: `number`
+##### `gap`: `number`
 
 Gap between each child.
 
-##### isInline
+-   Required: No
+-   Default: `3`
 
-**Type**: `boolean`
+##### `isInline`: `boolean`
 
 Changes the CSS display from `grid` to `inline-grid`.
 
-##### justify
+-   Required: No
 
-**Type**: `CSS['justifyContent']`
+##### `justify`: `CSS['justifyContent']`
 
 Adjusts the inline alignment of children.
 
-##### rows
+-   Required: No
 
-**Type**: `number`,`(number`,`null)[]`
+##### `rowGap`: `CSSProperties['gridRowGap']`
+
+Adjusts the `grid-row-gap`.
+
+-   Required: No
+
+##### `rows`: `number`
 
 Adjusts the number of rows of the `Grid`.
 
-##### templateColumns
+-   Required: No
 
-**Type**: `CSS['gridTemplateColumns']`
+##### `templateColumns`: `CSS['gridTemplateColumns']`
 
 Adjusts the CSS grid `template-columns`.
 
-##### templateRows
+-   Required: No
 
-**Type**: `CSS['gridTemplateRows']`
+##### `templateRows`: `CSS['gridTemplateRows']`
 
 Adjusts the CSS grid `template-rows`.
+
+-   Required: No