Skip to content

Commit 3e9bd1e

Browse files
authored
fix(multiple): fix disabled label style (#25181)
MDC does not set the disabled text color on the label for the checkbox, radio, or switch. This change applies it on the Angular Material side.
1 parent 09129a5 commit 3e9bd1e

File tree

3 files changed

+18
-0
lines changed

3 files changed

+18
-0
lines changed

src/material-experimental/mdc-checkbox/_checkbox-theme.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
$primary: mat.get-color-from-palette(map.get($config, primary));
3333
$accent: mat.get-color-from-palette(map.get($config, accent));
3434
$warn: mat.get-color-from-palette(map.get($config, warn));
35+
$foreground: map.get($config, foreground);
3536

3637
@include mat.private-using-mdc-theme($config) {
3738
.mat-mdc-checkbox {
@@ -64,6 +65,11 @@
6465
@include _selected-ripple-colors($warn, error);
6566
}
6667
}
68+
69+
.mat-mdc-checkbox-disabled label {
70+
// MDC should set the disabled color on the label, but doesn't, so we do it here instead.
71+
color: mat.get-color-from-palette($foreground, disabled-text);
72+
}
6773
}
6874
}
6975

src/material-experimental/mdc-radio/_radio-theme.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
$primary: mat.get-color-from-palette(map.get($config, primary));
2222
$accent: mat.get-color-from-palette(map.get($config, accent));
2323
$warn: mat.get-color-from-palette(map.get($config, warn));
24+
$foreground: map.get($config, foreground);
2425

2526
@include mat.private-using-mdc-theme($config) {
2627
$on-surface: rgba(mdc-theme-color.$on-surface, 0.54);
@@ -46,6 +47,11 @@
4647

4748
--mat-mdc-radio-ripple-color: #{mdc-theme-color.prop-value(on-surface)};
4849

50+
// MDC should set the disabled color on the label, but doesn't, so we do it here instead.
51+
.mdc-radio--disabled + label {
52+
color: mat.get-color-from-palette($foreground, disabled-text);
53+
}
54+
4955
&.mat-primary {
5056
@include _color-palette($primary);
5157
}

src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@
7373
$accent: mat.get-color-from-palette(map.get($config, accent));
7474
$warn: mat.get-color-from-palette(map.get($config, warn));
7575
$is-dark: map.get($config, is-dark);
76+
$foreground: map.get($config, foreground);
7677

7778
@include mat.private-using-mdc-theme($config) {
7879
// MDC's switch doesn't support a `color` property. We add support
@@ -81,6 +82,11 @@
8182
@include mdc-form-field.core-styles($query: mat.$private-mdc-theme-styles-query);
8283
@include mdc-switch-theme.theme(_get-theme-base-map($is-dark));
8384

85+
// MDC should set the disabled color on the label, but doesn't, so we do it here instead.
86+
.mdc-switch--disabled + label {
87+
color: mat.get-color-from-palette($foreground, disabled-text);
88+
}
89+
8490
&.mat-primary {
8591
@include mdc-switch-theme.theme(_get-theme-color-map($primary));
8692
}

0 commit comments

Comments
 (0)