fix: popover, datepicker and combobox animations updated

strapi · Aug 8, 2024 · 72a2e07 · 72a2e07
1 parent f0eff99
commit 72a2e07
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 7 deletions.
diff --git 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
@@ -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
@@ -61,23 +61,23 @@ 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};
       }
     }
 
     &[data-state='closed'] {
       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};
       }
     }
   }