diff --git a/packages/main/src/Dialog.js b/packages/main/src/Dialog.js index 63ea1442e143..4f7b17cd874c 100644 --- a/packages/main/src/Dialog.js +++ b/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"; } diff --git a/packages/main/src/Popover.js b/packages/main/src/Popover.js index ad49cfb37504..12ec2757acf8 100644 --- a/packages/main/src/Popover.js +++ b/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 ui5-popover 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"; } diff --git a/packages/main/src/Popup.js b/packages/main/src/Popup.js index 4f4fbf106b63..7a6052312953 100644 --- a/packages/main/src/Popup.js +++ b/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 * diff --git a/packages/main/test/pages/Popover.html b/packages/main/test/pages/Popover.html index 0e3c001a6af9..a54fb1b8b138 100644 --- a/packages/main/test/pages/Popover.html +++ b/packages/main/test/pages/Popover.html @@ -171,6 +171,20 @@ + Opens modal popover with no block layer! + + + + Hello + Again + Wooooooooooooooooooooooooooooorld + + +
+ Close +
+
+ Opens popover with initial focus! @@ -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(); }); diff --git a/packages/main/test/specs/Popover.spec.js b/packages/main/test/specs/Popover.spec.js index 785a78095c74..ce762f5cebb6 100644 --- a/packages/main/test/specs/Popover.spec.js +++ b/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");