fix(ui5-responsive-popover): fix header styles (#3176)

We use lit-html classMaps to render classes out of objects , but it works with this getter "get classes()" not with any getters. FIXES: #3173
SAP · Apr 22, 2021 · 83a88af · 83a88af
1 parent 023945a
commit 83a88af
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/packages/main/src/ResponsivePopover.hbs b/packages/main/src/ResponsivePopover.hbs
@@ -13,7 +13,7 @@
 			{{#if header.length}}
 				<slot slot="header" name="header"></slot>
 			{{else}}
-				<header class="{{dialogClasses.header}}">
+				<header class="{{classes.header}}">
 					{{#if headerText }}
 						<ui5-title level="H2" class="ui5-popup-header-text ui5-responsive-popover-header-text">{{headerText}}</ui5-title>
 					{{/if}}

diff --git a/packages/main/src/ResponsivePopover.js b/packages/main/src/ResponsivePopover.js
@@ -90,13 +90,15 @@ class ResponsivePopover extends Popover {
 		return [Popover.styles, ResponsivePopoverCss];
 	}
 
-	get dialogClasses() {
-		return {
-			header: {
-				"ui5-responsive-popover-header": true,
-				"ui5-responsive-popover-header-no-title": !this.headerText,
-			},
+	get classes() {
+		const allClasses = super.classes;
+
+		allClasses.header = {
+			"ui5-responsive-popover-header": true,
+			"ui5-responsive-popover-header-no-title": !this.headerText,
 		};
+
+		return allClasses;
 	}
 
 	static get template() {

diff --git a/packages/main/test/pages/ResponsivePopover.html b/packages/main/test/pages/ResponsivePopover.html
@@ -94,6 +94,11 @@ <h2> Inputs based component that opens popover/dialog within dialog</h2>
 		<ui5-date-picker></ui5-date-picker>
 	</ui5-dialog>
 
+	<ui5-button id="btnSimpleRP">Open Simple RP</ui5-button>
+	<ui5-responsive-popover id="simpleRP">
+		Content
+	</ui5-responsive-popover>
+
 	<script>
 		btnOpen.addEventListener("click", function(event) {
 			respPopover.open(btnOpen);
@@ -118,6 +123,10 @@ <h2> Inputs based component that opens popover/dialog within dialog</h2>
 		btnOpenDialog.addEventListener('click', function (event) {
 			dialog.open(btnOpenDialog);
 		});
+
+		btnSimpleRP.addEventListener("click", function(event) {
+			simpleRP.open(btnSimpleRP);
+		});
 	</script>
 </body>
 </html>