From a4cce13fb5c67394d19586efa09d2217e7277461 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 12 Mar 2025 17:40:04 +0200 Subject: [PATCH 1/3] fix(grid-summaries): themes params not fully working Closes #15477 --- package-lock.json | 8 +-- package.json | 2 +- .../migrations/migration-collection.json | 5 ++ .../update-19_1_4/changes/theme-changes.json | 29 +++++++++++ .../migrations/update-19_1_4/index.spec.ts | 44 +++++++++++++++++ .../migrations/update-19_1_4/index.ts | 14 ++++++ projects/igniteui-angular/package.json | 2 +- .../styles/components/grid/_grid-theme.scss | 49 ++++--------------- 8 files changed, 108 insertions(+), 45 deletions(-) create mode 100644 projects/igniteui-angular/migrations/update-19_1_4/changes/theme-changes.json create mode 100644 projects/igniteui-angular/migrations/update-19_1_4/index.spec.ts create mode 100644 projects/igniteui-angular/migrations/update-19_1_4/index.ts diff --git a/package-lock.json b/package-lock.json index e25d31bd926..5373e062286 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,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-beta.1", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", @@ -12518,9 +12518,9 @@ } }, "node_modules/igniteui-theming": { - "version": "16.0.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-16.0.0.tgz", - "integrity": "sha512-YzyBwGAEbsYWFE3s+uZnHjDrbt+5duBwemV1+9M1QDH2x8uPvCOEb1Wt2Q2J7ipLHSqp2xfiPiTyFdXPW1xUdw==", + "version": "17.0.0-beta.1", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-17.0.0-beta.1.tgz", + "integrity": "sha512-kgMdiWwwtIOMos4XQuJOtakvHCfoLk+1dgIHklKJnLjRPukjPsx/hmWQEyxZI+ceC5MJjBQIlrLED6S06kQ56Q==", "license": "MIT", "peerDependencies": { "sass": "^1.69.5" diff --git a/package.json b/package.json index bef78922e00..17459d4ba87 100644 --- a/package.json +++ b/package.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-beta.1", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", diff --git a/projects/igniteui-angular/migrations/migration-collection.json b/projects/igniteui-angular/migrations/migration-collection.json index 0ad95a432b4..cb3c274feb0 100644 --- a/projects/igniteui-angular/migrations/migration-collection.json +++ b/projects/igniteui-angular/migrations/migration-collection.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" } } } diff --git a/projects/igniteui-angular/migrations/update-19_1_4/changes/theme-changes.json b/projects/igniteui-angular/migrations/update-19_1_4/changes/theme-changes.json new file mode 100644 index 00000000000..06d9f8de873 --- /dev/null +++ b/projects/igniteui-angular/migrations/update-19_1_4/changes/theme-changes.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" + } + ] + } diff --git a/projects/igniteui-angular/migrations/update-19_1_4/index.spec.ts b/projects/igniteui-angular/migrations/update-19_1_4/index.spec.ts new file mode 100644 index 00000000000..7e84f41eaaa --- /dev/null +++ b/projects/igniteui-angular/migrations/update-19_1_4/index.spec.ts @@ -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, + );` + ); + }); +}); diff --git a/projects/igniteui-angular/migrations/update-19_1_4/index.ts b/projects/igniteui-angular/migrations/update-19_1_4/index.ts new file mode 100644 index 00000000000..6590904c4ab --- /dev/null +++ b/projects/igniteui-angular/migrations/update-19_1_4/index.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(); +}; diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json index 94c7b3e87a1..ec98801dba8 100644 --- a/projects/igniteui-angular/package.json +++ b/projects/igniteui-angular/package.json @@ -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-beta.1", "@igniteui/material-icons-extended": "^3.1.0" }, "peerDependencies": { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index da3f6058f18..4596f464bdb 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -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,27 @@ %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'); - } - } %grid-summaries--body { - background: var-get($theme, 'body-summaries-background'); border-bottom: rem(1px) dashed var-get($theme, 'row-border-color'); &:last-of-type { border-bottom: none; } - %igx-grid-summary__result { - color: var-get($theme, 'body-summaries-text-color'); + .igx-grid-summary { + --background-color: var(--ig-gray-100); + --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: var-get($theme, 'summaries-patch-background'); 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 +3170,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' { From 137dc6c0d91a9edb16fd956aa354036c8d38aba6 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 13 Mar 2025 12:20:20 +0200 Subject: [PATCH 2/3] refactor(grid): update summaries theme styles --- .../src/lib/core/styles/components/grid/_grid-theme.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index 4596f464bdb..8849fbea076 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -2268,24 +2268,28 @@ display: flex; overflow: hidden; outline-style: none; + background-color: var-get($theme, 'summaries-patch-background'); } %grid-summaries--body { + --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 { - --background-color: var(--ig-gray-100); + --background-color: inherit; --result-color: #{adaptive-contrast(var(--background-color))}; } } %grid-summaries-patch { position: relative; - background: var-get($theme, 'summaries-patch-background'); + background: inherit; border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); z-index: 1; From 0fa58971c284cc6a56667b0583d294fdf141445f Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 18 Mar 2025 11:57:01 +0200 Subject: [PATCH 3/3] deps(theming): bump to latest version --- package-lock.json | 8 ++++---- package.json | 2 +- projects/igniteui-angular/package.json | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5373e062286..796dc39712a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "@types/source-map": "0.5.2", "express": "^4.21.1", "fflate": "^0.8.1", - "igniteui-theming": "^17.0.0-beta.1", + "igniteui-theming": "^17.0.0", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", @@ -12518,9 +12518,9 @@ } }, "node_modules/igniteui-theming": { - "version": "17.0.0-beta.1", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-17.0.0-beta.1.tgz", - "integrity": "sha512-kgMdiWwwtIOMos4XQuJOtakvHCfoLk+1dgIHklKJnLjRPukjPsx/hmWQEyxZI+ceC5MJjBQIlrLED6S06kQ56Q==", + "version": "17.0.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-17.0.0.tgz", + "integrity": "sha512-ktxEk5Xgq2k1Lv+A54W+MtFtlo4Jdtg2L59Pk9zJGx56upjzxuqSHJXdbnTCnbPZmx4xPYxdWkpVKylk47GPQA==", "license": "MIT", "peerDependencies": { "sass": "^1.69.5" diff --git a/package.json b/package.json index 17459d4ba87..3d284c001b2 100644 --- a/package.json +++ b/package.json @@ -74,7 +74,7 @@ "@types/source-map": "0.5.2", "express": "^4.21.1", "fflate": "^0.8.1", - "igniteui-theming": "^17.0.0-beta.1", + "igniteui-theming": "^17.0.0", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json index ec98801dba8..9910299a420 100644 --- a/projects/igniteui-angular/package.json +++ b/projects/igniteui-angular/package.json @@ -73,7 +73,7 @@ "tslib": "^2.3.0", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", - "igniteui-theming": "^17.0.0-beta.1", + "igniteui-theming": "^17.0.0", "@igniteui/material-icons-extended": "^3.1.0" }, "peerDependencies": {