Skip to content

Commit be849d3

Browse files
SisIvanovaSisIvanova
authored
refactor(switch): remove invalid state properties (#15652)
1 parent 8dcf895 commit be849d3

File tree

9 files changed

+105
-153
lines changed

9 files changed

+105
-153
lines changed

‎package-lock.json‎

Lines changed: 4 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
"@types/source-map": "0.5.2",
7575
"express": "^4.21.1",
7676
"fflate": "^0.8.1",
77-
"igniteui-theming": "^17.0.0",
77+
"igniteui-theming": "^17.1.0",
7878
"igniteui-trial-watermark": "^3.0.2",
7979
"lodash-es": "^4.17.21",
8080
"rxjs": "^7.8.0",

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -221,6 +221,11 @@
221221
"version": "19.1.4",
222222
"description": "Updates Ignite UI for Angular from v19.1.0 to v19.1.4",
223223
"factory": "./update-19_1_4"
224+
},
225+
"migration-45": {
226+
"version": "19.1.6",
227+
"description": "Updates Ignite UI for Angular from v19.1.4 to v19.1.6",
228+
"factory": "./update-19_1_6"
224229
}
225230
}
226231
}

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"$schema": "../../common/schema/theme-changes.schema.json",
3+
"changes": [
4+
{
5+
"name": "$label-invalid-color",
6+
"remove": true,
7+
"owner": "switch-theme",
8+
"type": "property"
9+
},
10+
{
11+
"name": "$track-error-color",
12+
"remove": true,
13+
"owner": "switch-theme",
14+
"type": "property"
15+
},
16+
{
17+
"name": "$thumb-on-error-color",
18+
"remove": true,
19+
"owner": "switch-theme",
20+
"type": "property"
21+
},
22+
{
23+
"name": "$error-color",
24+
"remove": true,
25+
"owner": "switch-theme",
26+
"type": "property"
27+
},
28+
{
29+
"name": "$error-color-hover",
30+
"remove": true,
31+
"owner": "switch-theme",
32+
"type": "property"
33+
}
34+
]
35+
}

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import * as path from 'path';
2+
3+
import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
4+
import { setupTestTree } from '../common/setup.spec';
5+
6+
const version = '19.1.6';
7+
const themes = [
8+
'circular-theme'
9+
];
10+
const testFilePath = '/testSrc/appPrefix/component/${theme}.component.scss';
11+
12+
describe(`Update to ${version}`, () => {
13+
let appTree: UnitTestTree;
14+
const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
15+
16+
beforeEach(() => {
17+
appTree = setupTestTree();
18+
});
19+
20+
const migrationName = 'migration-45';
21+
22+
it('should remove the properties related to invalid state from the switch theme', async () => {
23+
const testFilePath = `/testSrc/appPrefix/component/test.component.scss`;
24+
25+
appTree.create(
26+
testFilePath,
27+
`$invalid-switch-theme: switch-theme(
28+
$label-color: orange,
29+
$label-invalid-color: red,
30+
$track-error-color: red,
31+
$thumb-on-error-color: darkred,
32+
$error-color: red,
33+
$error-color-hover: darkred,
34+
);`
35+
);
36+
37+
const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
38+
39+
expect(tree.readContent(testFilePath)).toEqual(
40+
`$invalid-switch-theme: switch-theme(
41+
$label-color: orange,
42+
);`
43+
);
44+
});
45+
});

‎projects/igniteui-angular/migrations/update-19_1_6/index.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import type {
2+
Rule,
3+
SchematicContext,
4+
Tree
5+
} from '@angular-devkit/schematics';
6+
import { UpdateChanges } from '../common/UpdateChanges';
7+
8+
const version = '19.1.6';
9+
10+
export default (): Rule => async (host: Tree, context: SchematicContext) => {
11+
context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
12+
const update = new UpdateChanges(__dirname, host, context);
13+
update.applyChanges();
14+
};

‎projects/igniteui-angular/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
"tslib": "^2.3.0",
7474
"igniteui-trial-watermark": "^3.0.2",
7575
"lodash-es": "^4.17.21",
76-
"igniteui-theming": "^17.0.0",
76+
"igniteui-theming": "^17.1.0",
7777
"@igniteui/material-icons-extended": "^3.1.0"
7878
},
7979
"peerDependencies": {

‎projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-component.scss‎

Lines changed: 0 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -132,56 +132,6 @@
132132
}
133133
}
134134

135-
@include m(invalid) {
136-
@include e(composite) {
137-
@extend %switch-composite--invalid !optional;
138-
}
139-
140-
&:hover {
141-
@include e(ripple) {
142-
@extend %switch-ripple--hover !optional;
143-
@extend %switch-ripple--hover-invalid !optional;
144-
}
145-
146-
@include e(composite) {
147-
@extend %switch-composite--invalid--hover !optional;
148-
}
149-
}
150-
151-
&:active {
152-
@include e(ripple) {
153-
@extend %switch-ripple--hover !optional;
154-
@extend %switch-ripple--hover-invalid !optional;
155-
@extend %switch-ripple--pressed !optional;
156-
}
157-
}
158-
159-
@include e(label) {
160-
@extend %switch-label--invalid !optional;
161-
}
162-
163-
@include e(label, $m: before) {
164-
@extend %switch-label--invalid !optional;
165-
}
166-
167-
@include e(thumb) {
168-
@extend %switch-thumb--invalid !optional;
169-
}
170-
}
171-
172-
@include mx(invalid, checked) {
173-
@include e(thumb) {
174-
@extend %switch-thumb--x--invalid !optional;
175-
}
176-
177-
&:hover {
178-
@include e(ripple) {
179-
@extend %switch-ripple--hover !optional;
180-
@extend %switch-ripple--hover-checked-invalid !optional;
181-
}
182-
}
183-
}
184-
185135
@include m(disabled) {
186136
@extend %switch-display--disabled !optional;
187137

@@ -202,26 +152,11 @@
202152
}
203153
}
204154

205-
@include mx(disabled, invalid) {
206-
@include e(thumb) {
207-
@extend %switch-thumb--disabled !optional;
208-
}
209-
}
210-
211155
@include mx(focused, checked) {
212156
@include e(ripple) {
213157
@extend %switch-ripple--focused !optional;
214158
@extend %switch-ripple--focused-checked !optional;
215159
}
216160
}
217-
218-
@include mx(focused, invalid) {
219-
@include e(ripple) {
220-
@extend %switch-ripple--focused !optional;
221-
@extend %switch-ripple--focused-invalid !optional;
222-
}
223-
224-
@extend %igx-switch--focused--invalid !optional;
225-
}
226161
}
227162
}

‎projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss‎

Lines changed: 0 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,6 @@
3939
/// @param {Color} $focus-outline-color-focused [null] - The focus outlined color for focused state.
4040
/// @param {Color} $focus-fill-color [null] - The focus fill color.
4141
/// @param {Color} $focus-fill-hover-color [null] - The focus fill color on hover.
42-
/// @param {Color} $label-invalid-color [null] - The color of the switch label in invalid state.
43-
/// @param {Color} $track-error-color [null] - The color of the track in invalid state when the switch is off.
44-
/// @param {Color} $thumb-on-error-color [null] - The color of the thumb when the switch is on and invalid.
45-
/// @param {Color} $error-color [null] - The border and fill colors in invalid state.
46-
/// @param {Color} $error-color-hover [null] - The border and fill colors in invalid state on hover.
4742
/// @requires $light-material-schema
4843
///
4944
/// @example scss Set custom track and thumb on colors
@@ -68,7 +63,6 @@
6863
$label-color: null,
6964
$label-hover-color: null,
7065
$label-disabled-color: null,
71-
$label-invalid-color: null,
7266
7367
$resting-shadow: null,
7468
$hover-shadow: null,
@@ -86,10 +80,6 @@
8680
$focus-outline-color-focused: null,
8781
$focus-fill-color: null,
8882
$focus-fill-hover-color: null,
89-
$track-error-color: null,
90-
$thumb-on-error-color: null,
91-
$error-color: null,
92-
$error-color-hover: null,
9383
) {
9484
$name: 'igx-switch';
9585
$switch-schema: ();
@@ -148,7 +138,6 @@
148138
label-color: $label-color,
149139
label-hover-color: $label-hover-color,
150140
label-disabled-color: $label-disabled-color,
151-
label-invalid-color: $label-invalid-color,
152141

153142
resting-shadow: $resting-shadow,
154143
hover-shadow: $hover-shadow,
@@ -166,10 +155,6 @@
166155
focus-outline-color-focused: $focus-outline-color-focused,
167156
focus-fill-color: $focus-fill-color,
168157
focus-fill-hover-color: $focus-fill-hover-color,
169-
track-error-color: $track-error-color,
170-
thumb-on-error-color: $thumb-on-error-color,
171-
error-color: $error-color,
172-
error-color-hover: $error-color-hover,
173158
theme: map.get($schema, '_meta', 'theme'),
174159
_meta: map.merge(if($meta, $meta, ()), (
175160
variant: map.get($schema, '_meta', 'theme'),
@@ -316,25 +301,6 @@
316301
}
317302
}
318303

319-
%switch-composite--invalid {
320-
border-color: var-get($theme, 'error-color');
321-
322-
@if $variant == 'material' {
323-
border-color: var-get($theme, 'track-error-color');
324-
background: var-get($theme, 'track-error-color');
325-
}
326-
}
327-
328-
%switch-composite--invalid--hover {
329-
@if $variant == 'fluent' {
330-
border-color: var-get($theme, 'error-color-hover');
331-
332-
%switch-thumb {
333-
background: var-get($theme, 'error-color-hover');
334-
}
335-
}
336-
}
337-
338304
%switch-composite--x {
339305
background: var-get($theme, 'track-on-color');
340306
border-color: var-get($theme, 'border-on-color');
@@ -403,14 +369,6 @@
403369
background: var-get($theme, 'thumb-on-color');
404370
}
405371

406-
%switch-thumb--invalid {
407-
background: var-get($theme, 'error-color');
408-
}
409-
410-
%switch-thumb--x--invalid {
411-
background: var-get($theme, 'thumb-on-error-color');
412-
}
413-
414372
%switch-thumb--disabled {
415373
background: var-get($theme, 'thumb-disabled-color');
416374
box-shadow: $thumb-disabled-shadow;
@@ -477,25 +435,6 @@
477435
}
478436
}
479437

480-
%igx-switch--focused--invalid {
481-
@if $variant == 'bootstrap' {
482-
%switch-composite {
483-
border-color: var-get($theme, 'error-color');
484-
box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-color-hover');
485-
}
486-
487-
%switch-thumb {
488-
background: var-get($theme, 'error-color');
489-
}
490-
}
491-
492-
@if $variant == 'indigo' {
493-
%switch-composite {
494-
box-shadow: 0 0 0 rem(3px) var-get($theme, 'error-color-hover');
495-
}
496-
}
497-
}
498-
499438
%igx-switch--focused-checked {
500439
@if $variant == 'bootstrap' {
501440
%switch-composite {
@@ -550,10 +489,6 @@
550489
background: var-get($theme, 'thumb-on-color');
551490
}
552491

553-
%switch-ripple--focused-invalid {
554-
background: var-get($theme, 'error-color-hover');
555-
}
556-
557492
%switch-label {
558493
display: inline-block;
559494
color: var-get($theme, 'label-color');
@@ -585,10 +520,6 @@
585520
color: var-get($theme, 'label-hover-color');
586521
}
587522

588-
%switch-label--invalid {
589-
color: var-get($theme, 'label-invalid-color');
590-
}
591-
592523
%switch-label--disabled {
593524
color: var-get($theme, 'label-disabled-color');
594525
}
@@ -618,18 +549,6 @@
618549
}
619550
}
620551

621-
%switch-ripple--hover-invalid {
622-
&::after {
623-
background: var-get($theme, 'error-color-hover');
624-
}
625-
}
626-
627-
%switch-ripple--hover-checked-invalid {
628-
&::after {
629-
background: var-get($theme, 'thumb-on-color');
630-
}
631-
}
632-
633552
%switch-ripple--pressed {
634553
&::after {
635554
opacity: .12;

0 commit comments

Comments
 (0)