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

Commit 66299b6

Browse files
allan-chenallan-chen
authored
feat(text-field): Add disabled state color mixins (#5208)
BREAKING CHANGE: Redundant mixins `mdc-text-field-textarea-fill-color`, `mdc-text-field-textarea-stroke-color`, `mdc-text-field-fullwidth-bottom-line-color` removed. Instead, use `mdc-text-field-fill-color`, `mdc-text-field-outline-color`, and `mdc-text-field-bottom-line-color` respectively to achieve the same effect.
1 parent 5850080 commit 66299b6

15 files changed

Lines changed: 1005 additions & 66 deletions

File tree

‎packages/mdc-textfield/README.md‎

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -291,49 +291,55 @@ apply these mixins with CSS selectors such as `.foo-text-field.mdc-text-field--i
291291

292292
Mixin | Description
293293
--- | ---
294-
`mdc-text-field-ink-color($color)` | Customizes the color of the text entered into the text field.
295-
`mdc-text-field-label-color($color)` | Customizes the text color of the label.
294+
`mdc-text-field-ink-color($color)` | Customizes the color of the text entered into an enabled text field.
295+
`mdc-text-field-disabled-ink-color($color)` | Customizes the color of the entered text in a disabled text field.
296+
`mdc-text-field-label-color($color)` | Customizes the text color of the label in an enabled text field.
297+
`mdc-text-field-disabled-label-color($color)` | Customizes the text color of the label in a disabled text field.
296298
`mdc-text-field-caret-color($color)` | Customizes the color of the cursor caret of the text field.
297299

298-
#### Mixins for Filled Text Field
300+
#### Mixins for Filled Text Field and Textarea
301+
302+
Mixin | Description
303+
--- | ---
304+
`mdc-text-field-fill-color($color)` | Customizes the background color of the text field or textarea when enabled.
305+
`mdc-text-field-disabled-fill-color($color)` | Customizes the background color of the text field or textarea when disabled.
306+
307+
#### Mixins for Filled Text Field Only
299308

300309
Mixin | Description
301310
--- | ---
302311
`mdc-text-field-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to boxed text field variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
303-
`mdc-text-field-fill-color($color)` | Customizes the background color of the text field.
304-
`mdc-text-field-bottom-line-color($color)` | Customizes the text field bottom line color except the outlined and textarea variants.
305-
`mdc-text-field-hover-bottom-line-color($color)` | Customizes the hover text field bottom line color except the outlined and textarea variants.
312+
`mdc-text-field-bottom-line-color($color)` | Customizes the text field bottom line color.
313+
`mdc-text-field-hover-bottom-line-color($color)` | Customizes the hover text field bottom line color.
314+
`mdc-text-field-disabled-bottom-line-color($color)` | Customizes the disabled text field bottom line color.
306315
`mdc-text-field-line-ripple-color($color)` | Customizes the color of the default line ripple of the text field.
307316
`mdc-text-field-density($density-scale)` | Sets density scale for default text field variant. Supported density scale values `-4`, `-3`, `-2`, `-1`, `0`.
308317
`mdc-text-field-height($height)` | Sets height of default text field variant.
309318

310-
#### Mixins for Outlined Text Field
319+
#### Mixins for Outlined Text Field and Textarea
320+
321+
Mixin | Description
322+
--- | ---
323+
`mdc-text-field-focused-outline-color($color)` | Customizes the outline border color when the text field or textarea is focused.
324+
`mdc-text-field-hover-outline-color($color)` | Customizes the outline border color when the text field or textarea is hovered.
325+
`mdc-text-field-disabled-outline-color($color)` | Customizes the outline border color when the text field or textarea is disabled.
326+
`mdc-text-field-outline-color($color)` | Customizes the border color of the outlined text field or textarea.
327+
328+
#### Mixins for Outlined Text Field Only
311329

312330
Mixin | Description
313331
--- | ---
314-
`mdc-text-field-focused-outline-color($color)` | Customizes the outline border color when the text field is focused.
315-
`mdc-text-field-hover-outline-color($color)` | Customizes the outline border color when the text field is hovered.
316-
`mdc-text-field-outline-color($color)` | Customizes the border color of the outlined text field.
317332
`mdc-text-field-outline-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to outlined text field variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
318333
`mdc-text-field-outlined-density($density-scale)` | Sets density scale for outlined text field (Excluding outlined text field with leading icon). Supported density scale values `-4`, `-3`, `-2`, `-1`, `0`.
319334
`mdc-text-field-outlined-height($height)` | Sets height of outlined text field variant (Excluding outlined text field with leading icon).
320335
`mdc-text-field-outlined-with-leading-icon-density($density-scale)` | Sets density scale for outlined text field with leading icon. Supported density scale values `-4`, `-3`, `-2`, `-1`, `0`.
321336
`mdc-text-field-outlined-with-leading-icon-height($height)` | Sets height of outlined text field with leading icon variant.
322337

323-
#### Mixins for Textarea
338+
#### Mixins for Textarea Only
324339

325340
Mixin | Description
326341
--- | ---
327342
`mdc-text-field-textarea-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to text area variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
328-
`mdc-text-field-textarea-fill-color($color)` | Customizes the color of the background of the textarea.
329-
`mdc-text-field-textarea-stroke-color($color)` | Customizes the color of the border of the textarea.
330-
331-
332-
#### Mixins for Text Field Fullwidth
333-
334-
Mixin | Description
335-
--- | ---
336-
`mdc-text-field-fullwidth-bottom-line-color($color)` | Customizes the fullwidth text field variant bottom line color.
337343

338344
## `MDCTextField` Properties and Methods
339345

‎packages/mdc-textfield/_mixins.scss‎

Lines changed: 120 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -201,78 +201,150 @@
201201
@include mdc-notched-outline-shape-radius($radius, $rtl-reflexive);
202202
}
203203

204+
///
205+
/// Customizes the color of the text entered into an enabled text field.
206+
/// @param {Color} $color - The desired input text color.
207+
///
204208
@mixin mdc-text-field-ink-color($color) {
205-
&:not(.mdc-text-field--disabled) {
209+
@include mdc-text-field-if-enabled_ {
206210
@include mdc-text-field-ink-color_($color);
207211
}
208212
}
209213

210-
@mixin mdc-text-field-fill-color($color) {
211-
&:not(.mdc-text-field--disabled) {
212-
@include mdc-text-field-fill-color_($color);
214+
///
215+
/// Customizes the color of the entered text in a disabled text field.
216+
/// @param {Color} $color - The desired input text color.
217+
///
218+
@mixin mdc-text-field-disabled-ink-color($color) {
219+
@include mdc-text-field-if-disabled_ {
220+
@include mdc-text-field-ink-color_($color);
213221
}
214222
}
215223

216-
@mixin mdc-text-field-textarea-stroke-color($color) {
217-
&:not(.mdc-text-field--disabled) {
218-
@include mdc-text-field-textarea-stroke-color_($color);
224+
///
225+
/// Customizes the background color of the text field or textarea when enabled.
226+
/// @param {Color} $color - The desired background color.
227+
///
228+
@mixin mdc-text-field-fill-color($color) {
229+
@include mdc-text-field-if-enabled_ {
230+
@include mdc-text-field-fill-color_($color);
219231
}
220232
}
221233

222-
@mixin mdc-text-field-textarea-fill-color($color) {
223-
&:not(.mdc-text-field--disabled) {
224-
@include mdc-text-field-textarea-fill-color_($color);
234+
///
235+
/// Customizes the background color of the text field or textarea when disabled.
236+
/// @param {Color} $color - The desired label text color.
237+
///
238+
@mixin mdc-text-field-disabled-fill-color($color) {
239+
@include mdc-text-field-if-disabled_ {
240+
@include mdc-text-field-fill-color_($color);
225241
}
226242
}
227243

228-
@mixin mdc-text-field-fullwidth-bottom-line-color($color) {
229-
&:not(.mdc-text-field--disabled) {
230-
@include mdc-text-field-fullwidth-bottom-line-color_($color);
244+
///
245+
/// Customizes the text field bottom line color for the filled variant.
246+
/// @param {Color} $color - The desired bottom line color.
247+
///
248+
@mixin mdc-text-field-bottom-line-color($color) {
249+
@include mdc-text-field-if-enabled_ {
250+
@include mdc-text-field-bottom-line-color_($color);
231251
}
232252
}
233253

234-
@mixin mdc-text-field-bottom-line-color($color) {
235-
&:not(.mdc-text-field--disabled):not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) {
254+
///
255+
/// Customizes the disabled text field bottom line color for the filled variant.
256+
/// @param {Color} $color - The desired bottom line color.
257+
///
258+
@mixin mdc-text-field-disabled-bottom-line-color($color) {
259+
@include mdc-text-field-if-disabled_ {
236260
@include mdc-text-field-bottom-line-color_($color);
237261
}
238262
}
239263

264+
///
265+
/// Customizes the hover text field bottom line color for the filled variant.
266+
/// @param {Color} $color - The desired bottom line color.
267+
///
240268
@mixin mdc-text-field-hover-bottom-line-color($color) {
241-
&:not(.mdc-text-field--disabled):not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) {
269+
@include mdc-text-field-if-enabled_ {
242270
@include mdc-text-field-hover-bottom-line-color_($color);
243271
}
244272
}
245273

274+
///
275+
/// Customizes the color of the default line ripple of the text field.
276+
/// @param {Color} $color - The desired line ripple color.
277+
///
246278
@mixin mdc-text-field-line-ripple-color($color) {
247-
&:not(.mdc-text-field--disabled) {
279+
@include mdc-text-field-if-enabled_ {
248280
@include mdc-text-field-line-ripple-color_($color);
249281
}
250282
}
251283

284+
///
285+
/// Customizes the text color of the label in an enabled text field.
286+
/// @param {Color} $color - The desired label text color.
287+
///
252288
@mixin mdc-text-field-label-color($color) {
253-
&:not(.mdc-text-field--disabled) {
289+
@include mdc-text-field-if-enabled_ {
290+
@include mdc-text-field-label-ink-color_($color);
291+
}
292+
}
293+
294+
///
295+
/// Customizes the text color of the label in a disabled text field.
296+
/// @param {Color} $color - The desired label text color.
297+
///
298+
@mixin mdc-text-field-disabled-label-color($color) {
299+
@include mdc-text-field-if-disabled_ {
254300
@include mdc-text-field-label-ink-color_($color);
255301
}
256302
}
257303

304+
///
305+
/// Customizes the border color of the outlined text field or textarea.
306+
/// @param {Color} $color - The desired outline border color.
307+
///
258308
@mixin mdc-text-field-outline-color($color) {
259-
&:not(.mdc-text-field--disabled) {
309+
@include mdc-text-field-if-enabled_ {
260310
@include mdc-notched-outline-color($color);
261311
}
262312
}
263313

314+
///
315+
/// Customizes the outline border color when the text field or textarea is hovered.
316+
/// @param {Color} $color - The desired outline border color.
317+
///
264318
@mixin mdc-text-field-hover-outline-color($color) {
265-
&:not(.mdc-text-field--disabled) {
319+
@include mdc-text-field-if-enabled_ {
266320
@include mdc-text-field-hover-outline-color_($color);
267321
}
268322
}
269323

324+
///
325+
/// Customizes the outline border color when the text field or textarea is focused.
326+
/// @param {Color} $color - The desired outline border color.
327+
///
270328
@mixin mdc-text-field-focused-outline-color($color) {
271-
&:not(.mdc-text-field--disabled) {
329+
@include mdc-text-field-if-enabled_ {
272330
@include mdc-text-field-focused-outline-color_($color);
273331
}
274332
}
275333

334+
///
335+
/// Customizes the outline border color when the text field or textarea is disabled.
336+
/// @param {Color} $color - The desired outline border color.
337+
///
338+
@mixin mdc-text-field-disabled-outline-color($color) {
339+
@include mdc-text-field-if-disabled_ {
340+
@include mdc-notched-outline-color($color);
341+
}
342+
}
343+
344+
///
345+
/// Customizes the caret color of the text field or textarea.
346+
/// @param {Color} $color - The desired caret color.
347+
///
276348
@mixin mdc-text-field-caret-color($color) {
277349
.mdc-text-field__input {
278350
@include mdc-theme-prop(caret-color, $color);
@@ -290,7 +362,6 @@
290362
@include mdc-text-field-helper-text-color_($mdc-text-field-disabled-helper-text-color);
291363
@include mdc-text-field-character-counter-color_($mdc-text-field-disabled-helper-text-color);
292364
@include mdc-text-field-icon-color_($mdc-text-field-disabled-icon);
293-
@include mdc-text-field-fullwidth-bottom-line-color_($mdc-text-field-fullwidth-bottom-line-color);
294365
@include mdc-text-field-fill-color_($mdc-text-field-disabled-background);
295366

296367
border-bottom: none;
@@ -647,6 +718,9 @@
647718

648719
// Full Width
649720
@mixin mdc-text-field-fullwidth_ {
721+
@include mdc-text-field-bottom-line-color($mdc-text-field-bottom-line-idle);
722+
@include mdc-text-field-disabled-bottom-line-color($mdc-text-field-bottom-line-idle);
723+
650724
width: 100%;
651725

652726
&:not(.mdc-text-field--textarea) {
@@ -666,14 +740,14 @@
666740
}
667741

668742
@mixin mdc-text-field-fullwidth-invalid_ {
669-
@include mdc-text-field-fullwidth-bottom-line-color($mdc-text-field-error);
743+
@include mdc-text-field-bottom-line-color($mdc-text-field-error);
670744
}
671745

672746
// Textarea
673747
@mixin mdc-text-field-textarea-disabled_ {
674748
@include mdc-text-field-outlined-disabled_;
675749
/* @alternate */
676-
@include mdc-text-field-textarea-fill-color_($mdc-textarea-disabled-background);
750+
@include mdc-text-field-fill-color_($mdc-textarea-disabled-background);
677751
}
678752

679753
@mixin mdc-text-field-textarea-invalid_ {
@@ -746,20 +820,6 @@
746820
@include mdc-theme-prop(background-color, $color);
747821
}
748822

749-
@mixin mdc-text-field-textarea-stroke-color_($color) {
750-
@include mdc-notched-outline-color($color);
751-
}
752-
753-
@mixin mdc-text-field-textarea-fill-color_($color) {
754-
@include mdc-theme-prop(background-color, $color);
755-
}
756-
757-
@mixin mdc-text-field-fullwidth-bottom-line-color_($color) {
758-
&:not(.mdc-text-field--textarea) {
759-
@include mdc-theme-prop(border-bottom-color, $color);
760-
}
761-
}
762-
763823
@mixin mdc-text-field-bottom-line-color_($color) {
764824
.mdc-text-field__input {
765825
@include mdc-theme-prop(border-bottom-color, $color);
@@ -783,3 +843,25 @@
783843
@include mdc-floating-label-ink-color($color);
784844
}
785845
}
846+
847+
// State qualifiers
848+
849+
///
850+
/// Helps style the text-field only when it's enabled.
851+
/// @access private
852+
///
853+
@mixin mdc-text-field-if-enabled_ {
854+
&:not(.mdc-text-field--disabled) {
855+
@content;
856+
}
857+
}
858+
859+
///
860+
/// Helps style the text-field only when it's disabled.
861+
/// @access private
862+
///
863+
@mixin mdc-text-field-if-disabled_ {
864+
&.mdc-text-field--disabled {
865+
@content;
866+
}
867+
}

‎packages/mdc-textfield/character-counter/README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,8 @@ CSS Class | Description
5656

5757
Mixin | Description
5858
--- | ---
59-
`mdc-text-field-character-counter-color($color)` | Customizes the color of the character counter associated with text field.
59+
`mdc-text-field-character-counter-color($color)` | Customizes the color of the character counter associated with an enabled text field.
60+
`mdc-text-field-character-disabled-counter-color($color)` | Customizes the color of the character counter associated with a disabled text field.
6061
`mdc-text-field-character-counter-position($xOffset, $yOffset)` | Positions the character counter element inside text field. Used only for textarea variant.
6162

6263
## `MDCTextFieldCharacterCounter` Properties and Methods

‎packages/mdc-textfield/character-counter/_mixins.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,26 @@
2424

2525
// Public mixins
2626

27+
///
28+
/// Customizes the color of the character counter associated with an enabled text field.
29+
/// @param {Color} $color - The desired character counter color.
30+
///
2731
@mixin mdc-text-field-character-counter-color($color) {
2832
&:not(.mdc-text-field--disabled) {
2933
@include mdc-text-field-character-counter-color_($color);
3034
}
3135
}
3236

37+
///
38+
/// Customizes the color of the character counter associated with a disabled text field.
39+
/// @param {Color} $color - The desired character counter color.
40+
///
41+
@mixin mdc-text-field-disabled-character-counter-color($color) {
42+
&.mdc-text-field--disabled {
43+
@include mdc-text-field-character-counter-color_($color);
44+
}
45+
}
46+
3347
@mixin mdc-text-field-character-counter-position($xOffset, $yOffset) {
3448
.mdc-text-field-character-counter {
3549
@include mdc-rtl-reflexive-position(right, $xOffset);

‎packages/mdc-textfield/helper-text/README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,8 @@ CSS Class | Description
8080

8181
Mixin | Description
8282
--- | ---
83-
`mdc-text-field-helper-text-color($color)` | Customizes the color of the helper text following a text-field.
83+
`mdc-text-field-helper-text-color($color)` | Customizes the color of the helper text following an enabled text-field.
84+
`mdc-text-field-disabled-helper-text-color($color)` | Customizes the color of the helper text following a disabled text-field.
8485
`mdc-text-field-helper-text-validation-color($color)` | Customizes the color of the helper text when it's used as a validation message.
8586

8687
## `MDCTextFieldHelperText` Properties and Methods

0 commit comments

Comments
 (0)