Skip to content

Commit 0730523

Browse files
mirkaciampo
authored and
widoz
committed
UI: Add change actions to form primitive stories (WordPress#83591)
* UI: Add change actions to form primitive stories * UI: Forward change actions in controlled primitive stories Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org>
1 parent 9b82b2e commit 0730523

8 files changed

Lines changed: 44 additions & 8 deletions

File tree

‎packages/ui/src/form/primitives/autocomplete/stories/index.story.tsx‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,9 @@ const meta: Meta< typeof Autocomplete.Root > = {
4242
'Autocomplete.Status': Autocomplete.Status,
4343
'Autocomplete.Clear': Autocomplete.Clear,
4444
},
45+
argTypes: {
46+
onValueChange: { action: 'onValueChange' },
47+
},
4548
parameters: {
4649
componentStatus: {
4750
status: 'recommended',
@@ -102,14 +105,15 @@ export const OpenOnlyOnMatch: Story = {
102105
onOpenChange={ ( nextOpen ) => {
103106
setOpen( nextOpen && filteredItems.length > 0 );
104107
} }
105-
onValueChange={ ( value ) => {
108+
onValueChange={ ( value, ...changeArgs ) => {
106109
const matches = URLS.filter( ( bookmark ) =>
107110
bookmark.value
108111
.toLowerCase()
109112
.includes( value.toLowerCase() )
110113
);
111114
setFilteredItems( matches );
112115
setOpen( value.length > 0 && matches.length > 0 );
116+
args.onValueChange?.( value, ...changeArgs );
113117
} }
114118
filteredItems={ filteredItems }
115119
>
@@ -168,7 +172,7 @@ export const AsyncItems: Story = {
168172
{ ...args }
169173
items={ results }
170174
value={ query }
171-
onValueChange={ ( newValue ) => {
175+
onValueChange={ ( newValue, ...changeArgs ) => {
172176
setQuery( newValue );
173177
setLoading( true );
174178
setResults( [] );
@@ -183,6 +187,7 @@ export const AsyncItems: Story = {
183187
);
184188
setLoading( false );
185189
}, 500 );
190+
args.onValueChange?.( newValue, ...changeArgs );
186191
} }
187192
>
188193
<Autocomplete.Input
@@ -250,7 +255,10 @@ export const Inline: Story = {
250255
<Autocomplete.Root
251256
{ ...args }
252257
value={ value }
253-
onValueChange={ setValue }
258+
onValueChange={ ( newValue, ...changeArgs ) => {
259+
setValue( newValue );
260+
args.onValueChange?.( newValue, ...changeArgs );
261+
} }
254262
>
255263
<Autocomplete.Input
256264
aria-label="Command"
@@ -332,7 +340,7 @@ export const WithSearchIconAndClearButton: Story = {
332340
* Experimental: Inline autocomplete triggered by `@`.
333341
*/
334342
export const InlineMentionAutocomplete: Story = {
335-
render: function Template() {
343+
render: function Template( args ) {
336344
const inputRef = useRef< HTMLInputElement >( null );
337345
const [ value, setValue ] = useState( '' );
338346
const [ open, setOpen ] = useState( false );
@@ -417,7 +425,10 @@ export const InlineMentionAutocomplete: Story = {
417425
<Autocomplete.Root
418426
items={ USERS }
419427
value={ value }
420-
onValueChange={ handleValueChange }
428+
onValueChange={ ( newValue, ...changeArgs ) => {
429+
handleValueChange( newValue, ...changeArgs );
430+
args.onValueChange?.( newValue, ...changeArgs );
431+
} }
421432
filteredItems={ filteredItems }
422433
open={ open }
423434
onOpenChange={ ( nextOpen ) => {

‎packages/ui/src/form/primitives/checkbox-group/stories/index.story.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ const meta: Meta< typeof CheckboxGroup > = {
1010
subcomponents: {
1111
'CheckboxGroup.NestedItems': CheckboxGroup.NestedItems,
1212
},
13+
argTypes: {
14+
onValueChange: { action: 'onValueChange' },
15+
},
1316
parameters: {
1417
componentStatus: {
1518
status: 'use-with-caution',
@@ -47,13 +50,16 @@ export const Default: Story = {
4750
* documentation for a full example.
4851
*/
4952
export const WithParentCheckbox: Story = {
50-
render: function Template() {
53+
render: function Template( args ) {
5154
const [ fruitValue, setFruitValue ] = useState( [ 'apple' ] );
5255

5356
return (
5457
<CheckboxGroup
5558
value={ fruitValue }
56-
onValueChange={ setFruitValue }
59+
onValueChange={ ( nextValue, ...changeArgs ) => {
60+
setFruitValue( nextValue );
61+
args.onValueChange?.( nextValue, ...changeArgs );
62+
} }
5763
allValues={ [ 'apple', 'orange', 'banana' ] }
5864
aria-label="Fruit"
5965
>

‎packages/ui/src/form/primitives/checkbox/stories/index.story.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ const meta: Meta< typeof Checkbox > = {
55
title: 'Components/@wordpress-ui/Form/Primitives/Checkbox',
66
id: 'design-system-components-form-primitives-checkbox',
77
component: Checkbox,
8+
argTypes: {
9+
onCheckedChange: { action: 'onCheckedChange' },
10+
},
811
parameters: {
912
componentStatus: {
1013
status: 'use-with-caution',

‎packages/ui/src/form/primitives/combobox/stories/index.story.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,9 @@ const meta: Meta< typeof Combobox.Root > = {
3636
'Combobox.Status': Combobox.Status,
3737
'Combobox.Clear': Combobox.Clear,
3838
},
39+
argTypes: {
40+
onValueChange: { action: 'onValueChange' },
41+
},
3942
parameters: {
4043
componentStatus: {
4144
status: 'use-with-caution',
@@ -279,10 +282,11 @@ export const AsyncItems: Story = {
279282
items={ items }
280283
value={ value }
281284
open={ open }
282-
onValueChange={ ( newValue ) => {
285+
onValueChange={ ( newValue, ...changeArgs ) => {
283286
setValue(
284287
( newValue ?? undefined ) as FixtureItem | undefined
285288
);
289+
args.onValueChange?.( newValue, ...changeArgs );
286290
} }
287291
onOpenChange={ ( nextOpen ) => {
288292
setOpen( nextOpen );

‎packages/ui/src/form/primitives/radio-group/stories/index.story.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ const meta: Meta< typeof RadioGroup > = {
66
title: 'Components/@wordpress-ui/Form/Primitives/RadioGroup',
77
id: 'design-system-components-form-primitives-radiogroup',
88
component: RadioGroup,
9+
argTypes: {
10+
onValueChange: { action: 'onValueChange' },
11+
},
912
parameters: {
1013
componentStatus: {
1114
status: 'use-with-caution',

‎packages/ui/src/form/primitives/select/stories/index.story.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ const meta: Meta< typeof Select.Root > = {
1717
'Select.ItemLabel': Select.ItemLabel,
1818
'Select.ItemDescription': Select.ItemDescription,
1919
},
20+
argTypes: {
21+
onValueChange: { action: 'onValueChange' },
22+
},
2023
parameters: {
2124
componentStatus: {
2225
status: 'recommended',

‎packages/ui/src/form/primitives/switch/stories/index.story.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ const meta: Meta< typeof Switch > = {
55
title: 'Components/@wordpress-ui/Form/Primitives/Switch',
66
id: 'design-system-components-form-primitives-switch',
77
component: Switch,
8+
argTypes: {
9+
onCheckedChange: { action: 'onCheckedChange' },
10+
},
811
parameters: {
912
componentStatus: {
1013
status: 'use-with-caution',

‎packages/ui/src/form/primitives/textarea/stories/index.story.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ const meta: Meta< typeof Textarea > = {
66
title: 'Components/@wordpress-ui/Form/Primitives/Textarea',
77
id: 'design-system-components-form-primitives-textarea',
88
component: Textarea,
9+
argTypes: {
10+
onValueChange: { action: 'onValueChange' },
11+
},
912
parameters: {
1013
componentStatus: {
1114
status: 'recommended',

0 commit comments

Comments
 (0)