FontSizePicker: Update hint text to match the design

packages/components/CHANGELOG.md

@@ -28,6 +28,7 @@
 -   `UnitControl`: Remove outer wrapper to normalize className placement ([#41860](https://github.com/WordPress/gutenberg/pull/41860)).
 -   `ColorPalette`: Fix transparent checkered background pattern ([#45295](https://github.com/WordPress/gutenberg/pull/45295)).
 -   `ToggleGroupControl`: Add `isDeselectable` prop to allow deselecting the selected option ([#45123](https://github.com/WordPress/gutenberg/pull/45123)).
+-   `FontSizePicker`: Improve hint text shown next to 'Font size' label ([#44966](https://github.com/WordPress/gutenberg/pull/44966)).
 
 ### Bug Fix
 

packages/components/src/custom-select-control/index.js

@@ -79,6 +79,7 @@ export default function CustomSelectControl( props ) {
 		value: _selectedItem,
 		onMouseOver,
 		onMouseOut,
+		__experimentalShowSelectedHint = false,
 	} = props;
 
 	const {
@@ -194,6 +195,12 @@ export default function CustomSelectControl( props ) {
 					} ) }
 				>
 					{ itemToString( selectedItem ) }
+					{ __experimentalShowSelectedHint &&
+						selectedItem.__experimentalHint && (
+							<span className="components-custom-select-control__hint">
+								{ selectedItem.__experimentalHint }
+							</span>
+						) }
 				</SelectControlSelect>
 			</InputBaseWithBackCompatMinWidth>
 			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }

packages/components/src/custom-select-control/stories/index.js

@@ -8,6 +8,7 @@ export default {
 	component: CustomSelectControl,
 	argTypes: {
 		__next36pxDefaultSize: { control: { type: 'boolean' } },
+		__experimentalShowSelectedHint: { control: { type: 'boolean' } },
 		size: {
 			control: {
 				type: 'radio',

packages/components/src/custom-select-control/style.scss

@@ -9,6 +9,11 @@
 	outline: 0; // focus ring is handled elsewhere
 }
 
+.components-custom-select-control__hint {
+	color: $gray-600;
+	margin-left: 10px;
+}
+
 .components-custom-select-control__menu {
 	// Hide when collapsed.
 	&[aria-hidden="true"] {
@@ -50,7 +55,7 @@
 		background: $gray-300;
 	}
 	.components-custom-select-control__item-hint {
-		color: $gray-700;
+		color: $gray-600;
 		text-align: right;
 		padding-right: $grid-unit-05;
 	}

packages/components/src/custom-select-control/test/index.js

@@ -46,4 +46,43 @@ describe( 'CustomSelectControl', () => {
 
 		expect( onKeyDown ).toHaveBeenCalledTimes( 0 );
 	} );
+
+	it( 'does not show selected hint by default', () => {
+		render(
+			<CustomSelectControl
+				label="Custom select"
+				options={ [
+					{
+						key: 'one',
+						name: 'One',
+						__experimentalHint: 'Hint',
+					},
+				] }
+				__nextUnconstrainedWidth
+			/>
+		);
+		expect(
+			screen.getByRole( 'button', { name: 'Custom select' } )
+		).not.toHaveTextContent( 'Hint' );
+	} );
+
+	it( 'shows selected hint when __experimentalShowSelectedHint is set', () => {
+		render(
+			<CustomSelectControl
+				label="Custom select"
+				options={ [
+					{
+						key: 'one',
+						name: 'One',
+						__experimentalHint: 'Hint',
+					},
+				] }
+				__experimentalShowSelectedHint
+				__nextUnconstrainedWidth
+			/>
+		);
+		expect(
+			screen.getByRole( 'button', { name: 'Custom select' } )
+		).toHaveTextContent( 'Hint' );
+	} );
 } );

packages/components/src/font-size-picker/constants.ts

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * List of T-shirt abbreviations.
+ *
+ * When there are 5 font sizes or fewer, we assume that the font sizes are
+ * ordered by size and show T-shirt labels.
+ */
+export const T_SHIRT_ABBREVIATIONS = [
+	/* 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' ),
+];
+
+/**
+ * List of T-shirt names.
+ *
+ * When there are 5 font sizes or fewer, we assume that the font sizes are
+ * ordered by size and show T-shirt labels.
+ */
+export const T_SHIRT_NAMES = [
+	__( 'Small' ),
+	__( 'Medium' ),
+	__( 'Large' ),
+	__( 'Extra Large' ),
+	__( 'Extra Extra Large' ),
+];

packages/components/src/font-size-picker/font-size-picker-select.tsx

@@ -12,6 +12,7 @@ import type {
 	FontSizePickerSelectProps,
 	FontSizePickerSelectOption,
 } from './types';
+import { getCommonSizeUnit, isSimpleCssValue } from './utils';
 
 const DEFAULT_OPTION: FontSizePickerSelectOption = {
 	key: 'default',
@@ -34,18 +35,27 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 		onSelectCustom,
 	} = props;
 
+	const areAllSizesSameUnit = !! getCommonSizeUnit( fontSizes );
+
 	const options: FontSizePickerSelectOption[] = [
 		DEFAULT_OPTION,
 		...fontSizes.map( ( fontSize ) => {
-			const [ quantity ] = parseQuantityAndUnitFromRawValue(
-				fontSize.size
-			);
+			let hint;
+			if ( areAllSizesSameUnit ) {
+				const [ quantity ] = parseQuantityAndUnitFromRawValue(
+					fontSize.size
+				);
+				if ( quantity !== undefined ) {
+					hint = String( quantity );
+				}
+			} else if ( isSimpleCssValue( fontSize.size ) ) {
+				hint = String( fontSize.size );
+			}
 			return {
 				key: fontSize.slug,
 				name: fontSize.name || fontSize.slug,
 				value: fontSize.size,
-				__experimentalHint:
-					quantity !== undefined ? String( quantity ) : undefined,
+				__experimentalHint: hint,
 			};
 		} ),
 		...( disableCustomFontSizes ? [] : [ CUSTOM_OPTION ] ),
@@ -68,6 +78,7 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 			) }
 			options={ options }
 			value={ selectedOption }
+			__experimentalShowSelectedHint
 			onChange={ ( {
 				selectedItem,
 			}: {

packages/components/src/font-size-picker/font-size-picker-toggle-group.tsx

@@ -10,26 +10,9 @@ import {
 	ToggleGroupControl,
 	ToggleGroupControlOption,
 } from '../toggle-group-control';
+import { T_SHIRT_ABBREVIATIONS, T_SHIRT_NAMES } from './constants';
 import type { FontSizePickerToggleGroupProps } from './types';
 
-/**
- * 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' ),
-];
-
 const FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {
 	const { fontSizes, value, __nextHasNoMarginBottom, size, onChange } = props;
 	return (
@@ -46,8 +29,8 @@ const FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {
 				<ToggleGroupControlOption
 					key={ fontSize.slug }
 					value={ fontSize.size }
-					label={ FONT_SIZES_ALIASES[ index ] }
-					aria-label={ fontSize.name || FONT_SIZES_ALIASES[ index ] }
+					label={ T_SHIRT_ABBREVIATIONS[ index ] }
+					aria-label={ fontSize.name || T_SHIRT_NAMES[ index ] }
 					showTooltip
 				/>
 			) ) }

packages/components/src/font-size-picker/index.tsx

@@ -23,7 +23,7 @@ import {
 	useCustomUnits,
 } from '../unit-control';
 import { VisuallyHidden } from '../visually-hidden';
-import { isSimpleCssValue } from './utils';
+import { getCommonSizeUnit } from './utils';
 import { HStack } from '../h-stack';
 import type { FontSizePickerProps } from './types';
 import {
@@ -36,6 +36,7 @@ import {
 import { Spacer } from '../spacer';
 import FontSizePickerSelect from './font-size-picker-select';
 import FontSizePickerToggleGroup from './font-size-picker-toggle-group';
+import { T_SHIRT_NAMES } from './constants';
 
 const UnforwardedFontSizePicker = (
 	props: FontSizePickerProps,
@@ -78,53 +79,29 @@ const UnforwardedFontSizePicker = (
 
 	const headerHint = useMemo( () => {
 		if ( showCustomValueControl ) {
-			return `(${ __( 'Custom' ) })`;
+			return __( 'Custom' );
 		}
 
-		// If we have a custom value that is not available in the font sizes,
-		// show it as a hint as long as it's a simple CSS value.
-		if ( isCustomValue ) {
-			return (
-				value !== undefined &&
-				isSimpleCssValue( value ) &&
-				`(${ value })`
-			);
+		if ( ! shouldUseSelectControl ) {
+			if ( selectedFontSize ) {
+				return (
+					selectedFontSize.name ||
+					T_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]
+				);
+			}
+			return '';
 		}
 
-		if ( shouldUseSelectControl ) {
-			return (
-				selectedFontSize?.size !== undefined &&
-				isSimpleCssValue( selectedFontSize?.size ) &&
-				`(${ selectedFontSize?.size })`
-			);
+		const commonUnit = getCommonSizeUnit( fontSizes );
+		if ( commonUnit ) {
+			return `(${ commonUnit })`;
 		}
 
-		if ( ! selectedFontSize ) {
-			return __( 'Default' );
-		}
-
-		// Calculate the `hint` for toggle group control.
-		let hint = selectedFontSize.name || selectedFontSize.slug;
-		const fontSizesContainComplexValues = fontSizes.some(
-			( fontSize ) => ! isSimpleCssValue( fontSize.size )
-		);
-		if (
-			! fontSizesContainComplexValues &&
-			typeof selectedFontSize.size === 'string'
-		) {
-			const [ , unit ] = parseQuantityAndUnitFromRawValue(
-				selectedFontSize.size,
-				units
-			);
-			hint += `(${ unit })`;
-		}
-		return hint;
+		return '';
 	}, [
 		showCustomValueControl,
-		isCustomValue,
-		selectedFontSize,
-		value,
 		shouldUseSelectControl,
+		selectedFontSize,
 		fontSizes,
 	] );