feat(ui5-toast): enable overstyling

FIXES: #7596
SAP · Jan 24, 2024 · 6fca244 · 6fca244
1 parent 9db96e6
commit 6fca244
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 60 deletions.
diff --git a/packages/main/src/Toast.hbs b/packages/main/src/Toast.hbs
@@ -1,14 +1,6 @@
 {{#if domRendered}}
-	<div class="ui5-toast-root"
-		role="alert"
-		style="{{styles.root}}"
-		tabindex="{{_tabindex}}"
-		@focusin="{{_onfocusin}}"
-		@focusout="{{_onfocusout}}"
-		@keydown="{{_onkeydown}}"
-		@mouseover="{{_onmouseover}}"
-		@mouseleave="{{_onmouseleave}}"
-		@transitionend="{{_ontransitionend}}">
+	<div class="ui5-toast-root" role="alert" tabindex="{{_tabindex}}"
+	>
 		<bdi>
 			<slot></slot>
 		</bdi>

diff --git a/packages/main/src/Toast.ts b/packages/main/src/Toast.ts
@@ -161,6 +161,24 @@ class Toast extends UI5Element {
 		super();
 
 		this._reopen = false;
+
+		this.addEventListener("focusin", this._onfocusin.bind(this));
+		this.addEventListener("focusout", this._onfocusout.bind(this));
+		this.addEventListener("keydown", this._onkeydown.bind(this));
+		this.addEventListener("mouseover", this._onmouseover.bind(this));
+		this.addEventListener("mouseleave", this._onmouseleave.bind(this));
+		this.addEventListener("transitionend", this._ontransitionend.bind(this));
+	}
+
+	onBeforeRendering() {
+		// Transition duration (animation) should be a third of the duration
+		// property, but not bigger than the maximum allowed (1000ms).
+		const transitionDuration = Math.min(this.effectiveDuration / 3, MAX_DURATION);
+
+		this.style.transitionDuration = this.open ? `${transitionDuration}ms` : "";
+		this.style.transitionDelay = this.open ? `${this.effectiveDuration - transitionDuration}ms` : "";
+		this.style.opacity = this.open && !this.hover && !this.focused ? "0" : "";
+		this.style.zIndex = `${getNextZIndex()}`;
 	}
 
 	onAfterRendering() {
@@ -206,27 +224,6 @@ class Toast extends UI5Element {
 		return this.duration < MIN_DURATION ? MIN_DURATION : this.duration;
 	}
 
-	get styles() {
-		// Transition duration (animation) should be a third of the duration
-		// property, but not bigger than the maximum allowed (1000ms).
-		const transitionDuration = Math.min(this.effectiveDuration / 3, MAX_DURATION);
-
-		return {
-			root: {
-				"transition-duration": this.open ? `${transitionDuration}ms` : "",
-
-				// Transition delay is the duration property minus the
-				// transition duration (animation).
-				"transition-delay": this.open ? `${this.effectiveDuration - transitionDuration}ms` : "",
-
-				// We alter the opacity property, in order to trigger transition
-				"opacity": this.open && !this.hover && !this.focused ? "0" : "",
-
-				"z-index": getNextZIndex(),
-			},
-		};
-	}
-
 	_initiateOpening() {
 		this.domRendered = true;
 		requestAnimationFrame(() => {
@@ -244,7 +241,6 @@ class Toast extends UI5Element {
 		this.open = false;
 		this.focusable = false;
 		this.focused = false;
-		openedToasts.pop();
 	}
 
 	_onmouseover() {

diff --git a/packages/main/src/themes/Toast.css b/packages/main/src/themes/Toast.css
@@ -2,19 +2,11 @@
 	font-family: "72override", var(--sapFontFamily);
 	color: var(--sapList_TextColor);
 	font-size: var(--sapFontSize);
-}
-
-:host([open]) .ui5-toast-root {
-	display: block;
-}
-
-.ui5-toast-root {
 	position: fixed;
 	display: none;
 	box-sizing: border-box;
 	max-width: 15rem;
 	overflow: hidden;
-	padding: 1rem;
 	background: var(--_ui5_toast_background);
 	box-shadow: var(--_ui5_toast_shadow);
 	border-radius: var(--sapElement_BorderCornerRadius);
@@ -28,65 +20,78 @@
 	text-align: center;
 	text-overflow: ellipsis;
 	white-space: pre-line;
+	padding: 1rem;
+}
+
+.ui5-toast-root {
+	height: 100%;
+	width: 100%;
+	padding: 0;
+	outline: none;
+	box-sizing: border-box;
+}
+
+:host([open]) {
+	display: block;
 }
 
-:host(:not([placement])) .ui5-toast-root {
+:host(:not([placement])) {
 	bottom: var(--_ui5_toast_vertical_offset);
 	left: 50%;
 	transform: translateX(-50%);
 }
 
-:host([placement="TopStart"]) .ui5-toast-root {
+:host([placement="TopStart"]) {
 	top: var(--_ui5_toast_vertical_offset);
 	left: var(--_ui5_toast_horizontal_offset);
 }
 
-:host([placement="MiddleStart"]) .ui5-toast-root {
+:host([placement="MiddleStart"]) {
 	left: var(--_ui5_toast_horizontal_offset);
 	top: 50%;
 	transform: translateY(-50%);
 }
 
-:host([placement="BottomStart"]) .ui5-toast-root {
+:host([placement="BottomStart"]) {
 	left: var(--_ui5_toast_horizontal_offset);
 	bottom: var(--_ui5_toast_vertical_offset);
 }
 
- :host([placement="TopCenter"]) .ui5-toast-root {
+ :host([placement="TopCenter"]) {
 	top: var(--_ui5_toast_vertical_offset);
 	left: 50%;
 	transform: translateX(-50%);
 }
 
-:host([placement="MiddleCenter"]) .ui5-toast-root {
+:host([placement="MiddleCenter"]) {
 	left: 50%;
 	top: 50%;
 	transform: translate(-50%, -50%);
 }
 
-:host([placement="BottomCenter"]) .ui5-toast-root {
+:host([placement="BottomCenter"]) {
 	bottom: var(--_ui5_toast_vertical_offset);
 	left: 50%;
 	transform: translateX(-50%);
 }
 
-:host([placement="TopEnd"]) .ui5-toast-root {
+:host([placement="TopEnd"]) {
 	right: var(--_ui5_toast_horizontal_offset);
 	top: var(--_ui5_toast_vertical_offset);
 }
 
-:host([placement="MiddleEnd"]) .ui5-toast-root {
+:host([placement="MiddleEnd"]) {
 	right: var(--_ui5_toast_horizontal_offset);
 	top: 50%;
 	transform: translateY(-50%);
 }
 
-:host([placement="BottomEnd"]) .ui5-toast-root {
+:host([placement="BottomEnd"]) {
 	right: var(--_ui5_toast_horizontal_offset);
 	bottom: var(--_ui5_toast_vertical_offset);
 }
 
-:host([focused]) .ui5-toast-root {
+:host([focused]) {
 	outline-width: var(--sapContent_FocusWidth);
 	outline-style: var(--sapContent_FocusStyle);
 	outline-color: var(--sapContent_FocusColor);

diff --git a/packages/main/test/pages/Toast.html b/packages/main/test/pages/Toast.html
@@ -69,6 +69,19 @@
 	<ui5-button id="wcBtnShowToastBE">Show BottomEnd Toast</ui5-button>
 	<ui5-toast id="wcToastBE" placement="BottomEnd">BottomEnd</ui5-toast>
 
+	<br>
+
+		<!--BottomEnd-->
+		<ui5-button id="wcBtnShowToastStyled">Show Styled Toast</ui5-button>
+		<ui5-toast id="wcToastStyled" placement="BottomCenter">
+			<div class="styled-content" tabindex="-1">
+				<span>Styled Toast</span>
+				<div class="actions">
+					<ui5-button design="Transparent">UNDO</ui5-button>
+					<ui5-button design="Transparent">DISMISS</ui5-button>
+				</div>
+			</div>
+		</ui5-toast>
 
 	<!--Toast and Dialog-->
 	<ui5-dialog id="dialog">

diff --git a/packages/main/test/pages/styles/Toast.css b/packages/main/test/pages/styles/Toast.css
@@ -1,4 +1,46 @@
-ui5-button, ui5-title {
-    margin: 1rem;
+ui5-button,
+ui5-title {
+	margin: 1rem;
 }
-
+
+.styled-content {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: 100%;
+	width: 100%;
+	padding: .5rem .75rem;
+	box-sizing: border-box;
+}
+
+.styled-content ui5-button {
+	margin: 0;
+}
+
+#wcToastStyled {
+	max-width: 300px;
+	width: 300px;
+	background-color: #323232;
+	padding: 0;
+	color: white;
+	height: 4rem;
+	white-space: normal;
+	border-radius: 0;
+}
+
+#wcToastStyled[focused] {
+	outline-color: white;
+	outline-offset: -4px;
+}
+
+.actions {
+	display: flex;
+}
+
+.actions ui5-button {
+	color: red;	
+}
+
+.actions ui5-button:first-child {
+	margin-right: 1rem;
+}
diff --git a/packages/main/test/specs/Toast.spec.js b/packages/main/test/specs/Toast.spec.js
@@ -79,20 +79,19 @@ describe("Toast general interaction", () => {
 
 	it("tests shadow content div inline styles with default duration", async () => {
 		const button = await browser.$("#wcBtnShowToastBE");
-		const toastShadowContent = await browser.$("#wcToastBE").shadow$(".ui5-toast-root");
+		const toast = await browser.$("#wcToastBE");
 		const EXPECTED_STYLES = "transition-duration: 1000ms; transition-delay: 2000ms; opacity: 0;";
 
 		await button.click();
 
-		const styleValue = await toastShadowContent.getAttribute("style");
+		const styleValue = await toast.getAttribute("style");
 		assert.include(styleValue, EXPECTED_STYLES,
 			"The correct default inline styles are applied to the shadow ui5-toast-root");
 	});
 
 	it("tests shadow content div inline styles with long duration", async () => {
 		const button = await browser.$("#wcBtnShowToastBS");
 		const toast = await browser.$("#wcToastBS");
-		const toastShadowContent = await toast.shadow$(".ui5-toast-root");
 		const maximumAllowedTransition = 1000;
 		const durationProperty = await toast.getProperty("duration");
 		let calculatedDelay;
@@ -103,7 +102,7 @@ describe("Toast general interaction", () => {
 
 		const EXPECTED_STYLES = `transition-duration: ${maximumAllowedTransition}ms; transition-delay: ${calculatedDelay}; opacity: 0;`;
 
-		const styleValue = await toastShadowContent.getAttribute("style");
+		const styleValue = await toast.getAttribute("style");
 		assert.include(styleValue, EXPECTED_STYLES,
 				"The correct custom inline styles are applied to the shadow ui5-toast-root," +
 				"when the duration is longer than default. Transition is not longer than allowed (1000ms).");
@@ -112,7 +111,6 @@ describe("Toast general interaction", () => {
 	it("tests shadow content div inline styles with short duration", async () => {
 		const button = await browser.$("#wcBtnShowToastME");
 		const toast = await browser.$("#wcToastME");
-		const toastShadowContent = await toast.shadow$(".ui5-toast-root");
 		const durationProperty = await toast.getProperty("duration");
 		let calculatedTransition, calculatedDelay;
 
@@ -123,7 +121,7 @@ describe("Toast general interaction", () => {
 
 		const EXPECTED_STYLES = `transition-duration: ${calculatedTransition}ms; transition-delay: ${calculatedDelay}; opacity: 0;`;
 
-		const styleValue = await toastShadowContent.getAttribute("style");
+		const styleValue = await toast.getAttribute("style");
 		assert.include(styleValue, EXPECTED_STYLES,
 				"The correct custom inline styles are applied to the shadow ui5-toast-root," +
 				"when the duration is shorter than default. Transition is a third of the duration.");
@@ -201,3 +199,22 @@ describe("Keyboard handling", () => {
 		assert.ok(await toast.getProperty("open"), "second Toast should stay open");
 	});
 });
+
+describe("Customisation", async () => {
+	beforeEach(async () => {
+		await browser.url(`test/pages/Toast.html`);
+	});
+
+	it.only ("should check sizes to the toast", async () => {
+		const btn = await $("#wcBtnShowToastStyled");
+		const styledToast = await $("#wcToastStyled")
+
+		await btn.click();
+
+		const width = await styledToast.getSize("width");
+		const height = await styledToast.getSize("height");
+
+		assert.strictEqual(width, 300, "width is custom");
+		assert.strictEqual(height, 64, "height is custom");
+	});
+});