@wordpress/components 30.7.1-next.36001005c.0 → 30.8.0

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

@@ -46,6 +46,7 @@ const UnforwardedFontSizePicker = (
 		size = 'default',
 		units: unitsProp = DEFAULT_UNITS,
 		value,
+		valueMode = 'literal',
 		withSlider = false,
 		withReset = true,
 	} = props;
@@ -59,15 +60,32 @@ const UnforwardedFontSizePicker = (
 		availableUnits: unitsProp,
 	} );
 
-	const selectedFontSize = fontSizes.find(
-		( fontSize ) => fontSize.size === value
-	);
+	const selectedFontSize = ( () => {
+		if ( ! value ) {
+			return undefined;
+		}
+
+		// If valueMode is 'slug', find by slug
+		if ( valueMode === 'slug' ) {
+			return fontSizes.find( ( fontSize ) => fontSize.slug === value );
+		}
+
+		// If valueMode is 'literal', find by size value
+		return fontSizes.find( ( fontSize ) => fontSize.size === value );
+	} )();
 	const isCustomValue = !! value && ! selectedFontSize;
 
 	// Initially request a custom picker if the value is not from the predef list.
 	const [ userRequestedCustom, setUserRequestedCustom ] =
 		useState( isCustomValue );
 
+	// Resolve the literal value to use in custom controls when operating in slug mode.
+	// When `valueMode` is 'slug', the `value` prop contains the slug of the
+	// selected preset. In that case, the custom input should reflect the preset's
+	// actual size value so it pre-populates correctly after clicking "Set custom size".
+	const resolvedValueForControls =
+		valueMode === 'slug' ? selectedFontSize?.size : value;
+
 	let currentPickerType;
 	if ( ! disableCustomFontSizes && userRequestedCustom ) {
 		// While showing the custom value picker, switch back to predef only if
@@ -88,10 +106,11 @@ const UnforwardedFontSizePicker = (
 	// operates in a legacy "unitless" mode where UnitControl can only be used
 	// to select px values and onChange() is always called with number values.
 	const hasUnits =
-		typeof value === 'string' || typeof fontSizes[ 0 ]?.size === 'string';
+		typeof resolvedValueForControls === 'string' ||
+		typeof fontSizes[ 0 ]?.size === 'string';
 
 	const [ valueQuantity, valueUnit ] = parseQuantityAndUnitFromRawValue(
-		value,
+		resolvedValueForControls,
 		units
 	);
 	const isValueUnitRelative =
@@ -139,18 +158,16 @@ const UnforwardedFontSizePicker = (
 						__next40pxDefaultSize={ __next40pxDefaultSize }
 						fontSizes={ fontSizes }
 						value={ value }
+						valueMode={ valueMode }
 						disableCustomFontSizes={ disableCustomFontSizes }
 						size={ size }
-						onChange={ ( newValue ) => {
+						onChange={ ( newValue, selectedItem ) => {
 							if ( newValue === undefined ) {
-								onChange?.( undefined );
+								onChange?.( undefined, selectedItem );
 							} else {
 								onChange?.(
 									hasUnits ? newValue : Number( newValue ),
-									fontSizes.find(
-										( fontSize ) =>
-											fontSize.size === newValue
-									)
+									selectedItem
 								);
 							}
 						} }
@@ -161,18 +178,16 @@ const UnforwardedFontSizePicker = (
 					<FontSizePickerToggleGroup
 						fontSizes={ fontSizes }
 						value={ value }
+						valueMode={ valueMode }
 						__next40pxDefaultSize={ __next40pxDefaultSize }
 						size={ size }
-						onChange={ ( newValue ) => {
+						onChange={ ( newValue, selectedItem ) => {
 							if ( newValue === undefined ) {
-								onChange?.( undefined );
+								onChange?.( undefined, selectedItem );
 							} else {
 								onChange?.(
 									hasUnits ? newValue : Number( newValue ),
-									fontSizes.find(
-										( fontSize ) =>
-											fontSize.size === newValue
-									)
+									selectedItem
 								);
 							}
 						} }
@@ -187,11 +202,21 @@ const UnforwardedFontSizePicker = (
 								label={ __( 'Font size' ) }
 								labelPosition="top"
 								hideLabelFromVision
-								value={ value }
+								value={
+									hasUnits
+										? `${ valueQuantity ?? '' }${
+												valueUnit ?? ''
+										  }`
+										: resolvedValueForControls
+								}
 								onChange={ ( newValue ) => {
 									setUserRequestedCustom( true );
 
-									if ( newValue === undefined ) {
+									// Treat clearing the input (empty string) as a reset
+									if (
+										newValue === undefined ||
+										newValue === ''
+									) {
 										onChange?.( undefined );
 									} else {
 										onChange?.(

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

@@ -8,6 +8,7 @@ import styled from '@emotion/styled';
  */
 import BaseControl from '../base-control';
 import Button from '../button';
+import CustomSelectControl from '../custom-select-control';
 import { HStack } from '../h-stack';
 import { space } from '../utils/space';
 
@@ -32,3 +33,11 @@ export const HeaderLabel = styled( BaseControl.VisualLabel )`
 	justify-content: flex-start;
 	margin-bottom: 0;
 `;
+
+// Custom styled component to force line break between name and hint while keeping checkmark on the right
+export const StyledCustomSelectControl = styled( CustomSelectControl )`
+	.components-custom-select-control__item
+		.components-custom-select-control__item-hint {
+		width: 100%;
+	}
+`;

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

@@ -0,0 +1,221 @@
+/**
+ * External dependencies
+ */
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { render } from '@ariakit/test/react';
+
+/**
+ * Internal dependencies
+ */
+import FontSizePickerSelect from '../font-size-picker-select';
+import type { FontSize } from '../types';
+
+describe( 'FontSizePickerSelect', () => {
+	const fontSizes: FontSize[] = [
+		{
+			slug: 'small',
+			name: 'Small',
+			size: '12px',
+		},
+		{
+			slug: 'medium',
+			name: 'Medium',
+			size: '16px',
+		},
+		{
+			slug: 'large',
+			name: 'Large',
+			size: '20px',
+		},
+	];
+
+	describe( 'valueMode prop', () => {
+		it( 'should find font size by size value when valueMode is literal', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerSelect
+					fontSizes={ fontSizes }
+					value="16px"
+					valueMode="literal"
+					onChange={ onChange }
+					onSelectCustom={ jest.fn() }
+					disableCustomFontSizes={ false }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should select the medium option (16px)
+			expect(
+				screen.getByRole( 'combobox', { name: 'Font size' } )
+			).toHaveTextContent( 'Medium' );
+		} );
+
+		it( 'should find font size by slug when valueMode is slug', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerSelect
+					fontSizes={ fontSizes }
+					value="medium"
+					valueMode="slug"
+					onChange={ onChange }
+					onSelectCustom={ jest.fn() }
+					disableCustomFontSizes={ false }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should select the medium option
+			expect(
+				screen.getByRole( 'combobox', { name: 'Font size' } )
+			).toHaveTextContent( 'Medium' );
+		} );
+
+		it( 'should handle undefined value', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerSelect
+					fontSizes={ fontSizes }
+					value={ undefined }
+					valueMode="literal"
+					onChange={ onChange }
+					onSelectCustom={ jest.fn() }
+					disableCustomFontSizes={ false }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should show default option
+			expect(
+				screen.getByRole( 'combobox', { name: 'Font size' } )
+			).toHaveTextContent( 'Default' );
+		} );
+
+		it( 'should handle empty string value', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerSelect
+					fontSizes={ fontSizes }
+					value=""
+					valueMode="literal"
+					onChange={ onChange }
+					onSelectCustom={ jest.fn() }
+					disableCustomFontSizes={ false }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should show default option
+			expect(
+				screen.getByRole( 'combobox', { name: 'Font size' } )
+			).toHaveTextContent( 'Default' );
+		} );
+	} );
+
+	describe( 'onChange callback', () => {
+		it( 'should call onChange with FontSize object as second parameter', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerSelect
+					fontSizes={ fontSizes }
+					onChange={ onChange }
+					onSelectCustom={ jest.fn() }
+					disableCustomFontSizes={ false }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			await user.click(
+				screen.getByRole( 'combobox', { name: 'Font size' } )
+			);
+			await user.click(
+				screen.getByRole( 'option', { name: 'Small 12px' } )
+			);
+			expect( onChange ).toHaveBeenCalledWith( '12px', fontSizes[ 0 ] );
+		} );
+
+		it( 'should call onChange with undefined as second parameter for default option', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerSelect
+					fontSizes={ fontSizes }
+					value="16px" // Start with a selected value
+					onChange={ onChange }
+					onSelectCustom={ jest.fn() }
+					disableCustomFontSizes={ false }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			await user.click(
+				screen.getByRole( 'combobox', { name: 'Font size' } )
+			);
+			await user.click(
+				screen.getByRole( 'option', { name: 'Default' } )
+			);
+			expect( onChange ).toHaveBeenCalledWith( undefined, undefined );
+		} );
+	} );
+
+	describe( 'edge cases', () => {
+		const fontSizesWithDuplicates: FontSize[] = [
+			{
+				slug: 'small-1',
+				name: 'Small 1',
+				size: '12px',
+			},
+			{
+				slug: 'small-2',
+				name: 'Small 2',
+				size: '12px',
+			},
+			{
+				slug: 'medium',
+				name: 'Medium',
+				size: '16px',
+			},
+		];
+
+		it( 'should handle multiple font sizes with same value in literal mode', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerSelect
+					fontSizes={ fontSizesWithDuplicates }
+					value="12px"
+					valueMode="literal"
+					onChange={ onChange }
+					onSelectCustom={ jest.fn() }
+					disableCustomFontSizes={ false }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should show the first matching font size when there are multiple matches
+			expect(
+				screen.getByRole( 'combobox', { name: 'Font size' } )
+			).toHaveTextContent( 'Small 1' );
+		} );
+
+		it( 'should handle multiple font sizes with same value in slug mode', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerSelect
+					fontSizes={ fontSizesWithDuplicates }
+					value="small-1"
+					valueMode="slug"
+					onChange={ onChange }
+					onSelectCustom={ jest.fn() }
+					disableCustomFontSizes={ false }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should select the specific font size by slug
+			expect(
+				screen.getByRole( 'combobox', { name: 'Font size' } )
+			).toHaveTextContent( 'Small 1' );
+		} );
+	} );
+} );

package/src/font-size-picker/test/font-size-picker-toggle-group.tsx

@@ -0,0 +1,275 @@
+/**
+ * External dependencies
+ */
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { render } from '@ariakit/test/react';
+
+/**
+ * Internal dependencies
+ */
+import FontSizePickerToggleGroup from '../font-size-picker-toggle-group';
+import type { FontSize } from '../types';
+
+describe( 'FontSizePickerToggleGroup', () => {
+	const fontSizes: FontSize[] = [
+		{
+			slug: 'small',
+			name: 'Small',
+			size: '12px',
+		},
+		{
+			slug: 'medium',
+			name: 'Medium',
+			size: '16px',
+		},
+		{
+			slug: 'large',
+			name: 'Large',
+			size: '20px',
+		},
+	];
+
+	describe( 'valueMode prop', () => {
+		it( 'should find font size by size value when valueMode is literal', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerToggleGroup
+					fontSizes={ fontSizes }
+					value="16px"
+					valueMode="literal"
+					onChange={ onChange }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should select the medium option (16px)
+			expect(
+				screen.getByRole( 'radio', { checked: true } )
+			).toHaveAccessibleName( 'Medium' );
+		} );
+
+		it( 'should find font size by slug when valueMode is slug', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerToggleGroup
+					fontSizes={ fontSizes }
+					value="medium"
+					valueMode="slug"
+					onChange={ onChange }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should select the medium option
+			expect(
+				screen.getByRole( 'radio', { checked: true } )
+			).toHaveAccessibleName( 'Medium' );
+		} );
+
+		it( 'should handle undefined value', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerToggleGroup
+					fontSizes={ fontSizes }
+					value={ undefined }
+					valueMode="literal"
+					onChange={ onChange }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should have no selection
+			expect(
+				screen.queryByRole( 'radio', { checked: true } )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should handle empty string value', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerToggleGroup
+					fontSizes={ fontSizes }
+					value=""
+					valueMode="literal"
+					onChange={ onChange }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should have no selection
+			expect(
+				screen.queryByRole( 'radio', { checked: true } )
+			).not.toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'onChange callback', () => {
+		it( 'should call onChange with FontSize object as second parameter', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerToggleGroup
+					fontSizes={ fontSizes }
+					onChange={ onChange }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			await user.click( screen.getByRole( 'radio', { name: 'Small' } ) );
+			expect( onChange ).toHaveBeenCalledWith( '12px', fontSizes[ 0 ] );
+		} );
+
+		it( 'should call onChange with FontSize object when selecting a different option', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerToggleGroup
+					fontSizes={ fontSizes }
+					value="medium"
+					onChange={ onChange }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Click a different option
+			await user.click( screen.getByRole( 'radio', { name: 'Small' } ) );
+			expect( onChange ).toHaveBeenCalledWith( '12px', fontSizes[ 0 ] );
+		} );
+	} );
+
+	describe( 'edge cases', () => {
+		const fontSizesWithDuplicates: FontSize[] = [
+			{
+				slug: 'small-1',
+				name: 'Small 1',
+				size: '12px',
+			},
+			{
+				slug: 'small-2',
+				name: 'Small 2',
+				size: '12px',
+			},
+			{
+				slug: 'medium',
+				name: 'Medium',
+				size: '16px',
+			},
+		];
+
+		it( 'should handle multiple font sizes with same value in literal mode', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerToggleGroup
+					fontSizes={ fontSizesWithDuplicates }
+					value="12px"
+					valueMode="literal"
+					onChange={ onChange }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should have no selection when there are multiple matches
+			expect(
+				screen.queryByRole( 'radio', { checked: true } )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should handle multiple font sizes with same value in slug mode', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerToggleGroup
+					fontSizes={ fontSizesWithDuplicates }
+					value="small-1"
+					valueMode="slug"
+					onChange={ onChange }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should select the specific font size by slug
+			expect(
+				screen.getByRole( 'radio', { checked: true } )
+			).toHaveAccessibleName( 'Small 1' );
+		} );
+	} );
+
+	describe( 'heterogeneous font sizes', () => {
+		const heterogeneousFontSizes: FontSize[] = [
+			{
+				slug: 'small',
+				name: 'Small',
+				size: '12px',
+			},
+			{
+				slug: 'medium',
+				name: 'Medium',
+				size: '1em',
+			},
+			{
+				slug: 'large',
+				name: 'Large',
+				size: '2rem',
+			},
+			{
+				slug: 'x-large',
+				name: 'Extra Large',
+				size: 'clamp(1.75rem, 3vw, 2.25rem)',
+			},
+		];
+
+		it( 'should handle different units in literal mode', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerToggleGroup
+					fontSizes={ heterogeneousFontSizes }
+					value="1em"
+					valueMode="literal"
+					onChange={ onChange }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should select the medium option (1em)
+			expect(
+				screen.getByRole( 'radio', { checked: true } )
+			).toHaveAccessibleName( 'Medium' );
+		} );
+
+		it( 'should handle complex font size values in literal mode', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerToggleGroup
+					fontSizes={ heterogeneousFontSizes }
+					value="clamp(1.75rem, 3vw, 2.25rem)"
+					valueMode="literal"
+					onChange={ onChange }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should select the extra large option
+			expect(
+				screen.getByRole( 'radio', { checked: true } )
+			).toHaveAccessibleName( 'Extra Large' );
+		} );
+
+		it( 'should handle different units in slug mode', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerToggleGroup
+					fontSizes={ heterogeneousFontSizes }
+					value="medium"
+					valueMode="slug"
+					onChange={ onChange }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should select the medium option
+			expect(
+				screen.getByRole( 'radio', { checked: true } )
+			).toHaveAccessibleName( 'Medium' );
+		} );
+	} );
+} );