diff --git a/package-lock.json b/package-lock.json index e25d31bd926..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": "^16.0.0", + "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": "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", + "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 bef78922e00..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": "^16.0.0", + "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/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..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": "^16.0.0", + "igniteui-theming": "^17.0.0", "@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..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 @@ -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' {