Skip to content

Commit 2022f55

Browse files
mattnoltingmattnolting
committed
feat(CC-menu): added menu
1 parent f20f8f8 commit 2022f55

File tree

3 files changed

+149
-244
lines changed

3 files changed

+149
-244
lines changed

‎packages/code-connect/components/Menu/Menu.figma.tsx

Lines changed: 81 additions & 202 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,37 @@
11
import figma from '@figma/code-connect';
22
import {
33
Divider,
4-
DrilldownMenu,
54
Menu,
65
MenuContent,
76
MenuGroup,
8-
MenuItem,
97
MenuItemAction,
10-
MenuList
8+
MenuList,
9+
MenuSearch,
10+
MenuSearchInput,
11+
SearchInput
1112
} from '@patternfly/react-core';
1213
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
1314

1415
// Documentation for Menu can be found at https://www.patternfly.org/components/menu
1516

16-
const drilldownMenuModel = {
17-
id: 'drilldown-drilldownMenuStart',
18-
children: (
19-
<DrilldownMenu id="drilldown-drilldownMenuStart">
20-
<MenuItem itemId="group:start_rollout_breadcrumb" direction="up">
21-
Start rollout
22-
</MenuItem>
23-
<Divider component="li" />
24-
<MenuItem
25-
itemId="group:app_grouping"
26-
description="Groups A-C"
27-
direction="down"
28-
drilldownMenu={
29-
<DrilldownMenu id="drilldown-drilldownMenuStartGrouping">
30-
<MenuItem itemId="group:app_grouping_breadcrumb" direction="up">
31-
Application grouping
32-
</MenuItem>
33-
<Divider component="li" />
34-
<MenuItem itemId="group_a">Group A</MenuItem>
35-
<MenuItem itemId="group_b">Group B</MenuItem>
36-
<MenuItem itemId="group_c">Group C</MenuItem>
37-
</DrilldownMenu>
38-
}
39-
>
40-
Application grouping
41-
</MenuItem>
42-
<MenuItem itemId="count">Count</MenuItem>
43-
<MenuItem
44-
itemId="group:labels"
45-
direction="down"
46-
drilldownMenu={
47-
<DrilldownMenu id="drilldown-drilldownMenuStartLabels">
48-
<MenuItem itemId="group:labels_breadcrumb" direction="up">
49-
Labels
50-
</MenuItem>
51-
<Divider component="li" />
52-
<MenuItem itemId="label_1">Label 1</MenuItem>
53-
<MenuItem itemId="label_2">Label 2</MenuItem>
54-
<MenuItem itemId="label_3">Label 3</MenuItem>
55-
</DrilldownMenu>
56-
}
57-
>
58-
Labels
59-
</MenuItem>
60-
<MenuItem itemId="annotations">Annotations</MenuItem>
61-
</DrilldownMenu>
62-
)
17+
const setMenuProps = {
18+
containsDrilldown: true,
19+
drilldownItemPath: [],
20+
drilledInMenus: [],
21+
activeMenu: 'activeMenu',
22+
onDrillIn: () => {},
23+
onDrillOut: () => {},
24+
onGetMenuHeight: () => {},
25+
onSelect: () => {}
26+
};
27+
const resetMenuProps = {
28+
containsDrilldown: false,
29+
drilldownItemPath: undefined,
30+
drilledInMenus: undefined,
31+
activeMenu: undefined,
32+
onDrillIn: undefined,
33+
onDrillOut: undefined,
34+
onGetMenuHeight: undefined
6335
};
6436

6537
figma.connect(
@@ -90,12 +62,40 @@ figma.connect(
9062
Menu,
9163
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2590-18585',
9264
{
65+
variant: { Menu: 'Titled Groups' },
9366
props: {
94-
...drilldownMenuModel,
67+
children: figma.children('*')
68+
},
69+
example: (props) => (
70+
<Menu>
71+
<MenuContent>
72+
<MenuGroup label="Menu group label" labelHeadingLevel="h3">
73+
<MenuList>{props.children}</MenuList>
74+
</MenuGroup>
75+
<Divider />
76+
<MenuGroup label="Menu group label" labelHeadingLevel="h3">
77+
<MenuList>{props.children}</MenuList>
78+
</MenuGroup>
79+
</MenuContent>
80+
</Menu>
81+
)
82+
}
83+
);
9584

85+
figma.connect(
86+
Menu,
87+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2590-18585',
88+
{
89+
props: {
9690
// boolean
9791
showSearchInput: figma.boolean('Show search input', {
98-
true: true,
92+
true: (
93+
<MenuSearch>
94+
<MenuSearchInput>
95+
<SearchInput value="Search" aria-label="Filter menu items" onChange={() => {}} />
96+
</MenuSearchInput>
97+
</MenuSearch>
98+
),
9999
false: undefined
100100
}),
101101

@@ -108,167 +108,45 @@ figma.connect(
108108
)
109109
}),
110110

111-
onSelect: figma.enum('Menu', { 'Option Select': () => {} }),
111+
onSelect: figma.enum('Menu', {
112+
Basic: undefined,
113+
'Drill Down Return': undefined,
114+
'Drill Down Start': undefined,
115+
'Drill Down Breadcrumbs': undefined,
116+
'Option Select': () => {},
117+
'With favorites': undefined,
118+
'With Separator': undefined,
119+
'With Actions': undefined,
120+
'Plain Menu': undefined,
121+
'With Links': undefined,
122+
'Item Checkbox': undefined,
123+
Danger: undefined
124+
}),
112125

113126
// enum
114127
drilldown: figma.enum('Menu', {
115-
Basic: {
116-
containsDrilldown: false,
117-
drilldownItemPath: undefined,
118-
drilledInMenus: undefined,
119-
activeMenu: undefined,
120-
onDrillIn: undefined,
121-
onDrillOut: undefined,
122-
drilldownMenu: undefined,
123-
onGetMenuHeight: undefined
124-
},
125-
'Plain Menu': {
126-
containsDrilldown: false,
127-
drilldownItemPath: undefined,
128-
drilledInMenus: undefined,
129-
activeMenu: undefined,
130-
onDrillIn: undefined,
131-
onDrillOut: undefined,
132-
drilldownMenu: undefined,
133-
onGetMenuHeight: undefined
134-
},
135-
'With Actions': {
136-
containsDrilldown: false,
137-
drilldownItemPath: undefined,
138-
drilledInMenus: undefined,
139-
activeMenu: undefined,
140-
onDrillIn: undefined,
141-
onDrillOut: undefined,
142-
drilldownMenu: undefined,
143-
onGetMenuHeight: undefined
144-
},
145-
'With Separator': {
146-
containsDrilldown: false,
147-
drilldownItemPath: undefined,
148-
drilledInMenus: undefined,
149-
activeMenu: undefined,
150-
onDrillIn: undefined,
151-
onDrillOut: undefined,
152-
onGetMenuHeight: undefined
153-
},
154-
'With Links': {
155-
containsDrilldown: false,
156-
drilldownItemPath: undefined,
157-
drilledInMenus: undefined,
158-
activeMenu: undefined,
159-
onDrillIn: undefined,
160-
onDrillOut: undefined,
161-
drilldownMenu: undefined,
162-
onGetMenuHeight: undefined,
163-
onSelect: undefined
164-
},
165-
'Option Select': {
166-
containsDrilldown: false,
167-
drilldownItemPath: undefined,
168-
drilledInMenus: undefined,
169-
activeMenu: undefined,
170-
onDrillIn: undefined,
171-
onDrillOut: undefined,
172-
drilldownMenu: undefined,
173-
onGetMenuHeight: undefined,
174-
onSelect: undefined
175-
},
176-
'Item Checkbox': {
177-
containsDrilldown: false,
178-
drilldownItemPath: undefined,
179-
drilledInMenus: undefined,
180-
activeMenu: undefined,
181-
onDrillIn: undefined,
182-
onDrillOut: undefined,
183-
drilldownMenu: undefined,
184-
onGetMenuHeight: undefined,
185-
onSelect: undefined
186-
},
187-
'With favorites': {
188-
containsDrilldown: false,
189-
drilldownItemPath: undefined,
190-
drilledInMenus: undefined,
191-
activeMenu: undefined,
192-
onDrillIn: undefined,
193-
onDrillOut: undefined,
194-
drilldownMenu: undefined,
195-
onGetMenuHeight: undefined,
196-
onSelect: undefined
197-
},
198-
Danger: {
199-
containsDrilldown: false,
200-
drilldownItemPath: undefined,
201-
drilledInMenus: undefined,
202-
activeMenu: undefined,
203-
onDrillIn: undefined,
204-
onDrillOut: undefined,
205-
drilldownMenu: undefined,
206-
onGetMenuHeight: undefined,
207-
onSelect: undefined
208-
},
209-
'Drill Down Breadcrumbs': {
210-
containsDrilldown: true,
211-
drilldownItemPath: 'drilldownPath',
212-
drilledInMenus: 'menuDrilledIn',
213-
activeMenu: 'activeMenu',
214-
onDrillIn: () => {},
215-
onDrillOut: () => {},
216-
drilldownMenu: drilldownMenuModel,
217-
onGetMenuHeight: () => {},
218-
onSelect: () => {}
219-
},
220-
'Drill Down Start': {
221-
containsDrilldown: true,
222-
drilldownItemPath: 'drilldownPath',
223-
drilledInMenus: 'menuDrilledIn',
224-
activeMenu: 'activeMenu',
225-
onDrillIn: () => {},
226-
onDrillOut: () => {},
227-
drilldownMenu: drilldownMenuModel,
228-
onGetMenuHeight: () => {},
229-
onSelect: () => {}
230-
},
231-
'Drill Down Return': {
232-
containsDrilldown: true,
233-
drilldownItemPath: 'drilldownPath',
234-
drilledInMenus: 'menuDrilledIn',
235-
activeMenu: 'activeMenu',
236-
onDrillIn: () => {},
237-
onDrillOut: () => {},
238-
drilldownMenu: drilldownMenuModel,
239-
onGetMenuHeight: () => {},
240-
onSelect: () => {}
241-
}
128+
Basic: resetMenuProps,
129+
'Plain Menu': resetMenuProps,
130+
'With Actions': resetMenuProps,
131+
'With Separator': resetMenuProps,
132+
'With Links': resetMenuProps,
133+
'Option Select': resetMenuProps,
134+
'Item Checkbox': resetMenuProps,
135+
'With favorites': resetMenuProps,
136+
Danger: resetMenuProps,
137+
'Drill Down Breadcrumbs': setMenuProps,
138+
'Drill Down Start': setMenuProps,
139+
'Drill Down Return': setMenuProps
242140
}),
243141

244-
// menu: figma.enum('Menu', {
245-
// // Basic: 'basic',
246-
// // 'Plain Menu': 'plain-menu',
247-
// 'With Actions': 'with-actions',
248-
// 'With Separator': 'with-separator',
249-
// 'With Links': 'with-links',
250-
// 'With Icons': 'with-icons',
251-
// 'Titled Groups': 'titled-groups',
252-
// 'Drill Down Start': 'drill-down-start',
253-
// 'Drill Down Return': 'drill-down-return',
254-
// 'Option Select': 'option-select',
255-
// 'Item Checkbox': 'item-checkbox',
256-
// 'With favorites': 'with-favorites',
257-
// Danger: 'danger',
258-
// 'Drill Down Breadcrumbs': 'drill-down-breadcrumbs'
259-
// }),
260-
261-
children: figma.children('*')
142+
children: figma.children('Menu Item')
262143
},
263144

264145
example: (props) => (
265146
<Menu
266147
activeItemId="<activeItemId>"
267-
// activeMenu={props.drilldown.activeMenu}
268-
onSelect={props.onSelect}
269148
isPlain={props.isPlain}
270149
actions={props.actions}
271-
showSearchInput={props.showSearchInput}
272150
role="listbox"
273151
containsDrilldown={props.drilldown.containsDrilldown}
274152
drilldownItemPath={props.drilldown.drilldownItemPath}
@@ -277,7 +155,8 @@ figma.connect(
277155
onDrillOut={props.drilldown.onDrillOut}
278156
onGetMenuHeight={props.drilldown.onGetMenuHeight}
279157
>
280-
<MenuContent>
158+
{props.showSearchInput}
159+
<MenuContent style={{ '--pf-v6-c-menu__content--Height': '185px;' }}>
281160
<MenuList>{props.children}</MenuList>
282161
</MenuContent>
283162
</Menu>

0 commit comments

Comments
 (0)