@wordpress/components 22.0.0 → 23.0.0

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

@@ -67,7 +67,7 @@ describe( 'FontSizePicker', () => {
 		}
 	);
 
-	describe( 'with > 5 font sizes', () => {
+	describe( 'with > 5 homogeneous font sizes', () => {
 		const fontSizes = [
 			{
 				slug: 'tiny',
@@ -77,17 +77,17 @@ describe( 'FontSizePicker', () => {
 			{
 				slug: 'small',
 				name: 'Small',
-				size: '1em',
+				size: '12px',
 			},
 			{
 				slug: 'medium',
 				name: 'Medium',
-				size: '2rem',
+				size: '16px',
 			},
 			{
 				slug: 'large',
 				name: 'Large',
-				size: 'clamp(1.75rem, 3vw, 2.25rem)',
+				size: '20px',
 			},
 			{
 				slug: 'x-large',
@@ -118,21 +118,18 @@ describe( 'FontSizePicker', () => {
 			expect( options ).toHaveLength( 8 );
 			expect( options[ 0 ] ).toHaveAccessibleName( 'Default' );
 			expect( options[ 1 ] ).toHaveAccessibleName( 'Tiny 8' );
-			expect( options[ 2 ] ).toHaveAccessibleName( 'Small 1' );
-			expect( options[ 3 ] ).toHaveAccessibleName( 'Medium 2' );
-			expect( options[ 4 ] ).toHaveAccessibleName( 'Large' );
+			expect( options[ 2 ] ).toHaveAccessibleName( 'Small 12' );
+			expect( options[ 3 ] ).toHaveAccessibleName( 'Medium 16' );
+			expect( options[ 4 ] ).toHaveAccessibleName( 'Large 20' );
 			expect( options[ 5 ] ).toHaveAccessibleName( 'Extra Large 30' );
 			expect( options[ 6 ] ).toHaveAccessibleName( 'xx-large 40' );
 			expect( options[ 7 ] ).toHaveAccessibleName( 'Custom' );
 		} );
 
 		test.each( [
-			{ value: undefined, expectedLabel: 'Size' },
-			{ value: '8px', expectedLabel: 'Size (8px)' },
-			{ value: '1em', expectedLabel: 'Size (1em)' },
-			{ value: '2rem', expectedLabel: 'Size (2rem)' },
-			{ value: 'clamp(1.75rem, 3vw, 2.25rem)', expectedLabel: 'Size' },
-			{ value: '3px', expectedLabel: 'Size (Custom)' },
+			{ value: undefined, expectedLabel: 'Size (px)' },
+			{ value: '8px', expectedLabel: 'Size (px)' },
+			{ value: '3px', expectedLabel: 'Size Custom' },
 		] )(
 			'displays $expectedLabel as label when value is $value',
 			( { value, expectedLabel } ) => {
@@ -150,18 +147,19 @@ describe( 'FontSizePicker', () => {
 		);
 
 		test.each( [
-			{ option: 'Default', value: '8px', expectedValue: undefined },
-			{ option: 'Tiny 8', value: undefined, expectedValue: '8px' },
-			{ option: 'Small 1', value: '8px', expectedValue: '1em' },
-			{ option: 'Medium 2', value: '8px', expectedValue: '2rem' },
 			{
-				option: 'Large',
+				option: 'Default',
 				value: '8px',
-				expectedValue: 'clamp(1.75rem, 3vw, 2.25rem)',
+				expectedArguments: [ undefined ],
+			},
+			{
+				option: 'Tiny 8',
+				value: undefined,
+				expectedArguments: [ '8px', fontSizes[ 0 ] ],
 			},
 		] )(
-			'calls onChange( $expectedValue ) when $option is selected',
-			async ( { option, value, expectedValue } ) => {
+			'calls onChange( $expectedArguments ) when $option is selected',
+			async ( { option, value, expectedArguments } ) => {
 				const user = userEvent.setup( {
 					advanceTimers: jest.advanceTimersByTime,
 				} );
@@ -181,33 +179,172 @@ describe( 'FontSizePicker', () => {
 					screen.getByRole( 'option', { name: option } )
 				);
 				expect( onChange ).toHaveBeenCalledTimes( 1 );
-				expect( onChange ).toHaveBeenCalledWith( expectedValue );
+				expect( onChange ).toHaveBeenCalledWith( ...expectedArguments );
 			}
 		);
 
-		it( 'shows custom input when Custom is selected', async () => {
+		commonSelectTests( fontSizes );
+		commonTests( fontSizes );
+	} );
+
+	describe( 'with > 5 heterogeneous font sizes', () => {
+		const fontSizes = [
+			{
+				slug: 'tiny',
+				name: 'Tiny',
+				size: '8px',
+			},
+			{
+				slug: 'small',
+				name: 'Small',
+				size: '1em',
+			},
+			{
+				slug: 'medium',
+				name: 'Medium',
+				size: '2rem',
+			},
+			{
+				slug: 'large',
+				name: 'Large',
+				size: 'clamp(1.75rem, 3vw, 2.25rem)',
+			},
+			{
+				slug: 'x-large',
+				name: 'Extra Large',
+				size: '30px',
+			},
+			{
+				slug: 'xx-large',
+				// no name
+				size: '40px',
+			},
+		];
+
+		it( 'displays a select control', async () => {
 			const user = userEvent.setup( {
 				advanceTimers: jest.advanceTimersByTime,
 			} );
-			const onChange = jest.fn();
 			render(
 				<FontSizePicker
 					__nextHasNoMarginBottom
 					fontSizes={ fontSizes }
-					onChange={ onChange }
 				/>
 			);
 			await user.click(
 				screen.getByRole( 'button', { name: 'Font size' } )
 			);
-			await user.click(
-				screen.getByRole( 'option', { name: 'Custom' } )
-			);
-			expect( screen.getByLabelText( 'Custom' ) ).toBeInTheDocument();
-			// TODO: onChange() shouldn't be called.
-			//expect( onChange ).not.toHaveBeenCalled();
+			const options = screen.getAllByRole( 'option' );
+			expect( options ).toHaveLength( 8 );
+			expect( options[ 0 ] ).toHaveAccessibleName( 'Default' );
+			expect( options[ 1 ] ).toHaveAccessibleName( 'Tiny 8px' );
+			expect( options[ 2 ] ).toHaveAccessibleName( 'Small 1em' );
+			expect( options[ 3 ] ).toHaveAccessibleName( 'Medium 2rem' );
+			expect( options[ 4 ] ).toHaveAccessibleName( 'Large' );
+			expect( options[ 5 ] ).toHaveAccessibleName( 'Extra Large 30px' );
+			expect( options[ 6 ] ).toHaveAccessibleName( 'xx-large 40px' );
+			expect( options[ 7 ] ).toHaveAccessibleName( 'Custom' );
 		} );
 
+		test.each( [
+			{ value: undefined, option: 'Default' },
+			{ value: '', option: 'Default' },
+			{ value: '8px', option: 'Tiny' },
+		] )(
+			'defaults to $option when value is $value',
+			( { value, option } ) => {
+				render(
+					<FontSizePicker
+						__nextHasNoMarginBottom
+						fontSizes={ fontSizes }
+						value={ value }
+					/>
+				);
+				expect(
+					screen.getByRole( 'button', { name: 'Font size' } )
+				).toHaveTextContent( option );
+			}
+		);
+
+		test.each( [
+			{ value: undefined, expectedLabel: 'Size' },
+			{ value: '8px', expectedLabel: 'Size' },
+			{ value: '1em', expectedLabel: 'Size' },
+			{ value: '2rem', expectedLabel: 'Size' },
+			{ value: 'clamp(1.75rem, 3vw, 2.25rem)', expectedLabel: 'Size' },
+			{ value: '3px', expectedLabel: 'Size Custom' },
+		] )(
+			'displays $expectedLabel as label when value is $value',
+			( { value, expectedLabel } ) => {
+				render(
+					<FontSizePicker
+						__nextHasNoMarginBottom
+						fontSizes={ fontSizes }
+						value={ value }
+					/>
+				);
+				expect(
+					screen.getByLabelText( expectedLabel )
+				).toBeInTheDocument();
+			}
+		);
+
+		test.each( [
+			{
+				option: 'Default',
+				value: '8px',
+				expectedArguments: [ undefined ],
+			},
+			{
+				option: 'Tiny 8px',
+				value: undefined,
+				expectedArguments: [ '8px', fontSizes[ 0 ] ],
+			},
+			{
+				option: 'Small 1em',
+				value: '8px',
+				expectedArguments: [ '1em', fontSizes[ 1 ] ],
+			},
+			{
+				option: 'Medium 2rem',
+				value: '8px',
+				expectedArguments: [ '2rem', fontSizes[ 2 ] ],
+			},
+			{
+				option: 'Large',
+				value: '8px',
+				expectedArguments: [
+					'clamp(1.75rem, 3vw, 2.25rem)',
+					fontSizes[ 3 ],
+				],
+			},
+		] )(
+			'calls onChange( $expectedValue ) when $option is selected',
+			async ( { option, value, expectedArguments } ) => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+				const onChange = jest.fn();
+				render(
+					<FontSizePicker
+						__nextHasNoMarginBottom
+						fontSizes={ fontSizes }
+						value={ value }
+						onChange={ onChange }
+					/>
+				);
+				await user.click(
+					screen.getByRole( 'button', { name: 'Font size' } )
+				);
+				await user.click(
+					screen.getByRole( 'option', { name: option } )
+				);
+				expect( onChange ).toHaveBeenCalledTimes( 1 );
+				expect( onChange ).toHaveBeenCalledWith( ...expectedArguments );
+			}
+		);
+
+		commonSelectTests( fontSizes );
 		commonTests( fontSizes );
 	} );
 
@@ -250,7 +387,7 @@ describe( 'FontSizePicker', () => {
 			const options = screen.getAllByRole( 'radio' );
 			expect( options ).toHaveLength( 5 );
 			expect( options[ 0 ] ).toHaveTextContent( 'S' );
-			expect( options[ 0 ] ).toHaveAccessibleName( 'S' );
+			expect( options[ 0 ] ).toHaveAccessibleName( 'Small' );
 			expect( options[ 1 ] ).toHaveTextContent( 'M' );
 			expect( options[ 1 ] ).toHaveAccessibleName( 'Medium' );
 			expect( options[ 2 ] ).toHaveTextContent( 'L' );
@@ -262,9 +399,9 @@ describe( 'FontSizePicker', () => {
 		} );
 
 		test.each( [
-			{ value: undefined, expectedLabel: 'Size Default' },
-			{ value: '12px', expectedLabel: 'Size small(px)' },
-			{ value: '40px', expectedLabel: 'Size Gigantosaurus(px)' },
+			{ value: undefined, expectedLabel: 'Size' },
+			{ value: '12px', expectedLabel: 'Size Small' },
+			{ value: '40px', expectedLabel: 'Size Gigantosaurus' },
 		] )(
 			'displays $expectedLabel as label when value is $value',
 			( { value, expectedLabel } ) => {
@@ -295,9 +432,10 @@ describe( 'FontSizePicker', () => {
 			);
 			await user.click( screen.getByRole( 'radio', { name: 'Medium' } ) );
 			expect( onChange ).toHaveBeenCalledTimes( 1 );
-			expect( onChange ).toHaveBeenCalledWith( '16px' );
+			expect( onChange ).toHaveBeenCalledWith( '16px', fontSizes[ 1 ] );
 		} );
 
+		commonToggleGroupTests( fontSizes );
 		commonTests( fontSizes );
 	} );
 
@@ -345,7 +483,7 @@ describe( 'FontSizePicker', () => {
 		} );
 
 		test.each( [
-			{ value: undefined, expectedLabel: 'Size Default' },
+			{ value: undefined, expectedLabel: 'Size' },
 			{ value: '12px', expectedLabel: 'Size Small' },
 			{ value: '1em', expectedLabel: 'Size Medium' },
 			{ value: '2rem', expectedLabel: 'Size Large' },
@@ -370,16 +508,19 @@ describe( 'FontSizePicker', () => {
 		);
 
 		test.each( [
-			{ radio: 'Small', expectedValue: '12px' },
-			{ radio: 'Medium', expectedValue: '1em' },
-			{ radio: 'Large', expectedValue: '2rem' },
+			{ radio: 'Small', expectedArguments: [ '12px', fontSizes[ 0 ] ] },
+			{ radio: 'Medium', expectedArguments: [ '1em', fontSizes[ 1 ] ] },
+			{ radio: 'Large', expectedArguments: [ '2rem', fontSizes[ 2 ] ] },
 			{
 				radio: 'Extra Large',
-				expectedValue: 'clamp(1.75rem, 3vw, 2.25rem)',
+				expectedArguments: [
+					'clamp(1.75rem, 3vw, 2.25rem)',
+					fontSizes[ 3 ],
+				],
 			},
 		] )(
-			'calls onChange( $expectedValue ) when $radio is selected',
-			async ( { radio, expectedValue } ) => {
+			'calls onChange( $expectedArguments ) when $radio is selected',
+			async ( { radio, expectedArguments } ) => {
 				const user = userEvent.setup( {
 					advanceTimers: jest.advanceTimersByTime,
 				} );
@@ -395,14 +536,82 @@ describe( 'FontSizePicker', () => {
 					screen.getByRole( 'radio', { name: radio } )
 				);
 				expect( onChange ).toHaveBeenCalledTimes( 1 );
-				expect( onChange ).toHaveBeenCalledWith( expectedValue );
+				expect( onChange ).toHaveBeenCalledWith( ...expectedArguments );
 			}
 		);
 
+		commonToggleGroupTests( fontSizes );
 		commonTests( fontSizes );
 	} );
 
+	function commonToggleGroupTests( fontSizes: FontSize[] ) {
+		it( 'defaults to M when value is 16px', () => {
+			render(
+				<FontSizePicker
+					__nextHasNoMarginBottom
+					fontSizes={ fontSizes }
+					value={ fontSizes[ 0 ].size }
+				/>
+			);
+			expect(
+				screen.getByRole( 'radio', { checked: true } )
+			).toHaveTextContent( 'S' );
+		} );
+
+		test.each( [ undefined, '' ] )(
+			'has no selection when value is %p',
+			( value ) => {
+				render(
+					<FontSizePicker
+						__nextHasNoMarginBottom
+						fontSizes={ fontSizes }
+						value={ value }
+					/>
+				);
+				expect( screen.getByRole( 'radiogroup' ) ).toBeInTheDocument();
+				expect(
+					screen.queryByRole( 'radio', { checked: true } )
+				).not.toBeInTheDocument();
+			}
+		);
+	}
+
+	function commonSelectTests( fontSizes: FontSize[] ) {
+		it( 'shows custom input when Custom is selected', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+			const onChange = jest.fn();
+			render(
+				<FontSizePicker
+					__nextHasNoMarginBottom
+					fontSizes={ fontSizes }
+					onChange={ onChange }
+				/>
+			);
+			await user.click(
+				screen.getByRole( 'button', { name: 'Font size' } )
+			);
+			await user.click(
+				screen.getByRole( 'option', { name: 'Custom' } )
+			);
+			expect( screen.getByLabelText( 'Custom' ) ).toBeInTheDocument();
+			expect( onChange ).not.toHaveBeenCalled();
+		} );
+	}
+
 	function commonTests( fontSizes: FontSize[] ) {
+		it( 'shows custom input when value is unknown', () => {
+			render(
+				<FontSizePicker
+					__nextHasNoMarginBottom
+					fontSizes={ fontSizes }
+					value="3px"
+				/>
+			);
+			expect( screen.getByLabelText( 'Custom' ) ).toBeInTheDocument();
+		} );
+
 		it( 'allows custom values by default', async () => {
 			const user = userEvent.setup( {
 				advanceTimers: jest.advanceTimersByTime,

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

@@ -1,109 +1,69 @@
 /**
  * Internal dependencies
  */
-import { isSimpleCssValue, 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 );
+	} );
 } );
 
-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',
-			},
-		];
+describe( 'getCommonSizeUnit', () => {
+	it( 'returns null when fontSizes is empty', () => {
+		expect( getCommonSizeUnit( [] ) ).toBe( null );
+	} );
+
+	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' );
+	} );
+
+	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.
 	 */
@@ -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' ] >;
 };