Merge pull request #210 from cal-smith/tooltip-ie

fix(dialog): fix dialog in IE11

Author: zvonimirfras

.storybook/addons.js

@@ -1,4 +1,22 @@
-import '@storybook/addon-actions/register';
-import '@storybook/addon-links/register';
-import '@storybook/addon-notes/register';
-import '@storybook/addon-knobs/register'
+import "core-js/es6/symbol";
+import "core-js/es6/object";
+import "core-js/es6/function";
+import "core-js/es6/parse-int";
+import "core-js/es6/parse-float";
+import "core-js/es6/number";
+import "core-js/es6/math";
+import "core-js/es6/string";
+import "core-js/es6/date";
+import "core-js/es6/array";
+import "core-js/es6/regexp";
+import "core-js/es6/map";
+import "core-js/es6/set";
+import "core-js/es6/reflect";
+
+import "core-js/es7/reflect";
+import "zone.js/dist/zone";
+
+import "@storybook/addon-actions/register";
+import "@storybook/addon-links/register";
+import "@storybook/addon-notes/register";
+import "@storybook/addon-knobs/register";

.storybook/config.js

@@ -1,3 +1,21 @@
+import "core-js/es6/symbol";
+import "core-js/es6/object";
+import "core-js/es6/function";
+import "core-js/es6/parse-int";
+import "core-js/es6/parse-float";
+import "core-js/es6/number";
+import "core-js/es6/math";
+import "core-js/es6/string";
+import "core-js/es6/date";
+import "core-js/es6/array";
+import "core-js/es6/regexp";
+import "core-js/es6/map";
+import "core-js/es6/set";
+import "core-js/es6/reflect";
+
+import "core-js/es7/reflect";
+import "zone.js/dist/zone";
+
 import { configure } from "@storybook/angular";
 
 // load global styles

src/dialog/dialog.component.ts

@@ -137,7 +137,14 @@ export class Dialog implements OnInit, AfterViewInit, OnDestroy {
 	 */
 	ngAfterViewInit() {
 		const dialogElement = this.dialog.nativeElement;
-		dialogElement.classList = `${dialogElement.classList} ${this.dialogConfig.wrapperClass}`;
+		// split the wrapper class list and apply separately to avoid IE from
+		// 1. throwing an error due to assigning a readonly property (classList)
+		// 2. throwing a SyntaxError due to passing an empty string to `add`
+		if (this.dialogConfig.wrapperClass) {
+			for (const extraClass of this.dialogConfig.wrapperClass.split(" ")) {
+				dialogElement.classList.add(extraClass);
+			}
+		}
 		this.placeDialog();
 		dialogElement.focus();
 		const parentEl: HTMLElement = this.dialogConfig.parentRef.nativeElement;

src/dialog/tooltip/tooltip.stories.ts

@@ -40,5 +40,6 @@ storiesOf("Tooltip", module)
 				style="cursor: pointer;">
 				Click for tooltip
 			</span>
+			<ibm-placeholder></ibm-placeholder>
 		`
 	}));