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

Commit

Permalink
fix(text-field): Fix label shake animation (#1882)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bonniezhou
bonniezhou authored Jan 20, 2018
1 parent a223246 commit f7b5da4
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 25 deletions.
3 changes: 2 additions & 1 deletion demos/text-field.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -348,7 +348,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
</div>
<div>
<input id="required-leading-trailing" type="checkbox">
<label for="required-leading-trailing">Required</label>
<label for="required-leading-trailing">Required and must be at least 8 characters</label>
</div>
</section>

Expand Down Expand Up @@ -501,6 +501,7 @@ <h2>Full-Width Text Field and Textarea</h2>
tfIconContainer.querySelectorAll('.mdc-text-field__input')
.forEach(function(input) {
input.required = evt.target.checked;
input.pattern = evt.target.checked ? '.{8,}' : '.*';
});
});
});
Expand Down
39 changes: 29 additions & 10 deletions packages/mdc-textfield/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,28 +46,37 @@
}
}

@mixin mdc-text-field-invalid-label-shake-keyframes_($modifier, $positionY, $scale: .75) {
@mixin mdc-text-field-invalid-label-shake-keyframes_($modifier, $positionY, $positionX: 0%, $scale: .75) {
@keyframes invalid-shake-float-above-#{$modifier} {
0% {
transform: translateX(0) translateY(-#{$positionY}) scale(#{$scale});
transform: translateX(calc(0 - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
}

33% {
animation-timing-function: cubic-bezier(.5, 0, .701732, .495819);
transform: translateX(5px) translateY(-#{$positionY}) scale(#{$scale});
transform: translateX(calc(4% - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
}

66% {
animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352);
transform: translateX(-5px) translateY(-#{$positionY}) scale(#{$scale});
transform: translateX(calc(-4% - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
}

100% {
transform: translateX(0) translateY(-#{$positionY}) scale(#{$scale});
transform: translateX(calc(0 - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
}
}
}

@include mdc-text-field-invalid-label-shake_keyframes_(standard, 100%);
@include mdc-text-field-invalid-label-shake-keyframes_(box, 50%);
@include mdc-text-field-invalid-label-shake-keyframes_(box-dense, 90%, 0%, .923);
@include mdc-text-field-invalid-label-shake_keyframes_(outlined, 130%);
@include mdc-text-field-invalid-label-shake_keyframes_(outlined-dense, 145%, 0%, .923);
@include mdc-text-field-invalid-label-shake_keyframes_(outlined-leading-icon, 130%, 27%);
@include mdc-text-field-invalid-label-shake_keyframes_(outlined-leading-icon-dense, 145%, 25%, .923);
@include mdc-text-field-invalid-label-shake-keyframes_(textarea, 50%, 0%, .923);

@mixin mdc-text-field-ink-color($color) {
&:not(.mdc-text-field--disabled) {
@include mdc-text-field-ink-color_($color);
Expand Down Expand Up @@ -210,7 +219,7 @@
}

.mdc-text-field__label--float-above {
transform: translateY(calc(-122% - 2px)) scale(.923);
transform: translateY(-145%) scale(.923);
}

.mdc-text-field__label--float-above.mdc-text-field__label--shake {
Expand Down Expand Up @@ -250,7 +259,7 @@
}

.mdc-text-field__label--float-above {
transform: scale(.75) translateY(-170%);
transform: translateY(-130%) scale(.75);
}

.mdc-text-field__label--float-above.mdc-text-field__label--shake {
Expand Down Expand Up @@ -313,7 +322,11 @@
}

.mdc-text-field__label--float-above {
transform: translateY(calc(-75% - 2px)) scale(.923, .923);
transform: translateY(-90%) scale(.923);
}

.mdc-text-field__label--float-above.mdc-text-field__label--shake {
animation: invalid-shake-float-above-box-dense 250ms 1;
}
}

Expand Down Expand Up @@ -399,7 +412,9 @@

top: $label-offset-y;
bottom: auto;
padding: 8px 16px;
margin-top: 2px;
margin-left: 8px;
padding: 8px;
background-color: $mdc-textarea-light-background;
line-height: 1.15;

Expand All @@ -412,7 +427,11 @@
// Translate above the top of the input, and compensate for the amount of offset needed
// to position the label within the bounds of the inset padding.
// Note that the scale factor is an eyeball'd approximation of what's shown in the mocks.
transform: translateY(-50%) scale(.923, .923);
transform: translateY(-50%) scale(.923);
}

.mdc-text-field__label--float-above.mdc-text-field__label--shake {
animation: invalid-shake-float-above-textarea 250ms 1;
}

&.mdc-text-field--disabled {
Expand Down
6 changes: 2 additions & 4 deletions packages/mdc-textfield/label/mdc-text-field-label.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,12 @@
// limitations under the License.
//

@import "../mixins";
@import "../variables";
@import "@material/rtl/mixins";
@import "@material/theme/variables";
@import "@material/theme/mixins";

@include mdc-text-field-invalid-label-shake_keyframes_(standard, 100%);
@include mdc-text-field-invalid-label-shake_keyframes_(box, 50%);

// postcss-bem-linter: define text-field-label
.mdc-text-field__label {
position: absolute;
Expand All @@ -40,7 +38,7 @@
// stylelint-enable plugin/selector-bem-pattern

&--float-above {
transform: translateY(-100%) scale(.75, .75);
transform: translateY(-100%) scale(.75);
cursor: auto;
}
}
Expand Down
28 changes: 18 additions & 10 deletions packages/mdc-textfield/mdc-text-field.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,6 @@
@import "./icon/mdc-text-field-icon";
@import "./label/mdc-text-field-label";
@import "./outline/mdc-text-field-outline";
@include mdc-text-field-invalid-label-shake-keyframes_(standard, 100%);
@include mdc-text-field-invalid-label-shake-keyframes_(box, 50%);
@include mdc-text-field-invalid-label-shake_keyframes_(outlined, 130%);
@include mdc-text-field-invalid-label-shake_keyframes_(outlined-dense, 138%, .923);

// postcss-bem-linter: define text-field

Expand Down Expand Up @@ -110,7 +106,7 @@
// Move label when text-field gets autofilled in Chrome
// stylelint-disable plugin/selector-bem-pattern
&:-webkit-autofill + .mdc-text-field__label {
transform: translateY(-100%) scale(.75, .75);
transform: translateY(-100%) scale(.75);
cursor: auto;
}
// stylelint-enable plugin/selector-bem-pattern
Expand Down Expand Up @@ -183,11 +179,14 @@
@include mdc-theme-dark(".mdc-text-field") {
@include mdc-theme-prop(color, text-secondary-on-dark);
}

&--float-above {
transform: translateY(-50%) scale(.75);
}
}

.mdc-text-field__label--float-above {
animation: invalid-shake-float-above-box 250ms 1;
transform: translateY(-50%) scale(.75, .75);
transform: translateY(-50%) scale(.75);
}

.mdc-text-field__label--float-above.mdc-text-field__label--shake {
Expand Down Expand Up @@ -220,10 +219,14 @@
// stylelint-disable plugin/selector-bem-pattern
&.mdc-text-field--outlined {
.mdc-text-field__label--float-above {
transform: scale(.75) translateX(-36%) translateY(-170%);
transform: translateX(-27%) translateY(-130%) scale(.75);

@include mdc-rtl {
transform: scale(.75) translateX(36%) translateY(-170%);
transform: translateX(27%) translateY(-130%) scale(.75);
}

&.mdc-text-field__label--shake {
animation: invalid-shake-float-above-outlined-leading-icon 250ms 1;
}
}

Expand All @@ -235,6 +238,11 @@
@include mdc-rtl {
transform: translateX(25%) translateY(-145%) scale(.923);
}

// stylelint-disable-next-line selector-max-specificity
&.mdc-text-field__label--shake {
animation: invalid-shake-float-above-outlined-leading-icon-dense 250ms 1;
}
// stylelint-enable max-nesting-depth
}
}
Expand Down Expand Up @@ -312,7 +320,7 @@

.mdc-text-field__label--float-above {
// NOTE: This is an eyeball'd approximation of what's in the mocks.
transform: translateY(calc(-100% - 2px)) scale(.923, .923);
transform: translateY(-110%) scale(.923);
}
}

Expand Down

0 comments on commit f7b5da4

Please sign in to comment.