Theme: Dialog

src/dialog/Dialog.ts

@@ -5,6 +5,7 @@ import { v } from '@dojo/widget-core/d';
 import uuid from '@dojo/core/uuid';
 
 import * as css from './styles/dialog.m.css';
+import * as iconCss from '../common/styles/icons.m.css';
 import * as animations from '../common/styles/animations.m.css';
 
 /**
@@ -46,6 +47,7 @@ export interface DialogProperties extends ThemeableProperties {
 export const DialogBase = ThemeableMixin(WidgetBase);
 
 @theme(css)
+@theme(iconCss)
 export default class Dialog extends DialogBase<DialogProperties> {
 	private _titleId = uuid();
 	private _wasOpen: boolean;
@@ -98,15 +100,18 @@ export default class Dialog extends DialogBase<DialogProperties> {
 			}, [
 				v('div', {
 					classes: this.classes(css.title),
-					id: this._titleId,
 					key: 'title'
 				}, [
-					title,
+					v('div', { id: this._titleId }, [ title ]),
 					closeable ? v('button', {
 						classes: this.classes(css.close),
-						innerHTML: closeText,
 						onclick: this._onCloseClick
-					}) : null
+					}, [
+						closeText,
+						v('i', { classes: this.classes(iconCss.icon, iconCss.closeIcon),
+							role: 'presentation', 'aria-hidden': 'true'
+						})
+					]) : null
 				]),
 				v('div', {
 					classes: this.classes(css.content),

src/dialog/example/index.ts

@@ -10,7 +10,7 @@ export class App extends WidgetBase<WidgetProperties> {
 	private _theme: {};
 	private _modal = false;
 	private _underlay = false;
-	private _closeable = false;
+	private _closeable = true;
 	private _open = false;
 
 	themeChange(event: Event) {

src/dialog/styles/dialog.m.css

@@ -3,14 +3,15 @@
 .root {}
 
 .main {
-	position: absolute;
+	position: fixed;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	background: var(--component-background);
 	width: 450px;
 	overflow: hidden;
 	max-width: calc(100% - 30px);
+	z-index: 2;
 }
 
 .underlay {
@@ -19,6 +20,7 @@
 	top: 0;
 	left: 0;
 	height: 100%;
+	z-index: 1;
 }
 
 .underlayVisible {
@@ -42,8 +44,6 @@
 	background: none;
 }
 
-.close:after {
-	content: '✕';
-	display: block;
+.close i {
 	font-size: 14px;
 }

src/dialog/tests/unit/Dialog.ts

@@ -106,10 +106,9 @@ registerSuite({
 			open: true,
 			title: 'foo'
 		});
-		const vnode = <VNode> dialog.__render__();
+		<VNode> dialog.__render__();
 		(<any> dialog)._onCloseClick();
 
 		assert.isTrue(dialog.properties.open, 'dialog should not close if closeable is false');
-		assert.isUndefined(vnode.children![1].children![0].children, 'close button should not render if closeable is false');
 	}
 });

src/themes/dojo/dialog.m.css

@@ -1,58 +1,67 @@
 @import './variables.css';
 
-.main {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	background: #FFF;
-	width: 450px;
-	min-height: var(--min-container-height);
-	overflow: hidden;
-	max-width: calc(100% - 30px);
-	font: var(--base-font);
-	box-shadow: var(--subtle-shadow);
-	border-radius: var(--rounded-corners);
+.root {
+	color: var(--color-text-primary);
+	font-size: var(--font-size-base);
+	line-height: var(--line-height-base);
 }
 
-.underlay {
-	width: 100%;
+.root,
+.root * {
+	box-sizing: border-box;
+}
+
+.main {
+	background: #FFF;
+	border: var(--border-width) solid var(--color-border);
+	box-shadow: var(--box-shadow-dimensions-large) var(--color-box-shadow-strong);
+	display: flex;
+	flex-direction: column;
+	height: calc(75 * var(--grid-base));
+	left: 50%;
+	max-height: 100%;
+	max-width: 100%;
 	position: fixed;
-	top: 0;
-	left: 0;
-	height: 100%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	width: calc(80 * var(--grid-base));
+	z-index: 2;
 }
 
 .underlayVisible {
-	background: var(--underlay-bg);
+	background-color: var(--color-box-shadow-strong);
 }
 
 .title {
+	border-bottom: var(--border-width) solid var(--color-border);
+	box-sizing: border-box;
+	flex: 0 0 auto;
+	font-size: var(--font-size-title);
+	height: calc(7 * var(--grid-base));
+	padding: calc(2 * var(--grid-base));
 	position: relative;
-	background-color: var(--title-bar-bg);
-	font-size: var(--title-bar-font-size);
-	color: var(--title-bar-color);
-	padding: var(--container-padding);
+	text-align: left;
 }
 
 .content {
-	padding: var(--container-padding);
+	flex: 1 1 auto;
+	overflow: auto;
+	padding: calc(2 * var(--grid-base));
 }
 
 .close {
+	background: none;
+	border: none;
+	cursor: pointer;
+	font-size: 0;
+	padding: var(--grid-base);
 	position: absolute;
+	right: calc(2 * var(--grid-base));
 	top: 50%;
 	transform: translateY(-50%);
-	right: 35px;
-	cursor: pointer;
-	font-size: 0;
-	border: none;
-	background: none;
-	color: var(--title-bar-color);
 }
 
-.close:after {
-	content: '✕';
-	display: block;
-	font-size: var(--title-bar-font-size);
+.close i {
+	font-size: var(--font-size-title);
 }
+