Skip to content

Feat/color hovers #104

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Shrinks99 merged 4 commits into from
Jul 3, 2026
Merged

Feat/color hovers #104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
227f0ba
fix: hover colors on light mode dropdowns
giuliana-gladeye Jul 1, 2026
c2e4621
feat: updated table hovers
giuliana-gladeye Jul 1, 2026
f405cbf
feat: fix dropdown hovers, added danger variant and docs
giuliana-gladeye Jul 1, 2026
d17887a
Update hover menu colours
Shrinks99 Jul 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
353 changes: 186 additions & 167 deletions packages/demo/src/components/demo/dropdown-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,203 +37,222 @@ export const DropdownMenuDemo = ({

if (variant === "default") {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="sm" variant="tertiary">
Open Menu
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Settings</DropdownMenuItem>
<DropdownMenuItem>Logout</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<div style={{ margin: "1rem 0" }}>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="sm" variant="tertiary">
Open Menu
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Settings</DropdownMenuItem>
<DropdownMenuItem danger>Logout</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
);
}

if (variant === "with-separators") {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="sm" variant="tertiary">
Account Menu
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>
<User />
<span>Profile</span>
</DropdownMenuItem>
<DropdownMenuItem>
<Settings />
<span>Settings</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<LogOut />
<span>Logout</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<div style={{ margin: "1rem 0" }}>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="sm" variant="tertiary">
Account Menu
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>
<User />
<span>Profile</span>
</DropdownMenuItem>
<DropdownMenuItem>
<Settings />
<span>Settings</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<LogOut />
<span>Logout</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
);
}

if (variant === "with-checkboxes") {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="sm" variant="tertiary">
View Options
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuLabel>Appearance</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuCheckboxItem
checked={showStatusBar}
onCheckedChange={setShowStatusBar}
>
Status Bar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={showActivityBar}
onCheckedChange={setShowActivityBar}
>
Activity Bar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={showPanel}
onCheckedChange={setShowPanel}
>
Panel
</DropdownMenuCheckboxItem>
</DropdownMenuContent>
</DropdownMenu>
<div style={{ margin: "1rem 0" }}>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="sm" variant="tertiary">
View Options
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuLabel>Appearance</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuCheckboxItem
checked={showStatusBar}
onCheckedChange={setShowStatusBar}
>
Status Bar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={showActivityBar}
onCheckedChange={setShowActivityBar}
>
Activity Bar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={showPanel}
onCheckedChange={setShowPanel}
>
Panel
</DropdownMenuCheckboxItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
);
}

if (variant === "with-radio") {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="sm" variant="tertiary">
Position: {position}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuLabel>Panel Position</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
<DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
<div style={{ margin: "1rem 0" }}>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="sm" variant="tertiary">
Position: {position}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuLabel>Panel Position</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup
value={position}
onValueChange={setPosition}
>
<DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="bottom">
Bottom
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
);
}

if (variant === "with-shortcuts") {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="sm" variant="tertiary">
Actions
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuItem>
<span>New Tab</span>
<DropdownMenuShortcut>⌘T</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<span>New Window</span>
<DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Close Tab</span>
<DropdownMenuShortcut>⌘W</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<span>Print</span>
<DropdownMenuShortcut>⌘P</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<div style={{ margin: "1rem 0" }}>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="sm" variant="tertiary">
Actions
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuItem>
<span>New Tab</span>
<DropdownMenuShortcut>⌘T</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<span>New Window</span>
<DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Close Tab</span>
<DropdownMenuShortcut>⌘W</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<span>Print</span>
<DropdownMenuShortcut>⌘P</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
);
}

if (variant === "with-submenu") {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="sm" variant="tertiary">
More Options
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuItem>Back</DropdownMenuItem>
<DropdownMenuItem>Forward</DropdownMenuItem>
<DropdownMenuItem>Reload</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<span>More Tools</span>
</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuItem>Save Page As...</DropdownMenuItem>
<DropdownMenuItem>Create Shortcut...</DropdownMenuItem>
<DropdownMenuItem>Name Window...</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>Developer Tools</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuSub>
<DropdownMenuSeparator />
<DropdownMenuItem>Settings</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<div style={{ margin: "1rem 0" }}>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="sm" variant="tertiary">
More Options
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuItem>Back</DropdownMenuItem>
<DropdownMenuItem>Forward</DropdownMenuItem>
<DropdownMenuItem>Reload</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<span>More Tools</span>
</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuItem>Save Page As...</DropdownMenuItem>
<DropdownMenuItem>Create Shortcut...</DropdownMenuItem>
<DropdownMenuItem>Name Window...</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>Developer Tools</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuSub>
<DropdownMenuSeparator />
<DropdownMenuItem>Settings</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
);
}

if (variant === "with-groups") {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="sm" variant="tertiary">
File Menu
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuGroup>
<DropdownMenuLabel>File</DropdownMenuLabel>
<DropdownMenuItem>
<span>New File</span>
<DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Open File</span>
<DropdownMenuShortcut>⌘O</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Save</span>
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuLabel>Edit</DropdownMenuLabel>
<DropdownMenuItem>Undo</DropdownMenuItem>
<DropdownMenuItem>Redo</DropdownMenuItem>
<DropdownMenuItem>Cut</DropdownMenuItem>
<DropdownMenuItem>Copy</DropdownMenuItem>
<DropdownMenuItem>Paste</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
<div style={{ margin: "1rem 0" }}>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="sm" variant="tertiary">
File Menu
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuGroup>
<DropdownMenuLabel>File</DropdownMenuLabel>
<DropdownMenuItem>
<span>New File</span>
<DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Open File</span>
<DropdownMenuShortcut>⌘O</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Save</span>
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuLabel>Edit</DropdownMenuLabel>
<DropdownMenuItem>Undo</DropdownMenuItem>
<DropdownMenuItem>Redo</DropdownMenuItem>
<DropdownMenuItem>Cut</DropdownMenuItem>
<DropdownMenuItem>Copy</DropdownMenuItem>
<DropdownMenuItem>Paste</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
);
}

Expand Down
Loading
Loading