From bd84694da13730ad963a9403036e4f704cf558d5 Mon Sep 17 00:00:00 2001
From: Bonnie Zhou <bzbee003@gmail.com>
Date: Thu, 19 Apr 2018 11:28:38 -0700
Subject: [PATCH] fix(text-field): Update label position and shake animation
 (#2594)

---
 packages/mdc-textfield/_mixins.scss        | 15 +++++++++++++--
 packages/mdc-textfield/_variables.scss     |  4 ++--
 packages/mdc-textfield/mdc-text-field.scss |  2 ++
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 4af961b7f74..9ecf0ac25d0 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -176,7 +176,10 @@
 
   margin-top: 12px;
   margin-bottom: 4px;
-  font-size: .813rem;
+
+  .mdc-floating-label {
+    font-size: .813rem;
+  }
 }
 
 @mixin mdc-required-text-field-label-asterisk_() {
@@ -231,7 +234,7 @@
   }
 
   .mdc-floating-label {
-    bottom: 18px;
+    bottom: 16px;
   }
 
   .mdc-text-field__icon {
@@ -382,11 +385,19 @@
 @mixin mdc-text-field-outlined-with-leading-icon_ {
   @include mdc-floating-label-float-position($mdc-text-field-outlined-label-position-y, $mdc-text-field-outlined-with-leading-icon-label-position-x);
   @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon);
+
+  @include mdc-rtl {
+    @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon-rtl);
+  }
 }
 
 @mixin mdc-text-field-outlined-dense-with-leading-icon_ {
   @include mdc-floating-label-float-position($mdc-text-field-outlined-dense-label-position-y, $mdc-text-field-outlined-dense-with-leading-icon-label-position-x, $mdc-text-field-dense-label-scale);
   @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon-dense);
+
+  @include mdc-rtl {
+    @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon-dense-rtl);
+  }
 }
 
 @mixin mdc-text-field-with-trailing-icon_ {
diff --git a/packages/mdc-textfield/_variables.scss b/packages/mdc-textfield/_variables.scss
index c179091c9c5..948148b0ead 100644
--- a/packages/mdc-textfield/_variables.scss
+++ b/packages/mdc-textfield/_variables.scss
@@ -40,10 +40,10 @@ $mdc-textarea-disabled-background: rgba(249, 249, 249, 1);
 $mdc-text-field-border-radius: 4px !default;
 
 $mdc-text-field-box-label-position-y: 50%;
-$mdc-text-field-box-dense-label-position-y: 90%;
+$mdc-text-field-box-dense-label-position-y: 70%;
 $mdc-text-field-dense-label-scale: .923;
 $mdc-text-field-outlined-label-position-y: 130%;
-$mdc-text-field-outlined-dense-label-position-y: 145%;
+$mdc-text-field-outlined-dense-label-position-y: 110%;
 $mdc-text-field-outlined-with-leading-icon-label-position-x: 32px;
 $mdc-text-field-outlined-dense-with-leading-icon-label-position-x: 21px;
 $mdc-text-field-textarea-label-position-y: 50%;
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index 9a85c8ccd57..3c96c73a51b 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -246,4 +246,6 @@
 @include mdc-floating-label-shake-keyframes(text-field-outlined-dense, $mdc-text-field-outlined-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
 @include mdc-floating-label-shake-keyframes(text-field-outlined-leading-icon, $mdc-text-field-outlined-label-position-y, $mdc-text-field-outlined-with-leading-icon-label-position-x);
 @include mdc-floating-label-shake-keyframes(text-field-outlined-leading-icon-dense, $mdc-text-field-outlined-dense-label-position-y, $mdc-text-field-outlined-dense-with-leading-icon-label-position-x, $mdc-text-field-dense-label-scale);
+@include mdc-floating-label-shake-keyframes(text-field-outlined-leading-icon-rtl, $mdc-text-field-outlined-label-position-y, -$mdc-text-field-outlined-with-leading-icon-label-position-x);
+@include mdc-floating-label-shake-keyframes(text-field-outlined-leading-icon-dense-rtl, $mdc-text-field-outlined-dense-label-position-y, -$mdc-text-field-outlined-dense-with-leading-icon-label-position-x, $mdc-text-field-dense-label-scale);
 @include mdc-floating-label-shake-keyframes(textarea, $mdc-text-field-textarea-label-position-y, 0%, $mdc-text-field-textarea-label-scale);