From 5cc1cf82ba47f87d6938066d990b2728e4879f9f Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti573@gmail.com>
Date: Wed, 19 Dec 2018 16:11:03 -0500
Subject: [PATCH] fix: addressed feedback that I didn't see until merge

---
 package.json                                  |  2 +-
 packages/modal/stories/Modal.stories.tsx      | 41 +++++++++++++++----
 packages/modal/style.ts                       |  2 +
 .../tests/__snapshots__/Modal.test.tsx.snap   |  5 ++-
 4 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 88352367e..3e0f73afe 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
     "memoize-one": "4.0.2",
     "react": "16.5.2",
     "react-click-outside": "3.0.1",
-    "react-delegate-component": "^1.0.0",
+    "react-delegate-component": "1.0.0",
     "react-dom": "16.5.2",
     "react-emotion": "9.2.12",
     "react-toggled": "1.2.7",
diff --git a/packages/modal/stories/Modal.stories.tsx b/packages/modal/stories/Modal.stories.tsx
index 6a138d069..7bcfd1640 100644
--- a/packages/modal/stories/Modal.stories.tsx
+++ b/packages/modal/stories/Modal.stories.tsx
@@ -19,6 +19,7 @@ import PrimaryButton from "../../button/components/PrimaryButton";
 import {
   flex,
   flexItem,
+  padding,
   textSize,
   tintContentSecondary
 } from "../../shared/styles/styleUtils";
@@ -111,7 +112,10 @@ storiesOf("Modal", module)
             onClose={onClose}
             title="I am modal"
             ctaButton={
-              <PrimaryButton onClick={action("handling CTA")}>
+              <PrimaryButton
+                onClick={action("handling CTA")}
+                aria-haspopup={true}
+              >
                 Continue
               </PrimaryButton>
             }
@@ -135,7 +139,10 @@ storiesOf("Modal", module)
             onClose={onClose}
             title="I am modal"
             ctaButton={
-              <PrimaryButton onClick={action("handling CTA")}>
+              <PrimaryButton
+                onClick={action("handling CTA")}
+                aria-haspopup={true}
+              >
                 Continue
               </PrimaryButton>
             }
@@ -159,7 +166,10 @@ storiesOf("Modal", module)
             onClose={onClose}
             title="I am modal"
             ctaButton={
-              <PrimaryButton onClick={action("handling CTA")}>
+              <PrimaryButton
+                onClick={action("handling CTA")}
+                aria-haspopup={true}
+              >
                 Continue
               </PrimaryButton>
             }
@@ -185,7 +195,10 @@ storiesOf("Modal", module)
             subtitle="Optional subtitle"
             closeText="Dismiss"
             ctaButton={
-              <PrimaryButton onClick={action("handling CTA")}>
+              <PrimaryButton
+                onClick={action("handling CTA")}
+                aria-haspopup={true}
+              >
                 Continue
               </PrimaryButton>
             }
@@ -218,7 +231,9 @@ storiesOf("Modal", module)
                 <input type="checkbox" id="fauxToggle" />
                 <label htmlFor="fauxToggle">Faux toggle</label>
               </div>
-              <div className={flexItem("shrink")}>{ctaButton}</div>
+              <div className={cx(flexItem("shrink"), padding("left", "s"))}>
+                {ctaButton}
+              </div>
             </div>
           </div>
         </div>
@@ -232,7 +247,10 @@ storiesOf("Modal", module)
               title="I am modal"
               closeText="Dismiss"
               ctaButton={
-                <PrimaryButton onClick={action("handling CTA")}>
+                <PrimaryButton
+                  onClick={action("handling CTA")}
+                  aria-haspopup={true}
+                >
                   Continue
                 </PrimaryButton>
               }
@@ -259,7 +277,10 @@ storiesOf("Modal", module)
             closeText="Dismiss"
             isContentFlush={true}
             ctaButton={
-              <PrimaryButton onClick={action("handling CTA")}>
+              <PrimaryButton
+                onClick={action("handling CTA")}
+                aria-haspopup={true}
+              >
                 Continue
               </PrimaryButton>
             }
@@ -281,11 +302,13 @@ storiesOf("Modal", module)
             isOpen={isOpen}
             onClose={onClose}
             title="I am modal"
-            initialFocus="#test-input"
+            initialFocus="#focus-input"
           >
             <div>
               <ModalContent />
-              <TextInput inputLabel="I get focus" id="focus-input" />
+              <div className={padding("top", "m")}>
+                <TextInput inputLabel="I get focus" id="focus-input" />
+              </div>
             </div>
           </DialogModal>
         )}
diff --git a/packages/modal/style.ts b/packages/modal/style.ts
index d98cbc467..0cb39613f 100644
--- a/packages/modal/style.ts
+++ b/packages/modal/style.ts
@@ -104,6 +104,8 @@ export const fullscreenModalHeader = css`
 `;
 
 export const modalCloseWrapper = css`
+  cursor: pointer;
+
   &:focus-within {
     outline: -webkit-focus-ring-color auto 5px;
   }
diff --git a/packages/modal/tests/__snapshots__/Modal.test.tsx.snap b/packages/modal/tests/__snapshots__/Modal.test.tsx.snap
index 03479b27b..4b0044525 100644
--- a/packages/modal/tests/__snapshots__/Modal.test.tsx.snap
+++ b/packages/modal/tests/__snapshots__/Modal.test.tsx.snap
@@ -156,6 +156,7 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
 }
 
 .emotion-3 {
+  cursor: pointer;
   display: inherit;
   box-sizing: border-box;
   -webkit-flex-basis: auto;
@@ -632,6 +633,7 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
 }
 
 .emotion-3 {
+  cursor: pointer;
   display: inherit;
   box-sizing: border-box;
   -webkit-flex-basis: auto;
@@ -1520,7 +1522,7 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                           Title
                         </div>
                         <div
-                          class="css-1x3nq8p"
+                          class="css-6nx4bk"
                         >
                           <span
                             class="css-ms94x0"
@@ -1745,6 +1747,7 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
 }
 
 .emotion-3 {
+  cursor: pointer;
   display: inherit;
   box-sizing: border-box;
   -webkit-flex-basis: auto;