ToastProvider: update to allow animations to come in from the top (#1450

) * ToastProvider: update to allow animations to come in from the top * ToastProvider: update logic for using top/bottom css * Animation: Add 2 new options SlideInTop and SlideOutTop * ToastProvider: update unit test
priceline · Feb 8, 2024 · a49e734 · a49e734
1 parent 3a97f95
commit a49e734
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 2 deletions.
diff --git a/common/changes/pcln-design-system/toast-provider-top-animation_2024-02-07-21-23.json b/common/changes/pcln-design-system/toast-provider-top-animation_2024-02-07-21-23.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "ToastProvider: update to allow animations to come in from the top",
+      "type": "minor"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}
diff --git a/packages/core/src/Animate/Animate.tsx b/packages/core/src/Animate/Animate.tsx
@@ -31,6 +31,8 @@ export type MotionVariant =
   | 'scaleOnTap'
   | 'slideOutLeft'
   | 'slideInLeft'
+  | 'slideInTop'
+  | 'slideOutTop'
 
 /**
  * @public
@@ -79,6 +81,14 @@ export const MotionVariants: Record<MotionVariant, HTMLMotionProps<'div'>> = {
     initial: { opacity: 0, x: '-100%' },
     animate: { opacity: 1, x: 0 },
   },
+  slideInTop: {
+    initial: { opacity: 0, y: '-100%' },
+    animate: { opacity: 1, y: 0 },
+  },
+  slideOutTop: {
+    initial: { opacity: 1, y: 0 },
+    animate: { opacity: 0, y: '-100%' },
+  },
 }
 
 /**

diff --git a/packages/core/src/ToastProvider/ToastProvider.spec.tsx b/packages/core/src/ToastProvider/ToastProvider.spec.tsx
@@ -66,7 +66,7 @@ describe('ToastProvider', () => {
 
   it('renders a custom toast', () => {
     render(
-      <ToastProvider enterAnimation='scaleFromCenter' exitAnimation='expandDown'>
+      <ToastProvider enterAnimation='scaleFromCenter' exitAnimation='expandDown' top={20}>
         <MockToastChildren variation='fill' />
       </ToastProvider>
     )

diff --git a/packages/core/src/ToastProvider/ToastProvider.stories.tsx b/packages/core/src/ToastProvider/ToastProvider.stories.tsx
@@ -24,3 +24,14 @@ const Template = (args) => (
 )
 
 export const _ToastProvider = Template.bind({})
+
+export const TopAnimation = (args) => (
+  <ToastProvider
+    domRootId='ToastProviderRoot'
+    top={20}
+    enterAnimation='slideInTop'
+    exitAnimation='slideOutTop'
+  >
+    <MockToastChildren variation={args.variation} />
+  </ToastProvider>
+)
diff --git a/packages/core/src/ToastProvider/ToastProvider.tsx b/packages/core/src/ToastProvider/ToastProvider.tsx
@@ -49,6 +49,8 @@ export type ToastProviderProps = {
   lifespan?: number
   maxToasts?: number
   theme: unknown
+  top?: number
+  bottom?: number
 }
 
 let id = 0
@@ -61,6 +63,8 @@ function _ToastProvider({
   lifespan,
   maxToasts = 3,
   theme,
+  bottom = 20,
+  top,
 }: ToastProviderProps) {
   const [toasts, setToasts] = useState<ToastOptions[]>([])
 
@@ -91,7 +95,7 @@ function _ToastProvider({
       {children}
       {createPortal(
         <ThemeProvider theme={theme}>
-          <ClickthroughAbsolute bottom={20} width='100%'>
+          <ClickthroughAbsolute top={top ? top : undefined} bottom={top ? undefined : bottom} width='100%'>
             <Flex justifyContent='center' width='100%'>
               <Flex flexDirection='column-reverse' justifyContent='center' minWidth='300px'>
                 {toastsToRender.map((toast) => {