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

Commit 1245573

Browse files
williamernestwilliamernest
authored
fix(text-field): Fix label shake bug. Update invalid screenshots to show required star. (#3338)
1 parent 6316558 commit 1245573

25 files changed

+144
-119
lines changed

‎packages/mdc-textfield/foundation.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
4545

4646
/** @return {boolean} */
4747
get shouldShake() {
48-
return !this.isValid() && !this.isFocused_;
48+
return !this.isValid() && !this.isFocused_ && !!this.getValue();
4949
}
5050

5151
/**

‎test/screenshot/golden.json

Lines changed: 59 additions & 59 deletions
Large diffs are not rendered by default.

‎test/screenshot/spec/mdc-textfield/classes/focused-helper-text-persistent-validation-msg.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141

4242
<div class="test-cell test-cell--textfield">
4343
<div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
44+
<!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
4445
<input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" ">
4546
<label for="outlined-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
4647
<div class="mdc-notched-outline mdc-notched-outline--notched">

‎test/screenshot/spec/mdc-textfield/classes/focused-helper-text-persistent.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141

4242
<div class="test-cell test-cell--textfield">
4343
<div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
44+
<!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
4445
<input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" ">
4546
<label for="outlined-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
4647
<div class="mdc-notched-outline mdc-notched-outline--notched">

‎test/screenshot/spec/mdc-textfield/classes/focused-helper-text-validation-msg.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141

4242
<div class="test-cell test-cell--textfield">
4343
<div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
44+
<!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
4445
<input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" ">
4546
<label for="outlined-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
4647
<div class="mdc-notched-outline mdc-notched-outline--notched">

‎test/screenshot/spec/mdc-textfield/classes/focused-helper-text.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141

4242
<div class="test-cell test-cell--textfield">
4343
<div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
44+
<!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
4445
<input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" ">
4546
<label for="outlined-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
4647
<div class="mdc-notched-outline mdc-notched-outline--notched">

‎test/screenshot/spec/mdc-textfield/classes/focused-leading-icon.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
<div class="test-cell test-cell--textfield">
4343
<div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused mdc-text-field--with-leading-icon">
4444
<i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
45+
<!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
4546
<input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" ">
4647
<label for="outlined-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
4748
<div class="mdc-notched-outline mdc-notched-outline--notched">

‎test/screenshot/spec/mdc-textfield/classes/focused-trailing-icon.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141

4242
<div class="test-cell test-cell--textfield">
4343
<div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused mdc-text-field--with-trailing-icon">
44+
<!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
4445
<input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" ">
4546
<label for="outlined-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
4647
<i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>

‎test/screenshot/spec/mdc-textfield/classes/focused.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040

4141
<div class="test-cell test-cell--textfield">
4242
<div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
43+
<!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
4344
<input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" ">
4445
<label for="outlined-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
4546
<div class="mdc-notched-outline mdc-notched-outline--notched">

‎test/screenshot/spec/mdc-textfield/classes/invalid-focused-helper-text-persistent-validation-msg.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232

3333
<div class="test-cell test-cell--textfield">
3434
<div class="mdc-text-field mdc-text-field--box mdc-text-field--invalid mdc-text-field--focused">
35-
<input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
35+
<input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
3636
<label class="mdc-floating-label" for="filled-text-field">Label</label>
3737
<div class="mdc-line-ripple mdc-line-ripple--active"></div>
3838
</div>
@@ -41,7 +41,8 @@
4141

4242
<div class="test-cell test-cell--textfield">
4343
<div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused">
44-
<input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" ">
44+
<!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
45+
<input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" " required pattern=".{4,8}">
4546
<label for="outlined-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
4647
<div class="mdc-notched-outline mdc-notched-outline--notched">
4748
<svg>
@@ -55,7 +56,7 @@
5556

5657
<div class="test-cell test-cell--textfield">
5758
<div class="mdc-text-field mdc-text-field--box mdc-text-field--invalid mdc-text-field--focused">
58-
<input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
59+
<input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
5960
<label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
6061
<div class="mdc-line-ripple mdc-line-ripple--active"></div>
6162
</div>
@@ -64,7 +65,7 @@
6465

6566
<div class="test-cell test-cell--textfield">
6667
<div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused">
67-
<input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
68+
<input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
6869
<label for="outlined-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
6970
<div class="mdc-notched-outline mdc-notched-outline--notched">
7071
<svg>

0 commit comments

Comments
 (0)