Skip to content

fix: keyboard styling for context menu items #594

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
danieldietzler merged 2 commits into from
Feb 18, 2026
Merged

fix: keyboard styling for context menu items #594

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
73e4553
fix: keyboard styling for context menu items
michelheusschen Feb 18, 2026
20d8a8c
remove outline from content wrapper
michelheusschen Feb 18, 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
24 changes: 12 additions & 12 deletions packages/ui/src/lib/components/ContextMenu/ContextMenu.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,17 @@
}: ContextMenuProps = $props();

const itemStyles = tv({
base: 'hover:bg-light-200 flex w-full items-center gap-1 rounded-lg p-1 text-start hover:cursor-pointer',
base: 'data-highlighted:bg-light-200 flex items-center gap-1 rounded-lg p-1 text-start outline-none hover:cursor-pointer',
variants: {
color: styleVariants.textColor,
inset: {
true: 'mx-1',
},
},
});

const wrapperStyles = tv({
base: 'bg-light-100 dark:border-light-300 flex flex-col gap-1 overflow-hidden rounded-xl border py-1 shadow-sm',
base: 'bg-light-100 dark:border-light-300 flex flex-col gap-1 overflow-hidden rounded-xl border py-1 shadow-sm outline-none',
variants: {
size: {
tiny: 'w-32',
Expand Down Expand Up @@ -130,14 +133,12 @@
textValue={item.title}
closeOnSelect
onSelect={() => item.onAction(item)}
class="px-1"
class={itemStyles({ color: item.color, inset: true })}
>
<div class={itemStyles({ color: item.color })}>
{#if item.icon}
<Icon icon={item.icon} class="m-2 shrink-0" />
{/if}
<Text class="grow text-start font-medium select-none" size="medium">{item.title}</Text>
</div>
{#if item.icon}
<Icon icon={item.icon} class="m-2 shrink-0" />
{/if}
<Text class="grow text-start font-medium select-none" size="medium">{item.title}</Text>
</DropdownMenu.Item>
{/if}
{/each}
Expand All @@ -152,10 +153,9 @@
closeOnSelect
onSelect={() => item.onAction(item)}
title={item.title}
class={itemStyles({ color: item.color })}
>
<div class={cleanClass(itemStyles({ color: item.color }))}>
<Icon icon={item.icon} class="m-2 shrink-0" />
</div>
<Icon icon={item.icon} class="m-2 shrink-0" />
</DropdownMenu.Item>
{/if}
{/each}
Expand Down
Loading