@wordpress/components 21.1.2-next.4d3b314fd5.0 → 21.3.0

package/src/font-size-picker/stories/{index.js → index.tsx}

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
 /**
  * WordPress dependencies
  */
@@ -8,53 +13,48 @@ import { useState } from '@wordpress/element';
  */
 import FontSizePicker from '../';
 
-export default {
+const meta: ComponentMeta< typeof FontSizePicker > = {
 	title: 'Components/FontSizePicker',
 	component: FontSizePicker,
 	argTypes: {
-		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`.',
-			control: { type: 'boolean' },
-			table: {
-				type: 'boolean',
-				defaultValue: { summary: true },
-			},
-		},
+		value: { control: { type: null } },
 	},
 	parameters: {
+		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
 		docs: { source: { state: 'open' } },
 	},
 };
+export default meta;
 
-const FontSizePickerWithState = ( { initialValue, ...props } ) => {
-	const [ fontSize, setFontSize ] = useState( initialValue );
+const FontSizePickerWithState: ComponentStory< typeof FontSizePicker > = ( {
+	value,
+	onChange,
+	...props
+} ) => {
+	const [ fontSize, setFontSize ] = useState( value );
 	return (
 		<FontSizePicker
 			{ ...props }
 			value={ fontSize }
-			onChange={ setFontSize }
+			onChange={ ( nextValue ) => {
+				setFontSize( nextValue );
+				onChange?.( nextValue );
+			} }
 		/>
 	);
 };
 
-const TwoFontSizePickersWithState = ( { fontSizes, ...props } ) => {
+const TwoFontSizePickersWithState: ComponentStory< typeof FontSizePicker > = ( {
+	fontSizes,
+	...props
+} ) => {
 	return (
 		<>
 			<h2>Fewer font sizes</h2>
 			<FontSizePickerWithState
 				{ ...props }
-				fontSizes={ fontSizes.slice( 0, 4 ) }
+				fontSizes={ fontSizes?.slice( 0, 4 ) }
 			/>
 
 			<h2>More font sizes</h2>
@@ -63,7 +63,8 @@ const TwoFontSizePickersWithState = ( { fontSizes, ...props } ) => {
 	);
 };
 
-export const Default = FontSizePickerWithState.bind( {} );
+export const Default: ComponentStory< typeof FontSizePicker > =
+	FontSizePickerWithState.bind( {} );
 Default.args = {
 	__nextHasNoMarginBottom: true,
 	disableCustomFontSizes: false,
@@ -84,15 +85,16 @@ Default.args = {
 			size: 26,
 		},
 	],
-	initialValue: 16,
+	value: 16,
 	withSlider: false,
 };
 
-export const WithSlider = FontSizePickerWithState.bind( {} );
+export const WithSlider: ComponentStory< typeof FontSizePicker > =
+	FontSizePickerWithState.bind( {} );
 WithSlider.args = {
 	...Default.args,
 	fallbackFontSize: 16,
-	initialValue: undefined,
+	value: undefined,
 	withSlider: true,
 };
 
@@ -100,7 +102,8 @@ WithSlider.args = {
  * With custom font sizes disabled via the `disableCustomFontSizes` prop, the user will
  * only be able to pick one of the predefined sizes passed in `fontSizes`.
  */
-export const WithCustomSizesDisabled = FontSizePickerWithState.bind( {} );
+export const WithCustomSizesDisabled: ComponentStory< typeof FontSizePicker > =
+	FontSizePickerWithState.bind( {} );
 WithCustomSizesDisabled.args = {
 	...Default.args,
 	disableCustomFontSizes: true,
@@ -109,7 +112,8 @@ WithCustomSizesDisabled.args = {
 /**
  * When there are more than 5 font size options, the UI is no longer a toggle group.
  */
-export const WithMoreFontSizes = FontSizePickerWithState.bind( {} );
+export const WithMoreFontSizes: ComponentStory< typeof FontSizePicker > =
+	FontSizePickerWithState.bind( {} );
 WithMoreFontSizes.args = {
 	...Default.args,
 	fontSizes: [
@@ -144,27 +148,29 @@ WithMoreFontSizes.args = {
 			size: 36,
 		},
 	],
-	initialValue: 8,
+	value: 8,
 };
 
 /**
  * When units like `px` are specified explicitly, it will be shown as a label hint.
  */
-export const WithUnits = TwoFontSizePickersWithState.bind( {} );
+export const WithUnits: ComponentStory< typeof FontSizePicker > =
+	TwoFontSizePickersWithState.bind( {} );
 WithUnits.args = {
 	...WithMoreFontSizes.args,
-	fontSizes: WithMoreFontSizes.args.fontSizes.map( ( option ) => ( {
+	fontSizes: WithMoreFontSizes.args.fontSizes?.map( ( option ) => ( {
 		...option,
 		size: `${ option.size }px`,
 	} ) ),
-	initialValue: '8px',
+	value: '8px',
 };
 
 /**
  * The label hint will not be shown if it is a complex CSS value. Some examples of complex CSS values
  * in this context are CSS functions like `calc()`, `clamp()`, and `var()`.
  */
-export const WithComplexCSSValues = TwoFontSizePickersWithState.bind( {} );
+export const WithComplexCSSValues: ComponentStory< typeof FontSizePicker > =
+	TwoFontSizePickersWithState.bind( {} );
 WithComplexCSSValues.args = {
 	...Default.args,
 	fontSizes: [
@@ -200,5 +206,5 @@ WithComplexCSSValues.args = {
 			size: '2.8rem',
 		},
 	],
-	initialValue: '1.125rem',
+	value: '1.125rem',
 };

package/src/font-size-picker/styles.ts

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * Internal dependencies
+ */
+import BaseControl from '../base-control';
+import Button from '../button';
+import { space } from '../ui/utils/space';
+import { COLORS } from '../utils';
+import type { FontSizePickerProps } from './types';
+
+export const Container = styled.fieldset`
+	border: 0;
+	margin: 0;
+	padding: 0;
+`;
+
+export const HeaderLabel = styled( BaseControl.VisualLabel )`
+	display: flex;
+	gap: ${ space( 1 ) };
+	justify-content: flex-start;
+	margin-bottom: 0;
+`;
+
+export const HeaderHint = styled.span`
+	color: ${ COLORS.gray[ 700 ] };
+`;
+
+export const Controls = styled.div< {
+	__nextHasNoMarginBottom: boolean;
+} >`
+	${ ( props ) =>
+		! props.__nextHasNoMarginBottom && `margin-bottom: ${ space( 6 ) };` }
+`;
+
+export const ResetButton = styled( Button )< {
+	size: FontSizePickerProps[ 'size' ];
+} >`
+	&&& {
+		height: ${ ( props ) =>
+			props.size === '__unstable-large' ? '40px' : '30px' };
+	}
+`;

package/src/font-size-picker/test/{index.js → index.tsx}

@@ -13,7 +13,7 @@ const getUnitSelect = () =>
 const getUnitLabel = () =>
 	document.body.querySelector( '.components-unit-control__unit-label' );
 
-const toggleCustomInput = ( showCustomInput ) => {
+const toggleCustomInput = ( showCustomInput: boolean ) => {
 	const label = showCustomInput ? 'Set custom size' : 'Use size preset';
 	const toggleCustom = screen.getByLabelText( label, { selector: 'button' } );
 	fireEvent.click( toggleCustom );
@@ -215,7 +215,7 @@ describe( 'FontSizePicker', () => {
 				);
 				const element = screen.getByLabelText( 'Large' );
 				expect( element ).toBeInTheDocument();
-				expect( element.children[ 0 ].textContent ).toBe( 'L' );
+				expect( element.children[ 0 ] ).toHaveTextContent( 'L' );
 			} );
 			it( 'should use incremental sequence of t-shirt sizes as labels if we have complex css', () => {
 				const fontSizes = [
@@ -240,7 +240,7 @@ describe( 'FontSizePicker', () => {
 				const extraLargeElement =
 					screen.getByLabelText( 'Extra Large' );
 				expect( extraLargeElement ).toBeInTheDocument();
-				expect( extraLargeElement.children[ 0 ].textContent ).toBe(
+				expect( extraLargeElement.children[ 0 ] ).toHaveTextContent(
 					'XL'
 				);
 			} );

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

@@ -7,7 +7,7 @@ import {
 	getToggleGroupOptions,
 } from '../utils';
 
-const simpleCSSCases = [
+const simpleCSSCases: [ number | string, boolean ][] = [
 	// Test integers and non-integers.
 	[ 1, true ],
 	[ 1.25, true ],
@@ -41,7 +41,11 @@ describe( 'isSimpleCssValue', () => {
 	);
 } );
 
-const splitValuesCases = [
+const splitValuesCases: [
+	number | string,
+	string | undefined,
+	string | undefined
+][] = [
 	// Test integers and non-integers.
 	[ 1, '1', undefined ],
 	[ 1.25, '1.25', undefined ],
@@ -116,33 +120,33 @@ describe( 'getToggleGroupOptions', () => {
 		).toEqual( [
 			{
 				key: '1',
-				value: '1',
 				label: 'S',
 				name: '1',
+				value: '1',
 			},
 			{
 				key: '2',
-				value: '2',
 				label: 'M',
 				name: '2',
+				value: '2',
 			},
 			{
 				key: '3',
-				value: '3',
 				label: 'L',
 				name: '3',
+				value: '3',
 			},
 			{
 				key: '4',
-				value: '4',
 				label: 'XL',
 				name: '4',
+				value: '4',
 			},
 			{
 				key: '5',
-				value: '5',
 				label: 'XXL',
 				name: 'XXL',
+				value: '5',
 			},
 		] );
 	} );

package/src/font-size-picker/types.ts

@@ -0,0 +1,98 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export type FontSizePickerProps = {
+	/**
+	 * If `true`, it will not be possible to choose a custom fontSize. The user
+	 * will be forced to pick one of the pre-defined sizes passed in fontSizes.
+	 *
+	 * @default false
+	 */
+	disableCustomFontSizes?: boolean;
+	/**
+	 * If no value exists, this prop defines the starting position for the font
+	 * size picker slider. Only relevant if `withSlider` is `true`.
+	 */
+	fallbackFontSize?: number;
+	/**
+	 * An array of font size objects. The object should contain properties size,
+	 * name, and slug.
+	 */
+	fontSizes?: FontSize[];
+	/**
+	 * A function that receives the new font size value.
+	 * If onChange is called without any parameter, it should reset the value,
+	 * attending to what reset means in that context, e.g., set the font size to
+	 * undefined or set the font size a starting value.
+	 */
+	onChange?: ( value: number | string | undefined ) => void;
+	/**
+	 * The current font size value.
+	 */
+	value?: number | string;
+	/**
+	 * If `true`, the UI will contain a slider, instead of a numeric text input
+	 * field. If `false`, no slider will be present.
+	 *
+	 * @default false
+	 */
+	withSlider?: boolean;
+	/**
+	 * 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`.
+	 *
+	 * @default true
+	 */
+	withReset?: boolean;
+	/**
+	 * Start opting into the new margin-free styles that will become the default
+	 * in a future version, currently scheduled to be WordPress 6.4. (The prop
+	 * can be safely removed once this happens.)
+	 *
+	 * @default false
+	 */
+	__nextHasNoMarginBottom?: boolean;
+	/**
+	 * Size of the control.
+	 *
+	 * @default default
+	 */
+	size?: 'default' | '__unstable-large';
+};
+
+export type FontSize = {
+	/**
+	 * The property `size` contains a number with the font size value, in `px` or
+	 * a string specifying the font size CSS property that should be used eg:
+	 * "13px", "1em", or "clamp(12px, 5vw, 100px)".
+	 */
+	size: number | string;
+	/**
+	 * The `name` property includes a label for that font size e.g.: `Small`.
+	 */
+	name?: string;
+	/**
+	 * The `slug` property is a string with a unique identifier for the font
+	 * size. Used for the class generation process.
+	 */
+	slug: string;
+};
+
+export type FontSizeOption = Omit< FontSize, 'size' > &
+	Partial< Pick< FontSize, 'size' > >;
+
+export type FontSizeSelectOption = Pick< FontSizeOption, 'size' > & {
+	key: string;
+	name?: string;
+	__experimentalHint: ReactNode;
+};
+
+export type FontSizeToggleGroupOption = {
+	key: string;
+	value: number | string;
+	label: string;
+	name: string;
+};

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

@@ -3,6 +3,17 @@
  */
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import type {
+	FontSize,
+	FontSizeOption,
+	FontSizeSelectOption,
+	FontSizeToggleGroupOption,
+	FontSizePickerProps,
+} from './types';
+
 const DEFAULT_FONT_SIZE = 'default';
 const DEFAULT_FONT_SIZE_OPTION = {
 	slug: DEFAULT_FONT_SIZE,
@@ -36,13 +47,18 @@ const FONT_SIZES_ALIASES = [
  * Helper util to split a font size to its numeric value
  * and its `unit`, if exists.
  *
- * @param {string|number} size Font size.
- * @return {[number, string]} An array with the numeric value and the unit if exists.
+ * @param  size Font size.
+ * @return An array with the numeric value and the unit if exists.
  */
-export function splitValueAndUnitFromSize( size ) {
-	const [ numericValue, unit ] = `${ size }`.match( /[\d\.]+|\D+/g );
+export function splitValueAndUnitFromSize(
+	size: NonNullable< FontSizePickerProps[ 'value' ] >
+) {
+	const [ numericValue, unit ] = `${ size }`.match( /[\d\.]+|\D+/g ) ?? [];
 
-	if ( ! isNaN( parseFloat( numericValue ) ) && isFinite( numericValue ) ) {
+	if (
+		! isNaN( parseFloat( numericValue ) ) &&
+		isFinite( Number( numericValue ) )
+	) {
 		return [ numericValue, unit ];
 	}
 
@@ -53,28 +69,30 @@ export function splitValueAndUnitFromSize( size ) {
  * Some themes use css vars for their font sizes, so until we
  * have the way of calculating them don't display them.
  *
- * @param {string|number} value The value that is checked.
- * @return {boolean} Whether the value is a simple css value.
+ * @param  value The value that is checked.
+ * @return Whether the value is a simple css value.
  */
-export function isSimpleCssValue( value ) {
+export function isSimpleCssValue(
+	value: NonNullable< FontSizePickerProps[ 'value' ] >
+) {
 	const sizeRegex = /^[\d\.]+(px|em|rem|vw|vh|%)?$/i;
-	return sizeRegex.test( value );
+	return sizeRegex.test( String( 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 {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.
+ * @param  useSelectControl       Whether to use a select control.
+ * @param  optionsArray           Array of available font sizes objects.
+ * @param  disableCustomFontSizes Flag that indicates if custom font sizes are disabled.
+ * @return Array of font sizes in proper format for the used control.
  */
 export function getFontSizeOptions(
-	useSelectControl,
-	optionsArray,
-	disableCustomFontSizes
-) {
+	useSelectControl: boolean,
+	optionsArray: FontSize[],
+	disableCustomFontSizes: boolean
+): FontSizeSelectOption[] | FontSizeToggleGroupOption[] | null {
 	if ( disableCustomFontSizes && ! optionsArray.length ) {
 		return null;
 	}
@@ -83,32 +101,35 @@ export function getFontSizeOptions(
 		: getToggleGroupOptions( optionsArray );
 }
 
-function getSelectOptions( optionsArray, disableCustomFontSizes ) {
-	const options = [
+function getSelectOptions(
+	optionsArray: FontSize[],
+	disableCustomFontSizes: boolean
+): FontSizeSelectOption[] {
+	const options: FontSizeOption[] = [
 		DEFAULT_FONT_SIZE_OPTION,
 		...optionsArray,
 		...( disableCustomFontSizes ? [] : [ CUSTOM_FONT_SIZE_OPTION ] ),
 	];
 	return options.map( ( { slug, name, size } ) => ( {
 		key: slug,
-		name,
+		name: name || slug,
 		size,
 		__experimentalHint:
-			size && isSimpleCssValue( size ) && parseFloat( size ),
+			size && isSimpleCssValue( size ) && parseFloat( String( size ) ),
 	} ) );
 }
 
 /**
  * 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.
+ * @param  optionsArray An array of font size options.
+ * @param  labelAliases An array of alternative labels.
+ * @return Remapped optionsArray.
  */
 export function getToggleGroupOptions(
-	optionsArray,
-	labelAliases = FONT_SIZES_ALIASES
-) {
+	optionsArray: FontSize[],
+	labelAliases: string[] = FONT_SIZES_ALIASES
+): FontSizeToggleGroupOption[] {
 	return optionsArray.map( ( { slug, size, name }, index ) => {
 		return {
 			key: slug,
@@ -119,7 +140,10 @@ export function getToggleGroupOptions(
 	} );
 }
 
-export function getSelectedOption( fontSizes, value ) {
+export function getSelectedOption(
+	fontSizes: FontSize[],
+	value: FontSizePickerProps[ 'value' ]
+): FontSizeOption {
 	if ( ! value ) {
 		return DEFAULT_FONT_SIZE_OPTION;
 	}

package/src/form-file-upload/test/index.tsx

@@ -41,7 +41,7 @@ describe( 'FormFileUpload', () => {
 		const button = screen.getByText( 'My Upload Button' );
 		const input = screen.getByTestId( 'form-file-upload-input' );
 		expect( button ).toBeInTheDocument();
-		expect( input.style.display ).toBe( 'none' );
+		expect( input ).toHaveStyle( 'display: none' );
 	} );
 
 	it( 'should not fire a change event after selecting the same file', async () => {

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

@@ -38,7 +38,7 @@ export function SuggestionsList< T extends string | { value: string } >( {
 		( listNode ) => {
 			// only have to worry about scrolling selected suggestion into view
 			// when already expanded.
-			let id: number;
+			let rafId: number | undefined;
 			if (
 				selectedIndex > -1 &&
 				scrollIntoView &&
@@ -52,14 +52,14 @@ export function SuggestionsList< T extends string | { value: string } >( {
 						onlyScrollIfNeeded: true,
 					}
 				);
-				id = window.setTimeout( () => {
+				rafId = requestAnimationFrame( () => {
 					setScrollingIntoView( false );
-				}, 100 );
+				} );
 			}
 
 			return () => {
-				if ( id !== undefined ) {
-					window.clearTimeout( id );
+				if ( rafId !== undefined ) {
+					cancelAnimationFrame( rafId );
 				}
 			};
 		},

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

@@ -2057,7 +2057,12 @@ describe( 'FormTokenField', () => {
 
 			const suggestions = [ 'Pine', 'Pistachio', 'Sage' ];
 
-			render( <FormTokenFieldWithState suggestions={ suggestions } /> );
+			render(
+				<>
+					<FormTokenFieldWithState suggestions={ suggestions } />
+					<button>Click me</button>
+				</>
+			);
 
 			// No suggestions visible
 			const input = screen.getByRole( 'combobox' );
@@ -2093,6 +2098,22 @@ describe( 'FormTokenField', () => {
 				pineSuggestion.id
 			);
 
+			// Blur the input and make sure that the `aria-activedescendant`
+			// is removed
+			const button = screen.getByRole( 'button', { name: 'Click me' } );
+
+			await user.click( button );
+
+			expect( input ).not.toHaveAttribute( 'aria-activedescendant' );
+
+			// Focus the input again, `aria-activedescendant` should be added back.
+			await user.click( input );
+
+			expect( input ).toHaveAttribute(
+				'aria-activedescendant',
+				pineSuggestion.id
+			);
+
 			// Add the suggestion, which hides the list
 			await user.keyboard( '[Enter]' );
 

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

@@ -2,12 +2,12 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import type { ChangeEvent, ForwardedRef } from 'react';
+import type { ChangeEvent, ForwardedRef, FocusEventHandler } from 'react';
 
 /**
  * WordPress dependencies
  */
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -26,9 +26,13 @@ export function UnForwardedTokenInput(
 		selectedSuggestionIndex,
 		className,
 		onChange,
+		onFocus,
+		onBlur,
 		...restProps
 	} = props;
 
+	const [ hasFocus, setHasFocus ] = useState( false );
+
 	const size = value ? value.length + 1 : 0;
 
 	const onChangeHandler = ( event: ChangeEvent< HTMLInputElement > ) => {
@@ -39,6 +43,18 @@ export function UnForwardedTokenInput(
 		}
 	};
 
+	const onFocusHandler: FocusEventHandler< HTMLInputElement > = ( e ) => {
+		setHasFocus( true );
+		onFocus?.( e );
+	};
+
+	const onBlurHandler: React.FocusEventHandler< HTMLInputElement > = (
+		e
+	) => {
+		setHasFocus( false );
+		onBlur?.( e );
+	};
+
 	return (
 		<input
 			ref={ ref }
@@ -47,6 +63,8 @@ export function UnForwardedTokenInput(
 			{ ...restProps }
 			value={ value || '' }
 			onChange={ onChangeHandler }
+			onFocus={ onFocusHandler }
+			onBlur={ onBlurHandler }
 			size={ size }
 			className={ classnames(
 				className,
@@ -62,7 +80,11 @@ export function UnForwardedTokenInput(
 					: undefined
 			}
 			aria-activedescendant={
-				selectedSuggestionIndex !== -1
+				// Only add the `aria-activedescendant` attribute when:
+				// - the user is actively interacting with the input (`hasFocus`)
+				// - there is a selected suggestion (`selectedSuggestionIndex !== -1`)
+				// - the list of suggestions are rendered in the DOM (`isExpanded`)
+				hasFocus && selectedSuggestionIndex !== -1 && isExpanded
 					? `components-form-token-suggestions-${ instanceId }-${ selectedSuggestionIndex }`
 					: undefined
 			}