fix(input-group): fix textarea positioning

didimmova · didimmova · commit 5c918c5058f8 · 2020-09-03T15:47:02.000+03:00
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss b/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) {
@@ -616,7 +592,7 @@
         }
 
         @include e(textarea) {
-            @extend %form-group-textarea--box !optional;
+            @extend %form-group-textarea--indigo !optional;
         }
 
         @include e(hint) {
@@ -636,7 +612,7 @@
         }
 
         @include e(textarea) {
-            @extend %form-group-textarea--box-cosy !optional;
+            @extend %form-group-textarea--indigo-cosy !optional;
         }
     }
 
@@ -652,7 +628,7 @@
         }
 
         @include e(textarea) {
-            @extend %form-group-textarea--box-compact !optional;
+            @extend %form-group-textarea--indigo-compact !optional;
         }
     }
 
@@ -856,10 +832,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;
         }
@@ -875,10 +847,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) {
@@ -891,10 +859,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) {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
@@ -1066,16 +1066,16 @@
         margin-#{$right}: -#{rem(16px, map-get($base-scale-size, 'compact'))};
     }
 
-    %form-group-textarea--box {
-        margin: 0 -#{rem(16px, map-get($base-scale-size, 'comfortable'))};
+    %form-group-textarea--indigo {
+        margin-top: -#{rem(24px, map-get($base-scale-size, 'comfortable'))} !important;
     }
 
-    %form-group-textarea--box-cosy {
-        margin: 0 -#{rem(16px, map-get($base-scale-size, 'cosy'))};
+    %form-group-textarea--indigo-cosy {
+        margin-top: -#{rem(24px, map-get($base-scale-size, 'cosy'))} !important;
     }
 
-    %form-group-textarea--box-compact {
-        margin: 0 -#{rem(16px, map-get($base-scale-size, 'compact'))};
+    %form-group-textarea--indigo-compact {
+        margin-top: -#{rem(24px, map-get($base-scale-size, 'compact'))} !important;
     }
 
     %form-group-prefix,

Original file line number	Diff line number	Diff line change
`@@ -258,10 +258,6 @@`
`258`	`258`	`@extend %form-group-label--box !optional;`
`259`	`259`	`}`
`260`	`260`
`261`		`- @include e(textarea) {`
`262`		`- @extend %form-group-textarea--box !optional;`
`263`		`- }`
`264`		`-`
`265`	`261`	`@include e(hint) {`
`266`	`262`	`@extend %form-group-helper--box !optional;`
`267`	`263`	`}`
`@@ -277,10 +273,6 @@`
`277`	`273`	`@include e(bundle-main) {`
`278`	`274`	`@extend %form-group-bundle-main--box-cosy !optional;`
`279`	`275`	`}`
`280`		`-`
`281`		`- @include e(textarea) {`
`282`		`- @extend %form-group-textarea--box-cosy !optional;`
`283`		`- }`
`284`	`276`	`}`
`285`	`277`
`286`	`278`	`@include mx(box, compact) {`
`@@ -293,10 +285,6 @@`
`293`	`285`	`@include e(bundle-main) {`
`294`	`286`	`@extend %form-group-bundle-main--box-compact !optional;`
`295`	`287`	`}`
`296`		`-`
`297`		`- @include e(textarea) {`
`298`		`- @extend %form-group-textarea--box-compact !optional;`
`299`		`- }`
`300`	`288`	`}`
`301`	`289`
`302`	`290`	`@include mx(disabled, box) {`
`@@ -333,10 +321,6 @@`
`333`	`321`	`@extend %form-group-label--border !optional;`
`334`	`322`	`}`
`335`	`323`
`336`		`- @include e(textarea) {`
`337`		`- @extend %form-group-textarea--box !optional;`
`338`		`- }`
`339`		`-`
`340`	`324`	`@include e(hint) {`
`341`	`325`	`@extend %form-group-helper--box !optional;`
`342`	`326`	`}`
`@@ -373,10 +357,6 @@`
`373`	`357`	`@include e(bundle-main) {`
`374`	`358`	`@extend %form-group-bundle-main--box-cosy !optional;`
`375`	`359`	`}`
`376`		`-`
`377`		`- @include e(textarea) {`
`378`		`- @extend %form-group-textarea--box-cosy !optional;`
`379`		`- }`
`380`	`360`	`}`
`381`	`361`
`382`	`362`	`@include mx(border, cosy, filled) {`
`@@ -413,10 +393,6 @@`
`413`	`393`	`@include e(bundle-main) {`
`414`	`394`	`@extend %form-group-bundle-main--box-compact !optional;`
`415`	`395`	`}`
`416`		`-`
`417`		`- @include e(textarea) {`
`418`		`- @extend %form-group-textarea--box-compact !optional;`
`419`		`- }`
`420`	`396`	`}`
`421`	`397`
`422`	`398`	`@include mx(border, compact, filled) {`
`@@ -616,7 +592,7 @@`
`616`	`592`	`}`
`617`	`593`
`618`	`594`	`@include e(textarea) {`
`619`		`- @extend %form-group-textarea--box !optional;`
	`595`	`+ @extend %form-group-textarea--indigo !optional;`
`620`	`596`	`}`
`621`	`597`
`622`	`598`	`@include e(hint) {`
`@@ -636,7 +612,7 @@`
`636`	`612`	`}`
`637`	`613`
`638`	`614`	`@include e(textarea) {`
`639`		`- @extend %form-group-textarea--box-cosy !optional;`
	`615`	`+ @extend %form-group-textarea--indigo-cosy !optional;`
`640`	`616`	`}`
`641`	`617`	`}`
`642`	`618`
`@@ -652,7 +628,7 @@`
`652`	`628`	`}`
`653`	`629`
`654`	`630`	`@include e(textarea) {`
`655`		`- @extend %form-group-textarea--box-compact !optional;`
	`631`	`+ @extend %form-group-textarea--indigo-compact !optional;`
`656`	`632`	`}`
`657`	`633`	`}`
`658`	`634`
`@@ -856,10 +832,6 @@`
`856`	`832`	`@extend %form-group-label--box !optional;`
`857`	`833`	`}`
`858`	`834`
`859`		`- @include e(textarea) {`
`860`		`- @extend %form-group-textarea--box !optional;`
`861`		`- }`
`862`		`-`
`863`	`835`	`@include e(hint) {`
`864`	`836`	`@extend %form-group-helper--box !optional;`
`865`	`837`	`}`
`@@ -875,10 +847,6 @@`
`875`	`847`	`@include e(bundle-main) {`
`876`	`848`	`@extend %form-group-bundle-main--box-cosy !optional;`
`877`	`849`	`}`
`878`		`-`
`879`		`- @include e(textarea) {`
`880`		`- @extend %form-group-textarea--box-cosy !optional;`
`881`		`- }`
`882`	`850`	`}`
`883`	`851`
`884`	`852`	`@include mx(search, compact) {`
`@@ -891,10 +859,6 @@`
`891`	`859`	`@include e(bundle-main) {`
`892`	`860`	`@extend %form-group-bundle-main--box-compact !optional;`
`893`	`861`	`}`
`894`		`-`
`895`		`- @include e(textarea) {`
`896`		`- @extend %form-group-textarea--box-compact !optional;`
`897`		`- }`
`898`	`862`	`}`
`899`	`863`
`900`	`864`	`@include mx(focused, search) {`
Original file line number	Diff line number	Diff line change
`@@ -1066,16 +1066,16 @@`
`1066`	`1066`	`margin-#{$right}: -#{rem(16px, map-get($base-scale-size, 'compact'))};`
`1067`	`1067`	`}`
`1068`	`1068`
`1069`		`- %form-group-textarea--box {`
`1070`		`- margin: 0 -#{rem(16px, map-get($base-scale-size, 'comfortable'))};`
	`1069`	`+ %form-group-textarea--indigo {`
	`1070`	`+ margin-top: -#{rem(24px, map-get($base-scale-size, 'comfortable'))} !important;`
`1071`	`1071`	`}`
`1072`	`1072`
`1073`		`- %form-group-textarea--box-cosy {`
`1074`		`- margin: 0 -#{rem(16px, map-get($base-scale-size, 'cosy'))};`
	`1073`	`+ %form-group-textarea--indigo-cosy {`
	`1074`	`+ margin-top: -#{rem(24px, map-get($base-scale-size, 'cosy'))} !important;`
`1075`	`1075`	`}`
`1076`	`1076`
`1077`		`- %form-group-textarea--box-compact {`
`1078`		`- margin: 0 -#{rem(16px, map-get($base-scale-size, 'compact'))};`
	`1077`	`+ %form-group-textarea--indigo-compact {`
	`1078`	`+ margin-top: -#{rem(24px, map-get($base-scale-size, 'compact'))} !important;`
`1079`	`1079`	`}`
`1080`	`1080`
`1081`	`1081`	`%form-group-prefix,`