From d8de061a96a2bcfe18fe7248b8166786424b75a4 Mon Sep 17 00:00:00 2001 From: Himanshu Pathak Date: Thu, 27 Feb 2025 18:33:42 +0530 Subject: [PATCH] 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 Co-authored-by: t-hamano Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: ciampo Co-authored-by: SainathPoojary Co-authored-by: im3dabasia Co-authored-by: slaFFik --- packages/components/CHANGELOG.md | 4 ++++ packages/components/src/font-size-picker/README.md | 2 ++ .../components/src/font-size-picker/stories/index.story.tsx | 4 ++++ packages/components/src/font-size-picker/types.ts | 4 ++++ 4 files changed, 14 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 31cd61305a730..67daeb143049a 100644 --- 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 index 39d916c0c7b21..8c5cd1444aa69 100644 --- 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 index f6502fcfd537c..59af0f5cfe60d 100644 --- 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 index 2296e96856788..04964e05d45d5 100644 --- 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; /**