feat(ui5-popover): implement hide-block-layer property (#2413)

Author: fifoosid

packages/main/src/Dialog.js

@@ -187,6 +187,10 @@ class Dialog extends Popup {
 		return true;
 	}
 
+	get shouldHideBackdrop() { // Required by Popup.js
+		return false;
+	}
+
 	get _ariaLabelledBy() { // Required by Popup.js
 		return this.ariaLabel ? undefined : "ui5-popup-header";
 	}

packages/main/src/Popover.js

@@ -106,6 +106,17 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines whether the block layer will be shown if modal property is set to true.
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 * @since 1.0.0-rc.10
+		 */
+		hideBackdrop: {
+			type: Boolean,
+		},
+
 		/**
 		 * Determines whether the <code>ui5-popover</code> arrow is hidden.
 		 *
@@ -620,6 +631,10 @@ class Popover extends Popup {
 		return this.modal;
 	}
 
+	get shouldHideBackdrop() { // Required by Popup.js
+		return this.hideBackdrop;
+	}
+
 	get _ariaLabelledBy() { // Required by Popup.js
 		return this.ariaLabel ? undefined : "ui5-popup-header";
 	}

packages/main/src/Popup.js

@@ -67,7 +67,7 @@ const metadata = {
 		 * Defines the aria-label attribute for the popup
 		 *
 		 * @type {String}
-		 * @defaultvalue: ""
+		 * @defaultvalue ""
 		 * @private
 		 * @since 1.0.0-rc.8
 		 */
@@ -313,7 +313,7 @@ class Popup extends UI5Element {
 			return;
 		}
 
-		if (this.isModal) {
+		if (this.isModal && !this.shouldHideBackdrop) {
 			// create static area item ref for block layer
 			this.getStaticAreaItemDomRef();
 			this._blockLayerHidden = false;
@@ -430,6 +430,15 @@ class Popup extends UI5Element {
 	 */
 	get isModal() {} // eslint-disable-line
 
+	/**
+	 * Implement this getter with relevant logic in order to hide the block layer (f.e. based on a public property)
+	 *
+	 * @protected
+	 * @abstract
+	 * @returns {boolean}
+	 */
+	get shouldHideBackdrop() {} // eslint-disable-line
+
 	/**
 	 * Return the ID of an element in the shadow DOM that is going to label this popup
 	 *

packages/main/test/pages/Popover.html

@@ -171,6 +171,20 @@
 		</div>
 	</ui5-popover>
 
+	<ui5-button id="btnPopModalNoLayer">Opens modal popover with no block layer!</ui5-button>
+
+	<ui5-popover id="modalPopoverNoLayer" modal header-text="Modal popover" hide-backdrop>
+		<ui5-list>
+			<ui5-li>Hello</ui5-li>
+			<ui5-li>Again</ui5-li>
+			<ui5-li>Wooooooooooooooooooooooooooooorld</ui5-li>
+		</ui5-list>
+
+		<div slot="footer">
+			<ui5-button id="modalPopoverNoLayerClose">Close</ui5-button>
+		</div>
+	</ui5-popover>
+
 	<ui5-button id="btnPopFocus">Opens popover with initial focus!</ui5-button>
 
 	<ui5-popover id="popFocus" initial-focus="focusMe" header-text="Popover header">
@@ -374,6 +388,14 @@
 			modalPopover.openBy(btnPopModal);
 		});
 
+		btnPopModalNoLayer.addEventListener("click", function() {
+			modalPopoverNoLayer.openBy(btnPopModalNoLayer);
+		});
+
+		modalPopoverNoLayerClose.addEventListener("click", function() {
+			modalPopoverNoLayer.close();
+		});
+
 		modalPopoverClose.addEventListener("click", function (event) {
 			modalPopover.close();
 		});

packages/main/test/specs/Popover.spec.js

@@ -137,6 +137,32 @@ describe("Popover general interaction", () => {
 		assert.ok(!popover.isDisplayedInViewport(), "Popover is closed.");
 	});
 
+	it("tests modal popover with no block layer", () => {
+		const btnOpenPopover = $("#btnPopModalNoLayer");
+		const popover = $("#modalPopoverNoLayer");
+		const popoverId = popover.getProperty("_id");
+
+		btnOpenPopover.click();
+		assert.ok(popover.getProperty("opened"), "Popover is opened.");
+
+		const blockLayerIsCreated = browser.execute( (popoverId) => {
+			const staticAreaItems = document.querySelectorAll("ui5-static-area-item");
+			let result = false;
+
+			staticAreaItems.forEach(item => {
+				if (item.shadowRoot.querySelector(".ui5-block-layer") && item.classList.contains(popoverId)) {
+					result = true;
+				}
+			});
+
+			return result
+		}, popoverId);
+
+		assert.notOk(blockLayerIsCreated, "Block layer is not created.");
+
+		browser.keys("Escape");
+	});
+
 	it("tests initial focus", () => {
 		const focusedButton = $("#focusMe");
 		const btnOpenPopover = $("#btnPopFocus");