From df6b19faa6d2b5c2f8ff07ef8eaf1e501930acc1 Mon Sep 17 00:00:00 2001 From: sivanova Date: Tue, 14 Oct 2025 10:39:28 +0300 Subject: [PATCH 1/4] refactor(input-group): input refinement --- .../lib/combo/themes/shared/bootstrap.scss | 28 +++++++++++++++---- .../src/lib/combo/themes/shared/indigo.scss | 2 +- .../core/styles/typography/_bootstrap.scss | 2 +- .../lib/core/styles/typography/_fluent.scss | 2 +- .../lib/core/styles/typography/_indigo.scss | 2 +- .../lib/core/styles/typography/_material.scss | 2 +- .../date-range-picker.component.scss | 1 + .../lib/date-range-picker/themes/_base.scss | 2 ++ .../themes/shared/_bootstrap.scss | 9 ++++++ .../themes/shared/_index.scss | 1 + .../lib/directives/input/input.directive.ts | 4 +++ .../src/lib/input-group/themes/_base.scss | 9 +----- .../input-group/themes/shared/bootstrap.scss | 14 ++++------ .../lib/input-group/themes/shared/fluent.scss | 6 +++- .../lib/input-group/themes/shared/indigo.scss | 20 +++++++++++-- .../input-group/themes/shared/material.scss | 21 ++++++++------ .../input-group-showcase.sample.scss | 1 + 17 files changed, 88 insertions(+), 38 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/date-range-picker/themes/shared/_bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/date-range-picker/themes/shared/_index.scss diff --git a/projects/igniteui-angular/src/lib/combo/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/combo/themes/shared/bootstrap.scss index a4b57ef576b..7358bf3860c 100644 --- 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 index 0130052b55c..f0061339830 100644 --- 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/core/styles/typography/_bootstrap.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss index 95e39253c9e..94b39380b4d 100644 --- 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 index aae9140be4c..f8afb3acccf 100644 --- 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 index 135eaed3607..bb73f123582 100644 --- 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 index cbd627eb303..5d174814b1d 100644 --- 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 index c7019d1c431..dd684163cd7 100644 --- 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 index 43ffecbbe62..1bc4af69302 100644 --- 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 new file mode 100644 index 00000000000..3d6a56cb9d0 --- /dev/null +++ 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 new file mode 100644 index 00000000000..59c998fde14 --- /dev/null +++ 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 index 6701290bd34..62df0705ed5 100644 --- 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 index da57de78078..7466cf9e2a8 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/_base.scss @@ -247,18 +247,16 @@ $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; @@ -345,11 +343,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 index 37edbc0815d..4a21121d8b4 100644 --- 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 index e3ad9c095af..34c95e88fcc 100644 --- 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); @@ -29,7 +30,10 @@ $_theme: $fluent; } @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) { 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 index c948fae0009..95b9726b9b8 100644 --- 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); @@ -64,7 +64,7 @@ $_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) { @@ -72,6 +72,18 @@ $_theme: $indigo; } } + @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'); @@ -155,6 +167,10 @@ $_theme: $indigo; } } + @include m(search) { + --_prefix-suffix-spacing: #{pad-inline(rem(6px), rem(8px), rem(10px))}; + } + @include m(disabled) { @include e(bundle) { border-block-end: rem(1px) solid var-get($_theme, 'disabled-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 index 8be9c5e14c4..53ac70b9c25 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss @@ -7,7 +7,7 @@ $_theme: $material; $transition-timing: .25s $out-cubic; -$bundle-start-end-min-width: pad(rem(10px), rem(12px), rem(14px)); +$bundle-start-end-min-width: pad(rem(8px), rem(10px), rem(12px)); $input-inline-padding: rem(4px); $input-top-spacing: rem(20px); $input-bottom-spacing: rem(6px); @@ -80,7 +80,7 @@ $input-bottom-spacing: rem(6px); --_prefix-suffix-spacing: #{pad-inline(rem(12px), rem(14px), rem(16px))}; --_bundle-template-rows: #{var-get($_theme, 'size')}; - &:has([igxLabel], igx-label), { + &:has([igxLabel], igx-label) { --_input-top-spacing: #{$input-top-spacing}; --_input-bottom-spacing: #{$input-bottom-spacing}; --_label-row: 1; @@ -124,6 +124,8 @@ $input-bottom-spacing: rem(6px); @include e(hint) { grid-row: var(--_hint-row); + min-height: rem(18px); + padding-inline: sizable(rem(12px), rem(14px), rem(16px)); } @include m(base) { @@ -331,7 +333,9 @@ $input-bottom-spacing: rem(6px); --_bundle-template-rows: auto; @include e(bundle-main) { - padding-block-start: $input-top-spacing; + --_input-top-spacing: #{sizable(rem(16px), rem(20px), rem(24px))}; + + padding-block-start: var(--_input-top-spacing); } @include e(textarea) { @@ -357,6 +361,12 @@ $input-bottom-spacing: rem(6px); } } + @include mx(border, textarea-group) { + @include e(bundle-main) { + --_input-top-spacing: #{sizable(rem(8px), rem(12px), rem(16px))}; + } + } + @include mx(border, textarea-group, ('not': (suffixed))) { @include e(textarea) { max-width: calc(100% - #{rem(2px)}); @@ -845,11 +855,6 @@ $input-bottom-spacing: rem(6px); } } - @include e(hint) { - min-height: rem(18px); - padding-inline: sizable(rem(14px), rem(16px), rem(18px)); - } - @include m(valid) { @include e(label) { color: #{var-get($_theme, 'success-secondary-color')}; diff --git a/src/app/input-group-showcase/input-group-showcase.sample.scss b/src/app/input-group-showcase/input-group-showcase.sample.scss index a939d251120..97194be1a39 100644 --- a/src/app/input-group-showcase/input-group-showcase.sample.scss +++ b/src/app/input-group-showcase/input-group-showcase.sample.scss @@ -56,6 +56,7 @@ display: flex; flex-direction: column; gap: 2rem; + min-width: 0; } .showcase__placeholder { From 028725d23ad7e9c302aae3d296975782595a1ba2 Mon Sep 17 00:00:00 2001 From: sivanova Date: Thu, 16 Oct 2025 09:53:30 +0300 Subject: [PATCH 2/4] refactor(input-group): address review comments --- package-lock.json | 8 ++++---- package.json | 4 ++-- .../src/lib/combo/themes/_base.scss | 5 ----- .../src/lib/combo/themes/shared/material.scss | 4 ++++ .../src/lib/core/styles/themes/_core.scss | 2 +- .../src/lib/input-group/themes/_base.scss | 2 +- .../lib/input-group/themes/shared/fluent.scss | 7 +++++++ .../lib/input-group/themes/shared/indigo.scss | 16 ++++++++++++---- .../lib/input-group/themes/shared/material.scss | 10 +++++++--- 9 files changed, 38 insertions(+), 20 deletions(-) diff --git a/package-lock.json b/package-lock.json index b9da21e51ff..18aa57b94ea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "@types/source-map": "0.5.2", "express": "^5.1.0", "fflate": "^0.8.1", - "igniteui-theming": "^20.0.0", + "igniteui-theming": "^21.0.2", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", @@ -13753,9 +13753,9 @@ } }, "node_modules/igniteui-theming": { - "version": "20.0.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-20.0.0.tgz", - "integrity": "sha512-g+pxAskmX1g0wlwaO0MPcT8sMTbr3rzSEOJRWg26FBKcVE09cxPEbX2Vl9k7LdbBc5VdDoiAgsI9yvZhAUM0Xg==", + "version": "21.0.2", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-21.0.2.tgz", + "integrity": "sha512-RXs8b3PThVlS1FhLeUT9TlLMcPoNAiwJm/L+jHU7jrwsgZU7gGjipjEbQQRe97AURyTxgXKiC4M8CAuUilWQ2A==", "license": "MIT" }, "node_modules/igniteui-trial-watermark": { diff --git a/package.json b/package.json index 13acec585d7..dc50367467d 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "@types/source-map": "0.5.2", "express": "^5.1.0", "fflate": "^0.8.1", - "igniteui-theming": "^20.0.0", + "igniteui-theming": "^21.0.2", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", @@ -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 index b31c7d92b91..e95203fefb7 100644 --- 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/material.scss b/projects/igniteui-angular/src/lib/combo/themes/shared/material.scss index 2cd9ccc67f3..fa7806b2644 100644 --- 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/themes/_core.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss index 1fbfb6e5852..9fb8861729f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss @@ -92,7 +92,7 @@ $enhanced-accessibility: false ) { @include color.configure-colors($enhanced-accessibility); - @include themes.configure-prefix('igx'); + // @include themes.configure-prefix('igx'); // Angular hack for binding to [hidden] property // not working diff --git a/projects/igniteui-angular/src/lib/input-group/themes/_base.scss b/projects/igniteui-angular/src/lib/input-group/themes/_base.scss index 7466cf9e2a8..b2a9c6009ee 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/_base.scss @@ -134,7 +134,7 @@ $base-scale-size: ( max-width: 100%; font-size: rem(16px); height: var-get($theme, 'size'); - min-height: var-get($theme, 'size'); + // min-height: var-get($theme, 'size'); grid-column: 1 / -1; } 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 index 34c95e88fcc..ce5d5907673 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/fluent.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/fluent.scss @@ -27,6 +27,8 @@ $_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) { @@ -84,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(invalid) { 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 index 95b9726b9b8..d731bc55ba7 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss @@ -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) { @@ -167,10 +179,6 @@ $_theme: $indigo; } } - @include m(search) { - --_prefix-suffix-spacing: #{pad-inline(rem(6px), rem(8px), rem(10px))}; - } - @include m(disabled) { @include e(bundle) { border-block-end: rem(1px) solid var-get($_theme, 'disabled-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 index 53ac70b9c25..62ddc30b22b 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss @@ -332,9 +332,13 @@ $input-bottom-spacing: rem(6px); @include m(textarea-group) { --_bundle-template-rows: auto; - @include e(bundle-main) { - --_input-top-spacing: #{sizable(rem(16px), rem(20px), rem(24px))}; + --_input-top-spacing: #{sizable(rem(8px), rem(12px), rem(16px))}; + + &:has(label:not(:empty)) { + --_input-top-spacing: #{pad-block(rem(16px), rem(20px), rem(24px))}; + } + @include e(bundle-main) { padding-block-start: var(--_input-top-spacing); } @@ -351,7 +355,7 @@ $input-bottom-spacing: rem(6px); } @include e(textarea) { - padding-inline-end: rem(4px); + padding-inline-end: pad-inline(rem(12px), rem(14px), rem(16px)); } } From a12108b72b51e0bea110a948efb3dc9c5331791b Mon Sep 17 00:00:00 2001 From: sivanova Date: Thu, 16 Oct 2025 11:10:50 +0300 Subject: [PATCH 3/4] fix(input-group): helper text issue --- .../igniteui-angular/src/lib/input-group/themes/_base.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/input-group/themes/_base.scss b/projects/igniteui-angular/src/lib/input-group/themes/_base.scss index b2a9c6009ee..567f9e9ef58 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/_base.scss @@ -134,7 +134,7 @@ $base-scale-size: ( max-width: 100%; font-size: rem(16px); height: var-get($theme, 'size'); - // min-height: var-get($theme, 'size'); + min-height: var-get($theme, 'size'); grid-column: 1 / -1; } @@ -259,6 +259,7 @@ $base-scale-size: ( position: relative; grid-row: var(--_hint-row); grid-column: 1 / -1; + overflow-wrap: anywhere; &:empty { --_hint-row: 1; From 939c56eb492fe3f0a614eeb335617343cc92663e Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Tue, 21 Oct 2025 11:32:20 +0300 Subject: [PATCH 4/4] Update _core.scss --- projects/igniteui-angular/src/lib/core/styles/themes/_core.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss index 9fb8861729f..1fbfb6e5852 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss @@ -92,7 +92,7 @@ $enhanced-accessibility: false ) { @include color.configure-colors($enhanced-accessibility); - // @include themes.configure-prefix('igx'); + @include themes.configure-prefix('igx'); // Angular hack for binding to [hidden] property // not working