diff --git a/packages/main/src/Toast.ts b/packages/main/src/Toast.ts
index 511b14c88d40..96316c8ed73d 100644
--- 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
index 99c8f8ef7199..94d2f95d943d 100644
--- 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
index 63f0500a1a48..bc730bed2df8 100644
--- a/packages/main/test/pages/Toast.html
+++ b/packages/main/test/pages/Toast.html
@@ -69,6 +69,19 @@
Show BottomEnd Toast
BottomEnd
+
+
+
+
Show Styled Toast
+
+
+
Styled Toast
+
+ UNDO
+ DISMISS
+
+
+
diff --git a/packages/main/test/pages/styles/Toast.css b/packages/main/test/pages/styles/Toast.css
index 88a737716bb1..f2a35b19b999 100644
--- 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;
+}
\ No newline at end of file
diff --git a/packages/main/test/specs/Toast.spec.js b/packages/main/test/specs/Toast.spec.js
index 0b9286658096..7d5d5d7b89fd 100644
--- a/packages/main/test/specs/Toast.spec.js
+++ b/packages/main/test/specs/Toast.spec.js
@@ -79,12 +79,12 @@ 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");
});
@@ -92,7 +92,6 @@ describe("Toast general interaction", () => {
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");
+ });
+});