refactor(input-group): update drag handle position inside textarea (#…

…14105)
IgniteUI · Apr 18, 2024 · 01d8a06 · 01d8a06
1 parent 54c6b94
commit 01d8a06
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 1 deletion.
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
@@ -112,8 +112,14 @@
             }
         }
 
+        @include m(suffixed) {
+            @extend %suffixed !optional;
+        }
+
         // Textarea modifier
         @include m(textarea-group) {
+            @extend %textarea-group !optional;
+
             @include e(bundle-main) {
                 @extend  %form-group-textarea-group-bundle-main !optional;
             }
@@ -127,6 +133,10 @@
             }
         }
 
+        @include mx(textarea-group, border) {
+            @extend %textarea-group--outlined !optional;
+        }
+
         @include mx(textarea-group, focused) {
             @include e(label) {
                 @extend %textarea-group-label--focused !optional;

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
@@ -979,6 +979,26 @@
         will-change: font-size, color, transform;
     }
 
+    @if $variant == 'material' {
+        %textarea-group:not(%suffixed) {
+            %form-group-bundle-main {
+                grid-area: 1 / 2 / span 1 / span 3;
+                padding-inline-end: 0;
+            }
+
+            textarea {
+                padding-inline-end: rem(4px);
+                width: calc(100% - #{rem(1px)});
+            }
+        }
+
+        %textarea-group--outlined:not(%suffixed) {
+            textarea {
+                width: calc(100% - #{rem(2px)});
+            }
+        }
+    }
+
     %form-group-textarea-group-bundle {
         // 3 lines * 22px + 8px bottom padding + 8px top padding
         --textarea-size: #{sizable(
@@ -1191,6 +1211,7 @@
 
         @if $material-theme {
             padding: 0;
+            inset-block-start: rem(-3px);
         }
 
         // resets typography styles
@@ -1668,8 +1689,9 @@
     }
 
     %indigo-textarea {
-        padding-block: rem(8px);
+        padding-block: rem(10px);
         padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+        inset-block-end: rem(2px);
     }
 
     %fluent-textarea {

diff --git a/src/app/input-group/input-group.sample.html b/src/app/input-group/input-group.sample.html
@@ -182,6 +182,19 @@
                 <igx-hint>Textarea hint</igx-hint>
             </igx-input-group>
 
+            <!-- textarea -->
+            <igx-input-group [displayDensity]="density" [type]="inputType">
+                <label igxLabel>Textarea</label>
+                <textarea
+                        name="inputTextareaTest"
+                        [required]="isRequired"
+                        igxInput
+                        [disabled]="isDisabled"
+                        [(ngModel)]="inputValue"
+                ></textarea>
+                <igx-hint>Textarea hint</igx-hint>
+            </igx-input-group>
+
             <!-- required date field -->
             <igx-date-picker *ngIf="isRequired" #requiredDatePicker
                              required