Replace react-transition-group with headlessui/react transition

react-transition-group is not actively maintained and is not fully compatible with React 17
cultureamp · Mar 22, 2021 · 5ba6ce6 · 5ba6ce6
1 parent 2a366ed
commit 5ba6ce6
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 38 deletions.
diff --git a/draft-packages/modal/KaizenDraft/Modal/Modal.elm b/draft-packages/modal/KaizenDraft/Modal/Modal.elm
@@ -241,7 +241,7 @@ viewContent (Config modalConfig) =
                     [ ( .animatingElmEnter, True ) ]
 
                 Closing_ ->
-                    [ ( .animatingElmExit, True ) ]
+                    [ ( .animatingElmLeave, True ) ]
 
                 _ ->
                     []
@@ -505,7 +505,7 @@ styles =
         { backdropLayer = "backdropLayer"
         , animatingElmEnter = "animatingElmEnter"
         , elmUnscrollable = "elmUnscrollable"
-        , animatingElmExit = "animatingElmExit"
+        , animatingElmLeave = "animatingElmLeave"
         , elmGenericModal = "elmGenericModal"
         , hide = "hide"
         }

diff --git a/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.scss b/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.scss
@@ -66,9 +66,10 @@
   z-index: $ca-z-index-modal + 1;
 }
 
-:global(.animating-enter),
-:global(.animating-appear),
+.animatingEnter,
 .animatingElmEnter {
+  transition-duration: $ca-duration-fast;
+
   .backdropLayer {
     @include ca-animation-fade(
       $duration: $ca-duration-rapid,
@@ -86,8 +87,10 @@
   }
 }
 
-:global(.animating-exit),
-.animatingElmExit {
+.aniamtingLeave,
+.animatingElmLeave {
+  transition-duration: $ca-duration-rapid;
+
   .backdropLayer {
     @include ca-animation-fade(
       $duration: $ca-duration-rapid,

diff --git a/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.spec.tsx b/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.spec.tsx
@@ -0,0 +1,14 @@
+import { cleanup, render } from "@testing-library/react"
+import * as React from "react"
+import GenericModal from "./GenericModal"
+
+afterEach(cleanup)
+
+describe("<GenericModal />", () => {
+  it("renders the provided content", () => {
+    const { getByText } = render(
+      <GenericModal isOpen={true}>Example</GenericModal>
+    )
+    expect(() => getByText("Example")).not.toThrow()
+  })
+})
diff --git a/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.tsx b/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.tsx
@@ -3,13 +3,13 @@ import { createPortal } from "react-dom"
 import FocusLock from "react-focus-lock"
 import uuid from "uuid/v4"
 import { warn } from "@kaizen/component-library/util/console"
+import { Transition } from "@headlessui/react"
 import {
   ModalAccessibleContext,
   ModalAccessibleContextType,
 } from "./ModalAccessibleContext"
 
 import styles from "./GenericModal.scss"
-const { CSSTransition } = require("react-transition-group")
 
 export interface GenericModalContainerProps {
   readonly isOpen: boolean
@@ -167,42 +167,38 @@ class GenericModal extends React.Component<GenericModalProps> {
     } = this.props
 
     return createPortal(
-      <CSSTransition
-        in={isOpen}
-        timeout={MODAL_TRANSITION_TIMEOUT}
-        classNames="animating"
+      <Transition
         appear={true}
-        unmountOnExit
+        show={isOpen}
+        enter={styles.animatingEnter}
+        leave={styles.animatingLeave}
       >
-        {/* This is not an unused div. It will receive `animating-` classes from react-transition-group */}
-        <div>
-          <FocusLock
-            disabled={focusLockDisabled}
-            returnFocus={true}
-            autoFocus={false}
+        <FocusLock
+          disabled={focusLockDisabled}
+          returnFocus={true}
+          autoFocus={false}
+        >
+          <div className={styles.backdropLayer} />
+          <div
+            className={styles.scrollLayer}
+            ref={scrollLayer => (this.scrollLayer = scrollLayer)}
+            onClick={
+              this.props.onOutsideModalClick && this.outsideModalClickHandler
+            }
           >
-            <div className={styles.backdropLayer} />
             <div
-              className={styles.scrollLayer}
-              ref={scrollLayer => (this.scrollLayer = scrollLayer)}
-              onClick={
-                this.props.onOutsideModalClick && this.outsideModalClickHandler
-              }
+              role="dialog"
+              aria-labelledby={this.props.labelledByID}
+              aria-describedby={this.props.describedByID}
+              className={styles.modalLayer}
+              ref={modalLayer => (this.modalLayer = modalLayer)}
+              data-automation-id={automationId}
             >
-              <div
-                role="dialog"
-                aria-labelledby={this.props.labelledByID}
-                aria-describedby={this.props.describedByID}
-                className={styles.modalLayer}
-                ref={modalLayer => (this.modalLayer = modalLayer)}
-                data-automation-id={automationId}
-              >
-                {children}
-              </div>
+              {children}
             </div>
-          </FocusLock>
-        </div>
-      </CSSTransition>,
+          </div>
+        </FocusLock>
+      </Transition>,
       document.body
     )
   }

diff --git a/draft-packages/modal/package.json b/draft-packages/modal/package.json
@@ -32,6 +32,7 @@
   "private": false,
   "license": "MIT",
   "dependencies": {
+    "@headlessui/react": "^0.3.1",
     "@kaizen/component-library": "^9.3.1",
     "@kaizen/deprecated-component-library-helpers": "^2.1.1",
     "@kaizen/draft-button": "^3.2.7",
@@ -42,7 +43,6 @@
     "classnames": "^2.2.6",
     "react-dom": "^16.13.1",
     "react-focus-lock": "1.19.1",
-    "react-transition-group": "^4.4.1",
     "uuid": "^3.3.2"
   },
   "devDependencies": {

diff --git a/yarn.lock b/yarn.lock
@@ -1443,6 +1443,11 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
+"@headlessui/react@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-0.3.1.tgz#62d8df3b49f7e212f81f7fa4ba3cefb8945720ec"
+  integrity sha512-GnAVXCLmDs3CFvmvYo4Iu/LqAWVIoS+bGo+eMADnbWgF8BeMX13sWMyb8eOdj7N9nqY9QA2AsMzqYdAIbbsRIw==
+
 "@icons/material@^0.2.4":
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"