From 94e73c0302f7b64369c79c002c3582be7931546f Mon Sep 17 00:00:00 2001
From: Mathew Morris <hello@mathewmorris.com>
Date: Wed, 8 Jan 2020 13:01:11 -0600
Subject: [PATCH] feat(Modal): Only renders modal in DOM when visible (#95)

---
 src/Modal/Modal.js | 34 ++++++++++++++--------------------
 1 file changed, 14 insertions(+), 20 deletions(-)

diff --git a/src/Modal/Modal.js b/src/Modal/Modal.js
index 178decd..f08b928 100644
--- a/src/Modal/Modal.js
+++ b/src/Modal/Modal.js
@@ -6,8 +6,8 @@ import { Transition } from 'react-transition-group';
 import { FocusOn } from 'react-focus-on';
 import Portal from '../Portal';
 import Flex from '../Flex';
-import Box from '../Box';
 import Icon from '../Icon';
+import Button from '../Button';
 import { createComponent, themeGet } from '../utils';
 
 const ModalContext = createContext({});
@@ -103,7 +103,7 @@ export function Modal({ children, title, animationDuration, showClose, onClose,
   return (
     <ModalContext.Provider value={{ handleClose }}>
       <Portal>
-        <Transition in={isOpen} timeout={animationDuration} onEntering={scrollToTop}>
+        <Transition in={isOpen} timeout={animationDuration} onEntering={scrollToTop} mountOnEnter unmountOnExit appear>
           {state => (
             <FocusOn onEscapeKey={handleClose} enabled={isOpen}>
               <Backdrop ref={modalRef} transitionState={state} onClick={handleBackdropClick}>
@@ -185,27 +185,21 @@ Modal.Header = ({ title, children, showClose = true }) => {
     <ModalHeader>
       <ModalHeaderInner>
         <Flex alignItems="center">
-          {title && (
-            <Modal.Title role="heading" tabIndex="0">
-              {title}
-            </Modal.Title>
-          )}
+          {title && <Modal.Title role="heading">{title}</Modal.Title>}
           {children}
 
           {showClose && (
-            <Box ml="auto">
-              <Icon
-                name="close"
-                color="greyDarkest"
-                style={{ cursor: 'pointer' }}
-                size={24}
-                onClick={handleClose}
-                onKeyDown={handleKeyDown}
-                role="button"
-                aria-label="Close Modal"
-                tabIndex="0"
-              />
-            </Box>
+            <Button
+              variant="grey"
+              size="sm"
+              style={{ marginLeft: 'auto', border: 'none' }}
+              onClick={handleClose}
+              onKeyDown={handleKeyDown}
+              aria-label="Close Modal"
+              type="button"
+              tabIndex="-1">
+              <Icon name="close" color="greyDarkest" size={24} />
+            </Button>
           )}
         </Flex>
       </ModalHeaderInner>