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

Author: ilhan007

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}}

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() {

packages/main/test/pages/ResponsivePopover.html

@@ -130,11 +130,11 @@ <h2> Inputs based component that opens popover/dialog within dialog</h2>
 		});
 
 		btnSimpleRP.addEventListener("click", function(event) {
-			simpleRP.openBy(btnSimpleRP);
+			simpleRP.open(btnSimpleRP);
 		});
 
 		btnRpTopWithArrow.addEventListener("click", function(event) {
-			rpTopWithArrow.openBy(btnRpTopWithArrow);
+			rpTopWithArrow.open(btnRpTopWithArrow);
 		});
 	</script>
 </body>