From 50863b12d0c13dc7fd20991bedaadb54f6d5bb79 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Thu, 13 Mar 2025 15:39:54 +0200
Subject: [PATCH 1/2] fix(input-group): empty prefix/suffix is padded

Closes #15412
---
 .../components/input/_input-group-theme.scss  | 29 +++++++++++--------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
index 1e7ae03f498..4e248b5cf49 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
@@ -380,14 +380,17 @@
         } @else {
             min-height: 100% !important;
         }
+
         transition: color $transition-timing, background $transition-timing;
 
-        @if $material-theme {
-            padding-inline: pad-inline(rem(12px), rem(14px), rem(16px));
-        } @else if $indigo-theme {
-            padding-inline: pad-inline(rem(2px), rem(4px), rem(6px));
-        } @else {
-            padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+        &:not(:empty) {
+            @if $material-theme {
+                padding-inline: pad-inline(rem(12px), rem(14px), rem(16px));
+            } @else if $indigo-theme {
+                padding-inline: pad-inline(rem(2px), rem(4px), rem(6px));
+            } @else {
+                padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+            }
         }
     }
 
@@ -816,16 +819,16 @@
             %form-group-bundle-start {
                 border-color: var-get($theme, 'hover-border-color');
             }
-    
+
             %igx-input-group__filler {
                 border-color: var-get($theme, 'hover-border-color');
             }
-    
+
             %igx-input-group__notch {
                 border-block-start-color: var-get($theme, 'hover-border-color');
                 border-block-end-color: var-get($theme, 'hover-border-color');
             }
-    
+
             %form-group-bundle-end {
                 border-color: var-get($theme, 'hover-border-color');
             }
@@ -1009,8 +1012,8 @@
     }
 
     %form-group-label--focused-border:not(:is(
-        %form-group-border--error, 
-        %form-group-border--warning, 
+        %form-group-border--error,
+        %form-group-border--warning,
         %form-group-border--success))
     {
         &:hover {
@@ -1887,7 +1890,9 @@
     %form-group-suffix-fluent,
     %form-group-prefix-fluent-search,
     %form-group-suffix-fluent-search {
-        padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+        &:not(:empty) {
+            padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+        }
     }
 
     %fluent-upload-button {

From 5c1dc4a9877d785cb6e4c6c94c81b3554d5cb834 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Tue, 18 Mar 2025 10:18:48 +0200
Subject: [PATCH 2/2] refactor(excel-style-filtering): move control flow to
 suffix element

---
 .../excel-style-search.component.html            | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html
index c5930f3adaf..a011c9a7d04 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html
@@ -9,16 +9,16 @@
         (keydown)="onInputKeyDown($event)"
         [placeholder]="esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder"
         autocomplete="off"/>
-    <igx-suffix>
         @if (searchValue || searchValue === 0) {
-            <igx-icon
-                family="default"
-                name="input_clear"
-                (click)="clearInput()"
-                tabindex="0">
-            </igx-icon>
+            <igx-suffix>
+                <igx-icon
+                    family="default"
+                    name="input_clear"
+                    (click)="clearInput()"
+                    tabindex="0">
+                </igx-icon>
+            </igx-suffix>
         }
-    </igx-suffix>
 </igx-input-group>
 
 @if (!isHierarchical()) {