fix: modal animations, new fade animation (#505)

* feat: new fade animation for dialogs

* feat: remove y translate from animation

* fix: test update

* fix: circular dependency

src/components/BottomSheetModal.tsx

@@ -3,9 +3,9 @@ import { StyledXButton } from 'icons'
 import { forwardRef, PropsWithChildren, useState } from 'react'
 import { createPortal } from 'react-dom'
 import styled, { keyframes } from 'styled-components/macro'
-import { AnimationSpeed } from 'theme'
+import { AnimationSpeed, SlideAnimationType } from 'theme'
 
-import Dialog, { Header, Modal, Provider as DialogProvider, SlideAnimationType } from './Dialog'
+import Dialog, { Header, Modal, Provider as DialogProvider } from './Dialog'
 
 const slideInBottom = keyframes`
   from {

src/components/Dialog.tsx

@@ -8,7 +8,16 @@ import ms from 'ms.macro'
 import { createContext, ReactElement, ReactNode, useCallback, useContext, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import styled, { css, keyframes } from 'styled-components/macro'
-import { AnimationSpeed, Color, Layer, Provider as ThemeProvider, ThemedText, TransitionDuration } from 'theme'
+import {
+  AnimationSpeed,
+  Color,
+  fadeAnimationCss,
+  Layer,
+  Provider as ThemeProvider,
+  SlideAnimationType,
+  ThemedText,
+  TransitionDuration,
+} from 'theme'
 import { useUnmountingAnimation } from 'utils/animations'
 
 import { PopoverBoundaryProvider } from './Popover'
@@ -37,18 +46,6 @@ export enum DialogAnimationType {
   NONE = 'none',
 }
 
-export enum SlideAnimationType {
-  /** Used when the Dialog is closing. */
-  CLOSING = 'closing',
-  /**
-   * Used when the Dialog is paging to another Dialog screen.
-   * Paging occurs when multiple screens are sequenced in the Dialog, so that an action that closes
-   * one will simultaneously open the next. Special-casing paging animations can make the user feel
-   * like they are not leaving the Dialog, despite the initial screen closing.
-   */
-  PAGING = 'paging',
-}
-
 const Context = createContext({
   element: null as HTMLElement | null,
   options: {} as DialogOptions | undefined,
@@ -177,18 +174,6 @@ const slideOutRight = keyframes`
   }
 `
 
-const fadeIn = keyframes`
-  from {
-    transform: translateY(40px) scale(0.9);
-  }
-`
-
-const fadeOut = keyframes`
-  to {
-    transform: translateY(40px) scale(0.9);
-  }
-`
-
 const HiddenWrapper = styled.div<{ hideOverflow?: boolean; constrain?: boolean }>`
   border-radius: ${({ theme }) => theme.borderRadius.large}em;
   height: ${({ constrain }) => (constrain ? 'fit-content' : '100%')};
@@ -215,13 +200,6 @@ const slideAnimationCss = css`
   }
 `
 
-const fadeAnimationCss = css`
-  animation: ${fadeIn} ${AnimationSpeed.Fast} ease-in-out;
-  &.${SlideAnimationType.CLOSING} {
-    animation: ${fadeOut} ${AnimationSpeed.Fast} ease-in-out;
-  }
-`
-
 const EMPTY_CSS = css``
 
 const getAnimation = (animationType?: DialogAnimationType) => {
@@ -236,17 +214,12 @@ const getAnimation = (animationType?: DialogAnimationType) => {
   }
 }
 
-const AnimationWrapper = styled.div<{ animationType?: DialogAnimationType }>`
-  ${Modal} {
-    ${({ animationType }) => getAnimation(animationType)}
-  }
-`
-
-const FullScreenWrapper = styled.div<{ enabled?: boolean }>`
-  ${({ enabled }) =>
+const FullScreenWrapper = styled.div<{ enabled?: boolean; fadeAnimation?: boolean }>`
+  ${({ enabled, fadeAnimation }) =>
     enabled &&
     css`
       align-items: center;
+      ${fadeAnimation ? fadeAnimationCss : ''}
       background-color: ${({ theme }) => theme.scrim};
       display: flex;
       height: 100%;
@@ -255,6 +228,7 @@ const FullScreenWrapper = styled.div<{ enabled?: boolean }>`
       position: fixed;
       top: 0;
       width: 100%;
+
       z-index: ${Layer.DIALOG};
 
       ${HiddenWrapper} {
@@ -264,6 +238,12 @@ const FullScreenWrapper = styled.div<{ enabled?: boolean }>`
     `}
 `
 
+const AnimationWrapper = styled.div<{ animationType?: DialogAnimationType }>`
+  ${Modal} {
+    ${({ animationType }) => getAnimation(animationType)}
+  }
+`
+
 // Accounts for any animation lag
 const PopoverAnimationUpdateDelay = ms`100`
 
@@ -301,6 +281,7 @@ export default function Dialog({ color, children, onClose, forceContain }: Dialo
 
   const skipUnmountAnimation = context.options?.animationType === DialogAnimationType.NONE
   const modal = useRef<HTMLDivElement>(null)
+  const fullScreenWrapperRef = useRef<HTMLDivElement>(null)
   useUnmountingAnimation(
     popoverRef,
     () => {
@@ -320,7 +301,7 @@ export default function Dialog({ color, children, onClose, forceContain }: Dialo
           return (mountPoint?.childElementCount ?? 0) > 1 ? SlideAnimationType.PAGING : SlideAnimationType.CLOSING
       }
     },
-    modal,
+    [fullScreenWrapperRef, modal],
     skipUnmountAnimation
   )
 
@@ -332,7 +313,12 @@ export default function Dialog({ color, children, onClose, forceContain }: Dialo
       <ThemeProvider>
         <PopoverBoundaryProvider value={popoverRef.current} updateTrigger={updatePopover}>
           <div ref={popoverRef}>
-            <FullScreenWrapper enabled={pageCentered} onClick={closeOnBackgroundClick}>
+            <FullScreenWrapper
+              enabled={pageCentered}
+              fadeAnimation={context.options?.animationType === DialogAnimationType.FADE}
+              onClick={closeOnBackgroundClick}
+              ref={fullScreenWrapperRef}
+            >
               <HiddenWrapper constrain={pageCentered} hideOverflow={!pageCentered}>
                 <AnimationWrapper animationType={context.options?.animationType}>
                   <OnCloseContext.Provider value={onClose}>

src/components/__snapshots__/Header.test.tsx.snap

@@ -32,7 +32,7 @@ Object {
                 class="Popover__Reference-sc-1liex6z-1 dFwFDV"
               >
                 <button
-                  class="Button__BaseButton-sc-1soikk5-0 Button__transparentButton-sc-1soikk5-2 Button__StyledIconButton-sc-1soikk5-3 gleKKe jBWboA jwaziW Settings__SettingsButton-sc-1hvqnx5-1 evHSmT"
+                  class="Button__BaseButton-sc-1soikk5-0 Button__transparentButton-sc-1soikk5-2 Button__StyledIconButton-sc-1soikk5-3 gleKKe jBWboA jwaziW Settings__SettingsButton-sc-1hvqnx5-1 ewOqAq"
                   data-testid="settings-button"
                 >
                   <svg
@@ -59,7 +59,7 @@ Object {
                 </button>
               </div>
               <div
-                class="Popover__PopoverContainer-sc-1liex6z-0 bSKTJc"
+                class="Popover__PopoverContainer-sc-1liex6z-0 koqvVY"
                 style="position: absolute; left: 0px; top: 0px;"
               >
                 <div
@@ -139,7 +139,7 @@ Object {
                         </div>
                       </div>
                       <div
-                        class="Column-sc-1ul9eki-0 Expando__ExpandoColumn-sc-yzkwmi-4 jgGrBm jYVfac"
+                        class="Column-sc-1ul9eki-0 Expando__ExpandoColumn-sc-yzkwmi-4 jgGrBm eJCkeI"
                       >
                         <div
                           class="Column-sc-1ul9eki-0 Expando__InnerColumn-sc-yzkwmi-5 Expando___StyledInnerColumn2-sc-yzkwmi-6 iSonrV NVvmR gyFZzL"
@@ -287,7 +287,7 @@ Object {
                         </div>
                       </div>
                       <div
-                        class="Column-sc-1ul9eki-0 Expando__ExpandoColumn-sc-yzkwmi-4 jgGrBm jYVfac"
+                        class="Column-sc-1ul9eki-0 Expando__ExpandoColumn-sc-yzkwmi-4 jgGrBm eJCkeI"
                       >
                         <div
                           class="Column-sc-1ul9eki-0 Expando__InnerColumn-sc-yzkwmi-5 Expando___StyledInnerColumn2-sc-yzkwmi-6 iSonrV NNzpo gyFZzL"
@@ -323,7 +323,7 @@ Object {
                     </div>
                   </div>
                   <div
-                    class="Popover__PopoverContainer-sc-1liex6z-0 bSKTJc"
+                    class="Popover__PopoverContainer-sc-1liex6z-0 koqvVY"
                     style="position: absolute; left: 0px; top: 0px;"
                   >
                     <div
@@ -337,7 +337,7 @@ Object {
                     />
                   </div>
                   <div
-                    class="Popover__PopoverContainer-sc-1liex6z-0 bSKTJc"
+                    class="Popover__PopoverContainer-sc-1liex6z-0 koqvVY"
                     style="position: absolute; left: 0px; top: 0px;"
                   >
                     <div
@@ -386,7 +386,7 @@ Object {
               class="Popover__Reference-sc-1liex6z-1 dFwFDV"
             >
               <button
-                class="Button__BaseButton-sc-1soikk5-0 Button__transparentButton-sc-1soikk5-2 Button__StyledIconButton-sc-1soikk5-3 gleKKe jBWboA jwaziW Settings__SettingsButton-sc-1hvqnx5-1 evHSmT"
+                class="Button__BaseButton-sc-1soikk5-0 Button__transparentButton-sc-1soikk5-2 Button__StyledIconButton-sc-1soikk5-3 gleKKe jBWboA jwaziW Settings__SettingsButton-sc-1hvqnx5-1 ewOqAq"
                 data-testid="settings-button"
               >
                 <svg
@@ -413,7 +413,7 @@ Object {
               </button>
             </div>
             <div
-              class="Popover__PopoverContainer-sc-1liex6z-0 bSKTJc"
+              class="Popover__PopoverContainer-sc-1liex6z-0 koqvVY"
               style="position: absolute; left: 0px; top: 0px;"
             >
               <div
@@ -493,7 +493,7 @@ Object {
                       </div>
                     </div>
                     <div
-                      class="Column-sc-1ul9eki-0 Expando__ExpandoColumn-sc-yzkwmi-4 jgGrBm jYVfac"
+                      class="Column-sc-1ul9eki-0 Expando__ExpandoColumn-sc-yzkwmi-4 jgGrBm eJCkeI"
                     >
                       <div
                         class="Column-sc-1ul9eki-0 Expando__InnerColumn-sc-yzkwmi-5 Expando___StyledInnerColumn2-sc-yzkwmi-6 iSonrV NVvmR gyFZzL"
@@ -641,7 +641,7 @@ Object {
                       </div>
                     </div>
                     <div
-                      class="Column-sc-1ul9eki-0 Expando__ExpandoColumn-sc-yzkwmi-4 jgGrBm jYVfac"
+                      class="Column-sc-1ul9eki-0 Expando__ExpandoColumn-sc-yzkwmi-4 jgGrBm eJCkeI"
                     >
                       <div
                         class="Column-sc-1ul9eki-0 Expando__InnerColumn-sc-yzkwmi-5 Expando___StyledInnerColumn2-sc-yzkwmi-6 iSonrV NNzpo gyFZzL"
@@ -677,7 +677,7 @@ Object {
                   </div>
                 </div>
                 <div
-                  class="Popover__PopoverContainer-sc-1liex6z-0 bSKTJc"
+                  class="Popover__PopoverContainer-sc-1liex6z-0 koqvVY"
                   style="position: absolute; left: 0px; top: 0px;"
                 >
                   <div
@@ -691,7 +691,7 @@ Object {
                   />
                 </div>
                 <div
-                  class="Popover__PopoverContainer-sc-1liex6z-0 bSKTJc"
+                  class="Popover__PopoverContainer-sc-1liex6z-0 koqvVY"
                   style="position: absolute; left: 0px; top: 0px;"
                 >
                   <div

src/theme/animations.ts

@@ -1,6 +1,8 @@
+import { css, keyframes } from 'styled-components/macro'
+
 export enum TransitionDuration {
   Fast = 125,
-  Medium = 250,
+  Medium = 200,
   Slow = 250,
 }
 
@@ -9,3 +11,40 @@ export const AnimationSpeed = {
   Medium: `${TransitionDuration.Medium}ms`,
   Slow: `${TransitionDuration.Slow}ms`,
 }
+
+export enum SlideAnimationType {
+  /** Used when the Dialog is closing. */
+  CLOSING = 'closing',
+  /**
+   * Used when the Dialog is paging to another Dialog screen.
+   * Paging occurs when multiple screens are sequenced in the Dialog, so that an action that closes
+   * one will simultaneously open the next. Special-casing paging animations can make the user feel
+   * like they are not leaving the Dialog, despite the initial screen closing.
+   */
+  PAGING = 'paging',
+}
+
+export const fadeIn = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`
+
+export const fadeOut = keyframes`
+  to {
+    opacity: 0;
+  }
+  from {
+    opacity: 1;
+  }
+`
+
+export const fadeAnimationCss = css`
+  animation: ${fadeIn} ${AnimationSpeed.Medium} ease-in-out;
+  &.${SlideAnimationType.CLOSING} {
+    animation: ${fadeOut} ${AnimationSpeed.Medium} ease-in-out;
+  }
+`

src/utils/animations.ts

@@ -14,27 +14,36 @@ export function isAnimating(node?: Animatable | Document) {
  * Note that getAnimatingClass will be called when the node would normally begin unmounting.
  *
  * If the animation should be applied to an element that is not the root node of the removed subtree,
- * pass that element as the animatedElement parameter.
+ * pass that element in the animatedElements array.
+ *
+ * Using the animatedElements array, you can apply exit animations to multiple elements at once.
+ * Currently this only supports using the same className for all the elements, and uses
+ * the animation of the first element in the array to determine when to unmount the node.
  */
 export function useUnmountingAnimation(
   node: RefObject<HTMLElement>,
   getAnimatingClass: () => string,
-  animatedElement?: RefObject<HTMLElement>,
+  animatedElements?: RefObject<HTMLElement>[],
   skip = false
 ) {
   useEffect(() => {
     const current = node.current
-    const animated = animatedElement?.current ?? current
+    const animated = animatedElements?.map((element) => element.current) ?? [current]
     const parent = current?.parentElement
     const removeChild = parent?.removeChild
     if (!(parent && removeChild) || skip) return
 
     parent.removeChild = function <T extends Node>(child: T) {
       if ((child as Node) === current && animated) {
-        animated.classList.add(getAnimatingClass())
-        if (isAnimating(animated)) {
-          animated.addEventListener('animationend', () => {
-            removeChild.call(parent, child)
+        animated.forEach((element) => element?.classList.add(getAnimatingClass()))
+        const animating = animated.find((element) => isAnimating(element ?? undefined))
+        if (animating) {
+          animating?.addEventListener('animationend', (x) => {
+            // This check is needed because the animationend event will fire for all animations on the
+            // element or its children.
+            if (x.target === animating) {
+              removeChild.call(parent, child)
+            }
           })
         } else {
           removeChild.call(parent, child)
@@ -47,5 +56,5 @@ export function useUnmountingAnimation(
     return () => {
       parent.removeChild = removeChild
     }
-  }, [animatedElement, getAnimatingClass, node, skip])
+  }, [animatedElements, getAnimatingClass, node, skip])
 }