Skip to content

Commit 5b21c14

Browse files
giuliana-gladeyeShrinks99
giuliana-gladeye
and
Shrinks99
authored
Feat/color hovers (#104)
Co-authored-by: Henry Wilkinson <henry@wilkinson.graphics>
1 parent 96627f5 commit 5b21c14

15 files changed

Lines changed: 456 additions & 182 deletions

‎packages/demo/src/components/demo/dropdown-menu.tsx‎

Lines changed: 186 additions & 167 deletions
Original file line numberDiff line numberDiff line change
@@ -37,203 +37,222 @@ export const DropdownMenuDemo = ({
3737

3838
if (variant === "default") {
3939
return (
40-
<DropdownMenu>
41-
<DropdownMenuTrigger asChild>
42-
<Button size="sm" variant="tertiary">
43-
Open Menu
44-
</Button>
45-
</DropdownMenuTrigger>
46-
<DropdownMenuContent align="start">
47-
<DropdownMenuItem>Profile</DropdownMenuItem>
48-
<DropdownMenuItem>Settings</DropdownMenuItem>
49-
<DropdownMenuItem>Logout</DropdownMenuItem>
50-
</DropdownMenuContent>
51-
</DropdownMenu>
40+
<div style={{ margin: "1rem 0" }}>
41+
<DropdownMenu>
42+
<DropdownMenuTrigger asChild>
43+
<Button size="sm" variant="tertiary">
44+
Open Menu
45+
</Button>
46+
</DropdownMenuTrigger>
47+
<DropdownMenuContent align="start">
48+
<DropdownMenuItem>Profile</DropdownMenuItem>
49+
<DropdownMenuItem>Settings</DropdownMenuItem>
50+
<DropdownMenuItem danger>Logout</DropdownMenuItem>
51+
</DropdownMenuContent>
52+
</DropdownMenu>
53+
</div>
5254
);
5355
}
5456

5557
if (variant === "with-separators") {
5658
return (
57-
<DropdownMenu>
58-
<DropdownMenuTrigger asChild>
59-
<Button size="sm" variant="tertiary">
60-
Account Menu
61-
</Button>
62-
</DropdownMenuTrigger>
63-
<DropdownMenuContent align="start">
64-
<DropdownMenuLabel>My Account</DropdownMenuLabel>
65-
<DropdownMenuSeparator />
66-
<DropdownMenuItem>
67-
<User />
68-
<span>Profile</span>
69-
</DropdownMenuItem>
70-
<DropdownMenuItem>
71-
<Settings />
72-
<span>Settings</span>
73-
</DropdownMenuItem>
74-
<DropdownMenuSeparator />
75-
<DropdownMenuItem>
76-
<LogOut />
77-
<span>Logout</span>
78-
</DropdownMenuItem>
79-
</DropdownMenuContent>
80-
</DropdownMenu>
59+
<div style={{ margin: "1rem 0" }}>
60+
<DropdownMenu>
61+
<DropdownMenuTrigger asChild>
62+
<Button size="sm" variant="tertiary">
63+
Account Menu
64+
</Button>
65+
</DropdownMenuTrigger>
66+
<DropdownMenuContent align="start">
67+
<DropdownMenuLabel>My Account</DropdownMenuLabel>
68+
<DropdownMenuSeparator />
69+
<DropdownMenuItem>
70+
<User />
71+
<span>Profile</span>
72+
</DropdownMenuItem>
73+
<DropdownMenuItem>
74+
<Settings />
75+
<span>Settings</span>
76+
</DropdownMenuItem>
77+
<DropdownMenuSeparator />
78+
<DropdownMenuItem>
79+
<LogOut />
80+
<span>Logout</span>
81+
</DropdownMenuItem>
82+
</DropdownMenuContent>
83+
</DropdownMenu>
84+
</div>
8185
);
8286
}
8387

8488
if (variant === "with-checkboxes") {
8589
return (
86-
<DropdownMenu>
87-
<DropdownMenuTrigger asChild>
88-
<Button size="sm" variant="tertiary">
89-
View Options
90-
</Button>
91-
</DropdownMenuTrigger>
92-
<DropdownMenuContent align="start">
93-
<DropdownMenuLabel>Appearance</DropdownMenuLabel>
94-
<DropdownMenuSeparator />
95-
<DropdownMenuCheckboxItem
96-
checked={showStatusBar}
97-
onCheckedChange={setShowStatusBar}
98-
>
99-
Status Bar
100-
</DropdownMenuCheckboxItem>
101-
<DropdownMenuCheckboxItem
102-
checked={showActivityBar}
103-
onCheckedChange={setShowActivityBar}
104-
>
105-
Activity Bar
106-
</DropdownMenuCheckboxItem>
107-
<DropdownMenuCheckboxItem
108-
checked={showPanel}
109-
onCheckedChange={setShowPanel}
110-
>
111-
Panel
112-
</DropdownMenuCheckboxItem>
113-
</DropdownMenuContent>
114-
</DropdownMenu>
90+
<div style={{ margin: "1rem 0" }}>
91+
<DropdownMenu>
92+
<DropdownMenuTrigger asChild>
93+
<Button size="sm" variant="tertiary">
94+
View Options
95+
</Button>
96+
</DropdownMenuTrigger>
97+
<DropdownMenuContent align="start">
98+
<DropdownMenuLabel>Appearance</DropdownMenuLabel>
99+
<DropdownMenuSeparator />
100+
<DropdownMenuCheckboxItem
101+
checked={showStatusBar}
102+
onCheckedChange={setShowStatusBar}
103+
>
104+
Status Bar
105+
</DropdownMenuCheckboxItem>
106+
<DropdownMenuCheckboxItem
107+
checked={showActivityBar}
108+
onCheckedChange={setShowActivityBar}
109+
>
110+
Activity Bar
111+
</DropdownMenuCheckboxItem>
112+
<DropdownMenuCheckboxItem
113+
checked={showPanel}
114+
onCheckedChange={setShowPanel}
115+
>
116+
Panel
117+
</DropdownMenuCheckboxItem>
118+
</DropdownMenuContent>
119+
</DropdownMenu>
120+
</div>
115121
);
116122
}
117123

118124
if (variant === "with-radio") {
119125
return (
120-
<DropdownMenu>
121-
<DropdownMenuTrigger asChild>
122-
<Button size="sm" variant="tertiary">
123-
Position: {position}
124-
</Button>
125-
</DropdownMenuTrigger>
126-
<DropdownMenuContent align="start">
127-
<DropdownMenuLabel>Panel Position</DropdownMenuLabel>
128-
<DropdownMenuSeparator />
129-
<DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
130-
<DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
131-
<DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
132-
<DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
133-
</DropdownMenuRadioGroup>
134-
</DropdownMenuContent>
135-
</DropdownMenu>
126+
<div style={{ margin: "1rem 0" }}>
127+
<DropdownMenu>
128+
<DropdownMenuTrigger asChild>
129+
<Button size="sm" variant="tertiary">
130+
Position: {position}
131+
</Button>
132+
</DropdownMenuTrigger>
133+
<DropdownMenuContent align="start">
134+
<DropdownMenuLabel>Panel Position</DropdownMenuLabel>
135+
<DropdownMenuSeparator />
136+
<DropdownMenuRadioGroup
137+
value={position}
138+
onValueChange={setPosition}
139+
>
140+
<DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
141+
<DropdownMenuRadioItem value="bottom">
142+
Bottom
143+
</DropdownMenuRadioItem>
144+
<DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
145+
</DropdownMenuRadioGroup>
146+
</DropdownMenuContent>
147+
</DropdownMenu>
148+
</div>
136149
);
137150
}
138151

139152
if (variant === "with-shortcuts") {
140153
return (
141-
<DropdownMenu>
142-
<DropdownMenuTrigger asChild>
143-
<Button size="sm" variant="tertiary">
144-
Actions
145-
</Button>
146-
</DropdownMenuTrigger>
147-
<DropdownMenuContent align="start">
148-
<DropdownMenuItem>
149-
<span>New Tab</span>
150-
<DropdownMenuShortcut>⌘T</DropdownMenuShortcut>
151-
</DropdownMenuItem>
152-
<DropdownMenuItem>
153-
<span>New Window</span>
154-
<DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
155-
</DropdownMenuItem>
156-
<DropdownMenuItem>
157-
<span>Close Tab</span>
158-
<DropdownMenuShortcut>⌘W</DropdownMenuShortcut>
159-
</DropdownMenuItem>
160-
<DropdownMenuSeparator />
161-
<DropdownMenuItem>
162-
<span>Print</span>
163-
<DropdownMenuShortcut>⌘P</DropdownMenuShortcut>
164-
</DropdownMenuItem>
165-
</DropdownMenuContent>
166-
</DropdownMenu>
154+
<div style={{ margin: "1rem 0" }}>
155+
<DropdownMenu>
156+
<DropdownMenuTrigger asChild>
157+
<Button size="sm" variant="tertiary">
158+
Actions
159+
</Button>
160+
</DropdownMenuTrigger>
161+
<DropdownMenuContent align="start">
162+
<DropdownMenuItem>
163+
<span>New Tab</span>
164+
<DropdownMenuShortcut>⌘T</DropdownMenuShortcut>
165+
</DropdownMenuItem>
166+
<DropdownMenuItem>
167+
<span>New Window</span>
168+
<DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
169+
</DropdownMenuItem>
170+
<DropdownMenuItem>
171+
<span>Close Tab</span>
172+
<DropdownMenuShortcut>⌘W</DropdownMenuShortcut>
173+
</DropdownMenuItem>
174+
<DropdownMenuSeparator />
175+
<DropdownMenuItem>
176+
<span>Print</span>
177+
<DropdownMenuShortcut>⌘P</DropdownMenuShortcut>
178+
</DropdownMenuItem>
179+
</DropdownMenuContent>
180+
</DropdownMenu>
181+
</div>
167182
);
168183
}
169184

170185
if (variant === "with-submenu") {
171186
return (
172-
<DropdownMenu>
173-
<DropdownMenuTrigger asChild>
174-
<Button size="sm" variant="tertiary">
175-
More Options
176-
</Button>
177-
</DropdownMenuTrigger>
178-
<DropdownMenuContent align="start">
179-
<DropdownMenuItem>Back</DropdownMenuItem>
180-
<DropdownMenuItem>Forward</DropdownMenuItem>
181-
<DropdownMenuItem>Reload</DropdownMenuItem>
182-
<DropdownMenuSeparator />
183-
<DropdownMenuSub>
184-
<DropdownMenuSubTrigger>
185-
<span>More Tools</span>
186-
</DropdownMenuSubTrigger>
187-
<DropdownMenuSubContent>
188-
<DropdownMenuItem>Save Page As...</DropdownMenuItem>
189-
<DropdownMenuItem>Create Shortcut...</DropdownMenuItem>
190-
<DropdownMenuItem>Name Window...</DropdownMenuItem>
191-
<DropdownMenuSeparator />
192-
<DropdownMenuItem>Developer Tools</DropdownMenuItem>
193-
</DropdownMenuSubContent>
194-
</DropdownMenuSub>
195-
<DropdownMenuSeparator />
196-
<DropdownMenuItem>Settings</DropdownMenuItem>
197-
</DropdownMenuContent>
198-
</DropdownMenu>
187+
<div style={{ margin: "1rem 0" }}>
188+
<DropdownMenu>
189+
<DropdownMenuTrigger asChild>
190+
<Button size="sm" variant="tertiary">
191+
More Options
192+
</Button>
193+
</DropdownMenuTrigger>
194+
<DropdownMenuContent align="start">
195+
<DropdownMenuItem>Back</DropdownMenuItem>
196+
<DropdownMenuItem>Forward</DropdownMenuItem>
197+
<DropdownMenuItem>Reload</DropdownMenuItem>
198+
<DropdownMenuSeparator />
199+
<DropdownMenuSub>
200+
<DropdownMenuSubTrigger>
201+
<span>More Tools</span>
202+
</DropdownMenuSubTrigger>
203+
<DropdownMenuSubContent>
204+
<DropdownMenuItem>Save Page As...</DropdownMenuItem>
205+
<DropdownMenuItem>Create Shortcut...</DropdownMenuItem>
206+
<DropdownMenuItem>Name Window...</DropdownMenuItem>
207+
<DropdownMenuSeparator />
208+
<DropdownMenuItem>Developer Tools</DropdownMenuItem>
209+
</DropdownMenuSubContent>
210+
</DropdownMenuSub>
211+
<DropdownMenuSeparator />
212+
<DropdownMenuItem>Settings</DropdownMenuItem>
213+
</DropdownMenuContent>
214+
</DropdownMenu>
215+
</div>
199216
);
200217
}
201218

202219
if (variant === "with-groups") {
203220
return (
204-
<DropdownMenu>
205-
<DropdownMenuTrigger asChild>
206-
<Button size="sm" variant="tertiary">
207-
File Menu
208-
</Button>
209-
</DropdownMenuTrigger>
210-
<DropdownMenuContent align="start">
211-
<DropdownMenuGroup>
212-
<DropdownMenuLabel>File</DropdownMenuLabel>
213-
<DropdownMenuItem>
214-
<span>New File</span>
215-
<DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
216-
</DropdownMenuItem>
217-
<DropdownMenuItem>
218-
<span>Open File</span>
219-
<DropdownMenuShortcut>⌘O</DropdownMenuShortcut>
220-
</DropdownMenuItem>
221-
<DropdownMenuItem>
222-
<span>Save</span>
223-
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
224-
</DropdownMenuItem>
225-
</DropdownMenuGroup>
226-
<DropdownMenuSeparator />
227-
<DropdownMenuGroup>
228-
<DropdownMenuLabel>Edit</DropdownMenuLabel>
229-
<DropdownMenuItem>Undo</DropdownMenuItem>
230-
<DropdownMenuItem>Redo</DropdownMenuItem>
231-
<DropdownMenuItem>Cut</DropdownMenuItem>
232-
<DropdownMenuItem>Copy</DropdownMenuItem>
233-
<DropdownMenuItem>Paste</DropdownMenuItem>
234-
</DropdownMenuGroup>
235-
</DropdownMenuContent>
236-
</DropdownMenu>
221+
<div style={{ margin: "1rem 0" }}>
222+
<DropdownMenu>
223+
<DropdownMenuTrigger asChild>
224+
<Button size="sm" variant="tertiary">
225+
File Menu
226+
</Button>
227+
</DropdownMenuTrigger>
228+
<DropdownMenuContent align="start">
229+
<DropdownMenuGroup>
230+
<DropdownMenuLabel>File</DropdownMenuLabel>
231+
<DropdownMenuItem>
232+
<span>New File</span>
233+
<DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
234+
</DropdownMenuItem>
235+
<DropdownMenuItem>
236+
<span>Open File</span>
237+
<DropdownMenuShortcut>⌘O</DropdownMenuShortcut>
238+
</DropdownMenuItem>
239+
<DropdownMenuItem>
240+
<span>Save</span>
241+
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
242+
</DropdownMenuItem>
243+
</DropdownMenuGroup>
244+
<DropdownMenuSeparator />
245+
<DropdownMenuGroup>
246+
<DropdownMenuLabel>Edit</DropdownMenuLabel>
247+
<DropdownMenuItem>Undo</DropdownMenuItem>
248+
<DropdownMenuItem>Redo</DropdownMenuItem>
249+
<DropdownMenuItem>Cut</DropdownMenuItem>
250+
<DropdownMenuItem>Copy</DropdownMenuItem>
251+
<DropdownMenuItem>Paste</DropdownMenuItem>
252+
</DropdownMenuGroup>
253+
</DropdownMenuContent>
254+
</DropdownMenu>
255+
</div>
237256
);
238257
}
239258

0 commit comments

Comments
 (0)