Skip to content

Commit ddf5426

Browse files
pat270pat270
committed
chore(@clayui/drop-down): LPD-71044 Change label key value to title
1 parent 91e9e00 commit ddf5426

File tree

1 file changed

+62
-60
lines changed

1 file changed

+62
-60
lines changed

‎packages/clay-drop-down/stories/DropDown.stories.tsx‎

Lines changed: 62 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -16,53 +16,55 @@ import ClayDropDown, {
1616

1717
const ITEMS = [
1818
{
19-
label: 'clickable',
20-
onClick: () => {
19+
onClick: (event) => {
20+
event.preventDefault();
21+
2122
alert('you clicked!');
2223
},
24+
title: 'clickable',
2325
},
2426
{
2527
type: 'divider' as const,
2628
},
2729
{
2830
items: [
2931
{
30-
label: 'one',
32+
title: 'one',
3133
type: 'radio' as const,
3234
value: 'one',
3335
},
3436
{
35-
label: 'two',
37+
title: 'two',
3638
type: 'radio' as const,
3739
value: 'two',
3840
},
3941
],
40-
label: 'radio',
4142
name: 'radio',
4243
onChange: (value: string) => alert(`New Radio checked ${value}`),
44+
title: 'radio',
4345
type: 'radiogroup' as const,
4446
},
4547
{
4648
items: [
4749
{
4850
checked: true,
49-
label: 'checkbox',
5051
onChange: () => alert('checkbox changed'),
52+
title: 'checkbox',
5153
type: 'checkbox' as const,
5254
},
5355
{
5456
checked: true,
55-
label: 'checkbox 1',
5657
onChange: () => alert('checkbox changed'),
58+
title: 'checkbox 1',
5759
type: 'checkbox' as const,
5860
},
5961
],
60-
label: 'checkbox',
62+
title: 'checkbox',
6163
type: 'group' as const,
6264
},
6365
{
6466
href: '#',
65-
label: 'linkable',
67+
title: 'linkable',
6668
},
6769
];
6870

@@ -95,18 +97,18 @@ export const Default = (args: any) => (
9597
>
9698
<ClayDropDown.ItemList>
9799
{[
98-
{href: '#one', label: 'one'},
99-
{href: '#two', label: 'two'},
100-
{disabled: true, href: '#three', label: 'three'},
101-
{href: '#four', label: 'four'},
102-
].map(({href, label, ...otherProps}, i) => (
100+
{href: '#one', title: 'one'},
101+
{href: '#two', title: 'two'},
102+
{disabled: true, href: '#three', title: 'three'},
103+
{href: '#four', title: 'four'},
104+
].map(({href, title, ...otherProps}, i) => (
103105
<ClayDropDown.Item
104106
href={href}
105107
key={i}
106108
onClick={() => {}}
107109
{...otherProps}
108110
>
109-
{label}
111+
{title}
110112
</ClayDropDown.Item>
111113
))}
112114
</ClayDropDown.ItemList>
@@ -212,24 +214,24 @@ export const Groups = () => (
212214
<ClayDropDown.ItemList>
213215
<ClayDropDown.Group header="Group #1">
214216
{[
215-
{href: '#one', label: 'one'},
216-
{href: '#two', label: 'two'},
217-
{href: '#three', label: 'three'},
217+
{href: '#one', title: 'one'},
218+
{href: '#two', title: 'two'},
219+
{href: '#three', title: 'three'},
218220
].map((item, i) => (
219221
<ClayDropDown.Item href={item.href} key={i}>
220-
{item.label}
222+
{item.title}
221223
</ClayDropDown.Item>
222224
))}
223225
</ClayDropDown.Group>
224226

225227
<ClayDropDown.Group header="Group #2">
226228
{[
227-
{href: '#one', label: 'one'},
228-
{href: '#two', label: 'two'},
229-
{href: '#three', label: 'three'},
229+
{href: '#one', title: 'one'},
230+
{href: '#two', title: 'two'},
231+
{href: '#three', title: 'three'},
230232
].map((item, i) => (
231233
<ClayDropDown.Item href={item.href} key={i}>
232-
{item.label}
234+
{item.title}
233235
</ClayDropDown.Item>
234236
))}
235237
</ClayDropDown.Group>
@@ -247,8 +249,8 @@ export const Checkbox = () => (
247249
<ClayDropDown.Section>
248250
<ClayCheckbox
249251
checked
250-
label="I'm a checkbox!"
251252
onChange={() => {}}
253+
title="I'm a checkbox!"
252254
/>
253255
</ClayDropDown.Section>
254256
</ClayDropDown.ItemList>
@@ -271,15 +273,15 @@ export const Search = () => {
271273

272274
<ClayDropDown.ItemList>
273275
{[
274-
{href: '#one', label: 'one'},
275-
{href: '#two', label: 'two'},
276-
{disabled: true, href: '#three', label: 'three'},
277-
{href: '#four', label: 'four'},
276+
{href: '#one', title: 'one'},
277+
{href: '#two', title: 'two'},
278+
{disabled: true, href: '#three', title: 'three'},
279+
{href: '#four', title: 'four'},
278280
]
279-
.filter(({label}) => label.match(query))
280-
.map(({href, label, ...otherProps}, i) => (
281+
.filter(({title}) => title.match(query))
282+
.map(({href, title, ...otherProps}, i) => (
281283
<ClayDropDown.Item href={href} key={i} {...otherProps}>
282-
{label}
284+
{title}
283285
</ClayDropDown.Item>
284286
))}
285287
</ClayDropDown.ItemList>
@@ -296,10 +298,10 @@ export const Radio = () => (
296298
<ClayDropDown.ItemList>
297299
<ClayDropDown.Group header="Order">
298300
<ClayDropDown.Section>
299-
<ClayRadio checked label="Ascending" value="asc" />
301+
<ClayRadio checked title="Ascending" value="asc" />
300302
</ClayDropDown.Section>
301303
<ClayDropDown.Section>
302-
<ClayRadio label="Descending" value="desc" />
304+
<ClayRadio title="Descending" value="desc" />
303305
</ClayDropDown.Section>
304306
</ClayDropDown.Group>
305307
</ClayDropDown.ItemList>
@@ -316,12 +318,12 @@ export const CaptionAndHelp = () => (
316318

317319
<ClayDropDown.ItemList>
318320
{[
319-
{href: '#one', label: 'one'},
320-
{href: '#two', label: 'two'},
321-
{href: '#three', label: 'three'},
321+
{href: '#one', title: 'one'},
322+
{href: '#two', title: 'two'},
323+
{href: '#three', title: 'three'},
322324
].map((item, i) => (
323325
<ClayDropDown.Item href={item.href} key={i}>
324-
{item.label}
326+
{item.title}
325327
</ClayDropDown.Item>
326328
))}
327329
</ClayDropDown.ItemList>
@@ -340,17 +342,17 @@ export const ItemsWithIcons = () => (
340342
>
341343
<ClayDropDown.ItemList>
342344
{[
343-
{label: 'Left', left: 'trash'},
344-
{label: 'Right', right: 'check'},
345-
{label: 'Both', left: 'trash', right: 'check'},
345+
{left: 'trash', title: 'Left'},
346+
{right: 'check', title: 'Right'},
347+
{left: 'trash', right: 'check', title: 'Both'},
346348
].map((item, i) => (
347349
<ClayDropDown.Item
348350
key={i}
349351
onClick={() => {}}
350352
symbolLeft={item.left}
351353
symbolRight={item.right}
352354
>
353-
{item.label}
355+
{item.title}
354356
</ClayDropDown.Item>
355357
))}
356358
</ClayDropDown.ItemList>
@@ -366,13 +368,13 @@ export const CustomOffset = () => (
366368
>
367369
<ClayDropDown.ItemList>
368370
{[
369-
{href: '#one', label: 'one'},
370-
{href: '#two', label: 'two'},
371-
{disabled: true, href: '#three', label: 'three'},
372-
{href: '#four', label: 'four'},
373-
].map(({href, label, ...otherProps}, i) => (
371+
{href: '#one', title: 'one'},
372+
{href: '#two', title: 'two'},
373+
{disabled: true, href: '#three', title: 'three'},
374+
{href: '#four', title: 'four'},
375+
].map(({href, title, ...otherProps}, i) => (
374376
<ClayDropDown.Item href={href} key={i} {...otherProps}>
375-
{label}
377+
{title}
376378
</ClayDropDown.Item>
377379
))}
378380
</ClayDropDown.ItemList>
@@ -388,10 +390,10 @@ export const AlignmentPositions = () => (
388390
Align[alignPosition as keyof typeof Align]
389391
}
390392
items={[
391-
{href: '#one', label: 'one'},
392-
{href: '#two', label: 'two'},
393-
{disabled: true, href: '#three', label: 'three'},
394-
{href: '#four', label: 'four'},
393+
{href: '#one', title: 'one'},
394+
{href: '#two', title: 'two'},
395+
{disabled: true, href: '#three', title: 'three'},
396+
{href: '#four', title: 'four'},
395397
]}
396398
key={alignPosition}
397399
trigger={<ClayButton>{alignPosition}</ClayButton>}
@@ -619,25 +621,25 @@ export const InModal = () => {
619621
export const CascadingMenu = () => (
620622
<ClayDropDownWithItems
621623
items={[
622-
{label: 'Folder'},
624+
{title: 'Folder'},
623625
{type: 'divider'},
624626
{
625627
items: [
626628
{
627-
label: 'Basic Document',
628629
symbolLeft: 'document',
629630
symbolRight: 'check',
631+
title: 'Basic Document',
630632
},
631-
{label: 'Contract'},
632-
{label: 'Marketing Banner'},
633-
{label: 'Spreadsheet'},
634-
{label: 'Presentation'},
633+
{title: 'Contract'},
634+
{title: 'Marketing Banner'},
635+
{title: 'Spreadsheet'},
636+
{title: 'Presentation'},
635637
],
636-
label: 'Document',
638+
title: 'Document',
637639
type: 'contextual',
638640
},
639-
{label: 'Shortcut'},
640-
{label: 'Repository'},
641+
{title: 'Shortcut'},
642+
{title: 'Repository'},
641643
]}
642644
trigger={<ClayButton>Cascading Menu</ClayButton>}
643645
triggerIcon="caret-bottom"

0 commit comments

Comments
 (0)