fix(ui5-input): fix value state msg appearance (#2075)

Fixes the height when the value state msg is displayed as standalone popovr and within the suggestions popover FIXES #2070
SAP · Aug 10, 2020 · edfe8ca · edfe8ca
1 parent bf19767
commit edfe8ca
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 3 deletions.
diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
@@ -732,7 +732,7 @@ class Input extends UI5Element {
 	}
 
 	/**
-	 * Checks if the popover is open.
+	 * Checks if the value state popover is open.
 	 * @returns {Boolean} true if the popover is open, false otherwise
 	 * @public
 	 */
@@ -1034,6 +1034,7 @@ class Input extends UI5Element {
 		return {
 			popoverValueState: {
 				"ui5-valuestatemessage-root": true,
+				"ui5-responsive-popover-header": !this.isOpen(),
 				"ui5-valuestatemessage--success": this.valueState === ValueState.Success,
 				"ui5-valuestatemessage--error": this.valueState === ValueState.Error,
 				"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,

diff --git a/packages/main/src/InputPopover.hbs b/packages/main/src/InputPopover.hbs
@@ -72,7 +72,7 @@
 			class="ui5-valuestatemessage-popover"
 			placement-type="Bottom"
 		>
-			<div slot="header" class="ui5-responsive-popover-header {{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
+			<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 				{{> valueStateMessage}}
 			</div>
 		</ui5-popover>

diff --git a/packages/main/src/themes/ResponsivePopoverCommon.css b/packages/main/src/themes/ResponsivePopoverCommon.css
@@ -123,7 +123,7 @@
 .ui5-responsive-popover-header .row {
 	box-sizing: border-box;
 	padding: 0.25rem 1rem;
-	height: 2.5rem;
+	min-height: 2.5rem;
 	display: flex;
 	justify-content: center;
 	align-items: center;