fix(filter-row): switch to icon buttons when width is below 432px

Author: DiyanDimitrov

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

@@ -122,12 +122,12 @@
 </button>
 
 <div #buttonsContainer class="igx-grid__filtering-row-editing-buttons">
-    <button igxButton="flat" igxRipple (click)="clearFiltering()" [disabled]="disabled" [tabindex]="disabled">
+    <button [igxButton]="isNarrowWidth ? 'icon' : 'flat'" igxRipple (click)="clearFiltering()" [disabled]="disabled" [tabindex]="disabled">
         <igx-icon>refresh</igx-icon>
-        {{filteringService.grid.resourceStrings.igx_grid_filter_row_reset}}
+        {{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_reset}}
     </button>
-    <button #closeButton igxButton="flat" igxRipple (click)="close()">
+    <button #closeButton [igxButton]="isNarrowWidth ? 'icon' : 'flat'"  igxRipple (click)="close()">
         <igx-icon>close</igx-icon>
-        {{filteringService.grid.resourceStrings.igx_grid_filter_row_close}}
+        {{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;
+    }
 }