Merge pull request #8081 from IgniteUI/didimmova/fix-textarea-8078-master

fix(input-group): fix textarea width to not overlap the suffix

Author: simeonoff

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss

@@ -258,10 +258,6 @@
             @extend %form-group-label--box !optional;
         }
 
-        @include e(textarea) {
-            @extend %form-group-textarea--box !optional;
-        }
-
         @include e(hint) {
             @extend %form-group-helper--box !optional;
         }
@@ -277,10 +273,6 @@
         @include e(bundle-main) {
             @extend %form-group-bundle-main--box-cosy !optional;
         }
-
-        @include e(textarea) {
-            @extend %form-group-textarea--box-cosy !optional;
-        }
     }
 
     @include mx(box, compact) {
@@ -293,10 +285,6 @@
         @include e(bundle-main) {
             @extend %form-group-bundle-main--box-compact !optional;
         }
-
-        @include e(textarea) {
-            @extend %form-group-textarea--box-compact !optional;
-        }
     }
 
     @include mx(disabled, box) {
@@ -333,10 +321,6 @@
             @extend %form-group-label--border !optional;
         }
 
-        @include e(textarea) {
-            @extend %form-group-textarea--box !optional;
-        }
-
         @include e(hint) {
             @extend %form-group-helper--box !optional;
         }
@@ -373,10 +357,6 @@
         @include e(bundle-main) {
             @extend %form-group-bundle-main--box-cosy !optional;
         }
-
-        @include e(textarea) {
-            @extend %form-group-textarea--box-cosy !optional;
-        }
     }
 
     @include mx(border, cosy, filled) {
@@ -413,10 +393,6 @@
         @include e(bundle-main) {
             @extend %form-group-bundle-main--box-compact !optional;
         }
-
-        @include e(textarea) {
-            @extend %form-group-textarea--box-compact !optional;
-        }
     }
 
     @include mx(border, compact, filled) {
@@ -620,7 +596,7 @@
         }
 
         @include e(textarea) {
-            @extend %form-group-textarea--box !optional;
+            @extend %form-group-textarea--indigo !optional;
         }
 
         @include e(hint) {
@@ -640,7 +616,7 @@
         }
 
         @include e(textarea) {
-            @extend %form-group-textarea--box-cosy !optional;
+            @extend %form-group-textarea--indigo-cosy !optional;
         }
     }
 
@@ -656,7 +632,7 @@
         }
 
         @include e(textarea) {
-            @extend %form-group-textarea--box-compact !optional;
+            @extend %form-group-textarea--indigo-compact !optional;
         }
     }
 
@@ -866,10 +842,6 @@
             @extend %form-group-label--box !optional;
         }
 
-        @include e(textarea) {
-            @extend %form-group-textarea--box !optional;
-        }
-
         @include e(hint) {
             @extend %form-group-helper--box !optional;
         }
@@ -885,10 +857,6 @@
         @include e(bundle-main) {
             @extend %form-group-bundle-main--box-cosy !optional;
         }
-
-        @include e(textarea) {
-            @extend %form-group-textarea--box-cosy !optional;
-        }
     }
 
     @include mx(search, compact) {
@@ -901,10 +869,6 @@
         @include e(bundle-main) {
             @extend %form-group-bundle-main--box-compact !optional;
         }
-
-        @include e(textarea) {
-            @extend %form-group-textarea--box-compact !optional;
-        }
     }
 
     @include mx(focused, search) {

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -1066,25 +1066,16 @@
         margin-#{$right}: -#{rem(16px, map-get($base-scale-size, 'compact'))};
     }
 
-    %form-group-textarea--box {
-        width: calc(100% + #{rem(16px, map-get($base-scale-size, 'comfortable')) * 2}); /* add the padding to the width */
-        margin: 0 -#{rem(16px, map-get($base-scale-size, 'comfortable'))};
-        padding-#{$left}: rem(16px, map-get($base-scale-size, 'comfortable'));
-        padding-#{$left}: rem(16px, map-get($base-scale-size, 'comfortable'));
+    %form-group-textarea--indigo {
+        margin-top: -#{rem(18px, map-get($base-scale-size, 'comfortable'))} !important;
     }
 
-    %form-group-textarea--box-cosy {
-        width: calc(100% + #{rem(16px, map-get($base-scale-size, 'cosy')) * 2}); /* add the padding to the width */
-        margin: 0 -#{rem(16px, map-get($base-scale-size, 'cosy'))};
-        padding-#{$left}: rem(16px, map-get($base-scale-size, 'cosy'));
-        padding-#{$left}: rem(16px, map-get($base-scale-size, 'cosy'));
+    %form-group-textarea--indigo-cosy {
+        margin-top: -#{rem(18px, map-get($base-scale-size, 'cosy'))} !important;
     }
 
-    %form-group-textarea--box-compact {
-        width: calc(100% + #{rem(16px, map-get($base-scale-size, 'compact')) * 2}); /* add the padding to the width */
-        margin: 0 -#{rem(16px, map-get($base-scale-size, 'compact'))};
-        padding-#{$left}: rem(16px, map-get($base-scale-size, 'compact'));
-        padding-#{$left}: rem(16px, map-get($base-scale-size, 'compact'));
+    %form-group-textarea--indigo-compact {
+        margin-top: -#{rem(18px, map-get($base-scale-size, 'compact'))} !important;
     }
 
     %form-group-prefix,