@wordpress/components 30.6.1-next.ff1cebbba.0 → 30.7.0

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

@@ -2,16 +2,17 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import CustomSelectControl from '../custom-select-control';
 import type {
 	FontSizePickerSelectProps,
 	FontSizePickerSelectOption,
 } from './types';
-import { isSimpleCssValue } from './utils';
+import { generateFontSizeHint } from './utils';
+import { StyledCustomSelectControl } from './styles';
 
 const DEFAULT_OPTION: FontSizePickerSelectOption = {
 	key: 'default',
@@ -20,15 +21,19 @@ const DEFAULT_OPTION: FontSizePickerSelectOption = {
 };
 
 const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
-	const { __next40pxDefaultSize, fontSizes, value, size, onChange } = props;
+	const {
+		__next40pxDefaultSize,
+		fontSizes,
+		value,
+		size,
+		valueMode = 'literal',
+		onChange,
+	} = props;
 
 	const options: FontSizePickerSelectOption[] = [
 		DEFAULT_OPTION,
 		...fontSizes.map( ( fontSize ) => {
-			let hint;
-			if ( isSimpleCssValue( fontSize.size ) ) {
-				hint = String( fontSize.size );
-			}
+			const hint = generateFontSizeHint( fontSize );
 			return {
 				key: fontSize.slug,
 				name: fontSize.name || fontSize.slug,
@@ -38,11 +43,30 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 		} ),
 	];
 
-	const selectedOption =
-		options.find( ( option ) => option.value === value ) ?? DEFAULT_OPTION;
+	const selectedOption = useMemo( () => {
+		if ( value === undefined ) {
+			return DEFAULT_OPTION;
+		}
+
+		// If valueMode is 'slug', find by slug
+		if ( valueMode === 'slug' ) {
+			const optionBySlug = options.find(
+				( option ) => option.key === value
+			);
+			if ( optionBySlug ) {
+				return optionBySlug;
+			}
+		}
+
+		// If valueMode is 'literal', find by value (size)
+		return (
+			options.find( ( option ) => option.value === value ) ??
+			DEFAULT_OPTION
+		);
+	}, [ value, valueMode, options ] );
 
 	return (
-		<CustomSelectControl
+		<StyledCustomSelectControl
 			__next40pxDefaultSize={ __next40pxDefaultSize }
 			__shouldNotWarnDeprecated36pxSize
 			className="components-font-size-picker__select"
@@ -61,7 +85,16 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 			}: {
 				selectedItem: FontSizePickerSelectOption;
 			} ) => {
-				onChange( selectedItem.value );
+				// Find the corresponding FontSize object
+				const matchingFontSize =
+					selectedItem.key === 'default'
+						? undefined
+						: fontSizes.find(
+								( fontSize ) =>
+									fontSize.slug === selectedItem.key
+						  );
+
+				onChange( selectedItem.value, matchingFontSize );
 			} }
 			size={ size }
 		/>

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

@@ -14,7 +14,46 @@ import { T_SHIRT_ABBREVIATIONS, T_SHIRT_NAMES } from './constants';
 import type { FontSizePickerToggleGroupProps } from './types';
 
 const FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {
-	const { fontSizes, value, __next40pxDefaultSize, size, onChange } = props;
+	const {
+		fontSizes,
+		value,
+		valueMode = 'literal',
+		__next40pxDefaultSize,
+		size,
+		onChange,
+	} = props;
+
+	// Find the current value based on valueMode
+	const currentValue = ( () => {
+		if ( ! value ) {
+			return undefined;
+		}
+
+		// If valueMode is 'slug', the value is already the slug
+		if ( valueMode === 'slug' ) {
+			return String( value );
+		}
+
+		// If valueMode is 'literal', find the font size by size value
+		// If multiple font sizes have the same size value, we can't distinguish them
+		// without additional information, so we return undefined to avoid incorrect selection
+		const matchingFontSizes = fontSizes.filter(
+			( fontSize ) => fontSize.size === value
+		);
+
+		// If there are multiple matches, return undefined to avoid selecting the wrong font size
+		if ( matchingFontSizes.length > 1 ) {
+			return undefined;
+		}
+
+		// Find the font size by size value
+		const fontSizeBySize = fontSizes.find(
+			( fontSize ) => fontSize.size === value
+		);
+
+		return fontSizeBySize?.slug;
+	} )();
+
 	return (
 		<ToggleGroupControl
 			__nextHasNoMarginBottom
@@ -22,15 +61,30 @@ const FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {
 			__shouldNotWarnDeprecated36pxSize
 			label={ __( 'Font size' ) }
 			hideLabelFromVision
-			value={ value }
-			onChange={ onChange }
+			value={ currentValue }
+			onChange={ ( newSlug: string | number | undefined ) => {
+				if ( newSlug === undefined ) {
+					onChange( undefined );
+				} else {
+					// Find the font size by slug
+					const selectedFontSize = fontSizes.find(
+						( fontSize ) => fontSize.slug === String( newSlug )
+					);
+					if ( selectedFontSize ) {
+						onChange(
+							selectedFontSize.size as number | string,
+							selectedFontSize
+						);
+					}
+				}
+			} }
 			isBlock
 			size={ size }
 		>
 			{ fontSizes.map( ( fontSize, index ) => (
 				<ToggleGroupControlOption
 					key={ fontSize.slug }
-					value={ fontSize.size }
+					value={ fontSize.slug }
 					label={ T_SHIRT_ABBREVIATIONS[ index ] }
 					aria-label={ fontSize.name || T_SHIRT_NAMES[ index ] }
 					showTooltip

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' );
+		} );
+	} );
+} );