diff --git a/projects/igniteui-angular/migrations/migration-collection.json b/projects/igniteui-angular/migrations/migration-collection.json index 1bfe7847636..bc3bf8f3377 100644 --- a/projects/igniteui-angular/migrations/migration-collection.json +++ b/projects/igniteui-angular/migrations/migration-collection.json @@ -226,6 +226,11 @@ "version": "19.2.0", "description": "Updates Ignite UI for Angular from v19.1.0 to v19.2.0", "factory": "./update-19_2_0" + }, + "migration-46": { + "version": "20.0.0", + "description": "Updates Ignite UI for Angular from v19.2.0 to v20.0.0", + "factory": "./update-20_0_0" } } } diff --git a/projects/igniteui-angular/migrations/update-20_0_0/changes/theme-changes.json b/projects/igniteui-angular/migrations/update-20_0_0/changes/theme-changes.json new file mode 100644 index 00000000000..02ea9f1db8a --- /dev/null +++ b/projects/igniteui-angular/migrations/update-20_0_0/changes/theme-changes.json @@ -0,0 +1,11 @@ +{ + "$schema": "../../common/schema/theme-changes.schema.json", + "changes": [ + { + "name": "$focus-background-color", + "remove": true, + "owner": "grid-summary-theme", + "type": "property" + } + ] +} diff --git a/projects/igniteui-angular/migrations/update-20_0_0/index.spec.ts b/projects/igniteui-angular/migrations/update-20_0_0/index.spec.ts new file mode 100644 index 00000000000..2abf40d3114 --- /dev/null +++ b/projects/igniteui-angular/migrations/update-20_0_0/index.spec.ts @@ -0,0 +1,37 @@ +import * as path from 'path'; + +import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing'; +import { setupTestTree } from '../common/setup.spec'; + +const version = '20.0.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-46'; + + it('should remove the $focus-background-color property from the grid summary theme', async () => { + const testFilePath = `/testSrc/appPrefix/component/test.component.scss`; + + appTree.create( + testFilePath, + `$my-grid-theme: grid-summary-theme( + $label-color: white, + $focus-background-color: orange, + );` + ); + + const tree = await schematicRunner.runSchematic(migrationName, {}, appTree); + + expect(tree.readContent(testFilePath)).toEqual( + `$my-grid-theme: grid-summary-theme( + $label-color: white, + );` + ); + }); +}); diff --git a/projects/igniteui-angular/migrations/update-20_0_0/index.ts b/projects/igniteui-angular/migrations/update-20_0_0/index.ts new file mode 100644 index 00000000000..e22ba9ae111 --- /dev/null +++ b/projects/igniteui-angular/migrations/update-20_0_0/index.ts @@ -0,0 +1,14 @@ +import type { + Rule, + SchematicContext, + Tree +} from '@angular-devkit/schematics'; +import { UpdateChanges } from '../common/UpdateChanges'; + +const version = '20.0.0'; + +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/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss index 294b866cbc8..3fe579c34d5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss @@ -12,7 +12,6 @@ /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. /// @param {Color} $background-color [null] - The summaries background color is inherited form igx-grid__tfoot -/// @param {Color} $focus-background-color [null] - The background color when a summary item is on focus. /// @param {Color} $label-color [null] - The summaries label color. /// @param {Color} $result-color [null] - The summaries value/result color. /// @param {Color} $border-color [null] - The summaries border color. @@ -32,7 +31,6 @@ $schema: $light-material-schema, $background-color: null, - $focus-background-color: null, $label-color: null, $result-color: null, $border-color: null, @@ -74,7 +72,6 @@ name: $name, selector: $selector, background-color: $background-color, - focus-background-color: $focus-background-color, label-color: $label-color, result-color: $result-color, border-color: $border-color, @@ -131,15 +128,6 @@ overflow: hidden; outline-style: none; - &::after { - position: absolute; - inset: 0; - } - - &:focus::after { - background: var-get($theme, 'focus-background-color'); - } - @if $variant == 'indigo' { border-top: rem(1px) solid var-get($theme, 'border-color'); }