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

Commit 24054ed

Browse files
abhiomkarabhiomkar
authored
fix(text-field): Fix asterisk color of text field when input is invalid and disabled (#4806)
1 parent 00fa121 commit 24054ed

File tree

4 files changed

+83
-3
lines changed

4 files changed

+83
-3
lines changed

‎packages/mdc-textfield/_mixins.scss

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -159,8 +159,10 @@
159159
@include mdc-text-field-helper-text-validation-color($mdc-text-field-error);
160160
@include mdc-text-field-caret-color($mdc-text-field-error);
161161

162-
@include mdc-required-text-field-label-asterisk_ {
163-
@include mdc-theme-prop(color, $mdc-text-field-error);
162+
&:not(.mdc-text-field--disabled) {
163+
@include mdc-required-text-field-label-asterisk_ {
164+
@include mdc-theme-prop(color, $mdc-text-field-error);
165+
}
164166
}
165167

166168
&.mdc-text-field--with-trailing-icon {

‎test/screenshot/golden.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1471,6 +1471,14 @@
14711471
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/01/31/18_07_04_819/spec/mdc-textfield/classes/focused.html.windows_ie_11.png"
14721472
}
14731473
},
1474+
"spec/mdc-textfield/classes/invalid-disabled.html": {
1475+
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/06/12/17_45_06_529/spec/mdc-textfield/classes/invalid-disabled.html?utm_source=golden_json",
1476+
"screenshots": {
1477+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/06/12/17_45_06_529/spec/mdc-textfield/classes/invalid-disabled.html.windows_chrome_75.png",
1478+
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/06/12/17_45_06_529/spec/mdc-textfield/classes/invalid-disabled.html.windows_firefox_67.png",
1479+
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/06/12/17_45_06_529/spec/mdc-textfield/classes/invalid-disabled.html.windows_ie_11.png"
1480+
}
1481+
},
14741482
"spec/mdc-textfield/classes/invalid-focused-helper-text-persistent-validation-msg-character-counter.html": {
14751483
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/06/10/23_35_52_292/spec/mdc-textfield/classes/invalid-focused-helper-text-persistent-validation-msg-character-counter.html?utm_source=golden_json",
14761484
"screenshots": {

‎test/screenshot/spec/mdc-textfield/classes/invalid-disabled.html

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Copyright 2019 Google Inc.
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.
22+
-->
23+
<html lang="en">
24+
<head>
25+
<meta charset="utf-8">
26+
<title>Invalid Text Field Element - MDC Web Screenshot Test</title>
27+
<meta name="viewport" content="width=device-width, initial-scale=1">
28+
<link rel="stylesheet" href="../../../out/mdc.textfield.css">
29+
<link rel="stylesheet" href="../../../out/mdc.typography.css">
30+
<link rel="stylesheet" href="../../../out/spec/fixture.css">
31+
<link rel="stylesheet" href="../../../out/spec/mdc-textfield/fixture.css">
32+
</head>
33+
34+
<!-- This screenshot test is used to check the error state of the text field. -->
35+
<body class="test-container">
36+
<main class="test-viewport test-viewport--mobile">
37+
<div class="test-layout">
38+
39+
<div class="test-cell test-cell--textfield">
40+
<div class="mdc-text-field mdc-text-field--invalid mdc-text-field--disabled" data-no-init="true">
41+
<input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}" disabled>
42+
<label class="mdc-floating-label" for="filled-text-field">Label</label>
43+
<div class="mdc-line-ripple"></div>
44+
</div>
45+
</div>
46+
47+
<div class="test-cell test-cell--textfield">
48+
<div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--disabled" data-no-init="true">
49+
<input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}" disabled>
50+
<div class="mdc-notched-outline">
51+
<div class="mdc-notched-outline__leading"></div>
52+
<div class="mdc-notched-outline__notch">
53+
<label for="outlined-text-field" class="mdc-floating-label">Label</label>
54+
</div>
55+
<div class="mdc-notched-outline__trailing"></div>
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
</main>
61+
62+
<!-- Automatically provides/replaces `Promise` if missing or broken. -->
63+
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
64+
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
65+
<script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.13/fontfaceobserver.standalone.js"></script>
66+
<script src="../../../out/material-components-web.js"></script>
67+
<script src="../../../out/spec/fixture.js"></script>
68+
<script src="../../../out/spec/mdc-textfield/fixture.js"></script>
69+
</body>
70+
</html>

‎test/screenshot/spec/mdc-textfield/fixture.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
*/
2323

2424
window.mdc.testFixture.fontsLoaded.then(() => {
25-
[].forEach.call(document.querySelectorAll('.mdc-text-field'), (el) => {
25+
[].forEach.call(document.querySelectorAll('.mdc-text-field:not([data-no-init="true"])'), (el) => {
2626
mdc.textField.MDCTextField.attachTo(el);
2727
});
2828

0 commit comments

Comments
 (0)