diff --git a/packages/components/src/custom-select-control-v2/legacy-adapter.tsx b/packages/components/src/custom-select-control-v2/legacy-adapter.tsx index fbdfd59978e2a..55c36e77db17b 100644 --- a/packages/components/src/custom-select-control-v2/legacy-adapter.tsx +++ b/packages/components/src/custom-select-control-v2/legacy-adapter.tsx @@ -8,7 +8,7 @@ import type { CustomSelectProps, LegacyCustomSelectProps } from './types'; function isLegacy( props: any ): props is LegacyCustomSelectProps { return ( typeof props.options !== 'undefined' || - props.__experimentalShowSelectedHint !== undefined + typeof props.__experimentalShowSelectedHint !== 'undefined' ); } 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 fbac571556b27..8aeff5a4e93ad 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 @@ -1,4 +1,3 @@ -//@ts-nocheck /** * External dependencies */ @@ -49,16 +48,16 @@ const meta: Meta< typeof NewCustomSelect > = { }; export default meta; -const Template: StoryFn< typeof CustomSelect > = ( props ) => { +const Template: StoryFn< typeof NewCustomSelect > = ( props ) => { return ; }; -const ControlledTemplate: StoryFn< typeof CustomSelect > = ( props ) => { +const ControlledTemplate: StoryFn< typeof NewCustomSelect > = ( props ) => { const [ value, setValue ] = useState< string | string[] >(); return ( { + onChange={ ( nextValue: string | string[] ) => { setValue( nextValue ); props.onChange?.( nextValue ); } } 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 7aa56d39ec1ed..f297c1585b9e6 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 @@ -1,4 +1,3 @@ -//@ts-nocheck /** * External dependencies */ @@ -13,7 +12,7 @@ import { useState } from '@wordpress/element'; * Internal dependencies */ import LegacyCustomSelect from '../legacy-component'; -import { CustomSelect, CustomSelectItem } from '..'; +import { CustomSelect } from '..'; const meta: Meta< typeof LegacyCustomSelect > = { title: 'Components (Experimental)/CustomSelectControl v2/Legacy', @@ -43,8 +42,14 @@ const meta: Meta< typeof LegacyCustomSelect > = { }; export default meta; -export const Default: StoryFn = () => { - const options = [ +const Template: StoryFn< typeof LegacyCustomSelect > = ( props ) => { + return ; +}; + +export const Default = Template.bind( {} ); +Default.args = { + label: 'Font Size', + options: [ { key: 'small', name: 'Small', @@ -65,13 +70,24 @@ export const Default: StoryFn = () => { name: 'Huge', style: { fontSize: '300%' }, }, - ]; - - return ; + ], }; -export const Controlled: StoryFn = () => { - const options = [ +export const Controlled: StoryFn< typeof LegacyCustomSelect > = ( props ) => { + const [ fontSize, setFontSize ] = useState( props.options[ 0 ] ); + + const onChange: ( typeof props )[ 'onChange' ] = ( changeObject ) => { + setFontSize( changeObject.selectedItem ); + props.onChange?.( changeObject ); + }; + + return ( + + ); +}; +Controlled.args = { + label: 'Font Size', + options: [ { key: 'small', name: 'Small', @@ -92,18 +108,5 @@ export const Controlled: StoryFn = () => { name: 'Huge', style: { fontSize: '300%' }, }, - ]; - - const [ fontSize, setFontSize ] = useState( options[ 0 ] ); - - return ( - { - setFontSize( selectedItem ); - } } - value={ options.find( ( option ) => option.key === fontSize.key ) } - /> - ); + ], };