Merge pull request #7853 from IgniteUI/mpopov/responsive-filtering-row-9.1.x

Adding responsive styles for filtering row

Author: Lipata

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

@@ -554,8 +554,12 @@
         @extend %igx-grid__filtering-row--compact !optional;
     }
 
-    @include e(filtering-row-buttons) {
-        @extend %igx-grid__filtering-row-buttons !optional;
+    @include e(filtering-row-editing-buttons) {
+        @extend %igx-grid__filtering-row-editing-buttons !optional;
+    }
+
+    @include e(filtering-row-editing-buttons, $m: small) {
+        @extend %igx-grid__filtering-row-editing-buttons--small !optional;
     }
 
     @include e(filtering-row-main) {

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

@@ -2364,7 +2364,9 @@
         }
 
         igx-input-group {
-            flex: 0 0 200px;
+            width: 100%;
+            max-width: rem(200px);
+            min-width: rem(140px);
         }
 
         igx-prefix:focus {
@@ -2399,6 +2401,7 @@
         flex: 1;
         overflow: hidden;
         max-width: calc(100% - 176px);
+        min-width: rem(56px);
 
         igx-chips-area {
             transition: transform .25s $ease-out-back;
@@ -2630,4 +2633,28 @@
 
     @include _excel-filtering($theme, $palette);
     @include _advanced-filtering($theme, $palette);
+
+    %igx-grid__filtering-row-editing-buttons--small,
+    %igx-grid__filtering-row-editing-buttons {
+        display: flex;
+        align-items: center;
+    }
+
+    %igx-grid__filtering-row-editing-buttons {
+        button {
+            igx-icon {
+                margin-#{$right}: rem(8px);
+            }
+        }
+    }
+
+    %igx-grid__filtering-row-editing-buttons--small {
+        button {
+            &:not([disabled]) {
+                igx-icon {
+                    color: --var($theme, 'sorted-header-icon-color');
+                }
+            }
+        }
+    }
 }

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

@@ -121,7 +121,13 @@
     <igx-icon>navigate_next</igx-icon>
 </button>
 
-<div #buttonsContainer class="igx-grid__filtering-row-editing-buttons">
-    <button igxButton igxRipple (click)="clearFiltering()" [disabled]="disabled" [tabindex]="disabled">{{filteringService.grid.resourceStrings.igx_grid_filter_row_reset}}</button>
-    <button #closeButton igxButton igxRipple (click)="close()">{{filteringService.grid.resourceStrings.igx_grid_filter_row_close}}</button>
+<div #buttonsContainer [ngClass]="isNarrowWidth ? 'igx-grid__filtering-row-editing-buttons--small' : 'igx-grid__filtering-row-editing-buttons'">
+    <button [igxButton]="isNarrowWidth ? 'icon' : 'flat'" igxRipple (click)="clearFiltering()" [disabled]="disabled" [tabindex]="disabled">
+        <igx-icon>refresh</igx-icon>
+        {{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_reset}}
+    </button>
+    <button #closeButton [igxButton]="isNarrowWidth ? 'icon' : 'flat'"  igxRipple (click)="close()">
+        <igx-icon>close</igx-icon>
+        {{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_close}}
+    </button>
 </div>

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

@@ -778,4 +778,8 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
     private get isColumnFiltered() {
         return this.column.filteringExpressionsTree && this.column.filteringExpressionsTree.filteringOperands.length > 0;
     }
+
+    public get isNarrowWidth(): boolean {
+        return this.element.nativeElement.offsetWidth < 432;
+    }
 }

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -1128,7 +1128,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             const reset = editingBtns.queryAll(By.css('button'))[0];
             const close = editingBtns.queryAll(By.css('button'))[1];
 
-            expect(reset.nativeElement.innerText).toBe('Reset');
+            expect(reset.nativeElement.childNodes[1].textContent.trim()).toBe('Reset');
         }));
 
         it('Should correctly change resource strings for filter row using Changei18n.', fakeAsync(() => {
@@ -1151,8 +1151,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             const reset = editingBtns.queryAll(By.css('button'))[0];
             const close = editingBtns.queryAll(By.css('button'))[1];
 
-            expect(close.nativeElement.innerText).toBe('My close');
-            expect(reset.nativeElement.innerText).toBe('Reset');
+            expect(close.nativeElement.childNodes[1].textContent.trim()).toBe('My close');
+            expect(reset.nativeElement.childNodes[1].textContent.trim()).toBe('Reset');
 
             changei18n({
                 igx_grid_filter: 'Filter',
@@ -1181,8 +1181,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             const reset = editingBtns.queryAll(By.css('button'))[0];
             const close = editingBtns.queryAll(By.css('button'))[1];
 
-            expect(close.nativeElement.innerText).toBe('My close');
-            expect(reset.nativeElement.innerText).toBe('Reset');
+            expect(close.nativeElement.childNodes[1].textContent.trim()).toBe('My close');
+            expect(reset.nativeElement.childNodes[1].textContent.trim()).toBe('Reset');
         }));
 
         it('should correctly apply locale to datePicker.', fakeAsync(() => {