Đào Minh Tú commited on
Commit
3b0313e
·
1 Parent(s): 500cd91

fix(ui): replace zoom-in animation with side-aware slide for dropdown/select/tooltip

Browse files
components/ui/dropdown-menu.tsx CHANGED
@@ -18,7 +18,7 @@ const DropdownMenuContent = React.forwardRef<
18
  ref={ref}
19
  sideOffset={sideOffset}
20
  className={cn(
21
- "z-50 min-w-[10rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg 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",
22
  className
23
  )}
24
  {...props}
 
18
  ref={ref}
19
  sideOffset={sideOffset}
20
  className={cn(
21
+ "z-50 min-w-[10rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 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 duration-150 ease-out",
22
  className
23
  )}
24
  {...props}
components/ui/select.tsx CHANGED
@@ -36,7 +36,7 @@ const SelectContent = React.forwardRef<
36
  <SelectPrimitive.Content
37
  ref={ref}
38
  className={cn(
39
- "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
40
  position === "popper" && "data-[side=bottom]:translate-y-1",
41
  className
42
  )}
 
36
  <SelectPrimitive.Content
37
  ref={ref}
38
  className={cn(
39
+ "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 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 duration-150 ease-out",
40
  position === "popper" && "data-[side=bottom]:translate-y-1",
41
  className
42
  )}
components/ui/tooltip.tsx CHANGED
@@ -16,7 +16,7 @@ const TooltipContent = React.forwardRef<
16
  ref={ref}
17
  sideOffset={sideOffset}
18
  className={cn(
19
- "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
20
  className
21
  )}
22
  {...props}
 
16
  ref={ref}
17
  sideOffset={sideOffset}
18
  className={cn(
19
+ "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md animate-in fade-in-0 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 duration-150 ease-out",
20
  className
21
  )}
22
  {...props}