fix(grid): preserve Excel filter density with custom heights

CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes for each version of this project will be documented in this file.
 
 
+## 23.0.0
+
+### Bug Fixes
+
+- `IgxGridExcelStyleFilteringComponent`
+    - Menu spacing now follows `--ig-size` when `minHeight` or `maxHeight` is set, including when rendered in an external outlet or outside the grid. Previously it could fall back to large spacing (#17589).
+
 ## 22.2.1
 
 ### New Features

projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss

@@ -97,6 +97,8 @@ $checkbox-indent: (
     }
 
     @include b(igx-excel-filter) {
+        @include sizable();
+
         --component-size: var(--ig-size, var(--ig-size-large));
 
         display: block;
@@ -109,15 +111,11 @@ $checkbox-indent: (
         background: var-get($theme, 'background');
 
         @include e(sizing) {
-            @include sizable();
-
             min-height: sizable(rem(330px), rem(465px), rem(645px));
             max-height: sizable(rem(405px), rem(565px), rem(775px));
         }
 
         @include e(menu) {
-            --component-size: var(--ig-size, var(--ig-size-large));
-
             display: flex;
             flex-direction: column;
             height: 100%;

projects/igniteui-angular/grids/grid/README.md

@@ -377,6 +377,12 @@ Here is a list of all public methods exposed by **IgxGridColumnComponent**:
 |`filterCellTemplate`|TemplateRef|Yes|Yes|Get/Set a reference to a template which will be applied to the filter cell of the column.|
 
 
+## Excel-Style Filtering Sizing
+
+The `igx-grid-excel-style-filtering` component follows `--ig-size` for menu spacing even when `minHeight` or `maxHeight` is set. These inputs override the default height constraints without changing the menu's density. Clearing both inputs restores the density-dependent default heights.
+
+For filters rendered in an external outlet or outside the grid, apply `--ig-size` to the filter or a shared ancestor of the grid and filter to keep their density consistent.
+
 ## Filtering Conditions
 
 Use the filtering operand classes to apply conditions programmatically. Import the operand that matches your column data type and use its built-in condition names.

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

@@ -23,6 +23,7 @@ import {
     IgxGridFilteringTemplateComponent,
     IgxGridFilteringESFEmptyTemplatesComponent,
     IgxGridFilteringESFTemplatesComponent,
+    IgxGridFilteringESFSizingComponent,
     IgxGridFilteringESFLoadOnDemandComponent,
     IgxGridFilteringESFRemoteChunkComponent,
     CustomFilteringStrategyComponent,
@@ -3301,6 +3302,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
                 IgxGridFilteringComponent,
                 IgxGridFilteringESFEmptyTemplatesComponent,
                 IgxGridFilteringESFTemplatesComponent,
+                IgxGridFilteringESFSizingComponent,
                 IgxGridFilteringESFLoadOnDemandComponent,
                 IgxGridFilteringESFRemoteChunkComponent,
                 IgxGridFilteringMCHComponent,
@@ -7682,6 +7684,44 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
         }));
     });
 
+    describe('Excel Style Filtering sizing in an external outlet', () => {
+        [
+            { size: ɵSize.Small, spacing: '4px', minHeight: '330px', maxHeight: '405px' },
+            { size: ɵSize.Medium, spacing: '8px', minHeight: '465px', maxHeight: '565px' },
+            { size: ɵSize.Large, spacing: '16px', minHeight: '645px', maxHeight: '775px' }
+        ].forEach(({ size, spacing, minHeight, maxHeight }) => {
+            it(`should preserve spacing and height constraints at size ${size}`, fakeAsync(() => {
+                const fix = TestBed.createComponent(IgxGridFilteringESFSizingComponent);
+                setElementSize(fix.nativeElement, size);
+                fix.detectChanges();
+                const grid = fix.componentInstance.grid;
+                GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName');
+
+                const menu = GridFunctions.getExcelStyleFilteringComponent(fix) as HTMLElement;
+                expect(grid.nativeElement.contains(menu)).toBeFalse();
+                expect(grid.outlet.nativeElement.contains(menu)).toBeTrue();
+
+                // Setting either bound removes the default sizing class. Clearing both restores it.
+                [
+                    { min: undefined, max: undefined },
+                    { min: '350px', max: undefined },
+                    { min: undefined, max: '500px' },
+                    { min: '350px', max: '500px' },
+                    { min: undefined, max: undefined }
+                ].forEach(({ min, max }) => {
+                    fix.componentInstance.minHeight.set(min);
+                    fix.componentInstance.maxHeight.set(max);
+                    fix.detectChanges();
+
+                    verifyExcelStyleFilteringSpacing(menu, spacing);
+                    const defaults = !min && !max;
+                    expect(getComputedStyle(menu).minHeight).toBe(min ?? (defaults ? minHeight : '0px'));
+                    expect(getComputedStyle(menu).maxHeight).toBe(max ?? (defaults ? maxHeight : 'none'));
+                });
+            }));
+        });
+    });
+
     describe('External Excel Style Filtering', () => {
         let fix; let grid;
         beforeEach(fakeAsync(() => {
@@ -7690,6 +7730,34 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             fix.detectChanges();
         }));
 
+        [
+            { min: undefined, max: undefined },
+            { min: '350px', max: undefined },
+            { min: undefined, max: '500px' },
+            { min: '350px', max: '500px' }
+        ].forEach(({ min, max }) => {
+            it(`should update standalone menu spacing with minHeight=${min} and maxHeight=${max}`, fakeAsync(() => {
+                const esf = fix.componentInstance.esf;
+                esf.minHeight = min;
+                esf.maxHeight = max;
+                esf.cdr.detectChanges();
+                const menu = GridFunctions.getExcelStyleFilteringComponent(fix) as HTMLElement;
+                expect(grid.nativeElement.contains(menu)).toBeFalse();
+
+                // Change density on the same rendered menu, without a sizable grid ancestor.
+                [
+                    { size: ɵSize.Small, spacing: '4px' },
+                    { size: ɵSize.Medium, spacing: '8px' },
+                    { size: ɵSize.Large, spacing: '16px' }
+                ].forEach(({ size, spacing }) => {
+                    setElementSize(fix.nativeElement, size);
+                    tick(200);
+                    fix.detectChanges();
+                    verifyExcelStyleFilteringSpacing(menu, spacing);
+                });
+            }));
+        });
+
         it('Should allow hosting Excel Style filtering component outside of the grid.', fakeAsync(() => {
             // sort
             GridFunctions.clickSortAscInExcelStyleFiltering(fix);
@@ -8133,6 +8201,14 @@ const checkUIForType = (type: string, elem: DebugElement) => {
     }
 };
 
+const verifyExcelStyleFilteringSpacing = (menu: HTMLElement, expectedSpacing: string) => {
+    const header = menu.querySelector('.igx-excel-filter__menu-header');
+    const main = menu.querySelector('.igx-excel-filter__menu-main');
+    expect(getComputedStyle(header).padding).toBe(expectedSpacing);
+    expect(getComputedStyle(main).padding).toBe(expectedSpacing);
+    expect(getComputedStyle(main).gap).toBe(expectedSpacing);
+};
+
 const verifyExcelStyleFilteringSize = (fix: ComponentFixture<any>, expectedSize: ɵSize) => {
     // Get excel style dialog
     const excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);

projects/igniteui-angular/test-utils/grid-samples.spec.ts

@@ -1,4 +1,4 @@
-import { Component, TemplateRef, ViewChild, Input, AfterViewInit, QueryList, ViewChildren, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { Component, TemplateRef, ViewChild, Input, AfterViewInit, QueryList, ViewChildren, OnInit, ChangeDetectionStrategy, signal } from '@angular/core';
 
 import {
     BasicGridComponent, BasicGridSearchComponent, GridAutoGenerateComponent,
@@ -8,7 +8,7 @@ import { IGridSelection } from './grid-interfaces.spec';
 import { SampleTestData, DataParent } from './sample-test-data.spec';
 import { ColumnDefinitions, GridTemplateStrings, EventSubscriptions, TemplateDefinitions, ExternalTemplateDefinitions } from './template-strings.spec';
 
-import { ColumnPinningPosition, ColumnType, FilteringExpressionsTree, FilteringLogic, FilteringStrategy, FormattedValuesSortingStrategy, IDataCloneStrategy, IFilteringExpressionsTree, IgxDateSummaryOperand, IgxFilteringOperand, IgxFilterItem, IgxNumberFilteringOperand, IgxNumberSummaryOperand, IgxSummaryResult, ISortingOptions, ISortingStrategy, OverlaySettings, SortingDirection } from 'igniteui-angular/core';
+import { ColumnPinningPosition, ColumnType, FilteringExpressionsTree, FilteringLogic, FilteringStrategy, FormattedValuesSortingStrategy, IDataCloneStrategy, IFilteringExpressionsTree, IgxDateSummaryOperand, IgxFilteringOperand, IgxFilterItem, IgxNumberFilteringOperand, IgxNumberSummaryOperand, IgxSummaryResult, ISortingOptions, ISortingStrategy, IgxOverlayOutletDirective, OverlaySettings, SortingDirection } from 'igniteui-angular/core';
 import { IgxActionStripComponent } from 'igniteui-angular/action-strip';
 import { IgxPaginatorComponent } from 'igniteui-angular/paginator';
 import { IgxIconComponent } from 'igniteui-angular/icon';
@@ -837,6 +837,25 @@ export class IgxGridExternalESFComponent extends BasicGridComponent implements A
     }
 }
 
+@Component({
+    template: `
+        <div igxOverlayOutlet #outlet="overlay-outlet"></div>
+        <igx-grid [data]="data" height="500px" [allowFiltering]="true"
+            filterMode="excelStyleFilter" [outlet]="outlet">
+            <igx-column field="ProductName" [sortable]="true"></igx-column>
+            <igx-grid-excel-style-filtering [minHeight]="minHeight()" [maxHeight]="maxHeight()">
+            </igx-grid-excel-style-filtering>
+        </igx-grid>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [IgxGridComponent, IgxColumnComponent, IgxGridExcelStyleFilteringComponent, IgxOverlayOutletDirective]
+})
+export class IgxGridFilteringESFSizingComponent extends BasicGridComponent {
+    public minHeight = signal<string|undefined>(undefined);
+    public maxHeight = signal<string|undefined>(undefined);
+    public override data = SampleTestData.excelFilteringData();
+}
+
 export class CustomFilterStrategy extends FilteringStrategy {
     constructor() {
         super();