feat(ui5-panel): noAnimation property introduced (#3694)

FIXES: #3505
SAP · Aug 26, 2021 · d58bf44 · d58bf44
1 parent eb8fcf9
commit d58bf44
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 6 deletions.
diff --git a/packages/main/src/Panel.js b/packages/main/src/Panel.js
@@ -95,7 +95,19 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria role of the <code>ui5-panel</code>.
+		 * Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 * @since 1.0.0-rc.16
+		 */
+		 noAnimation: {
+			type: Boolean,
+		},
+
+		/**
+		 * Sets the accessible aria role of the component.
 		 * Depending on the usage, you can change the role from the default <code>Form</code>
 		 * to <code>Region</code> or <code>Complementary</code>.
 		 *
@@ -282,8 +294,8 @@ class Panel extends UI5Element {
 		return true;
 	}
 
-	shouldAnimate() {
-		return getAnimationMode() !== AnimationMode.None;
+	shouldNotAnimate() {
+		return this.noAnimation || getAnimationMode() === AnimationMode.None;
 	}
 
 	_headerClick(event) {
@@ -332,7 +344,7 @@ class Panel extends UI5Element {
 
 		this.collapsed = !this.collapsed;
 
-		if (!this.shouldAnimate()) {
+		if (this.shouldNotAnimate()) {
 			this.fireEvent("toggle");
 			return;
 		}
@@ -368,7 +380,7 @@ class Panel extends UI5Element {
 	get classes() {
 		return {
 			headerBtn: {
-				"ui5-panel-header-button-animated": this.shouldAnimate(),
+				"ui5-panel-header-button-animated": !this.shouldNotAnimate(),
 			},
 		};
 	}

diff --git a/packages/main/test/pages/Panel.html b/packages/main/test/pages/Panel.html
@@ -58,7 +58,7 @@
 	}
 </style>
 
-	<ui5-panel id="p1" collapsed accessible-role="Complementary">
+	<ui5-panel id="p1" collapsed accessible-role="Complementary" no-animation>
 
 		<!-- Panel header -->
 		<div slot="header" class="header">

diff --git a/packages/main/test/specs/Panel.spec.js b/packages/main/test/specs/Panel.spec.js
@@ -97,6 +97,14 @@ describe("Panel general interaction", () => {
 		assert.strictEqual(field.getProperty("value"), "3", "Press should be called 3 times");
 	});
 
+	it("tests toggle expand/collapse animation", () => {
+		const panelWithAnimationIcon = browser.$("#panel-expandable").shadow$(".ui5-panel-header-button");
+		const panelWithoutAnimationIcon = browser.$("#p1").shadow$(".ui5-panel-header-button");
+
+		assert.ok(panelWithAnimationIcon.hasClass("ui5-panel-header-button-animated"), "Animation is presented");
+		assert.notOk(panelWithoutAnimationIcon.hasClass("ui5-panel-header-button-animated"), "Animation is turn off");
+	});
+
 	describe("Accessibility", () => {
 
 		it("tests whether aria attributes are set correctly with native header", () => {