Create a new FontSizeSelectOption return type for getSelectedOption to:

1. Clean up type changes in #44791 2. Make TS linter be quiet
WordPress · Oct 10, 2022 · fabd044 · fabd044
1 parent d2561a0
commit fabd044
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 14 deletions.
diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx
@@ -127,6 +127,9 @@ const UnforwardedFontSizePicker = (
 			return `(${ __( 'Custom' ) })`;
 		}
 
+		const selectedOptionSize =
+			selectedOption?.size || selectedOption?.value;
+
 		// 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 ) {
@@ -138,26 +141,27 @@ const UnforwardedFontSizePicker = (
 		}
 		if ( shouldUseSelectControl ) {
 			return (
-				selectedOption?.size !== undefined &&
-				isSimpleCssValue( selectedOption?.size ) &&
-				`(${ selectedOption?.size })`
+				selectedOptionSize !== undefined &&
+				isSimpleCssValue( selectedOptionSize ) &&
+				`(${ selectedOptionSize })`
 			);
 		}
 
 		// Calculate the `hint` for toggle group control.
 		let hint = selectedOption.name;
 		if (
 			! fontSizesContainComplexValues &&
-			typeof selectedOption.size === 'string'
+			typeof selectedOptionSize === 'string'
 		) {
-			const [ , unit ] = splitValueAndUnitFromSize( selectedOption.size );
+			const [ , unit ] = splitValueAndUnitFromSize( selectedOptionSize );
 			hint += `(${ unit })`;
 		}
 		return hint;
 	}, [
 		showCustomValueControl,
 		selectedOption?.name,
 		selectedOption?.size,
+		selectedOption?.value,
 		value,
 		isCustomValue,
 		shouldUseSelectControl,
@@ -175,6 +179,7 @@ const UnforwardedFontSizePicker = (
 		__( 'Currently selected font size: %s' ),
 		selectedOption.name
 	);
+
 	return (
 		<Container ref={ ref } className="components-font-size-picker">
 			<VisuallyHidden as="legend">{ __( 'Font size' ) }</VisuallyHidden>

diff --git a/packages/components/src/font-size-picker/types.ts b/packages/components/src/font-size-picker/types.ts
@@ -95,5 +95,18 @@ export type FontSizeToggleGroupOption = {
 	value: number | string;
 	label: string;
 	name: string;
+};
+
+/*
+	This is a type describing whatever option is selected.
+	It could be FontSizeToggleGroupOption, FontSizeSelectOption,
+	CUSTOM_FONT_SIZE_OPTION or DEFAULT_FONT_SIZE_OPTION.
+ */
+export type FontSizeSelectedOption = {
+	key?: string;
+	value?: number | string;
 	size?: number | string;
+	label?: string;
+	name: string;
+	slug?: string;
 };
diff --git a/packages/components/src/font-size-picker/utils.ts b/packages/components/src/font-size-picker/utils.ts
@@ -12,6 +12,7 @@ import type {
 	FontSizeSelectOption,
 	FontSizeToggleGroupOption,
 	FontSizePickerProps,
+	FontSizeSelectedOption,
 } from './types';
 
 const DEFAULT_FONT_SIZE = 'default';
@@ -136,7 +137,6 @@ export function getToggleGroupOptions(
 		return {
 			key: slug,
 			value: size,
-			size,
 			label: labelAliases[ index ],
 			name: name || labelAliases[ index ],
 		};
@@ -148,7 +148,7 @@ export function getSelectedOption(
 	value: FontSizePickerProps[ 'value' ],
 	useSelectControl: boolean,
 	disableCustomFontSizes: boolean = false
-): FontSizeOption {
+): FontSizeSelectedOption {
 	if ( ! value ) {
 		return DEFAULT_FONT_SIZE_OPTION;
 	}
@@ -163,8 +163,9 @@ export function getSelectedOption(
 		? // @TODO Array.find() triggers error on array types unions. It's a bug. See: https://github.com/microsoft/TypeScript/issues/44373.
 		  // @ts-ignore
 		  fontSizeOptions.find(
-				( option: FontSizeSelectOption ) => option.size === value
-		  ) // @ts-ignore
+				( option: FontSizeSelectedOption ) =>
+					option.size === value || option.value === value
+		  )
 		: null;
 
 	return selectedOption || CUSTOM_FONT_SIZE_OPTION;

diff --git a/test/emptytheme/theme.json b/test/emptytheme/theme.json
@@ -2,10 +2,73 @@
 	"version": 2,
 	"settings": {
 		"appearanceTools": true,
-		"layout": {
-			"contentSize": "840px",
-			"wideSize": "1100px"
+		"typography": {
+			"fluid": true,
+			"fontSizes": [
+				{
+					"fluid": {
+						"min": "0.875rem",
+						"max": "1rem"
+					},
+					"size": "1rem",
+					"slug": "small"
+				},
+				{
+					"fluid": {
+						"min": "1rem",
+						"max": "1.125rem"
+					},
+					"size": "1.125rem",
+					"slug": "medium"
+				},
+				{
+					"size": "1.9rem",
+					"slug": "not-so-large",
+					"fluid": {
+						"min": "1.9rem",
+						"max": "2rem"
+					}
+				},
+				{
+					"size": "3.5rem",
+					"slug": "large",
+					"fluid": {
+						"min": "3rem",
+						"max": "5rem"
+					}
+				},
+				{
+					"size": "var(--wp--preset--font-size--large)",
+					"slug": "x-large",
+					"fluid": false
+				},
+
+				{
+					"size": "6rem",
+					"slug": "Not so large",
+					"fluid": {
+						"min": "5rem",
+						"max": "7rem"
+					}
+				},
+				{
+					"size": "10rem",
+					"slug": "xx-large",
+					"fluid": {
+						"min": "4rem",
+						"max": "20rem"
+					}
+				},
+
+				{
+					"size": "14rem",
+					"slug": "Colossal",
+					"fluid": {
+						"min": "8rem",
+						"max": "30rem"
+					}
+				}
+			]
 		}
-	},
-	"patterns": [ "short-text-surrounded-by-round-images", "partner-logos" ]
+	}
 }