From 8c197c45e37690ad34d8da5f69aa5cc21595641f Mon Sep 17 00:00:00 2001
From: Bonnie Zhou <bonniez@google.com>
Date: Fri, 22 Dec 2017 14:44:06 -0500
Subject: [PATCH 01/11] Tweak and parameterize outline path for readability

---
 packages/mdc-textfield/outline/foundation.js | 26 +++++++++++---------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/mdc-textfield/outline/foundation.js b/packages/mdc-textfield/outline/foundation.js
index e1d019788fa..ced2521d474 100644
--- a/packages/mdc-textfield/outline/foundation.js
+++ b/packages/mdc-textfield/outline/foundation.js
@@ -57,28 +57,32 @@ class MDCTextFieldOutlineFoundation extends MDCFoundation {
    * @param {boolean=} isRtl
    */
   updateSvgPath(labelWidth, radius, isRtl = false) {
-    const width = this.adapter_.getWidth() + 2;
-    const height = this.adapter_.getHeight() + 2;
+    const width = this.adapter_.getWidth();
+    const height = this.adapter_.getHeight();
+    const cornerWidth = radius + 1.2;
+    const leadingStrokeLength = Math.abs(12.2 - cornerWidth);
+    const paddedLabelWidth = labelWidth + 8;
+
     // The right, bottom, and left sides of the outline follow the same SVG path.
     const pathMiddle = 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius
-      + 'v' + (height - 2 * (radius + 2.1))
+      + 'v' + (height - (2 * cornerWidth))
       + 'a' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius
-      + 'h' + (-width + 2 * (radius + 1.7))
+      + 'h' + (-width + (2 * cornerWidth))
       + 'a' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius
-      + 'v' + (-height + 2 * (radius + 2.1))
+      + 'v' + (-height + (2 * cornerWidth))
       + 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius;
 
     let path;
     if (!isRtl) {
-      path = 'M' + (radius + 2.1 + Math.abs(10 - radius) + labelWidth + 8) + ',' + 1
-        + 'h' + (width - (2 * (radius + 2.1)) - labelWidth - 8.5 - Math.abs(10 - radius))
+      path = 'M' + (cornerWidth + leadingStrokeLength + paddedLabelWidth) + ',' + 1
+        + 'h' + (width - (2 * cornerWidth) - paddedLabelWidth - leadingStrokeLength)
         + pathMiddle
-        + 'h' + Math.abs(10 - radius);
+        + 'h' + leadingStrokeLength;
     } else {
-      path = 'M' + (width - radius - 2.1 - Math.abs(10 - radius)) + ',' + 1
-        + 'h' + Math.abs(10 - radius)
+      path = 'M' + (width - cornerWidth - leadingStrokeLength) + ',' + 1
+        + 'h' + leadingStrokeLength
         + pathMiddle
-        + 'h' + (width - (2 * (radius + 2.1)) - labelWidth - 8.5 - Math.abs(10 - radius));
+        + 'h' + (width - (2 * cornerWidth) - paddedLabelWidth - leadingStrokeLength);
     }
 
     this.adapter_.setOutlinePathAttr(path);

From 93d817ba82bc5a3c1d0b3a401a65645a16ac4557 Mon Sep 17 00:00:00 2001
From: Bonnie Zhou <bonniez@google.com>
Date: Fri, 22 Dec 2017 14:50:03 -0500
Subject: [PATCH 02/11] Some preliminary css

---
 demos/text-field.html                      |  8 ++++++++
 packages/mdc-textfield/mdc-text-field.scss | 16 ++++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/demos/text-field.html b/demos/text-field.html
index 5f2ccf20042..89fcecf9236 100644
--- a/demos/text-field.html
+++ b/demos/text-field.html
@@ -181,6 +181,10 @@ <h2>Outlined Text Field</h2>
           <input id="outlined-dark-theme" type="checkbox">
           <label for="outlined-dark-theme">Dark Theme</label>
         </div>
+        <div>
+          <input id="outlined-dense" type="checkbox">
+          <label for="outlined-dense">Dense</label>
+        </div>
         <script>
           setTimeout(function() {
             var tfEl = document.getElementById('tf-outlined-example');
@@ -200,6 +204,10 @@ <h2>Outlined Text Field</h2>
             document.getElementById('outlined-dark-theme').addEventListener('change', function(evt) {
               wrapper.classList[evt.target.checked ? 'add' : 'remove']('mdc-theme--dark');
             });
+            document.getElementById('outlined-dense').addEventListener('change', function(evt) {
+              tfEl.classList[evt.target.checked ? 'add' : 'remove']('mdc-text-field--dense');
+              tf.layout();
+            });
           }, 0);
         </script>
       </section>
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index 2bbc377b3ac..7572962893a 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -198,6 +198,22 @@
     }
   }
 
+  &.mdc-text-field--dense {
+    height: 48px;
+
+    .mdc-text-field__input {
+      padding: 12px 12px 0;
+    }
+
+    .mdc-text-field__label {
+      @include mdc-rtl-reflexive-position(left, 12px);
+
+      &--float-above {
+        transform: translateY(calc(-75% - 2px)) scale(.923, .923);
+      }
+    }
+  }
+
   // stylelint-enable plugin/selector-bem-pattern
 }
 

From e9f399e500712a7d1a19b8e516c6545bfac4305a Mon Sep 17 00:00:00 2001
From: Bonnie Zhou <bonniez@google.com>
Date: Fri, 22 Dec 2017 15:42:15 -0500
Subject: [PATCH 03/11] Add dense to outlined text field, remove extra left
 padding rules, change misused label color variable

---
 packages/mdc-textfield/_variables.scss        |  2 +-
 packages/mdc-textfield/adapter.js             |  6 +++++
 packages/mdc-textfield/constants.js           |  1 +
 packages/mdc-textfield/foundation.js          |  6 ++++-
 packages/mdc-textfield/index.js               |  1 +
 packages/mdc-textfield/label/foundation.js    |  2 +-
 .../label/mdc-text-field-label.scss           |  2 +-
 packages/mdc-textfield/mdc-text-field.scss    | 23 ++++++++++---------
 packages/mdc-textfield/outline/foundation.js  |  2 +-
 9 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/packages/mdc-textfield/_variables.scss b/packages/mdc-textfield/_variables.scss
index c9877dcefb3..454c9be8174 100644
--- a/packages/mdc-textfield/_variables.scss
+++ b/packages/mdc-textfield/_variables.scss
@@ -34,7 +34,7 @@ $mdc-text-field-dark-background: rgba(48, 48, 48, 1);
 $mdc-text-field-dark-label: rgba(white, .6);
 $mdc-text-field-dark-placeholder: rgba(white, .3);
 $mdc-text-field-light-background: rgba(white, 1);
-$mdc-text-field-light-label: rgba(white, .7);
+$mdc-text-field-light-label: rgba(black, .6);
 $mdc-text-field-light-placeholder: rgba(black, .38);
 
 $mdc-text-field-box-background: rgba(black, .04);
diff --git a/packages/mdc-textfield/adapter.js b/packages/mdc-textfield/adapter.js
index 8149c631226..d077a1a9a39 100644
--- a/packages/mdc-textfield/adapter.js
+++ b/packages/mdc-textfield/adapter.js
@@ -66,6 +66,12 @@ class MDCTextFieldAdapter {
    */
   removeClass(className) {}
 
+  /**
+   * Returns true if the root element contains the given class name.
+   * @param {string} className
+   */
+  hasClass(className) {}
+
   /**
    * Registers an event handler on the root element for a given event.
    * @param {string} type
diff --git a/packages/mdc-textfield/constants.js b/packages/mdc-textfield/constants.js
index 4793d8e08f6..48a2919d9ca 100644
--- a/packages/mdc-textfield/constants.js
+++ b/packages/mdc-textfield/constants.js
@@ -31,6 +31,7 @@ const cssClasses = {
   ROOT: 'mdc-text-field',
   UPGRADED: 'mdc-text-field--upgraded',
   DISABLED: 'mdc-text-field--disabled',
+  DENSE: 'mdc-text-field--dense',
   FOCUSED: 'mdc-text-field--focused',
   INVALID: 'mdc-text-field--invalid',
   BOX: 'mdc-text-field--box',
diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index e93b4fc4157..e8da056ae99 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -51,6 +51,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
     return /** @type {!MDCTextFieldAdapter} */ ({
       addClass: () => {},
       removeClass: () => {},
+      hasClass: () => {},
       registerTextFieldInteractionHandler: () => {},
       deregisterTextFieldInteractionHandler: () => {},
       registerInputInteractionHandler: () => {},
@@ -159,7 +160,10 @@ class MDCTextFieldFoundation extends MDCFoundation {
     if (!this.outline_ || !this.label_) {
       return;
     }
-    const labelWidth = this.label_.getFloatingWidth();
+
+    const isDense = this.adapter_.hasClass(cssClasses.DENSE);
+    const labelScale = isDense ? 0.923 : 0.75;
+    const labelWidth = this.label_.getFloatingWidth() * labelScale;
     // Fall back to reading a specific corner's style because Firefox doesn't report the style on border-radius.
     const radiusStyleValue = this.adapter_.getIdleOutlineStyleValue('border-radius') ||
       this.adapter_.getIdleOutlineStyleValue('border-top-left-radius');
diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
index 036112ef535..e0dbc09f378 100644
--- a/packages/mdc-textfield/index.js
+++ b/packages/mdc-textfield/index.js
@@ -210,6 +210,7 @@ class MDCTextField extends MDCComponent {
       /** @type {!MDCTextFieldAdapter} */ (Object.assign({
         addClass: (className) => this.root_.classList.add(className),
         removeClass: (className) => this.root_.classList.remove(className),
+        hasClass: (className) => this.root_.classList.contains(className),
         registerTextFieldInteractionHandler: (evtType, handler) => this.root_.addEventListener(evtType, handler),
         deregisterTextFieldInteractionHandler: (evtType, handler) => this.root_.removeEventListener(evtType, handler),
         registerBottomLineEventHandler: (evtType, handler) => {
diff --git a/packages/mdc-textfield/label/foundation.js b/packages/mdc-textfield/label/foundation.js
index be8c26d9aa4..68034497e9f 100644
--- a/packages/mdc-textfield/label/foundation.js
+++ b/packages/mdc-textfield/label/foundation.js
@@ -56,7 +56,7 @@ class MDCTextFieldLabelFoundation extends MDCFoundation {
    */
   getFloatingWidth() {
     // The label is scaled 75% when it floats above the text field.
-    return this.adapter_.getWidth() * 0.75;
+    return this.adapter_.getWidth();
   }
 
   /** Makes the label float above the text field. */
diff --git a/packages/mdc-textfield/label/mdc-text-field-label.scss b/packages/mdc-textfield/label/mdc-text-field-label.scss
index cea5e25655e..4d94fed5478 100644
--- a/packages/mdc-textfield/label/mdc-text-field-label.scss
+++ b/packages/mdc-textfield/label/mdc-text-field-label.scss
@@ -29,7 +29,7 @@
   left: 0;
   transform-origin: left top;
   transition: mdc-text-field-transition(transform), mdc-text-field-transition(color);
-  color: $mdc-text-field-underline-on-light-idle;
+  color: $mdc-text-field-light-label;
   cursor: text;
 
   // stylelint-disable plugin/selector-bem-pattern
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index 7572962893a..a6bcb490b8b 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -142,13 +142,10 @@
 
     position: absolute;
     bottom: 20px;
-    left: 16px;
     transition: transform 260ms ease;
     z-index: 2;
 
     &--float-above {
-      @include mdc-theme-prop(color, primary);
-
       transform: scale(.75) translateY(-170%);
 
       &.mdc-text-field__label--shake {
@@ -167,10 +164,16 @@
     opacity: 1;
   }
 
-  &.mdc-text-field--focused .mdc-text-field__outline-path {
-    @include mdc-theme-prop(stroke, primary);
+  &.mdc-text-field--focused {
+    .mdc-text-field__outline-path {
+      @include mdc-theme-prop(stroke, primary);
+
+      stroke-width: 2px;
+    }
 
-    stroke-width: 2px;
+    &:not(.mdc-text-field--invalid) .mdc-text-field__label {
+      @include mdc-theme-prop(color, primary);
+    }
   }
 
   &.mdc-text-field--disabled {
@@ -202,14 +205,14 @@
     height: 48px;
 
     .mdc-text-field__input {
-      padding: 12px 12px 0;
+      padding: 12px 12px 7px 12px;
     }
 
     .mdc-text-field__label {
-      @include mdc-rtl-reflexive-position(left, 12px);
+      bottom: 18px;
 
       &--float-above {
-        transform: translateY(calc(-75% - 2px)) scale(.923, .923);
+        transform: translateY(calc(-122% - 2px)) scale(.923, .923);
       }
     }
   }
@@ -311,8 +314,6 @@
     }
 
     .mdc-text-field__label {
-      @include mdc-rtl-reflexive-position(left, 12px);
-
       bottom: 20px;
 
       &--float-above {
diff --git a/packages/mdc-textfield/outline/foundation.js b/packages/mdc-textfield/outline/foundation.js
index ced2521d474..2bc4a2005f3 100644
--- a/packages/mdc-textfield/outline/foundation.js
+++ b/packages/mdc-textfield/outline/foundation.js
@@ -60,7 +60,7 @@ class MDCTextFieldOutlineFoundation extends MDCFoundation {
     const width = this.adapter_.getWidth();
     const height = this.adapter_.getHeight();
     const cornerWidth = radius + 1.2;
-    const leadingStrokeLength = Math.abs(12.2 - cornerWidth);
+    const leadingStrokeLength = Math.abs(11 - cornerWidth);
     const paddedLabelWidth = labelWidth + 8;
 
     // The right, bottom, and left sides of the outline follow the same SVG path.

From d67fafe65282ed4134b8df2c1b9f41cd7319245f Mon Sep 17 00:00:00 2001
From: Bonnie Zhou <bonniez@google.com>
Date: Fri, 22 Dec 2017 15:49:08 -0500
Subject: [PATCH 04/11] Clean up code for adding isDense to path calculation

---
 packages/mdc-textfield/README.md                             | 1 +
 packages/mdc-textfield/foundation.js                         | 2 +-
 packages/mdc-textfield/label/README.md                       | 2 +-
 packages/mdc-textfield/label/foundation.js                   | 5 ++---
 test/unit/mdc-textfield/foundation.test.js                   | 4 ++--
 .../mdc-textfield/mdc-text-field-label-foundation.test.js    | 4 ++--
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
index eac184e8049..7156a2801bb 100644
--- a/packages/mdc-textfield/README.md
+++ b/packages/mdc-textfield/README.md
@@ -225,6 +225,7 @@ Method Signature | Description
 --- | ---
 `addClass(className: string) => void` | Adds a class to the root element
 `removeClass(className: string) => void` | Removes a class from the root element
+`hasClass(className: string) => boolean` | Returns true if the root element contains the given class name
 `registerTextFieldInteractionHandler(evtType: string, handler: EventListener)` => void | Registers an event handler on the root element for a given event
 `deregisterTextFieldInteractionHandler(evtType: string, handler: EventListener)` => void | Deregisters an event handler on the root element for a given event
 `registerInputInteractionHandler(evtType: string, handler: EventListener)` => void | Registers an event listener on the native input element for a given event
diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index e8da056ae99..2f106e4cea8 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -163,7 +163,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
 
     const isDense = this.adapter_.hasClass(cssClasses.DENSE);
     const labelScale = isDense ? 0.923 : 0.75;
-    const labelWidth = this.label_.getFloatingWidth() * labelScale;
+    const labelWidth = this.label_.getWidth() * labelScale;
     // Fall back to reading a specific corner's style because Firefox doesn't report the style on border-radius.
     const radiusStyleValue = this.adapter_.getIdleOutlineStyleValue('border-radius') ||
       this.adapter_.getIdleOutlineStyleValue('border-top-left-radius');
diff --git a/packages/mdc-textfield/label/README.md b/packages/mdc-textfield/label/README.md
index d197530fb91..ac88c2ad4e2 100644
--- a/packages/mdc-textfield/label/README.md
+++ b/packages/mdc-textfield/label/README.md
@@ -91,4 +91,4 @@ Method Signature | Description
 `floatAbove() => void` | Makes the label float above the text field
 `deactivateFocus(shouldRemoveLabelFloat: boolean) => void` | Deactivates the label's focus state. `shouldRemoveLabelFloat` indicates whether to also reset the label's position and size.
 `setValidity(isValid: boolean)` | Updates the label's valid state based on the supplied validity
-`getFloatingWidth() => number` | Returns the width of the label element when it floats above the text field
+`getWidth() => number` | Returns the width of the label element
diff --git a/packages/mdc-textfield/label/foundation.js b/packages/mdc-textfield/label/foundation.js
index 68034497e9f..4992b7fdb8e 100644
--- a/packages/mdc-textfield/label/foundation.js
+++ b/packages/mdc-textfield/label/foundation.js
@@ -51,11 +51,10 @@ class MDCTextFieldLabelFoundation extends MDCFoundation {
   }
 
   /**
-   * Returns the width of the label element when it floats above the text field.
+   * Returns the width of the label element.
    * @return {number}
    */
-  getFloatingWidth() {
-    // The label is scaled 75% when it floats above the text field.
+  getWidth() {
     return this.adapter_.getWidth();
   }
 
diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
index 3ac63631afc..472f2610b7c 100644
--- a/test/unit/mdc-textfield/foundation.test.js
+++ b/test/unit/mdc-textfield/foundation.test.js
@@ -63,7 +63,7 @@ const setupTest = () => {
     handleInteraction: () => {},
   });
   const label = td.object({
-    getFloatingWidth: () => {},
+    getWidth: () => {},
     floatAbove: () => {},
     deactivateFocus: () => {},
     setValidity: () => {},
@@ -231,7 +231,7 @@ test('#setHelperTextContent sets the content of the helper text element', () =>
 
 test('#updateOutline updates the SVG path of the outline element', () => {
   const {foundation, mockAdapter, label, outline} = setupTest();
-  td.when(label.getFloatingWidth()).thenReturn(30);
+  td.when(label.getWidth()).thenReturn(30);
   td.when(mockAdapter.getIdleOutlineStyleValue('border-radius')).thenReturn('8px');
   td.when(mockAdapter.isRtl()).thenReturn(false);
 
diff --git a/test/unit/mdc-textfield/mdc-text-field-label-foundation.test.js b/test/unit/mdc-textfield/mdc-text-field-label-foundation.test.js
index 9bba6cd6c0d..3a1a3c78c80 100644
--- a/test/unit/mdc-textfield/mdc-text-field-label-foundation.test.js
+++ b/test/unit/mdc-textfield/mdc-text-field-label-foundation.test.js
@@ -37,11 +37,11 @@ test('defaultAdapter returns a complete adapter implementation', () => {
 
 const setupTest = () => setupFoundationTest(MDCTextFieldLabelFoundation);
 
-test('#getFloatingWidth returns the width of the label element scaled by 75%', () => {
+test('#getWidth returns the width of the label element scaled by 75%', () => {
   const {foundation, mockAdapter} = setupTest();
   const width = 100;
   td.when(mockAdapter.getWidth()).thenReturn(width);
-  assert.equal(foundation.getFloatingWidth(), width * 0.75);
+  assert.equal(foundation.getWidth(), width * 0.75);
 });
 
 test('#floatAbove adds mdc-text-field__label--float-above class', () => {

From 421150d6f08d383fae0a57fc3a8f06e6bfde6529 Mon Sep 17 00:00:00 2001
From: Bonnie Zhou <bonniez@google.com>
Date: Fri, 22 Dec 2017 16:13:02 -0500
Subject: [PATCH 05/11] Add hover style to idle outline

---
 packages/mdc-textfield/mdc-text-field.scss | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index a6bcb490b8b..d41a156a65c 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -164,16 +164,20 @@
     opacity: 1;
   }
 
-  &.mdc-text-field--focused {
-    .mdc-text-field__outline-path {
-      @include mdc-theme-prop(stroke, primary);
+  &.mdc-text-field--focused .mdc-text-field__outline-path {
+    @include mdc-theme-prop(stroke, primary);
 
-      stroke-width: 2px;
-    }
+    stroke-width: 2px;
+  }
 
-    &:not(.mdc-text-field--invalid) .mdc-text-field__label {
+  &:not(.mdc-text-field--invalid) {
+    &.mdc-text-field--focused .mdc-text-field__label {
       @include mdc-theme-prop(color, primary);
     }
+
+    .mdc-text-field__input:hover ~ .mdc-text-field__outline .mdc-text-field__outline-path {
+      stroke: $mdc-text-field-outlined-hover-border;
+    }
   }
 
   &.mdc-text-field--disabled {

From 015b92f76470c0987011ed970b67f747466bb4d5 Mon Sep 17 00:00:00 2001
From: Bonnie Zhou <bonniez@google.com>
Date: Tue, 2 Jan 2018 11:50:48 -0500
Subject: [PATCH 06/11] Fix label shake for dense

---
 packages/mdc-textfield/_mixins.scss        | 10 +++++-----
 packages/mdc-textfield/mdc-text-field.scss |  5 +++++
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 7c399f054a7..9b2eb42cdec 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -41,24 +41,24 @@
   }
 }
 
-@mixin mdc-text-field-invalid-label-shake-keyframes_($modifier, $positionY) {
+@mixin mdc-text-field-invalid-label-shake-keyframes_($modifier, $positionY, $scale:.75) {
   @keyframes invalid-shake-float-above-#{$modifier} {
     0% {
-      transform: translateX(0) translateY(-#{$positionY}) scale(.75, .75);
+      transform: translateX(0) translateY(-#{$positionY}) scale(#{$scale}, #{$scale});
     }
 
     33% {
       animation-timing-function: cubic-bezier(.5, 0, .701732, .495819);
-      transform: translateX(5px) translateY(-#{$positionY}) scale(.75, .75);
+      transform: translateX(5px) translateY(-#{$positionY}) scale(#{$scale}, #{$scale});
     }
 
     66% {
       animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352);
-      transform: translateX(-5px) translateY(-#{$positionY}) scale(.75, .75);
+      transform: translateX(-5px) translateY(-#{$positionY}) scale(#{$scale}, #{$scale});
     }
 
     100% {
-      transform: translateX(0) translateY(-#{$positionY}) scale(.75, .75);
+      transform: translateX(0) translateY(-#{$positionY}) scale(#{$scale}, #{$scale});
     }
   }
 }
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index d41a156a65c..7ace95c9279 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -33,6 +33,7 @@
 @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, 130%, .923);
 
 // postcss-bem-linter: define text-field
 
@@ -217,6 +218,10 @@
 
       &--float-above {
         transform: translateY(calc(-122% - 2px)) scale(.923, .923);
+
+        &.mdc-text-field__label--shake {
+          animation: invalid-shake-float-above-outlined-dense 250ms 1;
+        }
       }
     }
   }

From ab522abaa21667a6a24c74e62604794a8807d5e9 Mon Sep 17 00:00:00 2001
From: Bonnie Zhou <bonniez@google.com>
Date: Tue, 2 Jan 2018 13:14:25 -0500
Subject: [PATCH 07/11] Fix tests

---
 packages/mdc-textfield/mdc-text-field.scss                | 8 ++++++--
 test/unit/mdc-textfield/foundation.test.js                | 4 ++--
 .../mdc-textfield/mdc-text-field-label-foundation.test.js | 2 +-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index 7ace95c9279..5e1813c6f04 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -33,7 +33,7 @@
 @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, 130%, .923);
+@include mdc-text-field-invalid-label-shake_keyframes_(outlined-dense, 138%, .923);
 
 // postcss-bem-linter: define text-field
 
@@ -176,6 +176,7 @@
       @include mdc-theme-prop(color, primary);
     }
 
+    // stylelint-disable-next-line selector-max-specificity
     .mdc-text-field__input:hover ~ .mdc-text-field__outline .mdc-text-field__outline-path {
       stroke: $mdc-text-field-outlined-hover-border;
     }
@@ -210,7 +211,7 @@
     height: 48px;
 
     .mdc-text-field__input {
-      padding: 12px 12px 7px 12px;
+      padding: 12px 12px 7px;
     }
 
     .mdc-text-field__label {
@@ -219,9 +220,12 @@
       &--float-above {
         transform: translateY(calc(-122% - 2px)) scale(.923, .923);
 
+        // stylelint-disable max-nesting-depth
+        // stylelint-disable-next-line selector-max-specificity
         &.mdc-text-field__label--shake {
           animation: invalid-shake-float-above-outlined-dense 250ms 1;
         }
+        // stylelint-enable max-nesting-depth
       }
     }
   }
diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
index 472f2610b7c..7e0d9ce7b3c 100644
--- a/test/unit/mdc-textfield/foundation.test.js
+++ b/test/unit/mdc-textfield/foundation.test.js
@@ -35,7 +35,7 @@ test('exports cssClasses', () => {
 
 test('defaultAdapter returns a complete adapter implementation', () => {
   verifyDefaultAdapter(MDCTextFieldFoundation, [
-    'addClass', 'removeClass',
+    'addClass', 'removeClass', 'hasClass',
     'registerTextFieldInteractionHandler', 'deregisterTextFieldInteractionHandler',
     'registerInputInteractionHandler', 'deregisterInputInteractionHandler',
     'registerBottomLineEventHandler', 'deregisterBottomLineEventHandler',
@@ -236,7 +236,7 @@ test('#updateOutline updates the SVG path of the outline element', () => {
   td.when(mockAdapter.isRtl()).thenReturn(false);
 
   foundation.updateOutline();
-  td.verify(outline.updateSvgPath(30, 8, false));
+  td.verify(outline.updateSvgPath(30 * 0.75, 8, false));
 });
 
 test('on input floats label if input event occurs without any other events', () => {
diff --git a/test/unit/mdc-textfield/mdc-text-field-label-foundation.test.js b/test/unit/mdc-textfield/mdc-text-field-label-foundation.test.js
index 3a1a3c78c80..21728e39352 100644
--- a/test/unit/mdc-textfield/mdc-text-field-label-foundation.test.js
+++ b/test/unit/mdc-textfield/mdc-text-field-label-foundation.test.js
@@ -41,7 +41,7 @@ test('#getWidth returns the width of the label element scaled by 75%', () => {
   const {foundation, mockAdapter} = setupTest();
   const width = 100;
   td.when(mockAdapter.getWidth()).thenReturn(width);
-  assert.equal(foundation.getWidth(), width * 0.75);
+  assert.equal(foundation.getWidth(), width);
 });
 
 test('#floatAbove adds mdc-text-field__label--float-above class', () => {

From 5fddab6c9a5363aec7199a054ae195a50c398ad5 Mon Sep 17 00:00:00 2001
From: Bonnie Zhou <bonniez@google.com>
Date: Wed, 3 Jan 2018 10:54:45 -0500
Subject: [PATCH 08/11] Fix mixin nits

---
 packages/mdc-textfield/_mixins.scss | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 9b2eb42cdec..8f26166fbf9 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -41,24 +41,24 @@
   }
 }
 
-@mixin mdc-text-field-invalid-label-shake-keyframes_($modifier, $positionY, $scale:.75) {
+@mixin mdc-text-field-invalid-label-shake-keyframes_($modifier, $positionY, $scale: .75) {
   @keyframes invalid-shake-float-above-#{$modifier} {
     0% {
-      transform: translateX(0) translateY(-#{$positionY}) scale(#{$scale}, #{$scale});
+      transform: translateX(0) translateY(-#{$positionY}) scale(#{$scale});
     }
 
     33% {
       animation-timing-function: cubic-bezier(.5, 0, .701732, .495819);
-      transform: translateX(5px) translateY(-#{$positionY}) scale(#{$scale}, #{$scale});
+      transform: translateX(5px) translateY(-#{$positionY}) scale(#{$scale});
     }
 
     66% {
       animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352);
-      transform: translateX(-5px) translateY(-#{$positionY}) scale(#{$scale}, #{$scale});
+      transform: translateX(-5px) translateY(-#{$positionY}) scale(#{$scale});
     }
 
     100% {
-      transform: translateX(0) translateY(-#{$positionY}) scale(#{$scale}, #{$scale});
+      transform: translateX(0) translateY(-#{$positionY}) scale(#{$scale});
     }
   }
 }

From f674da96829a0d17b207a77bfd3f030427814f0f Mon Sep 17 00:00:00 2001
From: Bonnie Zhou <bonniez@google.com>
Date: Wed, 3 Jan 2018 11:04:14 -0500
Subject: [PATCH 09/11] Revert unrelated changes

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

diff --git a/packages/mdc-textfield/_variables.scss b/packages/mdc-textfield/_variables.scss
index 454c9be8174..c9877dcefb3 100644
--- a/packages/mdc-textfield/_variables.scss
+++ b/packages/mdc-textfield/_variables.scss
@@ -34,7 +34,7 @@ $mdc-text-field-dark-background: rgba(48, 48, 48, 1);
 $mdc-text-field-dark-label: rgba(white, .6);
 $mdc-text-field-dark-placeholder: rgba(white, .3);
 $mdc-text-field-light-background: rgba(white, 1);
-$mdc-text-field-light-label: rgba(black, .6);
+$mdc-text-field-light-label: rgba(white, .7);
 $mdc-text-field-light-placeholder: rgba(black, .38);
 
 $mdc-text-field-box-background: rgba(black, .04);
diff --git a/packages/mdc-textfield/label/mdc-text-field-label.scss b/packages/mdc-textfield/label/mdc-text-field-label.scss
index 4d94fed5478..cea5e25655e 100644
--- a/packages/mdc-textfield/label/mdc-text-field-label.scss
+++ b/packages/mdc-textfield/label/mdc-text-field-label.scss
@@ -29,7 +29,7 @@
   left: 0;
   transform-origin: left top;
   transition: mdc-text-field-transition(transform), mdc-text-field-transition(color);
-  color: $mdc-text-field-light-label;
+  color: $mdc-text-field-underline-on-light-idle;
   cursor: text;
 
   // stylelint-disable plugin/selector-bem-pattern
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index 5e1813c6f04..79a292af648 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -147,6 +147,8 @@
     z-index: 2;
 
     &--float-above {
+      @include mdc-theme-prop(color, primary);
+
       transform: scale(.75) translateY(-170%);
 
       &.mdc-text-field__label--shake {
@@ -171,17 +173,6 @@
     stroke-width: 2px;
   }
 
-  &:not(.mdc-text-field--invalid) {
-    &.mdc-text-field--focused .mdc-text-field__label {
-      @include mdc-theme-prop(color, primary);
-    }
-
-    // stylelint-disable-next-line selector-max-specificity
-    .mdc-text-field__input:hover ~ .mdc-text-field__outline .mdc-text-field__outline-path {
-      stroke: $mdc-text-field-outlined-hover-border;
-    }
-  }
-
   &.mdc-text-field--disabled {
     @include mdc-theme-prop(color, $mdc-text-field-light-placeholder);
 

From aed871da43aafe1bba3380ec768a231e24dae6fd Mon Sep 17 00:00:00 2001
From: Bonnie Zhou <bonniez@google.com>
Date: Wed, 3 Jan 2018 11:14:22 -0500
Subject: [PATCH 10/11] Add numbers object to constants

---
 packages/mdc-textfield/constants.js        |  8 +++++++-
 packages/mdc-textfield/foundation.js       |  9 +++++++--
 test/unit/mdc-textfield/foundation.test.js | 20 ++++++++++++++++++--
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/packages/mdc-textfield/constants.js b/packages/mdc-textfield/constants.js
index 48a2919d9ca..b6ff828f874 100644
--- a/packages/mdc-textfield/constants.js
+++ b/packages/mdc-textfield/constants.js
@@ -38,4 +38,10 @@ const cssClasses = {
   OUTLINED: 'mdc-text-field--outlined',
 };
 
-export {cssClasses, strings};
+/** @enum {number} */
+const numbers = {
+  LABEL_SCALE: 0.75,
+  DENSE_LABEL_SCALE: 0.923,
+};
+
+export {cssClasses, strings, numbers};
diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index 2f106e4cea8..85aa5daf5b2 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -24,7 +24,7 @@ import MDCTextFieldIconFoundation from './icon/foundation';
 import MDCTextFieldLabelFoundation from './label/foundation';
 import MDCTextFieldOutlineFoundation from './outline/foundation';
 /* eslint-enable no-unused-vars */
-import {cssClasses, strings} from './constants';
+import {cssClasses, strings, numbers} from './constants';
 
 
 /**
@@ -42,6 +42,11 @@ class MDCTextFieldFoundation extends MDCFoundation {
     return strings;
   }
 
+  /** @return enum {string} */
+  static get numbers() {
+    return numbers;
+  }
+
   /**
    * {@see MDCTextFieldAdapter} for typing information on parameters and return
    * types.
@@ -162,7 +167,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
     }
 
     const isDense = this.adapter_.hasClass(cssClasses.DENSE);
-    const labelScale = isDense ? 0.923 : 0.75;
+    const labelScale = isDense ? numbers.DENSE_LABEL_SCALE : numbers.LABEL_SCALE;
     const labelWidth = this.label_.getWidth() * labelScale;
     // Fall back to reading a specific corner's style because Firefox doesn't report the style on border-radius.
     const radiusStyleValue = this.adapter_.getIdleOutlineStyleValue('border-radius') ||
diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
index 7e0d9ce7b3c..56c9f63c7fb 100644
--- a/test/unit/mdc-textfield/foundation.test.js
+++ b/test/unit/mdc-textfield/foundation.test.js
@@ -21,7 +21,7 @@ import {verifyDefaultAdapter} from '../helpers/foundation';
 import MDCTextFieldFoundation from '../../../packages/mdc-textfield/foundation';
 import MDCTextFieldBottomLineFoundation from '../../../packages/mdc-textfield/bottom-line/foundation';
 
-const {cssClasses} = MDCTextFieldFoundation;
+const {cssClasses, numbers} = MDCTextFieldFoundation;
 
 suite('MDCTextFieldFoundation');
 
@@ -33,6 +33,10 @@ test('exports cssClasses', () => {
   assert.isOk('cssClasses' in MDCTextFieldFoundation);
 });
 
+test('exports numbers', () => {
+  assert.isOk('numbers' in MDCTextFieldFoundation);
+});
+
 test('defaultAdapter returns a complete adapter implementation', () => {
   verifyDefaultAdapter(MDCTextFieldFoundation, [
     'addClass', 'removeClass', 'hasClass',
@@ -232,11 +236,23 @@ test('#setHelperTextContent sets the content of the helper text element', () =>
 test('#updateOutline updates the SVG path of the outline element', () => {
   const {foundation, mockAdapter, label, outline} = setupTest();
   td.when(label.getWidth()).thenReturn(30);
+  td.when(mockAdapter.hasClass(cssClasses.DENSE)).thenReturn(false);
+  td.when(mockAdapter.getIdleOutlineStyleValue('border-radius')).thenReturn('8px');
+  td.when(mockAdapter.isRtl()).thenReturn(false);
+
+  foundation.updateOutline();
+  td.verify(outline.updateSvgPath(30 * numbers.LABEL_SCALE, 8, false));
+});
+
+test('#updateOutline updates the SVG path of the outline element when dense', () => {
+  const {foundation, mockAdapter, label, outline} = setupTest();
+  td.when(label.getWidth()).thenReturn(30);
+  td.when(mockAdapter.hasClass(cssClasses.DENSE)).thenReturn(true);
   td.when(mockAdapter.getIdleOutlineStyleValue('border-radius')).thenReturn('8px');
   td.when(mockAdapter.isRtl()).thenReturn(false);
 
   foundation.updateOutline();
-  td.verify(outline.updateSvgPath(30 * 0.75, 8, false));
+  td.verify(outline.updateSvgPath(30 * numbers.DENSE_LABEL_SCALE, 8, false));
 });
 
 test('on input floats label if input event occurs without any other events', () => {

From 1a62f4b410694003e36bf30ac300d917540191bd Mon Sep 17 00:00:00 2001
From: Bonnie Zhou <bonniez@google.com>
Date: Wed, 3 Jan 2018 12:12:54 -0500
Subject: [PATCH 11/11] Remove extra scale param

---
 packages/mdc-textfield/mdc-text-field.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index 7b7e8d8f618..6ef2ca833de 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -209,7 +209,7 @@
       bottom: 18px;
 
       &--float-above {
-        transform: translateY(calc(-122% - 2px)) scale(.923, .923);
+        transform: translateY(calc(-122% - 2px)) scale(.923);
 
         // stylelint-disable max-nesting-depth
         // stylelint-disable-next-line selector-max-specificity