From e11978c4bc3be59da5298e7c39ee11675ad76199 Mon Sep 17 00:00:00 2001 From: yogeshbhutkar Date: Wed, 25 Dec 2024 11:25:58 +0530 Subject: [PATCH 1/5] FontSizePicker: truncate option name based on viewport size --- .../font-size-picker/font-size-picker-select.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/components/src/font-size-picker/font-size-picker-select.tsx b/packages/components/src/font-size-picker/font-size-picker-select.tsx index b33c382f3393e..0a0b7d912b1f6 100644 --- a/packages/components/src/font-size-picker/font-size-picker-select.tsx +++ b/packages/components/src/font-size-picker/font-size-picker-select.tsx @@ -13,6 +13,7 @@ import type { FontSizePickerSelectOption, } from './types'; import { getCommonSizeUnit, isSimpleCssValue } from './utils'; +import { useViewportMatch } from '@wordpress/compose'; const DEFAULT_OPTION: FontSizePickerSelectOption = { key: 'default', @@ -66,6 +67,11 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => { ? options.find( ( option ) => option.value === value ) ?? CUSTOM_OPTION : DEFAULT_OPTION; + const isMobileViewport = useViewportMatch( 'medium', '<' ); + const truncate = ( str: string, maxLength: number ) => { + return str.length > maxLength ? str.slice( 0, maxLength ) + '…' : str; + }; + return ( { selectedOption.name ) } options={ options } - value={ selectedOption } + value={ { + ...selectedOption, + name: truncate( + selectedOption.name, + isMobileViewport ? 45 : 30 + ), + } } showSelectedHint onChange={ ( { selectedItem, From adbdbb5fce50bcd3d551bfb34129029f26344cdd Mon Sep 17 00:00:00 2001 From: yogeshbhutkar Date: Wed, 25 Dec 2024 11:59:15 +0530 Subject: [PATCH 2/5] FontSizePicker: implement `display: contents` for font-size-picker-select --- .../font-size-picker/font-size-picker-select.tsx | 14 +------------- .../components/src/font-size-picker/style.scss | 3 +++ packages/components/src/style.scss | 1 + 3 files changed, 5 insertions(+), 13 deletions(-) create mode 100644 packages/components/src/font-size-picker/style.scss diff --git a/packages/components/src/font-size-picker/font-size-picker-select.tsx b/packages/components/src/font-size-picker/font-size-picker-select.tsx index 0a0b7d912b1f6..b33c382f3393e 100644 --- a/packages/components/src/font-size-picker/font-size-picker-select.tsx +++ b/packages/components/src/font-size-picker/font-size-picker-select.tsx @@ -13,7 +13,6 @@ import type { FontSizePickerSelectOption, } from './types'; import { getCommonSizeUnit, isSimpleCssValue } from './utils'; -import { useViewportMatch } from '@wordpress/compose'; const DEFAULT_OPTION: FontSizePickerSelectOption = { key: 'default', @@ -67,11 +66,6 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => { ? options.find( ( option ) => option.value === value ) ?? CUSTOM_OPTION : DEFAULT_OPTION; - const isMobileViewport = useViewportMatch( 'medium', '<' ); - const truncate = ( str: string, maxLength: number ) => { - return str.length > maxLength ? str.slice( 0, maxLength ) + '…' : str; - }; - return ( { selectedOption.name ) } options={ options } - value={ { - ...selectedOption, - name: truncate( - selectedOption.name, - isMobileViewport ? 45 : 30 - ), - } } + value={ selectedOption } showSelectedHint onChange={ ( { selectedItem, diff --git a/packages/components/src/font-size-picker/style.scss b/packages/components/src/font-size-picker/style.scss new file mode 100644 index 0000000000000..ad3533dd73dc1 --- /dev/null +++ b/packages/components/src/font-size-picker/style.scss @@ -0,0 +1,3 @@ +.components-font-size-picker { + display: contents; +} diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss index 368dec0f5e253..be4e870156c02 100644 --- a/packages/components/src/style.scss +++ b/packages/components/src/style.scss @@ -28,6 +28,7 @@ @import "./duotone-picker/style.scss"; @import "./duotone-picker/color-list-picker/style.scss"; @import "./external-link/style.scss"; +@import "./font-size-picker/style.scss"; @import "./form-toggle/style.scss"; @import "./form-token-field/style.scss"; @import "./guide/style.scss"; From 4eed662eb74991bce439ab04c14432b3216c5737 Mon Sep 17 00:00:00 2001 From: yogeshbhutkar Date: Fri, 27 Dec 2024 18:35:48 +0530 Subject: [PATCH 3/5] FontSizePicker: Add `display` rule in `styles.ts` --- packages/components/src/font-size-picker/style.scss | 3 --- packages/components/src/font-size-picker/styles.ts | 1 + packages/components/src/style.scss | 1 - 3 files changed, 1 insertion(+), 4 deletions(-) delete mode 100644 packages/components/src/font-size-picker/style.scss diff --git a/packages/components/src/font-size-picker/style.scss b/packages/components/src/font-size-picker/style.scss deleted file mode 100644 index ad3533dd73dc1..0000000000000 --- a/packages/components/src/font-size-picker/style.scss +++ /dev/null @@ -1,3 +0,0 @@ -.components-font-size-picker { - display: contents; -} diff --git a/packages/components/src/font-size-picker/styles.ts b/packages/components/src/font-size-picker/styles.ts index f47ca41b51eb7..b0e33b5aea3a2 100644 --- a/packages/components/src/font-size-picker/styles.ts +++ b/packages/components/src/font-size-picker/styles.ts @@ -16,6 +16,7 @@ export const Container = styled.fieldset` border: 0; margin: 0; padding: 0; + display: contents; `; export const Header = styled( HStack )` diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss index be4e870156c02..368dec0f5e253 100644 --- a/packages/components/src/style.scss +++ b/packages/components/src/style.scss @@ -28,7 +28,6 @@ @import "./duotone-picker/style.scss"; @import "./duotone-picker/color-list-picker/style.scss"; @import "./external-link/style.scss"; -@import "./font-size-picker/style.scss"; @import "./form-toggle/style.scss"; @import "./form-token-field/style.scss"; @import "./guide/style.scss"; From 124552364ec18e6b5e5c8808316023b4f834ae30 Mon Sep 17 00:00:00 2001 From: yogeshbhutkar Date: Fri, 27 Dec 2024 19:08:32 +0530 Subject: [PATCH 4/5] add changelog entry --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 7255888604ed1..298a46aa5dcd6 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -19,6 +19,7 @@ ### Bug Fixes - `BoxControl`: Better respect for the `min` prop in the Range Slider ([#67819](https://github.com/WordPress/gutenberg/pull/67819)). +- `FontSizePicker`: Add `display:contents` rule to fix overflowing text in the font size picker. ([#68280](https://github.com/WordPress/gutenberg/pull/68280)). ### Experimental From 0234b415a6b0c1bdf7622215f7c10ef868ae32db Mon Sep 17 00:00:00 2001 From: yogeshbhutkar Date: Mon, 30 Dec 2024 11:07:39 +0530 Subject: [PATCH 5/5] FontSizePicker: Update changelog entry to clarify fix for overflowing text in custom size select --- packages/components/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 298a46aa5dcd6..8853f4c94e689 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -19,7 +19,7 @@ ### Bug Fixes - `BoxControl`: Better respect for the `min` prop in the Range Slider ([#67819](https://github.com/WordPress/gutenberg/pull/67819)). -- `FontSizePicker`: Add `display:contents` rule to fix overflowing text in the font size picker. ([#68280](https://github.com/WordPress/gutenberg/pull/68280)). +- `FontSizePicker`: Add `display:contents` rule to fix overflowing text in the custom size select. ([#68280](https://github.com/WordPress/gutenberg/pull/68280)). ### Experimental