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

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

@@ -46,7 +46,6 @@ const UnforwardedFontSizePicker = (
 		size = 'default',
 		units: unitsProp = DEFAULT_UNITS,
 		value,
-		valueMode = 'literal',
 		withSlider = false,
 		withReset = true,
 	} = props;
@@ -60,32 +59,15 @@ const UnforwardedFontSizePicker = (
 		availableUnits: unitsProp,
 	} );
 
-	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 selectedFontSize = 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
@@ -106,11 +88,10 @@ 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 resolvedValueForControls === 'string' ||
-		typeof fontSizes[ 0 ]?.size === 'string';
+		typeof value === 'string' || typeof fontSizes[ 0 ]?.size === 'string';
 
 	const [ valueQuantity, valueUnit ] = parseQuantityAndUnitFromRawValue(
-		resolvedValueForControls,
+		value,
 		units
 	);
 	const isValueUnitRelative =
@@ -158,16 +139,18 @@ const UnforwardedFontSizePicker = (
 						__next40pxDefaultSize={ __next40pxDefaultSize }
 						fontSizes={ fontSizes }
 						value={ value }
-						valueMode={ valueMode }
 						disableCustomFontSizes={ disableCustomFontSizes }
 						size={ size }
-						onChange={ ( newValue, selectedItem ) => {
+						onChange={ ( newValue ) => {
 							if ( newValue === undefined ) {
-								onChange?.( undefined, selectedItem );
+								onChange?.( undefined );
 							} else {
 								onChange?.(
 									hasUnits ? newValue : Number( newValue ),
-									selectedItem
+									fontSizes.find(
+										( fontSize ) =>
+											fontSize.size === newValue
+									)
 								);
 							}
 						} }
@@ -178,16 +161,18 @@ const UnforwardedFontSizePicker = (
 					<FontSizePickerToggleGroup
 						fontSizes={ fontSizes }
 						value={ value }
-						valueMode={ valueMode }
 						__next40pxDefaultSize={ __next40pxDefaultSize }
 						size={ size }
-						onChange={ ( newValue, selectedItem ) => {
+						onChange={ ( newValue ) => {
 							if ( newValue === undefined ) {
-								onChange?.( undefined, selectedItem );
+								onChange?.( undefined );
 							} else {
 								onChange?.(
 									hasUnits ? newValue : Number( newValue ),
-									selectedItem
+									fontSizes.find(
+										( fontSize ) =>
+											fontSize.size === newValue
+									)
 								);
 							}
 						} }
@@ -202,21 +187,11 @@ const UnforwardedFontSizePicker = (
 								label={ __( 'Font size' ) }
 								labelPosition="top"
 								hideLabelFromVision
-								value={
-									hasUnits
-										? `${ valueQuantity ?? '' }${
-												valueUnit ?? ''
-										  }`
-										: resolvedValueForControls
-								}
+								value={ value }
 								onChange={ ( newValue ) => {
 									setUserRequestedCustom( true );
 
-									// Treat clearing the input (empty string) as a reset
-									if (
-										newValue === undefined ||
-										newValue === ''
-									) {
+									if ( newValue === undefined ) {
 										onChange?.( undefined );
 									} else {
 										onChange?.(

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

@@ -8,7 +8,6 @@ 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';
 
@@ -33,11 +32,3 @@ 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/index.tsx

@@ -145,7 +145,7 @@ describe( 'FontSizePicker', () => {
 			{
 				option: 'Default',
 				value: '8px',
-				expectedArguments: [ undefined, undefined ],
+				expectedArguments: [ undefined ],
 			},
 			{
 				option: 'Tiny 8px',
@@ -249,7 +249,7 @@ describe( 'FontSizePicker', () => {
 			{
 				option: 'Default',
 				value: '8px',
-				expectedArguments: [ undefined, undefined ],
+				expectedArguments: [ undefined ],
 			},
 			{
 				option: 'Tiny 8px',
@@ -358,98 +358,6 @@ describe( 'FontSizePicker', () => {
 
 		commonToggleGroupTests( fontSizes );
 		commonTests( fontSizes );
-
-		describe( 'valueMode prop for toggle group', () => {
-			it( 'should find font size by size value when valueMode is literal', async () => {
-				await render(
-					<FontSizePicker
-						fontSizes={ fontSizes }
-						value="16px"
-						valueMode="literal"
-					/>
-				);
-				// 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 () => {
-				await render(
-					<FontSizePicker
-						fontSizes={ fontSizes }
-						value="medium"
-						valueMode="slug"
-					/>
-				);
-				// Should select the medium option
-				expect(
-					screen.getByRole( 'radio', { checked: true } )
-				).toHaveAccessibleName( 'Medium' );
-			} );
-
-			it( 'should handle multiple font sizes with same value in literal mode', async () => {
-				const fontSizesWithDuplicates = [
-					{
-						slug: 'small-1',
-						name: 'Small 1',
-						size: '12px',
-					},
-					{
-						slug: 'small-2',
-						name: 'Small 2',
-						size: '12px',
-					},
-					{
-						slug: 'medium',
-						name: 'Medium',
-						size: '16px',
-					},
-				];
-				await render(
-					<FontSizePicker
-						fontSizes={ fontSizesWithDuplicates }
-						value="12px"
-						valueMode="literal"
-					/>
-				);
-				// 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 fontSizesWithDuplicates = [
-					{
-						slug: 'small-1',
-						name: 'Small 1',
-						size: '12px',
-					},
-					{
-						slug: 'small-2',
-						name: 'Small 2',
-						size: '12px',
-					},
-					{
-						slug: 'medium',
-						name: 'Medium',
-						size: '16px',
-					},
-				];
-				await render(
-					<FontSizePicker
-						fontSizes={ fontSizesWithDuplicates }
-						value="small-1"
-						valueMode="slug"
-					/>
-				);
-				// Should select the specific font size by slug
-				expect(
-					screen.getByRole( 'radio', { checked: true } )
-				).toHaveAccessibleName( 'Small 1' );
-			} );
-		} );
 	} );
 
 	describe( 'with ≤ 5 heterogeneous font sizes', () => {
@@ -522,64 +430,6 @@ describe( 'FontSizePicker', () => {
 
 		commonToggleGroupTests( fontSizes );
 		commonTests( fontSizes );
-
-		describe( 'valueMode prop for heterogeneous toggle group', () => {
-			it( 'should find font size by size value when valueMode is literal', async () => {
-				await render(
-					<FontSizePicker
-						fontSizes={ fontSizes }
-						value="1em"
-						valueMode="literal"
-					/>
-				);
-				// Should select the medium option (1em)
-				expect(
-					screen.getByRole( 'radio', { checked: true } )
-				).toHaveAccessibleName( 'Medium' );
-			} );
-
-			it( 'should find font size by slug when valueMode is slug', async () => {
-				await render(
-					<FontSizePicker
-						fontSizes={ fontSizes }
-						value="medium"
-						valueMode="slug"
-					/>
-				);
-				// Should select the medium option
-				expect(
-					screen.getByRole( 'radio', { checked: true } )
-				).toHaveAccessibleName( 'Medium' );
-			} );
-
-			it( 'should handle complex font size values in literal mode', async () => {
-				await render(
-					<FontSizePicker
-						fontSizes={ fontSizes }
-						value="clamp(1.75rem, 3vw, 2.25rem)"
-						valueMode="literal"
-					/>
-				);
-				// Should select the extra large option
-				expect(
-					screen.getByRole( 'radio', { checked: true } )
-				).toHaveAccessibleName( 'Extra Large' );
-			} );
-
-			it( 'should handle complex font size values in slug mode', async () => {
-				await render(
-					<FontSizePicker
-						fontSizes={ fontSizes }
-						value="x-large"
-						valueMode="slug"
-					/>
-				);
-				// Should select the extra large option
-				expect(
-					screen.getByRole( 'radio', { checked: true } )
-				).toHaveAccessibleName( 'Extra Large' );
-			} );
-		} );
 	} );
 
 	function commonToggleGroupTests( fontSizes: FontSize[] ) {
@@ -803,312 +653,4 @@ describe( 'FontSizePicker', () => {
 			expect( units[ 2 ] ).toHaveAccessibleName( 'ex' );
 		} );
 	}
-
-	describe( 'valueMode prop', () => {
-		// Use 6 font sizes to trigger select control (> 5)
-		const fontSizes = [
-			{
-				slug: 'small',
-				name: 'Small',
-				size: '12px',
-			},
-			{
-				slug: 'medium',
-				name: 'Medium',
-				size: '16px',
-			},
-			{
-				slug: 'large',
-				name: 'Large',
-				size: '20px',
-			},
-			{
-				slug: 'x-large',
-				name: 'Extra Large',
-				size: '24px',
-			},
-			{
-				slug: 'xx-large',
-				name: 'XX Large',
-				size: '28px',
-			},
-			{
-				slug: 'huge',
-				name: 'Huge',
-				size: '32px',
-			},
-		];
-
-		describe( 'valueMode="literal" (default)', () => {
-			it( 'should find font size by size value when valueMode is literal', async () => {
-				await render(
-					<FontSizePicker
-						fontSizes={ fontSizes }
-						value="16px"
-						valueMode="literal"
-					/>
-				);
-				// Should select the medium option (16px)
-				expect(
-					screen.getByRole( 'combobox', { name: 'Font size' } )
-				).toHaveTextContent( 'Medium' );
-			} );
-
-			it( 'should call onChange with size value and FontSize object when valueMode is literal', async () => {
-				const user = userEvent.setup();
-				const onChange = jest.fn();
-				await render(
-					<FontSizePicker
-						fontSizes={ fontSizes }
-						onChange={ onChange }
-						valueMode="literal"
-					/>
-				);
-				await user.click(
-					screen.getByRole( 'combobox', { name: 'Font size' } )
-				);
-				await user.click(
-					screen.getByRole( 'option', { name: 'Medium 16px' } )
-				);
-				expect( onChange ).toHaveBeenCalledWith(
-					'16px',
-					fontSizes[ 1 ]
-				);
-			} );
-		} );
-
-		describe( 'valueMode="slug"', () => {
-			it( 'should find font size by slug when valueMode is slug', async () => {
-				await render(
-					<FontSizePicker
-						fontSizes={ fontSizes }
-						value="medium"
-						valueMode="slug"
-					/>
-				);
-				// Should select the medium option
-				expect(
-					screen.getByRole( 'combobox', { name: 'Font size' } )
-				).toHaveTextContent( 'Medium' );
-			} );
-
-			it( 'should call onChange with size value and FontSize object when valueMode is slug', async () => {
-				const user = userEvent.setup();
-				const onChange = jest.fn();
-				await render(
-					<FontSizePicker
-						fontSizes={ fontSizes }
-						onChange={ onChange }
-						valueMode="slug"
-					/>
-				);
-				await user.click(
-					screen.getByRole( 'combobox', { name: 'Font size' } )
-				);
-				await user.click(
-					screen.getByRole( 'option', { name: 'Large 20px' } )
-				);
-				expect( onChange ).toHaveBeenCalledWith(
-					'20px',
-					fontSizes[ 2 ]
-				);
-			} );
-
-			it( 'should handle undefined value when valueMode is slug', async () => {
-				await render(
-					<FontSizePicker
-						fontSizes={ fontSizes }
-						value={ undefined }
-						valueMode="slug"
-					/>
-				);
-				// Should show default option
-				expect(
-					screen.getByRole( 'combobox', { name: 'Font size' } )
-				).toHaveTextContent( 'Default' );
-			} );
-
-			it( 'should handle empty string value when valueMode is slug', async () => {
-				await render(
-					<FontSizePicker
-						fontSizes={ fontSizes }
-						value=""
-						valueMode="slug"
-					/>
-				);
-				// Should show default option
-				expect(
-					screen.getByRole( 'combobox', { name: 'Font size' } )
-				).toHaveTextContent( 'Default' );
-			} );
-		} );
-
-		describe( 'edge cases with valueMode', () => {
-			// Use 6 font sizes to trigger select control (> 5)
-			const fontSizesWithDuplicates = [
-				{
-					slug: 'small-1',
-					name: 'Small 1',
-					size: '12px',
-				},
-				{
-					slug: 'small-2',
-					name: 'Small 2',
-					size: '12px',
-				},
-				{
-					slug: 'medium',
-					name: 'Medium',
-					size: '16px',
-				},
-				{
-					slug: 'large',
-					name: 'Large',
-					size: '20px',
-				},
-				{
-					slug: 'x-large',
-					name: 'Extra Large',
-					size: '24px',
-				},
-				{
-					slug: 'huge',
-					name: 'Huge',
-					size: '28px',
-				},
-			];
-
-			it( 'should handle multiple font sizes with same value in literal mode', async () => {
-				await render(
-					<FontSizePicker
-						fontSizes={ fontSizesWithDuplicates }
-						value="12px"
-						valueMode="literal"
-					/>
-				);
-				// 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 () => {
-				await render(
-					<FontSizePicker
-						fontSizes={ fontSizesWithDuplicates }
-						value="small-1"
-						valueMode="slug"
-					/>
-				);
-				// Should select the specific font size by slug
-				expect(
-					screen.getByRole( 'combobox', { name: 'Font size' } )
-				).toHaveTextContent( 'Small 1' );
-			} );
-		} );
-	} );
-
-	describe( 'onChange callback signature', () => {
-		// Use 6 font sizes to trigger select control (> 5)
-		const fontSizes = [
-			{
-				slug: 'small',
-				name: 'Small',
-				size: '12px',
-			},
-			{
-				slug: 'medium',
-				name: 'Medium',
-				size: '16px',
-			},
-			{
-				slug: 'large',
-				name: 'Large',
-				size: '20px',
-			},
-			{
-				slug: 'x-large',
-				name: 'Extra Large',
-				size: '24px',
-			},
-			{
-				slug: 'xx-large',
-				name: 'XX Large',
-				size: '28px',
-			},
-			{
-				slug: 'huge',
-				name: 'Huge',
-				size: '32px',
-			},
-		];
-
-		it( 'should call onChange with FontSize object as second parameter for select control', async () => {
-			const user = userEvent.setup();
-			const onChange = jest.fn();
-			await render(
-				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
-			);
-			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(
-				<FontSizePicker
-					fontSizes={ fontSizes }
-					value="16px" // Start with a selected value
-					onChange={ onChange }
-				/>
-			);
-			await user.click(
-				screen.getByRole( 'combobox', { name: 'Font size' } )
-			);
-			await user.click(
-				screen.getByRole( 'option', { name: 'Default' } )
-			);
-			expect( onChange ).toHaveBeenCalledWith( undefined, undefined );
-		} );
-
-		it( 'should call onChange with FontSize object as second parameter for toggle group control', async () => {
-			const user = userEvent.setup();
-			const onChange = jest.fn();
-			// Use fewer font sizes to trigger toggle group (≤ 5)
-			const toggleGroupFontSizes = [
-				{
-					slug: 'small',
-					name: 'Small',
-					size: '12px',
-				},
-				{
-					slug: 'medium',
-					name: 'Medium',
-					size: '16px',
-				},
-				{
-					slug: 'large',
-					name: 'Large',
-					size: '20px',
-				},
-			];
-			await render(
-				<FontSizePicker
-					fontSizes={ toggleGroupFontSizes }
-					onChange={ onChange }
-				/>
-			);
-			await user.click( screen.getByRole( 'radio', { name: 'Small' } ) );
-			expect( onChange ).toHaveBeenCalledWith(
-				'12px',
-				toggleGroupFontSizes[ 0 ]
-			);
-		} );
-	} );
 } );

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

@@ -40,14 +40,6 @@ export type FontSizePickerProps = {
 	 * as a number, the component operates in "unitless mode" where the `units` property has no effect.
 	 */
 	value?: number | string;
-	/**
-	 * Determines how the `value` prop should be interpreted.
-	 * - `'literal'`: The `value` prop contains the actual font size value (number or string)
-	 * - `'slug'`: The `value` prop contains the slug of the selected font size
-	 *
-	 * @default 'literal'
-	 */
-	valueMode?: 'literal' | 'slug';
 	/**
 	 * If `true`, a slider will be displayed alongside the input field when a
 	 * custom font size is active. Has no effect when `disableCustomFontSizes`
@@ -104,26 +96,17 @@ export type FontSize = {
 	 * size. Used for the class generation process.
 	 */
 	slug: string;
-	/**
-	 * The `hint` property is an optional string that provides additional information
-	 * about the font size, such as fluid typography ranges or custom descriptions.
-	 * Consumers can use this to provide their own preferred hints.
-	 */
-	hint?: string;
 };
 
 export type FontSizePickerSelectProps = Pick<
 	FontSizePickerProps,
-	'value' | 'size' | 'valueMode'
+	'value' | 'size'
 > & {
 	fontSizes: NonNullable< FontSizePickerProps[ 'fontSizes' ] >;
 	disableCustomFontSizes: NonNullable<
 		FontSizePickerProps[ 'disableCustomFontSizes' ]
 	>;
-	onChange: (
-		value: number | string | undefined,
-		selectedItem?: FontSize
-	) => void;
+	onChange: NonNullable< FontSizePickerProps[ 'onChange' ] >;
 	onSelectCustom: () => void;
 	__next40pxDefaultSize: boolean;
 };
@@ -137,11 +120,8 @@ export type FontSizePickerSelectOption = {
 
 export type FontSizePickerToggleGroupProps = Pick<
 	FontSizePickerProps,
-	'value' | 'size' | '__next40pxDefaultSize' | 'valueMode'
+	'value' | 'size' | '__next40pxDefaultSize'
 > & {
 	fontSizes: NonNullable< FontSizePickerProps[ 'fontSizes' ] >;
-	onChange: (
-		value: number | string | undefined,
-		selectedItem?: FontSize
-	) => void;
+	onChange: NonNullable< FontSizePickerProps[ 'onChange' ] >;
 };