Merge pull request #7021 from IgniteUI/nrobakova/fix-issue-7004

Update filter cell style when column is selected

Author: simeonoff

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

@@ -508,6 +508,11 @@
         @extend %igx-grid__filtering-cell !optional;
     }
 
+    @include e(filtering-cell, $m: 'selected') {
+        @extend %igx-grid__filtering-cell !optional;
+        @extend %igx-grid__filtering-cell--selected !optional;
+    }
+
     @include e(filtering-cell-indicator) {
         @extend %igx-grid__filtering-cell-indicator !optional;
     }

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

@@ -1074,7 +1074,7 @@
         border-bottom: none;
     }
 
-    %igx-grid__tr--pinned {       
+    %igx-grid__tr--pinned {
         position: relative;
         background: inherit;
         z-index: 10000;
@@ -2207,6 +2207,11 @@
         }
     }
 
+    %igx-grid__filtering-cell--selected {
+        color: --var($theme, 'row-selected-text-color');
+        background: --var($theme, 'row-selected-cell-background');
+    }
+
     %igx-grid__filtering-cell-indicator {
         position: relative;
         display: flex;

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts

@@ -59,8 +59,15 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
     @ViewChild('complexChip', { read: IgxChipComponent })
     protected complexChip: IgxChipComponent;
 
-    @HostBinding('class.igx-grid__filtering-cell')
-    public cssClass = 'igx-grid__filtering-cell';
+
+    @HostBinding('class')
+    get styleClasses(): string {
+        if (this.column && this.column.selected) {
+            return 'igx-grid__filtering-cell--selected';
+        }
+
+        return 'igx-grid__filtering-cell';
+    }
 
     constructor(public cdr: ChangeDetectorRef, public filteringService: IgxFilteringService) {
         this.filteringService.subscribeToEvents();

projects/igniteui-angular/src/lib/grids/grid/column-selection.spec.ts

@@ -12,6 +12,8 @@ import { ɵɵsetComponentScope } from '@angular/core';
 
 const SELECTED_COLUMN_CLASS = 'igx-grid__th--selected';
 const SELECTED_COLUMN_CELL_CLASS = 'igx-grid__td--column-selected';
+const SELECTED_FILTER_CELL_CLASS = 'igx-grid__filtering-cell--selected';
+
 function selectedData() {
     return [{ ProductID: 1, ProductName: 'Chai' },
     { ProductID: 2, ProductName: 'Aniseed Syrup' },
@@ -766,11 +768,15 @@ describe('IgxGrid - Column Selection #grid', () => {
 
         it('Filtering: Verify column selection when filter row is opened ', fakeAsync(() => {
             grid.allowFiltering = true;
+            fix.detectChanges();
+            const filterCell = GridFunctions.getFilterCell(fix , 'ProductID');
+            expect(filterCell.nativeElement.classList.contains(SELECTED_FILTER_CELL_CLASS)).toBeFalsy();
             const colInStock = grid.getColumnByName('InStock');
             colProductID.selected = true;
             fix.detectChanges();
 
-            GridFunctions.clickFilterCellChipUI(fix, 'ProductName'); // Name column contains nested object as a value
+            expect(filterCell.nativeElement.classList.contains(SELECTED_FILTER_CELL_CLASS)).toBeTruthy();
+            GridFunctions.clickFilterCellChipUI(fix, 'InStock'); // Name column contains nested object as a value
             tick(150);
             fix.detectChanges();