fix(ui5-textarea): stop showing valueStateMsg in value-state="None" (#…

…1568) Previously if value state msg slot is set, it used to be displayed in all value states. But, by spec the no matter as slot or built-in text, the value state message should be displayed in Error, Warning and Information states only.
SAP · Apr 30, 2020 · 832c34e · 832c34e
1 parent dc60609
commit 832c34e
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 14 deletions.
diff --git a/packages/main/src/TextArea.js b/packages/main/src/TextArea.js
@@ -427,7 +427,7 @@ class TextArea extends UI5Element {
 	}
 
 	_onResize() {
-		if (this.displayValueStateMessage) {
+		if (this.displayValueStateMessagePopover) {
 			this._width = this.offsetWidth;
 		}
 	}
@@ -546,19 +546,19 @@ class TextArea extends UI5Element {
 	}
 
 	get openValueStateMsgPopover() {
-		return !this._firstRendering && this._openValueStateMsgPopover && this.displayValueStateMessage;
+		return !this._firstRendering && this._openValueStateMsgPopover && this.displayValueStateMessagePopover;
 	}
 
-	get displayValueStateMessage() {
-		return !!this.valueStateMessage.length || this.exceeding || (this.valueState !== ValueState.Success && this.valueState !== ValueState.None);
+	get displayValueStateMessagePopover() {
+		return this.hasCustomValueState || this.hasValueState || this.exceeding;
 	}
 
-	get displayDefaultValueStateMessage() {
-		if (this.valueStateMessage.length) {
-			return false;
-		}
+	get hasCustomValueState() {
+		return !!this.valueStateMessage.length && this.hasValueState;
+	}
 
-		return this.exceeding || (this.valueState !== ValueState.Success && this.valueState !== ValueState.None);
+	get hasValueState() {
+		return this.valueState === ValueState.Error || this.valueState === ValueState.Warning || this.valueState === ValueState.Information;
 	}
 
 	get valueStateMessageText() {

diff --git a/packages/main/src/TextAreaPopover.hbs b/packages/main/src/TextAreaPopover.hbs
@@ -1,4 +1,4 @@
-{{#if displayValueStateMessage}}
+{{#if displayValueStateMessagePopover}}
 	<ui5-popover
 		skip-registry-update
 		no-padding
@@ -16,11 +16,11 @@
 {{/if}}
 
 {{#*inline "valueStateMessage"}}
-	{{#if displayDefaultValueStateMessage}}
-		{{valueStateText}}
-	{{else}}
+	{{#if hasCustomValueState}}
 		{{#each valueStateMessageText}}
 			{{this}}
 		{{/each}}
+	{{else}}
+		{{valueStateText}}
 	{{/if}}
 {{/inline}}
diff --git a/packages/main/test/pages/TextArea.html b/packages/main/test/pages/TextArea.html
@@ -80,7 +80,11 @@
 
 	<section class="group">
 		<ui5-title>Simple TextArea</ui5-title>
-		<ui5-textarea id="basic-textarea" placeholder="Basic text area"></ui5-textarea>
+		<ui5-textarea id="basic-textarea" placeholder="Basic text area">
+			<div slot="valueStateMessage">
+				This msg will not be displayed as no value-state is set.
+			</div>
+		</ui5-textarea>
 
 		<br>
 		<br>

diff --git a/packages/main/test/specs/TextArea.spec.js b/packages/main/test/specs/TextArea.spec.js
@@ -73,6 +73,18 @@ describe("when enabled", () => {
 		assert.ok(popover.isDisplayedInViewport(), "The value state message popover is displayed");
 	});
 
+	it("does not show value state msg when valueState='None'", () => {
+		const textarea = browser.$("#basic-textarea");
+		const staticAreaItemClassName = browser.getStaticAreaItemClassName("#basic-textarea");
+		const popover = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover")
+
+		// act
+		textarea.click();
+
+		// assert
+		assert.ok(!popover.isDisplayedInViewport(), "The value state message popover is not displayed");
+	});
+
 	it("can type inside", () => {
 		const textarea = browser.$("#basic-textarea");
 		const textareaInner = browser.$("#basic-textarea").shadow$("textarea");