@wordpress/components 21.1.2-next.4d3b314fd5.0 → 21.2.0

package/src/font-size-picker/{index.js → index.tsx}

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import type { ReactNode, ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,6 @@ import { useState, useMemo, forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { BaseControl } from '../base-control';
 import Button from '../button';
 import RangeControl from '../range-control';
 import { Flex, FlexItem } from '../flex';
@@ -34,31 +33,50 @@ import {
 } from './utils';
 import { VStack } from '../v-stack';
 import { HStack } from '../h-stack';
+import type {
+	FontSizePickerProps,
+	FontSizeSelectOption,
+	FontSizeToggleGroupOption,
+} from './types';
+import {
+	Container,
+	HeaderHint,
+	HeaderLabel,
+	Controls,
+	ResetButton,
+} from './styles';
+import { Spacer } from '../spacer';
 
 // This conditional is needed to maintain the spacing before the slider in the `withSlider` case.
-const MaybeVStack = ( { __nextHasNoMarginBottom, children } ) =>
+const MaybeVStack = ( {
+	__nextHasNoMarginBottom,
+	children,
+}: {
+	__nextHasNoMarginBottom: boolean;
+	children: ReactNode;
+} ) =>
 	! __nextHasNoMarginBottom ? (
-		children
+		<>{ children }</>
 	) : (
 		<VStack spacing={ 6 } children={ children } />
 	);
 
-function FontSizePicker(
-	{
+const UnforwardedFontSizePicker = (
+	props: FontSizePickerProps,
+	ref: ForwardedRef< any >
+) => {
+	const {
 		/** Start opting into the new margin-free styles that will become the default in a future version. */
 		__nextHasNoMarginBottom = false,
 		fallbackFontSize,
 		fontSizes = [],
 		disableCustomFontSizes = false,
 		onChange,
-		/** @type {'default' | '__unstable-large'} */
 		size = 'default',
 		value,
 		withSlider = false,
 		withReset = true,
-	},
-	ref
-) {
+	} = props;
 	if ( ! __nextHasNoMarginBottom ) {
 		deprecated( 'Bottom margin styles for wp.components.FontSizePicker', {
 			since: '6.1',
@@ -70,7 +88,7 @@ function FontSizePicker(
 	const hasUnits = [ typeof value, typeof fontSizes?.[ 0 ]?.size ].includes(
 		'string'
 	);
-	const noUnitsValue = ! hasUnits ? value : parseInt( value );
+	const noUnitsValue = ! hasUnits ? value : parseInt( String( value ) );
 	const isPixelValue = typeof value === 'number' || value?.endsWith?.( 'px' );
 	const units = useCustomUnits( {
 		availableUnits: [ 'px', 'em', 'rem' ],
@@ -106,10 +124,15 @@ function FontSizePicker(
 		// 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 isSimpleCssValue( value ) && `(${ value })`;
+			return (
+				value !== undefined &&
+				isSimpleCssValue( value ) &&
+				`(${ value })`
+			);
 		}
 		if ( shouldUseSelectControl ) {
 			return (
+				selectedOption?.size !== undefined &&
 				isSimpleCssValue( selectedOption?.size ) &&
 				`(${ selectedOption?.size })`
 			);
@@ -146,59 +169,65 @@ function FontSizePicker(
 		__( 'Currently selected font size: %s' ),
 		selectedOption.name
 	);
-	const baseClassName = 'components-font-size-picker';
 	return (
-		<fieldset className={ baseClassName } { ...( ref ? {} : { ref } ) }>
+		<Container ref={ ref } className="components-font-size-picker">
 			<VisuallyHidden as="legend">{ __( 'Font size' ) }</VisuallyHidden>
-			<HStack className={ `${ baseClassName }__header` }>
-				<BaseControl.VisualLabel>
-					{ __( 'Size' ) }
-					{ headerHint && (
-						<span className={ `${ baseClassName }__header__hint` }>
-							{ headerHint }
-						</span>
+			<Spacer>
+				<HStack className="components-font-size-picker__header">
+					<HeaderLabel>
+						{ __( 'Size' ) }
+						{ headerHint && (
+							<HeaderHint className="components-font-size-picker__header__hint">
+								{ headerHint }
+							</HeaderHint>
+						) }
+					</HeaderLabel>
+					{ ! disableCustomFontSizes && (
+						<Button
+							label={
+								showCustomValueControl
+									? __( 'Use size preset' )
+									: __( 'Set custom size' )
+							}
+							icon={ settings }
+							onClick={ () => {
+								setShowCustomValueControl(
+									! showCustomValueControl
+								);
+							} }
+							isPressed={ showCustomValueControl }
+							isSmall
+						/>
 					) }
-				</BaseControl.VisualLabel>
-				{ ! disableCustomFontSizes && (
-					<Button
-						label={
-							showCustomValueControl
-								? __( 'Use size preset' )
-								: __( 'Set custom size' )
-						}
-						icon={ settings }
-						onClick={ () => {
-							setShowCustomValueControl(
-								! showCustomValueControl
-							);
-						} }
-						isPressed={ showCustomValueControl }
-						isSmall
-					/>
-				) }
-			</HStack>
+				</HStack>
+			</Spacer>
 			<MaybeVStack __nextHasNoMarginBottom={ __nextHasNoMarginBottom }>
-				<div
-					className={ classNames( `${ baseClassName }__controls`, {
-						'is-next-has-no-margin-bottom': __nextHasNoMarginBottom,
-					} ) }
+				<Controls
+					className="components-font-size-picker__controls"
+					__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 				>
 					{ !! fontSizes.length &&
 						shouldUseSelectControl &&
 						! showCustomValueControl && (
 							<CustomSelectControl
 								__nextUnconstrainedWidth
-								className={ `${ baseClassName }__select` }
+								className="components-font-size-picker__select"
 								label={ __( 'Font size' ) }
 								hideLabelFromVision
 								describedBy={ currentFontSizeSR }
-								options={ options }
-								value={ options.find(
+								options={ options as FontSizeSelectOption[] }
+								value={ (
+									options as FontSizeSelectOption[]
+								 ).find(
 									( option ) =>
 										option.key === selectedOption.slug
 								) }
-								onChange={ ( { selectedItem } ) => {
-									onChange(
+								onChange={ ( {
+									selectedItem,
+								}: {
+									selectedItem: FontSizeSelectOption;
+								} ) => {
+									onChange?.(
 										hasUnits
 											? selectedItem.size
 											: Number( selectedItem.size )
@@ -219,31 +248,30 @@ function FontSizePicker(
 							hideLabelFromVision
 							value={ value }
 							onChange={ ( newValue ) => {
-								onChange(
+								onChange?.(
 									hasUnits ? newValue : Number( newValue )
 								);
 							} }
 							isBlock
 							size={ size }
 						>
-							{ options.map( ( option ) => (
-								<ToggleGroupControlOption
-									key={ option.key }
-									value={ option.value }
-									label={ option.label }
-									aria-label={ option.name }
-									showTooltip={ true }
-								/>
-							) ) }
+							{ ( options as FontSizeToggleGroupOption[] ).map(
+								( option ) => (
+									<ToggleGroupControlOption
+										key={ option.key }
+										value={ option.value }
+										label={ option.label }
+										aria-label={ option.name }
+										showTooltip={ true }
+									/>
+								)
+							) }
 						</ToggleGroupControl>
 					) }
 					{ ! withSlider &&
 						! disableCustomFontSizes &&
 						showCustomValueControl && (
-							<Flex
-								justify="space-between"
-								className={ `${ baseClassName }__custom-size-control` }
-							>
+							<Flex className="components-font-size-picker__custom-size-control">
 								<FlexItem isBlock>
 									<UnitControl
 										label={ __( 'Custom' ) }
@@ -252,12 +280,12 @@ function FontSizePicker(
 										value={ value }
 										onChange={ ( nextSize ) => {
 											if (
-												0 === parseFloat( nextSize ) ||
-												! nextSize
+												! nextSize ||
+												0 === parseFloat( nextSize )
 											) {
-												onChange( undefined );
+												onChange?.( undefined );
 											} else {
-												onChange(
+												onChange?.(
 													hasUnits
 														? nextSize
 														: parseInt(
@@ -272,40 +300,46 @@ function FontSizePicker(
 									/>
 								</FlexItem>
 								{ withReset && (
-									<FlexItem isBlock>
-										<Button
-											className="components-color-palette__clear"
+									<FlexItem>
+										<ResetButton
 											disabled={ value === undefined }
 											onClick={ () => {
-												onChange( undefined );
+												onChange?.( undefined );
 											} }
 											isSmall
 											variant="secondary"
+											size={ size }
 										>
 											{ __( 'Reset' ) }
-										</Button>
+										</ResetButton>
 									</FlexItem>
 								) }
 							</Flex>
 						) }
-				</div>
+				</Controls>
 				{ withSlider && (
 					<RangeControl
 						__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-						className={ `${ baseClassName }__custom-input` }
+						className="components-font-size-picker__custom-input"
 						label={ __( 'Custom Size' ) }
-						value={ ( isPixelValue && noUnitsValue ) || '' }
+						value={
+							isPixelValue && noUnitsValue
+								? Number( noUnitsValue )
+								: undefined
+						}
 						initialPosition={ fallbackFontSize }
 						onChange={ ( newValue ) => {
-							onChange( hasUnits ? newValue + 'px' : newValue );
+							onChange?.( hasUnits ? newValue + 'px' : newValue );
 						} }
 						min={ 12 }
 						max={ 100 }
 					/>
 				) }
 			</MaybeVStack>
-		</fieldset>
+		</Container>
 	);
-}
+};
+
+export const FontSizePicker = forwardRef( UnforwardedFontSizePicker );
 
-export default forwardRef( FontSizePicker );
+export default FontSizePicker;

package/src/font-size-picker/stories/e2e/{index.js → index.tsx}

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ComponentStory } from '@storybook/react';
+
 /**
  * WordPress dependencies
  */
@@ -13,8 +18,11 @@ export default {
 	component: FontSizePicker,
 };
 
-const FontSizePickerWithState = ( { initialValue, ...props } ) => {
-	const [ fontSize, setFontSize ] = useState( initialValue );
+const FontSizePickerWithState: ComponentStory< typeof FontSizePicker > = ( {
+	value,
+	...props
+} ) => {
+	const [ fontSize, setFontSize ] = useState( value );
 	return (
 		<FontSizePicker
 			{ ...props }
@@ -24,7 +32,8 @@ const FontSizePickerWithState = ( { initialValue, ...props } ) => {
 	);
 };
 
-export const Default = FontSizePickerWithState.bind( {} );
+export const Default: ComponentStory< typeof FontSizePicker > =
+	FontSizePickerWithState.bind( {} );
 Default.args = {
 	fontSizes: [
 		{
@@ -43,5 +52,5 @@ Default.args = {
 			size: 26,
 		},
 	],
-	initialValue: 16,
+	value: 16,
 };

package/src/font-size-picker/stories/{index.js → index.tsx}

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
 /**
  * WordPress dependencies
  */
@@ -8,53 +13,48 @@ import { useState } from '@wordpress/element';
  */
 import FontSizePicker from '../';
 
-export default {
+const meta: ComponentMeta< typeof FontSizePicker > = {
 	title: 'Components/FontSizePicker',
 	component: FontSizePicker,
 	argTypes: {
-		initialValue: { table: { disable: true } }, // hide prop because it's not actually part of FontSizePicker
-		fallbackFontSize: {
-			description:
-				'If no value exists, this prop defines the starting position for the font size picker slider. Only relevant if `withSlider` is `true`.',
-		},
-		size: {
-			control: { type: 'radio' },
-			options: [ 'default', '__unstable-large' ],
-		},
-		withReset: {
-			description:
-				'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`.',
-			control: { type: 'boolean' },
-			table: {
-				type: 'boolean',
-				defaultValue: { summary: true },
-			},
-		},
+		value: { control: { type: null } },
 	},
 	parameters: {
+		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
 		docs: { source: { state: 'open' } },
 	},
 };
+export default meta;
 
-const FontSizePickerWithState = ( { initialValue, ...props } ) => {
-	const [ fontSize, setFontSize ] = useState( initialValue );
+const FontSizePickerWithState: ComponentStory< typeof FontSizePicker > = ( {
+	value,
+	onChange,
+	...props
+} ) => {
+	const [ fontSize, setFontSize ] = useState( value );
 	return (
 		<FontSizePicker
 			{ ...props }
 			value={ fontSize }
-			onChange={ setFontSize }
+			onChange={ ( nextValue ) => {
+				setFontSize( nextValue );
+				onChange?.( nextValue );
+			} }
 		/>
 	);
 };
 
-const TwoFontSizePickersWithState = ( { fontSizes, ...props } ) => {
+const TwoFontSizePickersWithState: ComponentStory< typeof FontSizePicker > = ( {
+	fontSizes,
+	...props
+} ) => {
 	return (
 		<>
 			<h2>Fewer font sizes</h2>
 			<FontSizePickerWithState
 				{ ...props }
-				fontSizes={ fontSizes.slice( 0, 4 ) }
+				fontSizes={ fontSizes?.slice( 0, 4 ) }
 			/>
 
 			<h2>More font sizes</h2>
@@ -63,7 +63,8 @@ const TwoFontSizePickersWithState = ( { fontSizes, ...props } ) => {
 	);
 };
 
-export const Default = FontSizePickerWithState.bind( {} );
+export const Default: ComponentStory< typeof FontSizePicker > =
+	FontSizePickerWithState.bind( {} );
 Default.args = {
 	__nextHasNoMarginBottom: true,
 	disableCustomFontSizes: false,
@@ -84,15 +85,16 @@ Default.args = {
 			size: 26,
 		},
 	],
-	initialValue: 16,
+	value: 16,
 	withSlider: false,
 };
 
-export const WithSlider = FontSizePickerWithState.bind( {} );
+export const WithSlider: ComponentStory< typeof FontSizePicker > =
+	FontSizePickerWithState.bind( {} );
 WithSlider.args = {
 	...Default.args,
 	fallbackFontSize: 16,
-	initialValue: undefined,
+	value: undefined,
 	withSlider: true,
 };
 
@@ -100,7 +102,8 @@ WithSlider.args = {
  * With custom font sizes disabled via the `disableCustomFontSizes` prop, the user will
  * only be able to pick one of the predefined sizes passed in `fontSizes`.
  */
-export const WithCustomSizesDisabled = FontSizePickerWithState.bind( {} );
+export const WithCustomSizesDisabled: ComponentStory< typeof FontSizePicker > =
+	FontSizePickerWithState.bind( {} );
 WithCustomSizesDisabled.args = {
 	...Default.args,
 	disableCustomFontSizes: true,
@@ -109,7 +112,8 @@ WithCustomSizesDisabled.args = {
 /**
  * When there are more than 5 font size options, the UI is no longer a toggle group.
  */
-export const WithMoreFontSizes = FontSizePickerWithState.bind( {} );
+export const WithMoreFontSizes: ComponentStory< typeof FontSizePicker > =
+	FontSizePickerWithState.bind( {} );
 WithMoreFontSizes.args = {
 	...Default.args,
 	fontSizes: [
@@ -144,27 +148,29 @@ WithMoreFontSizes.args = {
 			size: 36,
 		},
 	],
-	initialValue: 8,
+	value: 8,
 };
 
 /**
  * When units like `px` are specified explicitly, it will be shown as a label hint.
  */
-export const WithUnits = TwoFontSizePickersWithState.bind( {} );
+export const WithUnits: ComponentStory< typeof FontSizePicker > =
+	TwoFontSizePickersWithState.bind( {} );
 WithUnits.args = {
 	...WithMoreFontSizes.args,
-	fontSizes: WithMoreFontSizes.args.fontSizes.map( ( option ) => ( {
+	fontSizes: WithMoreFontSizes.args.fontSizes?.map( ( option ) => ( {
 		...option,
 		size: `${ option.size }px`,
 	} ) ),
-	initialValue: '8px',
+	value: '8px',
 };
 
 /**
  * The label hint will not be shown if it is a complex CSS value. Some examples of complex CSS values
  * in this context are CSS functions like `calc()`, `clamp()`, and `var()`.
  */
-export const WithComplexCSSValues = TwoFontSizePickersWithState.bind( {} );
+export const WithComplexCSSValues: ComponentStory< typeof FontSizePicker > =
+	TwoFontSizePickersWithState.bind( {} );
 WithComplexCSSValues.args = {
 	...Default.args,
 	fontSizes: [
@@ -200,5 +206,5 @@ WithComplexCSSValues.args = {
 			size: '2.8rem',
 		},
 	],
-	initialValue: '1.125rem',
+	value: '1.125rem',
 };

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

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * Internal dependencies
+ */
+import BaseControl from '../base-control';
+import Button from '../button';
+import { space } from '../ui/utils/space';
+import { COLORS } from '../utils';
+import type { FontSizePickerProps } from './types';
+
+export const Container = styled.fieldset`
+	border: 0;
+	margin: 0;
+	padding: 0;
+`;
+
+export const HeaderLabel = styled( BaseControl.VisualLabel )`
+	margin-bottom: 0;
+`;
+
+export const HeaderHint = styled.span`
+	color: ${ COLORS.gray[ 700 ] };
+	margin-left: ${ space( 1 ) };
+`;
+
+export const Controls = styled.div< {
+	__nextHasNoMarginBottom: boolean;
+} >`
+	${ ( props ) =>
+		! props.__nextHasNoMarginBottom && `margin-bottom: ${ space( 6 ) };` }
+`;
+
+export const ResetButton = styled( Button )< {
+	size: FontSizePickerProps[ 'size' ];
+} >`
+	&&& {
+		height: ${ ( props ) =>
+			props.size === '__unstable-large' ? '40px' : '30px' };
+	}
+`;

package/src/font-size-picker/test/{index.js → index.tsx}

@@ -13,7 +13,7 @@ const getUnitSelect = () =>
 const getUnitLabel = () =>
 	document.body.querySelector( '.components-unit-control__unit-label' );
 
-const toggleCustomInput = ( showCustomInput ) => {
+const toggleCustomInput = ( showCustomInput: boolean ) => {
 	const label = showCustomInput ? 'Set custom size' : 'Use size preset';
 	const toggleCustom = screen.getByLabelText( label, { selector: 'button' } );
 	fireEvent.click( toggleCustom );

package/src/font-size-picker/test/{utils.js → utils.ts}

@@ -7,7 +7,7 @@ import {
 	getToggleGroupOptions,
 } from '../utils';
 
-const simpleCSSCases = [
+const simpleCSSCases: [ number | string, boolean ][] = [
 	// Test integers and non-integers.
 	[ 1, true ],
 	[ 1.25, true ],
@@ -41,7 +41,11 @@ describe( 'isSimpleCssValue', () => {
 	);
 } );
 
-const splitValuesCases = [
+const splitValuesCases: [
+	number | string,
+	string | undefined,
+	string | undefined
+][] = [
 	// Test integers and non-integers.
 	[ 1, '1', undefined ],
 	[ 1.25, '1.25', undefined ],