rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-06-28 07:04:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: gaps in command and dropdown-menu (#5570)

Browse Source 
* fix: gaps in command and dropdown-menu

* chore: update snapshots
This commit is contained in:
shadcn
2024-10-25 18:13:13 +04:00
committed by GitHub
parent e242adaa9c
commit f0cff7e0eb
11 changed files with 61 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
apps/www/content/docs/components/command.mdx
View File

@@ -136,3 +136,27 @@ export function CommandMenu() {
### Combobox
You can use the `<Command />` component as a combobox. See the [Combobox](/docs/components/combobox) page for more information.
## Changelog
### 2024-10-25 Classes for icons
Added `gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0` to the `<CommandItem />` to automatically style icon inside.
Add the following classes to the `cva` call in your `command.tsx` file.
```tsx showLineNumbers title="command.tsx"
const CommandItem = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
>(({ className, ...props }, ref) => (
<CommandPrimitive.Item
ref={ref}
className={cn(
"... gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
className
)}
{...props}
/>
))
```

20
apps/www/content/docs/components/dropdown-menu.mdx
View File

@@ -120,3 +120,23 @@ const DropdownMenuItem = React.forwardRef<
/>
))
```
### 2024-10-25 Classes for `<DropdownMenuSubTrigger />`
Added `gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0` to the `<DropdownMenuSubTrigger />` to automatically style icon inside.
Add the following classes to the `cva` call in your `dropdown-menu.tsx` file.
```tsx title="dropdown-menu.tsx"
<DropdownMenuPrimitive.SubTrigger
ref={ref}
className={cn(
"flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
inset && "pl-8",
className
)}
{...props}
>
{/* ... */}
</DropdownMenuPrimitive.SubTrigger>
```

2
apps/www/public/r/styles/default/command.json
View File

File diff suppressed because one or more lines are too long

2
apps/www/public/r/styles/default/dropdown-menu.json
View File

File diff suppressed because one or more lines are too long

2
apps/www/public/r/styles/new-york/command.json
View File

File diff suppressed because one or more lines are too long

2
apps/www/public/r/styles/new-york/dropdown-menu.json
View File

File diff suppressed because one or more lines are too long

2
apps/www/registry/default/ui/command.tsx
View File

@@ -117,7 +117,7 @@ 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 data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
"relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
className
)}
{...props}

4
apps/www/registry/default/ui/dropdown-menu.tsx
View File

@@ -27,14 +27,14 @@ const DropdownMenuSubTrigger = React.forwardRef<
<DropdownMenuPrimitive.SubTrigger
ref={ref}
className={cn(
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
"flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
inset && "pl-8",
className
)}
{...props}
>
{children}
<ChevronRight className="ml-auto h-4 w-4" />
<ChevronRight className="ml-auto" />
</DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName =

2
apps/www/registry/new-york/ui/command.tsx
View File

@@ -117,7 +117,7 @@ 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 data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
"relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
className
)}
{...props}

4
apps/www/registry/new-york/ui/dropdown-menu.tsx
View File

@@ -31,14 +31,14 @@ const DropdownMenuSubTrigger = React.forwardRef<
<DropdownMenuPrimitive.SubTrigger
ref={ref}
className={cn(
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
"flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
inset && "pl-8",
className
)}
{...props}
>
{children}
<ChevronRightIcon className="ml-auto h-4 w-4" />
<ChevronRightIcon className="ml-auto" />
</DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName =

15
packages/shadcn/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap
View File

@@ -28,7 +28,6 @@ export function cn(...inputs: ClassValue[]) {
}
",
"path": "lib/utils.ts",
"target": "lib/utils.ts",
"type": "registry:lib",
},
{
@@ -60,7 +59,7 @@ Label.displayName = LabelPrimitive.Root.displayName
export { Label }
",
"path": "ui/label.tsx",
"target": "components/ui/label.tsx",
"target": "",
"type": "registry:ui",
},
],
@@ -153,7 +152,7 @@ Button.displayName = "Button"
export { Button, buttonVariants }
",
"path": "ui/button.tsx",
"target": "components/ui/button.tsx",
"target": "",
"type": "registry:ui",
},
],
@@ -231,7 +230,7 @@ Button.displayName = "Button"
export { Button, buttonVariants }
",
"path": "ui/button.tsx",
"target": "components/ui/button.tsx",
"target": "",
"type": "registry:ui",
},
{
@@ -262,7 +261,7 @@ Input.displayName = "Input"
export { Input }
",
"path": "ui/input.tsx",
"target": "components/ui/input.tsx",
"target": "",
"type": "registry:ui",
},
{
@@ -274,7 +273,7 @@ import { Command as CommandPrimitive } from "cmdk"
import { Search } from "lucide-react"
import { cn } from "@/lib/utils"
import { Dialog, DialogContent } from "@/components/ui/dialog"
import { Dialog, DialogContent } from "@/registry/default/ui/dialog"
const Command = React.forwardRef<
React.ElementRef<typeof CommandPrimitive>,
@@ -423,7 +422,7 @@ export {
}
",
"path": "ui/command.tsx",
"target": "components/ui/command.tsx",
"target": "",
"type": "registry:ui",
},
{
@@ -551,7 +550,7 @@ export {
}
",
"path": "ui/dialog.tsx",
"target": "components/ui/dialog.tsx",
"target": "",
"type": "registry:ui",
},
],