refactor(textarea): remove min-height

Author: SisIvanova

projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss

@@ -23,6 +23,11 @@
         }
     }
 
+    igx-date-range-start,
+    igx-date-range-end {
+        min-width: 0;
+    }
+
     igx-date-range-start,
     igx-date-range-end,
     %igx-date-range-picker__start,

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

@@ -1200,6 +1200,18 @@
     }
 
     @if $variant == 'material' {
+        %textarea-group:not(%textarea-group--outlined) {
+            --textarea-box-padding: #{pad-block(rem(8px), rem(12px), rem(16px))};
+
+            &:has(%igx-input-group__notch:not(:empty)) {
+                --textarea-box-padding: #{pad-block(rem(16px), rem(20px), rem(24px))};
+            }
+
+            %form-group-textarea {
+                margin-block-end: rem(2px);
+            }
+        }
+
         %textarea-group:not(%suffixed) {
             %form-group-bundle-main {
                 grid-area: 1 / 2 / span 1 / span 3;
@@ -1240,9 +1252,6 @@
     }
 
     %form-group-textarea-group-bundle {
-        // 3 lines of text + top padding
-        --textarea-height: calc((#{$textarea-font} * 3) + #{$textarea-top-padding});
-        min-height: var(--textarea-height) !important;
         height: auto !important;
 
         %form-group-label {
@@ -1442,18 +1451,13 @@
     }
 
     %form-group-textarea {
-        --textarea-height: calc((#{$textarea-font} * 3) + #{$textarea-top-padding});
-
-        min-height: var(--textarea-height);
         height: auto;
         resize: vertical;
         overflow: hidden;
         z-index: 1;
 
         @if $material-theme {
             padding: 0;
-            // to be fixed
-            inset-block-start: rem(-2px);
         }
     }
 
@@ -1466,14 +1470,18 @@
         }
 
         @if $material-theme {
-            padding-block-start: #{$material-box-top-padding};
+            padding-block-start: var(--textarea-box-padding);
         }
     }
 
     %textarea-group--outlined {
         %form-group-textarea-group-bundle-main {
             padding-block-start: #{$material-border-top-padding};
         }
+
+        %form-group-textarea {
+            inset-block-start: rem(-2px);
+        }
     }
 
     %form-group-textarea--disabled {
@@ -1662,13 +1670,13 @@
         position: relative;
     }
 
-    // %form-group-helper-item--start {
-    //     justify-content: flex-start;
-    // }
+    %form-group-helper-item--start {
+        justify-content: flex-start;
+    }
 
-    // %form-group-helper-item--end {
-    //     justify-content: flex-end;
-    // }
+    %form-group-helper-item--end {
+        justify-content: flex-end;
+    }
 
     %form-group-helper-item--start,
     %form-group-helper-item--end {

projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss

@@ -8,7 +8,6 @@
     @include css-vars($theme, '.igx-time-picker');
 
     $variant: map.get($theme, '_meta', 'theme');
-    $not-bootstrap-theme: $variant != 'bootstrap';
 
     $picker-buttons-padding: map.get((
         'material': rem(8px),
@@ -24,6 +23,11 @@
         'indigo': rem(16px),
     ), $variant);
 
+    .igx-input-group {
+        display: flex;
+        flex-direction: column;
+    }
+
     %time-picker-display {
         @include sizable();
 

projects/igniteui-angular/src/lib/directives/input/input.directive.ts

@@ -301,6 +301,10 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
         const elTag = this.nativeElement.tagName.toLowerCase();
         if (elTag === 'textarea') {
             this.isTextArea = true;
+
+            if (this.nativeElement.getAttribute('rows') === null) {
+                this.renderer.setAttribute(this.nativeElement, 'rows', '3');
+            }
         } else {
             this.isInput = true;
         }

src/app/date-picker/date-picker.sample.html

@@ -18,6 +18,7 @@ <h6>Angular Date Picker</h6>
         <igx-suffix (click)="dpAng.open()">
             <igx-icon>alarm</igx-icon>
         </igx-suffix>
+        <span igxHint>Helper text</span>
         <ng-template igxPickerActions let-calendar>
             <button igxButton="flat" (click)="calendar.viewDate = today">
                 Today

src/app/date-range/date-range.sample.html

@@ -46,6 +46,7 @@ <h6>Angular Date Range Picker, two inputs, template-driven form</h6>
           type="text"
           [placeholder]="properties.placeholder"
         />
+        <igx-hint>Helper text</igx-hint>
       </igx-date-range-start>
       <igx-date-range-end>
         <igx-picker-toggle igxPrefix>
@@ -61,6 +62,7 @@ <h6>Angular Date Range Picker, two inputs, template-driven form</h6>
           type="text"
           [placeholder]="properties.placeholder"
         />
+        <igx-hint>Helper text</igx-hint>
       </igx-date-range-end>
     </igx-date-range-picker>
   </div>

src/app/input-group-showcase/input-group-showcase.sample.scss

@@ -53,6 +53,7 @@
     display: flex;
     flex-direction: column;
     gap: 2rem;
+    min-width: 0;
 }
 
 .showcase__placeholder {