Skip to content

Commit dc341da

Browse files
ling1726ling1726
committed
ad vr test
1 parent 543a515 commit dc341da

File tree

1 file changed

+370
-0
lines changed

1 file changed

+370
-0
lines changed

‎apps/vr-tests-react-components/src/stories/Menu/MenuMultilineItems.stories.tsx

+370
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,370 @@
1+
import * as React from 'react';
2+
import type { Meta } from '@storybook/react';
3+
import { Steps } from 'storywright';
4+
import {
5+
Menu,
6+
MenuTrigger,
7+
MenuPopover,
8+
MenuList,
9+
MenuItem,
10+
MenuGroupHeader,
11+
MenuGroup,
12+
MenuDivider,
13+
MenuSplitGroup,
14+
MenuItemSwitch,
15+
MenuItemCheckbox,
16+
} from '@fluentui/react-menu';
17+
import { EditFilled, EditRegular, bundleIcon } from '@fluentui/react-icons';
18+
import { getStoryVariant, RTL, withStoryWrightSteps } from '../../utilities';
19+
20+
export default {
21+
title: 'Menu Multiline items',
22+
23+
decorators: [
24+
story =>
25+
withStoryWrightSteps({ story, steps: new Steps().hover('[role="menuitem"]').snapshot('hover menuitem').end() }),
26+
],
27+
} satisfies Meta<typeof Menu>;
28+
29+
const EditIcon = bundleIcon(EditFilled, EditRegular);
30+
31+
const TextOnly = () => (
32+
<MenuGroup>
33+
<MenuGroupHeader>Text only</MenuGroupHeader>
34+
<MenuItem>Copy</MenuItem>
35+
<MenuItem subText="Copy text">Copy</MenuItem>
36+
</MenuGroup>
37+
);
38+
39+
const TextWithIcon = () => (
40+
<MenuGroup>
41+
<MenuGroupHeader>Text with Icon</MenuGroupHeader>
42+
<MenuItem icon={<EditIcon />}>Copy</MenuItem>
43+
<MenuItem subText="Copy text" icon={<EditIcon />}>
44+
Copy
45+
</MenuItem>
46+
</MenuGroup>
47+
);
48+
49+
const TextOnlySubmenu = () => (
50+
<MenuGroup>
51+
<MenuGroupHeader>Text only submenu</MenuGroupHeader>
52+
<Menu>
53+
<MenuTrigger>
54+
<MenuItem>Open</MenuItem>
55+
</MenuTrigger>
56+
<MenuPopover>
57+
<MenuList>
58+
<MenuItem>Open in browser</MenuItem>
59+
<MenuItem>Open in desktop</MenuItem>
60+
</MenuList>
61+
</MenuPopover>
62+
</Menu>
63+
<Menu>
64+
<MenuTrigger>
65+
<MenuItem subText="Open file">Open</MenuItem>
66+
</MenuTrigger>
67+
<MenuPopover>
68+
<MenuList>
69+
<MenuItem>Open in browser</MenuItem>
70+
<MenuItem>Open in desktop</MenuItem>
71+
</MenuList>
72+
</MenuPopover>
73+
</Menu>
74+
</MenuGroup>
75+
);
76+
77+
const IconAndSubmenu = () => (
78+
<MenuGroup>
79+
<MenuGroupHeader>Icon and submenu</MenuGroupHeader>
80+
<Menu>
81+
<MenuTrigger>
82+
<MenuItem icon={<EditIcon />}>Open</MenuItem>
83+
</MenuTrigger>
84+
<MenuPopover>
85+
<MenuList>
86+
<MenuItem>Open in browser</MenuItem>
87+
<MenuItem>Open in desktop</MenuItem>
88+
</MenuList>
89+
</MenuPopover>
90+
</Menu>
91+
<Menu>
92+
<MenuTrigger>
93+
<MenuItem subText="Open file" icon={<EditIcon />}>
94+
Open
95+
</MenuItem>
96+
</MenuTrigger>
97+
<MenuPopover>
98+
<MenuList>
99+
<MenuItem>Open in browser</MenuItem>
100+
<MenuItem>Open in desktop</MenuItem>
101+
</MenuList>
102+
</MenuPopover>
103+
</Menu>
104+
</MenuGroup>
105+
);
106+
107+
const IconAndSecondary = () => (
108+
<MenuGroup>
109+
<MenuGroupHeader>Icon and secondary</MenuGroupHeader>
110+
<MenuItem icon={<EditIcon />} secondaryContent="Ctrl+C">
111+
Copy
112+
</MenuItem>
113+
<MenuItem icon={<EditIcon />} subText="Copy text" secondaryContent="Ctrl+C">
114+
Copy
115+
</MenuItem>
116+
</MenuGroup>
117+
);
118+
119+
const SplitWithEverything = () => (
120+
<MenuGroup>
121+
<MenuGroupHeader>Split with everything</MenuGroupHeader>
122+
<Menu>
123+
<MenuSplitGroup>
124+
<MenuItem icon={<EditIcon />} secondaryContent="Ctrl+N">
125+
New folder
126+
</MenuItem>
127+
<MenuTrigger>
128+
<MenuItem />
129+
</MenuTrigger>
130+
</MenuSplitGroup>
131+
<MenuPopover>
132+
<MenuList>
133+
<MenuItem>New folder</MenuItem>
134+
<MenuItem>New folder</MenuItem>
135+
<MenuItem>New folder</MenuItem>
136+
</MenuList>
137+
</MenuPopover>
138+
</Menu>
139+
<Menu>
140+
<MenuSplitGroup>
141+
<MenuItem icon={<EditIcon />} subText="Creates a new folder" secondaryContent="Ctrl+N">
142+
New folder
143+
</MenuItem>
144+
<MenuTrigger>
145+
<MenuItem />
146+
</MenuTrigger>
147+
</MenuSplitGroup>
148+
<MenuPopover>
149+
<MenuList>
150+
<MenuItem>New folder</MenuItem>
151+
<MenuItem>New folder</MenuItem>
152+
<MenuItem>New folder</MenuItem>
153+
</MenuList>
154+
</MenuPopover>
155+
</Menu>
156+
</MenuGroup>
157+
);
158+
159+
const SplitWithSecondary = () => (
160+
<MenuGroup>
161+
<MenuGroupHeader>Split with secondary</MenuGroupHeader>
162+
<Menu>
163+
<MenuSplitGroup>
164+
<MenuItem secondaryContent="Ctrl+N">New folder</MenuItem>
165+
<MenuTrigger>
166+
<MenuItem />
167+
</MenuTrigger>
168+
</MenuSplitGroup>
169+
<MenuPopover>
170+
<MenuList>
171+
<MenuItem>New folder</MenuItem>
172+
<MenuItem>New folder</MenuItem>
173+
<MenuItem>New folder</MenuItem>
174+
</MenuList>
175+
</MenuPopover>
176+
</Menu>
177+
<Menu>
178+
<MenuSplitGroup>
179+
<MenuItem subText="Creates a new folder" secondaryContent="Ctrl+N">
180+
New folder
181+
</MenuItem>
182+
<MenuTrigger>
183+
<MenuItem />
184+
</MenuTrigger>
185+
</MenuSplitGroup>
186+
<MenuPopover>
187+
<MenuList>
188+
<MenuItem>New folder</MenuItem>
189+
<MenuItem>New folder</MenuItem>
190+
<MenuItem>New folder</MenuItem>
191+
</MenuList>
192+
</MenuPopover>
193+
</Menu>
194+
</MenuGroup>
195+
);
196+
197+
const SplitTextOnly = () => (
198+
<MenuGroup>
199+
<MenuGroupHeader>Split text only</MenuGroupHeader>
200+
<Menu>
201+
<MenuSplitGroup>
202+
<MenuItem>New folder</MenuItem>
203+
<MenuTrigger>
204+
<MenuItem />
205+
</MenuTrigger>
206+
</MenuSplitGroup>
207+
<MenuPopover>
208+
<MenuList>
209+
<MenuItem>New folder</MenuItem>
210+
<MenuItem>New folder</MenuItem>
211+
<MenuItem>New folder</MenuItem>
212+
</MenuList>
213+
</MenuPopover>
214+
</Menu>
215+
<Menu>
216+
<MenuSplitGroup>
217+
<MenuItem subText="Creates a new folder">New folder</MenuItem>
218+
<MenuTrigger>
219+
<MenuItem />
220+
</MenuTrigger>
221+
</MenuSplitGroup>
222+
<MenuPopover>
223+
<MenuList>
224+
<MenuItem>New folder</MenuItem>
225+
<MenuItem>New folder</MenuItem>
226+
<MenuItem>New folder</MenuItem>
227+
</MenuList>
228+
</MenuPopover>
229+
</Menu>
230+
</MenuGroup>
231+
);
232+
233+
const SelectableTextOnly = () => (
234+
<MenuGroup>
235+
<MenuGroupHeader>Selectable text only</MenuGroupHeader>
236+
<MenuItemCheckbox value="foo" name="foo">
237+
Select this thing
238+
</MenuItemCheckbox>
239+
<MenuItemCheckbox value="foo" name="foo" subText="Selection">
240+
Select this thing
241+
</MenuItemCheckbox>
242+
</MenuGroup>
243+
);
244+
245+
const SelectableWithIcon = () => (
246+
<MenuGroup>
247+
<MenuGroupHeader>Selectable with Icon</MenuGroupHeader>
248+
<MenuItemCheckbox value="foo" name="bar" icon={<EditIcon />}>
249+
Select this thing
250+
</MenuItemCheckbox>
251+
<MenuItemCheckbox value="foo" name="bar" subText="Selection" icon={<EditIcon />}>
252+
Select this thing
253+
</MenuItemCheckbox>
254+
</MenuGroup>
255+
);
256+
257+
const SelectableWithIconAndSecondary = () => (
258+
<MenuGroup>
259+
<MenuGroupHeader>Selectable with icon and secondary</MenuGroupHeader>
260+
<MenuItemCheckbox icon={<EditIcon />} value="foo" name="bac" secondaryContent="Ctrl+Spacebar">
261+
Select this thing
262+
</MenuItemCheckbox>
263+
<MenuItemCheckbox icon={<EditIcon />} value="foo" name="bac" subText="Selection" secondaryContent="Ctrl+Spacebar">
264+
Select this thing
265+
</MenuItemCheckbox>
266+
</MenuGroup>
267+
);
268+
269+
const SelectableWithSecondary = () => (
270+
<MenuGroup>
271+
<MenuGroupHeader>Selectable with secondary</MenuGroupHeader>
272+
<MenuItemCheckbox value="foo" name="baz" secondaryContent="Ctrl+Spacebar">
273+
Select this thing
274+
</MenuItemCheckbox>
275+
<MenuItemCheckbox value="foo" name="baz" subText="Selection" secondaryContent="Ctrl+Spacebar">
276+
Select this thing
277+
</MenuItemCheckbox>
278+
</MenuGroup>
279+
);
280+
281+
const SwitchTextOnly = () => (
282+
<MenuGroup>
283+
<MenuGroupHeader>SwitchTextOnly</MenuGroupHeader>
284+
<MenuItemSwitch value="foo" name="switch">
285+
Select this thing
286+
</MenuItemSwitch>
287+
<MenuItemSwitch value="foo" name="switch" subText="Selection">
288+
Select this thing
289+
</MenuItemSwitch>
290+
</MenuGroup>
291+
);
292+
293+
const SwitchWithIcon = () => (
294+
<MenuGroup>
295+
<MenuGroupHeader>SwitchTextOnly</MenuGroupHeader>
296+
<MenuItemSwitch icon={<EditIcon />} value="foo" name="switch1">
297+
Select this thing
298+
</MenuItemSwitch>
299+
<MenuItemSwitch icon={<EditIcon />} value="foo" name="switch1" subText="Selection">
300+
Select this thing
301+
</MenuItemSwitch>
302+
</MenuGroup>
303+
);
304+
305+
const SwitchWithIconAndSecondary = () => (
306+
<MenuGroup>
307+
<MenuGroupHeader>SwitchTextOnly</MenuGroupHeader>
308+
<MenuItemSwitch icon={<EditIcon />} value="foo" name="switch2" secondaryContent="Ctrl+Spacebar">
309+
Select this thing
310+
</MenuItemSwitch>
311+
<MenuItemSwitch icon={<EditIcon />} value="foo" name="switch2" subText="Selection" secondaryContent="Ctrl+Spacebar">
312+
Select this thing
313+
</MenuItemSwitch>
314+
</MenuGroup>
315+
);
316+
317+
export const Default = () => {
318+
return (
319+
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
320+
<Menu open>
321+
<MenuTrigger>
322+
<button>Multiline items</button>
323+
</MenuTrigger>
324+
<MenuPopover>
325+
<MenuList style={{ minWidth: 290 }}>
326+
<TextWithIcon />
327+
<MenuDivider />
328+
<TextOnlySubmenu />
329+
<MenuDivider />
330+
<IconAndSecondary />
331+
<MenuDivider />
332+
<IconAndSubmenu />
333+
<MenuDivider />
334+
<SplitWithEverything />
335+
<MenuDivider />
336+
<SplitWithSecondary />
337+
<MenuDivider />
338+
<SplitTextOnly />
339+
</MenuList>
340+
</MenuPopover>
341+
</Menu>
342+
<Menu open>
343+
<MenuTrigger>
344+
<button>Multiline items</button>
345+
</MenuTrigger>
346+
<MenuPopover>
347+
<MenuList style={{ minWidth: 290 }}>
348+
<TextOnly />
349+
<MenuDivider />
350+
<SelectableWithIcon />
351+
<MenuDivider />
352+
<SelectableWithSecondary />
353+
<MenuDivider />
354+
<SelectableWithIconAndSecondary />
355+
<MenuDivider />
356+
<SwitchTextOnly />
357+
<MenuDivider />
358+
<SwitchWithIcon />
359+
<MenuDivider />
360+
<SwitchWithIconAndSecondary />
361+
</MenuList>
362+
</MenuPopover>
363+
</Menu>
364+
</div>
365+
);
366+
};
367+
368+
Default.storyName = 'default';
369+
370+
export const DefaultRTL = getStoryVariant(Default, RTL);

0 commit comments

Comments
 (0)