fix(ui5-textarea): fix text vertical alignment (#1668)

Issue: when growing and growing-max-lines="1" are set the text in the input field is a little downwards and not vertically centred. Now it is fixed and the new metrics for padding and height are the ones the openui5 TextArea uses.

FIXES: #1661

Author: ilhan007

packages/main/src/themes/TextArea.css

@@ -39,6 +39,7 @@
 
 .ui5-textarea-root {
 	height: 100%;
+	min-height: var(--_ui5_input_height);
 	display: inline-flex;
 	vertical-align: top;
 	outline: none;
@@ -52,7 +53,7 @@
 	width: 100%;
 	height: 100%;
 	margin: 0;
-	padding: 0.5625rem 0.6875rem;
+	padding: var(--_ui5_textarea_padding);
 	line-height: 1.4;
 	box-sizing: border-box;
 	color: inherit;
@@ -85,7 +86,7 @@
 	visibility: hidden;
 	width: 100%;
 	word-break: break-all;
-	padding: 0.5625rem 0.6875rem;
+	padding: var(--_ui5_textarea_padding);
 	font-size: var(--sapFontSize);
 	font-family: var(--sapFontFamily);
 	white-space: pre-wrap;

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

@@ -56,6 +56,9 @@
 	--_ui5_tc_item_icon_size: 1.5rem;
 	--_ui5_tc_item_add_text_margin_top: 0.625rem;
 
+	/* TextArea */
+	--_ui5_textarea_padding: 0.5625rem 0.6875rem;
+
 	/* Responsive Popover */
 	--_ui5-responnsive_popover_header_height: 2.75rem;
 
@@ -113,6 +116,9 @@
 	--_ui5_input_icon_padding: .25rem .5rem;
 	--_ui5_input_value_state_icon_padding: .1875rem .5rem;
 
+	/* TextArea */
+	--_ui5_textarea_padding: .1875rem .5rem;
+
 	/* List */
 	--_ui5_list_no_data_height: 2rem;
 	--_ui5_list_item_cb_margin_right: .5rem;

packages/main/test/pages/TextArea.html

@@ -179,6 +179,26 @@
 		</ui5-textarea>
 	</section>
 
+	<section class="group">
+		<ui5-title>Growing: growing-max-lines="1"</ui5-title>
+		<br>
+		<ui5-textarea growing growing-max-lines="1"></ui5-textarea>
+
+		<ui5-title>Growing: growing-max-lines="4"</ui5-title>
+		<br>
+		<ui5-textarea growing growing-max-lines="4"></ui5-textarea>
+	</section>
+
+	<section class="group sapUiSizeCompact">
+		<ui5-title>Growing: growing-max-lines="1" (compact)</ui5-title>
+		<br>
+		<ui5-textarea growing growing-max-lines="1"></ui5-textarea>
+
+		<ui5-title>Growing: growing-max-lines="4" (compact)</ui5-title>
+		<br>
+		<ui5-textarea growing growing-max-lines="4"></ui5-textarea>
+	</section>
+
 	<script>
 		var changeCounter = 0;
 		var inputCounter = 0;