refactor(grids): fix styling for pinned column border

CHANGELOG.md

@@ -20,6 +20,7 @@ All notable changes for each version of this project will be documented in this
 
 - **Theming** - The standard scrollbar properties expose only two colors and three width keywords, so most `scrollbar-theme` properties no longer have any effect. `$sb-thumb-bg-color` and `$sb-track-bg-color` continue to work. The following have become no-ops: `$sb-thumb-bg-color-hover`, `$sb-track-bg-color-hover`, `$sb-thumb-min-height`, `$sb-thumb-border-color`, `$sb-thumb-border-size`, `$sb-thumb-border-radius`, `$sb-track-border-color`, `$sb-track-border-size`, `$sb-corner-bg`, `$sb-corner-border-color` and `$sb-corner-border-size`. They remain valid arguments to `scrollbar-theme()`, so existing themes keep compiling, but the values are ignored. The `ng update` migration for 22.2.0 removes these arguments from existing `scrollbar-theme(...)` calls automatically.
 - **Theming** - `$sb-size` no longer sets the scrollbar thickness. `scrollbar-width` accepts only `auto`, `thin` or `none`, so a length cannot drive it. The migration removes `$sb-size` along with the properties above; set `--sb-width: thin` on the scope that declares the scrollbar tokens, or `scrollbar-width: thin` directly on the scrolling element, where a thinner scrollbar is required.
+- **Theming** - The `grid-summary-theme` properties `$border-width` and `$pinned-border-width` were removed, along with their `--ig-grid-summary-border-width` and `--ig-grid-summary-pinned-border-width` CSS custom properties. A summary cell takes its border width from the grid itself - `grid-theme`'s `$header-border-width` for the cell separator and `$pinned-border-width` for the pinned border - so a summary border can no longer be thicker or thinner than the column border it continues. The border styles and colors stay themable: `$border-style`, `$pinned-border-style`, `$border-color` and `$pinned-border-color`, and their CSS custom properties, are unchanged. The `ng update` migration for 22.2.0 drops the removed arguments from existing `grid-summary-theme(...)` calls and renames the CSS custom properties to the grid ones that now drive them - note that those grid properties style the grid's own borders too, so review the result where a summary-only width was set.
 
 ### Behavioral Changes
 

package.json

@@ -86,7 +86,7 @@
     "express": "^5.2.1",
     "fflate": "^0.8.1",
     "igniteui-i18n-core": "^1.0.2",
-    "igniteui-theming": "^28.1.1",
+    "igniteui-theming": "^29.0.0",
     "igniteui-trial-watermark": "^3.1.0",
     "jspdf": "^4.2.1",
     "lodash-es": "^4.17.21",

projects/igniteui-angular/grids/core/src/summaries/themes/_base.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use 'igniteui-theming/sass/bem' as *;
 @use 'igniteui-theming/sass/themes' as *;
 @use 'igniteui-theming/sass/typography' as *;
@@ -8,11 +7,6 @@
 $_theme: digest-schema($material-grid-summary);
 
 @include layer(base) {
-	$cell-pin: (
-		style: var-get($_theme, 'pinned-border-width') var-get($_theme, 'pinned-border-style'),
-		color: var-get($_theme, 'pinned-border-color')
-	);
-
 	@include b(igx-grid-summary) {
 		position: relative;
 		display: flex;
@@ -24,7 +18,10 @@ $_theme: digest-schema($material-grid-summary);
 		overflow: hidden;
 		outline-style: none;
 
-		border-inline-end: var-get($_theme, 'border-width') var-get($_theme, 'border-style') var-get($_theme, 'border-color');
+		// The border width is the grid's - a summary cell must never be thicker or
+		// thinner than the grid's column borders. The style and the color stay
+		// themable through the grid-summary schema.
+		border-inline-end: var(--_summary-column-border-width) var-get($_theme, 'border-style') var-get($_theme, 'border-color');
 
 		@include e(item) {
 			display: flex;
@@ -67,40 +64,26 @@ $_theme: digest-schema($material-grid-summary);
 			}
 		}
 
+		// Inner edge of the end-pinned area
 		@include m(pinned-first) {
-			border-inline-start: map.get($cell-pin, 'style') map.get($cell-pin, 'color');
-
-			&:dir(ltr) {
-				border-inline-start: map.get($cell-pin, 'style') map.get($cell-pin, 'color');
-			}
-
-			&:dir(rtl) {
-				border-inline-end: map.get($cell-pin, 'style') map.get($cell-pin, 'color');
-			}
+			border-inline-start: var(--_summary-pinned-border-width) var-get($_theme, 'pinned-border-style') var-get($_theme, 'pinned-border-color');
 
 			@media print {
-				border-inline-start: map.get($cell-pin, 'style') #999;
+				border-inline-start: var(--_summary-pinned-border-width) var-get($_theme, 'pinned-border-style') #999;
 			}
 		}
 
+		// Inner edge of the start-pinned area
 		@include m(pinned-last) {
-			border-inline-end: map.get($cell-pin, 'style') map.get($cell-pin, 'color');
+			border-inline-end: var(--_summary-pinned-border-width) var-get($_theme, 'pinned-border-style') var-get($_theme, 'pinned-border-color');
 
 			&::after {
 				inset-inline-start: rem(1px);
 			}
 
 			@media print {
-				border-inline-end: map.get($cell-pin, 'style') #999;
+				border-inline-end: var(--_summary-pinned-border-width) var-get($_theme, 'pinned-border-style') #999;
 			}
-
-			// &:dir(ltr) {
-			// 	box-shadow: inset rem(-1px) 0 0 0 var-get($_theme, 'pinned-border-color');
-			// }
-
-			// &:dir(rtl) {
-			// 	box-shadow: inset rem(1px) 0 0 0 var-get($_theme, 'pinned-border-color');
-			// }
 		}
 
 		@include m(fw) {

projects/igniteui-angular/grids/core/src/summaries/themes/shared/_indigo.scss

@@ -7,8 +7,8 @@ $_theme: digest-schema($indigo-grid-summary);
 
 @include themed-block(igx-grid-summary, indigo) {
     padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
-    border-top: var-get($_theme, 'border-width') var-get($_theme, 'border-style') var-get($_theme, 'border-color');
-    
+    border-top: var(--_summary-column-border-width) var-get($_theme, 'border-style') var-get($_theme, 'border-color');
+
     @include e(item) {
         min-height: sizable(rem(24px), rem(30px), rem(36px));
         font-size: initial;

projects/igniteui-angular/grids/themes/_base.scss

@@ -17,6 +17,7 @@ $grid-header-border-color: var(--_grid-header-border-color, hsla(from var-get($t
 $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');
@@ -253,6 +254,13 @@ $z-grid-loading: 10003;
 
         --_grid-head-font-size: #{rem(12px)};
 
+        // Border widths handed down to the nested igx-grid-summary cells. Their own
+        // token scope shadows the grid's --pinned-border-width, and a summary border
+        // must never be thicker or thinner than the column border it continues, so
+        // the grid-summary width tokens are deprecated and never consulted.
+        --_summary-column-border-width: #{var-get($theme, 'header-border-width')};
+        --_summary-pinned-border-width: #{var-get($theme, 'pinned-border-width')};
+
         // Core grid structure
         position: relative;
         display: grid;
@@ -360,12 +368,12 @@ $z-grid-loading: 10003;
 
         // Scroll start section - a pinned column always takes precedence with a thicker border
         @include e(scroll-start, $m: pinned) {
-            border-inline-end: rem(2px) solid var(--ig-grid-summary-pinned-border-color, var(--pinned-border-color));
+            border-inline-end: var-get($theme, 'pinned-border-width') var-get($theme, 'pinned-border-style') var-get($theme, 'pinned-border-color');
         }
 
         @include e(scroll-end) {
             background: var(--_grid-background, var-get($theme, 'content-background'));
-            border-inline-start: var-get($theme, 'pinned-border-width') solid var(--ig-grid-summary-pinned-border-color, var(--pinned-border-color));
+            border-inline-start: var-get($theme, 'pinned-border-width') var-get($theme, 'pinned-border-style') var-get($theme, 'pinned-border-color');
         }
 
         // Scroll main section
@@ -746,7 +754,7 @@ $z-grid-loading: 10003;
 
         // First pinned column (left border)
         @include e(td, $m: pinned-first) {
-            border-inline-start: var-get($theme, 'pinned-border-width') var-get($theme, 'pinned-border-style') var-get($theme, 'pinned-border-color');
+            border-inline-start: $grid-pinned-border;
 
             &::after {
                 width: calc(100% - $pinned-shadow-size);
@@ -757,7 +765,7 @@ $z-grid-loading: 10003;
 
         // Last pinned column (right border)
         @include e(td, $m: pinned-last) {
-            border-inline-end: var-get($theme, 'pinned-border-width') var-get($theme, 'pinned-border-style') var-get($theme, 'pinned-border-color');
+            border-inline-end: $grid-pinned-border;
         }
 
         // Pinned cell when selected
@@ -1923,7 +1931,7 @@ $z-grid-loading: 10003;
         @include e(summaries-patch) {
             position: relative;
             background: inherit;
-            border-inline-end: var(--ig-grid-summary-border-width, rem(1px))
+            border-inline-end: var-get($theme, 'header-border-width')
             var(--ig-grid-summary-border-style, solid)
             var(--ig-grid-summary-border-color, $grid-action-border-color);
             z-index: $z-grid-base;
@@ -2371,36 +2379,13 @@ $z-grid-loading: 10003;
             }
         }
 
-        // Pinned header (first pinned column)
         @include m(pinned-first) {
-            border-inline-start: var-get($theme, 'pinned-border-width') var-get($theme, 'pinned-border-style');
-
-            &:dir(ltr) {
-                border-inline-start-color: var-get($theme, 'pinned-border-color');
-                border-inline-end: none;
-            }
-
-            &:dir(rtl) {
-                border-inline-end-color: var-get($theme, 'pinned-border-color');
-                border-inline-start: none;
-            }
+            border-inline-start: $grid-pinned-border;
+            border-inline-end: none;
         }
 
-        // Pinned header (last pinned column)
         @include m(pinned-last) {
-            border-inline-end: var-get($theme, 'pinned-border-width') var-get($theme, 'pinned-border-style') var-get($theme, 'pinned-border-color');
-
-            &:dir(ltr) {
-                border-inline-end-color: var-get($theme, 'header-border-color');
-                border-inline-end-width: var-get($theme, 'pinned-border-width');
-                border-inline-end-style: var-get($theme, 'pinned-border-style');
-            }
-
-            &:dir(rtl) {
-                border-inline-start-color: var-get($theme, 'header-border-color');
-                border-inline-start-width: var-get($theme, 'pinned-border-width');
-                border-inline-start-style: var-get($theme, 'pinned-border-style');
-            }
+            border-inline-end: $grid-pinned-border;
         }
 
         @include m(selected) {
@@ -2574,6 +2559,20 @@ $z-grid-loading: 10003;
             border-block-end: $grid-header-border;
             border-inline-end: $grid-header-border;
             height: var(--header-size);
+
+            // The title cell of a pinned column group sits on the edge of the pinned
+            // area and carries the same pinned modifiers as a leaf header. Those are
+            // declared for .igx-grid-th--pinned-* earlier in this layer at the same
+            // specificity, so the pinned border has to be re-asserted here to win over
+            // the plain header border above - otherwise the pinned border stops at the
+            // group title and only continues from the leaf header down.
+            &.igx-grid-th--pinned-last {
+                border-inline-end: $grid-pinned-border;
+            }
+
+            &.igx-grid-th--pinned-first {
+                border-inline-start: $grid-pinned-border;
+            }
         }
 
         // Header group (contains multiple columns)

projects/igniteui-angular/migrations/migration-collection.json

@@ -314,6 +314,11 @@
             "version": "22.2.0",
             "description": "Removes scrollbar-theme properties with no effect under the standard scrollbar properties",
             "factory": "./update-22_2_0"
+        },
+        "migration-62": {
+            "version": "22.2.0",
+            "description": "Removes the grid-summary border width properties now driven by the grid's own borders",
+            "factory": "./update-22_2_0_grid-summary-borders"
         }
     }
 }

projects/igniteui-angular/migrations/update-22_2_0_grid-summary-borders/changes/theme-changes.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "../../common/schema/theme-changes.schema.json",
+  "changes": [
+    {
+      "name": "$border-width",
+      "remove": true,
+      "owner": "grid-summary-theme",
+      "type": "property"
+    },
+    {
+      "name": "$pinned-border-width",
+      "remove": true,
+      "owner": "grid-summary-theme",
+      "type": "property"
+    }
+  ]
+}

projects/igniteui-angular/migrations/update-22_2_0_grid-summary-borders/index.spec.ts

@@ -0,0 +1,88 @@
+import * as path from 'path';
+
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing/index.js';
+import { setupTestTree } from '../common/setup.spec';
+
+const version = '22.2.0';
+
+describe(`Update to ${version}`, () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+
+    beforeEach(() => {
+        appTree = setupTestTree();
+    });
+
+    const migrationName = 'migration-62';
+
+    it('should remove the border width properties from grid-summary-theme', async () => {
+        const testFilePath = `/testSrc/appPrefix/component/test.component.scss`;
+
+        appTree.create(
+            testFilePath,
+            `$my-summary-theme: grid-summary-theme(
+                $background-color: red,
+                $border-width: 4px,
+                $border-style: dashed,
+                $border-color: blue,
+                $pinned-border-width: 6px,
+                $pinned-border-style: dotted,
+                $pinned-border-color: green
+            );`
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+        expect(tree.readContent(testFilePath)).toEqual(
+            `$my-summary-theme: grid-summary-theme(
+                $background-color: red,
+                $border-style: dashed,
+                $border-color: blue,
+                $pinned-border-style: dotted,
+                $pinned-border-color: green
+            );`
+        );
+    });
+
+    it('should rename the grid-summary border width CSS custom properties and keep the styles', async () => {
+        const testFilePath = `/testSrc/appPrefix/component/test.component.scss`;
+
+        appTree.create(
+            testFilePath,
+            `igx-grid {
+                --ig-grid-summary-border-width: 4px;
+                --ig-grid-summary-border-style: dashed;
+                --ig-grid-summary-pinned-border-width: 6px;
+                --ig-grid-summary-pinned-border-style: dotted;
+                --ig-grid-summary-pinned-border-color: green;
+            }`
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+        expect(tree.readContent(testFilePath)).toEqual(
+            `igx-grid {
+                --ig-grid-header-border-width: 4px;
+                --ig-grid-summary-border-style: dashed;
+                --ig-grid-pinned-border-width: 6px;
+                --ig-grid-summary-pinned-border-style: dotted;
+                --ig-grid-summary-pinned-border-color: green;
+            }`
+        );
+    });
+
+    it('should rename the CSS custom properties in plain CSS files and keep the --igx- prefix', async () => {
+        const testFilePath = `/testSrc/appPrefix/component/test.component.css`;
+
+        appTree.create(
+            testFilePath,
+            `igx-grid { --igx-grid-summary-pinned-border-width: 6px; }`
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+        expect(tree.readContent(testFilePath)).toEqual(
+            `igx-grid { --igx-grid-pinned-border-width: 6px; }`
+        );
+    });
+});