refactor(input-group): input refinement (#16307)

SisIvanova · simeonoff · web-flow · commit 44d671134918 · 2025-10-23T18:06:14.000+03:00
* refactor(input-group): input refinement

* refactor(input-group): address review comments

* fix(input-group): helper text issue

* Update _core.scss

---------

Co-authored-by: Simeon Simeonoff &lt;sim.simeonoff@gmail.com&gt;
diff --git a/package.json b/package.json
@@ -135,8 +135,8 @@
     "karma-parallel": "^0.3.1",
     "karma-spec-reporter": "^0.0.36",
     "lit-html": "^3.2.1",
-    "node-watch": "^0.7.4",
     "ng-packagr": "^20.0.0",
+    "node-watch": "^0.7.4",
     "postcss": "^8.5.1",
     "postcss-scss": "^4.0.6",
     "prettier": "^3.3.3",
diff --git a/projects/igniteui-angular/src/lib/combo/themes/_base.scss b/projects/igniteui-angular/src/lib/combo/themes/_base.scss
@@ -63,11 +63,6 @@ $theme: $base;
                 position: relative;
             }
 
-            &:has(.igx-vhelper--vertical) {
-                display: grid;
-                grid-template-columns: 1fr auto;
-            }
-
             position: relative;
             overflow: hidden;
             max-height: calc(var(--size) * var(--item-count));
diff --git a/projects/igniteui-angular/src/lib/combo/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/combo/themes/shared/bootstrap.scss
@@ -8,22 +8,40 @@ $_theme: $bootstrap;
 @include themed-block(igx-combo, bootstrap) {
     @include e(search) {
         --igx-input-group-border-border-radius: 0;
-        --igx-input-group-border-color: transparent;
+
+        igx-input-group {
+            --size: #{rem(28px)};
+        }
 
         .igx-input-group--focused {
             .igx-input-group__bundle-start,
             .igx-input-group__bundle-end {
                 border-block-end-color: var(--focused-border-color);
+                border-block-end-width: rem(2px);
+            }
+
+            .igx-input-group__bundle-main {
+                border-block-end-width: rem(2px);
             }
         }
 
-        .igx-input-group__bundle-main {
-            border-inline-width: 0;
-            border-block-start-width: 0;
+        igx-input-group:not(.igx-input-group--prefixed),
+        igx-input-group:not(.igx-input-group--suffixed) {
+            .igx-input-group__bundle-main {
+                border-inline-width: 0;
+                border-block-start-width: 0;
+            }
+        }
+
+        igx-input-group.igx-input-group--suffixed {
+            .igx-input-group__bundle-end {
+                border-inline-end-width: 0;
+                border-block-start-width: 0;
+            }
         }
 
         .igx-input-group__input {
-            padding-inline-start: 0;
+            padding-inline: 0;
         }
 
         .igx-input-group--focused:not(.igx-input-group--file) .igx-input-group__bundle-main {
diff --git a/projects/igniteui-angular/src/lib/combo/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/combo/themes/shared/indigo.scss
@@ -7,7 +7,7 @@
 $_theme: $indigo;
 
 @include themed-block(igx-combo, indigo) {
-    --_search-input-inline-padding: #{pad-inline(rem(12px))};
+    --_search-input-inline-padding: #{pad-inline(rem(8px), rem(12px), rem(12px))};
     --_search-input-block-padding: #{pad-block(rem(12px))};
 
     @include e(search) {
diff --git a/projects/igniteui-angular/src/lib/combo/themes/shared/material.scss b/projects/igniteui-angular/src/lib/combo/themes/shared/material.scss
@@ -16,6 +16,10 @@ $_theme: $material;
     }
 
     @include e(search) {
+        igx-input-group {
+            --size: #{rem(38px)};
+        }
+
         .igx-input-group__bundle {
             padding-block-start: 0;
             height: auto;
diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss
@@ -59,7 +59,7 @@
     ));
     // @include chip-typography();
     // @include column-actions-typography();
-    @include date-range-typography();
+    // @include date-range-typography();
     @include dialog-typography($categories: (
         title: 'h5',
         content: 'body-1'
diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss
@@ -62,7 +62,7 @@
     //     text: 'subtitle-2'
     // ));
     // @include column-actions-typography();
-    @include date-range-typography();
+    // @include date-range-typography();
     @include dialog-typography($categories: (
         title: 'h6',
         content: 'body-2'
diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss
@@ -61,7 +61,7 @@
     ));
     // @include chip-typography();
     // @include column-actions-typography();
-    @include date-range-typography();
+    // @include date-range-typography();
     @include dialog-typography($categories: (
         title: 'h5',
         content: 'body-1',
diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss
@@ -45,7 +45,7 @@
     @include checkbox-typography();
     // @include chip-typography();
     // @include column-actions-typography();
-    @include date-range-typography();
+    // @include date-range-typography();
     @include dialog-typography();
     @include dock-manager-typography();
     // @include drop-down-typography();
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.scss b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.scss
@@ -1,3 +1,4 @@
 @use 'themes/base';
+@use 'themes/shared';
 @use 'themes/light';
 @use 'themes/dark';
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/themes/_base.scss b/projects/igniteui-angular/src/lib/date-range-picker/themes/_base.scss
@@ -21,6 +21,8 @@ $theme: $material;
         }
 
         @include e(label) {
+            @include type-style(caption);
+
             display: flex;
             align-items: center;
             color: var-get($theme, 'label-color');
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/date-range-picker/themes/shared/_bootstrap.scss
@@ -0,0 +1,9 @@
+@use 'igniteui-theming/sass/bem/index' as *;
+@use 'igniteui-theming/sass/typography/index' as *;
+@use 'styles/themes/standalone' as *;
+
+@include themed-block(igx-date-range-picker, bootstrap) {
+    @include e(label) {
+        @include type-style(body-1);
+    }
+}
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/date-range-picker/themes/shared/_index.scss
@@ -0,0 +1 @@
+@forward 'bootstrap';
diff --git a/projects/igniteui-angular/src/lib/directives/input/input.directive.ts b/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;
         }
diff --git a/projects/igniteui-angular/src/lib/input-group/themes/_base.scss b/projects/igniteui-angular/src/lib/input-group/themes/_base.scss
@@ -247,20 +247,19 @@ $base-scale-size: (
             @extend %input-textarea-common;
 
             padding: 0;
-            min-height: var(--_textarea-size);
             resize: vertical;
             z-index: 1;
         }
 
         @include e(hint) {
             @include type-style(caption);
+            @include line-clamp(2, true, true);
 
             color: var-get($theme, 'helper-text-color');
             position: relative;
-            display: flex;
-            justify-content: space-between;
             grid-row: var(--_hint-row);
             grid-column: 1 / -1;
+            overflow-wrap: anywhere;
 
             &:empty {
                 --_hint-row: 1;
@@ -345,11 +344,6 @@ $base-scale-size: (
 
         @include m(textarea-group) {
             --_bundle-template-rows: auto auto auto;
-            --_textarea-size: #{sizable(
-                rem(82px, map.get($base-scale-size, 'compact')),
-                rem(82px, map.get($base-scale-size, 'cosy')),
-                rem(82px, map.get($base-scale-size, 'comfortable'))
-            )};
 
             @include e(bundle) {
                 height: auto;
diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss
@@ -48,6 +48,7 @@ $border-radius: var-get($_theme, 'border-border-radius');
 
 @include themed-block(igx-input-group, bootstrap) {
     --_bundle-template-rows: revert;
+    --_prefix-suffix-spacing: #{pad-inline(rem(8px), rem(10px), rem(14px))};
 
     row-gap: rem(4px);
 
@@ -73,7 +74,6 @@ $border-radius: var-get($_theme, 'border-border-radius');
         @include type-style(body-1);
 
         min-height: revert;
-        font-size: sizable(rem(16px), rem(16px), rem(20px));
         border: 0;
         border-radius: 0;
     }
@@ -90,34 +90,30 @@ $border-radius: var-get($_theme, 'border-border-radius');
         @include type-style(body-1);
 
         min-height: 100%;
-        font-size: sizable(rem(16px), rem(16px), rem(20px));
         padding-block: 0;
-        padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+        padding-inline: pad-inline(rem(8px), rem(10px), rem(14px));
     }
 
     @include e(file-input) {
         @include type-style(body-1);
 
-        font-size: sizable(rem(16px), rem(16px), rem(20px));
         height: 100%;
         padding-block: 0;
         border-block: $border-size solid $border-color;
         border-inline-end: $border-size solid $border-color;
-        padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+        padding-inline: pad-inline(rem(8px), rem(10px), rem(14px));
     }
 
     @include e(textarea) {
         @include type-style(body-1);
 
         min-height: 100%;
-        font-size: sizable(rem(16px), rem(16px), rem(20px));
-        padding-block: pad-block(rem(4px), rem(6px), rem(8px));
-        padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+        padding-block: pad-block(rem(4px), rem(8px), rem(12px)) 0;
+        padding-inline: pad-inline(rem(8px), rem(10px), rem(14px));
     }
 
     @include m(textarea-group) {
         @include e(bundle-main) {
-            min-height: var(--_textarea-size);
             height: revert;
         }
     }
diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/fluent.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/fluent.scss
@@ -8,6 +8,7 @@ $_theme: $fluent;
 
 @include themed-block(igx-input-group, fluent) {
     --_bundle-template-rows: revert;
+    --_prefix-suffix-spacing: #{pad-inline(rem(8px), rem(10px), rem(14px))};
 
     row-gap: rem(5px);
 
@@ -26,10 +27,15 @@ $_theme: $fluent;
         @include type-style(body-2);
 
         padding-inline: rem(8px);
+        padding-block: 0;
+        height: calc(var-get($_theme, 'size') - rem(2px));
     }
 
     @include e(textarea) {
-        padding: rem(8px)
+        @include type-style(body-2);
+
+        padding-inline: pad-inline(rem(8px));
+        padding-block: pad-block(rem(6px), rem(10px), rem(14px)) 0;
     }
 
     @include e(file-input) {
@@ -80,6 +86,11 @@ $_theme: $fluent;
             // the icon overrides the display set by the prefix/suffix
             display: none !important;
         }
+
+        igx-suffix,
+        [igxSuffix] {
+            color: var(--igx-input-group-input-suffix-color--focused, var(--ig-gray-900));
+        }
     }
 
     @include m(readonly, $not: (file)) {
diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss
@@ -12,7 +12,7 @@ $_theme: $indigo;
     --_bundle-template-rows: revert;
 
     igx-icon {
-        --size: var(--input-icon);
+        --size: #{sizable(rem(14px), rem(16px), rem(16px))};
     }
 
     row-gap: rem(4px);
@@ -40,6 +40,14 @@ $_theme: $indigo;
         }
     }
 
+    @include m(search) {
+        --_prefix-suffix-spacing: #{pad-inline(rem(6px), rem(8px), rem(10px))};
+
+        @include e(input) {
+            padding-inline: var(--_prefix-suffix-spacing);
+        }
+    }
+
     @include m(suffixed) {
         @include e(input) {
             padding-inline-end: 0;
@@ -56,6 +64,10 @@ $_theme: $indigo;
         @include type-style(body-2);
 
         caret-color: var-get($_theme, 'focused-bottom-line-color');
+
+        &::placeholder {
+            font-style: italic;
+        }
     }
 
     @include e(file-input) {
@@ -64,14 +76,26 @@ $_theme: $indigo;
 
     @include m(textarea-group) {
         @include e(textarea) {
-            padding-block: rem(6px);
+            padding-block: pad-block(rem(4px), rem(6px), rem(8px)) 0;
         }
 
         @include e(bundle) {
             height: auto;
         }
     }
 
+    @include m(textarea-group, $not: (prefixed)) {
+        @include e(textarea) {
+            padding-inline-start: pad-inline(rem(2px), rem(4px), rem(6px));
+        }
+    }
+
+    @include m(textarea-group, $not: (suffixed)) {
+        @include e(textarea) {
+            padding-inline-end: pad-inline(rem(2px), rem(4px), rem(6px));
+        }
+    }
+
     @include e(bundle) {
         transition: all .25s $out-cubic;
         border-block-end: rem(1px) solid var-get($_theme, 'idle-bottom-line-color');
diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss
diff --git a/src/app/input-group-showcase/input-group-showcase.sample.scss b/src/app/input-group-showcase/input-group-showcase.sample.scss
