From 72a2e07245fa1c126a30e2b47888d793c861b4c8 Mon Sep 17 00:00:00 2001
From: Madhuri Sandbhor <madhuri.sandbhor@strapi.io>
Date: Thu, 8 Aug 2024 14:04:00 +0200
Subject: [PATCH] fix: popover, datepicker and combobox  animations updated

---
 .../src/components/Combobox/Combobox.tsx      |  4 ++--
 .../src/components/DatePicker/DatePicker.tsx  | 20 ++++++++++++++++++-
 .../src/components/Popover/Popover.tsx        |  8 ++++----
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/packages/design-system/src/components/Combobox/Combobox.tsx b/packages/design-system/src/components/Combobox/Combobox.tsx
index b49be3db9..5952c7e82 100644
--- a/packages/design-system/src/components/Combobox/Combobox.tsx
+++ b/packages/design-system/src/components/Combobox/Combobox.tsx
@@ -394,11 +394,11 @@ const Content = styled(ComboboxPrimitive.Content)`
       animation-timing-function: ${(props) => props.theme.motion.easings.authenticMotion};
 
       &[data-side='top'] {
-        animation-name: ${ANIMATIONS.slideDownIn};
+        animation-name: ${ANIMATIONS.slideUpIn};
       }
 
       &[data-side='bottom'] {
-        animation-name: ${ANIMATIONS.slideUpIn};
+        animation-name: ${ANIMATIONS.slideDownIn};
       }
     }
   }
diff --git a/packages/design-system/src/components/DatePicker/DatePicker.tsx b/packages/design-system/src/components/DatePicker/DatePicker.tsx
index 7e3b9291b..99f5f0638 100644
--- a/packages/design-system/src/components/DatePicker/DatePicker.tsx
+++ b/packages/design-system/src/components/DatePicker/DatePicker.tsx
@@ -33,6 +33,7 @@ import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect
 import { Box, BoxComponent, BoxProps } from '../../primitives/Box';
 import { Flex, FlexComponent, FlexProps } from '../../primitives/Flex';
 import { Typography } from '../../primitives/Typography';
+import { ANIMATIONS } from '../../styles/motion';
 import { inputFocusStyle } from '../../themes';
 import { useDesignSystem } from '../../utilities/DesignSystemProvider';
 import { DismissibleLayer, DismissibleLayerProps } from '../../utilities/DismissibleLayer';
@@ -813,7 +814,7 @@ const DatePickerContentImpl = React.forwardRef<DatePickerContentImplElement, Con
     const { label = 'Choose date', ...restProps } = props;
     const { onOpenChange, ...context } = useDatePickerContext(CONTENT_IMPL_NAME);
 
-    const { x, y, refs, strategy } = useFloating({
+    const { x, y, refs, strategy, placement } = useFloating({
       strategy: 'fixed',
       placement: 'bottom-start',
       middleware: [
@@ -866,6 +867,7 @@ const DatePickerContentImpl = React.forwardRef<DatePickerContentImplElement, Con
           <ContentElement
             ref={composedRefs}
             data-state={context.open ? 'open' : 'closed'}
+            data-side={placement.includes('top') ? 'top' : 'bottom'}
             onContextMenu={(event) => event.preventDefault()}
             id={context.contentId}
             role="dialog"
@@ -891,6 +893,22 @@ const ContentElement = styled<BoxComponent>(Box)`
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
   z-index: ${({ theme }) => theme.zIndices.popover};
   border: 1px solid ${({ theme }) => theme.colors.neutral150};
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation-duration: ${(props) => props.theme.motion.timings['200']};
+
+    &[data-state='open'] {
+      animation-timing-function: ${(props) => props.theme.motion.easings.authenticMotion};
+
+      &[data-side='top'] {
+        animation-name: ${ANIMATIONS.slideUpIn};
+      }
+
+      &[data-side='bottom'] {
+        animation-name: ${ANIMATIONS.slideDownIn};
+      }
+    }
+  }
 `;
 
 /* -------------------------------------------------------------------------------------------------
diff --git a/packages/design-system/src/components/Popover/Popover.tsx b/packages/design-system/src/components/Popover/Popover.tsx
index b9dac0fc7..d62aa21b0 100644
--- a/packages/design-system/src/components/Popover/Popover.tsx
+++ b/packages/design-system/src/components/Popover/Popover.tsx
@@ -61,11 +61,11 @@ const PopoverContent = styled(Popover.Content)`
       animation-timing-function: ${(props) => props.theme.motion.easings.authenticMotion};
 
       &[data-side='top'] {
-        animation-name: ${ANIMATIONS.slideDownIn};
+        animation-name: ${ANIMATIONS.slideUpIn};
       }
 
       &[data-side='bottom'] {
-        animation-name: ${ANIMATIONS.slideUpIn};
+        animation-name: ${ANIMATIONS.slideDownIn};
       }
     }
 
@@ -73,11 +73,11 @@ const PopoverContent = styled(Popover.Content)`
       animation-timing-function: ${(props) => props.theme.motion.easings.easeOutQuad};
 
       &[data-side='top'] {
-        animation-name: ${ANIMATIONS.slideDownOut};
+        animation-name: ${ANIMATIONS.slideUpOut};
       }
 
       &[data-side='bottom'] {
-        animation-name: ${ANIMATIONS.slideUpOut};
+        animation-name: ${ANIMATIONS.slideDownOut};
       }
     }
   }