Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit 6ffed49

Browse files
kfranqueirokfranqueiro
authored
fix(button): Restore order of disabled styles (#1176)
1 parent 3a24bca commit 6ffed49

File tree

2 files changed

+63
-51
lines changed

2 files changed

+63
-51
lines changed

‎demos/button.html

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -95,42 +95,52 @@
9595
<section class="demo-wrapper">
9696
<div class="mdc-form-field">
9797
<div class="mdc-checkbox">
98-
<input type="checkbox" class="mdc-checkbox__native-control" id="toggle-dark" aria-labelledby="toggle-dark-label" />
98+
<input type="checkbox" class="mdc-checkbox__native-control" id="toggle-dark" aria-labelledby="toggle-dark-label">
9999
<div class="mdc-checkbox__background">
100100
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
101-
<path class="mdc-checkbox__checkmark__path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
101+
<path class="mdc-checkbox__checkmark__path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59">
102102
</svg>
103103
<div class="mdc-checkbox__mixedmark"></div>
104104
</div>
105105
</div>
106106
<label for="toggle-dark" id="toggle-dark-label">Dark Theme</label>
107107
</div>
108108

109+
<div class="mdc-form-field">
110+
<div class="mdc-checkbox">
111+
<input type="checkbox" class="mdc-checkbox__native-control" id="toggle-disabled" aria-labelledby="toggle-disabled-label">
112+
<div class="mdc-checkbox__background">
113+
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
114+
<path class="mdc-checkbox__checkmark__path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59">
115+
</svg>
116+
<div class="mdc-checkbox__mixedmark"></div>
117+
</div>
118+
</div>
119+
<label for="toggle-disabled" id="toggle-disabled-label">Disable buttons (excluding links)</label>
120+
</div>
121+
109122
<h1 class="mdc-typography--display2">Ripple Enabled</h1>
110123
<fieldset>
111124
<legend class="mdc-typography--title">Text Button</legend>
112125
<div>
113126
<button class="mdc-button">
114127
Baseline
115128
</button>
116-
<a href="javascript:void(0)" class="mdc-button">
117-
Link
118-
</a>
119129
<button class="mdc-button mdc-button--compact">
120130
Compact
121131
</button>
122132
<button class="mdc-button mdc-button--dense">
123133
Dense
124134
</button>
125-
<button disabled class="mdc-button">
126-
Disabled
127-
</button>
128135
<button class="mdc-button mdc-button--primary">
129136
Primary
130137
</button>
131138
<button class="mdc-button mdc-button--accent">
132139
Accent
133140
</button>
141+
<a href="javascript:void(0)" class="mdc-button">
142+
Link
143+
</a>
134144
</div>
135145
</fieldset>
136146

@@ -140,24 +150,21 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
140150
<button class="mdc-button mdc-button--raised">
141151
Baseline
142152
</button>
143-
<a href="javascript:void(0)" class="mdc-button mdc-button--raised">
144-
Link
145-
</a>
146153
<button class="mdc-button mdc-button--raised mdc-button--compact">
147154
Compact
148155
</button>
149156
<button class="mdc-button mdc-button--raised mdc-button--dense">
150157
Dense
151158
</button>
152-
<button disabled class="mdc-button mdc-button--raised">
153-
Disabled
154-
</button>
155159
<button class="mdc-button mdc-button--raised mdc-button--primary">
156160
Primary
157161
</button>
158162
<button class="mdc-button mdc-button--raised mdc-button--accent">
159163
Accent
160164
</button>
165+
<a href="javascript:void(0)" class="mdc-button mdc-button--raised">
166+
Link
167+
</a>
161168
</div>
162169
</fieldset>
163170

@@ -168,24 +175,21 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
168175
<button class="mdc-button" data-demo-no-js>
169176
Baseline
170177
</button>
171-
<a href="javascript:void(0)" class="mdc-button" data-demo-no-js>
172-
Link
173-
</a>
174178
<button class="mdc-button mdc-button--compact" data-demo-no-js>
175179
Compact
176180
</button>
177181
<button class="mdc-button mdc-button--dense" data-demo-no-js>
178182
Dense
179183
</button>
180-
<button disabled class="mdc-button" data-demo-no-js>
181-
Disabled
182-
</button>
183184
<button class="mdc-button mdc-button--primary" data-demo-no-js>
184185
Primary
185186
</button>
186187
<button class="mdc-button mdc-button--accent" data-demo-no-js>
187188
Accent
188189
</button>
190+
<a href="javascript:void(0)" class="mdc-button" data-demo-no-js>
191+
Link
192+
</a>
189193
</div>
190194
</fieldset>
191195

@@ -195,24 +199,21 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
195199
<button class="mdc-button mdc-button--raised" data-demo-no-js>
196200
Baseline
197201
</button>
198-
<a href="javascript:void(0)" class="mdc-button mdc-button--raised" data-demo-no-js>
199-
Link
200-
</a>
201202
<button class="mdc-button mdc-button--raised mdc-button--compact" data-demo-no-js>
202203
Compact
203204
</button>
204205
<button class="mdc-button mdc-button--raised mdc-button--dense" data-demo-no-js>
205206
Dense
206207
</button>
207-
<button disabled class="mdc-button mdc-button--raised" data-demo-no-js>
208-
Disabled
209-
</button>
210208
<button class="mdc-button mdc-button--raised mdc-button--primary" data-demo-no-js>
211209
Primary
212210
</button>
213211
<button class="mdc-button mdc-button--raised mdc-button--accent" data-demo-no-js>
214212
Accent
215213
</button>
214+
<a href="javascript:void(0)" class="mdc-button mdc-button--raised" data-demo-no-js>
215+
Link
216+
</a>
216217
</div>
217218
</fieldset>
218219
</section>
@@ -247,6 +248,11 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
247248
demoWrapper.classList.remove('mdc-theme--dark');
248249
}
249250
});
251+
252+
document.getElementById('toggle-disabled').addEventListener('change', function () {
253+
var isDisabled = this.checked;
254+
[].slice.call(document.querySelectorAll('button')).forEach(button => button.disabled = isDisabled);
255+
});
250256
})();
251257
</script>
252258
</body>

‎packages/mdc-button/mdc-button.scss

Lines changed: 31 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -62,17 +62,6 @@
6262
-webkit-tap-highlight-color: rgba(black, .3);
6363
}
6464

65-
fieldset:disabled &,
66-
&:disabled {
67-
color: rgba(black, .38);
68-
cursor: default;
69-
pointer-events: none;
70-
71-
@include mdc-theme-dark(".mdc-button") {
72-
@include mdc-theme-prop(color, text-disabled-on-dark);
73-
}
74-
}
75-
7665
@include mdc-theme-dark(".mdc-button") {
7766
@include mdc-ripple-base;
7867
@include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .16));
@@ -104,20 +93,6 @@
10493
@include mdc-elevation(8);
10594
}
10695

107-
fieldset:disabled &,
108-
&:disabled {
109-
@include mdc-elevation(0);
110-
@include mdc-theme-prop(color, text-primary-on-dark);
111-
112-
background-color: rgba(black, .15);
113-
114-
@include mdc-theme-dark(".mdc-button") {
115-
@include mdc-theme-prop(color, text-disabled-on-dark);
116-
117-
background-color: rgba(255, 255, 255, .15);
118-
}
119-
}
120-
12196
@include mdc-theme-dark(".mdc-button") {
12297
@include mdc-ripple-base;
12398
@include mdc-ripple-bg((pseudo: "::before", base-color: black, opacity: .32));
@@ -174,4 +149,35 @@
174149
}
175150
}
176151
}
152+
153+
// Disabled button styles need to be last to ensure they override other primary/accent/dark styles
154+
155+
.mdc-button {
156+
fieldset:disabled &,
157+
&:disabled {
158+
color: rgba(black, .38);
159+
cursor: default;
160+
pointer-events: none;
161+
162+
@include mdc-theme-dark(".mdc-button") {
163+
@include mdc-theme-prop(color, text-disabled-on-dark);
164+
}
165+
}
166+
}
167+
168+
.mdc-button--raised {
169+
fieldset:disabled &,
170+
&:disabled {
171+
@include mdc-elevation(0);
172+
@include mdc-theme-prop(color, text-primary-on-dark);
173+
174+
background-color: rgba(black, .15);
175+
176+
@include mdc-theme-dark(".mdc-button") {
177+
@include mdc-theme-prop(color, text-disabled-on-dark);
178+
179+
background-color: rgba(255, 255, 255, .15);
180+
}
181+
}
182+
}
177183
// postcss-bem-linter: end

0 commit comments

Comments
 (0)