refactor(ui5-textarea): rename property maxLength to maxlength (#1068)

BREAKING CHANGE: The property maxLength has been renamed to maxlength.
Also, the attribute name is changed from max-length to maxlength.

Author: ilhan007

packages/main/src/TextArea.js

@@ -103,7 +103,7 @@ const metadata = {
 		 * @type {number}
 		 * @public
 		 */
-		maxLength: {
+		maxlength: {
 			type: Integer,
 			defaultValue: null,
 		},
@@ -113,8 +113,8 @@ const metadata = {
 		 * in the <code>ui5-textarea</code>.
 		 * <br><br>
 		 * If set to <code>false</code>, the user is not allowed to enter more characters than what is set in the
-		 * <code>maxLength</code> property.
-		 * If set to <code>true</code> the characters exceeding the <code>maxLength</code> value are selected on
+		 * <code>maxlength</code> property.
+		 * If set to <code>true</code> the characters exceeding the <code>maxlength</code> value are selected on
 		 * paste and the counter below the <code>ui5-textarea</code> displays their number.
 		 *
 		 * @type {boolean}
@@ -353,7 +353,7 @@ class TextArea extends UI5Element {
 			leftCharactersCount;
 
 		if (this.showExceededText) {
-			const maxLength = this.maxLength || 0;
+			const maxLength = this.maxlength || 0;
 
 			if (maxLength) {
 				leftCharactersCount = maxLength - this.value.length;
@@ -365,7 +365,7 @@ class TextArea extends UI5Element {
 				}
 			}
 		} else {
-			calcedMaxLength = this.maxLength;
+			calcedMaxLength = this.maxlength;
 		}
 
 		return {

packages/main/test/pages/TextArea.html

@@ -148,17 +148,17 @@ <h2>Text Area: Growing with initial rows 4 and growing up to 12</h2>
 
 	<section class="group">
 		<h2>Text Area: growing with max length 20 characters </h2>
-		<ui5-textarea id="ta-max-length" class="fixed-width" growing max-length="20" placeholder="Max length"></ui5-textarea>
+		<ui5-textarea id="ta-max-length" class="fixed-width" growing maxlength="20" placeholder="Max length"></ui5-textarea>
 	</section>
 
 	<section class="group">
 		<h2>Text Area: max length 20 characters </h2>
-		<ui5-textarea class="fixed-width" max-length="20" placeholder="Max length"></ui5-textarea>
+		<ui5-textarea class="fixed-width" maxlength="20" placeholder="Max length"></ui5-textarea>
 	</section>
 
 	<section class="group">
-		<h2>Text Area: showExceededText with maxLength</h2>
-		<ui5-textarea id="show-max-length" class="fixed-width fixed-height" max-length="20" show-exceeded-text placeholder="Max length and Show Exceeded Text"></ui5-textarea>
+		<h2>Text Area: showExceededText with maxlength</h2>
+		<ui5-textarea id="show-max-length" class="fixed-width fixed-height" maxlength="20" show-exceeded-text placeholder="Max length and Show Exceeded Text"></ui5-textarea>
 	</section>
 
 	<section class="group">

packages/main/test/samples/TextArea.sample.html

@@ -19,10 +19,10 @@ <h3>Basic TextArea</h3>
 <section>
 	<h3>TextArea with Maximum Length</h3>
 	<div class="snippet">
-		<ui5-textarea class="textarea-width" placeholder="Type no more than 10 symbols" max-length="10" show-exceeded-text></ui5-textarea>
+		<ui5-textarea class="textarea-width" placeholder="Type no more than 10 symbols" maxlength="10" show-exceeded-text></ui5-textarea>
 	</div>
 	<pre class="prettyprint lang-html"><xmp>
-<ui5-textarea placeholder="Type some text" max-length="10" show-exceeded-text></ui5-textarea>
+<ui5-textarea placeholder="Type some text" maxlength="10" show-exceeded-text></ui5-textarea>
 	</xmp></pre>
 </section>