fix(ui5-input): adjust value state paddings according to specificatio…

…ns (#3833) The padding of the value state message popup and header are fixed to reflect the Fiori specifications. Fixes: #3611 Closes: #3611
SAP · Sep 16, 2021 · 48bd6fe · 48bd6fe
1 parent cce6ca8
commit 48bd6fe
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git 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
@@ -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);
 }