@wordpress/components 19.15.0 → 20.0.0

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -8,6 +13,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';
@@ -25,13 +31,27 @@ import {
 	isSimpleCssValue,
 	CUSTOM_FONT_SIZE,
 } from './utils';
+import { VStack } from '../v-stack';
+import { HStack } from '../h-stack';
+
+// This conditional is needed to maintain the spacing before the slider in the `withSlider` case.
+const MaybeVStack = ( { __nextHasNoMarginBottom, children } ) =>
+	! __nextHasNoMarginBottom ? (
+		children
+	) : (
+		<VStack spacing={ 6 } children={ children } />
+	);
 
 function FontSizePicker(
 	{
+		/** Start opting into the new margin-free styles that will become the default in a future version. */
+		__nextHasNoMarginBottom = false,
 		fallbackFontSize,
 		fontSizes = [],
 		disableCustomFontSizes = false,
 		onChange,
+		/** @type {'default' | '__unstable-large'} */
+		size = 'default',
 		value,
 		withSlider = false,
 		withReset = true,
@@ -52,7 +72,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(
@@ -60,15 +80,9 @@ function FontSizePicker(
 			getFontSizeOptions(
 				shouldUseSelectControl,
 				fontSizes,
-				disableCustomFontSizes,
-				fontSizesContainComplexValues
+				disableCustomFontSizes
 			),
-		[
-			shouldUseSelectControl,
-			fontSizes,
-			disableCustomFontSizes,
-			fontSizesContainComplexValues,
-		]
+		[ shouldUseSelectControl, fontSizes, disableCustomFontSizes ]
 	);
 	const selectedOption = getSelectedOption( fontSizes, value );
 	const isCustomValue = selectedOption.slug === CUSTOM_FONT_SIZE;
@@ -91,6 +105,7 @@ function FontSizePicker(
 				`(${ selectedOption?.size })`
 			);
 		}
+
 		// Calculate the `hint` for toggle group control.
 		let hint = selectedOption.name;
 		if (
@@ -126,147 +141,160 @@ function FontSizePicker(
 	return (
 		<fieldset className={ baseClassName } { ...( ref ? {} : { ref } ) }>
 			<VisuallyHidden as="legend">{ __( 'Font size' ) }</VisuallyHidden>
-			<Flex
-				justify="space-between"
-				className={ `${ baseClassName }__header` }
-			>
-				<FlexItem>
+			<HStack className={ `${ baseClassName }__header` }>
+				<BaseControl.VisualLabel>
 					{ __( 'Size' ) }
 					{ headerHint && (
 						<span className={ `${ baseClassName }__header__hint` }>
 							{ headerHint }
 						</span>
 					) }
-				</FlexItem>
+				</BaseControl.VisualLabel>
 				{ ! disableCustomFontSizes && (
-					<FlexItem>
-						<Button
-							label={
-								showCustomValueControl
-									? __( 'Use size preset' )
-									: __( 'Set custom size' )
-							}
-							icon={ settings }
-							onClick={ () => {
-								setShowCustomValueControl(
-									! showCustomValueControl
-								);
-							} }
-							isPressed={ showCustomValueControl }
-							isSmall
-						/>
-					</FlexItem>
+					<Button
+						label={
+							showCustomValueControl
+								? __( 'Use size preset' )
+								: __( 'Set custom size' )
+						}
+						icon={ settings }
+						onClick={ () => {
+							setShowCustomValueControl(
+								! showCustomValueControl
+							);
+						} }
+						isPressed={ showCustomValueControl }
+						isSmall
+					/>
 				) }
-			</Flex>
-			<div className={ `${ baseClassName }__controls` }>
-				{ !! fontSizes.length &&
-					shouldUseSelectControl &&
-					! showCustomValueControl && (
-						<CustomSelectControl
-							className={ `${ baseClassName }__select` }
+			</HStack>
+			<MaybeVStack __nextHasNoMarginBottom={ __nextHasNoMarginBottom }>
+				<div
+					className={ classNames( `${ baseClassName }__controls`, {
+						'is-next-has-no-margin-bottom': __nextHasNoMarginBottom,
+					} ) }
+				>
+					{ !! fontSizes.length &&
+						shouldUseSelectControl &&
+						! showCustomValueControl && (
+							<CustomSelectControl
+								__nextUnconstrainedWidth
+								className={ `${ baseClassName }__select` }
+								label={ __( 'Font size' ) }
+								hideLabelFromVision
+								describedBy={ currentFontSizeSR }
+								options={ options }
+								value={ options.find(
+									( option ) =>
+										option.key === selectedOption.slug
+								) }
+								onChange={ ( { selectedItem } ) => {
+									onChange(
+										hasUnits
+											? selectedItem.size
+											: Number( selectedItem.size )
+									);
+									if (
+										selectedItem.key === CUSTOM_FONT_SIZE
+									) {
+										setShowCustomValueControl( true );
+									}
+								} }
+								size={ size }
+							/>
+						) }
+					{ ! shouldUseSelectControl && ! showCustomValueControl && (
+						<ToggleGroupControl
+							__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 							label={ __( 'Font size' ) }
 							hideLabelFromVision
-							describedBy={ currentFontSizeSR }
-							options={ options }
-							value={ options.find(
-								( option ) => option.key === selectedOption.slug
-							) }
-							onChange={ ( { selectedItem } ) => {
+							value={ value }
+							onChange={ ( newValue ) => {
 								onChange(
-									hasUnits
-										? selectedItem.size
-										: Number( selectedItem.size )
+									hasUnits ? newValue : Number( newValue )
 								);
-								if ( selectedItem.key === CUSTOM_FONT_SIZE ) {
-									setShowCustomValueControl( true );
-								}
 							} }
-						/>
-					) }
-				{ ! shouldUseSelectControl && ! showCustomValueControl && (
-					<ToggleGroupControl
-						label={ __( 'Font size' ) }
-						hideLabelFromVision
-						value={ value }
-						onChange={ ( newValue ) => {
-							onChange(
-								hasUnits ? newValue : Number( newValue )
-							);
-						} }
-						isBlock
-					>
-						{ options.map( ( option ) => (
-							<ToggleGroupControlOption
-								key={ option.key }
-								value={ option.value }
-								label={ option.label }
-								aria-label={ option.name }
-								showTooltip={ true }
-							/>
-						) ) }
-					</ToggleGroupControl>
-				) }
-				{ ! withSlider &&
-					! disableCustomFontSizes &&
-					showCustomValueControl && (
-						<Flex
-							justify="space-between"
-							className={ `${ baseClassName }__custom-size-control` }
+							isBlock
+							size={ size }
 						>
-							<FlexItem isBlock>
-								<UnitControl
-									label={ __( 'Custom' ) }
-									labelPosition="top"
-									hideLabelFromVision
-									value={ value }
-									onChange={ ( nextSize ) => {
-										if (
-											0 === parseFloat( nextSize ) ||
-											! nextSize
-										) {
-											onChange( undefined );
-										} else {
-											onChange(
-												hasUnits
-													? nextSize
-													: parseInt( nextSize, 10 )
-											);
-										}
-									} }
-									units={ hasUnits ? units : [] }
+							{ options.map( ( option ) => (
+								<ToggleGroupControlOption
+									key={ option.key }
+									value={ option.value }
+									label={ option.label }
+									aria-label={ option.name }
+									showTooltip={ true }
 								/>
-							</FlexItem>
-							{ withReset && (
+							) ) }
+						</ToggleGroupControl>
+					) }
+					{ ! withSlider &&
+						! disableCustomFontSizes &&
+						showCustomValueControl && (
+							<Flex
+								justify="space-between"
+								className={ `${ baseClassName }__custom-size-control` }
+							>
 								<FlexItem isBlock>
-									<Button
-										className="components-color-palette__clear"
-										disabled={ value === undefined }
-										onClick={ () => {
-											onChange( undefined );
+									<UnitControl
+										label={ __( 'Custom' ) }
+										labelPosition="top"
+										hideLabelFromVision
+										value={ value }
+										onChange={ ( nextSize ) => {
+											if (
+												0 === parseFloat( nextSize ) ||
+												! nextSize
+											) {
+												onChange( undefined );
+											} else {
+												onChange(
+													hasUnits
+														? nextSize
+														: parseInt(
+																nextSize,
+																10
+														  )
+												);
+											}
 										} }
-										isSmall
-										variant="secondary"
-									>
-										{ __( 'Reset' ) }
-									</Button>
+										size={ size }
+										units={ hasUnits ? units : [] }
+									/>
 								</FlexItem>
-							) }
-						</Flex>
-					) }
-			</div>
-			{ withSlider && (
-				<RangeControl
-					className={ `${ baseClassName }__custom-input` }
-					label={ __( 'Custom Size' ) }
-					value={ ( isPixelValue && noUnitsValue ) || '' }
-					initialPosition={ fallbackFontSize }
-					onChange={ ( newValue ) => {
-						onChange( hasUnits ? newValue + 'px' : newValue );
-					} }
-					min={ 12 }
-					max={ 100 }
-				/>
-			) }
+								{ withReset && (
+									<FlexItem isBlock>
+										<Button
+											className="components-color-palette__clear"
+											disabled={ value === undefined }
+											onClick={ () => {
+												onChange( undefined );
+											} }
+											isSmall
+											variant="secondary"
+										>
+											{ __( 'Reset' ) }
+										</Button>
+									</FlexItem>
+								) }
+							</Flex>
+						) }
+				</div>
+				{ withSlider && (
+					<RangeControl
+						__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+						className={ `${ baseClassName }__custom-input` }
+						label={ __( 'Custom Size' ) }
+						value={ ( isPixelValue && noUnitsValue ) || '' }
+						initialPosition={ fallbackFontSize }
+						onChange={ ( newValue ) => {
+							onChange( hasUnits ? newValue + 'px' : newValue );
+						} }
+						min={ 12 }
+						max={ 100 }
+					/>
+				) }
+			</MaybeVStack>
 		</fieldset>
 	);
 }

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

@@ -12,11 +12,18 @@ export default {
 	title: 'Components/FontSizePicker',
 	component: FontSizePicker,
 	argTypes: {
+		__nextHasNoMarginBottom: { control: { type: 'boolean' } },
 		initialValue: { table: { disable: true } }, // hide prop because it's not actually part of FontSizePicker
 		fallbackFontSize: {
 			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/font-size-picker/style.scss

@@ -4,6 +4,10 @@
 		color: $gray-700;
 	}
 
+	.components-base-control__label {
+		margin-bottom: 0;
+	}
+
 	// This button is inheriting padding and min-width.
 	// @todo: we should refactor it to not need to unset this.
 	.components-button.is-small.has-icon:not(.has-text) {
@@ -16,7 +20,10 @@
 	max-width: $sidebar-width - ( 2 * $grid-unit-20 );
 	align-items: center;
 	margin-top: $grid-unit-10;
-	margin-bottom: $grid-unit-30;
+
+	&:not(.is-next-has-no-margin-bottom) {
+		margin-bottom: $grid-unit-30;
+	}
 
 	.components-unit-control-wrapper {
 		.components-input-control__label {
@@ -26,10 +33,6 @@
 		}
 	}
 
-	.components-custom-select-control__button {
-		width: 100%;
-	}
-
 	// Apply the same height as the isSmall Reset button.
 	.components-font-size-picker__number {
 		@include input-control;

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

@@ -193,7 +193,7 @@ describe( 'FontSizePicker', () => {
 			expect( element ).toHaveLength( fontSizes.length + 2 );
 		} );
 		describe( 'segmented control', () => {
-			it( 'should use numeric labels for simple css values', () => {
+			it( 'should use t-shirt labels for simple css values', () => {
 				const fontSizes = [ ...options ];
 				render(
 					<FontSizePicker
@@ -203,9 +203,9 @@ describe( 'FontSizePicker', () => {
 				);
 				const element = screen.getByLabelText( 'Large' );
 				expect( element ).toBeInTheDocument();
-				expect( element.children[ 0 ].textContent ).toBe( '1.7' );
+				expect( element.children[ 0 ].textContent ).toBe( 'L' );
 			} );
-			it( 'should use incremental sequence of numbers as labels if we have complex css', () => {
+			it( 'should use incremental sequence of t-shirt sizes as labels if we have complex css', () => {
 				const fontSizes = [
 					...options,
 					{
@@ -220,9 +220,16 @@ describe( 'FontSizePicker', () => {
 						value={ fontSizes[ 0 ].size }
 					/>
 				);
-				const element = screen.getByLabelText( 'Large' );
-				expect( element ).toBeInTheDocument();
-				expect( element.children[ 0 ].textContent ).toBe( '3' );
+				const largeElement = screen.getByLabelText( 'Large' );
+				expect( largeElement ).toBeInTheDocument();
+				expect( largeElement ).toHaveTextContent( 'L' );
+
+				const extraLargeElement =
+					screen.getByLabelText( 'Extra Large' );
+				expect( extraLargeElement ).toBeInTheDocument();
+				expect( extraLargeElement.children[ 0 ].textContent ).toBe(
+					'XL'
+				);
 			} );
 		} );
 	} );

package/src/font-size-picker/test/{util.js → utils.js}

@@ -1,7 +1,11 @@
 /**
  * Internal dependencies
  */
-import { isSimpleCssValue, splitValueAndUnitFromSize } from '../utils';
+import {
+	isSimpleCssValue,
+	splitValueAndUnitFromSize,
+	getToggleGroupOptions,
+} from '../utils';
 
 const simpleCSSCases = [
 	// Test integers and non-integers.
@@ -72,3 +76,75 @@ describe( 'splitValueAndUnitFromSize', () => {
 		}
 	);
 } );
+
+describe( 'getToggleGroupOptions', () => {
+	test( 'should assign t-shirt sizes by default up until the aliases length', () => {
+		const optionsArray = [
+			{
+				slug: '1',
+				size: '1',
+				name: '1',
+			},
+			{
+				slug: '2',
+				size: '2',
+				name: '2',
+			},
+			{
+				slug: '3',
+				size: '3',
+				name: '3',
+			},
+			{
+				slug: '4',
+				size: '4',
+				name: '4',
+			},
+			{
+				slug: '5',
+				size: '5',
+				name: '5',
+			},
+		];
+		expect(
+			getToggleGroupOptions( optionsArray, [
+				'S',
+				'M',
+				'L',
+				'XL',
+				'XXL',
+			] )
+		).toEqual( [
+			{
+				key: '1',
+				value: '1',
+				label: 'S',
+				name: '1',
+			},
+			{
+				key: '2',
+				value: '2',
+				label: 'M',
+				name: '2',
+			},
+			{
+				key: '3',
+				value: '3',
+				label: 'L',
+				name: '3',
+			},
+			{
+				key: '4',
+				value: '4',
+				label: 'XL',
+				name: '4',
+			},
+			{
+				key: '5',
+				value: '5',
+				label: 'XXL',
+				name: '5',
+			},
+		] );
+	} );
+} );

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

@@ -15,13 +15,22 @@ const CUSTOM_FONT_SIZE_OPTION = {
 };
 
 /**
- * In case we have at most five font sizes, where at least one the them
- * contain a complex css value(clamp, var, etc..) show a incremental sequence
- * of numbers as a label of the font size. We do this because complex css values
- * cannot be caluclated properly and the incremental sequence of numbers as labels
- * can help the user better mentally map the different available font sizes.
+ * In case we have at most five font sizes, show a `T-shirt size`
+ * alias as a label of the font size. The label assumes that the font sizes
+ * are ordered accordingly - from smallest to largest.
  */
-const FONT_SIZES_ALIASES = [ '1', '2', '3', '4', '5' ];
+const FONT_SIZES_ALIASES = [
+	/* translators: S stands for 'small' and is a size label. */
+	__( 'S' ),
+	/* translators: M stands for 'medium' and is a size label. */
+	__( 'M' ),
+	/* translators: L stands for 'large' and is a size label. */
+	__( 'L' ),
+	/* translators: XL stands for 'extra large' and is a size label. */
+	__( 'XL' ),
+	/* translators: XXL stands for 'extra extra large' and is a size label. */
+	__( 'XXL' ),
+];
 
 /**
  * Helper util to split a font size to its numeric value
@@ -56,24 +65,22 @@ export function isSimpleCssValue( value ) {
  * Return font size options in the proper format depending
  * on the currently used control (select, toggle group).
  *
- * @param {boolean}  useSelectControl               Whether to use a select control.
- * @param {Object[]} optionsArray                   Array of available font sizes objects.
- * @param {*}        disableCustomFontSizes         Flag that indicates if custom font sizes are disabled.
- * @param {boolean}  optionsContainComplexCssValues Whether font sizes contain at least one complex css value(clamp, var, etc..).
- * @return {Object[]|null} Array of font sizes in proper format for the used control.
+ * @param {boolean}  useSelectControl       Whether to use a select control.
+ * @param {Object[]} optionsArray           Array of available font sizes objects.
+ * @param {boolean}  disableCustomFontSizes Flag that indicates if custom font sizes are disabled.
+ * @return {Object[]|null}                  Array of font sizes in proper format for the used control.
  */
 export function getFontSizeOptions(
 	useSelectControl,
 	optionsArray,
-	disableCustomFontSizes,
-	optionsContainComplexCssValues
+	disableCustomFontSizes
 ) {
 	if ( disableCustomFontSizes && ! optionsArray.length ) {
 		return null;
 	}
 	return useSelectControl
 		? getSelectOptions( optionsArray, disableCustomFontSizes )
-		: getToggleGroupOptions( optionsArray, optionsContainComplexCssValues );
+		: getToggleGroupOptions( optionsArray );
 }
 
 function getSelectOptions( optionsArray, disableCustomFontSizes ) {
@@ -91,16 +98,24 @@ function getSelectOptions( optionsArray, disableCustomFontSizes ) {
 	} ) );
 }
 
-function getToggleGroupOptions( optionsArray, optionsContainComplexCssValues ) {
+/**
+ * Build options for the toggle group options.
+ *
+ * @param {Array}    optionsArray An array of font size options.
+ * @param {string[]} labelAliases An array of alternative labels.
+ * @return {Array}   Remapped optionsArray.
+ */
+export function getToggleGroupOptions(
+	optionsArray,
+	labelAliases = FONT_SIZES_ALIASES
+) {
 	return optionsArray.map( ( { slug, size, name }, index ) => {
-		let label = optionsContainComplexCssValues
-			? FONT_SIZES_ALIASES[ index ]
-			: size;
-		if ( ! optionsContainComplexCssValues && typeof size === 'string' ) {
-			const [ numericValue ] = splitValueAndUnitFromSize( size );
-			label = numericValue;
-		}
-		return { key: slug, value: size, label, name };
+		return {
+			key: slug,
+			value: size,
+			label: labelAliases[ index ],
+			name,
+		};
 	} );
 }
 

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

@@ -56,9 +56,11 @@ 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.
+-   `__experimentalAutoSelectFirstMatch` - If true, the select the first matching suggestion when the user presses the Enter key (or space when tokenizeOnSpace is true).
 
 ## Usage
 
@@ -78,7 +80,7 @@ const continents = [
 const MyFormTokenField = () => {
 	const [ selectedContinents, setSelectedContinents ] = useState( [] );
 
-	return(
+	return (
 		<FormTokenField
 			value={ selectedContinents }
 			suggestions={ continents }