From ab708fd203f1196ca65d31735e23f173df33899f Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 27 Mar 2024 20:37:03 +0900 Subject: [PATCH] CustomSelectControlV2: Rename for consistency (#60178) * CustomSelectControlV2: Rename for consistency * Add changelog * Improve naming consistency in tests * Simply subcomponent composition and exports * Apply suggestions to readme Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla --- packages/components/CHANGELOG.md | 4 ++ .../src/custom-select-control-v2/README.md | 54 +++++++++---------- .../default-component/index.tsx | 7 ++- .../src/custom-select-control-v2/index.tsx | 3 +- .../{custom-select-item.tsx => item.tsx} | 2 + .../legacy-component/index.tsx | 6 +-- .../legacy-component/test/index.tsx | 12 ++--- .../stories/default.story.tsx | 33 ++++++------ .../stories/legacy.story.tsx | 18 ++++--- .../custom-select-control-v2/test/index.tsx | 34 +++++++----- 10 files changed, 96 insertions(+), 77 deletions(-) rename packages/components/src/custom-select-control-v2/{custom-select-item.tsx => item.tsx} (93%) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 6899661adf14a..685266d88a3f8 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,10 @@ - `InputControl`: Ignore IME events when `isPressEnterToChange` is enabled ([#60090](https://github.com/WordPress/gutenberg/pull/60090)). +### Experimental + +- `CustomSelectControlV2`: Rename for consistency ([#60178](https://github.com/WordPress/gutenberg/pull/60178)). + ### Internal - `Popover`, `ColorPicker`: Obviate pointer event trap #59449 ([#59449](https://github.com/WordPress/gutenberg/pull/59449)). diff --git a/packages/components/src/custom-select-control-v2/README.md b/packages/components/src/custom-select-control-v2/README.md index 634b25808c7d4..e44801681128b 100644 --- a/packages/components/src/custom-select-control-v2/README.md +++ b/packages/components/src/custom-select-control-v2/README.md @@ -1,4 +1,4 @@ -# CustomSelect +# CustomSelectControlV2
This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. @@ -12,31 +12,31 @@ Used to render a customizable select control component. #### Uncontrolled Mode -CustomSelect can be used in an uncontrolled mode, where the component manages its own state. In this mode, the `defaultValue` prop can be used to set the initial selected value. If this prop is not set, the first value from the children will be selected by default. +`CustomSelectControlV2` can be used in an uncontrolled mode, where the component manages its own state. In this mode, the `defaultValue` prop can be used to set the initial selected value. If this prop is not set, the first value from the children will be selected by default. ```jsx -const UncontrolledCustomSelect = () => ( - - +const UncontrolledCustomSelectControlV2 = () => ( + + { /* The `defaultValue` since it wasn't defined */ } Blue - - + + Purple - - + + Pink - - + + ); ``` #### Controlled Mode -CustomSelect can also be used in a controlled mode, where the parent component specifies the `value` and the `onChange` props to control selection. +`CustomSelectControlV2` can also be used in a controlled mode, where the parent component specifies the `value` and the `onChange` props to control selection. ```jsx -const ControlledCustomSelect = () => { +const ControlledCustomSelectControlV2 = () => { const [ value, setValue ] = useState< string | string[] >(); const renderControlledValue = ( renderValue: string | string[] ) => ( @@ -46,7 +46,7 @@ const ControlledCustomSelect = () => { ); return ( - { setValue( nextValue ); @@ -55,11 +55,11 @@ const ControlledCustomSelect = () => { value={ value } > { [ 'blue', 'purple', 'pink' ].map( ( option ) => ( - + { renderControlledValue( option ) } - + ) ) } - + ); }; ``` @@ -70,23 +70,23 @@ Multiple selection can be enabled by using an array for the `value` and `defaultValue` props. The argument of the `onChange` function will also change accordingly. ```jsx -const MultiSelectCustomSelect = () => ( - +const MultiSelectCustomSelectControlV2 = () => ( + { [ 'blue', 'purple', 'pink' ].map( ( item ) => ( - + { item } - + ) ) } - + ); ``` ### Components and Sub-components -CustomSelect is comprised of two individual components: +`CustomSelectControlV2` is comprised of two individual components: -- `CustomSelect`: a wrapper component and context provider. It is responsible for managing the state of the `CustomSelectItem` children. -- `CustomSelectItem`: renders a single select item. The first `CustomSelectItem` child will be used as the `defaultValue` when `defaultValue` is undefined. +- `CustomSelectControlV2`: a wrapper component and context provider. It is responsible for managing the state of the `CustomSelectControlV2.Item` children. +- `CustomSelectControlV2.Item`: renders a single select item. The first `CustomSelectControlV2.Item` child will be used as the `defaultValue` when `defaultValue` is undefined. #### Props @@ -94,7 +94,7 @@ The component accepts the following props: ##### `children`: `React.ReactNode` -The child elements. This should be composed of CustomSelect.Item components. +The child elements. This should be composed of `CustomSelectControlV2.Item` components. - Required: yes @@ -142,7 +142,7 @@ Can be used to externally control the value of the control. - Required: no -### `CustomSelectItem` +### `CustomSelectControlV2.Item` Used to render a select item. diff --git a/packages/components/src/custom-select-control-v2/default-component/index.tsx b/packages/components/src/custom-select-control-v2/default-component/index.tsx index e5650202a4160..e9a2a9d8f5918 100644 --- a/packages/components/src/custom-select-control-v2/default-component/index.tsx +++ b/packages/components/src/custom-select-control-v2/default-component/index.tsx @@ -9,8 +9,9 @@ import * as Ariakit from '@ariakit/react'; import _CustomSelect from '../custom-select'; import type { CustomSelectProps } from '../types'; import type { WordPressComponentProps } from '../../context'; +import Item from '../item'; -function CustomSelect( +function CustomSelectControlV2( props: WordPressComponentProps< CustomSelectProps, 'button', false > ) { const { defaultValue, onChange, value, ...restProps } = props; @@ -24,4 +25,6 @@ function CustomSelect( return <_CustomSelect { ...restProps } store={ store } />; } -export default CustomSelect; +CustomSelectControlV2.Item = Item; + +export default CustomSelectControlV2; diff --git a/packages/components/src/custom-select-control-v2/index.tsx b/packages/components/src/custom-select-control-v2/index.tsx index f05191ad8fc0b..f07e8f6f9f311 100644 --- a/packages/components/src/custom-select-control-v2/index.tsx +++ b/packages/components/src/custom-select-control-v2/index.tsx @@ -1,5 +1,4 @@ /** * Internal dependencies */ -export { default as CustomSelect } from './default-component'; -export { default as CustomSelectItem } from './custom-select-item'; +export { default } from './default-component'; diff --git a/packages/components/src/custom-select-control-v2/custom-select-item.tsx b/packages/components/src/custom-select-control-v2/item.tsx similarity index 93% rename from packages/components/src/custom-select-control-v2/custom-select-item.tsx rename to packages/components/src/custom-select-control-v2/item.tsx index b3e8cfeb1363e..bd60f974cc43a 100644 --- a/packages/components/src/custom-select-control-v2/custom-select-item.tsx +++ b/packages/components/src/custom-select-control-v2/item.tsx @@ -26,4 +26,6 @@ export function CustomSelectItem( { ); } +CustomSelectItem.displayName = 'CustomSelectControlV2.Item'; + export default CustomSelectItem; 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 a9c68e344a787..8071a7e932a8b 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 @@ -11,12 +11,12 @@ import { useMemo } from '@wordpress/element'; * Internal dependencies */ import _CustomSelect from '../custom-select'; +import CustomSelectItem from '../item'; import type { LegacyCustomSelectProps } from '../types'; -import { CustomSelectItem } from '..'; import * as Styled from '../styles'; import { ContextSystemProvider } from '../../context'; -function CustomSelect( props: LegacyCustomSelectProps ) { +function CustomSelectControl( props: LegacyCustomSelectProps ) { const { __experimentalShowSelectedHint, __next40pxDefaultSize = false, @@ -128,4 +128,4 @@ function CustomSelect( props: LegacyCustomSelectProps ) { ); } -export default CustomSelect; +export default CustomSelectControl; 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 c14eca2b7c54d..825a9b63464ca 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 @@ -12,7 +12,7 @@ import { useState } from '@wordpress/element'; /** * Internal dependencies */ -import UncontrolledCustomSelect from '..'; +import UncontrolledCustomSelectControl from '..'; const customClass = 'amber-skies'; @@ -48,14 +48,14 @@ const legacyProps = { ], }; -const LegacyControlledCustomSelect = ( { +const ControlledCustomSelectControl = ( { options, onChange, ...restProps -}: React.ComponentProps< typeof UncontrolledCustomSelect > ) => { +}: React.ComponentProps< typeof UncontrolledCustomSelectControl > ) => { const [ value, setValue ] = useState( options[ 0 ] ); return ( - { @@ -70,8 +70,8 @@ const LegacyControlledCustomSelect = ( { }; describe.each( [ - [ 'Uncontrolled', UncontrolledCustomSelect ], - [ 'Controlled', LegacyControlledCustomSelect ], + [ 'Uncontrolled', UncontrolledCustomSelectControl ], + [ 'Controlled', ControlledCustomSelectControl ], ] )( 'CustomSelectControl (%s)', ( ...modeAndComponent ) => { const [ , Component ] = modeAndComponent; diff --git a/packages/components/src/custom-select-control-v2/stories/default.story.tsx b/packages/components/src/custom-select-control-v2/stories/default.story.tsx index ee7dba0694c27..ac2f9a51d5951 100644 --- a/packages/components/src/custom-select-control-v2/stories/default.story.tsx +++ b/packages/components/src/custom-select-control-v2/stories/default.story.tsx @@ -11,15 +11,14 @@ import { useState } from '@wordpress/element'; /** * Internal dependencies */ -import CustomSelect from '../default-component'; -import { CustomSelectItem } from '..'; +import CustomSelectControlV2 from '..'; -const meta: Meta< typeof CustomSelect > = { +const meta: Meta< typeof CustomSelectControlV2 > = { title: 'Components (Experimental)/CustomSelectControl v2/Default', - component: CustomSelect, + component: CustomSelectControlV2, subcomponents: { // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 - CustomSelectItem, + 'CustomSelectControlV2.Item': CustomSelectControlV2.Item, }, argTypes: { children: { control: { type: null } }, @@ -48,10 +47,10 @@ const meta: Meta< typeof CustomSelect > = { }; export default meta; -const Template: StoryFn< typeof CustomSelect > = ( props ) => { +const Template: StoryFn< typeof CustomSelectControlV2 > = ( props ) => { const [ value, setValue ] = useState< string | string[] >(); return ( - { setValue( nextValue ); @@ -68,15 +67,15 @@ Default.args = { defaultValue: 'Select a color...', children: ( <> - + Blue - - + + Purple - - + + Pink - + ), }; @@ -100,9 +99,9 @@ MultipleSelection.args = { 'maroon', 'tangerine', ].map( ( item ) => ( - + { item } - + ) ) } ), @@ -134,9 +133,9 @@ CustomSelectedValue.args = { <> { [ 'mystery-person', 'identicon', 'wavatar', 'retro' ].map( ( option ) => ( - + { renderItem( option ) } - + ) ) } diff --git a/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx b/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx index 0deecc0bed5a5..120686ea84af6 100644 --- a/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx +++ b/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx @@ -11,12 +11,12 @@ import { useState } from '@wordpress/element'; /** * Internal dependencies */ -import CustomSelect from '../legacy-component'; +import CustomSelectControl from '../legacy-component'; import * as V1Story from '../../custom-select-control/stories/index.story'; -const meta: Meta< typeof CustomSelect > = { +const meta: Meta< typeof CustomSelectControl > = { title: 'Components (Experimental)/CustomSelectControl v2/Legacy', - component: CustomSelect, + component: CustomSelectControl, argTypes: { onChange: { control: { type: null } }, value: { control: { type: null } }, @@ -43,17 +43,23 @@ const meta: Meta< typeof CustomSelect > = { }; export default meta; -const Template: StoryFn< typeof CustomSelect > = ( props ) => { +const Template: StoryFn< typeof CustomSelectControl > = ( props ) => { const [ value, setValue ] = useState( props.options[ 0 ] ); const onChange: React.ComponentProps< - typeof CustomSelect + typeof CustomSelectControl >[ 'onChange' ] = ( changeObject ) => { setValue( changeObject.selectedItem ); props.onChange?.( changeObject ); }; - return ; + return ( + + ); }; export const Default = Template.bind( {} ); diff --git a/packages/components/src/custom-select-control-v2/test/index.tsx b/packages/components/src/custom-select-control-v2/test/index.tsx index 52097e4f8bc5b..13421479c0dd5 100644 --- a/packages/components/src/custom-select-control-v2/test/index.tsx +++ b/packages/components/src/custom-select-control-v2/test/index.tsx @@ -12,7 +12,7 @@ import { useState } from '@wordpress/element'; /** * Internal dependencies */ -import { CustomSelect as UncontrolledCustomSelect, CustomSelectItem } from '..'; +import UncontrolledCustomSelectControlV2 from '..'; import type { CustomSelectProps } from '../types'; const items = [ @@ -41,14 +41,14 @@ const items = [ const defaultProps = { label: 'label!', children: items.map( ( { value, key } ) => ( - + ) ), }; -const ControlledCustomSelect = ( props: CustomSelectProps ) => { +const ControlledCustomSelectControl = ( props: CustomSelectProps ) => { const [ value, setValue ] = useState< string | string[] >(); return ( - { setValue( nextValue ); @@ -60,8 +60,8 @@ const ControlledCustomSelect = ( props: CustomSelectProps ) => { }; describe.each( [ - [ 'Uncontrolled', UncontrolledCustomSelect ], - [ 'Controlled', ControlledCustomSelect ], + [ 'Uncontrolled', UncontrolledCustomSelectControlV2 ], + [ 'Controlled', ControlledCustomSelectControl ], ] )( 'CustomSelectControlV2 (%s)', ( ...modeAndComponent ) => { const [ , Component ] = modeAndComponent; @@ -257,9 +257,12 @@ describe.each( [ 'rose blush', 'ultraviolet morning light', ].map( ( item ) => ( - + { item } - + ) ) } ); @@ -326,9 +329,12 @@ describe.each( [ render( { defaultValues.map( ( item ) => ( - + { item } - + ) ) } ); @@ -378,12 +384,12 @@ describe.each( [ render( - + { renderValue( 'april-29' ) } - - + + { renderValue( 'july-9' ) } - + );