Skip to content

Commit 36c2502

Browse files
kuahuuKuai Hutimogasdageorgylobkotaheramr
authored
feat: Support secondaryText and labelTag for button-dropdown (#3844)
Co-authored-by: Kuai Hu <[email protected]> Co-authored-by: Timo <[email protected]> Co-authored-by: Timo <[email protected]> Co-authored-by: Georgii Lobko <[email protected]> Co-authored-by: Amr Ahmed Taher Mohamed <[email protected]> Co-authored-by: Trevor Burnham <[email protected]> Co-authored-by: Maximilian Schöll <[email protected]> Co-authored-by: Philipp Schneider <[email protected]> Co-authored-by: Gethin Webster <[email protected]> Co-authored-by: Cansu Aksu <[email protected]> Co-authored-by: Cansu Aksu <[email protected]>
1 parent b48eddd commit 36c2502

19 files changed

+249
-21
lines changed

‎pages/button-dropdown/checkboxes.page.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,35 @@ const getItems = (firstChecked: boolean, secondChecked: boolean, thirdChecked: b
4242
id: 'id5',
4343
text: 'Option without checkbox',
4444
},
45+
{
46+
id: 'id6',
47+
text: 'Disabled option with secondaryText',
48+
secondaryText: 'This is a secondary text',
49+
disabled: true,
50+
},
51+
{
52+
id: 'id7',
53+
text: 'Option with icon and secondaryText',
54+
iconName: 'gen-ai',
55+
secondaryText: 'This is a secondary text',
56+
},
57+
{
58+
id: 'id8',
59+
text: 'Option with checkbox, icon, and secondaryText',
60+
iconName: 'gen-ai',
61+
secondaryText: 'This is a secondary text',
62+
checked: thirdChecked,
63+
itemType: 'checkbox',
64+
},
65+
{
66+
id: 'id8',
67+
text: 'Option with checkbox, icon, labelTag, and secondaryText',
68+
iconName: 'gen-ai',
69+
secondaryText: 'This is a secondary text',
70+
checked: thirdChecked,
71+
itemType: 'checkbox',
72+
labelTag: 'Ctrl + L',
73+
},
4574
];
4675
return items;
4776
};

‎pages/button-dropdown/disabled-reason.page.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,13 @@ import { ButtonDropdown, ButtonDropdownProps } from '~components';
77
import ScreenshotArea from '../utils/screenshot-area';
88

99
const actionsItems: ButtonDropdownProps.Items = [
10-
{ id: 'connect', text: 'Connect', disabledReason: 'Instance must be running.', disabled: true },
11-
{ id: 'details', text: 'View details', disabledReason: 'A single instance needs to be selected.', disabled: true },
10+
{ id: 'connect', text: 'Connect', disabledReason: 'Instance must be running.', disabled: true, labelTag: 'Disabled' },
11+
{
12+
id: 'details',
13+
text: 'View details',
14+
disabledReason: 'A single instance needs to be selected.',
15+
disabled: true,
16+
},
1217
{
1318
id: 'manage-state',
1419
text: 'Manage instance state',
@@ -22,6 +27,7 @@ const actionsItems: ButtonDropdownProps.Items = [
2227
{
2328
id: 'auto-scaling',
2429
text: 'Attach to Auto Scaling Group',
30+
secondaryText: 'Manage the Instance to Auto Scaling Group',
2531
disabledReason: 'Instance must be running and not already be attached to an Auto Scaling Group.',
2632
disabled: true,
2733
},
@@ -38,6 +44,7 @@ const actionsItems: ButtonDropdownProps.Items = [
3844
text: 'Change shutdown behavior',
3945
disabledReason: "Instance can't be a spot instance.",
4046
disabled: true,
47+
labelTag: 'Ctrl + D',
4148
},
4249
],
4350
},

‎pages/button-dropdown/events.page.tsx‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,32 @@ const dropdownItems = [
1010
{
1111
text: 'enabled category',
1212
items: [
13-
{ id: 'c1long1', text: 'VeryLongOptionTextValueHereToTestTheCaseWithThisDropdown' },
14-
{ id: 'c1_disabled_item', text: 'disabled item', disabled: true },
13+
{
14+
id: 'c1long1',
15+
text: 'VeryLongOptionTextValueHereToTestTheCaseWithThisDropdown',
16+
secondaryText: 'Very long option',
17+
},
18+
{ id: 'c1_disabled_item', text: 'disabled item', disabled: true, secondaryText: 'Disabled option' },
1519
{ id: 'c1_enabled_item', text: 'option2' },
16-
{ id: 'c1long2', text: 'VeryLongOptionTextValueHereToTestTheCaseWithThisDropdown', disabled: true },
17-
{ id: 'c1i3', text: 'option3' },
18-
{ id: 'c1i4', text: 'option4' },
20+
{
21+
id: 'c1long2',
22+
text: 'VeryLongOptionTextValueHereToTestTheCaseWithThisDropdown',
23+
disabled: true,
24+
secondaryText: 'Very long option',
25+
},
26+
{ id: 'c1i3', text: 'option3', secondaryText: 'option 3' },
27+
{ id: 'c1i4', text: 'option4', secondaryText: 'option 4' },
1928
],
2029
},
2130
{
2231
text: 'disabled category',
2332
disabled: true,
2433
items: [
25-
{ id: 'dci1', text: 'VeryLongOptionTextValueHereToTestTheCaseWithThisDropdown' },
34+
{
35+
id: 'dci1',
36+
text: 'VeryLongOptionTextValueHereToTestTheCaseWithThisDropdown',
37+
secondaryText: 'Very long option',
38+
},
2639
{ id: 'item_in_disabled_category', text: 'option4' },
2740
{ id: 'dci5', text: 'option5' },
2841
],
@@ -35,11 +48,13 @@ const dropdownItems = [
3548
id: 'individual_disabled_item',
3649
text: 'VeryLongOptionTextValueHereToTestTheCaseWithThisDropdown',
3750
disabled: true,
51+
labelTag: 'Disabled',
3852
},
3953
{
4054
id: 'plain_href',
4155
text: 'option6',
4256
href: '#',
57+
labelTag: 'Link',
4358
},
4459
{
4560
id: 'plain_href_prevented',

‎pages/button-dropdown/expandable.page.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,13 @@ export const items: ButtonDropdownProps['items'] = [
2222
items: [...Array(50)].map((_, index) => ({
2323
id: 'category2Subitem' + index,
2424
text: 'Cat 2 Sub item ' + index,
25+
secondaryText: `Option ${index}`,
2526
})),
2627
},
2728
...[...Array(10)].map((_, index) => ({
2829
id: 'item' + index,
2930
text: 'Item ' + index,
31+
secondaryText: `Option ${index}`,
3032
})),
3133
{
3234
id: 'category3',
@@ -45,6 +47,7 @@ export const items: ButtonDropdownProps['items'] = [
4547
{
4648
id: 'item10',
4749
text: 'Item 10',
50+
secondaryText: 'This is the last option',
4851
},
4952
];
5053

‎pages/button-dropdown/icon-expandable.page.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export const items: ButtonDropdownProps['items'] = [
1919
items: [...Array(2)].map((_, index) => ({
2020
id: 'category1Subitem' + index,
2121
text: 'Sub item ' + index,
22+
secondaryText: `Option ${index}`,
2223
})),
2324
},
2425
{
@@ -35,6 +36,7 @@ export const items: ButtonDropdownProps['items'] = [
3536
id: 'item1',
3637
text: 'Item 1',
3738
iconName: 'settings',
39+
secondaryText: 'Option 1',
3840
},
3941
{
4042
id: 'category3',
@@ -50,6 +52,7 @@ export const items: ButtonDropdownProps['items'] = [
5052
items: [...Array(2)].map((_, index) => ({
5153
id: 'category3Subitem' + index,
5254
text: 'Sub item ' + index,
55+
labelTag: ' Number ' + index,
5356
})),
5457
},
5558
];

‎pages/button-dropdown/item-element.permutations.page.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,33 @@ const permutations = createPermutations<ItemProps>([
5050
onItemActivate: [() => {}],
5151
highlightItem: [() => {}],
5252
},
53+
54+
// With secondaryText
55+
{
56+
item: [
57+
{ id: '1', text: 'Option', secondaryText: 'This is the first option' },
58+
{ id: '2', text: 'Option 2', secondaryText: 'This is the second option' },
59+
],
60+
disabled: [false, true],
61+
highlighted: [false, true],
62+
hasCategoryHeader: [false],
63+
showDivider: [false],
64+
onItemActivate: [() => {}],
65+
highlightItem: [() => {}],
66+
},
67+
// With labelTag
68+
{
69+
item: [
70+
{ id: '1', text: 'Option', labelTag: 'This is a label tag' },
71+
{ id: '2', text: 'Option 2', secondaryText: 'This is the second option', labelTag: 'This is a label tag' },
72+
],
73+
disabled: [false, true],
74+
highlighted: [false, true],
75+
hasCategoryHeader: [false],
76+
showDivider: [false],
77+
onItemActivate: [() => {}],
78+
highlightItem: [() => {}],
79+
},
5380
// With icons
5481
{
5582
item: [

‎pages/button-dropdown/main-action.page.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export default function ButtonDropdownPage() {
2222
{
2323
text: 'Launch instance from template',
2424
id: 'launch-instance-from-template',
25+
secondaryText: 'Use the existing templates',
2526
},
2627
]}
2728
onItemClick={() => setClickedButton('Launch instance from template')}

‎pages/button-dropdown/permutations-main-action.page.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const launchInstanceItem = {
1717
const launchInstanceFromTemplateItem = {
1818
text: 'Launch instance from template',
1919
iconName: 'file',
20+
secondaryText: 'Use an existing template',
2021
} as const;
2122

2223
const viewInstancesItem = {

‎pages/button-dropdown/simple.page.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,22 @@ const items: ButtonDropdownProps['items'] = [
4040
text: 'Option 6',
4141
disabled: true,
4242
},
43+
{
44+
id: 'id7',
45+
text: 'Option 7',
46+
secondaryText: 'This is option 7',
47+
},
48+
{
49+
id: 'id8',
50+
text: 'Option 8',
51+
labelTag: 'Ctrl + 8',
52+
},
53+
{
54+
id: 'id9',
55+
text: 'Option 9',
56+
secondaryText: 'This is option 9',
57+
labelTag: 'Ctrl + 9',
58+
},
4359
];
4460

4561
const withNestedOptions: ButtonDropdownProps['items'] = [
@@ -49,10 +65,14 @@ const withNestedOptions: ButtonDropdownProps['items'] = [
4965
{
5066
id: '1',
5167
text: 'Destroy',
68+
secondaryText: 'This is the Destroy option',
69+
labelTag: 'Ctrl + D',
5270
},
5371
{
5472
id: '2',
5573
text: 'Restart',
74+
secondaryText: 'This is the Restart option',
75+
labelTag: 'Ctrl + R',
5676
},
5777
],
5878
},
@@ -77,10 +97,13 @@ const withExpandedGroups: ButtonDropdownProps['items'] = [
7797
{
7898
id: 'connect',
7999
text: 'Connect',
100+
secondaryText: 'This is the Connect option',
101+
labelTag: 'Ctrl + C',
80102
},
81103
{
82104
id: 'password',
83105
text: 'Get password',
106+
secondaryText: 'This is the Get password option',
84107
},
85108
{
86109
id: 'states',
@@ -103,15 +126,20 @@ const withExpandedGroups: ButtonDropdownProps['items'] = [
103126
{
104127
id: 'reboot',
105128
text: 'Reboot',
129+
secondaryText: 'This is the Reboot Option',
130+
labelTag: 'Ctrl + B',
106131
disabled: true,
107132
},
108133
{
109134
id: 'terminate',
110135
text: 'Terminate',
136+
secondaryText: 'This is the Terminate Option',
111137
},
112138
{
113139
id: 'external',
114140
text: 'Root Page',
141+
secondaryText: '',
142+
labelTag: 'Ctrl + P',
115143
external: true,
116144
href: '/#/light/',
117145
},

‎pages/button-dropdown/utils/button-dropdown-items.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,13 @@ const dropdownItems = [
1111
id: 'id7',
1212
text: 'option5',
1313
disabled: true,
14+
secondaryText: 'This is a disabled option',
15+
labelTag: 'Disabled',
1416
},
1517
{
1618
id: 'id8',
1719
text: 'VeryLongOptionTextValueHereToTestTheCaseWithThisDropdown',
20+
secondaryText: 'This is the option with a long description, This is the option with a long description',
1821
},
1922
{ id: 'id9', text: 'option6' },
2023
];

0 commit comments

Comments
 (0)