From 093a1fdb1c526a2927472b384fc9a9fa6ee86b22 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 8 Jul 2024 15:22:59 +0200 Subject: [PATCH 01/13] CustomSelectControl V2: add showSelectedHint prop, deprecate __experimentalShowSelectedHint --- .../legacy-component/index.tsx | 23 +++++++++++++++---- .../src/custom-select-control-v2/types.ts | 10 ++++++-- 2 files changed, 26 insertions(+), 7 deletions(-) diff --git a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx index a4c437be97e405..9fee2b665a87ac 100644 --- a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx +++ b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx @@ -12,9 +12,23 @@ import CustomSelectItem from '../item'; import type { LegacyCustomSelectProps } from '../types'; import * as Styled from '../styles'; +function useDeprecatedProps( { + showSelectedHint = false, + // Deprecated + __experimentalShowSelectedHint, + ...otherProps +}: LegacyCustomSelectProps ) { + return { + ...otherProps, + showSelectedHint: + typeof __experimentalShowSelectedHint !== 'undefined' + ? __experimentalShowSelectedHint + : showSelectedHint, + }; +} + function CustomSelectControl( props: LegacyCustomSelectProps ) { const { - __experimentalShowSelectedHint = false, __next40pxDefaultSize = false, describedBy, options, @@ -22,8 +36,9 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) { size = 'default', value, className: classNameProp, + showSelectedHint, ...restProps - } = props; + } = useDeprecatedProps( props ); // Forward props + store from v2 implementation const store = Ariakit.useSelectStore( { @@ -131,9 +146,7 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) { <_CustomSelect aria-describedby={ describedBy } renderSelectedValue={ - __experimentalShowSelectedHint - ? renderSelectedValueHint - : undefined + showSelectedHint ? renderSelectedValueHint : undefined } size={ translatedSize } store={ store } diff --git a/packages/components/src/custom-select-control-v2/types.ts b/packages/components/src/custom-select-control-v2/types.ts index b663f1892ceebc..54f175c3ae23d9 100644 --- a/packages/components/src/custom-select-control-v2/types.ts +++ b/packages/components/src/custom-select-control-v2/types.ts @@ -169,11 +169,17 @@ export type LegacyCustomSelectProps = { */ value?: LegacyOption; /** - * Legacy way to add additional text to the right of each option. + * Use the `showSelectedHint` property instead. + * @deprecated + * @ignore + */ + __experimentalShowSelectedHint?: boolean; + /** + * Show the hint of the selected item in the trigger button. * * @default false */ - __experimentalShowSelectedHint?: boolean; + showSelectedHint?: boolean; /** * Opt-in prop for an unconstrained width style which became the default in * WordPress 6.5. The prop is no longer needed and can be safely removed. From 8bae16cd49431c7290b55d9a7a9bc8c2929be70b Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 8 Jul 2024 15:23:22 +0200 Subject: [PATCH 02/13] Update showSelectedHint unit tests --- .../legacy-component/test/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx b/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx index 1e361236aafd9a..7507432f041cd8 100644 --- a/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx +++ b/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx @@ -309,7 +309,7 @@ describe.each( [ ); } ); - it( 'shows selected hint when __experimentalShowSelectedHint is set', async () => { + it( 'shows selected hint when showSelectedHint is set', async () => { render( ); @@ -334,7 +334,7 @@ describe.each( [ ); } ); - it( 'shows selected hint in list of options when added, regardless of __experimentalShowSelectedHint prop', async () => { + it( 'shows selected hint in list of options when added, regardless of showSelectedHint prop', async () => { render( Date: Mon, 8 Jul 2024 15:49:32 +0200 Subject: [PATCH 03/13] CustomSelectControl V2: add hint option prop, deprecate __experimentalHint --- .../legacy-component/index.tsx | 91 +++++++++++-------- .../src/custom-select-control-v2/types.ts | 8 +- 2 files changed, 58 insertions(+), 41 deletions(-) diff --git a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx index 9fee2b665a87ac..18fb78e1258514 100644 --- a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx +++ b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx @@ -9,7 +9,7 @@ import clsx from 'clsx'; */ import _CustomSelect from '../custom-select'; import CustomSelectItem from '../item'; -import type { LegacyCustomSelectProps } from '../types'; +import type { LegacyCustomSelectProps, LegacyOption } from '../types'; import * as Styled from '../styles'; function useDeprecatedProps( { @@ -26,6 +26,14 @@ function useDeprecatedProps( { : showSelectedHint, }; } +const computeOptionDeprecatedProps = ( { + __experimentalHint, + hint, + ...rest +}: LegacyOption ) => ( { + ...rest, + hint: typeof __experimentalHint !== 'undefined' ? __experimentalHint : hint, +} ); function CustomSelectControl( props: LegacyCustomSelectProps ) { const { @@ -75,56 +83,59 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) { defaultValue: options[ 0 ]?.name, } ); - const children = options.map( - ( { name, key, __experimentalHint, style, className } ) => { - const withHint = ( - - { name } - - { __experimentalHint } - - - ); + const children = options.map( ( option ) => { + const { name, key, hint, style, className } = + computeOptionDeprecatedProps( option ); - return ( - - ); - } - ); + const withHint = ( + + { name } + + { hint } + + + ); + + return ( + + ); + } ); const renderSelectedValueHint = () => { const { value: currentValue } = store.getState(); - const currentHint = options?.find( + const selectedOption = options?.find( ( { name } ) => currentValue === name ); return ( { currentValue } - - { currentHint?.__experimentalHint } - + { selectedOption && ( + + { computeOptionDeprecatedProps( selectedOption )?.hint } + + ) } ); }; diff --git a/packages/components/src/custom-select-control-v2/types.ts b/packages/components/src/custom-select-control-v2/types.ts index 54f175c3ae23d9..24b9eb1745ba44 100644 --- a/packages/components/src/custom-select-control-v2/types.ts +++ b/packages/components/src/custom-select-control-v2/types.ts @@ -85,11 +85,17 @@ export type CustomSelectProps = _CustomSelectProps & CustomSelectSize; /** * The legacy object structure for the options array. */ -type LegacyOption = { +export type LegacyOption = { key: string; name: string; style?: React.CSSProperties; className?: string; + hint?: string; + /** + * Use the `hint` property instead + * @deprecated + * @ignore + */ __experimentalHint?: string; [ key: string ]: any; }; From f529ae00cf1d78a89bbd2bd57decad2cb1f212f6 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 8 Jul 2024 15:50:06 +0200 Subject: [PATCH 04/13] Rename __experimentalHint to hint --- .../src/components/date-format-picker/index.js | 2 +- packages/block-editor/src/hooks/position.js | 6 ++---- .../legacy-component/test/index.tsx | 6 +++--- .../src/custom-select-control/stories/index.story.tsx | 8 ++++---- .../src/font-size-picker/font-size-picker-select.tsx | 2 +- packages/components/src/font-size-picker/types.ts | 2 +- 6 files changed, 12 insertions(+), 14 deletions(-) diff --git a/packages/block-editor/src/components/date-format-picker/index.js b/packages/block-editor/src/components/date-format-picker/index.js index 72e6d4831efa93..cf9af5eb33f122 100644 --- a/packages/block-editor/src/components/date-format-picker/index.js +++ b/packages/block-editor/src/components/date-format-picker/index.js @@ -126,7 +126,7 @@ function NonDefaultControls( { format, onChange } ) { name: __( 'Custom' ), className: 'block-editor-date-format-picker__custom-format-select-control__custom-option', - __experimentalHint: __( 'Enter your own date format' ), + hint: __( 'Enter your own date format' ), }; const [ isCustom, setIsCustom ] = useState( diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js index 11fddf72896925..a5fae3d8d3a7c2 100644 --- a/packages/block-editor/src/hooks/position.js +++ b/packages/block-editor/src/hooks/position.js @@ -42,7 +42,7 @@ const STICKY_OPTION = { key: 'sticky', value: 'sticky', name: _x( 'Sticky', 'Name for the value of the CSS position property' ), - __experimentalHint: __( + hint: __( 'The block will stick to the top of the window instead of scrolling.' ), }; @@ -51,9 +51,7 @@ const FIXED_OPTION = { key: 'fixed', value: 'fixed', name: _x( 'Fixed', 'Name for the value of the CSS position property' ), - __experimentalHint: __( - 'The block will not move when the page is scrolled.' - ), + hint: __( 'The block will not move when the page is scrolled.' ), }; const POSITION_SIDES = [ 'top', 'right', 'bottom', 'left' ]; diff --git a/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx b/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx index 7507432f041cd8..496b42572d82f6 100644 --- a/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx +++ b/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx @@ -297,7 +297,7 @@ describe.each( [ { key: 'one', name: 'One', - __experimentalHint: 'Hint', + hint: 'Hint', }, ] } /> @@ -318,7 +318,7 @@ describe.each( [ { key: 'one', name: 'One', - __experimentalHint: 'Hint', + hint: 'Hint', }, ] } showSelectedHint @@ -343,7 +343,7 @@ describe.each( [ { key: 'one', name: 'One', - __experimentalHint: 'Hint', + hint: 'Hint', }, ] } /> diff --git a/packages/components/src/custom-select-control/stories/index.story.tsx b/packages/components/src/custom-select-control/stories/index.story.tsx index 8ff9a023c5821b..1eb649140d462f 100644 --- a/packages/components/src/custom-select-control/stories/index.story.tsx +++ b/packages/components/src/custom-select-control/stories/index.story.tsx @@ -106,22 +106,22 @@ WithHints.args = { { key: 'thumbnail', name: 'Thumbnail', - __experimentalHint: '150x150', + hint: '150x150', }, { key: 'medium', name: 'Medium', - __experimentalHint: '250x250', + hint: '250x250', }, { key: 'large', name: 'Large', - __experimentalHint: '1024x1024', + hint: '1024x1024', }, { key: 'full', name: 'Full Size', - __experimentalHint: '1600x1600', + hint: '1600x1600', }, ], }; 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 3f0b7a0e54074a..6e60a865dce935 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 @@ -56,7 +56,7 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => { key: fontSize.slug, name: fontSize.name || fontSize.slug, value: fontSize.size, - __experimentalHint: hint, + hint, }; } ), ...( disableCustomFontSizes ? [] : [ CUSTOM_OPTION ] ), diff --git a/packages/components/src/font-size-picker/types.ts b/packages/components/src/font-size-picker/types.ts index 6b4ed4b7ee75a5..0072c47df6f052 100644 --- a/packages/components/src/font-size-picker/types.ts +++ b/packages/components/src/font-size-picker/types.ts @@ -110,7 +110,7 @@ export type FontSizePickerSelectOption = { key: string; name: string; value?: FontSize[ 'size' ]; - __experimentalHint?: string; + hint?: string; }; export type FontSizePickerToggleGroupProps = Pick< From 2e42cbe6dbabc3065fd5133c531f1d82b8a3d3ef Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 8 Jul 2024 16:25:47 +0200 Subject: [PATCH 05/13] Refactor to smarter approach --- .../legacy-component/index.tsx | 33 +++++++++---------- .../src/custom-select-control-v2/types.ts | 2 +- 2 files changed, 17 insertions(+), 18 deletions(-) diff --git a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx index 18fb78e1258514..531d60df69860b 100644 --- a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx +++ b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx @@ -9,31 +9,33 @@ import clsx from 'clsx'; */ import _CustomSelect from '../custom-select'; import CustomSelectItem from '../item'; -import type { LegacyCustomSelectProps, LegacyOption } from '../types'; +import type { LegacyCustomSelectProps } from '../types'; import * as Styled from '../styles'; function useDeprecatedProps( { showSelectedHint = false, + options, // Deprecated __experimentalShowSelectedHint, ...otherProps }: LegacyCustomSelectProps ) { return { ...otherProps, + options: options.map( + ( { __experimentalHint, hint, ...restOption } ) => ( { + ...restOption, + hint: + typeof __experimentalHint !== 'undefined' + ? __experimentalHint + : hint, + } ) + ), showSelectedHint: typeof __experimentalShowSelectedHint !== 'undefined' ? __experimentalShowSelectedHint : showSelectedHint, }; } -const computeOptionDeprecatedProps = ( { - __experimentalHint, - hint, - ...rest -}: LegacyOption ) => ( { - ...rest, - hint: typeof __experimentalHint !== 'undefined' ? __experimentalHint : hint, -} ); function CustomSelectControl( props: LegacyCustomSelectProps ) { const { @@ -83,10 +85,7 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) { defaultValue: options[ 0 ]?.name, } ); - const children = options.map( ( option ) => { - const { name, key, hint, style, className } = - computeOptionDeprecatedProps( option ); - + const children = options.map( ( { name, key, hint, style, className } ) => { const withHint = ( { name } @@ -121,19 +120,19 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) { const renderSelectedValueHint = () => { const { value: currentValue } = store.getState(); - const selectedOption = options?.find( + const selectedOptionHint = options?.find( ( { name } ) => currentValue === name - ); + )?.hint; return ( { currentValue } - { selectedOption && ( + { selectedOptionHint && ( - { computeOptionDeprecatedProps( selectedOption )?.hint } + { selectedOptionHint } ) } diff --git a/packages/components/src/custom-select-control-v2/types.ts b/packages/components/src/custom-select-control-v2/types.ts index 24b9eb1745ba44..95a78c501839d6 100644 --- a/packages/components/src/custom-select-control-v2/types.ts +++ b/packages/components/src/custom-select-control-v2/types.ts @@ -85,7 +85,7 @@ export type CustomSelectProps = _CustomSelectProps & CustomSelectSize; /** * The legacy object structure for the options array. */ -export type LegacyOption = { +type LegacyOption = { key: string; name: string; style?: React.CSSProperties; From b0db404866efd4f67aa09b4e0172dbc693d9e030 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 8 Jul 2024 16:27:32 +0200 Subject: [PATCH 06/13] Continue using `__experimentalHint` in the V1 storybook example --- .../src/custom-select-control/stories/index.story.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/components/src/custom-select-control/stories/index.story.tsx b/packages/components/src/custom-select-control/stories/index.story.tsx index 1eb649140d462f..8ff9a023c5821b 100644 --- a/packages/components/src/custom-select-control/stories/index.story.tsx +++ b/packages/components/src/custom-select-control/stories/index.story.tsx @@ -106,22 +106,22 @@ WithHints.args = { { key: 'thumbnail', name: 'Thumbnail', - hint: '150x150', + __experimentalHint: '150x150', }, { key: 'medium', name: 'Medium', - hint: '250x250', + __experimentalHint: '250x250', }, { key: 'large', name: 'Large', - hint: '1024x1024', + __experimentalHint: '1024x1024', }, { key: 'full', name: 'Full Size', - hint: '1600x1600', + __experimentalHint: '1600x1600', }, ], }; From b12ab44f30d31fb99b72303748570f7b00d33e04 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 8 Jul 2024 16:28:54 +0200 Subject: [PATCH 07/13] CHANGELOG --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 401d92d06afe19..d6bb47bc583c3f 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -19,6 +19,7 @@ - `ToolbarButton`: Always keep focusable when disabled ([#63102](https://github.com/WordPress/gutenberg/pull/63102)). - `ProgressBar`: Fix indeterminate RTL support. ([#63129](https://github.com/WordPress/gutenberg/pull/63129)). - `RangeControl`: Fix RTL support for custom marks ([#63198](https://github.com/WordPress/gutenberg/pull/63198)). +- `CustomSelectControl`: Stabilize `__experimentalShowSelectedHint` and `options[]. __experimentalHint` props ([#63248](https://github.com/WordPress/gutenberg/pull/63248)). - `TimePicker`: Add `dateOrder` prop ([#62481](https://github.com/WordPress/gutenberg/pull/62481)). ### Bug Fixes From 96299c6448428388c09721f33bf1f2be75af5026 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 8 Jul 2024 17:19:13 +0200 Subject: [PATCH 08/13] Add hint to options only if necessary --- .../legacy-component/index.tsx | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx index 531d60df69860b..e3d21f4d6210ca 100644 --- a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx +++ b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx @@ -21,15 +21,20 @@ function useDeprecatedProps( { }: LegacyCustomSelectProps ) { return { ...otherProps, - options: options.map( - ( { __experimentalHint, hint, ...restOption } ) => ( { - ...restOption, - hint: - typeof __experimentalHint !== 'undefined' - ? __experimentalHint - : hint, - } ) - ), + options: options.map( ( o ) => { + const toReturn = o; + + const hint = + typeof o.__experimentalHint !== 'undefined' + ? o.__experimentalHint + : o.hint; + + if ( hint ) { + toReturn.hint = hint; + } + + return toReturn; + } ), showSelectedHint: typeof __experimentalShowSelectedHint !== 'undefined' ? __experimentalShowSelectedHint From 9ad93e594f7dac82bc0f397a512c15dc774c9419 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 8 Jul 2024 17:32:47 +0200 Subject: [PATCH 09/13] __experimentalShowSelectedHint => showSelectedHint --- .../components/src/font-size-picker/font-size-picker-select.tsx | 2 +- 1 file changed, 1 insertion(+), 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 6e60a865dce935..4dd80b45b0ac70 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 @@ -79,7 +79,7 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => { ) } options={ options } value={ selectedOption } - __experimentalShowSelectedHint + showSelectedHint onChange={ ( { selectedItem, }: { From 0f127e862a4b31cab9226eba6b9df9e670c85609 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 10 Jul 2024 15:23:27 +0200 Subject: [PATCH 10/13] Move changelog entry to unreleased section --- packages/components/CHANGELOG.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index d6bb47bc583c3f..3699162feb5109 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,10 @@ - `CustomSelectControlV2`: animate select popover appearance. ([#63343](https://github.com/WordPress/gutenberg/pull/63343)) +### Enhancements + +- `CustomSelectControl`: Stabilize `__experimentalShowSelectedHint` and `options[]. __experimentalHint` props ([#63248](https://github.com/WordPress/gutenberg/pull/63248)). + ## 28.3.0 (2024-07-10) ### Enhancements @@ -19,7 +23,6 @@ - `ToolbarButton`: Always keep focusable when disabled ([#63102](https://github.com/WordPress/gutenberg/pull/63102)). - `ProgressBar`: Fix indeterminate RTL support. ([#63129](https://github.com/WordPress/gutenberg/pull/63129)). - `RangeControl`: Fix RTL support for custom marks ([#63198](https://github.com/WordPress/gutenberg/pull/63198)). -- `CustomSelectControl`: Stabilize `__experimentalShowSelectedHint` and `options[]. __experimentalHint` props ([#63248](https://github.com/WordPress/gutenberg/pull/63248)). - `TimePicker`: Add `dateOrder` prop ([#62481](https://github.com/WordPress/gutenberg/pull/62481)). ### Bug Fixes From 8e02b5f406f989b6eedb4c1bccd6627533bf1ca0 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 10 Jul 2024 15:27:16 +0200 Subject: [PATCH 11/13] Give priority to `showSelectedHint` over `__experimentalShowSelectedHint` --- .../custom-select-control-v2/legacy-component/index.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx index e3d21f4d6210ca..bd83ba9a813a4b 100644 --- a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx +++ b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx @@ -13,13 +13,13 @@ import type { LegacyCustomSelectProps } from '../types'; import * as Styled from '../styles'; function useDeprecatedProps( { - showSelectedHint = false, options, // Deprecated __experimentalShowSelectedHint, ...otherProps }: LegacyCustomSelectProps ) { return { + showSelectedHint: __experimentalShowSelectedHint, ...otherProps, options: options.map( ( o ) => { const toReturn = o; @@ -35,10 +35,6 @@ function useDeprecatedProps( { return toReturn; } ), - showSelectedHint: - typeof __experimentalShowSelectedHint !== 'undefined' - ? __experimentalShowSelectedHint - : showSelectedHint, }; } @@ -51,7 +47,7 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) { size = 'default', value, className: classNameProp, - showSelectedHint, + showSelectedHint = false, ...restProps } = useDeprecatedProps( props ); From 2c98210d97ce348dd5f9f06808f8d567a93d0452 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 10 Jul 2024 15:35:26 +0200 Subject: [PATCH 12/13] Move `__experimentalHint` => `hint` code to run at runtime This avoids breakages for any consumer relying on object identity --- .../legacy-component/index.tsx | 95 +++++++++---------- 1 file changed, 47 insertions(+), 48 deletions(-) diff --git a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx index bd83ba9a813a4b..301cf8037b9490 100644 --- a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx +++ b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx @@ -13,28 +13,25 @@ import type { LegacyCustomSelectProps } from '../types'; import * as Styled from '../styles'; function useDeprecatedProps( { - options, - // Deprecated __experimentalShowSelectedHint, ...otherProps }: LegacyCustomSelectProps ) { return { showSelectedHint: __experimentalShowSelectedHint, ...otherProps, - options: options.map( ( o ) => { - const toReturn = o; - - const hint = - typeof o.__experimentalHint !== 'undefined' - ? o.__experimentalHint - : o.hint; - - if ( hint ) { - toReturn.hint = hint; - } + }; +} - return toReturn; - } ), +// The removal of `__experimentalHint` in favour of `hint` doesn't happen in +// the `useDeprecatedProps` hook in order not to break consumers that rely +// on object identity (see https://github.com/WordPress/gutenberg/pull/63248/files/175907e16310fcd3ef13fcb2964e138a69134760#r1668842238) +function applyOptionDeprecations( { + __experimentalHint, + ...rest +}: LegacyCustomSelectProps[ 'options' ][ number ] ) { + return { + hint: __experimentalHint, + ...rest, }; } @@ -86,44 +83,46 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) { defaultValue: options[ 0 ]?.name, } ); - const children = options.map( ( { name, key, hint, style, className } ) => { - const withHint = ( - - { name } - - { hint } - - - ); - - return ( - { + const withHint = ( + + { name } + - ); - } ); + // className="components-custom-select-control__item-hint" + > + { hint } + + + ); + + return ( + + ); + } ); const renderSelectedValueHint = () => { const { value: currentValue } = store.getState(); - const selectedOptionHint = options?.find( - ( { name } ) => currentValue === name - )?.hint; + const selectedOptionHint = options + ?.map( applyOptionDeprecations ) + ?.find( ( { name } ) => currentValue === name )?.hint; return ( From 4d118afb2c798d14b8c6516467b09decf136c5b6 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 10 Jul 2024 17:02:00 +0200 Subject: [PATCH 13/13] Fix wrong link in inline comment --- .../src/custom-select-control-v2/legacy-component/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx index 301cf8037b9490..7dcdec9b7bdc60 100644 --- a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx +++ b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx @@ -24,7 +24,7 @@ function useDeprecatedProps( { // The removal of `__experimentalHint` in favour of `hint` doesn't happen in // the `useDeprecatedProps` hook in order not to break consumers that rely -// on object identity (see https://github.com/WordPress/gutenberg/pull/63248/files/175907e16310fcd3ef13fcb2964e138a69134760#r1668842238) +// on object identity (see https://github.com/WordPress/gutenberg/pull/63248#discussion_r1672213131) function applyOptionDeprecations( { __experimentalHint, ...rest