fix(filtering): add missing dropdown/select styles

Author: MPopov

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

@@ -546,6 +546,10 @@
         @extend %igx-grid__filtering-dropdown-items !optional;
     }
 
+    @include e(filtering-dropdown-text) {
+        @extend %igx-grid__filtering-dropdown-text !optional;
+    }
+
     @include e(filtering-row) {
         @extend %igx-grid__filtering-row !optional;
     }

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -2401,6 +2401,10 @@
         align-items: center;
     }
 
+    %igx-grid__filtering-dropdown-text {
+        margin-left: rem(16px);
+    }
+
     %igx-grid__filtering-row--cosy {
         height: map-get($grid-header-height, 'cosy');
     }

projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html

@@ -160,10 +160,12 @@ <h6 class="igx-filter-empty__title">
                               [name]="selectedColumn.filters.condition(conditionSelect.value).iconName">
                     </igx-icon>
                     <igx-select-item *ngFor="let condition of getConditionList()" [value]="condition">
-                        <igx-icon fontSet="filtering-icons"
-                                  [name]="selectedColumn.filters.condition(condition).iconName">
-                        </igx-icon>
-                        <span>{{getConditionFriendlyName(condition)}}</span>
+                        <div class="igx-grid__filtering-dropdown-items">
+                            <igx-icon fontSet="filtering-icons"
+                                      [name]="selectedColumn.filters.condition(condition).iconName">
+                            </igx-icon>
+                            <span class="igx-grid__filtering-dropdown-text">{{getConditionFriendlyName(condition)}}</span>
+                        </div>
                     </igx-select-item>
                 </igx-select>
 

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html

@@ -5,7 +5,7 @@
         [selected]="isConditionSelected(condition)">
         <div class="igx-grid__filtering-dropdown-items">
             <igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
-            <span style="margin-left: 16px">{{ translateCondition(condition) }}</span>
+            <span class="igx-grid__filtering-dropdown-text">{{ translateCondition(condition) }}</span>
         </div>
     </igx-drop-down-item>
 </igx-drop-down>

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html

@@ -9,8 +9,10 @@
         <igx-icon *ngIf="!expressionUI.expression.condition">filter_list</igx-icon>
     </igx-prefix>
     <igx-select-item *ngFor="let condition of conditions" [value]="condition" [selected]="isConditionSelected(condition)">
-        <igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
-        <span>{{translateCondition(condition)}}</span>
+        <div class="igx-grid__filtering-dropdown-items">
+            <igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
+            <span class="igx-grid__filtering-dropdown-text">{{translateCondition(condition)}}</span>
+        </div>
     </igx-select-item>
 </igx-select>
 

projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.html

@@ -168,12 +168,14 @@ <h4>{{ column.header || column.field }}</h4>
         [value]="condition">
             <div class="igx-grid__filtering-dropdown-items">
                 <igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
-                <span style="margin-left: 16px">{{ translateCondition(condition) }}</span>
+                <span class="igx-grid__filtering-dropdown-text">{{ translateCondition(condition) }}</span>
             </div>
         </igx-drop-down-item>
         <igx-drop-down-item *ngIf="showCustomFilterItem()">
-            <igx-icon>filter_list</igx-icon>
-            <span style="margin-left: 16px">{{ grid.resourceStrings.igx_grid_excel_custom_filter }}</span>
+            <div class="igx-grid__filtering-dropdown-items">
+                <igx-icon>filter_list</igx-icon>
+                <span class="igx-grid__filtering-dropdown-text">{{ grid.resourceStrings.igx_grid_excel_custom_filter }}</span>
+            </div>
         </igx-drop-down-item>
     </div>
 </igx-drop-down>