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

Commit 989c516

Browse files
williamernestwilliamernest
authored
feat(text-field): Move final JS colors to mixins. Update demos (#2006)
feat(text-field): Move final JS colors to mixins. Update demos
1 parent bf653a7 commit 989c516

File tree

10 files changed

+322
-140
lines changed

10 files changed

+322
-140
lines changed

‎demos/text-field.html

Lines changed: 78 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -119,10 +119,6 @@ <h2>Full Functionality JS Component (Floating Label, Validation)</h2>
119119
<input id="alternate-colors" type="checkbox">
120120
<label for="alternate-colors">Alternate Colors</label>
121121
</div>
122-
<div>
123-
<input id="alternate-error-colors" type="checkbox">
124-
<label for="alternate-error-colors">Alternate Error Colors</label>
125-
</div>
126122
<div>
127123
<input id="use-helper-text" type="checkbox">
128124
<label for="use-helper-text">Use Helper Text</label>
@@ -168,8 +164,7 @@ <h2>Outlined Text Field</h2>
168164
</div>
169165
<div class="mdc-text-field__idle-outline"></div>
170166
</div>
171-
<p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
172-
id="name-validation-msg">
167+
<p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg">
173168
Must be at least 8 characters
174169
</p>
175170
</div>
@@ -221,7 +216,7 @@ <h2>Outlined Text Field</h2>
221216
<h2>Text Field box</h2>
222217
<div id="demo-tf-box-wrapper">
223218
<div id="tf-box-example" class="mdc-text-field mdc-text-field--box" data-demo-no-auto-js>
224-
<input required pattern=".{8,}" type="text" id="tf-box" class="mdc-text-field__input"
219+
<input type="text" id="tf-box" class="mdc-text-field__input"
225220
aria-controls="name-validation-message">
226221
<label for="tf-box" class="mdc-text-field__label">Your Name</label>
227222
<div class="mdc-text-field__bottom-line"></div>
@@ -247,6 +242,14 @@ <h2>Text Field box</h2>
247242
<input id="box-dense" type="checkbox">
248243
<label for="box-dense">Dense</label>
249244
</div>
245+
<div>
246+
<input id="box-alternate-colors" type="checkbox">
247+
<label for="box-alternate-colors">Alternate Colors</label>
248+
</div>
249+
<div>
250+
<input id="box-required" type="checkbox">
251+
<label for="box-required">Required</label>
252+
</div>
250253
<script>
251254
demoReady(function() {
252255
var tfEl = document.getElementById('tf-box-example');
@@ -274,6 +277,17 @@ <h2>Text Field box</h2>
274277
tfEl.classList[evt.target.checked ? 'add' : 'remove']('mdc-text-field--dense');
275278
tf.layout();
276279
});
280+
281+
document.getElementById('box-alternate-colors').addEventListener('change', function (evt) {
282+
var target = evt.target;
283+
tfEl.classList[target.checked ? 'add' : 'remove']('demo-text-field-custom-colors');
284+
tfEl.classList[target.checked ? 'add' : 'remove']('demo-text-field-custom-error-colors');
285+
});
286+
287+
document.getElementById('box-required').addEventListener('change', function(evt) {
288+
var target = evt.target;
289+
tfEl.querySelector('.mdc-text-field__input').required = target.checked;
290+
});
277291
});
278292
</script>
279293
</section>
@@ -346,6 +360,10 @@ <h2>Text Field - Leading/Trailing icons</h2>
346360
<input id="unclickable-leading-trailing" type="checkbox">
347361
<label for="unclickable-leading-trailing">Unclickable icons</label>
348362
</div>
363+
<div>
364+
<input id="leading-trailing-alternate-colors" type="checkbox">
365+
<label for="leading-trailing-alternate-colors">Alternate Colors</label>
366+
</div>
349367
<div>
350368
<input id="required-leading-trailing" type="checkbox">
351369
<label for="required-leading-trailing">Required and must be at least 8 characters</label>
@@ -383,6 +401,10 @@ <h2>Textarea</h2>
383401
<input id="textarea-dark-theme" type="checkbox">
384402
<label for="textarea-dark-theme">Dark Theme</label>
385403
</div>
404+
<div>
405+
<input id="textarea-alternate-colors" type="checkbox">
406+
<label for="textarea-alternate-colors">Alternate Colors</label>
407+
</div>
386408
<div>
387409
<input id="textarea-required" type="checkbox">
388410
<label for="textarea-required">Required</label>
@@ -413,6 +435,14 @@ <h2>Full-Width Text Field and Textarea</h2>
413435
<input type="checkbox" id="fullwidth-dark-theme">
414436
<label for="fullwidth-dark-theme">Dark Theme</label>
415437
</div>
438+
<div>
439+
<input id="fullwidth-required" type="checkbox">
440+
<label for="fullwidth-required">Required</label>
441+
</div>
442+
<div>
443+
<input id="fullwidth-alternate-colors" type="checkbox">
444+
<label for="fullwidth-alternate-colors">Alternate Colors</label>
445+
</div>
416446
</section>
417447
</main>
418448

@@ -447,6 +477,7 @@ <h2>Full-Width Text Field and Textarea</h2>
447477
var wrapperOutlinedTrailing = document.getElementById('demo-tf-outlined-trailing-wrapper');
448478

449479
var tfIcons = document.querySelectorAll('.mdc-text-field__icon');
480+
var tfInputs = tfIconContainer.querySelectorAll('.mdc-text-field__input');
450481

451482
document.getElementById('disable-leading-trailing').addEventListener('change', function(evt) {
452483
tfBoxLeading.disabled = evt.target.checked;
@@ -498,12 +529,26 @@ <h2>Full-Width Text Field and Textarea</h2>
498529
});
499530

500531
document.getElementById('required-leading-trailing').addEventListener('change', function(evt) {
501-
tfIconContainer.querySelectorAll('.mdc-text-field__input')
502-
.forEach(function(input) {
532+
[].slice.call(tfInputs).forEach(function(input) {
503533
input.required = evt.target.checked;
504534
input.pattern = evt.target.checked ? '.{8,}' : '.*';
505535
});
506536
});
537+
538+
document.getElementById('leading-trailing-alternate-colors').addEventListener('change', function(evt) {
539+
tfBoxLeadingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-colors');
540+
tfBoxLeadingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-error-colors');
541+
tfBoxLeading.layout();
542+
tfBoxTrailingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-colors');
543+
tfBoxTrailingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-error-colors');
544+
tfBoxTrailing.layout();
545+
tfOutlinedLeadingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-colors');
546+
tfOutlinedLeadingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-error-colors');
547+
tfOutlinedLeading.layout();
548+
tfOutlinedTrailingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-colors');
549+
tfOutlinedTrailingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-error-colors');
550+
tfOutlinedTrailing.layout();
551+
});
507552
});
508553

509554
demoReady(function() {
@@ -539,9 +584,6 @@ <h2>Full-Width Text Field and Textarea</h2>
539584
document.getElementById('alternate-colors').addEventListener('change', function (evt) {
540585
var target = evt.target;
541586
tfRoot.classList[target.checked ? 'add' : 'remove']('demo-text-field-custom-colors');
542-
});
543-
document.getElementById('alternate-error-colors').addEventListener('change', function (evt) {
544-
var target = evt.target;
545587
tfRoot.classList[target.checked ? 'add' : 'remove']('demo-text-field-custom-error-colors');
546588
});
547589
document.getElementById('use-helper-text').addEventListener('change', function(evt) {
@@ -584,9 +626,18 @@ <h2>Full-Width Text Field and Textarea</h2>
584626
var target = evt.target;
585627
section.classList[target.checked ? 'add' : 'remove']('mdc-theme--dark');
586628
});
629+
630+
document.getElementById('textarea-alternate-colors').addEventListener('change', function (evt) {
631+
var target = evt.target;
632+
tfRoot.classList[target.checked ? 'add' : 'remove']('demo-textarea');
633+
});
634+
587635
document.getElementById('textarea-required').addEventListener('change', function(evt) {
588636
var target = evt.target;
589-
tfRoot.querySelector('.mdc-text-field__input').required = target.checked;
637+
[].slice.call(tfRoot.querySelectorAll('.mdc-text-field__input'))
638+
.forEach(function(input) {
639+
input.required = target.checked;
640+
})
590641
});
591642
});
592643

@@ -615,6 +666,20 @@ <h2>Full-Width Text Field and Textarea</h2>
615666
var target = evt.target;
616667
section.classList[target.checked ? 'add' : 'remove']('mdc-theme--dark');
617668
});
669+
670+
document.getElementById('fullwidth-required').addEventListener('change', function(evt) {
671+
var target = evt.target;
672+
[].slice.call(section.querySelectorAll('.mdc-text-field__input'))
673+
.forEach(function(input) {
674+
input.required = target.checked;
675+
})
676+
});
677+
678+
document.getElementById('fullwidth-alternate-colors').addEventListener('change', function (evt) {
679+
var target = evt.target;
680+
tfRoot.classList[target.checked ? 'add' : 'remove']('demo-fullwidth-input');
681+
tfMultiRoot.classList[target.checked ? 'add' : 'remove']('demo-textarea');
682+
});
618683
});
619684
</script>
620685
</body>

‎demos/text-field.scss

Lines changed: 78 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -20,30 +20,94 @@
2020

2121
// stylelint-disable selector-class-pattern
2222
.demo-text-field-custom-colors:not(.mdc-text-field--invalid) {
23-
@include mdc-text-field-bottom-line-color(rgba(blue, .38));
24-
@include mdc-text-field-hover-bottom-line-color(rgba(blue, .6));
25-
@include mdc-text-field-focused-bottom-line-color(blue);
23+
$idle-border: rgba(blue, .38);
24+
$hover-border: rgba(blue, .6);
25+
$focused-border: rgba(blue, 1);
26+
27+
@include mdc-text-field-bottom-line-color($idle-border);
28+
@include mdc-text-field-hover-bottom-line-color($hover-border);
29+
@include mdc-text-field-focused-bottom-line-color($focused-border);
2630
@include mdc-text-field-ink-color(black);
2731
@include mdc-text-field-label-color(rgba(blue, .5));
28-
@include mdc-text-field-outline-color(rgba(blue, .38));
29-
@include mdc-text-field-hover-outline-color(rgba(blue, .6));
30-
@include mdc-text-field-focused-outline-color(rgba(blue, 1));
31-
@include mdc-text-field-helper-text-color(rgba(blue, .38));
32+
@include mdc-text-field-outline-color($idle-border);
33+
@include mdc-text-field-hover-outline-color($hover-border);
34+
@include mdc-text-field-focused-outline-color($focused-border);
35+
@include mdc-text-field-helper-text-color($idle-border);
36+
@include mdc-text-field-textarea-stroke-color($idle-border);
37+
@include mdc-text-field-icon-color($hover-border);
3238

3339
&.mdc-text-field--focused {
3440
@include mdc-text-field-label-color(rgba(blue, .87));
41+
@include mdc-text-field-icon-color($focused-border);
3542
}
3643
}
3744

38-
.demo-text-field-custom-error-colors.mdc-text-field--invalid {
39-
@include mdc-text-field-bottom-line-color(rgba(orange, .38));
40-
@include mdc-text-field-hover-bottom-line-color(rgba(orange, .6));
45+
.demo-textarea:not(.mdc-text-field--invalid) {
46+
$idle-border: rgba(blue, .38);
47+
$hover-border: rgba(blue, .6);
48+
$focused-border: rgba(blue, 1);
49+
50+
@include mdc-text-field-ink-color(black);
51+
@include mdc-text-field-label-color(rgba(blue, .5));
52+
@include mdc-text-field-textarea-stroke-color($idle-border);
53+
54+
&.mdc-text-field--focused {
55+
@include mdc-text-field-label-color(rgba(blue, .87));
56+
@include mdc-text-field-textarea-stroke-color($focused-border);
57+
}
58+
}
59+
60+
.demo-textarea.mdc-text-field--invalid {
61+
@include mdc-text-field-ink-color(orange);
62+
@include mdc-text-field-label-color(rgba(orange, .5));
63+
@include mdc-text-field-textarea-stroke-color(orange);
64+
65+
&.mdc-text-field--focused {
66+
@include mdc-text-field-label-color(rgba(orange, .87));
67+
@include mdc-text-field-textarea-stroke-color(orange);
68+
}
69+
}
70+
71+
.demo-fullwidth-input:not(.mdc-text-field--invalid) {
72+
@include mdc-text-field-ink-color(black);
73+
@include mdc-text-field-label-color(rgba(blue, .5));
74+
@include mdc-text-field-focused-bottom-line-color(blue);
75+
76+
&.mdc-text-field--focused {
77+
@include mdc-text-field-label-color(rgba(blue, .87));
78+
}
79+
}
80+
81+
.demo-fullwidth-input.mdc-text-field--invalid {
82+
@include mdc-text-field-ink-color(orange);
83+
@include mdc-text-field-label-color(rgba(orange, .5));
4184
@include mdc-text-field-focused-bottom-line-color(orange);
85+
86+
&.mdc-text-field--focused {
87+
@include mdc-text-field-label-color(rgba(orange, .87));
88+
@include mdc-text-field-fullwidth-bottom-line-color(orange);
89+
}
90+
}
91+
92+
.demo-text-field-custom-error-colors.mdc-text-field--invalid {
93+
$idle-border: rgba(orange, .38);
94+
$hover-border: rgba(orange, .6);
95+
$focused-border: rgba(orange, 1);
96+
97+
@include mdc-text-field-bottom-line-color($idle-border);
98+
@include mdc-text-field-hover-bottom-line-color($hover-border);
99+
@include mdc-text-field-focused-bottom-line-color($focused-border);
42100
@include mdc-text-field-ink-color(orange);
43101
@include mdc-text-field-label-color(rgba(orange, .87));
44-
@include mdc-text-field-outline-color(rgba(orange, .38));
45-
@include mdc-text-field-hover-outline-color(rgba(orange, .6));
46-
@include mdc-text-field-focused-outline-color(rgba(orange, 1));
47-
@include mdc-text-field-helper-text-validation-color(rgba(orange, .6));
102+
@include mdc-text-field-outline-color($idle-border);
103+
@include mdc-text-field-hover-outline-color($hover-border);
104+
@include mdc-text-field-focused-outline-color($focused-border);
105+
@include mdc-text-field-helper-text-validation-color($hover-border);
106+
@include mdc-text-field-textarea-stroke-color($idle-border);
107+
108+
@include mdc-text-field-icon-color($focused-border);
109+
110+
// Example for --invalid textfield when helper text is not a validation message.
111+
@include mdc-text-field-helper-text-color(rgba(blue, .6));
48112
}
49113
// stylelint-enable selector-class-pattern

‎packages/mdc-textfield/README.md

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -172,14 +172,19 @@ Mixin | Description
172172
--- | ---
173173
`mdc-text-field-box-corner-radius($radius)` | Customizes the border radius for a box text field
174174
`mdc-text-field-textarea-corner-radius($radius)` | Customizes the border radius for a `<textarea>` text field
175+
`mdc-text-field-ink-color($color)` | Customizes the text entered into the text-field.
176+
`mdc-text-field-label-color($color)` | Customizes the label color of the text-field.
175177
`mdc-text-field-bottom-line-color($color)` | Customizes the color of the default bottom line of the text-field.
176178
`mdc-text-field-hover-bottom-line-color($color)` | Customizes the hover color of the bottom line of the text-field.
177179
`mdc-text-field-focused-bottom-line-color($color)` | Customizes the bottom-line ripple color when the text-field is focused.
178-
`mdc-text-field-ink-color($color)` | Customizes the text entered into the text-field.
179-
`mdc-text-field-label-color($color)` | Customizes the label color of the text-field.
180180
`mdc-text-field-outline-color($color)` | Customizes the color of the border of the outlined text-field.
181181
`mdc-text-field-hover-outline-color($color)` | Customizes the hover color of the border of the outlined text-field.
182182
`mdc-text-field-focused-outline-color($color)` | Customizes the outlined border color when the text-field is focused.
183+
`mdc-text-field-box-fill-color($color)` | Customizes the background color of the text-field box.
184+
`mdc-text-field-textarea-stroke-color($color)` | Customizes the color of the border of the textarea.
185+
`mdc-text-field-textarea-fill-color($color)` | Customizes the color of the background of the textarea.
186+
`mdc-text-field-fullwidth-bottom-line-color($color)` | Customizes the bottom line under a fullwidth text field. Doesn't apply to a textarea.
187+
`mdc-text-field-icon-color($color)` | Customizes the color for the leading/trailing icons.
183188
`mdc-text-field-helper-text-color($color)` | Customizes the color of the helper text following a text-field.
184189
`mdc-text-field-helper-text-validation-color($color)` | Customizes the color of the helper text when it's used as a validation message.
185190

0 commit comments

Comments
 (0)