From 12eed4351de823794a5d5f630e4873b7722840fc Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 11 Sep 2026 16:02:45 +0300 Subject: [PATCH 1/2] fix(pivot-grid): match scroll-start border/background to header cells Closes #17584 --- .../pivot-grid/src/pivot-grid.component.scss | 1 + .../pivot-grid/src/pivot-grid.component.ts | 7 +++ .../pivot-grid/src/themes/grid/_base.scss | 23 ++++++++++ .../igniteui-angular/grids/themes/_base.scss | 40 +++-------------- .../grids/themes/_variables.scss | 43 +++++++++++++++++++ 5 files changed, 79 insertions(+), 35 deletions(-) create mode 100644 projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.scss create mode 100644 projects/igniteui-angular/grids/pivot-grid/src/themes/grid/_base.scss create mode 100644 projects/igniteui-angular/grids/themes/_variables.scss diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.scss b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.scss new file mode 100644 index 00000000000..7d171af90be --- /dev/null +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.scss @@ -0,0 +1 @@ +@use 'themes/grid/base'; diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts index 42fe8771186..421c78c7c25 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts @@ -205,6 +205,7 @@ export interface IPivotRecordTemplateContext { preserveWhitespaces: false, selector: 'igx-pivot-grid', templateUrl: 'pivot-grid.component.html', + styleUrl: 'pivot-grid.component.css', encapsulation: ViewEncapsulation.None, providers: [ IgxGridCRUDService, @@ -460,6 +461,12 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni @HostBinding('attr.role') public role = 'grid'; + /** + * @hidden @internal + */ + @HostBinding('class.igx-grid--pivot') + protected readonly pivotClass = true; + /** * Enables a super compact theme for the component. * @remarks diff --git a/projects/igniteui-angular/grids/pivot-grid/src/themes/grid/_base.scss b/projects/igniteui-angular/grids/pivot-grid/src/themes/grid/_base.scss new file mode 100644 index 00000000000..ffa9097003a --- /dev/null +++ b/projects/igniteui-angular/grids/pivot-grid/src/themes/grid/_base.scss @@ -0,0 +1,23 @@ +//// +/// @group pivot-grid +/// @access private +//// + +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'styles/themes/scoping' as *; +@use 'grids/themes/variables' as *; + +@include layer(base) { + @include b(igx-grid) { + @include m(pivot) { + @include e(scroll-start) { + background: var-get($theme, 'header-background'); + } + + @include e(scroll-start, $m: pinned) { + border-inline-end: $grid-header-border; + } + } + } +} diff --git a/projects/igniteui-angular/grids/themes/_base.scss b/projects/igniteui-angular/grids/themes/_base.scss index 4a0e95766ff..5f53c341efd 100644 --- a/projects/igniteui-angular/grids/themes/_base.scss +++ b/projects/igniteui-angular/grids/themes/_base.scss @@ -7,41 +7,7 @@ @use 'igniteui-theming/sass/color/functions' as *; @use 'igniteui-theming/sass/elevations' as *; @use 'styles/themes/scoping' as *; -@use 'igniteui-theming/sass/themes/schemas/components/light/grid' as *; - -$theme: digest-schema($material-grid); -$cell-font-size: rem(13px); -$cell-line-height: rem(16px); -$cell-editing-outline-width: rem(1px); -$grid-header-border-color: var(--_grid-header-border-color, hsla(from var-get($theme, 'header-border-color') h s l / 0.38)); -$grid-action-border-color: var(--_grid-action-border-color, hsla(from var-get($theme, 'action-border-color') h s l / 0.38)); -$grid-header-border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') $grid-header-border-color; -$grid-row-border: var-get($theme, 'row-border-width') var-get($theme, 'row-border-style') var-get($theme, 'row-border-color'); -$grid-pinned-border: var-get($theme, 'pinned-border-width') var-get($theme, 'pinned-border-style') var-get($theme, 'pinned-border-color'); -$grid-scrollbar-borders: rem(1px) solid var(--ig-grid-summary-border-color, var(--row-border-color)); -$grid-body-column-border-odd: var-get($theme, 'header-border-width') solid var-get($theme, 'body-column-border-color-odd'); -$grid-body-column-border-even: var-get($theme, 'header-border-width') solid var-get($theme, 'body-column-border-color-even'); -$grid-active-state-border: var-get($theme, 'cell-active-border-width') var-get($theme, 'active-state-border-style') var-get($theme, 'cell-active-border-color'); -$cell-padding-sm: rem(12px); -$cell-padding-md: rem(16px); -$cell-padding-lg: rem(24px); - -// The shadow size that simulates border glueth to the pinned border to make it thicker -$pinned-shadow-size: #{rem(1px)}; - -// Z-Indices -$z-grid-base: 1; -$z-grid-decoration: 2; -$z-grid-interaction: 3; -$z-grid-selection: 4; -$z-grid-edit-indicator: 5; -$z-grid-drag-ghost: 20; -$z-grid-scroll-drag: 25; -$z-grid-pinned-cell: 9999; -$z-grid-pinned-row: 10000; -$z-grid-scroll: 10001; -$z-grid-overlay: 10002; -$z-grid-loading: 10003; +@use 'variables' as *; @include layer(base) { @include scale-in-ver-center(); @@ -2792,6 +2758,10 @@ $z-grid-loading: 10003; .igx-pivot-grid-row-filler__wrapper { .igx-grid-thead__wrapper { height: 100%; + // This wrapper only reuses header styles for visual consistency in + // the empty space below the last row - it isn't an actual header, + // so it shouldn't carry the thead/tbody separator border. + border-bottom: none; .igx-grid-th { height: 100%; diff --git a/projects/igniteui-angular/grids/themes/_variables.scss b/projects/igniteui-angular/grids/themes/_variables.scss new file mode 100644 index 00000000000..15422c570b7 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/_variables.scss @@ -0,0 +1,43 @@ +//// +/// @group grids +/// @access private +//// + +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/grid' as *; + +$theme: digest-schema($material-grid); + +$cell-font-size: rem(13px); +$cell-line-height: rem(16px); +$cell-editing-outline-width: rem(1px); +$grid-header-border-color: var(--_grid-header-border-color, hsla(from var-get($theme, 'header-border-color') h s l / 0.38)); +$grid-action-border-color: var(--_grid-action-border-color, hsla(from var-get($theme, 'action-border-color') h s l / 0.38)); +$grid-header-border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') $grid-header-border-color; +$grid-row-border: var-get($theme, 'row-border-width') var-get($theme, 'row-border-style') var-get($theme, 'row-border-color'); +$grid-pinned-border: var-get($theme, 'pinned-border-width') var-get($theme, 'pinned-border-style') var-get($theme, 'pinned-border-color'); +$grid-scrollbar-borders: rem(1px) solid var(--ig-grid-summary-border-color, var(--row-border-color)); +$grid-body-column-border-odd: var-get($theme, 'header-border-width') solid var-get($theme, 'body-column-border-color-odd'); +$grid-body-column-border-even: var-get($theme, 'header-border-width') solid var-get($theme, 'body-column-border-color-even'); +$grid-active-state-border: var-get($theme, 'cell-active-border-width') var-get($theme, 'active-state-border-style') var-get($theme, 'cell-active-border-color'); +$cell-padding-sm: rem(12px); +$cell-padding-md: rem(16px); +$cell-padding-lg: rem(24px); + +// The shadow size that simulates border glueth to the pinned border to make it thicker +$pinned-shadow-size: #{rem(1px)}; + +// Z-Indices +$z-grid-base: 1; +$z-grid-decoration: 2; +$z-grid-interaction: 3; +$z-grid-selection: 4; +$z-grid-edit-indicator: 5; +$z-grid-drag-ghost: 20; +$z-grid-scroll-drag: 25; +$z-grid-pinned-cell: 9999; +$z-grid-pinned-row: 10000; +$z-grid-scroll: 10001; +$z-grid-overlay: 10002; +$z-grid-loading: 10003; From 81878f90c2c53bdeee1307940b52897699fd9b01 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 11 Sep 2026 13:20:21 +0000 Subject: [PATCH 2/2] fix(pivot-grid): use host metadata for static class Co-authored-by: simeonoff <4118303+simeonoff@users.noreply.github.com> --- .../grids/pivot-grid/src/pivot-grid.component.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts index 421c78c7c25..542492d7e30 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts @@ -206,6 +206,7 @@ export interface IPivotRecordTemplateContext { selector: 'igx-pivot-grid', templateUrl: 'pivot-grid.component.html', styleUrl: 'pivot-grid.component.css', + host: { 'class': 'igx-grid--pivot' }, encapsulation: ViewEncapsulation.None, providers: [ IgxGridCRUDService, @@ -461,12 +462,6 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni @HostBinding('attr.role') public role = 'grid'; - /** - * @hidden @internal - */ - @HostBinding('class.igx-grid--pivot') - protected readonly pivotClass = true; - /** * Enables a super compact theme for the component. * @remarks