Skip to content

Commit fa1bec1

Browse files
committed
fix(material-experimental/multiple): fix disabled label style
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 3f32722 commit fa1bec1

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 {
@@ -42,6 +43,11 @@
4243
),
4344
));
4445

46+
// MDC should set the disabled color on the label, but doesn't, so we do it here instead.
47+
&.mdc-checkbox--disabled label {
48+
color: mat.get-color-from-palette($foreground, disabled-text);
49+
}
50+
4551
.mdc-checkbox__ripple {
4652
background: mdc-theme-color.prop-value(on-surface);
4753
}

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)