fix(ui5-popup): adjust default header height (#3506)

georgimkv · ilhan007 · commit 4b0be347ab48 · 2021-07-26T11:07:51.000+03:00
diff --git a/packages/main/src/themes/PopupsCommon.css b/packages/main/src/themes/PopupsCommon.css
@@ -68,9 +68,9 @@
 :host([header-text]) .ui5-popup-header-text {
     padding: 0 0.25rem;
     text-align: center;
-    min-height: 3rem;
-    max-height: 3rem;
-    line-height: 3rem;
+    min-height: var(--_ui5_popup_default_header_height);
+    max-height: var(--_ui5_popup_default_header_height);
+    line-height: var(--_ui5_popup_default_header_height);
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
@@ -39,6 +39,10 @@
 	--_ui5_group_header_list_item_height: 2.75rem;
 	--_ui5_list_busy_row_height: 3rem;
 	--_ui5_month_picker_item_height: 3rem;
+
+	/* Popup subclasses */
+	--_ui5_popup_default_header_height: 2.75rem;
+
 	--_ui5_year_picker_item_height: 3rem;
 	--_ui5_tokenizer_root_padding: 0.1875rem;
 	--_ui5_token_height: 1.625rem;
@@ -155,6 +159,9 @@
 	--_ui5_input_icon_padding: .25rem .5rem;
 	--_ui5_input_value_state_icon_padding: .1875rem .5rem;
 
+	/* Popup subclasses */
+	--_ui5_popup_default_header_height: 2.5rem;
+
 	/* TextArea */
 	--_ui5_textarea_padding: .1875rem .5rem;
 
diff --git a/packages/main/test/pages/Dialog.html b/packages/main/test/pages/Dialog.html
@@ -25,6 +25,8 @@
 </head>
 
 <body>
+	<ui5-checkbox text="Compact size" id="cbCompact"></ui5-checkbox>
+	<br>
 	<ui5-button id="btnOpenDialog">Open Streched Dialog</ui5-button>
 	<br>
 	<br>
@@ -355,6 +357,10 @@
 	<ui5-dialog id="empty-dialog">Empty</ui5-dialog>
 
 	<script>
+		cbCompact.addEventListener("change", function () {
+			document.body.classList.toggle("ui5-content-density-compact", cbCompact.checked);
+		});
+
 		let preventClosing = true;
 
 		btnOpenDialog.addEventListener("click", function () {
diff --git a/packages/main/test/pages/ResponsivePopover.html b/packages/main/test/pages/ResponsivePopover.html
@@ -137,9 +137,6 @@ <h2> Inputs based component that opens popover/dialog within dialog</h2>
 			rpTopWithArrow.open(btnRpTopWithArrow);
 		});
 
-		btnRpTopWithArrow.addEventListener("click", function(event) {
-			rpTopWithArrow.openBy(btnRpTopWithArrow);
-		});
 	</script>
 </body>
 </html>
