Skip to content

Commit 59c0e76

Browse files
SisIvanovaSisIvanova
authored
refactor(switch): remove invalid state related props (#15606)
1 parent 141ca8c commit 59c0e76

File tree

4 files changed

+59
-146
lines changed

4 files changed

+59
-146
lines changed

‎projects/igniteui-angular/migrations/update-19_2_0/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_2_0/index.spec.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,4 +34,28 @@ describe(`Update to ${version}`, () => {
3434
`
3535
);
3636
});
37+
38+
it('should remove the properties related to invalid state from the switch theme', async () => {
39+
const testFilePath = `/testSrc/appPrefix/component/test.component.scss`;
40+
41+
appTree.create(
42+
testFilePath,
43+
`$invalid-switch-theme: switch-theme(
44+
$label-color: orange,
45+
$label-invalid-color: red,
46+
$track-error-color: red,
47+
$thumb-on-error-color: darkred,
48+
$error-color: red,
49+
$error-color-hover: darkred,
50+
);`
51+
);
52+
53+
const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
54+
55+
expect(tree.readContent(testFilePath)).toEqual(
56+
`$invalid-switch-theme: switch-theme(
57+
$label-color: orange,
58+
);`
59+
);
60+
});
3761
});

‎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)