fix(grid): filtering row buttons outline problem (#12308)

Co-authored-by: Simeon Simeonoff <[email protected]>

Author: SisIvanova

projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss

@@ -387,6 +387,12 @@
         compact: rem(36px)
     );
 
+    $filtering-row-button-size: (
+        comfortable: rem(40px),
+        cosy: rem(30px),
+        compact: rem(21px)
+    );
+
     $icon-in-button-margin: (
         comfortable: rem(12px),
         cosy: rem(8px),
@@ -481,6 +487,11 @@
         white-space: nowrap;
         transition: $button-transition;
 
+        @if ($variant == 'bootstrap') {
+            // important is needed to override the typography margins
+            margin: rem(4px) !important;
+        }
+
         igx-icon {
             display: flex;
             justify-content: center;
@@ -513,6 +524,29 @@
         }
     }
 
+    igx-grid-filtering-row {
+        @if ($variant == 'bootstrap') {
+            %igx-button-display {
+                min-height: map.get($filtering-row-button-size, 'comfortable');
+                padding-block: 0;
+
+                > * {
+                    display: flex;
+                    align-items: center;
+                    height: rem(18px);
+                }
+            }
+
+            %igx-button-display--cosy {
+                min-height: map.get($filtering-row-button-size, 'cosy');
+            }
+
+            %igx-button-display--compact {
+                min-height: map.get($filtering-row-button-size, 'compact');
+            }
+        }
+    }
+
     %igx-button--flat {
         background: var-get($flat-theme, 'background');
         color: var-get($flat-theme, 'foreground');

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

@@ -162,7 +162,7 @@
                 </igx-chip>
 
                 <span id='operand' *ngIf="!last">
-                    <button igxButton (click)="toggleOperatorsDropDown($event, i)" [igxDropDownItemNavigation]="operators" [displayDensity]="column.grid.displayDensity">
+                    <button igxButton (click)="toggleOperatorsDropDown($event, i)" [igxDropDownItemNavigation]="operators" [displayDensity]="displayDensity">
                         <igx-icon>expand_more</igx-icon>
                         <span>{{filteringService.getOperatorAsString(item.afterOperator)}}</span>
                     </button>
@@ -181,11 +181,11 @@
 </button>
 
 <div #buttonsContainer [ngClass]="isNarrowWidth ? 'igx-grid__filtering-row-editing-buttons--small' : 'igx-grid__filtering-row-editing-buttons'">
-    <button [displayDensity]="column.grid.displayDensity" [igxButton]="isNarrowWidth ? 'icon' : 'flat'" igxRipple (click)="clearFiltering()" [disabled]="disabled" [tabindex]="disabled">
+    <button [displayDensity]="displayDensity" [igxButton]="isNarrowWidth ? 'icon' : 'flat'" igxRipple (click)="clearFiltering()" [disabled]="disabled" [tabindex]="disabled">
         <igx-icon>refresh</igx-icon>
         <span>{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_reset}}</span>
     </button>
-    <button #closeButton [displayDensity]="column.grid.displayDensity" [igxButton]="isNarrowWidth ? 'icon' : 'flat'"  igxRipple (click)="close()">
+    <button #closeButton [displayDensity]="displayDensity" [igxButton]="isNarrowWidth ? 'icon' : 'flat'"  igxRipple (click)="close()">
         <igx-icon>close</igx-icon>
         <span>{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_close}}</span>
     </button>