fix(grid-filtering): misaligned ESF buttons (#11043)

* fix(grid-filtering): misaligned ESF buttons * fix compact mode misalignment * fix(esf-moving): replace section with button-group * chore(*): fixed filtering tests Co-authored-by: igdmdimitrov <[email protected]> Co-authored-by: igdmdimitrov <[email protected]> Co-authored-by: Konstantin Dinev <[email protected]>
IgniteUI · Mar 1, 2022 · 95d6cc7 · 95d6cc7
1 parent 080f49f
commit 95d6cc7
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 43 deletions.
diff --git a/...ects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss b/...ects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss
@@ -62,10 +62,6 @@
             @extend %grid-excel-move !optional;
         }
 
-        @include e(move-buttons) {
-            @extend %grid-excel-move__buttons !optional;
-        }
-
         @include e(actions) {
             @extend %grid-excel-actions !optional;
         }

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss
@@ -23,7 +23,6 @@
     $variant: map.get($theme, 'variant');
     $bootstrap-theme: $variant == 'bootstrap';
 
-
     %grid-excel-filter {
         display: block;
         width: rem(320px);
@@ -141,7 +140,8 @@
         margin-#{$left}: rem(16px);
     }
 
-    %grid-excel-sort {
+    %grid-excel-sort,
+    %grid-excel-move {
         display: block;
         padding: rem(8px) rem(16px);
 
@@ -154,6 +154,7 @@
             font-size: rem(18px);
             width: rem(18px);
             height: rem(18px);
+            justify-content: initial;
         }
     }
 
@@ -182,20 +183,7 @@
         }
     }
 
-    %grid-excel-move {
-        display: block;
-        padding: rem(8px) rem(16px);
-
-        header {
-            color: igx-color($palette, 'grays', 700);
-            margin-bottom: rem(4px);
-        }
-    }
-
-    %grid-excel-move__buttons {
-        display: flex;
-        justify-content: space-between;
-
+    %grid-excel-move igx-buttongroup {
         @include if-rtl() {
             flex-direction: row-reverse;
 
@@ -301,7 +289,8 @@
             padding: rem(4px);
         }
 
-        %grid-excel-sort {
+        %grid-excel-sort,
+        %grid-excel-move {
             padding: rem(4px);
 
             @extend %grid-excel-action--compact;
@@ -312,9 +301,7 @@
         }
 
         %grid-excel-move {
-            @extend %grid-excel-action--compact;
             margin-bottom: 0;
-            padding: rem(4px);
         }
 
         %grid-excel-actions {

diff --git a/...ts/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-moving.component.html b/...ts/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-moving.component.html
@@ -2,7 +2,7 @@
 <header>
     {{ esf.grid.resourceStrings.igx_grid_excel_filter_moving_header }}
 </header>
-<section class="igx-excel-filter__move-buttons">
+<igx-buttongroup [multiSelection]="false">
     <button [displayDensity]="esf.grid.displayDensity"
         igxButton
         [disabled]="canNotMoveLeft"
@@ -25,5 +25,5 @@
         </span>
         <igx-icon>arrow_forwards</igx-icon>
     </button>
-</section>
+</igx-buttongroup>
 </ng-container>
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
@@ -3597,16 +3597,18 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName');
 
             // Move 'ProductName' one step to the right. (should move)
-            GridFunctions.clickMoveRightInExcelStyleFiltering(fix);
-            tick(100);
+            let moveRight = GridFunctions.getExcelStyleFilteringMoveButtons(fix)[1];
+            UIInteractions.simulateClickEvent(moveRight);
+            tick(DEBOUNCETIME);
             fix.detectChanges();
             expect(GridFunctions.getColumnHeaderTitleByIndex(fix, 0).innerText).toBe('ID');
             expect(GridFunctions.getColumnHeaderTitleByIndex(fix, 1).innerText).toBe('ProductName');
             expect(productNameCol.pinned).toBe(true);
 
             // Move 'ProductName' one step to the left. (should move)
-            GridFunctions.clickMoveLeftInExcelStyleFiltering(fix);
-            tick(100);
+            const moveLeft = GridFunctions.getExcelStyleFilteringMoveButtons(fix)[0];
+            UIInteractions.simulateClickEvent(moveLeft);
+            tick(DEBOUNCETIME);
             fix.detectChanges();
             expect(GridFunctions.getColumnHeaderTitleByIndex(fix, 0).innerText).toBe('ProductName');
             expect(GridFunctions.getColumnHeaderTitleByIndex(fix, 1).innerText).toBe('ID');
@@ -3617,11 +3619,12 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             ControlsFunction.verifyButtonIsDisabled(moveComponent.querySelectorAll('button')[0]);
 
             // Move 'ProductName' two steps to the right. (should move)
-            GridFunctions.clickMoveRightInExcelStyleFiltering(fix);
-            tick(100);
+            moveRight = GridFunctions.getExcelStyleFilteringMoveButtons(fix)[1];
+            UIInteractions.simulateClickEvent(moveRight);
+            tick(DEBOUNCETIME);
             fix.detectChanges();
-            GridFunctions.clickMoveRightInExcelStyleFiltering(fix);
-            tick(100);
+            UIInteractions.simulateClickEvent(moveRight);
+            tick(DEBOUNCETIME);
             fix.detectChanges();
             expect(GridFunctions.getColumnHeaderTitleByIndex(fix, 0).innerText).toBe('ID');
             expect(GridFunctions.getColumnHeaderTitleByIndex(fix, 1).innerText).toBe('ProductName');
@@ -3641,11 +3644,12 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
 
             GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
 
-            GridFunctions.clickMoveLeftInExcelStyleFiltering(fix);
-            tick(100);
+            const moveLeft = GridFunctions.getExcelStyleFilteringMoveButtons(fix)[0];
+            UIInteractions.simulateClickEvent(moveLeft);
+            tick(DEBOUNCETIME);
             fix.detectChanges();
-            GridFunctions.clickMoveLeftInExcelStyleFiltering(fix);
-            tick(100);
+            UIInteractions.simulateClickEvent(moveLeft);
+            tick(DEBOUNCETIME);
             fix.detectChanges();
 
             expect(GridFunctions.getColumnHeaderTitleByIndex(fix, 0).innerText).toBe('ProductName');
@@ -6072,7 +6076,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             fix.detectChanges();
 
             // Pin the 'General Information' group by pinning its child 'ProductName' column.
-            GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName');
             tick(100);
             fix.detectChanges();
             GridFunctions.clickPinIconInExcelStyleFiltering(fix, false);
@@ -6083,11 +6087,10 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             GridFunctions.verifyColumnIsPinned(column, false, 7);
 
             // Try to pin the 'AnotherField' column by moving it to the left.
-            GridFunctions.clickExcelFilterIcon(fix, 'AnotherField');
-            tick(100);
-            fix.detectChanges();
-            GridFunctions.clickMoveLeftInExcelStyleFiltering(fix);
-            tick(200);
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'AnotherField');
+            const moveLeft = GridFunctions.getExcelStyleFilteringMoveButtons(fix)[0];
+            UIInteractions.simulateClickEvent(moveLeft);
+            tick(DEBOUNCETIME);
             fix.detectChanges();
 
             // Verify 'AnotherField' column is successfully pinned next to the column group.