From da60bc61c8fae2fb5a05f6e0b9d7266bb0262185 Mon Sep 17 00:00:00 2001 From: VDyulgerov Date: Tue, 10 May 2022 13:13:58 +0300 Subject: [PATCH 1/2] fix(gridToolbarHiding): fix columnsAreaMaxHeight input property --- .../src/lib/grids/grid/grid-toolbar.spec.ts | 21 ++++++++++++++++++- .../lib/grids/toolbar/grid-toolbar.base.ts | 5 ++++- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts index c2476e7ea99..6f3745f44bf 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts @@ -4,7 +4,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { AbsoluteScrollStrategy, GlobalPositionStrategy, IgxCsvExporterService, IgxExcelExporterService } from '../../services/public_api'; import { IgxGridModule } from './public_api'; import { configureTestSuite } from '../../test-utils/configure-suite'; -import { BaseToolbarColumnActionsDirective } from '../toolbar/grid-toolbar.base'; +import { GridFunctions } from "../../test-utils/grid-functions.spec"; +import { By } from "@angular/platform-browser"; const TOOLBAR_TAG = 'igx-grid-toolbar'; @@ -176,6 +177,24 @@ describe('IgxGrid - Grid Toolbar #grid - ', () => { expect($('#csvEntry').textContent).toMatch(instance.customCSVText); }); + it('should initialize input property columnsAreaMaxHeight properly', fakeAsync(() => { + expect(instance.pinningAction.columnsAreaMaxHeight).toEqual('100%'); + + instance.pinningAction.columnsAreaMaxHeight = '10px'; + fixture.detectChanges(); + + expect(instance.pinningAction.columnsAreaMaxHeight).toEqual('10px'); + + const pinningButton = GridFunctions.getColumnPinningButton(fixture); + pinningButton.click(); + tick(); + fixture.detectChanges() + const element = fixture.debugElement.query(By.css('.igx-column-actions__columns')); + expect(element.attributes.style).toBe('max-height: 10px;'); + + expect(instance.pinningAction.columnsAreaMaxHeight).toEqual('10px'); + })); + it('Setting overlaySettings for each toolbar columns action', () => { const defaultSettings = instance.pinningAction.overlaySettings; const defaultFiltSettings = instance.advancedFiltAction.overlaySettings; diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts index 9267835d69f..3879e61bc03 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts @@ -118,7 +118,10 @@ export abstract class BaseToolbarDirective implements OnDestroy { if (actions) { this._setupListeners(toggleRef); const setHeight = () => - actions.columnsAreaMaxHeight = this.columnListHeight ?? `${Math.max(this.grid.calcHeight * 0.5, 200)}px`; + actions.columnsAreaMaxHeight = actions.columnsAreaMaxHeight !== '100%' + ? actions.columnsAreaMaxHeight : + this.columnListHeight ?? + `${Math.max(this.grid.calcHeight * 0.5, 200)}px`; toggleRef.opening.pipe(first()).subscribe(setHeight); } toggleRef.toggle({ ...this.overlaySettings, ...{ target: anchorElement, outlet: this.grid.outlet, From aae0d783d5bb3083737963a92c07846cbf2a6a74 Mon Sep 17 00:00:00 2001 From: VDyulgerov Date: Tue, 10 May 2022 13:53:36 +0300 Subject: [PATCH 2/2] fix(gridToolbarHiding): fix lint errors --- .../src/lib/grids/grid/grid-toolbar.spec.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts index 6f3745f44bf..a56ade45931 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts @@ -4,8 +4,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { AbsoluteScrollStrategy, GlobalPositionStrategy, IgxCsvExporterService, IgxExcelExporterService } from '../../services/public_api'; import { IgxGridModule } from './public_api'; import { configureTestSuite } from '../../test-utils/configure-suite'; -import { GridFunctions } from "../../test-utils/grid-functions.spec"; -import { By } from "@angular/platform-browser"; +import { GridFunctions } from '../../test-utils/grid-functions.spec'; +import { By } from '@angular/platform-browser'; const TOOLBAR_TAG = 'igx-grid-toolbar'; @@ -188,7 +188,7 @@ describe('IgxGrid - Grid Toolbar #grid - ', () => { const pinningButton = GridFunctions.getColumnPinningButton(fixture); pinningButton.click(); tick(); - fixture.detectChanges() + fixture.detectChanges(); const element = fixture.debugElement.query(By.css('.igx-column-actions__columns')); expect(element.attributes.style).toBe('max-height: 10px;');