diff --git a/packages/main/src/ResponsivePopover.hbs b/packages/main/src/ResponsivePopover.hbs
index bc39155b341c..14a3baa96af3 100644
--- a/packages/main/src/ResponsivePopover.hbs
+++ b/packages/main/src/ResponsivePopover.hbs
@@ -9,7 +9,22 @@
@ui5-afterClose="{{_afterDialogClose}}"
>
{{!-- forward slot header to inner dialog slot header --}}
-
+ {{#if header.length}}
+
+ {{else}}
+
+ {{/if}}
+
{{!-- forward slot footer to inner dialog slot footer --}}
diff --git a/packages/main/src/ResponsivePopover.js b/packages/main/src/ResponsivePopover.js
index 168f645221d2..9d08299bd267 100644
--- a/packages/main/src/ResponsivePopover.js
+++ b/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(),
+ ]);
}
/**
diff --git a/packages/main/src/themes/ResponsivePopover.css b/packages/main/src/themes/ResponsivePopover.css
index 603272dd7c07..3066e828164f 100644
--- a/packages/main/src/themes/ResponsivePopover.css
+++ b/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));
}
\ No newline at end of file
diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
index 1d30948f056a..247ab937e448 100644
--- a/packages/main/src/themes/base/sizes-parameters.css
+++ b/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;
}
\ No newline at end of file
diff --git a/packages/main/test/pages/ResponsivePopover.html b/packages/main/test/pages/ResponsivePopover.html
index 2e6331756b46..2916b570a900 100644
--- a/packages/main/test/pages/ResponsivePopover.html
+++ b/packages/main/test/pages/ResponsivePopover.html
@@ -45,7 +45,7 @@
-
+
Email: