fix(): Add data attribute to command item classes. (#6)

* fix(): Add data attribute. * fix(): Fix disabled styles. --------- Co-authored-by: aidanCQ <[email protected]>
CQCL · Apr 29, 2024 · 5dca136 · 5dca136
1 parent 0c6798a
commit 5dca136
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/src/shadcn/ui/command.tsx b/src/shadcn/ui/command.tsx
@@ -117,7 +117,8 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
+      props.disabled ? 'opacity-50 pointer-events-none' : '',
       className
     )}
     {...props}

diff --git a/stories/shadcn/command.stories.tsx b/stories/shadcn/command.stories.tsx
@@ -41,7 +41,7 @@ const CommandDemo = () => {
         </CommandGroup>
         <CommandSeparator />
         <CommandGroup heading="Settings">
-          <CommandItem>
+          <CommandItem disabled >
             <PersonIcon className="mr-2 h-4 w-4" />
             <span>Profile</span>
             <CommandShortcut>⌘P</CommandShortcut>