fix(ui5-combobox, ui5-multicombobox): center ValueState text (#2733)

ValueState text is now vertically centered in the Popover's header. Fixes: #2274
SAP · Jan 27, 2021 · b2c770a · b2c770a
1 parent 418034e
commit b2c770a
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 6 deletions.
diff --git a/packages/main/src/ComboBox.js b/packages/main/src/ComboBox.js
@@ -814,7 +814,7 @@ class ComboBox extends UI5Element {
 			suggestionPopoverHeader: {
 				"display": this._listWidth === 0 ? "none" : "inline-block",
 				"width": `${this._listWidth}px`,
-				"padding": "0.5625rem 1rem",
+				"padding": "0.9125rem 1rem",
 			},
 		};
 	}

diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js
@@ -872,9 +872,8 @@ class MultiComboBox extends UI5Element {
 		return {
 			popoverValueStateMessage: {
 				"width": `${this._listWidth}px`,
-				"min-height": "2.5rem",
-				"padding": "0.5625rem 1rem",
 				"display": this._listWidth === 0 ? "none" : "inline-block",
+				"padding": "0.9125rem 1rem",
 			},
 			popoverHeader: {
 				"width": `${this._inputWidth}px`,

diff --git a/packages/main/src/themes/ResponsivePopover.css b/packages/main/src/themes/ResponsivePopover.css
@@ -13,7 +13,7 @@
 }
 
 .ui5-responsive-popover-header {
-	height: var(--_ui5-responnsive_popover_header_height);
+	height: var(--_ui5-responsive_popover_header_height);
 	display: flex;
 	justify-content: space-between;
 	align-items: center;

diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
@@ -70,7 +70,7 @@
 	--_ui5_textarea_padding: 0.5625rem 0.6875rem;
 
 	/* Responsive Popover */
-	--_ui5-responnsive_popover_header_height: 2.75rem;
+	--_ui5-responsive_popover_header_height: 2.75rem;
 
 	/* Side Navigation */
 	--ui5_side_navigation_item_height: 2.75rem;
@@ -210,7 +210,7 @@
 	--_ui5_radiobutton_min_width: var(--_ui5_radiobutton_min_width_compact);
 
 	/* Responsive Popover */
-	--_ui5-responnsive_popover_header_height: 2.5rem;
+	--_ui5-responsive_popover_header_height: 2.5rem;
 
 	/* Side Navigation */
 	--ui5_side_navigation_item_height: 2rem;