feat(ui5-input): align value state message to spec (#12017)

- Removed inline styling for popover headers
- Standardized the value state message appearance across components
- Align the value state message popup to the specs

Author: aleksandar-terziev

packages/main/src/ComboBox.ts

@@ -1495,12 +1495,10 @@ class ComboBox extends UI5Element implements IFormInputElement {
 	get styles() {
 		const remSizeInPx = parseInt(getComputedStyle(document.documentElement).fontSize);
 		return {
-			popoverHeader: {
-				"width": `${this.offsetWidth}px`,
-			},
 			suggestionPopoverHeader: {
 				"display": this._listWidth === 0 ? "none" : "inline-block",
 				"width": `${this._listWidth || ""}px`,
+				"max-width": "inherit",
 			},
 			suggestionsPopover: {
 				"min-width": `${this.offsetWidth || 0}px`,

packages/main/src/ComboBoxPopoverTemplate.tsx

@@ -122,7 +122,7 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 			onClose={this._handleValueStatePopoverAfterClose}
 			onFocusOut={this._handleValueStatePopoverFocusout}
 		>
-			<div slot="header" class={this.classes.popoverValueState} style={this.styles.popoverHeader}>
+			<div slot="header" class={this.classes.popoverValueState}>
 				<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon}/>
 				{ valueStateMessage.call(this) }
 			</div>

packages/main/src/Input.ts

@@ -1795,19 +1795,17 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 	}
 
 	get styles() {
-		const remSizeIxPx = parseInt(getComputedStyle(document.documentElement).fontSize);
+		const remSizeInPx = parseInt(getComputedStyle(document.documentElement).fontSize);
 
 		const stylesObject = {
-			popoverHeader: {
-				"max-width": this._inputWidth ? `${this._inputWidth}px` : "",
-			},
 			suggestionPopoverHeader: {
 				"display": this._listWidth === 0 ? "none" : "inline-block",
 				"width": this._listWidth ? `${this._listWidth}px` : "",
+				"max-width": "inherit",
 			},
 			suggestionsPopover: {
 				"min-width": this._inputWidth ? `${this._inputWidth}px` : "",
-				"max-width": this._inputWidth && (this._inputWidth / remSizeIxPx) > 40 ? `${this._inputWidth}px` : "40rem",
+				"max-width": this._inputWidth && (this._inputWidth / remSizeInPx) > 40 ? `${this._inputWidth}px` : "40rem",
 			},
 			innerInput: {
 				"padding": "",

packages/main/src/InputPopoverTemplate.tsx

@@ -29,7 +29,7 @@ export default function InputPopoverTemplate(this: Input, hooks?: { suggestionsL
 					open={this.valueStateOpen}
 					onClose={this._handleValueStatePopoverAfterClose}
 				>
-					<div slot="header" class={this.classes.popoverValueState} style={this.styles.popoverHeader}>
+					<div slot="header" class={this.classes.popoverValueState}>
 						<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon.call(this)} />
 						{ this.valueStateOpen && valueStateMessage.call(this) }
 					</div>

packages/main/src/MultiComboBox.ts

@@ -2182,7 +2182,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 				"display": this._listWidth === 0 ? "none" : "inline-block",
 			},
 			popoverHeader: {
-				"max-width": isPhone() ? "100%" : `${this._inputWidth}px`,
+				"max-width": isPhone() ? "100%" : `22rem`,
 			},
 			suggestionsPopover: {
 				"min-width": `${this._inputWidth}px`,

packages/main/src/themes/MultiComboBoxPopover.css

@@ -36,3 +36,7 @@
 :host([readonly]) ::slotted([ui5-mcb-item]) {
 	cursor: auto;
 }
+
+[ui5-responsive-popover] .ui5-valuestatemessage-header, [ui5-popover] .ui5-valuestatemessage-header  {
+	max-width: inherit;
+}

packages/main/src/themes/ValueStateMessage.css

@@ -47,7 +47,10 @@
 }
 
 [ui5-responsive-popover] .ui5-valuestatemessage-header, [ui5-popover] .ui5-valuestatemessage-header  {
-	min-height: 2rem;
+	min-height: var(--_ui5_value_state_message_popover_header_min_height);
+	min-width: var(--_ui5_value_state_message_popover_header_min_width);
+	max-width: var(--_ui5_value_state_message_popover_header_max_width);
+	width: var(--_ui5_value_state_message_popover_header_width);
 }
 
 [ui5-responsive-popover] .ui5-valuestatemessage-header {

packages/main/src/themes/base/ValueStateMessage-parameters.css

@@ -16,6 +16,10 @@
 	--_ui5_value_state_header_box_shadow_success: inset 0 -0.0625rem var(--sapField_SuccessColor);
 	--_ui5_value_state_header_box_shadow_warning: inset 0 -0.0625rem var(--sapField_WarningColor);
 	--_ui5_value_state_message_line_height: 1rem;
+	--_ui5_value_state_message_popover_header_min_height: 2rem;
+	--_ui5_value_state_message_popover_header_min_width: 6rem;
+	--_ui5_value_state_message_popover_header_max_width: 22rem;
+	--_ui5_value_state_message_popover_header_width: auto;
 	--_ui5_value_state_message_icon_offset_phone: 1rem;
 	--_ui5_value_state_header_border_bottom: none;
 }