fix(framework): apply RTL for components with popovers (#3657)

* fix(framework): apply RTL for components with popovers * remove dir attribute if it was unset * add test for dynamic dir changes
SAP · Aug 25, 2021 · 28e868b · 28e868b
1 parent b6d643a
commit 28e868b
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 2 deletions.
diff --git a/packages/base/bundle.esm.js b/packages/base/bundle.esm.js
@@ -34,6 +34,8 @@ import { getNoConflict, setNoConflict } from "./dist/config/NoConflict.js";
 import { getRTL } from "./dist/config/RTL.js";
 import { getFirstDayOfWeek } from "./dist/config/FormatSettings.js";
 import { _getRegisteredNames as getIconNames } from  "./dist/asset-registries/Icons.js"
+import applyDirection from "./dist/locale/applyDirection.js";
+
 window["sap-ui-webcomponents-bundle"] = {
 	configuration : {
 		getAnimationMode,
@@ -51,4 +53,5 @@ window["sap-ui-webcomponents-bundle"] = {
 	fetchI18nBundle,
 	getI18nBundle,
 	renderFinished,
+	applyDirection,
 };
diff --git a/packages/base/hash.txt b/packages/base/hash.txt
@@ -1 +1 @@
-XfwM5Q5x9CyXTd3ewO6fAuUW9Hs=
+EDyKy0JUgyCZ34E/jIs5Wgbb/2g=
diff --git a/packages/base/src/StaticAreaItem.js b/packages/base/src/StaticAreaItem.js
@@ -3,6 +3,7 @@ import updateShadowRoot from "./updateShadowRoot.js";
 import { renderFinished } from "./Render.js";
 import getEffectiveContentDensity from "./util/getEffectiveContentDensity.js";
 import { getEffectiveScopingSuffixForTag } from "./CustomElementsScope.js";
+import getEffectiveDir from "./locale/getEffectiveDir.js";
 
 /**
  *
@@ -33,6 +34,7 @@ class StaticAreaItem extends HTMLElement {
 	update() {
 		if (this._rendered) {
 			this._updateContentDensity();
+			this._updateDirection();
 			updateShadowRoot(this.ownerElement, true);
 		}
 	}
@@ -51,6 +53,15 @@ class StaticAreaItem extends HTMLElement {
 		}
 	}
 
+	_updateDirection() {
+		const dir = getEffectiveDir(this.ownerElement);
+		if (dir) {
+			this.setAttribute("dir", dir);
+		} else {
+			this.removeAttribute("dir");
+		}
+	}
+
 	/**
 	 * @protected
 	 * Returns reference to the DOM element where the current fragment is added.

diff --git a/packages/base/test/elements/WithStaticArea.js b/packages/base/test/elements/WithStaticArea.js
@@ -27,8 +27,9 @@ class WithStaticArea extends UI5Element {
 
 	static get template() {
 		return element => {
+			// access effectiveDir getter to mark control as RTL-aware (test changes dir attribute and expects rerender)
 			return html`
-				<div>
+				<div dir=${element.effectiveDir}>
 					WithStaticArea works!
 				</div>`;
 		};

diff --git a/packages/base/test/pages/AllTestElements.html b/packages/base/test/pages/AllTestElements.html
@@ -35,5 +35,8 @@
 
     <ui5-with-static-area id="no-static-area"></ui5-with-static-area>
     <ui5-with-static-area id="with-static-area" static-content></ui5-with-static-area>
+    <div id="with-static-area-rtl-container" dir="rtl">
+        <ui5-with-static-area id="with-static-area-rtl" static-content></ui5-with-static-area>
+    </div>
 </body>
 </html>
diff --git a/packages/base/test/specs/StaticArea.spec.js b/packages/base/test/specs/StaticArea.spec.js
@@ -33,4 +33,46 @@ describe("Some configuration options can be changed at runtime", () => {
 
 		assert.ok(result, "Static area removed from DOM successfully");
 	});
+
+	it("Test RTL not set for static area items", () => {
+		const componentId = browser.$("#with-static-area").getProperty("_id");
+		const staticArea = browser.$("ui5-static-area");
+
+		assert.notOk(staticArea.$(`.${componentId}`).getAttribute("dir"), "dir attribute not set for static area item");
+	});
+
+	it("Test RTL set for static area items", () => {
+		const componentId = browser.$("#with-static-area-rtl").getProperty("_id");
+		const staticArea = browser.$("ui5-static-area");
+
+		assert.equal(staticArea.$(`.${componentId}`).getAttribute("dir"), "rtl", "dir property correctly set for static area item");
+	});
+
+	it("Test setting RTL for a static area item owner", () => {
+		const componentId = browser.$("#with-static-area").getProperty("_id");
+		const staticArea = browser.$("ui5-static-area");
+
+		browser.$("#with-static-area").setAttribute("dir", "rtl");
+		browser.executeAsync( async (done) => {
+			await window["sap-ui-webcomponents-bundle"].applyDirection();
+			await window["sap-ui-webcomponents-bundle"].renderFinished();
+
+			return done();
+		});
+		assert.equal(staticArea.$(`.${componentId}`).getAttribute("dir"), "rtl", "dir attribute dynamically set for static area item owner");
+	});
+
+	it("Test removing RTL for a static area item owner", () => {
+		const componentId = browser.$("#with-static-area-rtl").getProperty("_id");
+		const staticArea = browser.$("ui5-static-area");
+
+		browser.$("#with-static-area-rtl-container").removeAttribute("dir");
+		browser.executeAsync( async (done) => {
+			await window["sap-ui-webcomponents-bundle"].applyDirection();
+			await window["sap-ui-webcomponents-bundle"].renderFinished();
+
+			return done();
+		});
+		assert.notOk(staticArea.$(`.${componentId}`).getAttribute("dir"), "dir attribute dynamically removed for static area item owner");
+	});
 });