chore(ui5-popover): fix arrow position in RTL direction (#10293)

SAP · Dec 5, 2024 · e96fab2 · e96fab2
1 parent 6d85350
commit e96fab2
Show file tree

Hide file tree

Showing 6 changed files with 221 additions and 9 deletions.
diff --git a/packages/main/src/Popover.ts b/packages/main/src/Popover.ts
@@ -607,6 +607,8 @@ class Popover extends Popup {
 		const borderRadius = Number.parseInt(window.getComputedStyle(this).getPropertyValue("border-radius"));
 		const arrowPos = this.getArrowPosition(targetRect, popoverSize, left, top, isVertical, borderRadius);
 
+		this._left += this.getRTLCorrectionLeft();
+
 		return {
 			arrow: arrowPos,
 			top: this._top,
@@ -615,6 +617,10 @@ class Popover extends Popup {
 		};
 	}
 
+	getRTLCorrectionLeft() {
+		return parseFloat(window.getComputedStyle(this).left) - this.getBoundingClientRect().left;
+	}
+
 	/**
 	 * Calculates the position for the arrow.
 	 * @private

diff --git a/packages/main/src/themes/Popover.css b/packages/main/src/themes/Popover.css
@@ -8,14 +8,6 @@
 	box-shadow: var(--_ui5_popover_no_arrow_box_shadow);
 }
 
-:host([opened][actual-placement="Top"]) {
-	margin-top: var(--_ui5-popover-margin-bottom);
-}
-
-:host([opened][actual-placement="Bottom"]) {
-	margin-top: var(--_ui5-popover-margin-top);
-}
-
 /* pointing upward arrow */
 :host([actual-placement="Bottom"]) .ui5-popover-arrow {
 	left: calc(50% - 0.5625rem);

diff --git a/packages/main/src/themes/base/rtl-parameters.css b/packages/main/src/themes/base/rtl-parameters.css
@@ -22,7 +22,8 @@
 	--_ui5-shellbar-notification-btn-count-offset: -0.125rem;
 }
 
-[dir="rtl"] {
+[dir="rtl"],
+[dir="rtl"] :host {
 	--_ui5_icon_transform_scale: scale(-1, 1);
 	--_ui5_panel_toggle_btn_rotation: var(--_ui5_rotation_minus_90deg);
 	--_ui5_li_notification_group_toggle_btn_rotation: var(--_ui5_rotation_minus_90deg);

diff --git a/packages/main/test/pages/Popover.html b/packages/main/test/pages/Popover.html
@@ -544,6 +544,61 @@ <h3>Popover in ShadowRoot, Opener set as ID in window.document</h3>
 	<br>
 	<br>
 
+	<div dir="rtl" style="height: 420px; overflow-y: scroll;">
+		<div style="height: 100%; width: 100%">
+			<span>RTL sample with scrollbar</span>
+			<br>
+			<span> Popover placement Top</span>
+			<div class="centered-button">
+				<ui5-button id="btn1">Open</ui5-button>
+			</div>
+			<br>
+
+			<span> Popover placement Bottom</span>
+			<div class="centered-button">
+				<ui5-button id="btn2">Open</ui5-button>
+			</div>
+			<br>
+
+			<span> Popover placement Start</span>
+			<ui5-button id="btn3">Open</ui5-button>
+			<br>
+
+			<span> Popover placement End</span>
+			<ui5-button id="btn4">Open</ui5-button>
+
+			<div style="height: 200px;"></div>
+
+			<ui5-popover id="respPopover1" opener="btn1" placement="Top">
+				<div class="popover-content">
+					<ui5-label for="emailInput" required show-colon>Email</ui5-label>
+				</div>
+			</ui5-popover>
+
+			<ui5-popover id="respPopover2" opener="btn2" placement="Bottom">
+				<div class="popover-content">
+					<ui5-label for="emailInput" required show-colon>Email</ui5-label>
+				</div>
+			</ui5-popover>
+
+			<ui5-popover id="respPopover3" opener="btn3" placement="Start">
+				<div class="popover-content">
+					<ui5-label for="emailInput" required show-colon>Email</ui5-label>
+				</div>
+			</ui5-popover>
+
+			<ui5-popover id="respPopover4" opener="btn4" placement="End">
+				<div class="popover-content">
+					<ui5-label for="emailInput" required show-colon>Email</ui5-label>
+				</div>
+			</ui5-popover>
+		</div>
+	</div>
+
+	<iframe src="./PopoverRTL.html"></iframe>
+
+	<div style="height: 100px;"></div>
+
 	<script>
 		btn.addEventListener("click", function (event) {
 			pop.opener = btn;
@@ -857,6 +912,35 @@ <h3>Popover in ShadowRoot, Opener set as ID in window.document</h3>
 			document.getElementById("vertical").open = true;
 		});
 
+		const btn1 = document.getElementById("btn1");
+		const respPopover1 = document.getElementById("respPopover1");
+
+		const btn2 = document.getElementById("btn2");
+		const respPopover2 = document.getElementById("respPopover2");
+
+		const btn3 = document.getElementById("btn3");
+		const respPopover3 = document.getElementById("respPopover3");
+
+
+		const btn4 = document.getElementById("btn4");
+		const respPopover4 = document.getElementById("respPopover4");
+
+		btn1.addEventListener("click", () => {
+			respPopover1.open = !respPopover1.open;
+		});
+
+		btn2.addEventListener("click", () => {
+			respPopover2.open = !respPopover2.open;
+		});
+
+		btn3.addEventListener("click", () => {
+			respPopover3.open = !respPopover3.open;
+		});
+
+		btn4.addEventListener("click", () => {
+			respPopover4.open = !respPopover4.open;
+		});
+
 		class OpenerTestShadowRootId extends HTMLElement {
 			constructor() {
 				super();

diff --git a/packages/main/test/pages/PopoverRTL.html b/packages/main/test/pages/PopoverRTL.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html dir="rtl">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<title>Popover</title>
+
+	<script data-ui5-config type="application/json">
+		{
+			"language": "EN",
+			"libs": "sap.ui.webc.main",
+			"rtl": true
+		}
+	</script>
+
+
+	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
+
+
+	<link rel="stylesheet" type="text/css" href="./styles/Popover.css">
+
+	<script>
+		// delete Document.prototype.adoptedStyleSheets
+	</script>
+</head>
+
+<body>
+<style>
+
+	.center {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+		width: 100%;
+	}
+
+	body {
+		padding-top: 100px;
+	}
+</style>
+
+<span> Popover placement Top</span>
+<div class="center">
+	<ui5-button id="btn1">Open</ui5-button>
+</div>
+<br>
+
+<span> Popover placement Bottom</span>
+<div class="center">
+	<ui5-button id="btn2">Open</ui5-button>
+</div>
+<br>
+
+<span> Popover placement Start</span>
+<ui5-button id="btn3">Open</ui5-button>
+<br>
+
+<ui5-button id="btn4">Open</ui5-button>
+<span> Popover placement End</span>
+
+<ui5-popover id="respPopover1" opener="btn1" placement="Top">
+	<div class="popover-content">
+		<ui5-label for="emailInput" required show-colon>Email</ui5-label>
+	</div>
+</ui5-popover>
+
+<ui5-popover id="respPopover2" opener="btn2" placement="Bottom">
+	<div class="popover-content">
+		<ui5-label for="emailInput" required show-colon>Email</ui5-label>
+	</div>
+</ui5-popover>
+
+<ui5-popover id="respPopover3" opener="btn3" placement="Start">
+	<div class="popover-content">
+		<ui5-label for="emailInput" required show-colon>Email</ui5-label>
+	</div>
+</ui5-popover>
+
+<ui5-popover id="respPopover4" opener="btn4" placement="End">
+	<div class="popover-content">
+		<ui5-label for="emailInput" required show-colon>Email</ui5-label>
+	</div>
+</ui5-popover>
+
+<div style="height: 200px;"></div>
+
+<script>
+	const btn1 = document.getElementById("btn1");
+	const respPopover1 = document.getElementById("respPopover1");
+
+	const btn2 = document.getElementById("btn2");
+	const respPopover2 = document.getElementById("respPopover2");
+
+	const btn3 = document.getElementById("btn3");
+	const respPopover3 = document.getElementById("respPopover3");
+
+
+	const btn4 = document.getElementById("btn4");
+	const respPopover4 = document.getElementById("respPopover4");
+
+
+	btn1.addEventListener("click", () => {
+		respPopover1.open = !respPopover1.open;
+	});
+
+	btn2.addEventListener("click", () => {
+		respPopover2.open = !respPopover2.open;
+	});
+
+	btn3.addEventListener("click", () => {
+		respPopover3.open = !respPopover3.open;
+	});
+
+	btn4.addEventListener("click", () => {
+		respPopover4.open = !respPopover4.open;
+	});
+</script>
+</body>
+
+</html>
diff --git a/packages/main/test/pages/styles/Popover.css b/packages/main/test/pages/styles/Popover.css
@@ -91,4 +91,11 @@ ui5-date-picker,
 
 #divOpenAndScroll > div {
     height: 2000px;
+}
+
+.centered-button {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
 }