FontSizerPicker: Improve docs for default units (#60996)

* FontSizerPicker: Improve docs for default units * Add changelog Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org>
WordPress · Apr 23, 2024 · 425c5c0 · 425c5c0
1 parent 14db362
commit 425c5c0
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 3 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -14,8 +14,11 @@
 
 -   `DropZone`: Avoid a media query on mount [#60546](https://github.com/WordPress/gutenberg/pull/60546)).
 -   `ComboboxControl`: Simplify string normalization ([#60893](https://github.com/WordPress/gutenberg/pull/60893)).
+
 ### Internal
 
+-   `FontSizerPicker`: Improve docs for default units ([#60996](https://github.com/WordPress/gutenberg/pull/60996)).
+
 ## 27.4.0 (2024-04-19)
 
 ### Deprecation

diff --git a/packages/components/src/font-size-picker/README.md b/packages/components/src/font-size-picker/README.md
@@ -92,6 +92,7 @@ Size of the control.
 Available units for custom font size selection.
 
 -   Required: No
+-   Default: `[ 'px', 'em', 'rem' ]`
 
 ### `value`: `number | string`
 

diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx
@@ -36,6 +36,8 @@ import FontSizePickerSelect from './font-size-picker-select';
 import FontSizePickerToggleGroup from './font-size-picker-toggle-group';
 import { T_SHIRT_NAMES } from './constants';
 
+const DEFAULT_UNITS = [ 'px', 'em', 'rem' ];
+
 const UnforwardedFontSizePicker = (
 	props: FontSizePickerProps,
 	ref: ForwardedRef< any >
@@ -47,14 +49,14 @@ const UnforwardedFontSizePicker = (
 		disableCustomFontSizes = false,
 		onChange,
 		size = 'default',
-		units: unitsProp,
+		units: unitsProp = DEFAULT_UNITS,
 		value,
 		withSlider = false,
 		withReset = true,
 	} = props;
 
 	const units = useCustomUnits( {
-		availableUnits: unitsProp || [ 'px', 'em', 'rem' ],
+		availableUnits: unitsProp,
 	} );
 
 	const shouldUseSelectControl = fontSizes.length > 5;

diff --git a/packages/components/src/font-size-picker/stories/index.story.tsx b/packages/components/src/font-size-picker/stories/index.story.tsx
@@ -84,7 +84,6 @@ Default.args = {
 			size: 26,
 		},
 	],
-	units: [ 'px', 'em', 'rem' ],
 	value: 16,
 	withSlider: false,
 };

diff --git a/packages/components/src/font-size-picker/types.ts b/packages/components/src/font-size-picker/types.ts
@@ -28,6 +28,8 @@ export type FontSizePickerProps = {
 	) => void;
 	/**
 	 * Available units for custom font size selection.
+	 *
+	 * @default `[ 'px', 'em', 'rem' ]`
 	 */
 	units?: string[];
 	/**