[MDL2]: Dialog, Overlay fixes

src/components/Dialog/Dialog.scss

@@ -7,113 +7,197 @@
 // --------------------------------------------------
 // Dialog styles
 
+$Dialog-lgHeader-backgroundColor: $ms-color-themePrimary;
+$Dialog-default-min-width: 288px;
+$Dialog-default-max-width: 340px;
+
+// Mixin for IE9 specific styles
+@mixin dialogPositioningIE9Fallback {
+  vertical-align: middle;
+  display: inline-block;
+}
+
 .ms-Dialog {
   @include ms-baseFont;
-  @include drop-shadow(0, 0, 5px, 0, .4);
+  background-color: transparent;
+  position: fixed;
+  height: 100%;
+  width:  100%;
+  top:  0;
+  @include left(0);
+
+  // Fallback for IE9
+  display: block;
+  line-height: 100vh;
+  text-align: center;
+
+  // Flexbox for Modern Browsers
+  @include flexBox();
+  @include alignItems(center);
+
+  &::before {
+    @include dialogPositioningIE9Fallback();
+    content: "";
+    height: 100%;
+    width: 0;
+  }
+
+  .ms-Button.ms-Button--compound {
+    display: block;
+    @include margin-left(0);
+  }
+
+  .ms-Overlay {
+    @media screen and (-ms-high-contrast: active) {
+      opacity: 0;
+    }
+  }
+}
+
+// The actual dialog element
+.ms-Dialog-main {
+  @include dialogPositioningIE9Fallback();
+  @include drop-shadow();
   background-color: $ms-color-white;
+  box-sizing: border-box;
+  line-height: 1.35;
+  margin: auto;
+  width: $Dialog-default-min-width;
+  position: relative;
+  @include text-align(left);
+  outline: 3px solid transparent;
+}
+
+// Close button, hidden by default
+.ms-Dialog-button.ms-Dialog-button--close {
   display: none;
-  height: auto;
-  min-width: 220px;
-  max-width: 340px;
-  padding: 28px 24px;
-  z-index: $ms-zIndex-front;
-  position: absolute;
-  transform: translate(-50%, -50%);
-  left: 50%;
-  top: 50%;
+  @include margin-right(8px);
+  padding: 8px;
+
+  .ms-Icon.ms-Icon--Cancel {
+    color: $ms-color-neutralSecondary;
+    font-size: 16px;
+  }
 }
 
-.ms-Dialog.is-open {
-  display: block;
+.ms-Dialog-inner {
+  height: 100%;
+  padding: 0 28px 20px;
+}
+
+.ms-Dialog-header {
+  position: relative;
+  display: table-row;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .ms-Dialog-title {
-  font-size: $ms-font-size-xl;
-  font-weight: $ms-font-weight-light;
-  margin-bottom: 24px;
+  margin: 0;
+  display: table-cell;
+  @include ms-font-xl;
+  padding: 20px 28px 20px;
+  width: 100%;
+}
+
+.ms-Dialog-topButton {
+  display: table-cell;
+  padding: 1px;
 }
 
 .ms-Dialog-content {
   position: relative;
+  width: 100%;
+
+  // Add margin bottom between compound buttons
+  .ms-Button.ms-Button--compound {
+    margin-bottom: 20px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 }
 
 .ms-Dialog-subText {
-  color: $ms-color-neutralPrimary;
-  font-size: $ms-font-size-s;
+  margin: 0 0 20px 0;
+  padding-top: 8px;
+  @include ms-font-s;
   font-weight: $ms-font-weight-semilight;
   line-height: 1.5;
 }
 
 .ms-Dialog-actions {
-  margin-top: 24px;
-  text-align: right;
+  position: relative;
+  width: 100%;
+  min-height:  24px;
+  line-height: 24px;
+  margin: 20px 0 0;
+  font-size: 0;
+
+  .ms-Button {
+    line-height: normal;
+  }
 }
 
-//= Modifier: Multiline button dialog
+// Negative margin to needed to compensate for symmetric
+// padding between action elements.
+.ms-Dialog-actionsRight {
+  @include text-align(right);
+  @include margin-right(-4px);
+  font-size: 0;
+
+  // Reset spacing for first button
+  .ms-Dialog-action {
+    margin: 0px 4px;
+  }
+}
+
+//= Modifier: Dialog with close button
 //
-.ms-Dialog--multiline {
-  .ms-Dialog-title {
-    font-size: $ms-font-size-xxl;
+.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) {
+  // Show the close button
+  .ms-Dialog-button.ms-Dialog-button--close {
+    display: block;
   }
 }
 
-//= Modifier: Large header dialog
+//= Modifier: Multiline button dialog
 //
-.ms-Dialog.ms-Dialog--lgHeader {
+.ms-Dialog.ms-Dialog--multiline {
   .ms-Dialog-title {
-    background-color: $ms-color-themePrimary;
-    color: $ms-color-white;
     font-size: $ms-font-size-xxl;
-    font-weight: $ms-font-weight-light;
-    padding: 28px 24px;
-    margin-top: -28px;
-    margin-left: -24px;
-    margin-right: -24px;
   }
-}
 
-// Close button, hidden by default
-.ms-Dialog-buttonClose {
-  background: none;
-  border: 0;
-  cursor: pointer;
-  margin: 0;
-  padding: 4px;
-  position: absolute;
-  right: 12px;
-  top: 12px;
-  z-index: $ms-zIndex-front;
-
-  .ms-Icon.ms-Icon--Cancel {
-    color: $ms-color-neutralSecondary;
-    font-size: 16px;
+  .ms-Dialog-inner {
+    padding: 0 20px 20px;
   }
 }
 
-// Add margin bottom between compound buttons
-.ms-Button.ms-Button--compound:not(:last-child) {
-  margin-bottom: 20px;
-}
-
-//= Modifier: Dialog with close button
+//= Modifier: Large header dialog
 //
-.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) {
-  // Push the right side over so the icon doesn't overlap the text
+.ms-Dialog.ms-Dialog--lgHeader {
+  .ms-Dialog-header {
+    background-color: $Dialog-lgHeader-backgroundColor;
+  }
+
   .ms-Dialog-title {
-    margin-right: 20px;
+    @include ms-font-xxl;
+    color: $ms-color-white;
+    padding: 26px 28px 28px;
+    margin-bottom: 8px;
   }
 
-  // Show the close button
-  .ms-Dialog-button.ms-Dialog-buttonClose {
-    display: block;
+  .ms-Dialog-subText {
+    font-size: $ms-font-size-m;
   }
 }
 
 @media (min-width: $ms-screen-md-min) {
   // Allow wider dialog on larger screens
   .ms-Dialog-main {
     width: auto;
-    min-width: 288px;
-    max-width: 340px;
+    min-width: $Dialog-default-min-width;
+    max-width: $Dialog-default-max-width;
   }
-}
+}

src/components/Dialog/Dialog.tsx

@@ -3,6 +3,7 @@ import { FocusTrapZone } from '../FocusTrapZone/index';
 import { IDialogProps, DialogType } from './Dialog.Props';
 import { Overlay } from '../../Overlay';
 import { Layer } from '../../Layer';
+import { Button, ButtonType } from '../../Button';
 import { DialogFooter } from './DialogFooter';
 import { css } from '../../utilities/css';
 import { Popup } from '../Popup/index';
@@ -72,13 +73,18 @@ export class Dialog extends React.Component<IDialogProps, any> {
                 ignoreExternalFocusing={ ignoreExternalFocusing }
                 forceFocusInsideTrap={ forceFocusInsideTrap }
                 firstFocusableSelector={ firstFocusableSelector }>
-                <button className='ms-Dialog-button ms-Dialog-button--close'
-                  onClick={ onDismiss }
-                  aria-label= { closeButtonAriaLabel }>
-                  <i className='ms-Icon ms-Icon--Cancel'></i>
-                </button>
                 <div className='ms-Dialog-header'>
                   <p className='ms-Dialog-title' id={ id + '-title'}>{ title }</p>
+                  <div className='ms-Dialog-topButton'>
+                    <Button
+                      className='ms-Dialog-button ms-Dialog-button--close'
+                      buttonType={ ButtonType.icon }
+                      icon='Cancel'
+                      title={ closeButtonAriaLabel }
+                      ariaLabel={ closeButtonAriaLabel }
+                      onClick={ onDismiss }
+                    />
+                  </div>
                 </div>
                 <div className='ms-Dialog-inner'>
                   <div className={ css('ms-Dialog-content', this.props.contentClassName) }>

src/components/Overlay/Overlay.scss

@@ -14,7 +14,6 @@
   left:   0;
   right:  0;
   top:    0;
-  z-index: $ms-zIndex-Overlay;
 
   //== Modifier: Hidden overlay
   //