Merge pull request #266 from dcos-labs/mp/fix/modal-feedback-post-merge

Address post-merge modal feedback
d2iq · Jan 3, 2019 · e5511de · e5511de
2 parents d52ea12 + 5cc1cf8
commit e5511de
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;