Skip to content

Commit e7897bd

Browse files
fcollonvalfcollonval
committed
Use ariaInvalid in story for clarification
1 parent 4bc9a04 commit e7897bd

File tree

12 files changed

+48
-45
lines changed

12 files changed

+48
-45
lines changed

‎packages/components/src/checkbox/checkbox.stories.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default {
1111
checked: { control: 'boolean' },
1212
disabled: { control: 'boolean' },
1313
indeterminate: { control: 'boolean' },
14-
invalid: { control: 'boolean' },
14+
ariaInvalid: { control: 'boolean' },
1515
onChange: {
1616
action: 'changed',
1717
table: {
@@ -35,7 +35,7 @@ const Template: StoryFn = (args): HTMLElement => {
3535
`<jp-checkbox
3636
${args.checked ? 'checked' : ''}
3737
${args.disabled ? 'disabled' : ''}
38-
${args.invalid ? `aria-invalid="${args.invalid}"` : ''}
38+
${args.ariaInvalid ? `aria-invalid="${args.ariaInvalid}"` : ''}
3939
>
4040
${args.label}
4141
</jp-checkbox>`
@@ -63,7 +63,7 @@ Default.args = {
6363
checked: false,
6464
disabled: false,
6565
indeterminate: false,
66-
invalid: false,
66+
ariaInvalid: false,
6767
onChange: action('change'),
6868
onInvalid: action('invalid')
6969
};
@@ -89,5 +89,5 @@ WithIndeterminate.args = {
8989
export const WithError: StoryObj = { render: Template.bind({}) };
9090
WithError.args = {
9191
...Default.args,
92-
invalid: true
92+
ariaInvalid: true
9393
};

‎packages/components/src/combobox/combobox.stories.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export default {
1919
control: 'select',
2020
options: ['none', 'inline', 'list', 'both']
2121
},
22+
ariaInvalid: { control: 'boolean' },
2223
onChange: {
2324
action: 'changed',
2425
table: {
@@ -60,7 +61,7 @@ const Template: StoryFn = (args): HTMLElement => {
6061
${args.minimal ? 'minimal' : ''}
6162
${args.autowidth ? 'autowidth' : ''}
6263
${args.autocomplete !== 'none' ? `autocomplete=${args.autocomplete}` : ''}
63-
${args.invalid ? `aria-invalid="${args.invalid}"` : ''}
64+
${args.ariaInvalid ? `aria-invalid="${args.ariaInvalid}"` : ''}
6465
>
6566
${args.customIndicator ? getFaIcon('sliders-h', 'indicator') : ''}
6667
${new Array(args.numberOfChildren ?? 10)
@@ -100,7 +101,7 @@ Default.args = {
100101
minimal: false,
101102
autowidth: false,
102103
autocomplete: 'none',
103-
invalid: false,
104+
ariaInvalid: false,
104105
onChange: action('change'),
105106
onInvalid: action('invalid'),
106107
};
@@ -132,5 +133,5 @@ WithCustomIndicator.args = {
132133
export const WithError: StoryObj = { render: Template.bind({}) };
133134
WithError.args = {
134135
...Default.args,
135-
invalid: true
136+
ariaInvalid: true
136137
};

‎packages/components/src/date-field/date-field.stories.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export default {
1616
autofocus: { control: 'boolean' },
1717
startIcon: { control: 'boolean' },
1818
endIcon: { control: 'boolean' },
19+
ariaInvalid: { control: 'boolean' },
1920
onChange: {
2021
action: 'changed',
2122
table: {
@@ -40,7 +41,7 @@ const Template: StoryFn = (args, context): HTMLElement => {
4041
${args.readonly ? 'readonly=""' : ''}
4142
${args.disabled ? 'disabled=""' : ''}
4243
${args.autofocus ? 'autofocus' : ''}
43-
${args.invalid ? `aria-invalid="${args.invalid}"` : ''}
44+
${args.ariaInvalid ? `aria-invalid="${args.ariaInvalid}"` : ''}
4445
>
4546
${args.startIcon ? getFaIcon('search', 'start') : ''}
4647
${args.label}
@@ -73,7 +74,7 @@ Default.args = {
7374
autofocus: false,
7475
startIcon: false,
7576
endIcon: false,
76-
invalid: false,
77+
ariaInvalid: false,
7778
onChange: action('change'),
7879
onInvalid: action('invalid')
7980
};
@@ -111,5 +112,5 @@ WithEndIcon.args = {
111112
export const WithError: StoryObj = { render: Template.bind({}) };
112113
WithError.args = {
113114
...Default.args,
114-
invalid: true
115+
ariaInvalid: true
115116
};

‎packages/components/src/number-field/number-field.stories.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export default {
2020
startIcon: { control: 'boolean' },
2121
endIcon: { control: 'boolean' },
2222
appearance: { control: 'radio', options: ['outline', 'filled'] },
23+
ariaInvalid: { control: 'boolean' },
2324
onChange: {
2425
action: 'changed',
2526
table: {
@@ -48,7 +49,7 @@ const Template: StoryFn = (args, context): HTMLElement => {
4849
${args.disabled ? 'disabled' : ''}
4950
${args.autofocus ? 'autofocus' : ''}
5051
appearance="${args.appearance}"
51-
${args.invalid ? `aria-invalid="${args.invalid}"` : ''}
52+
${args.ariaInvalid ? `aria-invalid="${args.ariaInvalid}"` : ''}
5253
>
5354
${args.startIcon ? getFaIcon('search', 'start') : ''}
5455
${args.label}
@@ -85,7 +86,7 @@ Default.args = {
8586
startIcon: false,
8687
endIcon: false,
8788
appearance: 'outline',
88-
invalid: false,
89+
ariaInvalid: false,
8990
onChange: action('change'),
9091
onInvalid: action('invalid')
9192
};
@@ -143,5 +144,5 @@ WithEndIcon.args = {
143144
export const WithError: StoryObj = { render: Template.bind({}) };
144145
WithError.args = {
145146
...Default.args,
146-
invalid: true
147+
ariaInvalid: true
147148
};

‎packages/components/src/radio-group/radio-group.stories.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default {
1010
disabled: { control: 'boolean' },
1111
readonly: { control: 'boolean' },
1212
orientation: { control: 'radio', options: ['horizontal', 'vertical'] },
13-
invalid: { control: 'boolean' },
13+
ariaInvalid: { control: 'boolean' },
1414
onChange: {
1515
action: 'changed',
1616
table: {
@@ -35,7 +35,7 @@ const Template: StoryFn = (args, context): HTMLElement => {
3535
orientation=${args.orientation}
3636
${args.disabled ? 'disabled' : ''}
3737
${args.readonly ? 'readonly' : ''}
38-
${args.invalid ? `aria-invalid="${args.invalid}"` : ''}
38+
${args.ariaInvalid ? `aria-invalid="${args.ariaInvalid}"` : ''}
3939
>
4040
<label slot="label" style="color: var(--neutral-foreground-rest)">Fruit</label>
4141
<jp-radio value="apples">Apples</jp-radio>
@@ -67,7 +67,7 @@ Default.args = {
6767
disabled: false,
6868
readonly: false,
6969
orientation: 'horizontal',
70-
invalid: false,
70+
ariaInvalid: false,
7171
onChange: action('change'),
7272
onInvalid: action('invalid')
7373
};
@@ -93,5 +93,5 @@ WithReadOnly.args = {
9393
export const WithError: StoryObj = { render: Template.bind({}) };
9494
WithError.args = {
9595
...Default.args,
96-
invalid: true
96+
ariaInvalid: true
9797
};

‎packages/components/src/radio/radio.stories.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default {
1010
checked: { control: 'boolean' },
1111
disabled: { control: 'boolean' },
1212
readonly: { control: 'boolean' },
13-
invalid: { control: 'boolean' },
13+
ariaInvalid: { control: 'boolean' },
1414
onChange: {
1515
action: 'changed',
1616
table: {
@@ -35,7 +35,7 @@ const Template: StoryFn = (args, context): HTMLElement => {
3535
${args.checked ? 'checked' : ''}
3636
${args.disabled ? 'disabled' : ''}
3737
${args.readonly ? 'readonly' : ''}
38-
${args.invalid ? `aria-invalid="${args.invalid}"` : ''}
38+
${args.ariaInvalid ? `aria-invalid="${args.ariaInvalid}"` : ''}
3939
value="value"
4040
>
4141
Radio element
@@ -59,7 +59,7 @@ Default.args = {
5959
checked: false,
6060
disabled: false,
6161
readonly: false,
62-
invalid: false,
62+
ariaInvalid: false,
6363
onChange: action('change'),
6464
onInvalid: action('invalid')
6565
};
@@ -85,5 +85,5 @@ WithReadOnly.args = {
8585
export const WithError: StoryObj = { render: Template.bind({}) };
8686
WithError.args = {
8787
...Default.args,
88-
invalid: true
88+
ariaInvalid: true
8989
};

‎packages/components/src/search/search.stories.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default {
1919
autofocus: { control: 'boolean' },
2020
searchIcon: { control: 'boolean' },
2121
appearance: { control: 'radio', options: ['outline', 'filled'] },
22-
invalid: { control: 'boolean' },
22+
ariaInvalid: { control: 'boolean' },
2323
onChange: {
2424
action: 'changed',
2525
table: {
@@ -48,7 +48,7 @@ const Template: StoryFn = (args): HTMLElement => {
4848
${args.disabled ? 'disabled' : ''}
4949
${args.autofocus ? 'autofocus' : ''}
5050
appearance="${args.appearance}"
51-
${args.invalid ? `aria-invalid="${args.invalid}"` : ''}
51+
${args.ariaInvalid ? `aria-invalid="${args.ariaInvalid}"` : ''}
5252
>
5353
${args.label}
5454
${args.searchIcon ? getFaIcon('search', 'end') : ''}
@@ -83,7 +83,7 @@ Default.args = {
8383
autofocus: false,
8484
appearance: 'outline',
8585
searchIcon: false,
86-
invalid: false,
86+
ariaInvalid: false,
8787
onChange: action('change'),
8888
onInvalid: action('invalid')
8989
};
@@ -135,5 +135,5 @@ WithSearchIcon.args = {
135135
export const WithError: StoryObj = { render: Template.bind({}) };
136136
WithError.args = {
137137
...Default.args,
138-
invalid: true
138+
ariaInvalid: true
139139
};

‎packages/components/src/select/select.stories.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default {
1414
numberOfChildren: { control: 'number' },
1515
minimal: { control: 'boolean' },
1616
autowidth: { control: 'boolean' },
17-
invalid: { control: 'boolean' },
17+
ariaInvalid: { control: 'boolean' },
1818
onChange: {
1919
action: 'changed',
2020
table: {
@@ -41,7 +41,7 @@ const Template: StoryFn = (args, context): HTMLElement => {
4141
${args.disabled ? 'disabled' : ''}
4242
${args.minimal ? 'minimal' : ''}
4343
${args.autowidth ? 'autowidth' : ''}
44-
${args.invalid ? `aria-invalid="${args.invalid}"` : ''}
44+
${args.ariaInvalid ? `aria-invalid="${args.ariaInvalid}"` : ''}
4545
>
4646
${args.customIndicator ? getFaIcon('sliders-h', 'indicator') : ''}
4747
${new Array(args.numberOfChildren ?? 3)
@@ -81,7 +81,7 @@ Default.args = {
8181
numberOfChildren: 3,
8282
minimal: false,
8383
autowidth: false,
84-
invalid: false,
84+
ariaInvalid: false,
8585
onChange: action('change'),
8686
onInvalid: action('invalid')
8787
};
@@ -113,5 +113,5 @@ WithCustomIndicator.args = {
113113
export const WithError: StoryObj = { render: Template.bind({}) };
114114
WithError.args = {
115115
...Default.args,
116-
invalid: true
116+
ariaInvalid: true
117117
};

‎packages/components/src/slider/slider.stories.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default {
1111
orientation: { control: 'radio', options: ['horizontal', 'vertical'] },
1212
disabled: { control: 'boolean' },
1313
readonly: { control: 'boolean' },
14-
invalid: { control: 'boolean' },
14+
ariaInvalid: { control: 'boolean' },
1515
onChange: {
1616
action: 'changed',
1717
table: {
@@ -37,7 +37,7 @@ const Template: StoryFn = (args, context): HTMLElement => {
3737
${args.orientation ? `orientation="${args.orientation}"` : ''}
3838
${args.disabled ? 'disabled' : ''}
3939
${args.readonly ? 'readonly' : ''}
40-
${args.invalid ? `aria-invalid="${args.invalid}"` : ''}
40+
${args.ariaInvalid ? `aria-invalid="${args.ariaInvalid}"` : ''}
4141
>
4242
<jp-slider-label position="0">0%</jp-slider-label>
4343
<jp-slider-label position="10">10%</jp-slider-label>
@@ -64,7 +64,7 @@ Default.args = {
6464
disabled: false,
6565
readonly: false,
6666
value: 70,
67-
invalid: false,
67+
ariaInvalid: false,
6868
onChange: action('change'),
6969
onInvalid: action('invalid')
7070
};
@@ -84,5 +84,5 @@ WithDisabled.args = {
8484
export const WithError: StoryObj = { render: Template.bind({}) };
8585
WithError.args = {
8686
...Default.args,
87-
invalid: true
87+
ariaInvalid: true
8888
};

‎packages/components/src/switch/switch.stories.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default {
1313
checked: { control: 'boolean' },
1414
disabled: { control: 'boolean' },
1515
readonly: { control: 'boolean' },
16-
invalid: { control: 'boolean' },
16+
ariaInvalid: { control: 'boolean' },
1717
onChange: {
1818
action: 'changed',
1919
table: {
@@ -38,7 +38,7 @@ const Template: StoryFn = (args, context): HTMLElement => {
3838
${args.checked ? 'checked' : ''}
3939
${args.disabled ? 'disabled' : ''}
4040
${args.readonly ? 'readonly' : ''}
41-
${args.invalid ? `aria-invalid="${args.invalid}"` : ''}
41+
${args.ariaInvalid ? `aria-invalid="${args.ariaInvalid}"` : ''}
4242
>
4343
${args.label}
4444
${
@@ -69,7 +69,7 @@ Default.args = {
6969
disabled: false,
7070
readonly: false,
7171
withMessages: false,
72-
invalid: false,
72+
ariaInvalid: false,
7373
onChange: action('change'),
7474
onInvalid: action('invalid')
7575
};
@@ -101,5 +101,5 @@ WithMessages.args = {
101101
export const WithError: StoryObj = { render: Template.bind({}) };
102102
WithError.args = {
103103
...Default.args,
104-
invalid: true
104+
ariaInvalid: true
105105
};

‎packages/components/src/text-area/text-area.stories.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default {
2020
control: 'select',
2121
options: ['none', 'both', 'vertical', 'horizontal']
2222
},
23-
invalid: { control: 'boolean' },
23+
ariaInvalid: { control: 'boolean' },
2424
onChange: {
2525
action: 'changed',
2626
table: {
@@ -49,7 +49,7 @@ const Template: StoryFn = (args): HTMLElement => {
4949
${args.autofocus ? 'autofocus' : ''}
5050
appearance="${args.appearance}"
5151
resize="${args.resize}"
52-
${args.invalid ? `aria-invalid="${args.invalid}"` : ''}
52+
${args.ariaInvalid ? `aria-invalid="${args.ariaInvalid}"` : ''}
5353
>
5454
${args.label}
5555
</jp-text-area>`
@@ -82,7 +82,7 @@ Default.args = {
8282
disabled: false,
8383
autofocus: false,
8484
appearance: 'outline',
85-
invalid: false,
85+
ariaInvalid: false,
8686
onChange: action('change'),
8787
onInvalid: action('invalid')
8888
};
@@ -121,5 +121,5 @@ WithReadonly.args = {
121121
export const WithError: StoryObj = { render: Template.bind({}) };
122122
WithError.args = {
123123
...Default.args,
124-
invalid: true
124+
ariaInvalid: true
125125
};

0 commit comments

Comments
 (0)