fix(ui5-page): fix double footer and adjust animation timing

FIXES: #9755 FIXES: #9756
SAP · Sep 17, 2024 · 350f552 · 350f552
1 parent a211dd2
commit 350f552
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 4 deletions.
diff --git a/packages/fiori/src/Page.ts b/packages/fiori/src/Page.ts
@@ -4,6 +4,9 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScopeUtils.js";
+import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import type PageBackgroundDesign from "./types/PageBackgroundDesign.js";
 
 // Template
@@ -110,6 +113,12 @@ class Page extends UI5Element {
 	@slot()
 	footer!: Array<HTMLElement>;
 
+	constructor() {
+		super();
+
+		this.style.setProperty(getScopedVarName("--_ui5-page-animation-duration"), getAnimationMode() === AnimationMode.None ? "0s" : "0.35s");
+	}
+
 	get _contentBottom() {
 		return this.fixedFooter && !this.hideFooter ? "2.75rem" : "0";
 	}

diff --git a/packages/fiori/src/themes/Page.css b/packages/fiori/src/themes/Page.css
@@ -47,6 +47,11 @@
 }
 /*** Responsive paddings ***/
 
+::slotted([ui5-bar][design="FloatingFooter"]) {
+	margin: auto;
+	padding: 0;
+}
+
 /* S Size */
 @container (max-width: 599px) {
 	:host([floating-footer]) .ui5-page-footer-root,
@@ -59,6 +64,10 @@
 		box-sizing: border-box;
 		padding: 0 .25rem;
 	}
+
+	::slotted([ui5-bar][design="FloatingFooter"]) {
+		width: calc(100% - 0.5rem);
+	}
 }
 
 /* M Size */
@@ -73,6 +82,10 @@
 		box-sizing: border-box;
 		padding: 0 1.25rem;
 	}
+
+	::slotted([ui5-bar][design="FloatingFooter"]) {
+		width: calc(100% - 2.5rem);
+	}
 }
 
 /* L Size */
@@ -87,6 +100,10 @@
 		box-sizing: border-box;
 		padding: 0 1.25rem;
 	}
+
+	::slotted([ui5-bar][design="FloatingFooter"]) {
+		width: calc(100% - 2.5rem);
+	}
 }
 
 /* XL Size */
@@ -101,6 +118,10 @@
 		box-sizing: border-box;
 		padding: 0 2.25rem;
 	}
+
+	::slotted([ui5-bar][design="FloatingFooter"]) {
+		width: calc(100% - 4.5rem);
+	}
 }
 
 :host([no-scrolling]) .ui5-page-content-root {
@@ -112,11 +133,11 @@
 }
 
 :host(:not([fixed-footer]):not([hide-footer])) .ui5-page-footer-root {
-	animation: bounceShow 0.35s forwards ease-in-out;
+	animation: bounceShow var(--_ui5-page-animation-duration) forwards ease-in-out;
 }
 
 :host(:not([fixed-footer])[hide-footer]) .ui5-page-footer-root {
-	animation: bounceHide 0.35s forwards ease-in-out;
+	animation: bounceHide var(--_ui5-page-animation-duration) forwards ease-in-out;
 }
 
 /* BackgroundDesign */

diff --git a/packages/fiori/test/specs/Page.spec.js b/packages/fiori/test/specs/Page.spec.js
@@ -30,4 +30,17 @@ describe("Page general interaction", () => {
 			timeoutMsg: "expected footer to not be visible after 500ms"
 		});
 	});
+
+	it("tests animation off footer toggling" , async () => {
+		await browser.url(`test/pages/Page.html?sap-ui-animationMode=none`);
+
+		const footer = await $("#page").shadow$(".ui5-page-footer-root");
+		const button = await $("#toggleVisibility");
+
+		assert.ok(await footer.isDisplayedInViewport(), "Footer should be visible.");
+
+		await button.click();
+
+		assert.ok(!(await footer.isDisplayedInViewport()), "Footer should not be visible.");
+	});
 });
diff --git a/packages/main/src/themes/Bar.css b/packages/main/src/themes/Bar.css
@@ -10,8 +10,8 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	height: inherit;
-	width: inherit;
+	height: 100%;
+	width: 100%;
 	background-color: inherit;
 	box-shadow: inherit;
 	border-radius: inherit;