FontSizePicker: Update hint text to match the design

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

@@ -75,6 +75,7 @@ export default function CustomSelectControl( {
 	/** @type {import('../select-control/types').SelectControlProps.size} */
 	size = 'default',
 	value: _selectedItem,
+	__experimentalShowSelectedHint = false,
 } ) {
 	const {
 		getLabelProps,
@@ -187,6 +188,12 @@ export default function CustomSelectControl( {
 					} ) }
 				>
 					{ 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/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/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/index.tsx

@@ -19,7 +19,7 @@ import RangeControl from '../range-control';
 import { Flex, FlexItem } from '../flex';
 import { default as UnitControl, useCustomUnits } from '../unit-control';
 import { VisuallyHidden } from '../visually-hidden';
-import { parseNumberAndUnitFromSize, isSimpleCssValue } from './utils';
+import { parseNumberAndUnitFromSize, getCommonSizeUnit } from './utils';
 import { HStack } from '../h-stack';
 import type { FontSizePickerProps } from './types';
 import {
@@ -32,6 +32,7 @@ import {
 import { Spacer } from '../spacer';
 import FontSizePickerSelect from './select';
 import FontSizePickerToggleGroup from './toggle-group';
+import { T_SHIRT_NAMES } from './constants';
 
 const UnforwardedFontSizePicker = (
 	props: FontSizePickerProps,
@@ -74,48 +75,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 ( ! selectedFontSize ) {
+		if ( ! shouldUseSelectControl ) {
+			if ( selectedFontSize ) {
+				return (
+					selectedFontSize.name ||
+					T_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]
+				);
+			}
 			return '';
 		}
 
-		if ( shouldUseSelectControl ) {
-			return isSimpleCssValue( selectedFontSize.size )
-				? `(${ selectedFontSize.size })`
-				: '';
+		const commonUnit = getCommonSizeUnit( fontSizes );
+		if ( commonUnit ) {
+			return `(${ commonUnit })`;
 		}
 
-		// Calculate the `hint` for toggle group control.
-		let hint = selectedFontSize.name ?? '';
-		const fontSizesContainComplexValues = fontSizes.some(
-			( fontSize ) => ! isSimpleCssValue( fontSize.size )
-		);
-		if (
-			! fontSizesContainComplexValues &&
-			typeof selectedFontSize.size === 'string'
-		) {
-			const [ , unit ] = parseNumberAndUnitFromSize(
-				selectedFontSize.size
-			);
-			hint += `(${ unit })`;
-		}
-		return hint;
+		return '';
 	}, [
 		showCustomValueControl,
-		isCustomValue,
-		selectedFontSize,
-		value,
 		shouldUseSelectControl,
+		selectedFontSize,
 		fontSizes,
 	] );
 

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

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

packages/components/src/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/utils.ts

@@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import type { FontSizePickerProps } from './types';
+import type { FontSizePickerProps, FontSize } from './types';
 
 /**
  * Given a font size, returns the numeric part and unit part. For example, given
@@ -39,3 +39,23 @@ export function isSimpleCssValue(
 	const sizeRegex = /^[\d\.]+(px|em|rem|vw|vh|%)?$/i;
 	return sizeRegex.test( String( value ) );
 }
+
+/**
+ * If all of the given font sizes have the same unit (e.g. 'px'), return that
+ * unit. Otherwise return null.
+ *
+ * @param  fontSizes List of font sizes.
+ * @return The common unit, or null.
+ */
+export function getCommonSizeUnit( fontSizes: FontSize[] ) {
+	const [ firstFontSize, ...otherFontSizes ] = fontSizes;
+	if ( ! firstFontSize ) {
+		return null;
+	}
+	const [ , firstUnit ] = parseNumberAndUnitFromSize( firstFontSize.size );
+	const areAllSizesSameUnit = otherFontSizes.every( ( fontSize ) => {
+		const [ , unit ] = parseNumberAndUnitFromSize( fontSize.size );
+		return unit === firstUnit;
+	} );
+	return areAllSizesSameUnit ? firstUnit : null;
+}