refactor(filtering): use mod class for the selected state

Author: simeonoff

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

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

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

@@ -2207,7 +2207,7 @@
         }
     }
 
-    %igx-grid__filtering-cell-selected {
+    %igx-grid__filtering-cell--selected {
         color: --var($theme, 'row-selected-text-color');
         background: --var($theme, 'row-selected-cell-background');
     }

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

@@ -63,8 +63,9 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
     @HostBinding('class')
     get styleClasses(): string {
         if (this.column && this.column.selected) {
-            return 'igx-grid__filtering-cell-selected';
+            return 'igx-grid__filtering-cell--selected';
         }
+
         return 'igx-grid__filtering-cell';
     }
 

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

@@ -12,7 +12,7 @@ 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';
+const SELECTED_FILTER_CELL_CLASS = 'igx-grid__filtering-cell--selected';
 
 function selectedData() {
     return [{ ProductID: 1, ProductName: 'Chai' },