feat:(modal): Added "slideInTop" and "slideInLeft" motion preset (cha…

…kra-ui#7962)
isongwei · Aug 30, 2023 · eb477b6 · eb477b6
1 parent 7d348da
commit eb477b6
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 2 deletions.
diff --git a/.changeset/nervous-moles-sit.md b/.changeset/nervous-moles-sit.md
@@ -0,0 +1,6 @@
+---
+"@chakra-ui/modal": patch
+---
+
+Added "slideInTop" and "slideInLeft" options in motionPreset prop in modal
+component
diff --git a/packages/components/modal/src/modal-transition.tsx b/packages/components/modal/src/modal-transition.tsx
@@ -6,7 +6,13 @@ import { forwardRef } from "react"
 export interface ModalTransitionProps
   extends Omit<HTMLMotionProps<"section">, "color" | "transition">,
     ChakraProps {
-  preset?: "slideInBottom" | "slideInRight" | "scale" | "none"
+  preset?:
+    | "slideInBottom"
+    | "slideInRight"
+    | "slideInTop"
+    | "slideInLeft"
+    | "scale"
+    | "none"
   motionProps?: HTMLMotionProps<"section">
 }
 
@@ -19,6 +25,14 @@ const transitions = {
     ...slideFadeConfig,
     custom: { offsetX: 16, reverse: true },
   },
+  slideInTop: {
+    ...slideFadeConfig,
+    custom: { offsetY: -16, reverse: true },
+  },
+  slideInLeft: {
+    ...slideFadeConfig,
+    custom: { offsetX: -16, reverse: true },
+  },
   scale: {
     ...scaleFadeConfig,
     custom: { initialScale: 0.95, reverse: true },

diff --git a/packages/components/modal/src/modal.tsx b/packages/components/modal/src/modal.tsx
@@ -79,7 +79,13 @@ interface ModalOptions extends Pick<FocusLockProps, "lockFocusAcrossFrames"> {
 
 type ScrollBehavior = "inside" | "outside"
 
-type MotionPreset = "slideInBottom" | "slideInRight" | "scale" | "none"
+type MotionPreset =
+  | "slideInBottom"
+  | "slideInRight"
+  | "slideInTop"
+  | "slideInLeft"
+  | "scale"
+  | "none"
 
 export interface ModalProps
   extends UseModalProps,