Themable Dialog animations (#604)

* Push to progress

* Push to progress

Author: bryanforbes

src/dialog/index.ts

@@ -12,7 +12,6 @@ import commonBundle from '../common/nls/common';
 import Icon from '../icon/index';
 import * as fixedCss from './styles/dialog.m.css';
 import * as css from '../theme/dialog.m.css';
-import * as animations from '../common/styles/animations.m.css';
 import { GlobalEvent } from '../global-event/index';
 import { customElement } from '@dojo/framework/widget-core/decorators/customElement';
 
@@ -160,8 +159,8 @@ export class DialogBase<P extends DialogProperties = DialogProperties> extends T
 		const { underlay } = this.properties;
 		return v('div', {
 			classes: [ this.theme(underlay ? css.underlayVisible : null), fixedCss.underlay ],
-			enterAnimation: animations.fadeIn,
-			exitAnimation: animations.fadeOut,
+			enterAnimation: this.theme(css.underlayEnter) || undefined,
+			exitAnimation: this.theme(css.underlayExit) || undefined,
 			key: 'underlay',
 			onclick: this._onUnderlayClick
 		});
@@ -172,8 +171,8 @@ export class DialogBase<P extends DialogProperties = DialogProperties> extends T
 			aria = {},
 			closeable = true,
 			closeText,
-			enterAnimation = animations.fadeIn,
-			exitAnimation = animations.fadeOut,
+			enterAnimation = this.theme(css.enter) || undefined,
+			exitAnimation = this.theme(css.exit) || undefined,
 			modal,
 			open = false,
 			role = 'dialog',

src/dialog/tests/unit/Dialog.ts

@@ -9,7 +9,6 @@ import Dialog, { DialogProperties } from '../../index';
 import Icon from '../../../icon/index';
 import * as css from '../../../theme/dialog.m.css';
 import * as fixedCss from '../../styles/dialog.m.css';
-import * as animations from '../../../common/styles/animations.m.css';
 import { Keys } from '../../../common/util';
 import { GlobalEvent } from '../../../global-event/index';
 import {
@@ -46,16 +45,16 @@ const expected = function(open = false, closeable = false, children: any[] = [])
 		}),
 		v('div', {
 			classes: [ null, fixedCss.underlay ],
-			enterAnimation: animations.fadeIn,
-			exitAnimation: animations.fadeOut,
+			enterAnimation: css.underlayEnter,
+			exitAnimation: css.underlayExit,
 			key: 'underlay',
 			onclick: noop
 		}),
 		v('div', {
 			'aria-labelledby': '',
 			classes: css.main,
-			enterAnimation: animations.fadeIn,
-			exitAnimation: animations.fadeOut,
+			enterAnimation: css.enter,
+			exitAnimation: css.exit,
 			key: 'main',
 			role: 'dialog',
 			tabIndex: -1
@@ -120,8 +119,8 @@ registerSuite('Dialog', {
 				}),
 				v('div', {
 					classes: [ css.underlayVisible, fixedCss.underlay ],
-					enterAnimation: animations.fadeIn,
-					exitAnimation: animations.fadeOut,
+					enterAnimation: css.underlayEnter,
+					exitAnimation: css.underlayExit,
 					key: 'underlay',
 					onclick: noop
 				}),
@@ -174,17 +173,17 @@ registerSuite('Dialog', {
 				}),
 				v('div', {
 					classes: [ null, fixedCss.underlay ],
-					enterAnimation: animations.fadeIn,
-					exitAnimation: animations.fadeOut,
+					enterAnimation: css.underlayEnter,
+					exitAnimation: css.underlayExit,
 					key: 'underlay',
 					onclick: noop
 				}),
 				v('div', {
 					role: 'dialog',
 					'aria-labelledby': '',
 					classes: css.main,
-					enterAnimation: animations.fadeIn,
-					exitAnimation: animations.fadeOut,
+					enterAnimation: css.enter,
+					exitAnimation: css.exit,
 					key: 'main',
 					tabIndex: -1
 				}, [

src/theme/dialog.m.css

@@ -40,3 +40,35 @@
 	background: var(--underlay-background);
 	z-index: var(--zindex-dialog);
 }
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+.enter,
+.underlayEnter {
+	animation-duration: var(--short-animation-duration);
+	animation-fill-mode: both;
+	animation-name: fadeIn;
+}
+
+@keyframes fadeOut {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
+}
+
+.exit,
+.underlayExit {
+	animation-duration: var(--short-animation-duration);
+	animation-fill-mode: both;
+	animation-name: fadeOut;
+}

src/theme/dialog.m.css.d.ts

@@ -4,3 +4,9 @@ export const title: string;
 export const close: string;
 export const content: string;
 export const underlayVisible: string;
+export const enter: string;
+export const underlayEnter: string;
+export const fadeIn: string;
+export const exit: string;
+export const underlayExit: string;
+export const fadeOut: string;