From fb2a4833728c092482cb69bd7c10b9e194dc65d4 Mon Sep 17 00:00:00 2001
From: cehsu <claire@sappira.com>
Date: Wed, 1 May 2019 11:00:32 -0700
Subject: [PATCH 1/7] Lock focus in modal

---
 src/Modal/Modal.dropdownExample.js | 71 ++++++++++++++++++++++++++++++
 src/Modal/Modal.example.js         | 23 +++++++---
 src/Modal/Modal.js                 | 14 +++---
 src/Modal/Modal.mdx                | 13 +++++-
 4 files changed, 109 insertions(+), 12 deletions(-)
 create mode 100644 src/Modal/Modal.dropdownExample.js

diff --git a/src/Modal/Modal.dropdownExample.js b/src/Modal/Modal.dropdownExample.js
new file mode 100644
index 0000000..aa9a6ff
--- /dev/null
+++ b/src/Modal/Modal.dropdownExample.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import Modal from './Modal';
+import Button from '../Button';
+import Input from '../Form/Input';
+import Dropdown from '../Dropdown';
+
+export default class ModalDropdownDemo extends React.Component {
+  state = {
+    isModalOpen: false,
+    isModalTwoOpen: false,
+  };
+
+  toggle = () => {
+    this.setState({ isModalOpen: !this.state.isModalOpen, isModalTwoOpen: false });
+  };
+
+  toggleModalTwo = () => {
+    this.setState({ isModalTwoOpen: !this.state.isModalTwoOpen });
+  };
+
+  onCancel = () => {
+    this.toggle();
+
+    setTimeout(() => {
+      alert('Oh no! It has been canceled.');
+    }, 500);
+  };
+
+  render() {
+    const { body, groupId, ...props } = this.props;
+
+    return (
+      <div>
+        <Dropdown placement="0 100%" width={250} trigger={<Button variant="success">Open Dropdown</Button>}>
+          <Dropdown.Header title="Dropdown" />
+
+          <Dropdown.Body>
+            <Dropdown.SectionTitle>Section One</Dropdown.SectionTitle>
+            <Dropdown.Item onClick={this.toggle} as="button">
+              Open Modal
+            </Dropdown.Item>
+          </Dropdown.Body>
+
+          <Dropdown.Footer>Footer</Dropdown.Footer>
+        </Dropdown>
+
+        <Modal
+          groupId={`${groupId}-outer`}
+          open={this.state.isModalOpen}
+          onClose={this.toggle}
+          title="Example Dropdown Modal"
+          {...props}>
+          <Modal.Body>
+            <>
+              {body}
+              <Input autoFocus name="password" label="Password" />
+            </>
+          </Modal.Body>
+
+          <Modal.Footer>
+            <Button.Group justifyContent="flex-end">
+              <Button variant="gray" onClick={this.onCancel}>
+                Cancel
+              </Button>
+            </Button.Group>
+          </Modal.Footer>
+        </Modal>
+      </div>
+    );
+  }
+}
diff --git a/src/Modal/Modal.example.js b/src/Modal/Modal.example.js
index 2f83311..ae59b46 100644
--- a/src/Modal/Modal.example.js
+++ b/src/Modal/Modal.example.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import Modal from './Modal';
 import Button from '../Button';
-import Box from '../Box';
+import Input from '../Form/Input';
 
 export default class ModalDemo extends React.Component {
   state = {
@@ -26,17 +26,30 @@ export default class ModalDemo extends React.Component {
   };
 
   render() {
-    const { body, bodyTwo = 'Im a nested modal!', ...props } = this.props;
+    const { body, bodyTwo = 'Im a nested modal!', groupId, ...props } = this.props;
 
     return (
       <div>
         <Button onClick={this.toggle}>Open Modal</Button>
 
-        <Modal open={this.state.isModalOpen} onClose={this.toggle} title="Example Modal" {...props}>
+        <Modal
+          groupId={`${groupId}-outer`}
+          open={this.state.isModalOpen}
+          onClose={this.toggle}
+          title="Example Modal"
+          {...props}>
           <Modal.Body>
-            {body}
+            <>
+              {body}
+              <Input autoFocus name="password" label="Password" />
+            </>
 
-            <Modal open={this.state.isModalTwoOpen} onClose={this.toggleModalTwo} title="Example Modal Two" {...props}>
+            <Modal
+              groupId={`${groupId}-inner`}
+              open={this.state.isModalTwoOpen}
+              onClose={this.toggleModalTwo}
+              title="Example Modal Two"
+              {...props}>
               <Modal.Body>{bodyTwo}</Modal.Body>
 
               <Modal.Footer>
diff --git a/src/Modal/Modal.js b/src/Modal/Modal.js
index ade8f15..48b70b2 100644
--- a/src/Modal/Modal.js
+++ b/src/Modal/Modal.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { keyframes, css } from 'styled-components';
 import * as animations from 'react-animations';
 import { Transition } from 'react-transition-group';
+import FocusLock from 'react-focus-lock';
 import Portal from '../Portal';
 import Flex from '../Flex';
 import Box from '../Box';
@@ -72,7 +73,7 @@ const ModalContent = createComponent({
   `,
 });
 
-function Modal({ children, title, animationDuration, showClose, onClose, open, ...props }) {
+function Modal({ groupId, children, title, animationDuration, showClose, onClose, open, ...props }) {
   const [isOpen, setOpen] = useState(open);
 
   const handleClose = () => {
@@ -105,10 +106,12 @@ function Modal({ children, title, animationDuration, showClose, onClose, open, .
         <Transition in={isOpen} timeout={animationDuration}>
           {state => (
             <Backdrop transitionState={state} onClick={handleBackdropClick}>
-              <ModalContent transitionState={state} onClick={handleContentClick} {...props}>
-                {title && <Modal.Header title={title} showClose={showClose} />}
-                {children}
-              </ModalContent>
+              <FocusLock group={groupId} disabled={!isOpen}>
+                <ModalContent transitionState={state} onClick={handleContentClick} {...props}>
+                  {title && <Modal.Header title={title} showClose={showClose} />}
+                  {children}
+                </ModalContent>
+              </FocusLock>
             </Backdrop>
           )}
         </Transition>
@@ -118,6 +121,7 @@ function Modal({ children, title, animationDuration, showClose, onClose, open, .
 }
 
 Modal.propTypes = {
+  groupId: PropTypes.string.isRequired,
   open: PropTypes.bool,
   showClose: PropTypes.bool,
   closeOnBackdropClick: PropTypes.bool,
diff --git a/src/Modal/Modal.mdx b/src/Modal/Modal.mdx
index 56d3b5a..820b673 100644
--- a/src/Modal/Modal.mdx
+++ b/src/Modal/Modal.mdx
@@ -6,6 +6,7 @@ name: Modal
 import { Playground, PropsTable } from 'docz'
 import Modal from './Modal'
 import ModalExample from './Modal.example'
+import ModalDropdownExample from './Modal.dropdownexample'
 
 # Modal
 
@@ -19,7 +20,7 @@ Modals are a great way to add dialogs to your site for lightboxes, user notifica
 Toggle a working modal demo by clicking the button below. It will slide up and fade in from the bottom of the page.
 
 <Playground>
-  <ModalExample body="I am an example modal that displays example content to prove that I can actually do some things" maxWidth={300} />
+  <ModalExample groupId={1} body="I am an example modal that displays example content to prove that I can actually do some things" maxWidth={300} />
 </Playground>
 
 ## Handling Long Content
@@ -27,5 +28,13 @@ Toggle a working modal demo by clicking the button below. It will slide up and f
 When modals become too long for the user’s viewport or device, they scroll independent of the page itself.
 
 <Playground>
-  <ModalExample body={<div>{new Array(50).fill(null).map((_, i) => <p key={i}>I'm really long annoying content.</p>)}</div>} />
+  <ModalExample groupdId={2} body={<div>{new Array(50).fill(null).map((_, i) => <p key={i}>I'm really long annoying content.</p>)}</div>} />
+</Playground>
+
+## Handling Dropdown Triggered Content
+
+When modals are triggered by dropdowns with returnFocus set to true, modals still receive focus. 
+
+<Playground>
+  <ModalDropdownExample groupdId={3} body="I'm triggered by a dropdown" />
 </Playground>

From 956107d48c542ae2841c2f6584a55bb485c1ac92 Mon Sep 17 00:00:00 2001
From: cehsu <claire@sappira.com>
Date: Wed, 1 May 2019 14:00:55 -0700
Subject: [PATCH 2/7] PR comment: remove zombie code

---
 src/Modal/Modal.dropdownExample.js | 3 +--
 src/Modal/Modal.example.js         | 4 +---
 src/Modal/Modal.js                 | 5 ++---
 3 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/Modal/Modal.dropdownExample.js b/src/Modal/Modal.dropdownExample.js
index aa9a6ff..887744c 100644
--- a/src/Modal/Modal.dropdownExample.js
+++ b/src/Modal/Modal.dropdownExample.js
@@ -27,7 +27,7 @@ export default class ModalDropdownDemo extends React.Component {
   };
 
   render() {
-    const { body, groupId, ...props } = this.props;
+    const { body, ...props } = this.props;
 
     return (
       <div>
@@ -45,7 +45,6 @@ export default class ModalDropdownDemo extends React.Component {
         </Dropdown>
 
         <Modal
-          groupId={`${groupId}-outer`}
           open={this.state.isModalOpen}
           onClose={this.toggle}
           title="Example Dropdown Modal"
diff --git a/src/Modal/Modal.example.js b/src/Modal/Modal.example.js
index ae59b46..2d46d14 100644
--- a/src/Modal/Modal.example.js
+++ b/src/Modal/Modal.example.js
@@ -26,14 +26,13 @@ export default class ModalDemo extends React.Component {
   };
 
   render() {
-    const { body, bodyTwo = 'Im a nested modal!', groupId, ...props } = this.props;
+    const { body, bodyTwo = 'Im a nested modal!', ...props } = this.props;
 
     return (
       <div>
         <Button onClick={this.toggle}>Open Modal</Button>
 
         <Modal
-          groupId={`${groupId}-outer`}
           open={this.state.isModalOpen}
           onClose={this.toggle}
           title="Example Modal"
@@ -45,7 +44,6 @@ export default class ModalDemo extends React.Component {
             </>
 
             <Modal
-              groupId={`${groupId}-inner`}
               open={this.state.isModalTwoOpen}
               onClose={this.toggleModalTwo}
               title="Example Modal Two"
diff --git a/src/Modal/Modal.js b/src/Modal/Modal.js
index 48b70b2..da70009 100644
--- a/src/Modal/Modal.js
+++ b/src/Modal/Modal.js
@@ -73,7 +73,7 @@ const ModalContent = createComponent({
   `,
 });
 
-function Modal({ groupId, children, title, animationDuration, showClose, onClose, open, ...props }) {
+function Modal({ children, title, animationDuration, showClose, onClose, open, ...props }) {
   const [isOpen, setOpen] = useState(open);
 
   const handleClose = () => {
@@ -106,7 +106,7 @@ function Modal({ groupId, children, title, animationDuration, showClose, onClose
         <Transition in={isOpen} timeout={animationDuration}>
           {state => (
             <Backdrop transitionState={state} onClick={handleBackdropClick}>
-              <FocusLock group={groupId} disabled={!isOpen}>
+              <FocusLock disabled={!isOpen}>
                 <ModalContent transitionState={state} onClick={handleContentClick} {...props}>
                   {title && <Modal.Header title={title} showClose={showClose} />}
                   {children}
@@ -121,7 +121,6 @@ function Modal({ groupId, children, title, animationDuration, showClose, onClose
 }
 
 Modal.propTypes = {
-  groupId: PropTypes.string.isRequired,
   open: PropTypes.bool,
   showClose: PropTypes.bool,
   closeOnBackdropClick: PropTypes.bool,

From 307c6357d332b77d3a44771d10dc6d31a7aaee96 Mon Sep 17 00:00:00 2001
From: cehsu <claire@sappira.com>
Date: Wed, 1 May 2019 14:36:05 -0700
Subject: [PATCH 3/7] PR comment: fix scroll regression

---
 src/Modal/Modal.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Modal/Modal.js b/src/Modal/Modal.js
index da70009..7e06a5d 100644
--- a/src/Modal/Modal.js
+++ b/src/Modal/Modal.js
@@ -106,7 +106,7 @@ function Modal({ children, title, animationDuration, showClose, onClose, open, .
         <Transition in={isOpen} timeout={animationDuration}>
           {state => (
             <Backdrop transitionState={state} onClick={handleBackdropClick}>
-              <FocusLock disabled={!isOpen}>
+              <FocusLock lockProps={{ style: { height: '100%' } }} disabled={!isOpen}>
                 <ModalContent transitionState={state} onClick={handleContentClick} {...props}>
                   {title && <Modal.Header title={title} showClose={showClose} />}
                   {children}

From a92664b456f2799bc79eb5dec0f3945f1c0269f0 Mon Sep 17 00:00:00 2001
From: cehsu <claire@sappira.com>
Date: Thu, 2 May 2019 09:38:45 -0700
Subject: [PATCH 4/7] PR comment: remove groupId

---
 src/Modal/Modal.mdx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Modal/Modal.mdx b/src/Modal/Modal.mdx
index 820b673..f7b3bb0 100644
--- a/src/Modal/Modal.mdx
+++ b/src/Modal/Modal.mdx
@@ -20,7 +20,7 @@ Modals are a great way to add dialogs to your site for lightboxes, user notifica
 Toggle a working modal demo by clicking the button below. It will slide up and fade in from the bottom of the page.
 
 <Playground>
-  <ModalExample groupId={1} body="I am an example modal that displays example content to prove that I can actually do some things" maxWidth={300} />
+  <ModalExample body="I am an example modal that displays example content to prove that I can actually do some things" maxWidth={300} />
 </Playground>
 
 ## Handling Long Content
@@ -28,7 +28,7 @@ Toggle a working modal demo by clicking the button below. It will slide up and f
 When modals become too long for the user’s viewport or device, they scroll independent of the page itself.
 
 <Playground>
-  <ModalExample groupdId={2} body={<div>{new Array(50).fill(null).map((_, i) => <p key={i}>I'm really long annoying content.</p>)}</div>} />
+  <ModalExample body={<div>{new Array(50).fill(null).map((_, i) => <p key={i}>I'm really long annoying content.</p>)}</div>} />
 </Playground>
 
 ## Handling Dropdown Triggered Content
@@ -36,5 +36,5 @@ When modals become too long for the user’s viewport or device, they scroll ind
 When modals are triggered by dropdowns with returnFocus set to true, modals still receive focus. 
 
 <Playground>
-  <ModalDropdownExample groupdId={3} body="I'm triggered by a dropdown" />
+  <ModalDropdownExample body="I'm triggered by a dropdown" />
 </Playground>

From af2e2c4bdc4a3f5e43b2c4aa1bdb40d5dadcea46 Mon Sep 17 00:00:00 2001
From: cehsu <claire@sappira.com>
Date: Thu, 2 May 2019 09:46:13 -0700
Subject: [PATCH 5/7] Adjust lock height

---
 src/Modal/Modal.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Modal/Modal.js b/src/Modal/Modal.js
index 7e06a5d..5a931ce 100644
--- a/src/Modal/Modal.js
+++ b/src/Modal/Modal.js
@@ -106,7 +106,7 @@ function Modal({ children, title, animationDuration, showClose, onClose, open, .
         <Transition in={isOpen} timeout={animationDuration}>
           {state => (
             <Backdrop transitionState={state} onClick={handleBackdropClick}>
-              <FocusLock lockProps={{ style: { height: '100%' } }} disabled={!isOpen}>
+              <FocusLock lockProps={{ style: { maxHeight: '100%' } }} disabled={!isOpen}>
                 <ModalContent transitionState={state} onClick={handleContentClick} {...props}>
                   {title && <Modal.Header title={title} showClose={showClose} />}
                   {children}

From 4dc53ba7437948045469f559ad5b29b459a1b0e7 Mon Sep 17 00:00:00 2001
From: cehsu <claire@sappira.com>
Date: Thu, 2 May 2019 09:58:35 -0700
Subject: [PATCH 6/7] Fix placement value

---
 src/Modal/Modal.dropdownExample.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Modal/Modal.dropdownExample.js b/src/Modal/Modal.dropdownExample.js
index 887744c..7daf7b8 100644
--- a/src/Modal/Modal.dropdownExample.js
+++ b/src/Modal/Modal.dropdownExample.js
@@ -31,7 +31,7 @@ export default class ModalDropdownDemo extends React.Component {
 
     return (
       <div>
-        <Dropdown placement="0 100%" width={250} trigger={<Button variant="success">Open Dropdown</Button>}>
+        <Dropdown placement="top" width={250} trigger={<Button variant="success">Open Dropdown</Button>}>
           <Dropdown.Header title="Dropdown" />
 
           <Dropdown.Body>

From 1913100ed5e701cef50dc410dcb419204ff95f7d Mon Sep 17 00:00:00 2001
From: cehsu <claire@sappira.com>
Date: Thu, 2 May 2019 10:37:13 -0700
Subject: [PATCH 7/7] Remove dropdown example copy pasta

---
 src/Modal/Modal.dropdownExample.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/Modal/Modal.dropdownExample.js b/src/Modal/Modal.dropdownExample.js
index 7daf7b8..750ee59 100644
--- a/src/Modal/Modal.dropdownExample.js
+++ b/src/Modal/Modal.dropdownExample.js
@@ -7,15 +7,10 @@ import Dropdown from '../Dropdown';
 export default class ModalDropdownDemo extends React.Component {
   state = {
     isModalOpen: false,
-    isModalTwoOpen: false,
   };
 
   toggle = () => {
-    this.setState({ isModalOpen: !this.state.isModalOpen, isModalTwoOpen: false });
-  };
-
-  toggleModalTwo = () => {
-    this.setState({ isModalTwoOpen: !this.state.isModalTwoOpen });
+    this.setState({ isModalOpen: !this.state.isModalOpen });
   };
 
   onCancel = () => {