Merge pull request #7844 from IgniteUI/mpopov/filtering-dropdown

Adding styles for drop-down items in grid filtering scenario

Author: Lipata

CHANGELOG.md

@@ -79,7 +79,7 @@ The following example shows how you can use the Indigo theme:
 - `igxGrid`
     - **Behavioral Change** - Group rows now display the group column's header name instead of field when one is available.
 - `igx-select`, `igx-combo`, `igx-drop-down`
-    - **Behavioral Change** - The select, combo, and dropdown items now have display block and text-overflow ellipsis enabled by default.
+    - **Behavioral Change** - The select, combo, and dropdown items now have display block and text-overflow ellipsis enabled by default. This requires styling to be handled on the application-level if there is something more than a simple text in the item.
 - `IgxTransaction` - The `onStateUpdate` now emits with information of its origin. The emitted value is of type `StateUpdateEvent`, which has two properties:
     - `origin` - it can vary within the values of the `TransactionEventOrigin` interface;
     - `actions` - contains information about the transactions, that caused the emission of the event.

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

@@ -542,6 +542,14 @@
         @extend %igx-grid__filtering-cell-indicator--hidden !optional;
     }
 
+    @include e(filtering-dropdown-items) {
+        @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

@@ -2396,6 +2396,15 @@
         }
     }
 
+    %igx-grid__filtering-dropdown-items {
+        display: flex;
+        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

@@ -3,8 +3,10 @@
     <igx-drop-down-item *ngFor="let condition of conditions"
         [value]="condition"
         [selected]="isConditionSelected(condition)">
-        <igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
-        <span style="margin-left: 16px">{{ 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-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

@@ -166,12 +166,16 @@ <h4>{{ column.header || column.field }}</h4>
         <igx-drop-down-item
         *ngFor="let condition of conditions"
         [value]="condition">
-            <igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
-            <span style="margin-left: 16px">{{ 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-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>