fix(ui5-toast): keep toast open when hovered (#1294)

Fixes: #1292
SAP · Mar 13, 2020 · 2f4fd6e · 2f4fd6e
1 parent 0c408d2
commit 2f4fd6e
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 56 deletions.
diff --git a/packages/main/src/Toast.hbs b/packages/main/src/Toast.hbs
@@ -1,11 +1,11 @@
 <div class="ui5-toast-root"
-	dir="{{rtl}}">
-	<div class="ui5-toast-content"
-		role="alert"
-		style="{{styles.root}}"
-		@transitionend="{{_ontransitionend}}">
-		<bdi>
-			<slot></slot>
-		</bdi>
-	</div>
+	role="alert"
+	style="{{styles.root}}"
+	dir="{{rtl}}"
+	@mouseover="{{_onmouseover}}"
+	@mouseleave="{{_onmouseleave}}"
+	@transitionend="{{_ontransitionend}}">
+	<bdi>
+		<slot></slot>
+	</bdi>
 </div>
diff --git a/packages/main/src/Toast.js b/packages/main/src/Toast.js
@@ -68,6 +68,15 @@ const metadata = {
 		open: {
 			type: Boolean,
 		},
+
+		/**
+		 * Indicates whether <code>ui5-toast</code> is hovered.
+		 * @type {boolean}
+		 * @private
+		 */
+		hover: {
+			type: Boolean,
+		},
 	},
 	slots: /** @lends sap.ui.webcomponents.main.Toast.prototype */ {
 		/**
@@ -196,7 +205,7 @@ class Toast extends UI5Element {
 				"transition-delay": this.open ? `${this.duration - transitionDuration}ms` : "",
 
 				// We alter the opacity property, in order to trigger transition
-				"opacity": this.open ? "0" : "",
+				"opacity": this.open && !this.hover ? "0" : "",
 			},
 		};
 	}
@@ -208,8 +217,19 @@ class Toast extends UI5Element {
 	}
 
 	_ontransitionend() {
+		if (this.hover) {
+			return;
+		}
 		this.open = false;
 	}
+
+	_onmouseover() {
+		this.hover = true;
+	}
+
+	_onmouseleave() {
+		this.hover = false;
+	}
 }
 
 Toast.define();

diff --git a/packages/main/src/themes/Toast.css b/packages/main/src/themes/Toast.css
@@ -4,23 +4,12 @@
 	font-size: var(--sapFontMediumSize);
 }
 
-.ui5-toast-root {
-	position: fixed;
-	left: 0;
-	right: 0;
-	top: 0;
-	bottom: 0;
-	width: 100%;
-	display: none;
-	height: 100%;
-	pointer-events: none;
-	overflow: hidden;
-	z-index: 999;
-	justify-content: center;
-	align-items: flex-end;
+:host([open]) .ui5-toast-root {
+	display: block;
 }
 
-.ui5-toast-content {
+.ui5-toast-root {
+	display: none;
 	box-sizing: border-box;
 	max-width: 15rem;
 	overflow: hidden;
@@ -41,48 +30,65 @@
 	text-align: center;
 	text-overflow: ellipsis;
 	white-space: pre-line;
+	z-index: 999;
 }
 
-:host([open]) .ui5-toast-root {
-	display: flex;
+.ui5-toast-root {
+	position: fixed;
+}
+
+:host(:not([placement])) .ui5-toast-root {
+	bottom: 2rem;
+	left: 50%;
+	transform: translateX(-50%);
 }
 
 :host([placement="TopStart"]) .ui5-toast-root {
-	justify-content: flex-start;
-	align-items: flex-start;
+	top: 2rem;
+	left: 2rem;
 }
 
-:host([placement="TopCenter"]) .ui5-toast-root {
-	justify-content: center;
-	align-items: flex-start;
+:host([placement="MiddleStart"]) .ui5-toast-root {
+	left: 2rem;
+	top: 50%;
+	transform: translateY(-50%);
 }
 
-:host([placement="TopEnd"]) .ui5-toast-root {
-	justify-content: flex-end;
-	align-items: flex-start;
+:host([placement="BottomStart"]) .ui5-toast-root {
+	left: 2rem;
+	bottom: 2rem;
 }
 
-:host([placement="MiddleStart"]) .ui5-toast-root {
-	justify-content: flex-start;
-	align-items: center;
+ :host([placement="TopCenter"]) .ui5-toast-root {
+	top: 2rem;
+	left: 50%;
+	transform: translateX(-50%);
 }
 
 :host([placement="MiddleCenter"]) .ui5-toast-root {
-	justify-content: center;
-	align-items: center;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
 }
 
-:host([placement="MiddleEnd"]) .ui5-toast-root {
-	justify-content: flex-end;
-	align-items: center;
+:host([placement="BottomCenter"]) .ui5-toast-root {
+	bottom: 2rem;
+	left: 50%;
+	transform: translateX(-50%);
 }
 
-:host([placement="BottomStart"]) .ui5-toast-root {
-	justify-content: flex-start;
-	align-items: flex-end;
+:host([placement="TopEnd"]) .ui5-toast-root {
+	right: 2rem;
+	top: 2rem;
+}
+
+:host([placement="MiddleEnd"]) .ui5-toast-root {
+	right: 2rem;
+	top: 50%;
+	transform: translateY(-50%);
 }
 
 :host([placement="BottomEnd"]) .ui5-toast-root {
-	justify-content: flex-end;
-	align-items: flex-end;
+	right: 2rem;
+	bottom: 2rem;
 }
diff --git a/packages/main/test/specs/Toast.spec.js b/packages/main/test/specs/Toast.spec.js
@@ -45,27 +45,27 @@ describe("Toast general interaction", () => {
 	});
 
 	it("tests shadow content div role", () => {
-		const toastShadowContent = browser.$("#wcToastBE").shadow$(".ui5-toast-content");
+		const toastShadowContent = browser.$("#wcToastBE").shadow$(".ui5-toast-root");
 
 		assert.strictEqual(toastShadowContent.getAttribute("role"), "alert",
 			"The role of the shadow ui5-toast-content div should be alert");
 	});
 
 	it("tests shadow content div inline styles with default duration", () => {
 		const button = browser.$("#wcBtnShowToastBE");
-		const toastShadowContent = browser.$("#wcToastBE").shadow$(".ui5-toast-content");
+		const toastShadowContent = browser.$("#wcToastBE").shadow$(".ui5-toast-root");
 
 		button.click();
 
 		assert.strictEqual(toastShadowContent.getAttribute("style"),
 			"transition-duration: 1000ms; transition-delay: 2000ms; opacity: 0;",
-			"The correct default inline styles are applied to the shadow ui5-toast-content");
+			"The correct default inline styles are applied to the shadow ui5-toast-root");
 	});
 
 	it("tests shadow content div inline styles with long duration", () => {
 		const button = browser.$("#wcBtnShowToastBS");
 		const toast = browser.$("#wcToastBS");
-		const toastShadowContent = toast.shadow$(".ui5-toast-content");
+		const toastShadowContent = toast.shadow$(".ui5-toast-root");
 		const maximumAllowedTransition = 1000;
 		const durationProperty = toast.getProperty("duration");
 		let calculatedDelay;
@@ -83,7 +83,7 @@ describe("Toast general interaction", () => {
 	it("tests shadow content div inline styles with short duration", () => {
 		const button = browser.$("#wcBtnShowToastME");
 		const toast = browser.$("#wcToastME");
-		const toastShadowContent = toast.shadow$(".ui5-toast-content");
+		const toastShadowContent = toast.shadow$(".ui5-toast-root");
 		const durationProperty = toast.getProperty("duration");
 		let calculatedTransition, calculatedDelay;
 
@@ -101,7 +101,6 @@ describe("Toast general interaction", () => {
 	it("tests closing of toast", () => {
 		const button = browser.$("#wcBtnShowToastMS");
 		const toast = browser.$("#wcToastMS");
-		const toastShadowContent = toast.shadow$(".ui5-toast-content");
 
 		button.click();
 
@@ -110,8 +109,6 @@ describe("Toast general interaction", () => {
 
 		assert.notOk(toast.getProperty("open"),
 		"Open property should be false after Toast is closed");
-		assert.notOk(toastShadowContent.isDisplayedInViewport(),
-		"Toast's content div shouldn't be displayed in the viewport after its closing.")
 	});
 
 	it("tests minimum allowed duration", () => {