fix: Add missing animations to Dialog and Popover (#39)

* fix animations for dialog and popover * remove not used classes
stefan-karger · Nov 13, 2023 · 4eca85e · 4eca85e
1 parent 79722ea
commit 4eca85e
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/apps/docs/src/registry/ui/dialog.tsx b/apps/docs/src/registry/ui/dialog.tsx
@@ -29,7 +29,7 @@ const DialogOverlay: Component<DialogPrimitive.DialogOverlayProps> = (props) =>
   return (
     <DialogPrimitive.Overlay
       class={cn(
-        "bg-background/80 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-50 backdrop-blur-sm transition-all duration-100",
+        "bg-background/80 data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm",
         props.class
       )}
       {...rest}
@@ -44,13 +44,13 @@ const DialogContent: Component<DialogPrimitive.DialogContentProps> = (props) =>
       <DialogOverlay />
       <DialogPrimitive.Content
         class={cn(
-          "bg-background animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-50 grid w-full gap-4 rounded-b-lg border p-6 shadow-lg sm:max-w-lg sm:rounded-lg",
+          "bg-background data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%] data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
           props.class
         )}
         {...rest}
       >
         {props.children}
-        <DialogPrimitive.CloseButton class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+        <DialogPrimitive.CloseButton class="ring-offset-background focus:ring-ring data-[expanded]:bg-accent data-[expanded]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
           <TbX class="h-4 w-4" />
           <span class="sr-only">Close</span>
         </DialogPrimitive.CloseButton>

diff --git a/apps/docs/src/registry/ui/popover.tsx b/apps/docs/src/registry/ui/popover.tsx
@@ -1,4 +1,4 @@
-import type { Component} from "solid-js";
+import type { Component } from "solid-js"
 import { splitProps } from "solid-js"
 
 import { Popover as PopoverPrimitive } from "@kobalte/core"
@@ -17,7 +17,7 @@ const PopoverContent: Component<PopoverPrimitive.PopoverContentProps> = (props)
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Content
         class={cn(
-          "bg-popover text-popover-foreground animate-in z-50 w-72 origin-[var(--kb-popover-content-transform-origin)] rounded-md border p-4 shadow-md outline-none",
+          "bg-popover text-popover-foreground data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 z-50 w-72 origin-[var(--kb-popover-content-transform-origin)] rounded-md border p-4 shadow-md outline-none",
           props.class
         )}
         {...rest}