From 7851f6a57a5b8014ae8354c9ca0ed1b249dd40b9 Mon Sep 17 00:00:00 2001 From: himanshupathak95 Date: Wed, 29 Jan 2025 13:41:46 +0530 Subject: [PATCH 1/7] Components: Improve FontSizePicker units documentation and fix unit filtering --- packages/components/src/font-size-picker/README.md | 2 ++ packages/components/src/unit-control/utils.ts | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/components/src/font-size-picker/README.md b/packages/components/src/font-size-picker/README.md index 39d916c0c7b212..1c0cb84da82556 100644 --- a/packages/components/src/font-size-picker/README.md +++ b/packages/components/src/font-size-picker/README.md @@ -92,6 +92,8 @@ Size of the control. Available units for custom font size selection. +**Important Note**: For the units property to work, font sizes must be specified as strings with units (e.g., `'12px'` instead of `12`). When font sizes are provided as numbers, the component operates in "unitless mode" where the units property has no effect. + - Required: No - Default: `[ 'px', 'em', 'rem', 'vw', 'vh' ]` diff --git a/packages/components/src/unit-control/utils.ts b/packages/components/src/unit-control/utils.ts index c80b34ef3af7b0..7951113eadc466 100644 --- a/packages/components/src/unit-control/utils.ts +++ b/packages/components/src/unit-control/utils.ts @@ -394,11 +394,11 @@ export function filterUnitsWithSettings( // Although the `isArray` check shouldn't be necessary (given the signature of // this typed function), it's better to stay on the side of caution, since // this function may be called from un-typed environments. - return Array.isArray( availableUnits ) + return Array.isArray( availableUnits ) && Array.isArray( allowedUnitValues ) ? availableUnits.filter( ( unit ) => allowedUnitValues.includes( unit.value ) ) - : []; + : availableUnits; } /** From 79e66a716a77352b50249af789dc29a98df918a6 Mon Sep 17 00:00:00 2001 From: himanshupathak95 Date: Wed, 29 Jan 2025 13:56:36 +0530 Subject: [PATCH 2/7] Fix failing unit tests --- packages/components/src/unit-control/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/unit-control/utils.ts b/packages/components/src/unit-control/utils.ts index 7951113eadc466..0a7c1160d0b38b 100644 --- a/packages/components/src/unit-control/utils.ts +++ b/packages/components/src/unit-control/utils.ts @@ -398,7 +398,7 @@ export function filterUnitsWithSettings( ? availableUnits.filter( ( unit ) => allowedUnitValues.includes( unit.value ) ) - : availableUnits; + : []; } /** From a8b6ec528822126a91d58ae61bd951c0364413a5 Mon Sep 17 00:00:00 2001 From: himanshupathak95 Date: Wed, 26 Feb 2025 12:15:46 +0530 Subject: [PATCH 3/7] Docs: Update FontSizePicker README.md to mention the unitless mode --- packages/components/src/font-size-picker/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/font-size-picker/README.md b/packages/components/src/font-size-picker/README.md index 1c0cb84da82556..4e2c441d7139ba 100644 --- a/packages/components/src/font-size-picker/README.md +++ b/packages/components/src/font-size-picker/README.md @@ -92,7 +92,7 @@ Size of the control. Available units for custom font size selection. -**Important Note**: For the units property to work, font sizes must be specified as strings with units (e.g., `'12px'` instead of `12`). When font sizes are provided as numbers, the component operates in "unitless mode" where the units property has no effect. +**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 - Default: `[ 'px', 'em', 'rem', 'vw', 'vh' ]` From 32086da235a96a82a2ce692d60695a555e3f82f2 Mon Sep 17 00:00:00 2001 From: himanshupathak95 Date: Wed, 26 Feb 2025 12:24:16 +0530 Subject: [PATCH 4/7] FontSizePicker: Change the storybook control type to inline-check --- .../components/src/font-size-picker/stories/index.story.tsx | 4 ++++ packages/components/src/unit-control/utils.ts | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) 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 f6502fcfd537c8..59af0f5cfe60dc 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/unit-control/utils.ts b/packages/components/src/unit-control/utils.ts index 0a7c1160d0b38b..c80b34ef3af7b0 100644 --- a/packages/components/src/unit-control/utils.ts +++ b/packages/components/src/unit-control/utils.ts @@ -394,7 +394,7 @@ export function filterUnitsWithSettings( // Although the `isArray` check shouldn't be necessary (given the signature of // this typed function), it's better to stay on the side of caution, since // this function may be called from un-typed environments. - return Array.isArray( availableUnits ) && Array.isArray( allowedUnitValues ) + return Array.isArray( availableUnits ) ? availableUnits.filter( ( unit ) => allowedUnitValues.includes( unit.value ) ) From 2a6ccb4c6771ff17914d51afa0f5a0568595c231 Mon Sep 17 00:00:00 2001 From: himanshupathak95 Date: Wed, 26 Feb 2025 12:35:59 +0530 Subject: [PATCH 5/7] FontSizePicker: Add entry in CHANGELOG.md --- packages/components/CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 5cdf14f89937f1..4339edac20bb05 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +- `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)). From 44bbf50dd16d62fc1b99e352b53ba883d5ab0ebe Mon Sep 17 00:00:00 2001 From: himanshupathak95 Date: Thu, 27 Feb 2025 10:11:05 +0530 Subject: [PATCH 6/7] Add changelog subheading - Documentation --- packages/components/CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 4339edac20bb05..785ab59e397e34 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,8 @@ ## 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 From dbf1a0620de91e96d3d62c94c4863bf4e56204c6 Mon Sep 17 00:00:00 2001 From: himanshupathak95 Date: Thu, 27 Feb 2025 10:24:55 +0530 Subject: [PATCH 7/7] Move the unitless property note to value prop and reflect the same in JSDocs --- packages/components/src/font-size-picker/README.md | 4 ++-- packages/components/src/font-size-picker/types.ts | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/components/src/font-size-picker/README.md b/packages/components/src/font-size-picker/README.md index 4e2c441d7139ba..8c5cd1444aa69c 100644 --- a/packages/components/src/font-size-picker/README.md +++ b/packages/components/src/font-size-picker/README.md @@ -92,8 +92,6 @@ Size of the control. Available units for custom font size selection. -**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 - Default: `[ 'px', 'em', 'rem', 'vw', 'vh' ]` @@ -101,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/types.ts b/packages/components/src/font-size-picker/types.ts index 2296e968567882..04964e05d45d55 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; /**