fix(textarea): remove height override and fix label line-height (#1715)

We have predefined heights from the schema for all three sizes. We have also exposed a prop for textarea-height, so the line I am removing is completely unnecessary.

Closes #1679, #1675

---------

Co-authored-by: Radoslav Karaivanov <[email protected]>

Author: desig9stein

src/components/input/themes/shared/input.fluent.scss

@@ -48,10 +48,13 @@ $focused-height: calc(var-get($theme, 'size') - #{($focused-border-width * 2)});
     }
 
     [part='label'] {
-        @include type-style('subtitle-2');
+        @include type-style('subtitle-2') {
+            --ig-subtitle-2-line-height: #{rem(16px)};
+
+            margin-block: 0 rem(5px);
+        };
 
         color: var-get($theme, 'idle-secondary-color');
-        margin-block-end: rem(5px);
     }
 
     [part^='container'] {

src/components/input/themes/shared/input.material.scss

@@ -72,7 +72,6 @@ input:placeholder-shown + [part='notch'] [part='label'],
         transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
         color 150ms cubic-bezier(0.4, 0, 0.2, 1),
         font-size 150ms cubic-bezier(0.4, 0, 0.2, 1);
-    line-height: normal;
     text-overflow: ellipsis;
     overflow: hidden;
     will-change: font-size, color, transform;

src/components/textarea/themes/shared/textarea.bootstrap.scss

@@ -21,7 +21,6 @@ $theme: $bootstrap;
     position: static;
     display: block;
     padding: 0;
-    line-height: rem(24px);
     transform: translateY(0);
     transform-origin: top left;
     margin-block: 0 rem(4px);

src/components/textarea/themes/shared/textarea.fluent.scss

@@ -56,15 +56,19 @@ $theme: $fluent;
 }
 
 [part~='label'] {
+    @include type-style('subtitle-2') {
+        --ig-subtitle-2-line-height: #{rem(16px)};
+
+        margin-block: 0 rem(5px);
+    };
+
     display: block;
-    font-size: rem(14px);
-    font-weight: 600;
     position: static;
     transform: translateY(0);
     transform-origin: top left;
-    margin-top: 0;
     height: auto;
-    margin-block-end: rem(5px);
+
+
 }
 
 :host([invalid]) {

src/components/textarea/themes/shared/textarea.indigo.scss

@@ -76,8 +76,6 @@ $theme: $indigo;
     transition: background .25s $out-cubic;
     overflow: hidden;
     padding-inline-start: 0;
-    height: calc(100% - #{rem(2px)});
-    top: rem(1px);
 
     &::after {
         content: '';

src/components/textarea/themes/shared/textarea.material.scss

@@ -46,19 +46,22 @@ textarea {
 }
 
 %label-filled {
+    @include type-style('caption');
+
     transform: translateY(0);
     inset-block-start: calc(#{$input-top-padding} / 4);
-    font-size: rem(12px);
 }
 
 %label-outlined-filled {
+    @include type-style('caption') {
+        margin-block-end: auto;
+    };
+
     display: inline-block;
     position: relative;
     inset-block: 0;
     transform: translateY(-50%);
-    margin-block-end: auto;
     padding-inline-end: 0;
-    font-size: rem(12px);
 }
 
 :host(:not([outlined])) {

src/components/textarea/themes/textarea.base.scss

@@ -22,8 +22,6 @@ $base-scale-size: (
 
     [part~='label'] {
         @include ellipsis();
-    
-        line-height: normal;
     }
 }
 
@@ -69,7 +67,7 @@ textarea {
 
     &:not([type='*']) {
         /* resets typography styles */
-        line-height: normal; 
+        line-height: normal;
     }
 }