Use new Overlay component in dialogs and dependencies

components/date_picker/style.scss

@@ -58,7 +58,7 @@
   }
 }
 
-.dialog > [role="content"] {
+.dialog {
   width: $datepicker-dialog-width;
   > [role="body"] {
     padding: 0;

components/dialog/index.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Button from '../button';
+import Overlay from '../overlay';
 import style from './style';
 
 const Dialog = (props) => {
@@ -14,9 +15,8 @@ const Dialog = (props) => {
   if (props.className) className += ` ${props.className}`;
 
   return (
-    <div data-react-toolbox='dialog' className={className}>
-      <div role='overlay' className={style.overlay} onClick={props.onOverlayClick} />
-      <div role='content' className={style.content}>
+    <Overlay active={props.active} onClick={props.onOverlayClick}>
+      <div className={className}>
         <section role='body' className={style.body}>
           { props.title ? <h6 className={style.title}>{props.title}</h6> : null }
           { props.children }
@@ -25,7 +25,7 @@ const Dialog = (props) => {
           { actions }
         </nav>
       </div>
-    </div>
+    </Overlay>
   );
 };
 

components/dialog/style.scss

@@ -2,38 +2,6 @@
 @import "./config";
 
 .root {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: $z-index-high;
-  display: flex;
-  width: 100vw;
-  height: 100vh;
-  flex-direction: column;
-  align-content: center;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-  > .content {
-    opacity: 0;
-    transform: translateY(-$dialog-translate-y);
-  }
-}
-
-.overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: $color-overlay;
-  opacity: 0;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: opacity;
-}
-
-.content {
   display: flex;
   max-width: 96vw;
   max-height: 96vh;
@@ -41,10 +9,28 @@
   background-color: $dialog-color-white;
   border-radius: $dialog-border-radius;
   box-shadow: $zdepth-shadow-5;
+  opacity: 0;
   transition-delay: $animation-delay;
   transition-timing-function: $animation-curve-default;
   transition-duration: $animation-duration;
   transition-property: opacity, transform;
+  transform: translateY(-$dialog-translate-y);
+  &.active {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+}
+
+.small {
+  width: 30vw;
+}
+
+.normal {
+  width: 50vw;
+}
+
+.large {
+  width: 96vw;
 }
 
 .title {
@@ -73,26 +59,3 @@
   padding-left: $dialog-navigation-padding;
   margin-left: $dialog-navigation-padding;
 }
-
-.active {
-  pointer-events: all;
-  > .overlay {
-    opacity: $color-overlay-opacity;
-  }
-  > .content {
-    opacity: 1;
-    transform: translateY(0%);
-  }
-}
-
-.small > .content {
-  width: 30vw;
-}
-
-.normal > .content {
-  width: 50vw;
-}
-
-.large > .content {
-  width: 96vw;
-}

components/overlay/index.jsx

@@ -5,7 +5,8 @@ import style from './style';
 class Overlay extends React.Component {
   static propTypes = {
     active: React.PropTypes.bool,
-    className: React.PropTypes.string
+    className: React.PropTypes.string,
+    onClick: React.PropTypes.func
   };
 
   static defaultProps = {
@@ -33,7 +34,7 @@ class Overlay extends React.Component {
     if (this.props.active) className += ` ${style.active}`;
     ReactDOM.render(
       <div className={className}>
-        <div className={style.overlay}></div>
+        <div className={style.overlay} onClick={this.props.onClick}></div>
         {this.props.children}
       </div>
     , this.node);

components/time_picker/style.scss

@@ -45,19 +45,17 @@
 }
 
 .dialog {
-  > [role="content"] {
-    width: $timepicker-dialog-width;
-    > [role="body"] {
-      padding: 0;
+  width: $timepicker-dialog-width;
+  > [role="body"] {
+    padding: 0;
+  }
+  > [role="navigation"] > .button {
+    color: $timepicker-primary-color;
+    &:hover {
+      background: $timepicker-primary-hover-color;
     }
-    > [role="navigation"] > .button {
-      color: $timepicker-primary-color;
-      &:hover {
-        background: $timepicker-primary-hover-color;
-      }
-      &:focus:not(:active) {
-        background: $timepicker-primary-hover-color;
-      }
+    &:focus:not(:active) {
+      background: $timepicker-primary-hover-color;
     }
   }
   &.display-hours .hours, &.display-minutes .minutes, &.format-am .am,

spec/components/dialog.jsx

@@ -27,7 +27,7 @@ class DialogTest extends React.Component {
         <Dialog
           actions={this.actions}
           active={this.state.active}
-          title="Use Google\'s location service?"
+          title="Use Google's location service?"
           onOverlayClick={this.handleToggle}
         >
           <p>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</p>