From 39196d0d3f96fe3cd658c0757f5e6d1c7cadc34e Mon Sep 17 00:00:00 2001 From: didimmova Date: Thu, 30 Oct 2025 16:40:30 +0200 Subject: [PATCH 1/3] fix(input-group): fix borders and material focus line --- .../components/input/_input-group-theme.scss | 45 +++++++++---------- 1 file changed, 20 insertions(+), 25 deletions(-) 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 index 1f513442471..dbc7febeaef 100644 --- 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 @@ -96,13 +96,7 @@ display: inline-flex; width: max-content; align-items: center; - - @if $indigo-theme { - min-height: calc(100% - #{rem(1px)}) !important; - } @else { - min-height: 100% !important; - } - + min-height: 100% !important; transition: color $transition-timing, background $transition-timing; &:not(:empty) { @@ -155,12 +149,30 @@ [igxPrefix] { @extend %form-group-prefix; outline-style: none; + + &:first-child { + @if $variant == 'fluent' { + border-start-start-radius: calc(var-get($theme, 'border-border-radius') - var(--_fluent-input-border-size)); + border-end-start-radius: calc(var-get($theme, 'border-border-radius') - var(--_fluent-input-border-size)); + } @else if $variant == "indigo" { + border-start-start-radius: var-get($theme, 'box-border-radius'); + } + } } igx-suffix, [igxSuffix] { @extend %form-group-suffix; outline-style: none; + + &:last-child { + @if $variant == 'fluent' { + border-start-end-radius: calc(var-get($theme, 'border-border-radius') - var(--_fluent-input-border-size)); + border-end-end-radius: calc(var-get($theme, 'border-border-radius') - var(--_fluent-input-border-size)); + } @else if $variant == "indigo" { + border-start-end-radius: var-get($theme, 'box-border-radius'); + } + } } input, @@ -1500,7 +1512,7 @@ align-self: end; transform: scaleX(0); transform-origin: center; - background: var-get($theme, 'focused-secondary-color'); + background: var-get($theme, 'focused-bottom-line-color'); z-index: 1; } } @@ -2087,23 +2099,6 @@ } } - .igx-input-group--fluent [igxPrefix], - .igx-input-group--fluent igx-prefix { - &:first-child { - [igxButton]::after, - button::after { - border: { - start: { - start-radius: var-get($theme, 'border-border-radius'); - }; - end: { - start-radius: var-get($theme, 'border-border-radius'); - }; - } - } - } - } - %form-group-prefix-fluent, %form-group-suffix-fluent, %form-group-prefix-fluent-search, From 75f0982dea2267c0b5ae91dc848759fa4c9d7070 Mon Sep 17 00:00:00 2001 From: didimmova Date: Wed, 12 Nov 2025 16:31:14 +0200 Subject: [PATCH 2/3] fix(input): add border radius to bundle so the background doesn't overflow --- .../lib/core/styles/components/input/_input-group-theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index dbc7febeaef..79a04a7b975 100644 --- 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 @@ -1037,9 +1037,9 @@ %form-group-bundle--search { background: var-get($theme, 'search-background'); box-shadow: var-get($theme, 'search-resting-shadow'); + border-radius: var-get($theme, 'search-border-radius'); @if $variant != 'bootstrap' { - border-radius: var-get($theme, 'search-border-radius'); overflow: hidden; } From 7d255866585dc4268d5cbecce1acdd203a6d77c5 Mon Sep 17 00:00:00 2001 From: didimmova Date: Thu, 13 Nov 2025 08:36:30 +0200 Subject: [PATCH 3/3] fix(input): address latest comments --- .../input/_input-group-component.scss | 6 ------ .../components/input/_input-group-theme.scss | 18 +++++++++--------- 2 files changed, 9 insertions(+), 15 deletions(-) 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 index bf077148fc2..31d41920020 100644 --- 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 @@ -754,12 +754,6 @@ @include mx(fluent, search, focused) { @extend %igx-input-group-fluent-search--focused !optional; } - - @include mx(fluent, search, disabled) { - @include e(bundle) { - @extend %form-group-bundle-search--disabled !optional; - } - } // FLUENT END // ============================== // 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 index 79a04a7b975..830cbc1bd9d 100644 --- 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 @@ -692,7 +692,7 @@ %bootstrap-file-warning, %bootstrap-file-invalid { %form-group-bundle { - border-radius: var-get($theme, 'box-border-radius'); + border-radius: var-get($theme, 'border-border-radius'); transition: box-shadow .15s ease-out, border .15s ease-out; &:hover { @@ -805,7 +805,7 @@ .igx-input-group--bootstrap:not(.igx-input-group--prefixed) { .igx-input-group__upload-button { - border-radius: var-get($theme, 'box-border-radius') 0 0 var-get($theme, 'box-border-radius'); + border-radius: var-get($theme, 'border-border-radius') 0 0 var-get($theme, 'border-border-radius'); } .igx-input-group__file-input { @@ -2065,11 +2065,11 @@ } %fluent-label-success { - color: var-get($theme, 'idle-text-color'); + color: var-get($theme, 'idle-secondary-color'); } %fluent-label-error { - color: var-get($theme, 'idle-text-color'); + color: var-get($theme, 'idle-secondary-color'); } %fluent-label-disabled { @@ -2228,10 +2228,10 @@ end-width: rem(1px); }; start: { - start-radius: var-get($theme, 'box-border-radius'); + start-radius: var-get($theme, 'border-border-radius'); }; end: { - start-radius: var-get($theme, 'box-border-radius'); + start-radius: var-get($theme, 'border-border-radius'); }; } } @@ -2248,10 +2248,10 @@ end-width: rem(1px); }; start: { - end-radius: var-get($theme, 'box-border-radius'); + end-radius: var-get($theme, 'border-border-radius'); }; end: { - end-radius: var-get($theme, 'box-border-radius'); + end-radius: var-get($theme, 'border-border-radius'); }; } } @@ -2318,7 +2318,7 @@ map.get($bootstrap-inline-padding, 'cosy'), map.get($bootstrap-inline-padding, 'comfortable') ); - border-radius: var-get($theme, 'box-border-radius'); + border-radius: var-get($theme, 'border-border-radius'); }