rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style disabled dropdown checkbox items fully

Browse Source 
Only the checkbox glyph was dimmed, so disabled options still
looked clickable. Apply data-disabled styles to the whole item
for opacity, cursor, and hover.

Signed-off-by: Émile Ré <emile@probo.com>
This commit is contained in:
Émile Ré
2026-07-29 11:19:21 +02:00
parent b3cf6d909b
commit b27d22db2d
1 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/ui/src/Atoms/Dropdown/Dropdown.tsx
View File

@@ -158,13 +158,18 @@ export function DropdownCheckboxItem({
checked={checked} checked={checked}
onCheckedChange={value => onCheckedChange(value === true)} onCheckedChange={value => onCheckedChange(value === true)}
disabled={disabled} disabled={disabled}
className={clsx(dropdownItem(), "rounded-lg outline-none", className)} className={clsx(
dropdownItem(),
"rounded-lg outline-none",
"data-disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:pointer-events-none",
"data-disabled:hover:bg-transparent data-disabled:active:bg-transparent data-disabled:data-active-item:bg-transparent",
className,
)}
> >
<span <span
className={clsx( className={clsx(
"size-4 border border-border-mid relative rounded-sm flex items-center justify-center flex-none", "size-4 border border-border-mid relative rounded-sm flex items-center justify-center flex-none",
checked && "bg-accent text-invert", checked && "bg-accent text-invert",
disabled && "opacity-50",
)} )}
> >
<DropdownMenu.ItemIndicator> <DropdownMenu.ItemIndicator>