fix(ui5-responsive-popover): implement default close button (#1501)

Author: fifoosid

packages/main/src/ResponsivePopover.hbs

@@ -9,7 +9,22 @@
 		@ui5-afterClose="{{_afterDialogClose}}"
 	>
 		{{!-- forward slot header to inner dialog slot header --}}
-		<slot slot="header" name="header"></slot>
+		{{#if header.length}}
+			<slot slot="header" name="header"></slot>
+		{{else}}
+			<header class="ui5-responsive-popover-header">
+				{{#if headerText}}
+					<ui5-title level="H5" class="ui5-responsive-popover-header-text">{{headerText}}</ui5-title>
+				{{/if}}
+				<ui5-button
+					icon="decline"
+					design="Transparent"
+					@click="{{close}}"
+				>
+				</ui5-button>
+			</header>
+		{{/if}}
+
 		<slot></slot>
 		{{!-- forward slot footer to inner dialog slot footer --}}
 		<slot slot="footer" name="footer"></slot>

packages/main/src/ResponsivePopover.js

@@ -4,6 +4,9 @@ import { getNextZIndex } from "./popup-utils/PopupUtils.js";
 import ResponsivePopoverTemplate from "./generated/templates/ResponsivePopoverTemplate.lit.js";
 import Popover from "./Popover.js";
 import Dialog from "./Dialog.js";
+import Button from "./Button.js";
+import Title from "./Title.js";
+import "@ui5/webcomponents-icons/dist/icons/decline.js";
 
 // Styles
 import ResponsivePopoverCss from "./generated/themes/ResponsivePopover.css.js";
@@ -82,7 +85,11 @@ class ResponsivePopover extends Popover {
 	}
 
 	static async onDefine() {
-		await Dialog.define();
+		await Promise.all([
+			Button.define(),
+			Dialog.define(),
+			Title.define(),
+		]);
 	}
 
 	/**

packages/main/src/themes/ResponsivePopover.css

@@ -10,4 +10,23 @@
 
 :host([opened]) {
 	display: inline-block;
+}
+
+.ui5-responsive-popover-header {
+	height: var(--_ui5-responnsive_popover_header_height);
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0 0 0 1rem;
+	box-shadow: var(--sapContent_HeaderShadow);
+}
+
+:host [dir="rtl"] .ui5-responsive-popover-header {
+	padding: 0 1rem 0 0;
+}
+
+.ui5-responsive-popover-header-text {
+	display: flex;
+	align-items: center;
+	width: calc(100% - var(--_ui5_button_base_min_width));
 }

packages/main/src/themes/base/sizes-parameters.css

@@ -56,6 +56,9 @@
 	--_ui5_tc_item_text_line_height: normal;
 	--_ui5_tc_item_icon_size: 1.5rem;
 	--_ui5_tc_item_add_text_margin_top: 0.625rem;
+
+	/* Responsive Popover */
+	--_ui5-responnsive_popover_header_height: 2.75rem;
 }
 
 [data-ui5-compact-size],
@@ -176,4 +179,7 @@
 
 	/* Radio Button */
 	--_ui5_radiobutton_min_width: var(--_ui5_radiobutton_min_width_compact);
+
+	/* Responsive Popover */
+	--_ui5-responnsive_popover_header_height: 2.5rem;
 }

packages/main/test/pages/ResponsivePopover.html

@@ -45,7 +45,7 @@
 	</ui5-responsive-popover>
 
 	<!-- with header-text and footer slot-->
-	<ui5-responsive-popover id="respPopover2" header-text="Newsletter subscription">
+	<ui5-responsive-popover id="respPopover2" header-text="Newsletter subscription for very long period of time">
 		<div class="popover-content">
 			<ui5-label for="emailInput" required>Email: </ui5-label>
 			<ui5-input id="emailInput" class="samples-margin-top" style="min-width: 150px;" placeholder="Enter Email"></ui5-input>