From dc9418cc21feacb632ec1e1ad52f3ec694af3679 Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Tue, 2 Aug 2016 18:24:53 -0700 Subject: [PATCH 1/6] init --- src/components/Dialog/Dialog.scss | 208 +++++++++++++++++++++--------- src/components/Dialog/Dialog.tsx | 12 +- 2 files changed, 154 insertions(+), 66 deletions(-) diff --git a/src/components/Dialog/Dialog.scss b/src/components/Dialog/Dialog.scss index d76c9bb46c238f..1209fea2db1a30 100644 --- a/src/components/Dialog/Dialog.scss +++ b/src/components/Dialog/Dialog.scss @@ -7,105 +7,191 @@ // -------------------------------------------------- // Dialog styles +// 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; + font-size: 0; + 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 { + z-index: $ms-zIndex-back; + + @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: 288px; + 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%; + margin: 0; + padding: 0; + border: 0; + background: none; + cursor: pointer; + @include margin-right(20px); + 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:not(:last-child) { + margin-bottom: 20px; + } } .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 +.ms-Dialog-actionsRight { + @include text-align(right); + font-size: 0; + + // Reset spacing for first button + .ms-Dialog-action:first-child { + margin: 0; + } + + // Spacing between bottom buttons + .ms-Dialog-action + .ms-Dialog-action { + @include margin(0, 0, 0, 8px); + } +} + +//= 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: $ms-color-themePrimary; + } + .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; } } @@ -116,4 +202,4 @@ min-width: 288px; max-width: 340px; } -} +} \ No newline at end of file diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index d8f6ddca9edb15..8f2ac1c4079734 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/src/components/Dialog/Dialog.tsx @@ -72,13 +72,15 @@ export class Dialog extends React.Component { ignoreExternalFocusing={ ignoreExternalFocusing } forceFocusInsideTrap={ forceFocusInsideTrap } firstFocusableSelector={ firstFocusableSelector }> -

{ title }

+
+ +
From e506c815b4ab1bca10aabc32e5e737a0214ac1f0 Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Tue, 2 Aug 2016 19:01:30 -0700 Subject: [PATCH 2/6] Getting rid of z-index --- src/components/Dialog/Dialog.scss | 8 +++----- src/components/Overlay/Overlay.scss | 1 - 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/Dialog/Dialog.scss b/src/components/Dialog/Dialog.scss index 1209fea2db1a30..29662b5047187b 100644 --- a/src/components/Dialog/Dialog.scss +++ b/src/components/Dialog/Dialog.scss @@ -45,11 +45,9 @@ } .ms-Overlay { - z-index: $ms-zIndex-back; - - @media screen and (-ms-high-contrast: active) { - opacity: 0; - } + @media screen and (-ms-high-contrast: active) { + opacity: 0; + } } } diff --git a/src/components/Overlay/Overlay.scss b/src/components/Overlay/Overlay.scss index 445f6baee4fbfe..37aca6584f035d 100644 --- a/src/components/Overlay/Overlay.scss +++ b/src/components/Overlay/Overlay.scss @@ -14,7 +14,6 @@ left: 0; right: 0; top: 0; - z-index: $ms-zIndex-Overlay; //== Modifier: Hidden overlay // From 16477b28abb1f704e7afadd79ef983cdbfceee44 Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Tue, 2 Aug 2016 19:25:19 -0700 Subject: [PATCH 3/6] Rid of sibling selector --- src/components/Dialog/Dialog.scss | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/components/Dialog/Dialog.scss b/src/components/Dialog/Dialog.scss index 29662b5047187b..c6f1d63174915f 100644 --- a/src/components/Dialog/Dialog.scss +++ b/src/components/Dialog/Dialog.scss @@ -140,16 +140,12 @@ .ms-Dialog-actionsRight { @include text-align(right); + @include margin-right(-4px); font-size: 0; // Reset spacing for first button - .ms-Dialog-action:first-child { - margin: 0; - } - - // Spacing between bottom buttons - .ms-Dialog-action + .ms-Dialog-action { - @include margin(0, 0, 0, 8px); + .ms-Dialog-action { + margin: 0px 4px; } } From 98aa9709703ecec05f677234f08c3ee16d934408 Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Tue, 2 Aug 2016 19:32:59 -0700 Subject: [PATCH 4/6] Using Button component for Close button --- src/components/Dialog/Dialog.scss | 2 +- src/components/Dialog/Dialog.tsx | 13 ++++++++----- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/Dialog/Dialog.scss b/src/components/Dialog/Dialog.scss index c6f1d63174915f..4dc064b1cd6282 100644 --- a/src/components/Dialog/Dialog.scss +++ b/src/components/Dialog/Dialog.scss @@ -73,7 +73,7 @@ border: 0; background: none; cursor: pointer; - @include margin-right(20px); + @include margin-right(8px); padding: 8px; .ms-Icon.ms-Icon--Cancel { diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index 8f2ac1c4079734..5b1dc340ad3878 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/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'; @@ -75,11 +76,13 @@ export class Dialog extends React.Component {

{ title }

- +
From 2c40be290e3036672d07a4509245d8c7aa21bd24 Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Tue, 2 Aug 2016 19:49:25 -0700 Subject: [PATCH 5/6] Using semantic variables, fixing close callback --- src/components/Dialog/Dialog.scss | 19 ++++++++++--------- src/components/Dialog/Dialog.tsx | 1 + 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/components/Dialog/Dialog.scss b/src/components/Dialog/Dialog.scss index 4dc064b1cd6282..4ef5fa0f192000 100644 --- a/src/components/Dialog/Dialog.scss +++ b/src/components/Dialog/Dialog.scss @@ -7,6 +7,10 @@ // -------------------------------------------------- // 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; @@ -59,7 +63,7 @@ box-sizing: border-box; line-height: 1.35; margin: auto; - width: 288px; + width: $Dialog-default-min-width; position: relative; @include text-align(left); outline: 3px solid transparent; @@ -68,11 +72,6 @@ // Close button, hidden by default .ms-Dialog-button.ms-Dialog-button--close { display: none; - margin: 0; - padding: 0; - border: 0; - background: none; - cursor: pointer; @include margin-right(8px); padding: 8px; @@ -138,6 +137,8 @@ } } +// Negative margin to needed to compensate for symmetric +// padding between action elements. .ms-Dialog-actionsRight { @include text-align(right); @include margin-right(-4px); @@ -174,7 +175,7 @@ // .ms-Dialog.ms-Dialog--lgHeader { .ms-Dialog-header { - background-color: $ms-color-themePrimary; + background-color: $Dialog-lgHeader-backgroundColor; } .ms-Dialog-title { @@ -193,7 +194,7 @@ // 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; } } \ No newline at end of file diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index 5b1dc340ad3878..23b94eddf22aab 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/src/components/Dialog/Dialog.tsx @@ -82,6 +82,7 @@ export class Dialog extends React.Component { icon='Cancel' title={ closeButtonAriaLabel } ariaLabel={ closeButtonAriaLabel } + onClick={ onDismiss } />
From 0d08a2bd004ecbf5a3f65bcc4c149874202fd70b Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Wed, 3 Aug 2016 10:45:15 -0700 Subject: [PATCH 6/6] Addressing comments --- src/components/Dialog/Dialog.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/Dialog/Dialog.scss b/src/components/Dialog/Dialog.scss index 4ef5fa0f192000..3b8cb5fe2d7fc3 100644 --- a/src/components/Dialog/Dialog.scss +++ b/src/components/Dialog/Dialog.scss @@ -28,7 +28,6 @@ $Dialog-default-max-width: 340px; // Fallback for IE9 display: block; - font-size: 0; line-height: 100vh; text-align: center; @@ -111,8 +110,12 @@ $Dialog-default-max-width: 340px; width: 100%; // Add margin bottom between compound buttons - .ms-Button.ms-Button--compound:not(:last-child) { + .ms-Button.ms-Button--compound { margin-bottom: 20px; + + &:last-child { + margin-bottom: 0; + } } }