refactor(ui5-popup): Move more common functionality to Popup.js (#1853)

Author: vladitasev

packages/main/bundle.esm.js

@@ -78,8 +78,6 @@ import StandardListItem from "./dist/StandardListItem.js";
 import CustomListItem from "./dist/CustomListItem.js";
 import GroupHeaderListItem from "./dist/GroupHeaderListItem.js";
 
-
-
 // used in test pages
 import RenderScheduler from "@ui5/webcomponents-base/dist/RenderScheduler.js";
 window.RenderScheduler = RenderScheduler;

packages/main/src/Dialog.hbs

@@ -1 +1,20 @@
-{{>include "./Popup.hbs"}}
+{{>include "./Popup.hbs"}}
+
+{{#*inline "beforeContent"}}
+	<header class="ui5-popup-header-root" id="ui5-popup-header">
+		{{#if header.length }}
+			<slot name="header"></slot>
+		{{else}}
+			<h2 class="ui5-popup-header-text">{{headerText}}</h2>
+		{{/if}}
+	</header>
+{{/inline}}
+
+{{#*inline "afterContent"}}
+	{{#if footer.length }}
+		<footer class="ui5-popup-footer-root">
+			<slot name="footer"></slot>
+		</footer>
+	{{/if}}
+{{/inline}}
+

packages/main/src/Dialog.js

@@ -1,20 +1,54 @@
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
-import { addOpenedPopup, removeOpenedPopup } from "./popup-utils/OpenedPopupsRegistry.js";
-
 import Popup from "./Popup.js";
+
 // Template
 import DialogTemplate from "./generated/templates/DialogTemplate.lit.js";
-
 // Styles
+import PopupsCommonCss from "./generated/themes/PopupsCommon.css.js";
 import dialogCSS from "./generated/themes/Dialog.css.js";
-import { getFocusedElement } from "./popup-utils/PopupUtils.js";
 
 /**
  * @public
  */
 const metadata = {
 	tag: "ui5-dialog",
+	slots: /** @lends  sap.ui.webcomponents.main.Popup.prototype */ {
+		/**
+		 * Defines the header HTML Element.
+		 *
+		 * @type {HTMLElement[]}
+		 * @slot
+		 * @public
+		 */
+		header: {
+			type: HTMLElement,
+		},
+
+		/**
+		 * Defines the footer HTML Element.
+		 *
+		 * @type {HTMLElement[]}
+		 * @slot
+		 * @public
+		 */
+		footer: {
+			type: HTMLElement,
+		},
+	},
 	properties: /** @lends  sap.ui.webcomponents.main.Dialog.prototype */ {
+		/**
+		 * Defines the header text.
+		 * <br><br>
+		 * <b>Note:</b> If <code>header</code> slot is provided, the <code>headerText</code> is ignored.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		headerText: {
+			type: String,
+		},
+
 		/**
 		 * Determines whether the <code>ui5-dialog</code> should be stretched to fullscreen.
 		 * <br><br>
@@ -29,6 +63,9 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * @private
+		 */
 		onPhone: {
 			type: Boolean,
 		},
@@ -78,77 +115,34 @@ class Dialog extends Popup {
 	}
 
 	static get styles() {
-		return [Popup.styles, dialogCSS];
-	}
-
-	constructor() {
-		super();
+		return [PopupsCommonCss, dialogCSS];
 	}
 
 	onBeforeRendering() {
 		this.onPhone = isPhone();
 	}
 
-	/**
-	* Opens the <code>ui5-dialog</code>.
-	* @public
-	*/
-	open() {
-		super.open();
-
-		this._focusedElementBeforeOpen = getFocusedElement();
-		this.fireEvent("before-open", {});
-		this.show();
-		this.applyInitialFocus();
-
-		Dialog.blockBodyScrolling();
-
-		addOpenedPopup(this);
-		this.opened = true;
-		this.fireEvent("after-open", {});
-	}
-
-	/**
-	* Closes the <code>ui5-dialog</code>.
-	* @public
-	*/
-	close(escPressed) {
-		const prevented = !this.fireEvent("before-close", { escPressed }, true);
-
-		if (prevented || !this.opened) {
-			return;
-		}
-
-		super.close();
-		this.hide();
-		this.opened = false;
-
-		this.fireEvent("after-close", {});
-
-		removeOpenedPopup(this);
-		Dialog.unblockBodyScrolling();
-
-		if (this._focusedElementBeforeOpen && !this._disableInitialFocus) {
-			this._focusedElementBeforeOpen.focus();
-		}
+	get isModal() { // Required by Popup.js
+		return true;
 	}
 
-	onExitDOM() {
-		if (this.isOpen()) {
-			Dialog.unblockBodyScrolling();
-		}
+	get _ariaLabelledBy() { // Required by Popup.js
+		return "ui5-popup-header";
 	}
 
-	get isModal() {
+	get _ariaModal() { // Required by Popup.js
 		return true;
 	}
 
-	get _displayFooter() {
-		return true;
-	}
-
-	get _displayHeader() {
-		return true;
+	get classes() {
+		return {
+			root: {
+				"ui5-popup-root": true,
+			},
+			content: {
+				"ui5-popup-content": true,
+			},
+		};
 	}
 }
 

packages/main/src/Popover.hbs

@@ -1,5 +1,25 @@
 {{>include "./Popup.hbs"}}
 
-{{#*inline "beforeHeader"}}
+{{#*inline "beforeContent"}}
 	<span class="ui5-popover-arrow" style="{{styles.arrow}}"></span>
-{{/inline}}
+
+	{{#if _displayHeader}}
+		<header class="ui5-popup-header-root" id="ui5-popup-header">
+			{{#if header.length }}
+				<slot name="header"></slot>
+			{{else}}
+				<h2 class="ui5-popup-header-text">{{headerText}}</h2>
+			{{/if}}
+		</header>
+	{{/if}}
+{{/inline}}
+
+{{#*inline "afterContent"}}
+	{{#if _displayFooter}}
+		{{#if footer.length }}
+			<footer class="ui5-popup-footer-root">
+				<slot name="footer"></slot>
+			</footer>
+		{{/if}}
+	{{/if}}
+{{/inline}}