fix(ui5-responsive-popover): allow opening a popover from component (#…

…5070) Fixes: #5028
SAP · Apr 15, 2022 · 241a112 · 241a112
1 parent b03c56b
commit 241a112
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 10 deletions.
diff --git a/packages/base/hash.txt b/packages/base/hash.txt
@@ -1 +1 @@
-DkQ0iqK3nl9zgm3odHFLssq0yeA=
+aXOsMoveamyLbbL11B4HWANFdvM=
diff --git a/packages/main/src/Popover.js b/packages/main/src/Popover.js
@@ -508,10 +508,6 @@ class Popover extends Popup {
 		return { width, height };
 	}
 
-	get contentDOM() {
-		return this.shadowRoot.querySelector(".ui5-popup-content");
-	}
-
 	get arrowDOM() {
 		return this.shadowRoot.querySelector(".ui5-popover-arrow");
 	}

diff --git a/packages/main/src/Popup.js b/packages/main/src/Popup.js
@@ -591,6 +591,10 @@ class Popup extends UI5Element {
 		return this.shadowRoot.querySelector(".ui5-popup-root");
 	}
 
+	get contentDOM() {
+		return this.shadowRoot.querySelector(".ui5-popup-content");
+	}
+
 	get styles() {
 		return {
 			root: {},

diff --git a/packages/main/src/ResponsivePopover.js b/packages/main/src/ResponsivePopover.js
@@ -167,6 +167,10 @@ class ResponsivePopover extends Popover {
 		return this.shadowRoot.querySelector("[ui5-dialog]");
 	}
 
+	get contentDOM() {
+		return this._isPhone ? this._dialog.contentDOM : super.contentDOM;
+	}
+
 	get _isPhone() {
 		return isPhone();
 	}

diff --git a/packages/main/test/pages/ResponsivePopover.html b/packages/main/test/pages/ResponsivePopover.html
@@ -124,6 +124,12 @@ <h2> Inputs based component that opens popover/dialog within dialog</h2>
 		Content
 	</ui5-responsive-popover>
 
+	<ui5-button id="btnRpWithPopover">Open RP that opens a Popover</ui5-button>
+	<ui5-responsive-popover id="btnRpWithPopoverRP">
+		<ui5-button id="btnRpWithPopoverOpener">Open Popover</ui5-button>
+	</ui5-responsive-popover>
+	<ui5-popover id="btnRpWithPopoverInnerPopover">Test popover</ui5-popover>
+
 	<script>
 		btnOpen.addEventListener("click", function(event) {
 			respPopover.showAt(btnOpen);
@@ -173,6 +179,14 @@ <h2> Inputs based component that opens popover/dialog within dialog</h2>
 			simpleRPInitialFocusPrevented.showAt(event.target, true);
 		});
 
+		btnRpWithPopover.addEventListener("click", function () {
+			btnRpWithPopoverRP.showAt(btnRpWithPopover)
+		});
+
+		btnRpWithPopoverOpener.addEventListener("click", function () {
+			btnRpWithPopoverInnerPopover.showAt(btnRpWithPopoverOpener);
+		});
+
 		btnOpenWithAttr.addEventListener("click", function () {
 			popoverAttr.setAttribute("open", "");
 		});

diff --git a/packages/main/test/specs/ResponsivePopover.spec.js b/packages/main/test/specs/ResponsivePopover.spec.js
@@ -62,4 +62,16 @@ describe("ResponsivePopover general interaction", () => {
 		await btnCloseWithAttr.click();
 		assert.notOk(await popover.isDisplayedInViewport(), "Popover is closed.");
 	});
+
+	it("tests opening a popover from a responsive popover", async () => {
+		const btnOpenRP = await browser.$("#btnRpWithPopover");
+
+		await btnOpenRP.click();
+
+		const btnOpenPopover = await browser.$("#btnRpWithPopoverOpener");
+		await btnOpenPopover.click();
+
+		const popover = await browser.$("#btnRpWithPopoverInnerPopover");
+		assert.ok(await popover.isDisplayedInViewport(), "Popover is opened.");
+	});
 });
diff --git a/packages/theming/css-vars-usage.json b/packages/theming/css-vars-usage.json
@@ -169,34 +169,37 @@
   "--sapErrorBorderColor",
   "--sapField_Active_BorderColor",
   "--sapField_Background",
+  "--sapField_BackgroundStyle",
   "--sapField_BorderColor",
   "--sapField_BorderCornerRadius",
   "--sapField_BorderStyle",
   "--sapField_BorderWidth",
   "--sapField_Focus_Background",
   "--sapField_Focus_BorderColor",
   "--sapField_Hover_Background",
+  "--sapField_Hover_BackgroundStyle",
   "--sapField_Hover_BorderColor",
   "--sapField_HoverBorderColor",
   "--sapField_InformationBackground",
-  "--sapField_InformationBorderStyle",
+  "--sapField_InformationBackgroundStyle",
   "--sapField_InformationBorderWidth",
   "--sapField_InformationColor",
   "--sapField_InvalidBackground",
-  "--sapField_InvalidBorderStyle",
+  "--sapField_InvalidBackgroundStyle",
   "--sapField_InvalidBorderWidth",
   "--sapField_InvalidColor",
   "--sapField_PlaceholderTextColor",
   "--sapField_ReadOnly_Background",
+  "--sapField_ReadOnly_BackgroundStyle",
   "--sapField_ReadOnly_BorderColor",
   "--sapField_RequiredColor",
   "--sapField_SuccessBackground",
-  "--sapField_SuccessBorderStyle",
+  "--sapField_SuccessBackgroundStyle",
   "--sapField_SuccessBorderWidth",
   "--sapField_SuccessColor",
   "--sapField_TextColor",
   "--sapField_WarningBackground",
-  "--sapField_WarningBorderStyle",
+  "--sapField_WarningBackgroundStyle",
   "--sapField_WarningBorderWidth",
   "--sapField_WarningColor",
   "--sapFontBoldFamily",

diff --git a/packages/theming/hash.txt b/packages/theming/hash.txt
@@ -1 +1 @@
-CQhk8M6oN0XzkZBkgImthR2kdTs=
+5cRcd16xPQ6SL0cTQosGtwcesyE=