feat(alert-dialog): change position to bottom

shadcn-ui · Apr 24, 2024 · 4045f32 · 4045f32
1 parent 816b654
commit 4045f32
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 24 deletions.
diff --git a/apps/www/__registry__/default/ui/alert-dialog.tsx b/apps/www/__registry__/default/ui/alert-dialog.tsx
@@ -4,7 +4,8 @@ import * as React from "react"
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
 
 import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/registry/default/ui/button"
+
+import { buttonVariants } from "./button"
 
 const AlertDialog = AlertDialogPrimitive.Root
 
@@ -36,7 +37,11 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed inset-x-0 bottom-0 z-50 grid w-full max-w-lg translate-x-[-50%] left-1/2 rounded-t-lg p-6 border bg-background shadow-lg duration-200",
+        "slide-in-from-bottom sm:translate-y-[-50%] sm:top-[50%] sm:bottom-auto sm:rounded-lg",
+        "data-[state=open]:slide-in data-[state=closed]:slide-out",
+        "sm:data-[state=open]:fade-in-0 sm:data-[state=closed]:fade-out-0 sm:data-[state=open]:zoom-in-95 sm:data-[state=closed]:zoom-out-95",
+        "sm:data-[state=open]:slide-in-from-top-[48%] sm:data-pstate=closed]:slide-out-to-top-[48%]",
         className
       )}
       {...props}
@@ -50,10 +55,7 @@ const AlertDialogHeader = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
+    className={cn("flex flex-col space-y-2 text-left", className)}
     {...props}
   />
 )

diff --git a/apps/www/registry/default/ui/alert-dialog.tsx b/apps/www/registry/default/ui/alert-dialog.tsx
@@ -4,7 +4,8 @@ import * as React from "react"
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
 
 import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/registry/default/ui/button"
+
+import { buttonVariants } from "./button"
 
 const AlertDialog = AlertDialogPrimitive.Root
 
@@ -36,7 +37,11 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed inset-x-0 bottom-0 z-50 grid w-full max-w-lg translate-x-[-50%] left-1/2 rounded-t-lg p-6 border bg-background shadow-lg duration-200",
+        "slide-in-from-bottom sm:translate-y-[-50%] sm:top-[50%] sm:bottom-auto sm:rounded-lg",
+        "data-[state=open]:slide-in data-[state=closed]:slide-out",
+        "sm:data-[state=open]:fade-in-0 sm:data-[state=closed]:fade-out-0 sm:data-[state=open]:zoom-in-95 sm:data-[state=closed]:zoom-out-95",
+        "sm:data-[state=open]:slide-in-from-top-[48%] sm:data-pstate=closed]:slide-out-to-top-[48%]",
         className
       )}
       {...props}
@@ -50,10 +55,7 @@ const AlertDialogHeader = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
+    className={cn("flex flex-col space-y-2 text-left", className)}
     {...props}
   />
 )
@@ -66,6 +68,7 @@ const AlertDialogFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      "mt-4",
       className
     )}
     {...props}
@@ -128,14 +131,14 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
 
 export {
   AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
+  AlertDialogAction,
+  AlertDialogCancel,
   AlertDialogContent,
-  AlertDialogHeader,
+  AlertDialogDescription,
   AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
   AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
+  AlertDialogTrigger,
 }
diff --git a/apps/www/registry/new-york/ui/alert-dialog.tsx b/apps/www/registry/new-york/ui/alert-dialog.tsx
@@ -36,7 +36,11 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed inset-x-0 bottom-0 z-50 grid w-full max-w-lg translate-x-[-50%] left-1/2 rounded-t-lg p-6 border bg-background shadow-lg duration-200",
+        "slide-in-from-bottom sm:translate-y-[-50%] sm:top-[50%] sm:bottom-auto sm:rounded-lg",
+        "data-[state=open]:slide-in data-[state=closed]:slide-out",
+        "sm:data-[state=open]:fade-in-0 sm:data-[state=closed]:fade-out-0 sm:data-[state=open]:zoom-in-95 sm:data-[state=closed]:zoom-out-95",
+        "sm:data-[state=open]:slide-in-from-top-[48%] sm:data-pstate=closed]:slide-out-to-top-[48%]",
         className
       )}
       {...props}
@@ -50,10 +54,7 @@ const AlertDialogHeader = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
+    className={cn("flex flex-col space-y-2 text-left", className)}
     {...props}
   />
 )
@@ -66,6 +67,7 @@ const AlertDialogFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      "mt-4",
       className
     )}
     {...props}