dropdown pixel perfect

Author: RomanPogorov

packages/react-components/src/components/ui/dropdown-menu.tsx

@@ -42,7 +42,7 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-bg-primary data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border-separator p-2 shadow-lg",
+          "bg-bg-primary data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border-separator px-2 py-3 shadow-lg",
           className
         )}
         {...props}
@@ -74,7 +74,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-bg-secondary focus:text-text-primary data-[variant=destructive]:text-text-error-primary data-[variant=destructive]:focus:bg-bg-error-tertiary dark:data-[variant=destructive]:focus:bg-bg-error-tertiary data-[variant=destructive]:focus:text-text-error-primary data-[variant=destructive]:*:[svg]:!text-text-error-primary [&_svg:not([class*='text-'])]:fg-fg-secondary relative flex cursor-pointer items-center gap-2 rounded-md px-3 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 h-8 typo-body text-text-secondary",
+        "focus:bg-bg-secondary focus:text-text-primary data-[variant=destructive]:text-text-error-primary data-[variant=destructive]:focus:bg-bg-error-tertiary dark:data-[variant=destructive]:focus:bg-bg-error-tertiary data-[variant=destructive]:focus:text-text-error-primary data-[variant=destructive]:*:[svg]:!text-text-error-primary [&_svg:not([class*='text-'])]:fg-fg-secondary relative flex cursor-pointer items-center gap-2 rounded-md px-3 py-1.5 outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 h-8 typo-body text-text-secondary",
         className
       )}
       {...props}
@@ -92,13 +92,13 @@ function DropdownMenuCheckboxItem({
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "focus:bg-bg-secondary focus:text-text-primary relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg]:text-text-link h-8 typo-body text-text-secondary",
+        "focus:bg-bg-secondary focus:text-text-primary relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-9 outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg]:text-text-link h-8 typo-body text-text-secondary",
         className
       )}
       checked={checked}
       {...props}
     >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <span className="pointer-events-none absolute left-3 flex size-3.5 items-center justify-center">
         <DropdownMenuPrimitive.ItemIndicator>
           <CheckIcon className="size-4" />
         </DropdownMenuPrimitive.ItemIndicator>
@@ -128,7 +128,7 @@ function DropdownMenuRadioItem({
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "focus:bg-bg-secondary focus:text-text-primary relative flex cursor-pointer items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 h-8 typo-body text-text-secondary",
+        "focus:bg-bg-secondary focus:text-text-primary relative flex cursor-pointer items-center gap-2 rounded-md py-1.5 pr-2 outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 h-8 typo-body text-text-secondary",
         className
       )}
       {...props}
@@ -155,7 +155,7 @@ function DropdownMenuLabel({
       data-slot="dropdown-menu-label"
       data-inset={inset}
       className={cn(
-        "px-3 py-1.5 text-sm font-medium data-[inset]:pl-8 typo-body text-text-secondary",
+        "px-3 py-1.5 data-[inset]:pl-10 typo-body text-text-secondary",
         className
       )}
       {...props}
@@ -170,7 +170,7 @@ function DropdownMenuSeparator({
   return (
     <DropdownMenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn("border-border-separator -mx-1 my-1 h-px", className)}
+      className={cn("bg-bg-quaternary -mx-1 my-1 h-px", className)}
       {...props}
     />
   );
@@ -211,7 +211,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-bg-secondary focus:text-text-primary data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-md px-3 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 h-8 typo-body text-text-secondary",
+        "focus:bg-bg-secondary focus:text-text-primary data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-md px-3 py-1.5 outline-hidden select-none data-[inset]:pl-8 h-8 typo-body text-text-secondary",
         className
       )}
       {...props}

packages/react-components/src/stories/DropdownMenu.stories.tsx

@@ -141,6 +141,7 @@ export const WithCheckboxes: Story = {
         <DropdownMenuTrigger asChild>
           <Button variant="secondary">View Options</Button>
         </DropdownMenuTrigger>
+
         <DropdownMenuContent className="w-56">
           <DropdownMenuLabel>Sidebar control</DropdownMenuLabel>
           <DropdownMenuSeparator />
@@ -162,7 +163,6 @@ export const WithCheckboxes: Story = {
           >
             Expand on hover
           </DropdownMenuCheckboxItem>
-          <DropdownMenuSeparator />
         </DropdownMenuContent>
       </DropdownMenu>
     );