From b2c3b8afff1a8d41d246eaa5944c8379694a1096 Mon Sep 17 00:00:00 2001 From: brookewp Date: Mon, 15 Jan 2024 17:26:21 -0800 Subject: [PATCH 1/4] CustomSelect: adjust renderSelectedValue to fix sizing --- .../src/custom-select-control-v2/index.tsx | 44 ++++++++++--------- 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/packages/components/src/custom-select-control-v2/index.tsx b/packages/components/src/custom-select-control-v2/index.tsx index 614f52105513f4..23dbc97c253ac2 100644 --- a/packages/components/src/custom-select-control-v2/index.tsx +++ b/packages/components/src/custom-select-control-v2/index.tsx @@ -23,25 +23,6 @@ import type { WordPressComponentProps } from '../context'; export const CustomSelectContext = createContext< CustomSelectContextType >( undefined ); -function defaultRenderSelectedValue( value: CustomSelectProps[ 'value' ] ) { - const isValueEmpty = Array.isArray( value ) - ? value.length === 0 - : value === undefined || value === null; - - if ( isValueEmpty ) { - return __( 'Select an item' ); - } - - if ( Array.isArray( value ) ) { - return value.length === 1 - ? value[ 0 ] - : // translators: %s: number of items selected (it will always be 2 or more items) - sprintf( __( '%s items selected' ), value.length ); - } - - return value; -} - export function CustomSelect( { children, defaultValue, @@ -49,7 +30,7 @@ export function CustomSelect( { onChange, size = 'default', value, - renderSelectedValue = defaultRenderSelectedValue, + renderSelectedValue, ...props }: WordPressComponentProps< CustomSelectProps, 'button', false > ) { const store = Ariakit.useSelectStore( { @@ -60,6 +41,25 @@ export function CustomSelect( { const { value: currentValue } = store.useState(); + const defaultRenderSelectedValue = () => { + const isValueEmpty = Array.isArray( currentValue ) + ? currentValue.length === 0 + : currentValue === undefined || currentValue === null; + + if ( isValueEmpty ) { + return __( 'Select an item' ); + } + + if ( Array.isArray( currentValue ) ) { + return currentValue.length === 1 + ? currentValue[ 0 ] + : // translators: %s: number of items selected (it will always be 2 or more items) + sprintf( __( '%s items selected' ), currentValue.length ); + } + + return currentValue; + }; + return ( <> @@ -71,7 +71,9 @@ export function CustomSelect( { hasCustomRenderProp={ !! renderSelectedValue } store={ store } > - { renderSelectedValue( currentValue ) } + { renderSelectedValue + ? renderSelectedValue( defaultRenderSelectedValue() ) + : currentValue } From 657805cd337a85db352afbfeaae1de63821eba6f Mon Sep 17 00:00:00 2001 From: brookewp Date: Tue, 16 Jan 2024 08:37:10 -0800 Subject: [PATCH 2/4] Revert "CustomSelect: adjust renderSelectedValue to fix sizing" This reverts commit 924ce00a894d820a7213412cdec9dbaa6a6cf7d0. --- .../src/custom-select-control-v2/index.tsx | 44 +++++++++---------- 1 file changed, 21 insertions(+), 23 deletions(-) diff --git a/packages/components/src/custom-select-control-v2/index.tsx b/packages/components/src/custom-select-control-v2/index.tsx index 23dbc97c253ac2..614f52105513f4 100644 --- a/packages/components/src/custom-select-control-v2/index.tsx +++ b/packages/components/src/custom-select-control-v2/index.tsx @@ -23,6 +23,25 @@ import type { WordPressComponentProps } from '../context'; export const CustomSelectContext = createContext< CustomSelectContextType >( undefined ); +function defaultRenderSelectedValue( value: CustomSelectProps[ 'value' ] ) { + const isValueEmpty = Array.isArray( value ) + ? value.length === 0 + : value === undefined || value === null; + + if ( isValueEmpty ) { + return __( 'Select an item' ); + } + + if ( Array.isArray( value ) ) { + return value.length === 1 + ? value[ 0 ] + : // translators: %s: number of items selected (it will always be 2 or more items) + sprintf( __( '%s items selected' ), value.length ); + } + + return value; +} + export function CustomSelect( { children, defaultValue, @@ -30,7 +49,7 @@ export function CustomSelect( { onChange, size = 'default', value, - renderSelectedValue, + renderSelectedValue = defaultRenderSelectedValue, ...props }: WordPressComponentProps< CustomSelectProps, 'button', false > ) { const store = Ariakit.useSelectStore( { @@ -41,25 +60,6 @@ export function CustomSelect( { const { value: currentValue } = store.useState(); - const defaultRenderSelectedValue = () => { - const isValueEmpty = Array.isArray( currentValue ) - ? currentValue.length === 0 - : currentValue === undefined || currentValue === null; - - if ( isValueEmpty ) { - return __( 'Select an item' ); - } - - if ( Array.isArray( currentValue ) ) { - return currentValue.length === 1 - ? currentValue[ 0 ] - : // translators: %s: number of items selected (it will always be 2 or more items) - sprintf( __( '%s items selected' ), currentValue.length ); - } - - return currentValue; - }; - return ( <> @@ -71,9 +71,7 @@ export function CustomSelect( { hasCustomRenderProp={ !! renderSelectedValue } store={ store } > - { renderSelectedValue - ? renderSelectedValue( defaultRenderSelectedValue() ) - : currentValue } + { renderSelectedValue( currentValue ) } From 1ce8dac5b5eb30f7acff0f79106a95895319d311 Mon Sep 17 00:00:00 2001 From: brookewp Date: Tue, 16 Jan 2024 18:35:40 -0800 Subject: [PATCH 3/4] Update based on PR feedback --- packages/components/src/custom-select-control-v2/index.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/components/src/custom-select-control-v2/index.tsx b/packages/components/src/custom-select-control-v2/index.tsx index 614f52105513f4..87750eaaec99eb 100644 --- a/packages/components/src/custom-select-control-v2/index.tsx +++ b/packages/components/src/custom-select-control-v2/index.tsx @@ -49,7 +49,7 @@ export function CustomSelect( { onChange, size = 'default', value, - renderSelectedValue = defaultRenderSelectedValue, + renderSelectedValue, ...props }: WordPressComponentProps< CustomSelectProps, 'button', false > ) { const store = Ariakit.useSelectStore( { @@ -60,6 +60,9 @@ export function CustomSelect( { const { value: currentValue } = store.useState(); + const computedRenderSelectedValue = + renderSelectedValue ?? defaultRenderSelectedValue; + return ( <> @@ -71,7 +74,7 @@ export function CustomSelect( { hasCustomRenderProp={ !! renderSelectedValue } store={ store } > - { renderSelectedValue( currentValue ) } + { computedRenderSelectedValue( currentValue ) } From 96f0890d2290425fadd4fba8c56c259800b8dbd4 Mon Sep 17 00:00:00 2001 From: brookewp Date: Wed, 17 Jan 2024 17:08:15 -0800 Subject: [PATCH 4/4] Update changelog --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 9a245d85ebf849..a97b666e029447 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -17,6 +17,7 @@ ### Experimental - `BoxControl`: Update design ([#56665](https://github.com/WordPress/gutenberg/pull/56665)). +- `CustomSelect`: adjust `renderSelectedValue` to fix sizing ([#57865](https://github.com/WordPress/gutenberg/pull/57865)). ## 25.15.0 (2024-01-10)