FontSizePicker: Fix FontSizePicker Storybook control type and improve…

… documentation (#68936) * Components: Improve FontSizePicker units documentation and fix unit filtering * Fix failing unit tests * Docs: Update FontSizePicker README.md to mention the unitless mode * FontSizePicker: Change the storybook control type to inline-check * FontSizePicker: Add entry in CHANGELOG.md * Add changelog subheading - Documentation * Move the unitless property note to value prop and reflect the same in JSDocs Co-authored-by: himanshupathak95 <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: mirka <[email protected]> Co-authored-by: ciampo <[email protected]> Co-authored-by: SainathPoojary <[email protected]> Co-authored-by: im3dabasia <[email protected]> Co-authored-by: slaFFik <[email protected]>
WordPress · Feb 27, 2025 · d8de061 · d8de061
1 parent 50d457e
commit d8de061
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 0 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Documentation
+
+-   `FontSizePicker`: Fix Storybook units control type to use `inline-check` and improve documentation clarifying unitless mode in `README.md` ([#68936](https://github.com/WordPress/gutenberg/pull/68936)).
+
 ### Bug Fixes
 
 -   `TextControl`: Ensures email and url inputs have consistent LTR alignment in RTL languages ([#68561](https://github.com/WordPress/gutenberg/pull/68561)).

diff --git a/packages/components/src/font-size-picker/README.md b/packages/components/src/font-size-picker/README.md
@@ -99,6 +99,8 @@ Available units for custom font size selection.
 
 The current font size value.
 
+**Note**: For the `units` property to work, the current font size value must be specified as strings with units (e.g., `'12px'` instead of `12`). When the font size is provided as a number, the component operates in "unitless mode" where the `units` property has no effect.
+
 -   Required: No
 
 ### `withReset`: `boolean`

diff --git a/packages/components/src/font-size-picker/stories/index.story.tsx b/packages/components/src/font-size-picker/stories/index.story.tsx
@@ -18,6 +18,10 @@ const meta: Meta< typeof FontSizePicker > = {
 	component: FontSizePicker,
 	argTypes: {
 		value: { control: false },
+		units: {
+			control: 'inline-check',
+			options: [ 'px', 'em', 'rem', 'vw', 'vh' ],
+		},
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

diff --git a/packages/components/src/font-size-picker/types.ts b/packages/components/src/font-size-picker/types.ts
@@ -34,6 +34,10 @@ export type FontSizePickerProps = {
 	units?: string[];
 	/**
 	 * The current font size value.
+	 *
+	 * Note: For the `units` property to work, the current font size value must be specified
+	 * as strings with units (e.g., '12px' instead of 12). When the font size is provided
+	 * as a number, the component operates in "unitless mode" where the `units` property has no effect.
 	 */
 	value?: number | string;
 	/**