Skip to content

Commit 68edf42

Browse files
committed
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. (cherry picked from commit 3e9bd1e)
1 parent 7c4886c commit 68edf42

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
@@ -33,6 +33,7 @@
3333
$primary: mat.get-color-from-palette(map.get($config, primary));
3434
$accent: mat.get-color-from-palette(map.get($config, accent));
3535
$warn: mat.get-color-from-palette(map.get($config, warn));
36+
$foreground: map.get($config, foreground);
3637

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

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

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

2627
@include mdc-helpers.mat-using-mdc-theme($config) {
2728
$on-surface: rgba(mdc-theme-color.$on-surface, 0.54);
@@ -47,6 +48,11 @@
4748

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

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

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

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

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

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

0 commit comments

Comments
 (0)