fix: prevent animation on mount

Author: Adzouz

docs/stories/04-components/Drawer.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { Button, Drawer, Field, Flex, Typography } from '@strapi/design-system';
+import { Button, Drawer, Field, Flex } from '@strapi/design-system';
 import { outdent } from 'outdent';
 
 interface DrawerArgs
@@ -96,34 +96,10 @@ const meta: Meta<DrawerArgs> = {
             <Drawer.Title>Drawer title</Drawer.Title>
           </Drawer.Header>
           <Drawer.Body>
-            <Typography>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla molestie odio dui. Cras egestas ultrices
-              pulvinar. Cras in pellentesque neque. Vestibulum imperdiet ex vitae felis lobortis, sed facilisis ligula
-              laoreet. Proin iaculis molestie felis. Curabitur ultrices turpis nec rutrum facilisis. Suspendisse in
-              ligula in est euismod feugiat. Proin vestibulum eros massa, et accumsan justo interdum dictum. Vestibulum
-              sed varius urna. Ut pellentesque fermentum sodales. Suspendisse venenatis eros vitae lorem rutrum tempus.
-              Suspendisse diam erat, semper gravida finibus et, tincidunt a erat. Curabitur placerat imperdiet urna, sit
-              amet aliquet lorem rutrum sit amet. Aliquam et molestie nisl. Quisque at nisl et eros sollicitudin blandit
-              bibendum ac augue. Quisque nec facilisis tortor. Nulla ex urna, scelerisque ultricies leo eget, iaculis
-              laoreet ipsum. Suspendisse potenti. Sed eget porttitor lectus. Nullam in ipsum vel enim facilisis gravida.
-              Duis posuere porttitor erat eu maximus. Morbi viverra tempus ante. Phasellus gravida ligula vel elit
-              lacinia, ut finibus urna interdum. In cursus rhoncus accumsan. Cras at mattis massa. Mauris tempor ipsum
-              quam. Integer augue eros, accumsan in ante nec, tincidunt ultrices nisl. Integer ut enim enim. Vivamus
-              posuere metus et nibh pharetra, at bibendum dolor porttitor. Fusce iaculis eleifend lectus, ut rutrum
-              sapien auctor et. In vitae risus lacus. Quisque ex mauris, venenatis vel nisi in, dictum suscipit tortor.
-              Aliquam non justo cursus, dictum libero eget, viverra velit. Sed velit nisi, rutrum ut tempor et, ornare
-              sit amet risus. Mauris ornare eleifend justo et viverra. Morbi feugiat nulla vitae sodales auctor. Donec
-              laoreet quam nibh, vel mattis ligula venenatis et. Ut vel tempor eros. Suspendisse at est scelerisque,
-              rutrum mi non, congue enim. Ut laoreet feugiat ante non lobortis. Vivamus convallis libero condimentum
-              nisl pellentesque, quis feugiat nunc suscipit. Maecenas laoreet dui nec nisi placerat tincidunt. Integer
-              elementum, mauris eu suscipit rutrum, lectus sapien porttitor odio, a egestas velit nibh in eros.
-              Vestibulum eu quam eu lorem bibendum maximus. Sed ac commodo sapien. Suspendisse congue lacus id finibus
-              auctor. Cras eu placerat leo. Pellentesque ut elit bibendum, auctor massa eget, mollis lacus. In porttitor
-              semper ante, sed gravida metus porta id. In scelerisque neque non laoreet faucibus. Aenean molestie
-              pellentesque leo quis pharetra. Nam sit amet dictum lacus. Fusce eget condimentum justo. Integer lacus
-              lectus, sagittis non ultrices sit amet, hendrerit ac mi. Quisque non laoreet erat. Mauris nec nulla erat.
-              Suspendisse potenti.
-            </Typography>
+            <Field.Root name="example">
+              <Field.Label>Example field</Field.Label>
+              <Field.Input placeholder="Type something…" />
+            </Field.Root>
           </Drawer.Body>
           <Drawer.Footer>
             <Drawer.Close>

packages/design-system/src/components/Drawer/Drawer.tsx

@@ -88,6 +88,7 @@ interface DrawerContextValue {
   onOpenChange: (open: boolean) => void;
   headerVisible: boolean;
   overlayVisible: boolean;
+  wasFirstOpen: boolean;
 }
 
 const [DrawerProvider, useDrawer] = createContext<DrawerContextValue | null>('Drawer', null);
@@ -127,6 +128,13 @@ const Root = React.forwardRef<HTMLDivElement, RootProps>(
       [setOpen, onOpenChange],
     );
 
+    // Used to skip the animation on component mount when the drawer is closed but the header is visible.
+    const [wasFirstOpen, setWasFirstOpen] = React.useState(false);
+
+    React.useEffect(() => {
+      if (open) setWasFirstOpen(true);
+    }, [open]);
+
     const dialogOpen = headerVisible ? true : open ?? false;
     const isOpen = open ?? false;
     const modal = !!(isOpen && overlayVisible);
@@ -138,6 +146,7 @@ const Root = React.forwardRef<HTMLDivElement, RootProps>(
           onOpenChange={handleOpenChange}
           headerVisible={headerVisible}
           overlayVisible={overlayVisible}
+          wasFirstOpen={wasFirstOpen}
         >
           <Dialog.Root {...props} open={dialogOpen} onOpenChange={handleOpenChange} modal={modal}>
             {children}
@@ -564,7 +573,7 @@ const Body = React.forwardRef<BodyElement, BodyProps>(({ children, ...restProps
   if (!expandable) return content;
 
   return (
-    <ExpandableSection $open={open} $flex>
+    <ExpandableSection open={open} flex>
       {content}
     </ExpandableSection>
   );
@@ -620,30 +629,56 @@ const Footer = React.forwardRef<FooterElement, FooterProps>((props, forwardedRef
 
   if (!expandable) return content;
 
-  return (
-    <ExpandableSection $open={open} $flex={false}>
-      {content}
-    </ExpandableSection>
-  );
+  return <ExpandableSection open={open}>{content}</ExpandableSection>;
 });
 
 const Foot = styled<FlexComponent<'footer'>>(Flex)`
   border-top: solid 1px ${(props) => props.theme.colors.neutral150};
   flex-shrink: 0;
 `;
 
-const ExpandableSection = styled.div<{ $open: boolean; $flex?: boolean }>`
+const ExpandableSection = ({
+  open,
+  flex = false,
+  children,
+}: {
+  open: boolean;
+  flex?: boolean;
+  children: React.ReactNode;
+}) => {
+  const drawer = useDrawer('Drawer.ExpandableSection');
+  const wasFirstOpen = drawer?.wasFirstOpen ?? false;
+
+  // Before the first opening, the animation should be skipped to prevent it from happening on component mount.
+  const skipAnimation = !wasFirstOpen && !open;
+
+  return (
+    <ExpandableSectionImpl $open={open} $flex={flex} $skipAnimation={skipAnimation}>
+      {children}
+    </ExpandableSectionImpl>
+  );
+};
+
+const ExpandableSectionImpl = styled.div<{
+  $open: boolean;
+  $flex?: boolean;
+  $skipAnimation?: boolean;
+}>`
   overflow: hidden;
   display: flex;
   flex-direction: column;
   ${(props) => (props.$flex ? 'flex: 1; min-height: 0;' : 'flex-shrink: 0;')}
   max-height: ${(props) => (props.$open ? '100vh' : '0')};
+  opacity: ${(props) => (props.$open ? 1 : 0)};
 
   @media (prefers-reduced-motion: no-preference) {
-    animation: ${({ $open }) => ($open ? OPEN_DRAWER_ANIMATION : CLOSE_DRAWER_ANIMATION)}
-      ${({ $open, theme }) =>
-        $open ? theme.motion.timings[CLOSING_ANIMATION_DURATION] : theme.motion.timings[OPENING_ANIMATION_DURATION]}
-      ${(p) => p.theme.motion.easings.authenticMotion};
+    ${({ $skipAnimation, $open, theme }) =>
+      !$skipAnimation &&
+      css`
+        animation: ${$open ? OPEN_DRAWER_ANIMATION : CLOSE_DRAWER_ANIMATION}
+          ${$open ? theme.motion.timings[OPENING_ANIMATION_DURATION] : theme.motion.timings[CLOSING_ANIMATION_DURATION]}
+          ${theme.motion.easings.authenticMotion};
+      `}
   }
 `;