From 1ad86a7b31e88a9b1c70bded8e57f3a6d2cbbddd Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Thu, 26 Jun 2025 10:28:06 +0300
Subject: [PATCH 01/15] refactor(input-group): update file upload style
 implementation

---
 .../input/_input-group-component.scss         |  96 +++++
 .../components/input/_input-group-theme.scss  | 358 ++++++++++++++++--
 .../input-group/input-group.component.html    |  17 +-
 .../lib/input-group/input-group.component.ts  |   5 -
 .../input-group-showcase.sample.html          |  56 ++-
 5 files changed, 482 insertions(+), 50 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 9638b638ca7..54b2ebdcb2d 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
@@ -233,10 +233,35 @@
         }
 
         @include m(file) {
+            @extend %form-group-display--file !optional;
+
             @include e(label) {
                 @extend %form-group-label--float !optional;
             }
         }
+        @include mx(file, focused) {
+            @extend %form-group-display--file-focused !optional;
+        }
+
+        @include mx(file, border) {
+            @extend %form-group-display--file-border !optional;
+        }
+
+        @include mx(file, border, focused) {
+            @extend %form-group-display--file-border-focused !optional;
+        }
+
+        @include mx(file, border, valid) {
+            @extend %form-group-display--file-border-success !optional;
+        }
+
+        @include mx(file, border, warning) {
+            @extend %form-group-display--file-border-warning !optional;
+        }
+
+        @include mx(file, border, invalid) {
+            @extend %form-group-display--file-border-error !optional;
+        }
 
         @include m(required) {
             @include e(label) {
@@ -561,6 +586,11 @@
                 @extend %form-group-bundle-search--disabled !optional;
             }
         }
+
+        @include e(upload-button) {
+            @extend %upload-button !optional;
+        }
+
         // BASE END
 
         // ============================== //
@@ -902,6 +932,46 @@
             }
         }
 
+        @include mx(bootstrap, file) {
+            @extend %form-group-display--bootstrap-file !optional;
+
+            @include e(input) {
+                @extend %bootstrap-input-file !optional;
+            }
+
+            @include e(bundle-end) {
+                @extend %bootstrap-bundle-end !optional;
+            }
+        }
+
+        @include mx(bootstrap, file, focused) {
+            @extend %bootstrap-file-focused !optional;
+        }
+
+        @include mx(bootstrap, file, valid) {
+            @extend %bootstrap-file-valid !optional;
+        }
+
+        @include mx(bootstrap, file, warning) {
+            @extend %bootstrap-file-warning !optional;
+        }
+
+        @include mx(bootstrap, file, invalid) {
+            @extend %bootstrap-file-invalid !optional;
+        }
+
+        @include mx(bootstrap, file, valid, focused) {
+            @extend %bootstrap-file-valid-focused !optional;
+        }
+
+        @include mx(bootstrap, file, warning, focused) {
+            @extend %bootstrap-file-warning-focused !optional;
+        }
+
+        @include mx(bootstrap, file, invalid, focused) {
+            @extend %bootstrap-file-invalid-focused !optional;
+        }
+
         @include mx(bootstrap, prefixed) {
             @extend %form-group-display--bootstrap-prefixed !optional;
         }
@@ -970,6 +1040,32 @@
             }
         }
 
+        @include mx(bootstrap, warning) {
+            @include e(input) {
+                @extend %bootstrap-input--warning !optional;
+
+                &:hover {
+                    @extend %bootstrap-input--warning !optional;
+                }
+            }
+
+            @include e(file-input) {
+                @extend %bootstrap-input--warning !optional;
+
+                &:hover {
+                    @extend %bootstrap-input--warning !optional;
+                }
+            }
+
+            @include e(textarea) {
+                @extend %bootstrap-input--warning !optional;
+
+                &:hover {
+                    @extend %bootstrap-input--warning !optional;
+                }
+            }
+        }
+
         @include mx(bootstrap, invalid) {
             @include e(input) {
                 @extend %bootstrap-input--error !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
index f641fe6b10e..3c500439c12 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
@@ -702,10 +702,6 @@
             font-family: inherit;
         }
 
-        input[type='file'] {
-            @include hide-default();
-        }
-
         textarea {
             overflow: auto;
         }
@@ -760,7 +756,7 @@
     }
 
     %form-group-placeholder {
-        &:has(input:placeholder-shown, textarea:placeholder-shown) { 
+        &:has(input:placeholder-shown, textarea:placeholder-shown) {
             %form-group-label {
                 transition: none !important;
             }
@@ -884,7 +880,7 @@
     }
 
     %form-group-bundle--hover {
-        cursor: pointer;
+        //cursor: pointer;
 
         &::after {
             border-block-end-width: rem(1px);
@@ -946,6 +942,316 @@
         max-width: inherit;
     }
 
+    @if $material-theme {
+        %form-group-display--file {
+            %form-group-file-input {
+                padding-inline: rem(4px);
+            }
+        }
+
+        %form-group-display--file-border {
+            %form-group-input {
+                z-index: 2;
+            }
+
+            // We need this otherwise we have to use !important
+            %form-group-bundle {
+                grid-template-columns: auto auto auto 1fr auto;
+
+                %form-group-bundle-end {
+                    grid-area: 1 / 5;
+                }
+
+                &:hover {
+                    %upload-button {
+                        border-color: var-get($theme, 'hover-border-color');
+                    }
+                }
+            }
+
+            %upload-button {
+                border-block: rem(1px) solid var-get($theme, 'border-color');
+            }
+        }
+
+        %form-group-display--file-border-focused {
+            %upload-button {
+                border-width: rem(2px);
+                border-color: var-get($theme, 'focused-border-color');
+            }
+
+            %form-group-bundle {
+                &:hover {
+                    %upload-button {
+                        border-color: var-get($theme, 'focused-border-color');
+                    }
+                }
+            }
+        }
+
+        %form-group-display--file-border-success {
+            %upload-button {
+                border-color: var-get($theme, 'success-secondary-color');
+            }
+
+            %form-group-bundle {
+                &:hover {
+                    %upload-button {
+                        border-color: var-get($theme, 'success-secondary-color');
+                    }
+                }
+            }
+        }
+
+        %form-group-display--file-border-warning {
+            %upload-button {
+                border-color: var-get($theme, 'warning-secondary-color');
+            }
+
+            %form-group-bundle {
+                &:hover {
+                    %upload-button {
+                        border-color: var-get($theme, 'warning-secondary-color');
+                    }
+                }
+            }
+        }
+
+        %form-group-display--file-border-error {
+            %upload-button {
+                border-color: var-get($theme, 'error-secondary-color');
+            }
+
+            %form-group-bundle {
+                &:hover {
+                    %upload-button {
+                        border-color: var-get($theme, 'error-secondary-color');
+                    }
+                }
+            }
+        }
+    }
+
+    @if $variant == 'fluent' {
+        %form-group-display--file-focused {
+            %form-group-input,
+            %form-group-file-input,
+            %upload-button {
+                margin-block-start: rem(-1px);
+            }
+        }
+    }
+
+    %form-group-display--file {
+        .igx-button--flat {
+            --background: transparent;
+            --hover-background: transparent;
+            --focus-background: transparent;
+            --focus-visible-background: transparent;
+            --focus-hover-background: transparent;
+            --active-background: transparent;
+            --disabled-background: transparent;
+            --resting-elevation: none;
+            --hover-elevation: none;
+            --focus-elevation: none;
+            --active-elevation: none;
+            --shadow-color: none;
+            --border-color: transparent;
+            --hover-border-color: transparent;
+            --focus-border-color: transparent;
+            --focus-visible-border-color: transparent;
+            --active-border-color: transparent;
+            --disabled-border-color: transparent
+        }
+
+        %form-group-bundle {
+            grid-template-columns: auto auto auto 1fr auto;
+        }
+
+        %form-group-file-input {
+            grid-area: 1/3 / span 1 / span 2;
+            flex-grow: 1;
+            padding-inline: rem(4px);
+            cursor: pointer;
+
+            @if $variant != 'material' {
+                display: flex;
+                align-items: center;
+
+                span {
+                    transform: revert;
+                    inset: revert;
+                }
+            }
+        }
+
+        %igx-input-group__notch {
+            grid-area: 1 / 3;
+        }
+
+        %form-group-bundle-end {
+            grid-area: 1 / 5;
+        }
+
+        %igx-input-group__filler {
+            grid-area: 1 / 4;
+        }
+
+        %form-group-bundle-end {
+            grid-area: 1 / 5;
+        }
+
+        %form-group-bundle-main {
+            display: contents;
+        }
+
+        %form-group-input {
+            grid-column: 2 / -2;
+            grid-row: 1 / -1;
+            border: none;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            appearance: none;
+            opacity: 0;
+            z-index: 2;
+            cursor: pointer;
+        }
+
+        ::file-selector-button {
+            cursor: pointer;
+        }
+    }
+
+    %upload-button {
+        display: flex;
+        align-items: center;
+        grid-area: 1 / 2;
+        pointer-events: none;
+        height: var-get($theme, 'size');
+        cursor: pointer;
+    }
+
+    %form-group-display--bootstrap-file {
+        .igx-button--flat {
+            --foreground: #{var-get($theme, 'input-prefix-color')};
+            --hover-foreground: #{var-get($theme, 'input-prefix-color')};
+            --active-foreground: #{var-get($theme, 'input-prefix-color')};
+            --focus-visible-foreground: #{var-get($theme, 'input-prefix-color')};
+            --disabled-foreground: var-get($theme, 'disabled-text-color');
+        }
+
+        %upload-button {
+            background: var-get($theme, 'input-prefix-background');
+            border: rem(1px) solid var-get($theme, 'border-color');
+            border-inline-end-width: 0;
+        }
+
+        %form-group-bundle-start,
+        %form-group-bundle-end {
+            [igxPrefix],
+            igx-prefix {
+                height: var-get($theme, 'size');
+            }
+        }
+    }
+
+    %bootstrap-file-focused,
+    %bootstrap-file-valid,
+    %bootstrap-file-warning,
+    %bootstrap-file-invalid,
+    {
+        %form-group-bundle {
+            border-radius: var-get($theme, 'box-border-radius');
+            transition: box-shadow .15s ease-out, border .15s ease-out;
+
+            &:hover {
+                %form-group-file-input {
+                    box-shadow: none;
+                }
+            }
+        }
+
+        %form-group-file-input {
+            box-shadow: none;
+        }
+    }
+
+    %bootstrap-file-focused {
+        %form-group-bundle-start,
+        %form-group-bundle-end,
+        %upload-button {
+            border-color: var-get($theme, 'focused-border-color');
+        }
+
+        %form-group-bundle {
+            box-shadow: 0 0 0 rem(4px) var-get($theme, 'focused-secondary-color');
+        }
+    }
+
+    %bootstrap-file-valid {
+        %form-group-bundle-start,
+        %form-group-bundle-end,
+        %upload-button {
+            border-color: var-get($theme, 'success-secondary-color');
+        }
+    }
+
+    %bootstrap-file-warning {
+        %form-group-bundle-start,
+        %form-group-bundle-end,
+        %upload-button {
+            border-color: var-get($theme, 'warning-secondary-color');
+        }
+    }
+
+    %bootstrap-file-invalid {
+        %form-group-bundle-start,
+        %form-group-bundle-end,
+        %upload-button {
+            border-color: var-get($theme, 'error-secondary-color');
+        }
+    }
+
+    %bootstrap-file-valid-focused {
+        %form-group-bundle {
+            box-shadow: 0 0 0 rem(4px) var-get($theme, 'success-shadow-color');
+        }
+    }
+
+    %bootstrap-file-warning-focused {
+        %form-group-bundle {
+            box-shadow: 0 0 0 rem(4px) color($color: 'warn', $variant: '500', $opacity: .38);
+        }
+    }
+
+    %bootstrap-file-invalid-focused {
+        %form-group-bundle {
+            box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
+        }
+    }
+
+    @if $variant == 'bootstrap' {
+        %form-group-display--file-focused {
+            %form-group-bundle-start,
+            %form-group-bundle-end,
+            %upload-button {
+                border-color: var-get($theme, 'focused-border-color');
+            }
+        }
+    }
+
+    .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');
+        }
+
+        .igx-input-group__file-input {
+            border-start-start-radius: 0;
+            border-end-start-radius: 0;
+        }
+    }
+
     %form-group-bundle--box {
         // padding 0 is needed here because of the search variant
         padding: 0 !important;
@@ -1943,13 +2249,6 @@
             border-bottom-style: solid;
         }
     }
-
-    %indigo-upload-button {
-        [igxButton] {
-            min-height: 0;
-            height: calc(100% - #{rem(8px)});
-        }
-    }
     // INDIGO END
 
     // ==============================================
@@ -2261,9 +2560,6 @@
         }
     }
 
-    %fluent-upload-button {
-        padding: 0;
-    }
     // FLUENT END
 
     // ==============================================
@@ -2405,7 +2701,9 @@
     %bootstrap-input {
         height: auto;
         line-height: 1.5;
+        grid-area: 1 / 2;
         margin: 0;
+        z-index: 2;
         font-size: pad(
             map.get($bootstrap-font-size, 'compact'),
             map.get($bootstrap-font-size, 'cosy'),
@@ -2445,15 +2743,24 @@
             map.get($bootstrap-inline-padding, 'cosy'),
             map.get($bootstrap-inline-padding, 'comfortable')
         );
-        grid-area: 1 / 2 / auto / auto;
         border-radius: var-get($theme, 'box-border-radius');
-        z-index: 1;
+
     }
 
     %bootstrap-file-input {
         height: inherit;
     }
 
+    %bootstrap-input-file {
+        grid-column: 2 / -2;
+        grid-row: 1 / -1;
+        height: var-get($theme, 'size');
+    }
+
+    %bootstrap-bundle-end {
+        grid-area: 1 / 5;
+    }
+
     %bootstrap-input--focus {
         border: rem(1px) solid var-get($theme, 'focused-border-color');
         box-shadow: 0 0 0 rem(4px) var-get($theme, 'focused-secondary-color');
@@ -2471,6 +2778,11 @@
         }
     }
 
+    %bootstrap-input--warning {
+        border: rem(1px) solid var-get($theme, 'warning-secondary-color');
+        box-shadow: 0 0 0 rem(4px) color($color: 'warn', $variant: '500', $opacity: .38);
+    }
+
     %bootstrap-input--error {
         border: rem(1px) solid var-get($theme, 'error-secondary-color');
 
@@ -2511,16 +2823,6 @@
         border-color: var-get($theme, 'disabled-border-color');
         color: var-get($theme, 'disabled-text-color');
     }
-
-    // Upload button for file type input
-    %bootstrap-upload-button {
-        padding: 0;
-
-        [igxButton] {
-            min-height: 0;
-            height: calc(100% - #{rem(8px)});
-        }
-    }
 }
 
 /// Adds typography styles for the igx-input-group component.
diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.html b/projects/igniteui-angular/src/lib/input-group/input-group.component.html
index 8b5a258edfa..ca1e3659b61 100644
--- a/projects/igniteui-angular/src/lib/input-group/input-group.component.html
+++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.html
@@ -22,19 +22,22 @@
     <ng-content select="igx-prefix, [igxPrefix]"></ng-content>
 </ng-template>
 
+<!-- Dummy usage to satisfy Angular compiler -->
+<ng-template #dummy><span igxPrefix hidden></span></ng-template>
+
 <ng-template #uploadButton>
     @if (isFileType) {
-        <igx-prefix class="igx-input-group__upload-button">
+        <div class="igx-input-group__upload-button">
             <button
-                igxButton="contained"
+                igxButton="flat"
                 type="button"
-                (click)="uploadButtonHandler()"
+                tabindex="-1"
                 [disabled]="disabled"
                 [ngClass]="{ 'igx-input-group__upload-button': isTypeLine }"
             >
                 {{ resourceStrings.igx_input_upload_button }}
             </button>
-        </igx-prefix>
+        </div>
     }
 </ng-template>
 
@@ -71,7 +74,6 @@
     <div class="igx-input-group__bundle">
         <div class="igx-input-group__bundle-start">
             <ng-container *ngTemplateOutlet="prefix"></ng-container>
-            <ng-container *ngTemplateOutlet="uploadButton"></ng-container>
         </div>
 
         <ng-container>
@@ -82,6 +84,7 @@
 
         <div class="igx-input-group__bundle-main">
             <ng-container *ngTemplateOutlet="input"></ng-container>
+            <ng-container *ngTemplateOutlet="uploadButton"></ng-container>
             <ng-container *ngTemplateOutlet="files"></ng-container>
         </div>
 
@@ -104,12 +107,12 @@
     <div class="igx-input-group__bundle">
         <div class="igx-input-group__bundle-start">
             <ng-container *ngTemplateOutlet="prefix"></ng-container>
-            <ng-container *ngTemplateOutlet="uploadButton"></ng-container>
         </div>
 
 
         <div class="igx-input-group__bundle-main">
             <ng-container *ngTemplateOutlet="input"></ng-container>
+            <ng-container *ngTemplateOutlet="uploadButton"></ng-container>
             <ng-container *ngTemplateOutlet="files"></ng-container>
         </div>
 
@@ -130,10 +133,10 @@
     <div class="igx-input-group__bundle">
         <div class="igx-input-group__bundle-start">
             <ng-container *ngTemplateOutlet="prefix"></ng-container>
-            <ng-container *ngTemplateOutlet="uploadButton"></ng-container>
         </div>
 
         <ng-container *ngTemplateOutlet="input"></ng-container>
+        <ng-container *ngTemplateOutlet="uploadButton"></ng-container>
         <ng-container *ngTemplateOutlet="files"></ng-container>
 
         <div class="igx-input-group__bundle-end">
diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
index 93b8a4579cf..2ffd4000654 100644
--- a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
+++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
@@ -335,11 +335,6 @@ export class IgxInputGroupComponent implements IgxInputGroupBase {
         return this.type === 'box' && this._theme === 'material';
     }
 
-    /** @hidden @internal */
-    public uploadButtonHandler() {
-        this.input.nativeElement.click();
-    }
-
     /** @hidden @internal */
     public clearValueHandler() {
         this.input.clear();
diff --git a/src/app/input-group-showcase/input-group-showcase.sample.html b/src/app/input-group-showcase/input-group-showcase.sample.html
index 646f3df2cba..ac90d84b97d 100644
--- a/src/app/input-group-showcase/input-group-showcase.sample.html
+++ b/src/app/input-group-showcase/input-group-showcase.sample.html
@@ -18,7 +18,11 @@ <h1 class="showcase__title">Angular</h1>
             @if (getLabel()) {
                 <label igxLabel>{{ getLabel() }}</label>
             }
-            <igx-icon igxPrefix [hidden]="hidePrefix()">face</igx-icon>
+
+            @if (!hidePrefix()) {
+                <igx-icon igxPrefix>face</igx-icon>
+            }
+
             <input
                 formControlName="field"
                 [type]="getNativeInputType()"
@@ -42,7 +46,11 @@ <h1 class="showcase__title">Angular</h1>
             @if (getLabel()) {
                 <label igxLabel>{{ getLabel() }}</label>
             }
-            <igx-icon igxPrefix [hidden]="hidePrefix()">face</igx-icon>
+
+            @if (!hidePrefix()) {
+                <igx-icon igxPrefix>face</igx-icon>
+            }
+
             <textarea
                 formControlName="fieldTextarea"
                 [required]="isRequired()"
@@ -68,7 +76,11 @@ <h1 class="showcase__title">Angular</h1>
             @if (getLabel()) {
                 <label igxLabel>{{ getLabel() }}</label>
             }
-            <igx-icon igxPrefix [hidden]="hidePrefix()">favorite</igx-icon>
+
+            @if (!hidePrefix()) {
+                <igx-icon igxPrefix>favorite</igx-icon>
+            }
+
             <igx-hint>
                 I am a Hint
             </igx-hint>
@@ -93,7 +105,11 @@ <h1 class="showcase__title">Angular</h1>
             @if (getLabel()) {
                 <label igxLabel>{{ getLabel() }}</label>
             }
-            <igx-icon igxPrefix [hidden]="hidePrefix()">favorite</igx-icon>
+
+            @if (!hidePrefix()) {
+                <igx-icon igxPrefix>favorite</igx-icon>
+            }
+
             @if (!hideSuffix()) {
                 <igx-suffix>
                     <igx-icon>favorite</igx-icon>
@@ -108,9 +124,13 @@ <h1 class="showcase__title">Angular</h1>
             [type]="getInputGroupType()"
             [style.--ig-size]="getSize()">
             @if (getLabel()) {
-                <label igxLabel>{{ getLabel() }} ("No file chosen" is not an actual value)</label>
+                <label igxLabel>Files to upload</label>
+            }
+
+            @if (!hidePrefix()) {
+                <igx-icon igxPrefix>face</igx-icon>
             }
-            <igx-icon igxPrefix [hidden]="hidePrefix()">face</igx-icon>
+
             <input
                 formControlName="fieldFile"
                 [required]="isRequired()"
@@ -168,7 +188,11 @@ <h1 class="showcase__title">Web components</h1>
                 [attr.placeholder]="getPlaceholder()"
                 [type]="getNativeInputType()"
                 [outlined]="isOutlined()">
-            <span slot="prefix" [hidden]="hidePrefix()"><igc-icon name="face"></igc-icon></span>
+
+            @if (!hidePrefix()) {
+                <span slot="prefix"><igc-icon name="face"></igc-icon></span>
+            }
+
             @if (!hideSuffix()) {
                 <span slot="suffix"><igc-icon name="face"></igc-icon></span>
             }
@@ -184,7 +208,11 @@ <h1 class="showcase__title">Web components</h1>
                 [attr.value]="getValue()"
                 [attr.placeholder]="getPlaceholder()"
                 [outlined]="isOutlined()">
-            <span slot="prefix" [hidden]="hidePrefix()"><igc-icon name="face"></igc-icon></span>
+
+            @if (!hidePrefix()) {
+                <span slot="prefix"><igc-icon name="face"></igc-icon></span>
+            }
+
             @if (!hideSuffix()) {
                 <span slot="suffix"><igc-icon name="face"></igc-icon></span>
             }
@@ -198,7 +226,11 @@ <h1 class="showcase__title">Web components</h1>
             [disabled]="isDisabled()"
             [outlined]="isOutlined()"
             [style.--ig-size]="getSize()">
-            <igc-icon slot="prefix" [hidden]="hidePrefix()" name="favorite"></igc-icon>
+
+            @if (!hidePrefix()) {
+                <igc-icon slot="prefix" name="favorite"></igc-icon>
+            }
+
             @if (!hideSuffix()) {
                 <igc-icon slot="suffix" name="favorite"></igc-icon>
             }
@@ -217,7 +249,11 @@ <h1 class="showcase__title">Web components</h1>
                 [disabled]="isDisabled()"
                 [style.--ig-size]="getSize()">
             <span slot="helper-text">I am a Hint</span>
-            <igc-icon slot="prefix" [hidden]="hidePrefix()" name="favorite"></igc-icon>
+
+            @if (!hidePrefix()) {
+                <igc-icon slot="prefix" name="favorite"></igc-icon>
+            }
+
             @if (!hideSuffix()) {
                 <igc-icon slot="suffix" name="favorite"></igc-icon>
             }

From 31190759146ca1a4ed8ab2aa7e1809f5eb3ac1c6 Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Thu, 26 Jun 2025 11:09:28 +0300
Subject: [PATCH 02/15] refactor(input-group): remove  this.isFileType from the
 prefix getter since the button is no longer a prefix

---
 .../src/lib/input-group/input-group.component.ts                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
index 2ffd4000654..4c31c5e1aa4 100644
--- a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
+++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
@@ -270,7 +270,7 @@ export class IgxInputGroupComponent implements IgxInputGroupBase {
     /** @hidden @internal */
     @HostBinding('class.igx-input-group--prefixed')
     public get hasPrefixes() {
-        return this._prefixes.length > 0 || this.isFileType;
+        return this._prefixes.length > 0;
     }
 
     /** @hidden @internal */

From 7eeaa307269b1dfee068c4c9dc3d1a21b59e4824 Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Thu, 3 Jul 2025 14:15:37 +0300
Subject: [PATCH 03/15] fix(input-group): create file input theme

---
 .../lib/core/styles/components/_index.scss    |   1 +
 .../input/_file-input-component.scss          |  72 +++++++
 .../components/input/_file-input-theme.scss   | 190 ++++++++++++++++++
 .../components/input/_input-group-theme.scss  |  47 +----
 .../src/lib/core/styles/themes/_core.scss     |   2 +
 .../core/styles/themes/generators/_base.scss  |  11 +
 .../core/styles/typography/_bootstrap.scss    |   4 +
 .../lib/core/styles/typography/_fluent.scss   |   5 +
 .../lib/core/styles/typography/_indigo.scss   |   6 +
 .../lib/core/styles/typography/_material.scss |   2 +
 .../date-range-picker-inputs.common.ts        |   4 +-
 .../input-group/input-group.component.html    |   6 +-
 .../lib/input-group/input-group.component.ts  |  30 ++-
 13 files changed, 327 insertions(+), 53 deletions(-)
 create mode 100644 projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-component.scss
 create mode 100644 projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-theme.scss

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/_index.scss b/projects/igniteui-angular/src/lib/core/styles/components/_index.scss
index f197f6628a9..5f0d6a09fc6 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/_index.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/_index.scss
@@ -52,3 +52,4 @@
 @forward 'tooltip/tooltip-theme';
 @forward 'tree/tree-theme';
 @forward 'watermark/watermark-theme';
+@forward 'input/file-input-theme';
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-component.scss
new file mode 100644
index 00000000000..b156b1df479
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-component.scss
@@ -0,0 +1,72 @@
+@use '../../base' as *;
+@use 'sass:string';
+
+/// @access private
+@mixin component {
+    @include b(igx-file-input) {
+        $this: bem--selector-to-string(&);
+
+        @include register-component(
+            $name: string.slice($this, 2, -1),
+            $deps: (igx-input-group)
+        );
+
+        @extend %file-display !optional;
+
+        @include e(file-names) {
+            @extend %file-names !optional;
+        }
+
+        @include e(upload-button) {
+            @extend %upload-buton !optional;
+        }
+
+        @include e(clear-icon) {
+            @extend %clear-icon !optional;
+        }
+
+        @include m(filled) {
+            @include e(file-names) {
+                @extend %file-names--filled !optional;
+            }
+
+            @include e(upload-button) {
+                @extend %upload-buton--filled !optional;
+            }
+
+            @include e(clear-icon) {
+                @extend %clear-icon--filled !optional;
+            }
+        }
+
+        @include m(focused) {
+            @include e(file-names) {
+                @extend %file-names--focused !optional;
+            }
+
+            @include e(upload-button) {
+                @extend %upload-buton--focused !optional;
+            }
+
+            @include e(clear-icon) {
+                @extend %clear-icon--focused !optional;
+            }
+        }
+
+        @include m(disabled) {
+            @include m(focused) {
+                @include e(file-names) {
+                    @extend %file-names--disabled !optional;
+                }
+
+                @include e(upload-buton) {
+                    @extend %upload-buton--disabled !optional;
+                }
+
+                @include e(clear-icon) {
+                    @extend %clear-icon--disabled !optional;
+                }
+            }
+        }
+    }
+}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-theme.scss
new file mode 100644
index 00000000000..06d9470759d
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-theme.scss
@@ -0,0 +1,190 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '../../base' as *;
+@use '../../themes/schemas' as *;
+@use 'igniteui-theming/sass/animations/easings' as *;
+
+////
+/// @group themes
+/// @access public
+////
+
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
+/// @param {Color} $file-names-background [null] - The file names container background color.
+/// @param {Color} $file-names-background--focused [null] - The file names container background color when the file input is focused.
+/// @param {Color} $file-names-background--filled [null] - The file names container background color when the file input is filled.
+/// @param {Color} $file-names-background--disabled [null] - The file names container background color when the file input is disabled.
+/// @param {Color} $file-names-foreground [null] - The file names color.
+/// @param {Color} $file-names-foreground--focused [null] - The file names color when the file input is focused.
+/// @param {Color} $file-names-foreground--filled [null] - The file names color when the file input is filled.
+/// @param {Color} $file-names-foreground--disabled [null] - The file names color when the file input is disabled.
+/// @param {Color} $file-selector-button-background [null] - The file input selector button background color.
+/// @param {Color} $file-selector-button-background--focused [null] - The selector button background color when the file input is focused.
+/// @param {Color} $file-selector-button-background--filled [null] - The selector button background color when the file input is filled.
+/// @param {Color} $file-selector-button-background--disabled [null] - The selector button background color when the file input is disabled.
+/// @param {Color} $file-selector-button-foreground [null] - The file input selector button foreground color.
+/// @param {Color} $file-selector-button-foreground--focused [null] - The selector button foreground color when the file input is focused.
+/// @param {Color} $file-selector-button-foreground--filled [null] - The selector button foreground color when the file input is filled.
+/// @param {Color} $file-selector-button-foreground--disabled [null] - The selector button foreground color when the file input is disabled.
+/// @example scss Change the focused border and label colors
+///   $my-file-input-theme: file-input-theme($file-names-foreground: #09f);
+///   // Pass the theme to the css-vars() mixin
+///   @include css-vars($my-file-input-theme);
+@function file-input-theme(
+    $schema: $light-material-schema,
+    $file-names-background: null,
+    $file-names-background--focused: null,
+    $file-names-background--filled: null,
+    $file-names-background--disabled: null,
+    $file-names-foreground: null,
+    $file-names-foreground--focused: null,
+    $file-names-foreground--filled: null,
+    $file-names-foreground--disabled: null,
+
+    $file-selector-button-background: null,
+    $file-selector-button-background--focused: null,
+    $file-selector-button-background--filled: null,
+    $file-selector-button-background--disabled: null,
+    $file-selector-button-foreground: null,
+    $file-selector-button-foreground--focused: null,
+    $file-selector-button-foreground--filled: null,
+    $file-selector-button-foreground--disabled: null,
+) {
+    $name: 'igx-file-input';
+
+    // the variable are scoped to the selector so no other input except the file type will have them.
+    $selector: '.igx-file-input';
+
+    $file-input-schema: ();
+    @if map.has-key($schema, 'file-input') {
+        $file-input-schema: map.get($schema, 'file-input');
+    } @else {
+        $file-input-schema: $schema;
+    }
+
+    $theme: digest-schema($file-input-schema);
+
+    @return extend(
+        $theme,
+        (
+            name: $name,
+            selector: $selector,
+            file-names-background: $file-names-background,
+            file-names-background--focused: $file-names-background--focused,
+            file-names-background--filled: $file-names-background--filled,
+            file-names-background--disabled: $file-names-background--disabled,
+            file-names-foreground: $file-names-foreground,
+            file-names-foreground--focused: $file-names-foreground--focused,
+            file-names-foreground--filled: $file-names-foreground--filled,
+            file-names-foreground--disabled: $file-names-foreground--disabled,
+
+            file-selector-button-background: $file-selector-button-background,
+            file-selector-button-background--focused: $file-selector-button-background--focused,
+            file-selector-button-background--filled: $file-selector-button-background--filled,
+            file-selector-button-background--disabled: $file-selector-button-background--disabled,
+            file-selector-button-foreground: $file-selector-button-foreground,
+            file-selector-button-foreground--focused: $file-selector-button-foreground--focused,
+            file-selector-button-foreground--filled: $file-selector-button-foreground--filled,
+            file-selector-button-foreground--disabled: $file-selector-button-foreground--disabled,
+        ),
+    );
+}
+
+/// @deprecated Use the `css-vars` mixin instead.
+/// @see {mixin} css-vars
+/// @param {Map} $theme - The theme used to style the component.
+@mixin file-input($theme) {
+    @include css-vars($theme);
+    $variant: map.get($theme, '_meta', 'theme');
+
+    %file-names {
+        color: var-get($theme, 'file-names-foreground');
+        background-color: var-get($theme, 'file-names-background');
+    }
+
+    %file-names--filled {
+        color: var-get($theme, 'file-names-foreground--filled');
+        background-color: var-get($theme, 'file-names-background--filled');
+    }
+
+    %file-names--focused {
+        color: var-get($theme, 'file-names-foreground--focused');
+        background-color: var-get($theme, 'file-names-background--focused');
+    }
+
+    %file-names--disabled {
+        color: var-get($theme, 'file-names-foreground--disabled');
+        background-color: var-get($theme, 'file-names-background--disabled');
+    }
+
+    %upload-buton {
+        // That button can't have :focus, :active, :hover states, that's why we dont need to override them here.
+        --foreground: #{var-get($theme, 'file-selector-button-foreground')};
+        --background: #{var-get($theme, 'file-selector-button-background')};
+
+        // we override the rest of the variables in order to prevent any change if the user creates a flat button theme.
+        --resting-elevation: none;
+        --hover-elevation: none;
+        --focus-elevation: none;
+        --active-elevation: none;
+        --shadow-color: none;
+        --border-color: transparent;
+        --hover-border-color: transparent;
+        --focus-border-color: transparent;
+        --focus-visible-border-color: transparent;
+        --active-border-color: transparent;
+        --disabled-border-color: transparent;
+    }
+
+    %upload-buton--filled {
+        --foreground: #{var-get($theme, 'file-selector-button-foreground--filled')};
+        --background: #{var-get($theme, 'file-selector-button-background--filled')};
+    }
+
+    %upload-buton--focused {
+        --foreground: #{var-get($theme, 'file-selector-button-foreground--focused')};
+        --background: #{var-get($theme, 'file-selector-button-background--focused')};
+    }
+
+    %upload-buton--disabled {
+        --disabled-foreground: #{var-get($theme, 'file-selector-button-foreground--disabled')};
+        --disabled-background: #{var-get($theme, 'file-selector-button-background--disabled')};
+    }
+
+    %clear-icon {
+        &:focus {
+            @if $variant == 'indigo' or $variant == 'fluent' {
+                background-color: color($color: 'primary', $variant: 500);
+                color: contrast-color($color: 'primary', $variant: 600);
+            }
+
+            @if $variant == 'material' {
+                background-color: transparent;
+                color: color($color: 'secondary', $variant: 500);
+            }
+
+            @if $variant == 'bootstrap' {
+                color: contrast-color($color: 'primary', $variant: 600);
+            }
+        }
+    }
+}
+
+/// Adds typography styles for the .igx-file-input.
+/// Uses the 'subtitle-1', 'caption'
+/// category from the typographic scale.
+/// @group typography
+/// @param {Map} $categories [(file-text: 'subtitle-1')] - The categories from the typographic scale used for type styles.
+@mixin file-input-typography(
+    $categories: (
+        file-text: 'subtitle-1'
+    )
+) {
+    $file-text: map.get($categories, 'file-text');
+
+    %file-names {
+        @include type-style($file-text) {
+            margin: 0;
+        }
+    }
+}
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 3c500439c12..38ea11d2868 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
@@ -1043,27 +1043,6 @@
     }
 
     %form-group-display--file {
-        .igx-button--flat {
-            --background: transparent;
-            --hover-background: transparent;
-            --focus-background: transparent;
-            --focus-visible-background: transparent;
-            --focus-hover-background: transparent;
-            --active-background: transparent;
-            --disabled-background: transparent;
-            --resting-elevation: none;
-            --hover-elevation: none;
-            --focus-elevation: none;
-            --active-elevation: none;
-            --shadow-color: none;
-            --border-color: transparent;
-            --hover-border-color: transparent;
-            --focus-border-color: transparent;
-            --focus-visible-border-color: transparent;
-            --active-border-color: transparent;
-            --disabled-border-color: transparent
-        }
-
         %form-group-bundle {
             grid-template-columns: auto auto auto 1fr auto;
         }
@@ -1111,7 +1090,6 @@
             border: none;
             inset: 0;
             width: 100%;
-            height: 100%;
             appearance: none;
             opacity: 0;
             z-index: 2;
@@ -1827,11 +1805,12 @@
         overflow: hidden;
         padding-block-start: $input-top-padding;
         padding-block-end: $input-bottom-padding;
-        height: calc(var-get($theme, 'size') - 2px);
+        height: var-get($theme, 'size');
         color: var-get($theme, 'filled-text-color');
 
         span {
             @include ellipsis();
+
             position: relative;
             display: inline-block;
             width: inherit;
@@ -1846,22 +1825,6 @@
         }
     }
 
-    %form-group-clear-icon {
-        &:focus {
-            background-color: color($color: 'primary', $variant: 500);
-            color: contrast-color($color: 'primary', $variant: 600);
-
-            @if $variant == 'material' {
-                background-color: transparent;
-                color: color($color: 'secondary', $variant: 500);
-            }
-
-            @if $variant == 'bootstrap' {
-                color: contrast-color($color: 'primary', $variant: 600);
-            }
-        }
-    }
-
     // This is a hack that removes the autofill background and it's essential,
     // otherwise the background is on top of the floating label in material theme.
     // The !important flag is because bootstrap theme(and potentially feature themes) is overriding the transition delay.
@@ -1879,12 +1842,6 @@
         }
     }
 
-    %edge-clear-icon-fix {
-        &::-ms-clear {
-            display: none;
-        }
-    }
-
     %form-group-file-input-indigo {
         padding-block: 0;
     }
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 7f13940af1f..d2ad9978939 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss
@@ -80,6 +80,7 @@
 @use '../components/time-picker/time-picker-component' as time-picker;
 @use '../components/tree/tree-component' as tree;
 @use '../components/watermark/watermark-component' as watermark;
+@use '../components/input/file-input-component' as file-input;
 @use '../print';
 
 /// @param {boolean} $print-layout [true] - Activates the printing styles of the components.
@@ -196,6 +197,7 @@
     @include time-picker.component();
     @include tree.component();
     @include watermark.component();
+    @include file-input.component();
 
     // Build the component dependency-tree
     @include base.dependecy-tree(base.$components);
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
index 072eeaf10e8..90ea11f5523 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
@@ -572,6 +572,17 @@
         @include input-group($input-group-theme-map);
     }
 
+    @if is-used('igx-file-input', $exclude) {
+        $file-input-theme-map: file-input-theme(
+            $schema: $schema,
+        );
+        $file-input-theme-map: meta.call(
+            $theme-handler,
+            $file-input-theme-map
+        );
+        @include file-input($file-input-theme-map);
+    }
+
     @if is-used('igx-list', $exclude) {
         $list-theme-map: list-theme(
             $schema: $schema,
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 97c8a89c9a4..2bb1b767151 100644
--- a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss
@@ -33,6 +33,7 @@
 @use '../components/tree/tree-theme' as *;
 @use '../components/label/label-theme' as *;
 @use '../components/query-builder/query-builder-theme' as *;
+@use '../components/input/file-input-theme' as *;
 
 @mixin typography($type-scale) {
     @include badge-typography();
@@ -80,6 +81,9 @@
         helper-text: 'body-2',
         input-text: 'body-1'
     ));
+    @include file-input-typography($categories: (
+        file-text: 'body-1'
+    ));
     @include linear-bar-typography();
     @include list-typography($categories: (
         item: 'body-2',
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 03987eca9c2..2b8a6323070 100644
--- a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss
@@ -32,6 +32,7 @@
 @use '../components/tree/tree-theme' as *;
 @use '../components/label/label-theme' as *;
 @use '../components/query-builder/query-builder-theme' as *;
+@use '../components/input/file-input-theme' as *;
 
 @mixin typography() {
     @include badge-typography();
@@ -83,6 +84,9 @@
         helper-text: 'caption',
         input-text: 'body-2'
     ));
+    @include file-input-typography($categories: (
+        file-text: 'body-2'
+    ));
     @include linear-bar-typography();
     @include list-typography($categories: (
         header: 'overline',
@@ -100,6 +104,7 @@
     @include radio-typography($categories: (
         label: 'body-2'
     ));
+
     @include slider-typography();
     @include snackbar-typography($categories: (
         text: 'caption'
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 ee8596057e2..737346995c4 100644
--- a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss
@@ -32,6 +32,7 @@
 @use '../components/tree/tree-theme' as *;
 @use '../components/label/label-theme' as *;
 @use '../components/query-builder/query-builder-theme' as *;
+@use '../components/input/file-input-theme' as *;
 
 @mixin typography($type-scale) {
     @include badge-typography($categories: (
@@ -78,6 +79,11 @@
         helper-text: 'caption',
         input-text: 'body-2'
     ));
+
+    @include file-input-typography($categories: (
+        file-text: 'body-2'
+    ));
+
     @include linear-bar-typography();
     @include list-typography($categories: (
         header: 'overline',
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 8920a178e02..bc15191255c 100644
--- a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss
@@ -32,6 +32,7 @@
 @use '../components/tree/tree-theme' as *;
 @use '../components/label/label-theme' as *;
 @use '../components/query-builder/query-builder-theme' as *;
+@use '../components/input/file-input-theme' as *;
 
 @mixin typography() {
     @include badge-typography();
@@ -68,4 +69,5 @@
     @include tree-typography();
     @include label-typography();
 	@include query-builder-typography();
+	@include file-input-typography();
 }
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker-inputs.common.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker-inputs.common.ts
index 8cccd6a2275..ea426fde4b9 100644
--- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker-inputs.common.ts
+++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker-inputs.common.ts
@@ -126,7 +126,7 @@ export class IgxDateRangeInputsBaseComponent extends IgxInputGroupComponent {
         { provide: IgxInputGroupBase, useExisting: IgxDateRangeStartComponent },
         { provide: IgxDateRangeInputsBaseComponent, useExisting: IgxDateRangeStartComponent }
     ],
-    imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, NgClass, IgxSuffixDirective, IgxIconComponent]
+    imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, IgxSuffixDirective, IgxIconComponent]
 })
 export class IgxDateRangeStartComponent extends IgxDateRangeInputsBaseComponent { }
 
@@ -161,7 +161,7 @@ export class IgxDateRangeStartComponent extends IgxDateRangeInputsBaseComponent
         { provide: IgxInputGroupBase, useExisting: IgxDateRangeEndComponent },
         { provide: IgxDateRangeInputsBaseComponent, useExisting: IgxDateRangeEndComponent }
     ],
-    imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, NgClass, IgxSuffixDirective, IgxIconComponent]
+    imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, IgxSuffixDirective, IgxIconComponent]
 })
 export class IgxDateRangeEndComponent extends IgxDateRangeInputsBaseComponent { }
 
diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.html b/projects/igniteui-angular/src/lib/input-group/input-group.component.html
index ca1e3659b61..6e7c991cacf 100644
--- a/projects/igniteui-angular/src/lib/input-group/input-group.component.html
+++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.html
@@ -33,7 +33,7 @@
                 type="button"
                 tabindex="-1"
                 [disabled]="disabled"
-                [ngClass]="{ 'igx-input-group__upload-button': isTypeLine }"
+                class="igx-file-input__upload-button"
             >
                 {{ resourceStrings.igx_input_upload_button }}
             </button>
@@ -44,7 +44,7 @@
 <ng-template #files>
     @if (isFileType) {
         <div
-            class="igx-input-group__file-input"
+            class="igx-input-group__file-input igx-file-input__file-names"
             [title]="fileNames"
         >
             <span>{{ fileNames }}</span>
@@ -55,7 +55,7 @@
 <ng-template #clear>
     @if (isFileType && isFilled) {
         <igx-suffix
-            class="igx-input-group__clear-icon"
+            class="igx-input-group__clear-icon igx-file-input__clear-icon"
             (click)="clearValueHandler()"
             (keydown.Enter)="clearValueHandler()"
             title="clear files"
diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
index 4c31c5e1aa4..e87495e51f7 100644
--- a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
+++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
@@ -10,7 +10,7 @@ import {
     HostListener, Inject, Input,
     Optional, QueryList, booleanAttribute,
     inject,
-    DOCUMENT
+    DOCUMENT, AfterContentChecked
 } from '@angular/core';
 import { IInputResourceStrings, InputResourceStringsEN } from '../core/i18n/input-resources';
 import { PlatformUtil, getComponentTheme } from '../core/utils';
@@ -33,9 +33,9 @@ import { IgxTheme, THEME_TOKEN, ThemeToken } from '../services/theme/theme.token
     selector: 'igx-input-group',
     templateUrl: 'input-group.component.html',
     providers: [{ provide: IgxInputGroupBase, useExisting: IgxInputGroupComponent }],
-    imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, NgClass, IgxSuffixDirective, IgxIconComponent]
+    imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, IgxSuffixDirective, IgxIconComponent]
 })
-export class IgxInputGroupComponent implements IgxInputGroupBase {
+export class IgxInputGroupComponent implements IgxInputGroupBase, AfterContentChecked {
     /**
      * Sets the resource strings.
      * By default it uses EN resources.
@@ -346,6 +346,30 @@ export class IgxInputGroupComponent implements IgxInputGroupBase {
         return this.input.type === 'file';
     }
 
+    /** @hidden @internal */
+    @HostBinding('class.igx-file-input')
+    public get isFileInput() {
+        return this.input.type === 'file';
+    }
+
+    /** @hidden @internal */
+    @HostBinding('class.igx-file-input--filled')
+    public get isFileInputFilled() {
+        return this.isFileType && this.isFilled;
+    }
+
+    /** @hidden @internal */
+    @HostBinding('class.igx-file-input--focused')
+    public get isFileInputFocused() {
+        return this.isFileType && this.isFocused;
+    }
+
+    /** @hidden @internal */
+    @HostBinding('class.igx-file-input--disabled')
+    public get isFileInputDisabled() {
+        return this.isFileType && this.disabled;
+    }
+
     /** @hidden @internal */
     public get fileNames() {
         return this.input.fileNames || this._resourceStrings.igx_input_file_placeholder;

From 9f6fa8d2aea780363f7e6714fcb758458afba302 Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Thu, 3 Jul 2025 14:16:38 +0300
Subject: [PATCH 04/15] chore(igniteui-theming): bump to v19.1.1

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b543adb97dd..48da518082c 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": "^18.0.1",
+        "igniteui-theming": "^19.1.1",
         "igniteui-trial-watermark": "^3.1.0",
         "lodash-es": "^4.17.21",
         "rxjs": "^7.8.2",
@@ -10989,9 +10989,9 @@
       }
     },
     "node_modules/igniteui-theming": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-18.1.0.tgz",
-      "integrity": "sha512-E+ZItTFI5acEAWAdWz9pPCzyHCFSPSazgyVqmN5XnAtLuH/3qaOV5ho2CTLrHpWBSmj2cTciB8THImBp2Jj73Q==",
+      "version": "19.1.1",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-19.1.1.tgz",
+      "integrity": "sha512-dGBzcuuBD60n1wI3VDC6ggmouT0JpFJNmleY9+6X2LUR8xoaD5qvToOHLXMGUHeu/ToHoWaJFGM1obUuGU+/sg==",
       "license": "MIT",
       "peerDependencies": {
         "sass": "^1.69.5"
diff --git a/package.json b/package.json
index c5829e62c46..d3d357c5e4e 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
     "@types/source-map": "0.5.2",
     "express": "^5.1.0",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^18.0.1",
+    "igniteui-theming": "^19.1.1",
     "igniteui-trial-watermark": "^3.1.0",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.2",

From 47c1fd5962dace3ffd0653f22f37bcdd5e33b04d Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Thu, 3 Jul 2025 14:25:40 +0300
Subject: [PATCH 05/15] fix(input-group): add overflow hidden to the upload
 button

---
 .../src/lib/core/styles/components/input/_input-group-theme.scss | 1 +
 1 file changed, 1 insertion(+)

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 38ea11d2868..5bc28cb426d 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
@@ -1108,6 +1108,7 @@
         pointer-events: none;
         height: var-get($theme, 'size');
         cursor: pointer;
+        overflow: hidden;
     }
 
     %form-group-display--bootstrap-file {

From 0501c236cc384ed4bce2da49dc2671af0fed1b4b Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Thu, 3 Jul 2025 14:28:33 +0300
Subject: [PATCH 06/15] fix(input-group): fix bootstrap clear icon colors

---
 .../src/lib/core/styles/components/input/_file-input-theme.scss  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-theme.scss
index 06d9470759d..beee2a07a65 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-theme.scss
@@ -165,6 +165,7 @@
 
             @if $variant == 'bootstrap' {
                 color: contrast-color($color: 'primary', $variant: 600);
+                background-color: color($color: 'primary', $variant: 500);
             }
         }
     }

From f7ebe94bdadfbe858ef53d666989a9f7d6475070 Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Thu, 3 Jul 2025 15:31:04 +0300
Subject: [PATCH 07/15] fix(input-group): fluent file jumping, and bootstrap
 clear icons border

---
 .../input/_input-group-component.scss         | 108 +++++++-----------
 .../components/input/_input-group-theme.scss  |  41 +++++++
 2 files changed, 83 insertions(+), 66 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 54b2ebdcb2d..ad68f067382 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
@@ -637,6 +637,20 @@
             }
         }
 
+        @include mx(fluent, file) {
+            @include e(bundle) {
+                @extend %form-group-bundle-file--fluent !optional;
+            }
+
+            @include e(bundle-start) {
+                @extend %form-group-bundle-start-file--fluent !optional;
+            }
+
+            @include e(bundle-end) {
+                @extend %form-group-bundle-end-file--fluent !optional;
+            }
+        }
+
         @include mx(fluent, placeholder) {
             @extend %form-group-placeholder !optional;
 
@@ -948,15 +962,15 @@
             @extend %bootstrap-file-focused !optional;
         }
 
-        @include mx(bootstrap, file, valid) {
+        @include mx(bootstrap, file, valid, focused) {
             @extend %bootstrap-file-valid !optional;
         }
 
-        @include mx(bootstrap, file, warning) {
+        @include mx(bootstrap, file, warning, focused) {
             @extend %bootstrap-file-warning !optional;
         }
 
-        @include mx(bootstrap, file, invalid) {
+        @include mx(bootstrap, file, invalid, focused) {
             @extend %bootstrap-file-invalid !optional;
         }
 
@@ -980,6 +994,22 @@
             @extend %form-group-display--bootstrap-suffixed !optional;
         }
 
+        @include mx(bootstrap, suffixed, focused) {
+            @extend %form-group-display--bootstrap-suffixed-focused !optional;
+        }
+
+        @include mx(bootstrap, suffixed, valid) {
+            @extend %form-group-display--bootstrap-suffixed-valid !optional;
+        }
+
+        @include mx(bootstrap, suffixed, warning) {
+            @extend %form-group-display--bootstrap-suffixed-warning !optional;
+        }
+
+        @include mx(bootstrap, suffixed, invalid) {
+            @extend %form-group-display--bootstrap-suffixed-invalid !optional;
+        }
+
         @include mx(bootstrap, search) {
             @include e(input) {
                 @extend %bootstrap-input--search !optional;
@@ -1040,32 +1070,6 @@
             }
         }
 
-        @include mx(bootstrap, warning) {
-            @include e(input) {
-                @extend %bootstrap-input--warning !optional;
-
-                &:hover {
-                    @extend %bootstrap-input--warning !optional;
-                }
-            }
-
-            @include e(file-input) {
-                @extend %bootstrap-input--warning !optional;
-
-                &:hover {
-                    @extend %bootstrap-input--warning !optional;
-                }
-            }
-
-            @include e(textarea) {
-                @extend %bootstrap-input--warning !optional;
-
-                &:hover {
-                    @extend %bootstrap-input--warning !optional;
-                }
-            }
-        }
-
         @include mx(bootstrap, invalid) {
             @include e(input) {
                 @extend %bootstrap-input--error !optional;
@@ -1097,34 +1101,34 @@
         }
 
         @include mx(bootstrap, warning) {
-          @include e(input) {
+            @include e(input) {
               @extend %bootstrap-input--warning !optional;
 
               &:hover {
                   @extend %bootstrap-input--warning !optional;
               }
-          }
+            }
 
-          @include e(file-input) {
+            @include e(file-input) {
               @extend %bootstrap-input--warning !optional;
 
               &:hover {
                   @extend %bootstrap-input--warning !optional;
               }
-          }
+            }
 
-          @include e(label) {
+            @include e(label) {
               @extend %bootstrap-label !optional;
-          }
+            }
 
-          @include e(textarea) {
+            @include e(textarea) {
               @extend %bootstrap-input--warning !optional;
 
               &:hover {
                   @extend %bootstrap-input--warning !optional;
               }
-          }
-      }
+            }
+        }
 
         @include mx(bootstrap, textarea-group) {
             @include e(bundle) {
@@ -1149,34 +1153,6 @@
                 @extend %bootstrap-input--disabled !optional;
             }
         }
-
-        @include mx(bootstrap, disabled, prefixed) {
-            @include e(input) {
-                @extend %bootstrap-input--disabled--prefixed !optional;
-            }
-
-            @include e(file-input) {
-                @extend %bootstrap-input--disabled--prefixed !optional;
-            }
-
-            @include e(textarea) {
-                @extend %bootstrap-input--disabled--prefixed !optional;
-            }
-        }
-
-        @include mx(bootstrap, disabled, suffixed) {
-            @include e(input) {
-                @extend %bootstrap-input--disabled--suffixed !optional;
-            }
-
-            @include e(file-input) {
-                @extend %bootstrap-input--disabled--suffixed !optional;
-            }
-
-            @include e(textarea) {
-                @extend %bootstrap-input--disabled--suffixed !optional;
-            }
-        }
         // BOOTSTRAP 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 5bc28cb426d..63acaf1d2d9 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
@@ -1807,6 +1807,7 @@
         padding-block-start: $input-top-padding;
         padding-block-end: $input-bottom-padding;
         height: var-get($theme, 'size');
+        max-height: 100%;
         color: var-get($theme, 'filled-text-color');
 
         span {
@@ -1826,6 +1827,13 @@
         }
     }
 
+    @if $variant == 'fluent' {
+        %form-group-file-input,
+        %upload-button {
+            max-height: calc(var-get($theme, 'size') - #{rem(2px)});
+        }
+    }
+
     // This is a hack that removes the autofill background and it's essential,
     // otherwise the background is on top of the floating label in material theme.
     // The !important flag is because bootstrap theme(and potentially feature themes) is overriding the transition delay.
@@ -2550,6 +2558,39 @@
                 };
             }
         }
+
+        .igx-input-group__clear-icon + igx-suffix,
+        .igx-input-group__clear-icon + [igxPrefix] {
+            border-inline-start: rem(1px) solid var-get($theme, 'border-color');
+        }
+    }
+
+    %form-group-display--bootstrap-suffixed-focused {
+        .igx-input-group__clear-icon + igx-suffix,
+        .igx-input-group__clear-icon + [igxPrefix] {
+            border-color: var-get($theme, 'focused-border-color');
+        }
+    }
+
+    %form-group-display--bootstrap-suffixed-valid {
+        .igx-input-group__clear-icon + igx-suffix,
+        .igx-input-group__clear-icon + [igxPrefix] {
+            border-color: var-get($theme, 'success-secondary-color');
+        }
+    }
+
+    %form-group-display--bootstrap-suffixed-form-group-display--bootstrap-suffixed-warning {
+        .igx-input-group__clear-icon + igx-suffix,
+        .igx-input-group__clear-icon + [igxPrefix] {
+            border-color: var-get($theme, 'warning-secondary-color');
+        }
+    }
+
+    %form-group-display--bootstrap-suffixed-invalid {
+        .igx-input-group__clear-icon + igx-suffix,
+        .igx-input-group__clear-icon + [igxPrefix] {
+            border-color: var-get($theme, 'error-secondary-color');
+        }
     }
 
     %form-group-display--disabled-bootstrap {

From 628d274ad82ce2ee9add3143f319c02bb852625f Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Thu, 3 Jul 2025 16:17:45 +0300
Subject: [PATCH 08/15] fix(input-group): update how bootstrap file handle the
 upload button

---
 .../input/_file-input-component.scss          | 42 ++++++++--------
 .../components/input/_file-input-theme.scss   | 48 +++++++++++--------
 .../input/_input-group-component.scss         | 10 +++-
 .../components/input/_input-group-theme.scss  | 26 ++++++----
 .../input-group/input-group.component.html    |  2 +-
 5 files changed, 76 insertions(+), 52 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-component.scss
index b156b1df479..aebb911f782 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-component.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-component.scss
@@ -11,14 +11,16 @@
             $deps: (igx-input-group)
         );
 
-        @extend %file-display !optional;
-
         @include e(file-names) {
             @extend %file-names !optional;
         }
 
+        @include e(upload-button-wrapper) {
+            @extend %upload-button-wrapper !optional;
+        }
+
         @include e(upload-button) {
-            @extend %upload-buton !optional;
+            @extend %upload-button !optional;
         }
 
         @include e(clear-icon) {
@@ -30,12 +32,12 @@
                 @extend %file-names--filled !optional;
             }
 
-            @include e(upload-button) {
-                @extend %upload-buton--filled !optional;
+            @include e(upload-button-wrapper) {
+                @extend %upload-button-wrapper--filled !optional;
             }
 
-            @include e(clear-icon) {
-                @extend %clear-icon--filled !optional;
+            @include e(upload-button) {
+                @extend %upload-button--filled !optional;
             }
         }
 
@@ -44,28 +46,26 @@
                 @extend %file-names--focused !optional;
             }
 
-            @include e(upload-button) {
-                @extend %upload-buton--focused !optional;
+            @include e(upload-button-wrapper) {
+                @extend %upload-button-wrapper--focused !optional;
             }
 
-            @include e(clear-icon) {
-                @extend %clear-icon--focused !optional;
+            @include e(upload-button) {
+                @extend %upload-button--focused !optional;
             }
         }
 
         @include m(disabled) {
-            @include m(focused) {
-                @include e(file-names) {
-                    @extend %file-names--disabled !optional;
-                }
+            @include e(file-names) {
+                @extend %file-names--disabled !optional;
+            }
 
-                @include e(upload-buton) {
-                    @extend %upload-buton--disabled !optional;
-                }
+            @include e(upload-button-wrapper) {
+                @extend %upload-button-wrapper--disabled !optional;
+            }
 
-                @include e(clear-icon) {
-                    @extend %clear-icon--disabled !optional;
-                }
+            @include e(upload-button) {
+                @extend %upload-button--disabled !optional;
             }
         }
     }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-theme.scss
index beee2a07a65..016643841eb 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-theme.scss
@@ -117,38 +117,48 @@
         background-color: var-get($theme, 'file-names-background--disabled');
     }
 
-    %upload-buton {
+    %upload-button-wrapper {
+        background: #{var-get($theme, 'file-selector-button-background')}
+    }
+
+    %upload-button {
         // That button can't have :focus, :active, :hover states, that's why we dont need to override them here.
         --foreground: #{var-get($theme, 'file-selector-button-foreground')};
-        --background: #{var-get($theme, 'file-selector-button-background')};
-
-        // we override the rest of the variables in order to prevent any change if the user creates a flat button theme.
+        --background: transparent;
         --resting-elevation: none;
-        --hover-elevation: none;
-        --focus-elevation: none;
-        --active-elevation: none;
         --shadow-color: none;
-        --border-color: transparent;
-        --hover-border-color: transparent;
-        --focus-border-color: transparent;
-        --focus-visible-border-color: transparent;
-        --active-border-color: transparent;
-        --disabled-border-color: transparent;
+        --border-radius: 0;
+    }
+
+
+    %upload-button-wrapper--filled {
+        color: #{var-get($theme, 'file-selector-button-foreground--filled')};
+        background: #{var-get($theme, 'file-selector-button-background--filled')};
     }
 
-    %upload-buton--filled {
+    %upload-button--filled {
         --foreground: #{var-get($theme, 'file-selector-button-foreground--filled')};
-        --background: #{var-get($theme, 'file-selector-button-background--filled')};
+        --background: transparent;
+    }
+
+    %upload-button-wrapper--focused {
+        color: #{var-get($theme, 'file-selector-button-foreground--focused')};
+        background: #{var-get($theme, 'file-selector-button-background--focused')};
     }
 
-    %upload-buton--focused {
+    %upload-button--focused {
         --foreground: #{var-get($theme, 'file-selector-button-foreground--focused')};
-        --background: #{var-get($theme, 'file-selector-button-background--focused')};
+        --background: transparent;
+    }
+
+    %upload-button-wrapper--disabled {
+        color: #{var-get($theme, 'file-selector-button-foreground--disabled')};
+        background: #{var-get($theme, 'file-selector-button-background--disabled')};
     }
 
-    %upload-buton--disabled {
+    %upload-button--disabled {
         --disabled-foreground: #{var-get($theme, 'file-selector-button-foreground--disabled')};
-        --disabled-background: #{var-get($theme, 'file-selector-button-background--disabled')};
+        --disabled-background: transparent;
     }
 
     %clear-icon {
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 ad68f067382..8c3c5f36ebc 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
@@ -344,7 +344,7 @@
             }
 
             @include e(file-input) {
-                @extend %form-group-input--disabled !optional;
+                @extend %form-group-file-input--disabled !optional;
             }
 
             @include e(hint) {
@@ -958,6 +958,12 @@
             }
         }
 
+        @include mx(bootstrap, file, disabled) {
+            @include e(upload-button) {
+                @extend %bootstrap-file-disabled-upload-button !optional;
+            }
+        }
+
         @include mx(bootstrap, file, focused) {
             @extend %bootstrap-file-focused !optional;
         }
@@ -1146,7 +1152,7 @@
             }
 
             @include e(file-input) {
-                @extend %bootstrap-input--disabled !optional;
+                @extend %bootstrap-file-input--disabled !optional;
             }
 
             @include e(textarea) {
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 63acaf1d2d9..c9bef71c8b0 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
@@ -1112,16 +1112,7 @@
     }
 
     %form-group-display--bootstrap-file {
-        .igx-button--flat {
-            --foreground: #{var-get($theme, 'input-prefix-color')};
-            --hover-foreground: #{var-get($theme, 'input-prefix-color')};
-            --active-foreground: #{var-get($theme, 'input-prefix-color')};
-            --focus-visible-foreground: #{var-get($theme, 'input-prefix-color')};
-            --disabled-foreground: var-get($theme, 'disabled-text-color');
-        }
-
         %upload-button {
-            background: var-get($theme, 'input-prefix-background');
             border: rem(1px) solid var-get($theme, 'border-color');
             border-inline-end-width: 0;
         }
@@ -1135,6 +1126,10 @@
         }
     }
 
+    %bootstrap-file-disabled-upload-button {
+        border-color: var-get($theme, 'disabled-border-color');
+    }
+
     %bootstrap-file-focused,
     %bootstrap-file-valid,
     %bootstrap-file-warning,
@@ -1883,6 +1878,14 @@
         }
     }
 
+    %form-group-file-input--disabled {
+        cursor: default;
+
+        &::placeholder {
+            color: var-get($theme, 'disabled-placeholder-color');
+        }
+    }
+
     %form-group-textarea {
         --textarea-size: #{sizable(
             rem(82px, map.get($base-scale-size, 'compact')),
@@ -2812,6 +2815,11 @@
         box-shadow: none;
     }
 
+    %bootstrap-file-input--disabled {
+        border: rem(1px) solid var-get($theme, 'disabled-border-color');
+        box-shadow: none;
+    }
+
     %bootstrap-input--search {
         transform: translateY(0);
     }
diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.html b/projects/igniteui-angular/src/lib/input-group/input-group.component.html
index 6e7c991cacf..488a6851f85 100644
--- a/projects/igniteui-angular/src/lib/input-group/input-group.component.html
+++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.html
@@ -27,7 +27,7 @@
 
 <ng-template #uploadButton>
     @if (isFileType) {
-        <div class="igx-input-group__upload-button">
+        <div class="igx-input-group__upload-button igx-file-input__upload-button-wrapper">
             <button
                 igxButton="flat"
                 type="button"

From f55c35482b92ab9972232b3b0f1b928660bbd1bb Mon Sep 17 00:00:00 2001
From: Marin Popov <desig9stein@users.noreply.github.com>
Date: Mon, 7 Jul 2025 11:08:01 +0300
Subject: [PATCH 09/15] Update
 projects/igniteui-angular/src/lib/input-group/input-group.component.ts

Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>
---
 .../src/lib/input-group/input-group.component.ts               | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
index e87495e51f7..4e2140a5345 100644
--- a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
+++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
@@ -10,7 +10,8 @@ import {
     HostListener, Inject, Input,
     Optional, QueryList, booleanAttribute,
     inject,
-    DOCUMENT, AfterContentChecked
+    DOCUMENT,
+    AfterContentChecked
 } from '@angular/core';
 import { IInputResourceStrings, InputResourceStringsEN } from '../core/i18n/input-resources';
 import { PlatformUtil, getComponentTheme } from '../core/utils';

From 16b970ed2737012537d396f6351a4318edea0f9d Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Mon, 7 Jul 2025 11:32:11 +0300
Subject: [PATCH 10/15] fix(input-group): update web-components to 6.1.1 and
 add file input in the sample, update the min size of the helper text

---
 package-lock.json                             |  10 +-
 package.json                                  |   2 +-
 .../components/input/_input-group-theme.scss  |  10 +-
 .../input-group-showcase.sample.html          | 177 ++++++++++--------
 .../input-group-showcase.sample.ts            |  29 ++-
 5 files changed, 141 insertions(+), 87 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 48da518082c..498740d8a18 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -71,7 +71,7 @@
         "ig-typedoc-theme": "^6.0.0",
         "igniteui-dockmanager": "^1.16.1",
         "igniteui-sassdoc-theme": "^1.2.3",
-        "igniteui-webcomponents": "6.0.1",
+        "igniteui-webcomponents": "6.1.1",
         "jasmine": "^5.6.0",
         "jasmine-core": "^5.6.0",
         "karma": "^6.4.4",
@@ -11007,13 +11007,13 @@
       }
     },
     "node_modules/igniteui-webcomponents": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-6.0.1.tgz",
-      "integrity": "sha512-Y2cHDzOU9svFXExlTQQrzLSVlpK+9g+uOPnmj16FWIJEvv7/hyjF4XKG3zey3GcVbeoF20OdL2zijRAbTt268Q==",
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-6.1.1.tgz",
+      "integrity": "sha512-U4eINzKGdSvdMf7+gP/srlbdqCtpXBphaljZKdKr2QsvlHMmXuRnIWfoQcMoPS5ar2+W1w+Cy92kl4Mt+GtiQQ==",
       "dev": true,
       "license": "SEE LICENSE IN LICENSE",
       "dependencies": {
-        "@floating-ui/dom": "^1.6.0",
+        "@floating-ui/dom": "^1.7.0",
         "@lit-labs/virtualizer": "^2.1.0",
         "@lit/context": "^1.1.0",
         "lit": "^3.3.0"
diff --git a/package.json b/package.json
index d3d357c5e4e..a8169585440 100644
--- a/package.json
+++ b/package.json
@@ -120,7 +120,7 @@
     "ig-typedoc-theme": "^6.0.0",
     "igniteui-dockmanager": "^1.16.1",
     "igniteui-sassdoc-theme": "^1.2.3",
-    "igniteui-webcomponents": "6.0.1",
+    "igniteui-webcomponents": "6.1.1",
     "jasmine": "^5.6.0",
     "jasmine-core": "^5.6.0",
     "karma": "^6.4.4",
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 c9bef71c8b0..f790849b693 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
@@ -602,6 +602,13 @@
         'indigo': 0,
     ), $variant);
 
+    $hint-min-size: map.get((
+        'material': rem(18px),
+        'fluent': rem(18px),
+        'bootstrap': rem(20px),
+        'indigo': rem(15px),
+    ), $variant);
+
     // Base Start
     %form-group-prefix--upload {
         padding: 0;
@@ -2077,7 +2084,8 @@
     %form-group-helper {
         color: var-get($theme, 'helper-text-color');
         position: relative;
-        display: flex;
+        display: grid;
+        grid-auto-rows: minmax($hint-min-size, auto);
         padding-block-start: $hint-spacing-block;
         padding-inline: $hint-spacing-inline;
 
diff --git a/src/app/input-group-showcase/input-group-showcase.sample.html b/src/app/input-group-showcase/input-group-showcase.sample.html
index ac90d84b97d..69264ed29cc 100644
--- a/src/app/input-group-showcase/input-group-showcase.sample.html
+++ b/src/app/input-group-showcase/input-group-showcase.sample.html
@@ -15,27 +15,32 @@ <h1 class="showcase__title">Angular</h1>
             #field
             [type]="getInputGroupType()"
             [style.--ig-size]="getSize()">
+
             @if (getLabel()) {
                 <label igxLabel>{{ getLabel() }}</label>
             }
 
-            @if (!hidePrefix()) {
+            @if (hidePrefix()) {
                 <igx-icon igxPrefix>face</igx-icon>
             }
 
             <input
-                formControlName="field"
-                [type]="getNativeInputType()"
-                [readOnly]="isReadonly()"
-                [attr.placeholder]="getPlaceholder()"
-                igxInput
+                    formControlName="field"
+                    [type]="getNativeInputType()"
+                    [attr.placeholder]="getPlaceholder()"
+                    [readOnly]="isReadonly()"
+                    igxInput
             />
-            @if (!hideSuffix()) {
+
+            @if (hideSuffix()) {
                 <igx-suffix>
                     <igx-icon>face</igx-icon>
                 </igx-suffix>
             }
-            <igx-hint>Type your web address</igx-hint>
+
+            @if (getHint()) {
+                <span igxHint>{{getHint()}}</span>
+            }
         </igx-input-group>
 
         <!-- Angular Textarea Group -->
@@ -47,23 +52,24 @@ <h1 class="showcase__title">Angular</h1>
                 <label igxLabel>{{ getLabel() }}</label>
             }
 
-            @if (!hidePrefix()) {
+            @if (hidePrefix()) {
                 <igx-icon igxPrefix>face</igx-icon>
             }
-
             <textarea
-                formControlName="fieldTextarea"
-                [required]="isRequired()"
-                [readOnly]="isReadonly()"
-                [attr.placeholder]="getPlaceholder()"
-                igxInput>
+                    formControlName="fieldTextarea"
+                    [attr.placeholder]="getPlaceholder()"
+                    [readOnly]="isReadonly()"
+                    igxInput>
             </textarea>
-            @if (!hideSuffix()) {
+
+            @if (hideSuffix()) {
                 <igx-suffix>
                     <igx-icon>face</igx-icon>
                 </igx-suffix>
             }
-            <igx-hint>Hint text</igx-hint>
+            @if (getHint()) {
+                <igx-hint>{{getHint()}}</igx-hint>
+            }
         </igx-input-group>
 
         <!-- Angular Select -->
@@ -77,17 +83,16 @@ <h1 class="showcase__title">Angular</h1>
                 <label igxLabel>{{ getLabel() }}</label>
             }
 
-            @if (!hidePrefix()) {
-                <igx-icon igxPrefix>favorite</igx-icon>
+            @if (hidePrefix()) {
+                <igx-icon igxPrefix>face</igx-icon>
+            }
+
+            @if (hideSuffix()) {
+                <igx-icon igxSuffix>face</igx-icon>
             }
 
-            <igx-hint>
-                I am a Hint
-            </igx-hint>
-            @if (!hideSuffix()) {
-                <igx-suffix>
-                    <igx-icon>favorite</igx-icon>
-                </igx-suffix>
+            @if (getHint()) {
+                <igx-hint>{{getHint()}}</igx-hint>
             }
             <igx-select-item [value]="'Apple'" [disabled]="true">Apple</igx-select-item>
             <igx-select-item [value]="'Orange'">Orange</igx-select-item>
@@ -102,20 +107,26 @@ <h1 class="showcase__title">Angular</h1>
             [placeholder]="getPlaceholder()"
             [type]="getInputGroupType()"
             [style.--ig-size]="getSize()">
+
             @if (getLabel()) {
                 <label igxLabel>{{ getLabel() }}</label>
             }
 
-            @if (!hidePrefix()) {
-                <igx-icon igxPrefix>favorite</igx-icon>
+            @if (hidePrefix()) {
+                <igx-prefix>
+                    <igx-icon>face</igx-icon>
+                </igx-prefix>
             }
 
-            @if (!hideSuffix()) {
+            @if (hideSuffix()) {
                 <igx-suffix>
                     <igx-icon>favorite</igx-icon>
                 </igx-suffix>
             }
-            <igx-hint>Select a unique falsy value</igx-hint>
+
+            @if (getHint()) {
+                <igx-hint>{{getHint()}}</igx-hint>
+            }
         </igx-combo>
 
         <!-- Angular File Input -->
@@ -123,27 +134,33 @@ <h1 class="showcase__title">Angular</h1>
             #fieldFile
             [type]="getInputGroupType()"
             [style.--ig-size]="getSize()">
+
             @if (getLabel()) {
-                <label igxLabel>Files to upload</label>
+                <label igxLabel for="file-in">{{ getLabel() }}</label>
             }
 
-            @if (!hidePrefix()) {
+            @if (hidePrefix()) {
                 <igx-icon igxPrefix>face</igx-icon>
             }
 
             <input
-                formControlName="fieldFile"
-                [required]="isRequired()"
-                [type]="'file'"
-                [readOnly]="isReadonly()"
-                igxInput
+                    id="file-in"
+                    formControlName="fieldFile"
+                    [required]="isRequired()"
+                    [type]="'file'"
+                    [readOnly]="isReadonly()"
+                    igxInput
             />
-            @if (!hideSuffix()) {
+
+            @if (hideSuffix()) {
                 <igx-suffix>
                     <igx-icon>face</igx-icon>
                 </igx-suffix>
             }
-            <igx-hint>Type your web address</igx-hint>
+
+            @if (getHint()) {
+                <igx-hint>{{getHint()}}</igx-hint>
+            }
         </igx-input-group>
     </form>
 </section>
@@ -182,21 +199,23 @@ <h1 class="showcase__title">Web components</h1>
                 [style.--ig-size]="getSize()"
                 [label]="getLabel()"
                 [required]="isRequired()"
+                [attr.placeholder]="getPlaceholder()"
                 [disabled]="isDisabled()"
                 [readOnly]="isReadonly()"
                 [attr.value]="getValue()"
-                [attr.placeholder]="getPlaceholder()"
                 [type]="getNativeInputType()"
                 [outlined]="isOutlined()">
 
-            @if (!hidePrefix()) {
-                <span slot="prefix"><igc-icon name="face"></igc-icon></span>
+            @if (hidePrefix()) {
+                <igc-icon slot="prefix" name="face"></igc-icon>
             }
 
-            @if (!hideSuffix()) {
-                <span slot="suffix"><igc-icon name="face"></igc-icon></span>
+            @if (hideSuffix()) {
+                <igc-icon slot="suffix" name="face"></igc-icon>
+            }
+            @if (getHint()) {
+                <span slot="helper-text">{{getHint()}}</span>
             }
-            <span slot="helper-text">Type your web address</span>
         </igc-input>
 
         <igc-textarea
@@ -206,35 +225,37 @@ <h1 class="showcase__title">Web components</h1>
                 [disabled]="isDisabled()"
                 [readOnly]="isReadonly()"
                 [attr.value]="getValue()"
-                [attr.placeholder]="getPlaceholder()"
+                [placeholder]="getPlaceholder()"
                 [outlined]="isOutlined()">
 
-            @if (!hidePrefix()) {
-                <span slot="prefix"><igc-icon name="face"></igc-icon></span>
+            @if (hidePrefix()) {
+                <igc-icon slot="prefix" name="face"></igc-icon>
+            }
+
+            @if (hideSuffix()) {
+                <igc-icon slot="suffix" name="face"></igc-icon>
             }
 
-            @if (!hideSuffix()) {
-                <span slot="suffix"><igc-icon name="face"></igc-icon></span>
+            @if (getHint()) {
+                <span slot="helper-text">{{getHint()}}</span>
             }
-            <span slot="helper-text">Hint text</span>
         </igc-textarea>
 
         <igc-select
-            [required]="isRequired()"
-            [attr.placeholder]="getPlaceholder()"
-            [label]="getLabel()"
-            [disabled]="isDisabled()"
-            [outlined]="isOutlined()"
-            [style.--ig-size]="getSize()">
+                [required]="isRequired()"
+                [attr.placeholder]="getPlaceholder()"
+                [label]="getLabel()"
+                [disabled]="isDisabled()"
+                [outlined]="isOutlined()"
+                [style.--ig-size]="getSize()">
 
-            @if (!hidePrefix()) {
-                <igc-icon slot="prefix" name="favorite"></igc-icon>
+            @if (hidePrefix()) {
+                <igc-icon slot="prefix" name="face"></igc-icon>
             }
 
-            @if (!hideSuffix()) {
-                <igc-icon slot="suffix" name="favorite"></igc-icon>
+            @if (getHint()) {
+                <span slot="helper-text">{{getHint()}}</span>
             }
-            <span slot="helper-text">I am a Hint</span>
             <igc-select-item [value]="'Apple'" [disabled]="true">Apple</igc-select-item>
             <igc-select-item [value]="'Orange'" [selected]="getValue()">Orange</igc-select-item>
             <igc-select-item [value]="'Grapes'">Grapes</igc-select-item>
@@ -248,21 +269,31 @@ <h1 class="showcase__title">Web components</h1>
                 [outlined]="isOutlined()"
                 [disabled]="isDisabled()"
                 [style.--ig-size]="getSize()">
-            <span slot="helper-text">I am a Hint</span>
-
-            @if (!hidePrefix()) {
-                <igc-icon slot="prefix" name="favorite"></igc-icon>
-            }
-
-            @if (!hideSuffix()) {
-                <igc-icon slot="suffix" name="favorite"></igc-icon>
+            @if (getHint()) {
+                <span slot="helper-text">{{getHint()}}</span>
             }
         </igc-combo>
 
 
-        <div class="showcase__placeholder">
-            NO file type in web components
-        </div>
+        <igc-file-input
+                [style.--ig-size]="getSize()"
+                [label]="getLabel()"
+                [required]="isRequired()"
+                [disabled]="isDisabled()"
+                [readOnly]="isReadonly()"
+                [attr.value]="getValue()"
+                [outlined]="isOutlined()">
+            @if (hidePrefix()) {
+                <igc-icon slot="prefix" name="face"></igc-icon>
+            }
+
+            @if (hideSuffix()) {
+                <igc-icon slot="suffix" name="face"></igc-icon>
+            }
+            @if (getHint()) {
+                <span slot="helper-text">{{getHint()}}</span>
+            }
+        </igc-file-input>
     </div>
 </section>
 
diff --git a/src/app/input-group-showcase/input-group-showcase.sample.ts b/src/app/input-group-showcase/input-group-showcase.sample.ts
index 314b188dc88..5dab7ef8366 100644
--- a/src/app/input-group-showcase/input-group-showcase.sample.ts
+++ b/src/app/input-group-showcase/input-group-showcase.sample.ts
@@ -1,5 +1,6 @@
 import {Component, CUSTOM_ELEMENTS_SCHEMA, inject, signal, computed, viewChild, DestroyRef} from '@angular/core';
 import {FormsModule, ReactiveFormsModule, UntypedFormBuilder, Validators} from '@angular/forms';
+
 import {
     defineComponents,
     IgcInputComponent,
@@ -8,6 +9,7 @@ import {
     IgcSelectComponent,
     IgcSelectItemComponent,
     IgcSelectHeaderComponent,
+    IgcFileInputComponent,
 } from 'igniteui-webcomponents';
 import {
     IGX_INPUT_GROUP_DIRECTIVES,
@@ -27,7 +29,8 @@ defineComponents(
     IgcSelectGroupComponent,
     IgcSelectComponent,
     IgcSelectItemComponent,
-    IgcSelectHeaderComponent
+    IgcSelectHeaderComponent,
+    IgcFileInputComponent
 );
 
 @Component({
@@ -64,11 +67,11 @@ export class InputGroupShowcaseSampleComponent {
             }
         },
         inputType: {
-            label: 'Input Group Type',
+            label: 'Input Group Type (Only Material theme has border/box and line types)',
             control: {
                 type: 'button-group',
                 options: ['box', 'border', 'line', 'search'],
-                defaultValue: ''
+                defaultValue: 'box'
             }
         },
         type: {
@@ -82,7 +85,13 @@ export class InputGroupShowcaseSampleComponent {
         label: {
             control: {
                 type: 'text',
-                defaultValue: 'Web address'
+                defaultValue: 'Label text'
+            }
+        },
+        hint: {
+            control: {
+                type: 'text',
+                defaultValue: 'Hint text'
             }
         },
         value: {
@@ -117,7 +126,7 @@ export class InputGroupShowcaseSampleComponent {
             }
         },
         hidePrefix: {
-            label: 'Hide Prefix',
+            label: 'Hide Prefix using (@if)',
             control: {
                 type: 'boolean',
                 defaultValue: false
@@ -217,6 +226,12 @@ export class InputGroupShowcaseSampleComponent {
     public getSize = computed(() => `var(--ig-size-${this.properties()?.size || 'medium'})`);
     public getPlaceholder = computed(() => this.properties()?.placeholder || null);
     public getLabel = computed(() => this.properties()?.label || '');
+
+    public getHint = computed(() => {
+        const hint = this.properties()?.hint || '';
+        return hint.trim() ? hint : null;
+    });
+
     public getNativeInputType = computed(() => this.properties()?.type || 'text');
     public getInputGroupType = computed(() => this.properties()?.inputType || '');
 
@@ -224,7 +239,7 @@ export class InputGroupShowcaseSampleComponent {
     public isRequired = computed(() => !!this.properties()?.required);
     public isDisabled = computed(() => !!this.properties()?.disabled);
     public isReadonly = computed(() => !!this.properties()?.readonly);
-    public hidePrefix = computed(() => !!this.properties()?.hidePrefix);
-    public hideSuffix = computed(() => !!this.properties()?.hideSuffix);
+    public hidePrefix = computed(() => !this.properties()?.hidePrefix);
+    public hideSuffix = computed(() => !this.properties()?.hideSuffix);
 }
 

From ded694ca34f88b64fa7300c9ffa48ea31ea4aa2c Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Mon, 7 Jul 2025 15:10:51 +0300
Subject: [PATCH 11/15] fix(input-group): fix bootstrap dabble border, and
 helper text min height in all themes

---
 .../components/input/_input-group-component.scss |  8 ++++----
 .../components/input/_input-group-theme.scss     | 16 ++++++++++------
 2 files changed, 14 insertions(+), 10 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 8c3c5f36ebc..ffe88dd6262 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
@@ -933,10 +933,6 @@
                 @extend %bootstrap-input !optional;
             }
 
-            @include e(upload-button) {
-                @extend %bootstrap-upload-button !optional;
-            }
-
             @include e(bundle-start) {
                 @extend %form-group-bundle-start--bootstrap !optional;
             }
@@ -956,6 +952,10 @@
             @include e(bundle-end) {
                 @extend %bootstrap-bundle-end !optional;
             }
+
+            @include e(upload-button) {
+                @extend %bootstrap-upload-button !optional;
+            }
         }
 
         @include mx(bootstrap, file, disabled) {
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 f790849b693..bd7114ac04f 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
@@ -1119,11 +1119,6 @@
     }
 
     %form-group-display--bootstrap-file {
-        %upload-button {
-            border: rem(1px) solid var-get($theme, 'border-color');
-            border-inline-end-width: 0;
-        }
-
         %form-group-bundle-start,
         %form-group-bundle-end {
             [igxPrefix],
@@ -1133,6 +1128,15 @@
         }
     }
 
+    %bootstrap-upload-button {
+        border: rem(1px) solid var-get($theme, 'border-color');
+        border-inline-end: 0;
+
+        igx-button {
+            border: 0;
+        }
+    }
+
     %bootstrap-file-disabled-upload-button {
         border-color: var-get($theme, 'disabled-border-color');
     }
@@ -2086,7 +2090,7 @@
         position: relative;
         display: grid;
         grid-auto-rows: minmax($hint-min-size, auto);
-        padding-block-start: $hint-spacing-block;
+        margin-block-start: $hint-spacing-block !important;
         padding-inline: $hint-spacing-inline;
 
         justify-content: space-between;

From 6b86c3a2941108cc6eb1c946802ac28c64b15c34 Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Mon, 7 Jul 2025 15:33:25 +0300
Subject: [PATCH 12/15] fix(input-group): fix fluent theme upload button jump

---
 .../input/_input-group-component.scss         | 41 +++++++++++--------
 .../components/input/_input-group-theme.scss  | 19 +++++----
 2 files changed, 34 insertions(+), 26 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 ffe88dd6262..bff0ecc5788 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
@@ -631,24 +631,6 @@
             @include e(label) {
                 @extend %fluent-label !optional;
             }
-
-            @include e(upload-button) {
-                @extend %fluent-upload-button !optional;
-            }
-        }
-
-        @include mx(fluent, file) {
-            @include e(bundle) {
-                @extend %form-group-bundle-file--fluent !optional;
-            }
-
-            @include e(bundle-start) {
-                @extend %form-group-bundle-start-file--fluent !optional;
-            }
-
-            @include e(bundle-end) {
-                @extend %form-group-bundle-end-file--fluent !optional;
-            }
         }
 
         @include mx(fluent, placeholder) {
@@ -704,11 +686,34 @@
         }
 
         @include mx(fluent, file) {
+            @include e(file-input) {
+                @extend %fluent-file-input !optional;
+            }
+
+            @include e(upload-button) {
+                @extend %fluent-upload-button !optional;
+            }
+
+            @include e(bundle-end) {
+                @extend %form-group-bundle-end-file--fluent !optional;
+            }
+
             @include e(label) {
                 @extend %fluent-label-filled !optional;
             }
         }
 
+        @include mx(fluent, file, focused) {
+            @include e(file-input) {
+                @extend %fluent-focused-file-input !optional;
+            }
+
+            @include e(upload-button) {
+                @extend %fluent-focused-upload-button !optional;
+            }
+
+        }
+
         @include mx(fluent, textarea-group) {
             @include e(bundle) {
                 @extend %form-group-bundle-fluent--textarea !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
index bd7114ac04f..b87575cb34e 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
@@ -1041,9 +1041,7 @@
 
     @if $variant == 'fluent' {
         %form-group-display--file-focused {
-            %form-group-input,
-            %form-group-file-input,
-            %upload-button {
+            %form-group-input {
                 margin-block-start: rem(-1px);
             }
         }
@@ -1833,13 +1831,18 @@
         }
     }
 
-    @if $variant == 'fluent' {
-        %form-group-file-input,
-        %upload-button {
-            max-height: calc(var-get($theme, 'size') - #{rem(2px)});
-        }
+
+    %fluent-file-input,
+    %fluent-upload-button {
+        max-height: calc(var-get($theme, 'size') - #{rem(2px)});
+    }
+
+    %fluent-focused-file-input,
+    %fluent-focused-upload-button {
+        max-height: calc(var-get($theme, 'size') - #{rem(4px)});
     }
 
+
     // This is a hack that removes the autofill background and it's essential,
     // otherwise the background is on top of the floating label in material theme.
     // The !important flag is because bootstrap theme(and potentially feature themes) is overriding the transition delay.

From 807a52124bdf0ac0a1b3be7a69c77cb1cca7e662 Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Mon, 7 Jul 2025 15:57:50 +0300
Subject: [PATCH 13/15] fix(input-group): make sure that material type border
 has not border on focus

---
 .../lib/core/styles/components/input/_input-group-theme.scss  | 4 ++++
 1 file changed, 4 insertions(+)

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 b87575cb34e..07f0cf65510 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
@@ -978,6 +978,10 @@
 
             %upload-button {
                 border-block: rem(1px) solid var-get($theme, 'border-color');
+
+                .igx-button {
+                    border: none;
+                }
             }
         }
 

From a8925ad06fe9b3fc16a858062f02d84983434650 Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Mon, 14 Jul 2025 10:41:28 +0300
Subject: [PATCH 14/15] fix(input-group): remove the inline border of the
 upload button

---
 .../src/lib/core/styles/components/input/_file-input-theme.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-theme.scss
index 016643841eb..e6de04e38e1 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-theme.scss
@@ -122,6 +122,8 @@
     }
 
     %upload-button {
+        border-inline: 0;
+
         // That button can't have :focus, :active, :hover states, that's why we dont need to override them here.
         --foreground: #{var-get($theme, 'file-selector-button-foreground')};
         --background: transparent;

From 43ae2f36ad197be50476c8f5f9ef399c2ceef14d Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Fri, 18 Jul 2025 09:53:39 +0300
Subject: [PATCH 15/15] fix(input-group): fix fluent border, fix input look in
 grid filtering and cleanup the code

---
 .../src/lib/core/i18n/input-resources.ts      |   2 +-
 .../styles/components/grid/_grid-theme.scss   |  65 ++++++---
 .../input/_input-group-component.scss         | 107 +-------------
 .../components/input/_input-group-theme.scss  | 137 ++++++------------
 4 files changed, 97 insertions(+), 214 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/i18n/input-resources.ts b/projects/igniteui-angular/src/lib/core/i18n/input-resources.ts
index e8c5d49c23a..5b8c244506e 100644
--- a/projects/igniteui-angular/src/lib/core/i18n/input-resources.ts
+++ b/projects/igniteui-angular/src/lib/core/i18n/input-resources.ts
@@ -4,6 +4,6 @@ export interface IInputResourceStrings {
 }
 
 export const InputResourceStringsEN: IInputResourceStrings = {
-    igx_input_upload_button: 'Upload File',
+    igx_input_upload_button: 'Browse',
     igx_input_file_placeholder: 'No file chosen',
 };
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
index aff507895e6..97f1073e8f6 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@@ -880,7 +880,10 @@
                 width: 100%;
                 max-width: rem(200px);
                 min-width: rem(140px);
-                border: rem(1px) solid color($color: 'gray', $variant: 300);
+
+                @if $variant != 'fluent' {
+                    border: rem(1px) solid color($color: 'gray', $variant: 300);
+                }
 
                 --size: calc(#{$filtering-row-height} - #{rem(8px)});
 
@@ -892,9 +895,8 @@
                     background: transparent;
                     border-radius: 0;
 
-                    &:hover,
-                    &:focus,
-                    &:focus-within {
+                    /* stylelint-disable-next-line */
+                    &:hover {
                         background: transparent;
                     }
                 }
@@ -918,9 +920,8 @@
                 .igx-input-group__input {
                     border: 0;
 
-                    &:hover,
-                    &:focus,
-                    &:focus-within {
+                    /* stylelint-disable-next-line */
+                    &:hover {
                         border: 0;
                         box-shadow: none;
                     }
@@ -930,31 +931,53 @@
                     display: none;
                 }
 
-                .igx-input-group__bundle:focus,
-                .igx-input-group__bundle:focus-within {
-                    .igx-input-group__bundle-main,
-                    .igx-input-group__bundle-start,
-                    .igx-input-group__bundle-end {
-                        margin: 0 !important;
-                    }
-
-                    border-width: rem(1px);
-                }
-
                 .igx-input-group__bundle-main {
                     padding-inline-start: 0;
                 }
 
                 color: var-get($theme, 'filtering-row-text-color');
 
-                &:hover,
-                &:focus,
-                &:focus-within {
+                &:hover{
                     color: var-get($theme, 'filtering-row-text-color');
                     border-color: color($color: 'primary', $variant: 500);
                 }
             }
 
+            .igx-input-group--focused {
+                @if $variant != 'fluent' {
+                    border-color: color($color: 'primary', $variant: 500);
+                    border-width: rem(1px);
+                }
+
+                color: var-get($theme, 'filtering-row-text-color');
+
+                .igx-input-group__bundle,
+                .igx-input-group__bundle-start,
+                .igx-input-group__bundle-end,
+                .igx-input-group__input {
+                    border: 0 !important;
+
+                    @if $variant != 'fluent' {
+                        box-shadow: none !important;
+                    }
+                }
+
+                .igx-input-group__bundle-main,
+                .igx-input-group__bundle-start,
+                .igx-input-group__bundle-end {
+                    margin: 0 !important;
+                }
+
+                .igx-input-group__bundle,
+                .igx-input-group__bundle-start,
+                .igx-input-group__bundle-end,
+                igx-prefix,
+                igx-suffix {
+                    background: transparent !important;
+                    border-radius: 0;
+                }
+            }
+
             .igx-input-group__line {
                 display: none;
             }
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 bff0ecc5788..00062ada101 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
@@ -52,7 +52,6 @@
         @include e(input) {
             @extend %form-group-input !optional;
             @extend %autofill-background-fix !optional;
-            @extend %edge-clear-icon-fix !optional;
 
             &:hover {
                 @extend %form-group-input--hover !optional;
@@ -75,10 +74,6 @@
             }
         }
 
-        @include e(clear-icon) {
-            @extend %form-group-clear-icon !optional;
-        }
-
         @include e(hint) {
             @extend %form-group-helper !optional;
         }
@@ -220,7 +215,6 @@
 
             @include e(label) {
                 @extend %form-group-label--float !optional;
-                @extend %form-group-label--fixed !optional;
             }
         }
 
@@ -331,7 +325,6 @@
             }
 
             @include e(label) {
-                @extend %form-group-label--fixed !optional;
                 @extend %form-group-label--disabled !optional;
             }
 
@@ -359,10 +352,6 @@
                 @extend %form-group-bundle--disabled !optional;
             }
 
-            @include e(label) {
-                @extend %form-group-label--fixed !optional;
-            }
-
             @include e(input) {
                 @extend %form-group-input--disabled !optional;
             }
@@ -394,21 +383,9 @@
                 @extend %form-group-input--box !optional;
             }
 
-            @include e(bundle-start) {
-                @extend %form-group-bundle-start--box !optional;
-            }
-
-            @include e(bundle-end) {
-                @extend %form-group-bundle-end--box !optional;
-            }
-
             @include e(bundle-main) {
                 @extend %form-group-bundle-main--box !optional;
             }
-
-            @include e(notch) {
-                @extend %form-group-notch--box !optional;
-            }
         }
 
         @include mx(box, focused) {
@@ -423,25 +400,10 @@
             }
         }
 
-        @include mx(box, textarea-group, filled) {
-            @include e(notch) {
-                @extend %form-group-notch--box-textarea !optional;
-            }
-        }
-
         @include mx(box, textarea-group, placeholder) {
             @extend %form-group-placeholder !optional;
-
-            @include e(notch) {
-                @extend %form-group-notch--box-textarea !optional;
-            }
         }
 
-        @include mx(box, textarea-group, focused) {
-            @include e(notch) {
-                @extend %form-group-notch--box-textarea !optional;
-            }
-        }
         // Type box END
 
         // Type border START
@@ -473,14 +435,6 @@
                 @extend %form-group-label--border !optional;
             }
 
-            @include e(bundle-start) {
-                @extend %form-group-bundle-start--border !optional;
-            }
-
-            @include e(bundle-end) {
-                @extend %form-group-bundle-end--border !optional;
-            }
-
             @include e(notch) {
                 @extend  %igx-input-group__notch--border !optional;
             }
@@ -605,11 +559,6 @@
                 &:hover {
                     @extend %form-group-bundle--fluent--hover !optional;
                 }
-
-                &:focus-within,
-                &:focus {
-                    @extend %form-group-bundle--fluent--focus !optional;
-                }
             }
 
             @include e(bundle-main) {
@@ -686,32 +635,13 @@
         }
 
         @include mx(fluent, file) {
-            @include e(file-input) {
-                @extend %fluent-file-input !optional;
-            }
-
-            @include e(upload-button) {
-                @extend %fluent-upload-button !optional;
-            }
-
-            @include e(bundle-end) {
-                @extend %form-group-bundle-end-file--fluent !optional;
-            }
-
             @include e(label) {
                 @extend %fluent-label-filled !optional;
             }
-        }
 
-        @include mx(fluent, file, focused) {
             @include e(file-input) {
-                @extend %fluent-focused-file-input !optional;
-            }
-
-            @include e(upload-button) {
-                @extend %fluent-focused-upload-button !optional;
+                @extend %fluent-file-input !optional;
             }
-
         }
 
         @include mx(fluent, textarea-group) {
@@ -721,16 +651,8 @@
         }
 
         @include mx(fluent, focused) {
-            @include e(bundle-start) {
-                @extend %form-group-bundle-start--fluent--focused !optional;
-            }
-
-            @include e(bundle-main) {
-                @extend %form-group-bundle-main--fluent--focused !optional;
-            }
-
-            @include e(bundle-end) {
-                @extend %form-group-bundle-end--fluent--focused !optional;
+            @include e(bundle) {
+                @extend %form-group-bundle--fluent--focus !optional;
             }
 
             @include e(label) {
@@ -738,12 +660,6 @@
             }
         }
 
-        @include mx(fluent, focused, textarea-group) {
-            @include e(hint) {
-                @extend %form-group-helper--textarea--fluent--focused !optional;
-            }
-        }
-
         @include mx(fluent, textarea-group) {
             @include e(bundle-start) {
                 @extend %form-group-bundle-textarea-start--fluent !optional;
@@ -757,11 +673,8 @@
         }
 
         @include mx(fluent, required) {
-            @include e(bundle) {
-                @extend %form-group-bundle-required--fluent !optional;
-            }
-
             @include e(label) {
+                @extend %form-group-bundle-required--fluent !optional;
                 @extend %form-group-label-required--fluent !optional;
             }
         }
@@ -857,10 +770,6 @@
                 @extend %form-group-bundle--indigo !optional;
             }
 
-            @include e(bundle-start) {
-                @extend %form-group-bundle--indigo-start !optional;
-            }
-
             @include e(input) {
                 @extend %form-group-input--indigo !optional;
             }
@@ -876,10 +785,6 @@
             @include e(textarea) {
                 @extend %indigo-textarea !optional;
             }
-
-            @include e(upload-button) {
-                @extend %indigo-upload-button !optional;
-            }
         }
 
         @include mx(indigo, focused) {
@@ -1013,10 +918,6 @@
             @extend %form-group-display--bootstrap-suffixed-valid !optional;
         }
 
-        @include mx(bootstrap, suffixed, warning) {
-            @extend %form-group-display--bootstrap-suffixed-warning !optional;
-        }
-
         @include mx(bootstrap, suffixed, invalid) {
             @extend %form-group-display--bootstrap-suffixed-invalid !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
index 07f0cf65510..ae993f8177d 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
@@ -1043,14 +1043,6 @@
         }
     }
 
-    @if $variant == 'fluent' {
-        %form-group-display--file-focused {
-            %form-group-input {
-                margin-block-start: rem(-1px);
-            }
-        }
-    }
-
     %form-group-display--file {
         %form-group-bundle {
             grid-template-columns: auto auto auto 1fr auto;
@@ -1835,18 +1827,6 @@
         }
     }
 
-
-    %fluent-file-input,
-    %fluent-upload-button {
-        max-height: calc(var-get($theme, 'size') - #{rem(2px)});
-    }
-
-    %fluent-focused-file-input,
-    %fluent-focused-upload-button {
-        max-height: calc(var-get($theme, 'size') - #{rem(4px)});
-    }
-
-
     // This is a hack that removes the autofill background and it's essential,
     // otherwise the background is on top of the floating label in material theme.
     // The !important flag is because bootstrap theme(and potentially feature themes) is overriding the transition delay.
@@ -2093,11 +2073,13 @@
     }
 
     %form-group-helper {
+        --ig-caption-margin-top: #{$hint-spacing-block};
+        --ig-caption-margin-bottom: 0;
+
         color: var-get($theme, 'helper-text-color');
         position: relative;
         display: grid;
         grid-auto-rows: minmax($hint-min-size, auto);
-        margin-block-start: $hint-spacing-block !important;
         padding-inline: $hint-spacing-inline;
 
         justify-content: space-between;
@@ -2111,11 +2093,7 @@
         }
 
         &:empty {
-            @if $variant == 'fluent' {
-                padding: 0;
-            } @else {
-                display: none;
-            }
+            display: none;
         }
     }
 
@@ -2332,72 +2310,74 @@
 
     %form-group-bundle--fluent {
         --min-width: #{sizable(rem(4px), rem(6px), rem(8px))};
+        --_fluent-input-border-size: #{rem(1px)};
 
         min-height: var-get($theme, 'size');
         padding: 0;
-        border: rem(1px) solid var-get($theme, 'border-color');
         background: var-get($theme, 'border-background');
         align-items: stretch;
-        overflow: hidden;
-
-        @if $variant == 'fluent' {
-            border-radius: var-get($theme, 'border-border-radius');
-        }
-
-        // Those focus styles are needed since when we focus the button inside
-        // the file type input the class .igx-input-group--focused is not added but the input is focused.
-        &:focus,
-        &:focus-within {
-            %form-group-bundle-start {
-                margin-block-start: rem(-1px);
-                margin-inline-start: rem(-1px);
-            }
-
-            %form-group-bundle-end {
-                margin-block-start: rem(-1px);
-                margin-inline-end: rem(-1px);
-            }
-
-            %form-group-bundle-start:empty + %form-group-bundle-main,
-            %form-group-bundle-end:empty + %form-group-bundle-main {
-                margin-inline-start: rem(-1px);
-            }
+        overflow: visible;
+        border-radius: var-get($theme, 'border-border-radius');
+        position: relative;
+        border: rem(1px) solid transparent;
 
-            %form-group-bundle-main {
-                margin-block-start: rem(-1px);
-            }
+        &::before {
+            content: '';
+            position: absolute;
+            width: calc(100% + var(--_fluent-input-border-size) * 2);
+            height: calc(100% + var(--_fluent-input-border-size) * 2);
+            pointer-events: none;
+            user-select: none;
+            inset: calc(var(--_fluent-input-border-size) * -1);
+            z-index: 1;
+            box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'border-color');
+            border-radius: inherit;
         }
     }
 
     %form-group-bundle--fluent--hover {
-        border-color: var-get($theme, 'hover-border-color');
+        &::before {
+            box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'hover-border-color');
+        }
     }
 
     %form-group-bundle--fluent--focus {
-        border-color: var-get($theme, 'focused-border-color');
-        border-width: rem(2px);
+        --_fluent-input-border-size: #{rem(2px)};
+
+        &::before {
+            box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'focused-border-color');
+        }
 
         &:hover {
-            border-color: var-get($theme, 'focused-border-color');
+            &::before {
+                box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'focused-border-color');
+            }
         }
     }
 
     %form-group-bundle-error--fluent,
     %form-group-bundle-error--fluent--hover,
     %form-group-bundle-error--fluent--focus {
-        border-color: var-get($theme, 'error-secondary-color');
+        &::before {
+            box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'error-secondary-color');
+        }
     }
 
     %form-group-bundle-success--fluent,
     %form-group-bundle-success--fluent--hover,
     %form-group-bundle-success--fluent--focus {
-        border-color: var-get($theme, 'success-secondary-color');
+        &::before {
+            box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'success-secondary-color');
+        }
     }
 
     %form-group-bundle--fluent--hover-disabled,
     %form-group-bundle--fluent-disabled {
-        border-color: var-get($theme, 'disabled-border-color');
         background: var-get($theme, 'border-disabled-background');
+
+        &::before {
+            box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'disabled-border-color');
+        }
     }
 
     %form-group-bundle-main--fluent {
@@ -2405,27 +2385,6 @@
         cursor: default;
     }
 
-    @if $fluent-theme {
-        %form-group-bundle-start--fluent--focused {
-            margin-block-start: rem(-1px);
-            margin-inline-start: rem(-1px);
-        }
-
-        %form-group-bundle-end--fluent--focused {
-            margin-block-start: rem(-1px);
-            margin-inline-end: rem(-1px);
-        }
-
-        %form-group-bundle-start--fluent--focused:empty + %form-group-bundle-main--fluent--focused,
-        %form-group-bundle-end--fluent--focused:empty + %form-group-bundle-main--fluent--focused {
-            margin-inline-start: rem(-1px);
-        }
-
-        %form-group-bundle-main--fluent--focused {
-            margin-block-start: rem(-1px);
-        }
-    }
-
     %form-group-bundle-textarea-start--fluent,
     %form-group-bundle-textarea-end--fluent {
         &:empty {
@@ -2442,6 +2401,10 @@
         border: none;
     }
 
+    %fluent-file-input {
+        padding-inline: 0;
+    }
+
     %indigo-textarea {
         padding-block: rem(6px);
         padding-inline: pad-inline(rem(2px), rem(4px), rem(6px));
@@ -2467,6 +2430,8 @@
         color: var-get($theme, 'idle-secondary-color');
 
         @if $variant == 'fluent' {
+            --ig-subtitle-2-line-height: rem(16px);
+
             margin-block-end: rem(5px);
         } @else {
             margin-block-end: rem(4px);
@@ -2503,10 +2468,6 @@
         transform: translateY(0) scale(1);
     }
 
-    %form-group-helper--textarea--fluent--focused {
-        margin-block-start: rem(-1px);
-    }
-
     %fluent-placeholder-label {
         transform: translateY(0) scale(1);
     }
@@ -2872,9 +2833,7 @@
     }
 
     %form-group-helper {
-        @include type-style($helper-text) {
-            margin: 0;
-        }
+        @include type-style($helper-text);
     }
 
     %form-group-prefix,