fix(input-group): empty prefix/suffix is padded (#15511)

Author: simeonoff

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 {

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()) {