feat(ui): add optional transition animations to dialog

2 files changed, 17 insertions, 15 deletions

diff --git a/packages/ui/src/components/dialog.css b/packages/ui/src/components/dialog.css
index bc3e113bb..e0ccf3fd0 100644
--- a/packages/ui/src/components/dialog.css
+++ b/packages/ui/src/components/dialog.css
@@ -5,12 +5,6 @@
   inset: 0;
   z-index: 50;
   background-color: hsl(from var(--background-base) h s l / 0.2);
-
-  /* animation: overlayHide 250ms ease 100ms forwards; */
-  /**/
-  /* &[data-expanded] { */
-  /*   animation: overlayShow 250ms ease; */
-  /* } */
 }
 
 [data-component="dialog"] {
@@ -58,12 +52,6 @@
       background-clip: padding-box;
       box-shadow: var(--shadow-lg-border-base);
 
-      /* animation: contentHide 300ms ease-in forwards; */
-      /**/
-      /* &[data-expanded] { */
-      /*   animation: contentShow 300ms ease-out; */
-      /* } */
-
       [data-slot="dialog-header"] {
         display: flex;
         padding: 20px;
@@ -147,6 +135,14 @@
   }
 }
 
+[data-component="dialog"][data-transition] [data-slot="dialog-content"] {
+  animation: contentHide 100ms ease-in forwards;
+
+  &[data-expanded] {
+    animation: contentShow 200ms ease-out;
+  }
+}
+
 @keyframes overlayShow {
   from {
     opacity: 0;
@@ -166,7 +162,7 @@
 @keyframes contentShow {
   from {
     opacity: 0;
-    transform: scale(0.96);
+    transform: scale(0.98);
   }
   to {
     opacity: 1;
@@ -180,6 +176,6 @@
   }
   to {
     opacity: 0;
-    transform: scale(0.96);
+    transform: scale(0.98);
   }
 }
diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx
index 83da6c699..8aa9315e0 100644
--- a/packages/ui/src/components/dialog.tsx
+++ b/packages/ui/src/components/dialog.tsx
@@ -11,12 +11,18 @@ export interface DialogProps extends ParentProps {
   class?: ComponentProps<"div">["class"]
   classList?: ComponentProps<"div">["classList"]
   fit?: boolean
+  transition?: boolean
 }
 
 export function Dialog(props: DialogProps) {
   const i18n = useI18n()
   return (
-    <div data-component="dialog" data-fit={props.fit ? true : undefined} data-size={props.size || "normal"}>
+    <div
+      data-component="dialog"
+      data-fit={props.fit ? true : undefined}
+      data-size={props.size || "normal"}
+      data-transition={props.transition ? true : undefined}
+    >
       <div data-slot="dialog-container">
         <Kobalte.Content
           data-slot="dialog-content"