Remove HeaderHint from font size picker.

WordPress · Feb 3, 2025 · 5842e3b · 5842e3b
1 parent be0e151
commit 5842e3b
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 123 deletions.
diff --git a/packages/components/src/font-size-picker/font-size-picker-select.tsx b/packages/components/src/font-size-picker/font-size-picker-select.tsx
@@ -7,12 +7,11 @@ import { __, sprintf } from '@wordpress/i18n';
  * Internal dependencies
  */
 import CustomSelectControl from '../custom-select-control';
-import { parseQuantityAndUnitFromRawValue } from '../unit-control';
 import type {
 	FontSizePickerSelectProps,
 	FontSizePickerSelectOption,
 } from './types';
-import { getCommonSizeUnit, isSimpleCssValue } from './utils';
+import { isSimpleCssValue } from './utils';
 
 const DEFAULT_OPTION: FontSizePickerSelectOption = {
 	key: 'default',
@@ -36,20 +35,11 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 		onSelectCustom,
 	} = props;
 
-	const areAllSizesSameUnit = !! getCommonSizeUnit( fontSizes );
-
 	const options: FontSizePickerSelectOption[] = [
 		DEFAULT_OPTION,
 		...fontSizes.map( ( fontSize ) => {
 			let hint;
-			if ( areAllSizesSameUnit ) {
-				const [ quantity ] = parseQuantityAndUnitFromRawValue(
-					fontSize.size
-				);
-				if ( quantity !== undefined ) {
-					hint = String( quantity );
-				}
-			} else if ( isSimpleCssValue( fontSize.size ) ) {
+			if ( isSimpleCssValue( fontSize.size ) ) {
 				hint = String( fontSize.size );
 			}
 			return {

diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx
@@ -8,7 +8,7 @@ import type { ForwardedRef } from 'react';
  */
 import { __ } from '@wordpress/i18n';
 import { settings } from '@wordpress/icons';
-import { useState, useMemo, forwardRef } from '@wordpress/element';
+import { useState, forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,19 +22,11 @@ import {
 	useCustomUnits,
 } from '../unit-control';
 import { VisuallyHidden } from '../visually-hidden';
-import { getCommonSizeUnit } from './utils';
 import type { FontSizePickerProps } from './types';
-import {
-	Container,
-	Header,
-	HeaderHint,
-	HeaderLabel,
-	HeaderToggle,
-} from './styles';
+import { Container, Header, HeaderLabel, HeaderToggle } from './styles';
 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';
 import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];
@@ -83,29 +75,6 @@ const UnforwardedFontSizePicker = (
 				: ( 'togglegroup' as const );
 	}
 
-	const headerHint = useMemo( () => {
-		switch ( currentPickerType ) {
-			case 'custom':
-				return __( 'Custom' );
-			case 'togglegroup':
-				if ( selectedFontSize ) {
-					return (
-						selectedFontSize.name ||
-						T_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]
-					);
-				}
-				break;
-			case 'select':
-				const commonUnit = getCommonSizeUnit( fontSizes );
-				if ( commonUnit ) {
-					return `(${ commonUnit })`;
-				}
-				break;
-		}
-
-		return '';
-	}, [ currentPickerType, selectedFontSize, fontSizes ] );
-
 	if ( fontSizes.length === 0 && disableCustomFontSizes ) {
 		return null;
 	}
@@ -135,16 +104,7 @@ const UnforwardedFontSizePicker = (
 			<VisuallyHidden as="legend">{ __( 'Font size' ) }</VisuallyHidden>
 			<Spacer>
 				<Header className="components-font-size-picker__header">
-					<HeaderLabel
-						aria-label={ `${ __( 'Size' ) } ${ headerHint || '' }` }
-					>
-						{ __( 'Size' ) }
-						{ headerHint && (
-							<HeaderHint className="components-font-size-picker__header__hint">
-								{ headerHint }
-							</HeaderHint>
-						) }
-					</HeaderLabel>
+					<HeaderLabel>{ __( 'Font size' ) }</HeaderLabel>
 					{ ! disableCustomFontSizes && (
 						<HeaderToggle
 							label={
@@ -213,7 +173,7 @@ const UnforwardedFontSizePicker = (
 							<UnitControl
 								__next40pxDefaultSize={ __next40pxDefaultSize }
 								__shouldNotWarnDeprecated36pxSize
-								label={ __( 'Custom' ) }
+								label={ __( 'Font size' ) }
 								labelPosition="top"
 								hideLabelFromVision
 								value={ value }
@@ -245,7 +205,7 @@ const UnforwardedFontSizePicker = (
 										}
 										__shouldNotWarnDeprecated36pxSize
 										className="components-font-size-picker__custom-input"
-										label={ __( 'Custom Size' ) }
+										label={ __( 'Font size' ) }
 										hideLabelFromVision
 										value={ valueQuantity }
 										initialPosition={ fallbackFontSize }

diff --git a/packages/components/src/font-size-picker/styles.ts b/packages/components/src/font-size-picker/styles.ts
@@ -10,7 +10,6 @@ import BaseControl from '../base-control';
 import Button from '../button';
 import { HStack } from '../h-stack';
 import { space } from '../utils/space';
-import { COLORS } from '../utils';
 
 export const Container = styled.fieldset`
 	border: 0;
@@ -33,7 +32,3 @@ export const HeaderLabel = styled( BaseControl.VisualLabel )`
 	justify-content: flex-start;
 	margin-bottom: 0;
 `;
-
-export const HeaderHint = styled.span`
-	color: ${ COLORS.gray[ 700 ] };
-`;
diff --git a/packages/components/src/font-size-picker/test/utils.ts b/packages/components/src/font-size-picker/test/utils.ts
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { isSimpleCssValue, getCommonSizeUnit } from '../utils';
+import { isSimpleCssValue } from '../utils';
 
 describe( 'isSimpleCssValue', () => {
 	test.each( [
@@ -31,39 +31,3 @@ describe( 'isSimpleCssValue', () => {
 		expect( isSimpleCssValue( cssValue ) ).toBe( result );
 	} );
 } );
-
-describe( 'getCommonSizeUnit', () => {
-	it( 'returns null when fontSizes is empty', () => {
-		expect( getCommonSizeUnit( [] ) ).toBe( null );
-	} );
-
-	it( 'returns px when all sizes are px', () => {
-		expect(
-			getCommonSizeUnit( [
-				{ slug: 'small', size: '10px' },
-				{ slug: 'medium', size: '20px' },
-				{ slug: 'large', size: '30px' },
-			] )
-		).toBe( 'px' );
-	} );
-
-	it( 'returns em when all sizes are em', () => {
-		expect(
-			getCommonSizeUnit( [
-				{ slug: 'small', size: '1em' },
-				{ slug: 'medium', size: '2em' },
-				{ slug: 'large', size: '3em' },
-			] )
-		).toBe( 'em' );
-	} );
-
-	it( 'returns null when sizes are heterogeneous', () => {
-		expect(
-			getCommonSizeUnit( [
-				{ slug: 'small', size: '10px' },
-				{ slug: 'medium', size: '2em' },
-				{ slug: 'large', size: '3rem' },
-			] )
-		).toBe( null );
-	} );
-} );
diff --git a/packages/components/src/font-size-picker/utils.ts b/packages/components/src/font-size-picker/utils.ts
@@ -1,8 +1,7 @@
 /**
  * Internal dependencies
  */
-import type { FontSizePickerProps, FontSize } from './types';
-import { parseQuantityAndUnitFromRawValue } from '../unit-control';
+import type { FontSizePickerProps } from './types';
 
 /**
  * Some themes use css vars for their font sizes, so until we
@@ -18,25 +17,3 @@ export function isSimpleCssValue(
 		/^[\d\.]+(px|em|rem|vw|vh|%|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)?$/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 ] = parseQuantityAndUnitFromRawValue(
-		firstFontSize.size
-	);
-	const areAllSizesSameUnit = otherFontSizes.every( ( fontSize ) => {
-		const [ , unit ] = parseQuantityAndUnitFromRawValue( fontSize.size );
-		return unit === firstUnit;
-	} );
-	return areAllSizesSameUnit ? firstUnit : null;
-}