refactor(ui5-textarea): clean up styles

packages/main/src/TextArea.hbs

@@ -1,13 +1,13 @@
 <div
-	class="{{classes.main}}"
+	class="ui5-textarea-root"
 	style="{{styles.main}}"
 	?aria-invalid="{{ariaInvalid}}"
 	@focusin="{{onfocusin}}"
 	@focusout="{{onfocusout}}"
 >
 
 	{{#if growing}}
-		<div id="{{_id}}-mirror" style="{{styles.mirror}}" class="{{classes.mirror}}" aria-hidden="true">
+		<div id="{{_id}}-mirror" style="{{styles.mirror}}" class="ui5-textarea-mirror" aria-hidden="true">
 			{{#each _mirrorText}}
 				{{this.text}}
 
@@ -18,22 +18,20 @@
 		</div>
 	{{/if}}
 
-	<div class="{{classes.focusDiv}}" style="{{styles.inner}}">
-		<textarea
-			id="{{_id}}-inner"
-			class="{{classes.inner}}"
-			placeholder="{{ placeholder }}"
-			?disabled="{{disabled}}"
-			?readonly="{{readonly}}"
-			maxlength="{{_exceededTextProps.calcedMaxLength}}"
-			.value="{{value}}"
-			@change="{{_listeners.change}}"
-			data-sap-focus-ref>
-		</textarea>
-	</div>
+	<textarea
+		id="{{_id}}-inner"
+		class="ui5-textarea-inner"
+		placeholder="{{ placeholder }}"
+		?disabled="{{disabled}}"
+		?readonly="{{readonly}}"
+		maxlength="{{_exceededTextProps.calcedMaxLength}}"
+		.value="{{value}}"
+		@change="{{_listeners.change}}"
+		data-sap-focus-ref>
+	</textarea>
 
 	{{#if showExceededText}}
-		<span class="{{classes.exceededText}}">{{_exceededTextProps.exceededText}}</span>
+		<span class="ui5-textarea-exceeded-text">{{_exceededTextProps.exceededText}}</span>
 	{{/if}}
 
 	<slot name="formSupport"></slot>

packages/main/src/TextArea.js

@@ -155,13 +155,22 @@ const metadata = {
 			type: String,
 		},
 
-		_height: {
-			type: CSSSize,
-			defaultValue: null,
+		/**
+		 * @private
+		 */
+		focused: {
+			type: Boolean,
 		},
 
-		_exceededTextProps: {
-			type: Object,
+		/**
+		 * @private
+		 */
+		exceeding: {
+			type: Boolean,
+		},
+
+		_height: {
+			type: CSSSize,
 			defaultValue: null,
 		},
 
@@ -173,9 +182,6 @@ const metadata = {
 		_maxHeight: {
 			type: String,
 		},
-		_focussed: {
-			type: Boolean,
-		},
 		_listeners: {
 			type: Object,
 		},
@@ -246,6 +252,8 @@ class TextArea extends UI5Element {
 		this._exceededTextProps = this._calcExceededText();
 		this._mirrorText = this._tokenizeText(this.value);
 
+		this.exceeding = this._exceededTextProps.leftCharactersCount < 0;
+
 		if (this.growingMaxLines) {
 			// this should be complex calc between line height and paddings - TODO: make it stable
 			this._maxHeight = `${this.growingMaxLines * 1.4 * 14 + 9}px`;
@@ -280,11 +288,11 @@ class TextArea extends UI5Element {
 	}
 
 	onfocusin() {
-		this._focussed = true;
+		this.focused = true;
 	}
 
 	onfocusout() {
-		this._focussed = false;
+		this.focused = false;
 	}
 
 	_handleChange() {
@@ -338,35 +346,6 @@ class TextArea extends UI5Element {
 		};
 	}
 
-	get classes() {
-		return {
-			main: {
-				sapWCTextArea: true,
-				sapWCTextAreaWarning: (this._exceededTextProps.leftCharactersCount < 0),
-				sapWCTextAreaGrowing: this.growing,
-				sapWCTextAreaNoMaxLines: !this.growingMaxLines,
-				sapWCTextAreaWithCounter: this.showExceededText,
-				sapWCTextAreaDisabled: this.disabled,
-				sapWCTextAreaReadonly: this.readonly,
-			},
-			inner: {
-				sapWCTextAreaInner: true,
-				sapWCTextAreaStateInner: (this._exceededTextProps.leftCharactersCount < 0),
-				sapWCTextAreaWarningInner: (this._exceededTextProps.leftCharactersCount < 0),
-			},
-			exceededText: {
-				sapWCTextAreaExceededText: true,
-			},
-			mirror: {
-				sapWCTextAreaMirror: true,
-			},
-			focusDiv: {
-				sapWCTextAreaFocusDiv: true,
-				sapWCTextAreaHasFocus: this._focussed,
-			},
-		};
-	}
-
 	get styles() {
 		const lineHeight = 1.4 * 16;