Font size presets UI

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

@@ -13,14 +13,6 @@ import { useState, useMemo, forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { Button } from '../button';
-import RangeControl from '../range-control';
-import { Flex, FlexItem } from '../flex';
-import {
-	default as UnitControl,
-	parseQuantityAndUnitFromRawValue,
-	useCustomUnits,
-} from '../unit-control';
 import { VisuallyHidden } from '../visually-hidden';
 import { getCommonSizeUnit } from './utils';
 import type { FontSizePickerProps } from './types';
@@ -34,10 +26,9 @@ import {
 import { Spacer } from '../spacer';
 import FontSizePickerSelect from './font-size-picker-select';
 import FontSizePickerToggleGroup from './font-size-picker-toggle-group';
+import SizeControl, { DEFAULT_UNITS } from '../size-control';
 import { T_SHIRT_NAMES } from './constants';
 
-const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];
-
 const UnforwardedFontSizePicker = (
 	props: FontSizePickerProps,
 	ref: ForwardedRef< any >
@@ -49,16 +40,12 @@ const UnforwardedFontSizePicker = (
 		disableCustomFontSizes = false,
 		onChange,
 		size = 'default',
-		units: unitsProp = DEFAULT_UNITS,
+		units = DEFAULT_UNITS,
 		value,
 		withSlider = false,
 		withReset = true,
 	} = props;
 
-	const units = useCustomUnits( {
-		availableUnits: unitsProp,
-	} );
-
 	const shouldUseSelectControl = fontSizes.length > 5;
 	const selectedFontSize = fontSizes.find(
 		( fontSize ) => fontSize.size === value
@@ -107,14 +94,6 @@ const UnforwardedFontSizePicker = (
 	const hasUnits =
 		typeof value === 'string' || typeof fontSizes[ 0 ]?.size === 'string';
 
-	const [ valueQuantity, valueUnit ] = parseQuantityAndUnitFromRawValue(
-		value,
-		units
-	);
-	const isValueUnitRelative =
-		!! valueUnit && [ 'em', 'rem', 'vw', 'vh' ].includes( valueUnit );
-	const isDisabled = value === undefined;
-
 	return (
 		<Container ref={ ref } className="components-font-size-picker">
 			<VisuallyHidden as="legend">{ __( 'Font size' ) }</VisuallyHidden>
@@ -201,85 +180,16 @@ const UnforwardedFontSizePicker = (
 					/>
 				) }
 				{ ! disableCustomFontSizes && showCustomValueControl && (
-					<Flex className="components-font-size-picker__custom-size-control">
-						<FlexItem isBlock>
-							<UnitControl
-								__next40pxDefaultSize={ __next40pxDefaultSize }
-								label={ __( 'Custom' ) }
-								labelPosition="top"
-								hideLabelFromVision
-								value={ value }
-								onChange={ ( newValue ) => {
-									if ( newValue === undefined ) {
-										onChange?.( undefined );
-									} else {
-										onChange?.(
-											hasUnits
-												? newValue
-												: parseInt( newValue, 10 )
-										);
-									}
-								} }
-								size={ size }
-								units={ hasUnits ? units : [] }
-								min={ 0 }
-							/>
-						</FlexItem>
-						{ withSlider && (
-							<FlexItem isBlock>
-								<Spacer marginX={ 2 } marginBottom={ 0 }>
-									<RangeControl
-										__nextHasNoMarginBottom
-										__next40pxDefaultSize={
-											__next40pxDefaultSize
-										}
-										className="components-font-size-picker__custom-input"
-										label={ __( 'Custom Size' ) }
-										hideLabelFromVision
-										value={ valueQuantity }
-										initialPosition={ fallbackFontSize }
-										withInputField={ false }
-										onChange={ ( newValue ) => {
-											if ( newValue === undefined ) {
-												onChange?.( undefined );
-											} else if ( hasUnits ) {
-												onChange?.(
-													newValue +
-														( valueUnit ?? 'px' )
-												);
-											} else {
-												onChange?.( newValue );
-											}
-										} }
-										min={ 0 }
-										max={ isValueUnitRelative ? 10 : 100 }
-										step={ isValueUnitRelative ? 0.1 : 1 }
-									/>
-								</Spacer>
-							</FlexItem>
-						) }
-						{ withReset && (
-							<FlexItem>
-								<Button
-									disabled={ isDisabled }
-									__experimentalIsFocusable
-									onClick={ () => {
-										onChange?.( undefined );
-									} }
-									variant="secondary"
-									__next40pxDefaultSize
-									size={
-										size === '__unstable-large' ||
-										props.__next40pxDefaultSize
-											? 'default'
-											: 'small'
-									}
-								>
-									{ __( 'Reset' ) }
-								</Button>
-							</FlexItem>
-						) }
-					</Flex>
+					<SizeControl
+						__next40pxDefaultSize={ __next40pxDefaultSize }
+						value={ value }
+						units={ units }
+						hasUnit={ hasUnits }
+						withSlider={ withSlider }
+						withReset={ withReset }
+						fallbackValue={ fallbackFontSize }
+						onChange={ onChange }
+					/>
 				) }
 			</div>
 		</Container>

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

@@ -8,7 +8,7 @@ import userEvent from '@testing-library/user-event';
  * Internal dependencies
  */
 import FontSizePicker from '../';
-import type { FontSize } from '../types';
+import type { Size } from '../../size-control/types';
 
 describe( 'FontSizePicker', () => {
 	test.each( [
@@ -474,7 +474,7 @@ describe( 'FontSizePicker', () => {
 		commonTests( fontSizes );
 	} );
 
-	function commonToggleGroupTests( fontSizes: FontSize[] ) {
+	function commonToggleGroupTests( fontSizes: Size[] ) {
 		it( 'defaults to M when value is 16px', () => {
 			render(
 				<FontSizePicker
@@ -501,7 +501,7 @@ describe( 'FontSizePicker', () => {
 		);
 	}
 
-	function commonSelectTests( fontSizes: FontSize[] ) {
+	function commonSelectTests( fontSizes: Size[] ) {
 		it( 'shows custom input when Custom is selected', async () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
@@ -519,7 +519,7 @@ describe( 'FontSizePicker', () => {
 		} );
 	}
 
-	function commonTests( fontSizes: FontSize[] ) {
+	function commonTests( fontSizes: Size[] ) {
 		it( 'shows custom input when value is unknown', () => {
 			render( <FontSizePicker fontSizes={ fontSizes } value="3px" /> );
 			expect( screen.getByLabelText( 'Custom' ) ).toBeInTheDocument();

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

@@ -1,4 +1,12 @@
-export type FontSizePickerProps = {
+/**
+ * Internal dependencies
+ */
+import type { SizeControlBaseProps, Size } from '../size-control/types';
+
+export type FontSizePickerProps = Omit<
+	SizeControlBaseProps,
+	'fallbackValue' | 'hasUnit'
+> & {
 	/**
 	 * If `true`, it will not be possible to choose a custom fontSize. The user
 	 * will be forced to pick one of the pre-defined sizes passed in fontSizes.
@@ -15,82 +23,7 @@ export type FontSizePickerProps = {
 	 * An array of font size objects. The object should contain properties size,
 	 * name, and slug.
 	 */
-	fontSizes?: FontSize[];
-	/**
-	 * A function that receives the new font size value.
-	 * If onChange is called without any parameter, it should reset the value,
-	 * attending to what reset means in that context, e.g., set the font size to
-	 * undefined or set the font size a starting value.
-	 */
-	onChange?: (
-		value: number | string | undefined,
-		selectedItem?: FontSize
-	) => void;
-	/**
-	 * Available units for custom font size selection.
-	 *
-	 * @default `[ 'px', 'em', 'rem' ]`
-	 */
-	units?: string[];
-	/**
-	 * The current font size value.
-	 */
-	value?: number | string;
-	/**
-	 * If `true`, the UI will contain a slider, instead of a numeric text input
-	 * field. If `false`, no slider will be present.
-	 *
-	 * @default false
-	 */
-	withSlider?: boolean;
-	/**
-	 * If `true`, a reset button will be displayed alongside the input field
-	 * when a custom font size is active. Has no effect when
-	 * `disableCustomFontSizes` or `withSlider` is `true`.
-	 *
-	 * @default true
-	 */
-	withReset?: boolean;
-	/**
-	 * Start opting into the new margin-free styles that will become the default
-	 * in a future version, currently scheduled to be WordPress 6.4. (The prop
-	 * can be safely removed once this happens.)
-	 *
-	 * @default false
-	 * @deprecated Default behavior since WP 6.5. Prop can be safely removed.
-	 * @ignore
-	 */
-	__nextHasNoMarginBottom?: boolean;
-	/**
-	 * Start opting into the larger default height that will become the default size in a future version.
-	 *
-	 * @default false
-	 */
-	__next40pxDefaultSize?: boolean;
-	/**
-	 * Size of the control.
-	 *
-	 * @default 'default'
-	 */
-	size?: 'default' | '__unstable-large';
-};
-
-export type FontSize = {
-	/**
-	 * The property `size` contains a number with the font size value, in `px` or
-	 * a string specifying the font size CSS property that should be used eg:
-	 * "13px", "1em", or "clamp(12px, 5vw, 100px)".
-	 */
-	size: number | string;
-	/**
-	 * The `name` property includes a label for that font size e.g.: `Small`.
-	 */
-	name?: string;
-	/**
-	 * The `slug` property is a string with a unique identifier for the font
-	 * size. Used for the class generation process.
-	 */
-	slug: string;
+	fontSizes?: Size[];
 };
 
 export type FontSizePickerSelectProps = Pick<
@@ -109,7 +42,7 @@ export type FontSizePickerSelectProps = Pick<
 export type FontSizePickerSelectOption = {
 	key: string;
 	name: string;
-	value?: FontSize[ 'size' ];
+	value?: Size[ 'size' ];
 	__experimentalHint?: string;
 };
 

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

@@ -6,7 +6,8 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import type { FontSizePickerProps, FontSize } from './types';
+import type { Size } from '../size-control/types';
+import type { FontSizePickerProps } from './types';
 import { parseQuantityAndUnitFromRawValue } from '../unit-control';
 
 /**
@@ -31,7 +32,7 @@ export function isSimpleCssValue(
  * @param fontSizes List of font sizes.
  * @return The common unit, or null.
  */
-export function getCommonSizeUnit( fontSizes: FontSize[] ) {
+export function getCommonSizeUnit( fontSizes: Size[] ) {
 	const [ firstFontSize, ...otherFontSizes ] = fontSizes;
 	if ( ! firstFontSize ) {
 		return null;

packages/components/src/private-apis.ts

@@ -26,6 +26,7 @@ import {
 	DropdownMenuItemLabel as DropdownMenuItemLabelV2,
 	DropdownMenuItemHelpText as DropdownMenuItemHelpTextV2,
 } from './dropdown-menu-v2';
+import SizeControl from './size-control';
 import { ComponentsContext } from './context/context-system-provider';
 import Theme from './theme';
 import Tabs from './tabs';
@@ -53,5 +54,6 @@ lock( privateApis, {
 	DropdownMenuSeparatorV2,
 	DropdownMenuItemLabelV2,
 	DropdownMenuItemHelpTextV2,
+	SizeControl,
 	kebabCase,
 } );