fix(ui5-popover): correct arrow position on RTL (#2488)

FIXES: #2387
SAP · Nov 18, 2020 · 3b81ad8 · 3b81ad8
1 parent 973a80d
commit 3b81ad8
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 0 deletions.
diff --git a/packages/main/src/Popup.hbs b/packages/main/src/Popup.hbs
@@ -5,6 +5,7 @@
 	aria-modal="{{_ariaModal}}"
 	aria-label="{{_ariaLabel}}"
 	aria-labelledby="{{_ariaLabelledBy}}"
+	dir="{{dir}}"
 >
 
 	<span class="first-fe" data-ui5-focus-trap tabindex="0" @focusin={{forwardToLast}}></span>

diff --git a/packages/main/src/Popup.js b/packages/main/src/Popup.js
@@ -1,4 +1,5 @@
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { getFirstFocusableElement, getLastFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
 import createStyleInHead from "@ui5/webcomponents-base/dist/util/createStyleInHead.js";
@@ -456,6 +457,10 @@ class Popup extends UI5Element {
 		return this.ariaLabel || undefined;
 	}
 
+	get dir() {
+		return getRTL() ? "rtl" : "ltr";
+	}
+
 	get styles() {
 		return {
 			root: {},

diff --git a/packages/main/src/themes/Popover.css b/packages/main/src/themes/Popover.css
@@ -39,6 +39,18 @@
 	margin: 0.1875rem 0 0 -0.375rem;
 }
 
+:host([actual-placement-type="Left"]) [dir=rtl] .ui5-popover-arrow:after {
+	margin: .1875rem .25rem 0 0;
+}
+
+:host([actual-placement-type="Bottom"]) [dir=rtl] .ui5-popover-arrow:after {
+	margin: .1875rem .125rem 0 0;
+}
+
+:host([actual-placement-type="Top"]) [dir=rtl] .ui5-popover-arrow:after {
+	margin: -0.4375rem .125rem 0 0
+}
+
 /* pointing downward arrow */
 :host([actual-placement-type="Top"]) .ui5-popover-arrow {
 	left: calc(50% - 0.5625rem);
@@ -64,6 +76,11 @@
 	margin: 0.125rem 0 0 0.25rem;
 }
 
+:host(:not([actual-placement-type])) [dir=rtl] .ui5-popover-arrow:after,
+:host([actual-placement-type="Right"]) [dir=rtl] .ui5-popover-arrow:after {
+	margin: .1875rem -.375rem 0 0;
+}
+
 :host([no-arrow]) .ui5-popover-arrow {
 	display: none;
 }