@wordpress/components 21.3.0 → 22.1.0

package/src/font-size-picker/test/utils.ts

@@ -1,153 +1,69 @@
 /**
  * Internal dependencies
  */
-import {
-	isSimpleCssValue,
-	splitValueAndUnitFromSize,
-	getToggleGroupOptions,
-} from '../utils';
-
-const simpleCSSCases: [ number | string, boolean ][] = [
-	// Test integers and non-integers.
-	[ 1, true ],
-	[ 1.25, true ],
-	[ '123', true ],
-	[ '1.5', true ],
-	[ '0.75', true ],
-	// CSS unit tests.
-	[ '20px', true ],
-	[ '0.8em', true ],
-	[ '2rem', true ],
-	[ '1.4vw', true ],
-	[ '0.4vh', true ],
-	// Invalid negative values,
-	[ '-5px', false ],
-	// Complex CSS values that should fail.
-	[ 'abs(-10px)', false ],
-	[ 'calc(10px + 1)', false ],
-	[ 'clamp(2.5rem, 4vw, 3rem)', false ],
-	[ 'max(4.5em, 3vh)', false ],
-	[ 'min(10px, 1rem)', false ],
-	[ 'minmax(30px, auto)', false ],
-	[ 'var(--wp--font-size)', false ],
-];
+import { isSimpleCssValue, getCommonSizeUnit } from '../utils';
 
 describe( 'isSimpleCssValue', () => {
-	test.each( simpleCSSCases )(
-		'given %p as argument, returns %p',
-		( cssValue, result ) => {
-			expect( isSimpleCssValue( cssValue ) ).toBe( result );
-		}
-	);
+	test.each( [
+		// Test integers and non-integers.
+		[ 1, true ],
+		[ 1.25, true ],
+		[ '123', true ],
+		[ '1.5', true ],
+		[ '0.75', true ],
+		// CSS unit tests.
+		[ '20px', true ],
+		[ '0.8em', true ],
+		[ '2rem', true ],
+		[ '1.4vw', true ],
+		[ '0.4vh', true ],
+		// Invalid negative values,
+		[ '-5px', false ],
+		// Complex CSS values that should fail.
+		[ 'abs(-10px)', false ],
+		[ 'calc(10px + 1)', false ],
+		[ 'clamp(2.5rem, 4vw, 3rem)', false ],
+		[ 'max(4.5em, 3vh)', false ],
+		[ 'min(10px, 1rem)', false ],
+		[ 'minmax(30px, auto)', false ],
+		[ 'var(--wp--font-size)', false ],
+	] )( 'given %p as argument, returns %p', ( cssValue, result ) => {
+		expect( isSimpleCssValue( cssValue ) ).toBe( result );
+	} );
 } );
 
-const splitValuesCases: [
-	number | string,
-	string | undefined,
-	string | undefined
-][] = [
-	// Test integers and non-integers.
-	[ 1, '1', undefined ],
-	[ 1.25, '1.25', undefined ],
-	[ '123', '123', undefined ],
-	[ '1.5', '1.5', undefined ],
-	[ '0.75', '0.75', undefined ],
-	// Valid simple CSS values.
-	[ '20px', '20', 'px' ],
-	[ '0.8em', '0.8', 'em' ],
-	[ '2rem', '2', 'rem' ],
-	[ '1.4vw', '1.4', 'vw' ],
-	[ '0.4vh', '0.4', 'vh' ],
-	// Invalid negative values,
-	[ '-5px', undefined, undefined ],
-	// Complex CSS values that shouldn't parse.
-	[ 'abs(-15px)', undefined, undefined ],
-	[ 'calc(10px + 1)', undefined, undefined ],
-	[ 'clamp(2.5rem, 4vw, 3rem)', undefined, undefined ],
-	[ 'max(4.5em, 3vh)', undefined, undefined ],
-	[ 'min(10px, 1rem)', undefined, undefined ],
-	[ 'minmax(30px, auto)', undefined, undefined ],
-	[ 'var(--wp--font-size)', undefined, undefined ],
-];
+describe( 'getCommonSizeUnit', () => {
+	it( 'returns null when fontSizes is empty', () => {
+		expect( getCommonSizeUnit( [] ) ).toBe( null );
+	} );
 
-describe( 'splitValueAndUnitFromSize', () => {
-	test.each( splitValuesCases )(
-		'given %p as argument, returns value = %p and unit = %p',
-		( cssValue, expectedValue, expectedUnit ) => {
-			const [ value, unit ] = splitValueAndUnitFromSize( cssValue );
-			expect( value ).toBe( expectedValue );
-			expect( unit ).toBe( expectedUnit );
-		}
-	);
-} );
+	it( 'returns px when all sizes are px', () => {
+		expect(
+			getCommonSizeUnit( [
+				{ slug: 'small', size: '10px' },
+				{ slug: 'medium', size: '20px' },
+				{ slug: 'large', size: '30px' },
+			] )
+		).toBe( 'px' );
+	} );
+
+	it( 'returns em when all sizes are em', () => {
+		expect(
+			getCommonSizeUnit( [
+				{ slug: 'small', size: '1em' },
+				{ slug: 'medium', size: '2em' },
+				{ slug: 'large', size: '3em' },
+			] )
+		).toBe( 'em' );
+	} );
 
-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',
-			},
-		];
+	it( 'returns null when sizes are heterogeneous', () => {
 		expect(
-			getToggleGroupOptions( optionsArray, [
-				'S',
-				'M',
-				'L',
-				'XL',
-				'XXL',
+			getCommonSizeUnit( [
+				{ slug: 'small', size: '10px' },
+				{ slug: 'medium', size: '2em' },
+				{ slug: 'large', size: '3rem' },
 			] )
-		).toEqual( [
-			{
-				key: '1',
-				label: 'S',
-				name: '1',
-				value: '1',
-			},
-			{
-				key: '2',
-				label: 'M',
-				name: '2',
-				value: '2',
-			},
-			{
-				key: '3',
-				label: 'L',
-				name: '3',
-				value: '3',
-			},
-			{
-				key: '4',
-				label: 'XL',
-				name: '4',
-				value: '4',
-			},
-			{
-				key: '5',
-				label: 'XXL',
-				name: 'XXL',
-				value: '5',
-			},
-		] );
+		).toBe( null );
 	} );
 } );

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import type { ReactNode } from 'react';
-
 export type FontSizePickerProps = {
 	/**
 	 * If `true`, it will not be possible to choose a custom fontSize. The user
@@ -27,7 +22,10 @@ export type FontSizePickerProps = {
 	 * 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;
+	onChange?: (
+		value: number | string | undefined,
+		selectedItem?: FontSize
+	) => void;
 	/**
 	 * The current font size value.
 	 */
@@ -58,7 +56,7 @@ export type FontSizePickerProps = {
 	/**
 	 * Size of the control.
 	 *
-	 * @default default
+	 * @default 'default'
 	 */
 	size?: 'default' | '__unstable-large';
 };
@@ -81,18 +79,29 @@ export type FontSize = {
 	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 FontSizePickerSelectProps = Pick<
+	FontSizePickerProps,
+	'value' | 'size'
+> & {
+	fontSizes: NonNullable< FontSizePickerProps[ 'fontSizes' ] >;
+	disableCustomFontSizes: NonNullable<
+		FontSizePickerProps[ 'disableCustomFontSizes' ]
+	>;
+	onChange: NonNullable< FontSizePickerProps[ 'onChange' ] >;
+	onSelectCustom: () => void;
 };
 
-export type FontSizeToggleGroupOption = {
+export type FontSizePickerSelectOption = {
 	key: string;
-	value: number | string;
-	label: string;
 	name: string;
+	value?: FontSize[ 'size' ];
+	__experimentalHint?: string;
+};
+
+export type FontSizePickerToggleGroupProps = Pick<
+	FontSizePickerProps,
+	'value' | 'size' | '__nextHasNoMarginBottom'
+> & {
+	fontSizes: NonNullable< FontSizePickerProps[ 'fontSizes' ] >;
+	onChange: NonNullable< FontSizePickerProps[ 'onChange' ] >;
 };

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

@@ -6,64 +6,8 @@ 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,
-	name: __( 'Default' ),
-};
-export const CUSTOM_FONT_SIZE = 'custom';
-const CUSTOM_FONT_SIZE_OPTION = {
-	slug: CUSTOM_FONT_SIZE,
-	name: __( 'Custom' ),
-};
-
-/**
- * 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 = [
-	/* 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
- * and its `unit`, if exists.
- *
- * @param  size Font size.
- * @return An array with the numeric value and the unit if exists.
- */
-export function splitValueAndUnitFromSize(
-	size: NonNullable< FontSizePickerProps[ 'value' ] >
-) {
-	const [ numericValue, unit ] = `${ size }`.match( /[\d\.]+|\D+/g ) ?? [];
-
-	if (
-		! isNaN( parseFloat( numericValue ) ) &&
-		isFinite( Number( numericValue ) )
-	) {
-		return [ numericValue, unit ];
-	}
-
-	return [];
-}
+import type { FontSizePickerProps, FontSize } from './types';
+import { parseQuantityAndUnitFromRawValue } from '../unit-control';
 
 /**
  * Some themes use css vars for their font sizes, so until we
@@ -80,75 +24,23 @@ export function isSimpleCssValue(
 }
 
 /**
- * Return font size options in the proper format depending
- * on the currently used control (select, toggle group).
+ * If all of the given font sizes have the same unit (e.g. 'px'), return that
+ * unit. Otherwise return null.
  *
- * @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.
+ * @param  fontSizes List of font sizes.
+ * @return The common unit, or null.
  */
-export function getFontSizeOptions(
-	useSelectControl: boolean,
-	optionsArray: FontSize[],
-	disableCustomFontSizes: boolean
-): FontSizeSelectOption[] | FontSizeToggleGroupOption[] | null {
-	if ( disableCustomFontSizes && ! optionsArray.length ) {
+export function getCommonSizeUnit( fontSizes: FontSize[] ) {
+	const [ firstFontSize, ...otherFontSizes ] = fontSizes;
+	if ( ! firstFontSize ) {
 		return null;
 	}
-	return useSelectControl
-		? getSelectOptions( optionsArray, disableCustomFontSizes )
-		: getToggleGroupOptions( optionsArray );
-}
-
-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 || slug,
-		size,
-		__experimentalHint:
-			size && isSimpleCssValue( size ) && parseFloat( String( size ) ),
-	} ) );
-}
-
-/**
- * Build options for the toggle group options.
- *
- * @param  optionsArray An array of font size options.
- * @param  labelAliases An array of alternative labels.
- * @return Remapped optionsArray.
- */
-export function getToggleGroupOptions(
-	optionsArray: FontSize[],
-	labelAliases: string[] = FONT_SIZES_ALIASES
-): FontSizeToggleGroupOption[] {
-	return optionsArray.map( ( { slug, size, name }, index ) => {
-		return {
-			key: slug,
-			value: size,
-			label: labelAliases[ index ],
-			name: name || labelAliases[ index ],
-		};
-	} );
-}
-
-export function getSelectedOption(
-	fontSizes: FontSize[],
-	value: FontSizePickerProps[ 'value' ]
-): FontSizeOption {
-	if ( ! value ) {
-		return DEFAULT_FONT_SIZE_OPTION;
-	}
-	return (
-		fontSizes.find( ( font ) => font.size === value ) ||
-		CUSTOM_FONT_SIZE_OPTION
+	const [ , firstUnit ] = parseQuantityAndUnitFromRawValue(
+		firstFontSize.size
 	);
+	const areAllSizesSameUnit = otherFontSizes.every( ( fontSize ) => {
+		const [ , unit ] = parseQuantityAndUnitFromRawValue( fontSize.size );
+		return unit === firstUnit;
+	} );
+	return areAllSizesSameUnit ? firstUnit : null;
 }

package/src/form-file-upload/README.md

@@ -81,9 +81,7 @@ This can be useful when you want to force a `change` event to fire when the user
 
 ### render
 
-Optional callback function used to render the UI. If passed the component does not render any UI and calls this function to render it.
-
-This function receives an object with the property `openFileDialog`. The property is a function that when called opens the browser window to upload files.
+Optional callback function used to render the UI. If passed, the component does not render the default UI (a button) and calls this function to render it. The function receives an object with property `openFileDialog`, a function that, when called, opens the browser native file upload modal window.
 
 -   Type: `Function`
 -   Required: No

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

@@ -47,6 +47,7 @@ export function FormFileUpload( {
 			{ children }
 		</Button>
 	);
+
 	return (
 		<div className="components-form-file-upload">
 			{ ui }

package/src/form-file-upload/types.ts

@@ -55,9 +55,10 @@ export type FormFileUploadProps = {
 	/**
 	 * Optional callback function used to render the UI.
 	 *
-	 * If passed, the component does not render any UI and calls this function to render it.
-	 * This function receives an object with the property `openFileDialog`.
-	 * The property is a function that when called opens the browser window to upload files.
+	 * If passed, the component does not render the default UI (a button) and
+	 * calls this function to render it. The function receives an object with
+	 * property `openFileDialog`, a function that, when called, opens the browser
+	 * native file upload modal window.
 	 */
-	render?: ( arg: { openFileDialog: () => void } ) => void;
+	render?: ( arg: { openFileDialog: () => void } ) => ReactNode;
 };

package/src/form-toggle/style.scss

@@ -38,13 +38,13 @@ $toggle-border-width: 1px;
 
 	// Checked state.
 	&.is-checked .components-form-toggle__track {
-		background-color: var(--wp-admin-theme-color);
-		border: $toggle-border-width solid var(--wp-admin-theme-color);
+		background-color: $components-color-accent;
+		border: $toggle-border-width solid $components-color-accent;
 		border: #{ $toggle-height * 0.5 } solid transparent; // Expand the border to fake a solid in Windows High Contrast Mode.
 	}
 
 	.components-form-toggle__input:focus + .components-form-toggle__track {
-		box-shadow: 0 0 0 2px $white, 0 0 0 (2px + $border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 2px $white, 0 0 0 (2px + $border-width-focus) $components-color-accent;
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;

package/src/form-toggle/test/__snapshots__/index.tsx.snap

@@ -1,20 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FormToggle basic rendering should render a span element with an unchecked checkbox 1`] = `
-<span
-  class="components-form-toggle"
->
-  <input
-    class="components-form-toggle__input"
-    type="checkbox"
-  />
+<div>
   <span
-    class="components-form-toggle__track"
-  />
-  <span
-    class="components-form-toggle__thumb"
-  />
-</span>
+    class="components-form-toggle"
+  >
+    <input
+      class="components-form-toggle__input"
+      type="checkbox"
+    />
+    <span
+      class="components-form-toggle__track"
+    />
+    <span
+      class="components-form-toggle__thumb"
+    />
+  </span>
+</div>
 `;
 
 exports[`FormToggle basic rendering should render an id prop for the input checkbox 1`] = `

package/src/form-toggle/test/index.tsx

@@ -36,7 +36,7 @@ describe( 'FormToggle', () => {
 			const { container } = render( <FormToggle onChange={ noop } /> );
 
 			expect( getInput() ).not.toBeChecked();
-			expect( container.firstChild ).toMatchSnapshot();
+			expect( container ).toMatchSnapshot();
 		} );
 
 		it( 'should render a checked checkbox when providing checked prop', () => {

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

@@ -169,10 +169,18 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 	function onKeyDown( event: KeyboardEvent ) {
 		let preventDefault = false;
 
-		if ( event.defaultPrevented ) {
+		if (
+			event.defaultPrevented ||
+			// Ignore keydowns from IMEs
+			event.nativeEvent.isComposing ||
+			// Workaround for Mac Safari where the final Enter/Backspace of an IME composition
+			// is `isComposing=false`, even though it's technically still part of the composition.
+			// These can only be detected by keyCode.
+			event.keyCode === 229
+		) {
 			return;
 		}
-		switch ( event.code ) {
+		switch ( event.key ) {
 			case 'Backspace':
 				preventDefault = handleDeleteKey( deleteTokenBeforeInput );
 				break;
@@ -213,9 +221,9 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 
 	function onKeyPress( event: KeyboardEvent ) {
 		let preventDefault = false;
-		// TODO: replace to event.code;
-		switch ( event.charCode ) {
-			case 44: // Comma.
+
+		switch ( event.key ) {
+			case ',':
 				preventDefault = handleCommaKey();
 				break;
 			default:

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

@@ -88,7 +88,7 @@
 
 		.components-form-token-field__token-text {
 			background: transparent;
-			color: var(--wp-admin-theme-color);
+			color: $components-color-accent;
 		}
 
 		.components-form-token-field__remove-token {
@@ -183,7 +183,7 @@
 	cursor: pointer;
 
 	&.is-selected {
-		background: var(--wp-admin-theme-color);
+		background: $components-color-accent;
 		color: $white;
 	}
 }

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

@@ -277,8 +277,8 @@ describe( 'FormTokenField', () => {
 
 			// There should be 1 "remove item" button for the "bergamot" token
 			expect(
-				screen.getAllByRole( 'button', { name: 'Remove item' } )
-			).toHaveLength( 1 );
+				screen.getByRole( 'button', { name: 'Remove item' } )
+			).toBeInTheDocument();
 
 			// Click the "X" button for the "bergamot" token (the only one)
 			await user.click(
@@ -827,10 +827,10 @@ describe( 'FormTokenField', () => {
 
 			// Currently, none of the suggestions are selected
 			expect(
-				within( suggestionList ).queryAllByRole( 'option', {
+				within( suggestionList ).queryByRole( 'option', {
 					selected: true,
 				} )
-			).toHaveLength( 0 );
+			).not.toBeInTheDocument();
 
 			// Pressing the down arrow will select "Salmon"
 			await user.keyboard( '[ArrowDown]' );
@@ -900,10 +900,10 @@ describe( 'FormTokenField', () => {
 
 			// Currently, none of the suggestions are selected
 			expect(
-				within( suggestionList ).queryAllByRole( 'option', {
+				within( suggestionList ).queryByRole( 'option', {
 					selected: true,
 				} )
-			).toHaveLength( 0 );
+			).not.toBeInTheDocument();
 
 			const tigerOption = within( suggestionList ).getByRole( 'option', {
 				name: 'Tiger',