From 48bd6fe169ea4124475c1a801d4f52aedeecab40 Mon Sep 17 00:00:00 2001
From: Nikolay Deshev <nikolay.deshev@sap.com>
Date: Thu, 16 Sep 2021 11:57:11 +0300
Subject: [PATCH] fix(ui5-input): adjust value state paddings according to
 specifications (#3833)

The padding of the value state message popup and header are fixed to reflect the Fiori specifications.

Fixes: #3611
Closes: #3611
---
 packages/main/src/Input.js                     | 4 ++--
 packages/main/src/themes/ValueStateMessage.css | 9 +++++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
index e64a0fc1feef..3d2f324633c1 100644
--- a/packages/main/src/Input.js
+++ b/packages/main/src/Input.js
@@ -1168,7 +1168,8 @@ class Input extends UI5Element {
 		return {
 			popoverValueState: {
 				"ui5-valuestatemessage-root": true,
-				"ui5-responsive-popover-header": !this.isOpen(),
+				"ui5-valuestatemessage-header": true,
+				"ui5-responsive-popover-header": !this.isValueStateOpened(),
 				"ui5-valuestatemessage--success": this.valueState === ValueState.Success,
 				"ui5-valuestatemessage--error": this.valueState === ValueState.Error,
 				"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
@@ -1185,7 +1186,6 @@ class Input extends UI5Element {
 			suggestionPopoverHeader: {
 				"display": this._listWidth === 0 ? "none" : "inline-block",
 				"width": `${this._listWidth}px`,
-				"padding": "0.925rem 1rem",
 			},
 			suggestionsPopover: {
 				"max-width": `${this._inputWidth}px`,
diff --git a/packages/main/src/themes/ValueStateMessage.css b/packages/main/src/themes/ValueStateMessage.css
index 731dba24866c..47202d00de12 100644
--- a/packages/main/src/themes/ValueStateMessage.css
+++ b/packages/main/src/themes/ValueStateMessage.css
@@ -1,5 +1,4 @@
 .ui5-valuestatemessage-popover {
-	min-height: 1rem;
 	box-shadow: none;
 }
 
@@ -9,13 +8,19 @@
 	color: var(--sapTextColor);
 	font-size: var(--sapFontSmallSize);
 	font-family: "72override", var(--sapFontFamily);
-	padding: .3rem .625rem;
+	height: auto;
+	padding: .5rem;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	min-width: 6.25rem;
 	border: var(--_ui5_value_state_message_border);
 }
 
+ui5-responsive-popover .ui5-valuestatemessage-header {
+	min-height: 2rem;
+	padding: .5625rem 1rem;
+}
+
 .ui5-valuestatemessage--success {
 	background: var(--sapSuccessBackground);
 }