Convert FontSizePicker to TypeScript (WordPress#44449)

* Add types to FontSizePicker * We don't forward props along, so don't use WordPressComponentProps * Update CHANGELOG.md * Don't call onChange if undefined * Use FontSizePickerProps['value'] * Remove argTypes - these can be inferred * Hide control for the 'value' prop * Use storybook actions
gaambo · Sep 28, 2022 · 4718a57 · 4718a57
1 parent 0cde605
commit 4718a57
Show file tree

Hide file tree

Showing 10 changed files with 278 additions and 106 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -12,6 +12,7 @@
 -   `Mobile` updated to ignore `react/exhaustive-deps` eslint rule ([#44207](https://github.com/WordPress/gutenberg/pull/44207)).
 -   `Popover`: refactor unit tests to TypeScript and modern RTL assertions ([#44373](https://github.com/WordPress/gutenberg/pull/44373)).
 -   `Sandbox`: updated to satisfy `react/exhaustive-deps` eslint rule ([#44378](https://github.com/WordPress/gutenberg/pull/44378))
+-   `FontSizePicker`: Convert to TypeScript ([#44449](https://github.com/WordPress/gutenberg/pull/44449)).
 
 ## 21.1.0 (2022-09-21)
 

diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js
@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */
@@ -15,7 +16,7 @@ import deprecated from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
-import { VisuallyHidden } from '../';
+import { VisuallyHidden } from '../visually-hidden';
 import { Select as SelectControlSelect } from '../select-control/styles/select-control-styles';
 import SelectControlChevronDown from '../select-control/chevron-down';
 import { InputBaseWithBackCompatMinWidth } from './styles';

diff --git a/.../components/src/font-size-picker/index.js → ...components/src/font-size-picker/index.tsx b/.../components/src/font-size-picker/index.js → ...components/src/font-size-picker/index.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classNames from 'classnames';
+import type { ReactNode, ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -34,31 +35,42 @@ import {
 } from './utils';
 import { VStack } from '../v-stack';
 import { HStack } from '../h-stack';
+import type {
+	FontSizePickerProps,
+	FontSizeSelectOption,
+	FontSizeToggleGroupOption,
+} from './types';
 
 // 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 +82,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 +118,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 })`
 			);
@@ -192,13 +209,19 @@ function FontSizePicker(
 								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,22 +242,24 @@ 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 &&
@@ -252,12 +277,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(
@@ -277,7 +302,7 @@ function FontSizePicker(
 											className="components-color-palette__clear"
 											disabled={ value === undefined }
 											onClick={ () => {
-												onChange( undefined );
+												onChange?.( undefined );
 											} }
 											isSmall
 											variant="secondary"
@@ -294,10 +319,14 @@ function FontSizePicker(
 						__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 						className={ `${ baseClassName }__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 }
@@ -306,6 +335,8 @@ function FontSizePicker(
 			</MaybeVStack>
 		</fieldset>
 	);
-}
+};
+
+export const FontSizePicker = forwardRef( UnforwardedFontSizePicker );
 
-export default forwardRef( FontSizePicker );
+export default FontSizePicker;
diff --git a/...src/font-size-picker/stories/e2e/index.js → ...rc/font-size-picker/stories/e2e/index.tsx b/...src/font-size-picker/stories/e2e/index.js → ...rc/font-size-picker/stories/e2e/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,
 };