fix(grid-summaries): themes params not fully working (#15531)

Closes #15477

Author: simeonoff

package-lock.json

@@ -74,7 +74,7 @@
     "@types/source-map": "0.5.2",
     "express": "^4.21.1",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^16.0.0",
+    "igniteui-theming": "^17.0.0",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.0",

package.json

@@ -216,6 +216,11 @@
             "version": "19.1.1",
             "description": "Updates Ignite UI for Angular from v19.1.0 to v19.1.1",
             "factory": "./update-19_1_1"
+        },
+        "migration-44": {
+            "version": "19.1.4",
+            "description": "Updates Ignite UI for Angular from v19.1.0 to v19.1.4",
+            "factory": "./update-19_1_4"
         }
     }
 }

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

@@ -0,0 +1,29 @@
+{
+    "$schema": "../../common/schema/theme-changes.schema.json",
+    "changes": [
+      {
+        "name": "$root-summaries-background",
+        "remove": true,
+        "owner": "grid-theme",
+        "type": "property"
+      },
+      {
+        "name": "$root-summaries-text-color",
+        "remove": true,
+        "owner": "grid-theme",
+        "type": "property"
+      },
+      {
+        "name": "$body-summaries-background",
+        "remove": true,
+        "owner": "grid-theme",
+        "type": "property"
+      },
+      {
+        "name": "$body-summaries-text-color",
+        "remove": true,
+        "owner": "grid-theme",
+        "type": "property"
+      }
+    ]
+  }

projects/igniteui-angular/migrations/update-19_1_4/changes/theme-changes.json

@@ -0,0 +1,44 @@
+import * as path from 'path';
+
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { setupTestTree } from '../common/setup.spec';
+
+const version = '19.1.4';
+const themes = [
+    'circular-theme'
+];
+const testFilePath = '/testSrc/appPrefix/component/${theme}.component.scss';
+
+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-44';
+
+    it('should remove the summaries related properties from the grid theme', async () => {
+        const testFilePath = `/testSrc/appPrefix/component/test.component.scss`;
+
+        appTree.create(
+            testFilePath,
+            `$my-grid-theme: grid-theme(
+                $header-background: orange,
+                $root-summaries-background: orange,
+                $root-summaries-text-color: black,
+                $body-summaries-background: orange,
+                $body-summaries-text-color: black,
+            );`
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+        expect(tree.readContent(testFilePath)).toEqual(
+            `$my-grid-theme: grid-theme(
+                $header-background: orange,
+            );`
+        );
+    });
+});

projects/igniteui-angular/migrations/update-19_1_4/index.spec.ts

@@ -0,0 +1,14 @@
+import type {
+    Rule,
+    SchematicContext,
+    Tree
+} from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '19.1.4';
+
+export default (): Rule => async (host: Tree, context: SchematicContext) => {
+    context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+    const update = new UpdateChanges(__dirname, host, context);
+    update.applyChanges();
+};

projects/igniteui-angular/migrations/update-19_1_4/index.ts

@@ -73,7 +73,7 @@
         "tslib": "^2.3.0",
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
-        "igniteui-theming": "^16.0.0",
+        "igniteui-theming": "^17.0.0",
         "@igniteui/material-icons-extended": "^3.1.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -90,11 +90,8 @@
 /// @param {Color} $excel-filtering-actions-foreground [null] - The text color of the excel style filtering options.
 /// @param {Color} $excel-filtering-actions-hover-foreground [null] - The text color of the excel style filtering options in hover/focus state.
 /// @param {Color} $excel-filtering-actions-disabled-foreground [null] - The text color of the excel style filtering options in disabled state.
-/// @param {Color} $tree-filtered-text-color [null] - grouping row background color on focus.
-/// @param {Color} $body-summaries-background [null] - The background color of the summary groups located the body.
-/// @param {Color} $body-summaries-text-color [null] - The text color of the summary results located the body.
-/// @param {Color} $root-summaries-background [null] - The background color of the summary groups located the footer.
-/// @param {Color} $root-summaries-text-color [null] - The text color of the summary results located the footer.
+/// @param {Color} $tree-filtered-text-color [null] - Grouping row background color on focus.
+/// @param {Color} $summaries-patch-background [null] - The leading summaries patch backround. Used in hierarchical grids.
 /// @param {Color} $row-highlight [null] - The grid row highlight indication color.
 /// @param {box-shadow} $grid-shadow [null] - The shadow of the grid.
 /// @param {box-shadow} $drag-shadow [null] - The shadow used for movable elements (ex. column headers).
@@ -204,11 +201,6 @@
     $excel-filtering-actions-hover-foreground: null,
     $excel-filtering-actions-disabled-foreground: null,
 
-    $body-summaries-background: null,
-    $body-summaries-text-color: null,
-    $root-summaries-background: null,
-    $root-summaries-text-color: null,
-
     $row-highlight: null,
     $grid-shadow: null,
     $drag-shadow: null,
@@ -217,6 +209,7 @@
     $drop-area-border-radius: null,
     $grid-border-color: null,
     $sortable-header-icon-hover-color: null,
+    $summaries-patch-background: null,
 
     $cell-selected-within-background: null,
     $cell-selected-within-text-color: null,
@@ -434,14 +427,6 @@
         $filtering-row-text-color: text-contrast(to-opaque($filtering-row-background));
     }
 
-    @if not($body-summaries-text-color) and $body-summaries-background {
-        $body-summaries-text-color: text-contrast($body-summaries-background);
-    }
-
-    @if not($root-summaries-text-color) and $root-summaries-background {
-        $root-summaries-text-color: text-contrast($root-summaries-background);
-    }
-
     @if not($grid-shadow) {
         $grid-elevation: map.get($grid-schema, 'grid-elevation');
         $grid-shadow: elevation($grid-elevation);
@@ -556,11 +541,6 @@
         tree-selected-filtered-row-text-color: $tree-selected-filtered-row-text-color,
         tree-selected-filtered-cell-text-color: $tree-selected-filtered-cell-text-color,
 
-        body-summaries-background: $body-summaries-background,
-        body-summaries-text-color: $body-summaries-text-color,
-        root-summaries-background: $root-summaries-background,
-        root-summaries-text-color: $root-summaries-text-color,
-
         row-highlight: $row-highlight,
         grid-shadow: $grid-shadow,
         drag-shadow: $drag-shadow,
@@ -569,6 +549,7 @@
         drop-area-border-radius: $drop-area-border-radius,
         sortable-header-icon-hover-color: $sortable-header-icon-hover-color,
         grid-border-color: $grid-border-color,
+        summaries-patch-background: $summaries-patch-background,
 
         cell-selected-within-background: $cell-selected-within-background,
         cell-selected-within-text-color: $cell-selected-within-text-color,
@@ -2286,37 +2267,31 @@
     %grid-summaries {
         display: flex;
         overflow: hidden;
-        background: var-get($theme, 'root-summaries-background');
         outline-style: none;
-
-        %igx-grid-summary__result {
-            color: var-get($theme, 'root-summaries-text-color');
-        }
-
+        background-color: var-get($theme, 'summaries-patch-background');
     }
 
     %grid-summaries--body {
-        background: var-get($theme, 'body-summaries-background');
+        --summaries-patch-background: var(--ig-gray-100);
+
         border-bottom: rem(1px) dashed var-get($theme, 'row-border-color');
+        background-color: var-get($theme, 'summaries-patch-background');
 
         &:last-of-type {
             border-bottom: none;
         }
 
-        %igx-grid-summary__result {
-            color: var-get($theme, 'body-summaries-text-color');
+        .igx-grid-summary {
+          --background-color: inherit;
+          --result-color: #{adaptive-contrast(var(--background-color))};
         }
     }
 
     %grid-summaries-patch {
-        @if $bootstrap-theme {
-            background: color($color: 'gray', $variant: 100);
-        } @else {
-            background: inherit;
-        }
         position: relative;
-        z-index: 1;
+        background: inherit;
         border-inline-end: rem(1px) solid var-get($theme, 'header-border-color');
+        z-index: 1;
 
         @if $variant == 'indigo' {
             border-top: rem(1px) solid var-get($theme, 'header-border-color');
@@ -3199,7 +3174,7 @@
 	    } @else {
 		    background: color($color: 'surface', $variant: 500);
 	    }
-	    
+
         box-shadow: elevation(if($variant == 'indigo', if($theme-variant == 'light', 24, 23), 24));
 
         @if $variant == 'material' or $variant == 'bootstrap' {