From a9d6c3c25b3630a9f35dd9ff23aa2f409d3fa750 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Tue, 6 Feb 2018 13:55:15 -0800
Subject: [PATCH 01/47] chore(floating-label): moved floating-label to new
 package and integrate with mdc-text-field

---
 demos/text-field.scss                         | 22 +++---
 demos/theme/theme-dark.scss                   |  2 +-
 package-lock.json                             | 74 +++++++++----------
 package.json                                  |  1 +
 .../label => mdc-floating-label}/README.md    | 25 ++++---
 .../label => mdc-floating-label}/_mixins.scss | 30 ++++----
 .../_variables.scss                           | 20 ++---
 .../label => mdc-floating-label}/adapter.js   |  4 +-
 .../label => mdc-floating-label}/constants.js |  0
 .../foundation.js                             | 22 +++---
 .../label => mdc-floating-label}/index.js     | 21 +++---
 .../mdc-floating-label.scss}                  |  4 +-
 packages/mdc-floating-label/package.json      | 25 +++++++
 packages/mdc-textfield/README.md              |  2 +-
 packages/mdc-textfield/_mixins.scss           | 49 ++++++------
 packages/mdc-textfield/adapter.js             |  4 +-
 packages/mdc-textfield/foundation.js          |  4 +-
 packages/mdc-textfield/index.js               | 12 +--
 packages/mdc-textfield/mdc-text-field.scss    |  4 +-
 packages/mdc-textfield/package.json           |  1 +
 20 files changed, 179 insertions(+), 147 deletions(-)
 rename packages/{mdc-textfield/label => mdc-floating-label}/README.md (75%)
 rename packages/{mdc-textfield/label => mdc-floating-label}/_mixins.scss (57%)
 rename packages/{mdc-textfield/label => mdc-floating-label}/_variables.scss (58%)
 rename packages/{mdc-textfield/label => mdc-floating-label}/adapter.js (94%)
 rename packages/{mdc-textfield/label => mdc-floating-label}/constants.js (100%)
 rename packages/{mdc-textfield/label => mdc-floating-label}/foundation.js (75%)
 rename packages/{mdc-textfield/label => mdc-floating-label}/index.js (67%)
 rename packages/{mdc-textfield/label/mdc-text-field-label.scss => mdc-floating-label/mdc-floating-label.scss} (91%)
 create mode 100644 packages/mdc-floating-label/package.json

diff --git a/demos/text-field.scss b/demos/text-field.scss
index b8e506b1f84..7e4a8540643 100644
--- a/demos/text-field.scss
+++ b/demos/text-field.scss
@@ -28,7 +28,7 @@
   @include mdc-text-field-hover-bottom-line-color($hover-border);
   @include mdc-text-field-line-ripple-color($focused-border);
   @include mdc-text-field-ink-color(black);
-  @include mdc-text-field-label-color(rgba(blue, .5));
+  @include mdc-floating-label-color(rgba(blue, .5));
   @include mdc-text-field-outline-color($idle-border);
   @include mdc-text-field-hover-outline-color($hover-border);
   @include mdc-text-field-focused-outline-color($focused-border);
@@ -37,7 +37,7 @@
   @include mdc-text-field-icon-color($hover-border);
 
   &.mdc-text-field--focused {
-    @include mdc-text-field-label-color(rgba(blue, .87));
+    @include mdc-floating-label-color(rgba(blue, .87));
     @include mdc-text-field-icon-color($focused-border);
   }
 }
@@ -48,43 +48,43 @@
   $focused-border: rgba(blue, 1);
 
   @include mdc-text-field-ink-color(black);
-  @include mdc-text-field-label-color(rgba(blue, .5));
+  @include mdc-floating-label-color(rgba(blue, .5));
   @include mdc-text-field-textarea-stroke-color($idle-border);
 
   &.mdc-text-field--focused {
-    @include mdc-text-field-label-color(rgba(blue, .87));
+    @include mdc-floating-label-color(rgba(blue, .87));
     @include mdc-text-field-textarea-stroke-color($focused-border);
   }
 }
 
 .demo-textarea.mdc-text-field--invalid {
   @include mdc-text-field-ink-color(orange);
-  @include mdc-text-field-label-color(rgba(orange, .5));
+  @include mdc-floating-label-color(rgba(orange, .5));
   @include mdc-text-field-textarea-stroke-color(orange);
 
   &.mdc-text-field--focused {
-    @include mdc-text-field-label-color(rgba(orange, .87));
+    @include mdc-floating-label-color(rgba(orange, .87));
     @include mdc-text-field-textarea-stroke-color(orange);
   }
 }
 
 .demo-fullwidth-input:not(.mdc-text-field--invalid) {
   @include mdc-text-field-ink-color(black);
-  @include mdc-text-field-label-color(rgba(blue, .5));
+  @include mdc-floating-label-color(rgba(blue, .5));
   @include mdc-text-field-line-ripple-color(blue);
 
   &.mdc-text-field--focused {
-    @include mdc-text-field-label-color(rgba(blue, .87));
+    @include mdc-floating-label-color(rgba(blue, .87));
   }
 }
 
 .demo-fullwidth-input.mdc-text-field--invalid {
   @include mdc-text-field-ink-color(orange);
-  @include mdc-text-field-label-color(rgba(orange, .5));
+  @include mdc-floating-label-color(rgba(orange, .5));
   @include mdc-text-field-line-ripple-color(orange);
 
   &.mdc-text-field--focused {
-    @include mdc-text-field-label-color(rgba(orange, .87));
+    @include mdc-floating-label-color(rgba(orange, .87));
     @include mdc-text-field-fullwidth-bottom-line-color(orange);
   }
 }
@@ -98,7 +98,7 @@
   @include mdc-text-field-hover-bottom-line-color($hover-border);
   @include mdc-text-field-line-ripple-color($focused-border);
   @include mdc-text-field-ink-color(orange);
-  @include mdc-text-field-label-color(rgba(orange, .87));
+  @include mdc-floating-label-color(rgba(orange, .87));
   @include mdc-text-field-outline-color($idle-border);
   @include mdc-text-field-hover-outline-color($hover-border);
   @include mdc-text-field-focused-outline-color($focused-border);
diff --git a/demos/theme/theme-dark.scss b/demos/theme/theme-dark.scss
index 804234fae1d..b2b978d92ed 100644
--- a/demos/theme/theme-dark.scss
+++ b/demos/theme/theme-dark.scss
@@ -38,7 +38,7 @@ $mdc-theme-background: $material-color-grey-900;
 
 .demo-text-field {
   @include mdc-text-field-ink-color(text-primary-on-dark);
-  @include mdc-text-field-label-color(text-secondary-on-dark);
+  @include mdc-floating-label-color(text-secondary-on-dark);
   @include mdc-text-field-line-ripple-color(text-hint-on-dark);
 }
 
diff --git a/package-lock.json b/package-lock.json
index ae50b59aafa..b73924e40da 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2,6 +2,16 @@
   "requires": true,
   "lockfileVersion": 1,
   "dependencies": {
+    "JSONStream": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz",
+      "integrity": "sha1-cH92HgHa6eFvG8+TcDt4xwlmV5o=",
+      "dev": true,
+      "requires": {
+        "jsonparse": "1.3.1",
+        "through": "2.3.8"
+      }
+    },
     "abbrev": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.9.tgz",
@@ -1292,9 +1302,9 @@
       "integrity": "sha1-+GzWzvT1MAyOY+B6TVEvZfv/RTE=",
       "dev": true,
       "requires": {
+        "JSONStream": "1.3.1",
         "combine-source-map": "0.7.2",
         "defined": "1.0.0",
-        "JSONStream": "1.3.1",
         "through2": "2.0.3",
         "umd": "3.0.1"
       }
@@ -1328,6 +1338,7 @@
       "integrity": "sha512-gKfOsNQv/toWz+60nSPfYzuwSEdzvV2WdxrVPUbPD/qui44rAkB3t3muNtmmGYHqrG56FGwX9SUEQmzNLAeS7g==",
       "dev": true,
       "requires": {
+        "JSONStream": "1.3.1",
         "assert": "1.4.1",
         "browser-pack": "6.0.2",
         "browser-resolve": "1.11.2",
@@ -1349,7 +1360,6 @@
         "https-browserify": "1.0.0",
         "inherits": "2.0.3",
         "insert-module-globals": "7.0.1",
-        "JSONStream": "1.3.1",
         "labeled-stream-splicer": "2.0.0",
         "module-deps": "4.1.1",
         "os-browserify": "0.3.0",
@@ -2492,8 +2502,8 @@
       "integrity": "sha512-8od6g684Fhi5Vpp4ABRv/RBsW1AY6wSHbJHEK6FGTv+8jvAAnlABniZu/FVmX9TcirkHepaEsa1QGkRvbg0CKw==",
       "dev": true,
       "requires": {
-        "is-text-path": "1.0.1",
         "JSONStream": "1.3.1",
+        "is-text-path": "1.0.1",
         "lodash": "4.17.4",
         "meow": "3.7.0",
         "split2": "2.2.0",
@@ -5148,11 +5158,6 @@
             }
           }
         },
-        "string_decoder": {
-          "version": "0.10.31",
-          "bundled": true,
-          "dev": true
-        },
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
@@ -5163,6 +5168,11 @@
             "strip-ansi": "3.0.1"
           }
         },
+        "string_decoder": {
+          "version": "0.10.31",
+          "bundled": true,
+          "dev": true
+        },
         "stringstream": {
           "version": "0.0.5",
           "bundled": true,
@@ -6273,10 +6283,10 @@
       "integrity": "sha1-wDv04BywhtW15azorQr+eInWOMM=",
       "dev": true,
       "requires": {
+        "JSONStream": "1.3.1",
         "combine-source-map": "0.7.2",
         "concat-stream": "1.5.2",
         "is-buffer": "1.1.5",
-        "JSONStream": "1.3.1",
         "lexical-scope": "1.2.0",
         "process": "0.11.10",
         "through2": "2.0.3",
@@ -6968,16 +6978,6 @@
       "integrity": "sha1-T9kss04OnbPInIYi7PUfm5eMbLk=",
       "dev": true
     },
-    "JSONStream": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz",
-      "integrity": "sha1-cH92HgHa6eFvG8+TcDt4xwlmV5o=",
-      "dev": true,
-      "requires": {
-        "jsonparse": "1.3.1",
-        "through": "2.3.8"
-      }
-    },
     "jsprim": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.0.tgz",
@@ -8189,6 +8189,7 @@
       "integrity": "sha1-IyFYM/HaE/1gbMuAh7RIUty4If0=",
       "dev": true,
       "requires": {
+        "JSONStream": "1.3.1",
         "browser-resolve": "1.11.2",
         "cached-path-relative": "1.0.1",
         "concat-stream": "1.5.2",
@@ -8196,7 +8197,6 @@
         "detective": "4.7.1",
         "duplexer2": "0.1.4",
         "inherits": "2.0.3",
-        "JSONStream": "1.3.1",
         "parents": "1.0.1",
         "readable-stream": "2.2.9",
         "resolve": "1.3.3",
@@ -11989,23 +11989,6 @@
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
       "dev": true
     },
-    "string_decoder": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
-      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "5.1.1"
-      },
-      "dependencies": {
-        "safe-buffer": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
-          "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
-          "dev": true
-        }
-      }
-    },
     "string-width": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.0.0.tgz",
@@ -12027,6 +12010,23 @@
         "function-bind": "1.1.0"
       }
     },
+    "string_decoder": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "5.1.1"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
+          "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
+          "dev": true
+        }
+      }
+    },
     "stringify-entities": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-1.3.1.tgz",
diff --git a/package.json b/package.json
index 6f37e634b60..903a6b1a7a2 100644
--- a/package.json
+++ b/package.json
@@ -132,6 +132,7 @@
           "drawer",
           "elevation",
           "fab",
+          "floating-label",
           "form-field",
           "grid-list",
           "icon-toggle",
diff --git a/packages/mdc-textfield/label/README.md b/packages/mdc-floating-label/README.md
similarity index 75%
rename from packages/mdc-textfield/label/README.md
rename to packages/mdc-floating-label/README.md
index f79a079378d..6d2955cc0cf 100644
--- a/packages/mdc-textfield/label/README.md
+++ b/packages/mdc-floating-label/README.md
@@ -1,15 +1,14 @@
 <!--docs:
-title: "Text Field Label"
+title: "Floating Label"
 layout: detail
 section: components
-excerpt: "The label is a text caption or description for the text field."
-iconId: text_field
-path: /catalog/input-controls/text-field/label/
+excerpt: "The label is a text caption or description for the text field or select."
+path: /catalog/input-controls/floating-label/
 -->
 
-# Text Field Label
+# Floating Label
 
-Text field labels display the type of input a field requires. Every text field should have a label. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the text field.
+Floating labels display the type of input a field requires. Every text field and select should have a label. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the text field.
 
 ## Design & API Documentation
 
@@ -37,6 +36,8 @@ Text field labels display the type of input a field requires. Every text field s
 </div>
 ```
 
+<!-- TODO(mattgoo): add ### Usage within `mdc-select` once select uses mdc-floating-label -->
+
 #### Avoid Dynamic ID Generation
 
 It's also possible to wrap `mdc-text-field__input` within a `<label>` to avoid dynamic id generation:
@@ -70,13 +71,15 @@ CSS Class | Description
 `mdc-text-field__label--float-above` | Indicates the label is floating above the text field
 `mdc-text-field__label--shake` | Shakes the label
 
-### `MDCTextFieldLabel`
+<!-- TODO(mattgoo): add ### SCSS Classes -->
+
+### `MDCFloatingLabel`
 
-##### `MDCTextFieldLabel.foundation`
+##### `MDCFloatingLabel.foundation`
 
-This allows the parent `MDCTextField` component to access the public methods on the `MDCTextFieldLabelFoundation` class.
+This allows the parent `MDCTextField` or `MDCSelect` component to access the public methods on the `MDCFloatingLabelFoundation` class.
 
-### `MDCTextFieldLabelAdapter`
+### `MDCFloatingLabelAdapter`
 
 Method Signature | Description
 --- | ---
@@ -84,7 +87,7 @@ Method Signature | Description
 `removeClass(className: string) => void` | Removes a class from the label element
 `getWidth() => number` | Returns the width of the label element
 
-### `MDCTextFieldLabelFoundation`
+### `MDCFloatingLabelFoundation`
 
 Method Signature | Description
 --- | ---
diff --git a/packages/mdc-textfield/label/_mixins.scss b/packages/mdc-floating-label/_mixins.scss
similarity index 57%
rename from packages/mdc-textfield/label/_mixins.scss
rename to packages/mdc-floating-label/_mixins.scss
index cb5206680b7..3bd343f43f7 100644
--- a/packages/mdc-textfield/label/_mixins.scss
+++ b/packages/mdc-floating-label/_mixins.scss
@@ -18,15 +18,15 @@
 
 // Public
 
-@mixin mdc-text-field-label-color($color) {
+@mixin mdc-floating-label-color($color) {
   &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-label-color_($color);
+    @include mdc-floating-label-color_($color);
   }
 }
 
 // Private
 
-@mixin mdc-text-field-invalid-label-shake-keyframes_($modifier, $positionY, $positionX: 0%, $scale: .75) {
+@mixin mdc-floating-label-invalid-shake-keyframes_($modifier, $positionY, $positionX: 0%, $scale: .75) {
   @keyframes invalid-shake-float-above-#{$modifier} {
     0% {
       transform: translateX(calc(0 - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
@@ -48,16 +48,16 @@
   }
 }
 
-@include mdc-text-field-invalid-label-shake_keyframes_(standard, $mdc-text-field-label-position-y);
-@include mdc-text-field-invalid-label-shake-keyframes_(box, $mdc-text-field-box-label-position-y);
-@include mdc-text-field-invalid-label-shake-keyframes_(box-dense, $mdc-text-field-box-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
-@include mdc-text-field-invalid-label-shake_keyframes_(outlined, $mdc-text-field-outlined-label-position-y);
-@include mdc-text-field-invalid-label-shake_keyframes_(outlined-dense, $mdc-text-field-outlined-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
-@include mdc-text-field-invalid-label-shake_keyframes_(outlined-leading-icon, $mdc-text-field-outlined-label-position-y, $mdc-text-field-outlined-with-leading-icon-label-position-x);
-@include mdc-text-field-invalid-label-shake_keyframes_(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-text-field-invalid-label-shake-keyframes_(textarea, $mdc-text-field-textarea-label-position-y, 0%, $mdc-text-field-textarea-label-scale);
+@include mdc-floating-label-invalid-shake-keyframes_(standard, $mdc-floating-label-position-y);
+@include mdc-floating-label-invalid-shake-keyframes_(box, $mdc-floating-label-box-position-y);
+@include mdc-floating-label-invalid-shake-keyframes_(box-dense, $mdc-floating-label-box-dense-position-y, 0%, $mdc-floating-label-dense-scale);
+@include mdc-floating-label-invalid-shake-keyframes_(outlined, $mdc-floating-label-outlined-position-y);
+@include mdc-floating-label-invalid-shake-keyframes_(outlined-dense, $mdc-floating-label-outlined-dense-position-y, 0%, $mdc-floating-label-dense-scale);
+@include mdc-floating-label-invalid-shake-keyframes_(outlined-leading-icon, $mdc-floating-label-outlined-position-y, $mdc-floating-label-outlined-with-leading-icon-position-x);
+@include mdc-floating-label-invalid-shake-keyframes_(outlined-leading-icon-dense, $mdc-floating-label-outlined-dense-position-y, $mdc-floating-label-outlined-dense-with-leading-icon-position-x, $mdc-floating-label-dense-scale);
+@include mdc-floating-label-invalid-shake-keyframes_(textarea, $mdc-floating-label-textarea-position-y, 0%, $mdc-floating-label-textarea-scale);
 
-@mixin mdc-text-field-label-float_($positionY, $positionX: 0%, $scale: .75) {
+@mixin mdc-floating-label-position_($positionY, $positionX: 0%, $scale: .75) {
   @if $positionX == 0 {
     .mdc-text-field__label--float-above {
       transform: translateY(-1 * $positionY) scale($scale);
@@ -73,13 +73,13 @@
   }
 }
 
-@mixin mdc-text-field-label-shake_($modifier) {
+@mixin mdc-floating-label-shake_($modifier) {
   .mdc-text-field__label--shake {
     animation: invalid-shake-float-above-#{$modifier} 250ms 1;
   }
 }
 
-@mixin mdc-text-field-label-color_($color) {
+@mixin mdc-floating-label-color_($color) {
   .mdc-text-field__label,
   .mdc-text-field__input::placeholder { // placeholder used in place of label on css only version
     @include mdc-theme-prop(color, $color);
@@ -87,7 +87,7 @@
 }
 
 // Used for textarea in case of scrolling
-@mixin mdc-text-field-label-background-color_($color) {
+@mixin mdc-floating-label-background-color_($color) {
   .mdc-text-field__label {
     @include mdc-theme-prop(background-color, $color);
   }
diff --git a/packages/mdc-textfield/label/_variables.scss b/packages/mdc-floating-label/_variables.scss
similarity index 58%
rename from packages/mdc-textfield/label/_variables.scss
rename to packages/mdc-floating-label/_variables.scss
index 763df457b79..79e05afb90d 100644
--- a/packages/mdc-textfield/label/_variables.scss
+++ b/packages/mdc-floating-label/_variables.scss
@@ -14,14 +14,14 @@
 // limitations under the License.
 //
 
-$mdc-text-field-label-position-y: 100%;
-$mdc-text-field-box-label-position-y: 50%;
-$mdc-text-field-box-dense-label-position-y: 90%;
-$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-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%;
+$mdc-floating-label-position-y: 100%;
+$mdc-floating-label-box-position-y: 50%;
+$mdc-floating-label-box-dense-position-y: 90%;
+$mdc-floating-label-dense-scale: .923;
+$mdc-floating-label-outlined-position-y: 130%;
+$mdc-floating-label-outlined-dense-position-y: 145%;
+$mdc-floating-label-outlined-with-leading-icon-position-x: 32px;
+$mdc-floating-label-outlined-dense-with-leading-icon-position-x: 21px;
+$mdc-floating-label-textarea-position-y: 50%;
 // Note that the scale factor is an eyeball'd approximation of what's shown in the mocks.
-$mdc-text-field-textarea-label-scale: .923;
+$mdc-floating-label-textarea-scale: .923;
diff --git a/packages/mdc-textfield/label/adapter.js b/packages/mdc-floating-label/adapter.js
similarity index 94%
rename from packages/mdc-textfield/label/adapter.js
rename to packages/mdc-floating-label/adapter.js
index d735245cdb0..be1dc42b194 100644
--- a/packages/mdc-textfield/label/adapter.js
+++ b/packages/mdc-floating-label/adapter.js
@@ -27,7 +27,7 @@
  *
  * @record
  */
-class MDCTextFieldLabelAdapter {
+class MDCFloatingLabelAdapter {
   /**
    * Adds a class to the label element.
    * @param {string} className
@@ -47,4 +47,4 @@ class MDCTextFieldLabelAdapter {
   getWidth() {}
 }
 
-export default MDCTextFieldLabelAdapter;
+export default MDCFloatingLabelAdapter;
diff --git a/packages/mdc-textfield/label/constants.js b/packages/mdc-floating-label/constants.js
similarity index 100%
rename from packages/mdc-textfield/label/constants.js
rename to packages/mdc-floating-label/constants.js
diff --git a/packages/mdc-textfield/label/foundation.js b/packages/mdc-floating-label/foundation.js
similarity index 75%
rename from packages/mdc-textfield/label/foundation.js
rename to packages/mdc-floating-label/foundation.js
index a404f60e071..d3cefc1b12c 100644
--- a/packages/mdc-textfield/label/foundation.js
+++ b/packages/mdc-floating-label/foundation.js
@@ -16,27 +16,27 @@
  */
 
 import MDCFoundation from '@material/base/foundation';
-import MDCTextFieldLabelAdapter from './adapter';
+import MDCFloatingLabelAdapter from './adapter';
 import {cssClasses} from './constants';
 
 
 /**
- * @extends {MDCFoundation<!MDCTextFieldLabelAdapter>}
+ * @extends {MDCFoundation<!MDCFloatingLabelAdapter>}
  * @final
  */
-class MDCTextFieldLabelFoundation extends MDCFoundation {
+class MDCFloatingLabelFoundation extends MDCFoundation {
   /** @return enum {string} */
   static get cssClasses() {
     return cssClasses;
   }
 
   /**
-   * {@see MDCTextFieldLabelAdapter} for typing information on parameters and return
+   * {@see MDCFloatingLabelAdapter} for typing information on parameters and return
    * types.
-   * @return {!MDCTextFieldLabelAdapter}
+   * @return {!MDCFloatingLabelAdapter}
    */
   static get defaultAdapter() {
-    return /** @type {!MDCTextFieldLabelAdapter} */ ({
+    return /** @type {!MDCFloatingLabelAdapter} */ ({
       addClass: () => {},
       removeClass: () => {},
       getWidth: () => {},
@@ -44,10 +44,10 @@ class MDCTextFieldLabelFoundation extends MDCFoundation {
   }
 
   /**
-   * @param {!MDCTextFieldLabelAdapter} adapter
+   * @param {!MDCFloatingLabelAdapter} adapter
    */
   constructor(adapter) {
-    super(Object.assign(MDCTextFieldLabelFoundation.defaultAdapter, adapter));
+    super(Object.assign(MDCFloatingLabelFoundation.defaultAdapter, adapter));
   }
 
   /**
@@ -65,7 +65,7 @@ class MDCTextFieldLabelFoundation extends MDCFoundation {
    * @param {boolean} isFocused Whether the input is focused.
    */
   styleShake(isValid, isFocused) {
-    const {LABEL_SHAKE} = MDCTextFieldLabelFoundation.cssClasses;
+    const {LABEL_SHAKE} = MDCFloatingLabelFoundation.cssClasses;
     if (isValid || isFocused) {
       this.adapter_.removeClass(LABEL_SHAKE);
     } else {
@@ -80,7 +80,7 @@ class MDCTextFieldLabelFoundation extends MDCFoundation {
    * @param {boolean} isBadInput The input's `validity.badInput` value.
    */
   styleFloat(value, isFocused, isBadInput) {
-    const {LABEL_FLOAT_ABOVE, LABEL_SHAKE} = MDCTextFieldLabelFoundation.cssClasses;
+    const {LABEL_FLOAT_ABOVE, LABEL_SHAKE} = MDCFloatingLabelFoundation.cssClasses;
     if (!!value || isFocused) {
       this.adapter_.addClass(LABEL_FLOAT_ABOVE);
     } else if (!isBadInput) {
@@ -90,4 +90,4 @@ class MDCTextFieldLabelFoundation extends MDCFoundation {
   }
 }
 
-export default MDCTextFieldLabelFoundation;
+export default MDCFloatingLabelFoundation;
diff --git a/packages/mdc-textfield/label/index.js b/packages/mdc-floating-label/index.js
similarity index 67%
rename from packages/mdc-textfield/label/index.js
rename to packages/mdc-floating-label/index.js
index 5eab868c811..adfd2fb70b4 100644
--- a/packages/mdc-textfield/label/index.js
+++ b/packages/mdc-floating-label/index.js
@@ -17,34 +17,35 @@
 
 import MDCComponent from '@material/base/component';
 
-import MDCTextFieldLabelAdapter from './adapter';
-import MDCTextFieldLabelFoundation from './foundation';
+import MDCFloatingLabelAdapter from './adapter';
+import MDCFloatingLabelFoundation from './foundation';
 
 /**
- * @extends {MDCComponent<!MDCTextFieldLabelFoundation>}
+ * @extends {MDCComponent<!MDCFloatingLabelFoundation>}
  * @final
  */
-class MDCTextFieldLabel extends MDCComponent {
+class MDCFloatingLabel extends MDCComponent {
   /**
    * @param {!Element} root
-   * @return {!MDCTextFieldLabel}
+   
+   * @return {!MDCFloatingLabel}
    */
   static attachTo(root) {
-    return new MDCTextFieldLabel(root);
+    return new MDCFloatingLabel(root);
   }
 
   /**
-   * @return {!MDCTextFieldLabelFoundation}.
+   * @return {!MDCFloatingLabelFoundation}.
    */
   get foundation() {
     return this.foundation_;
   }
 
   /**
-   * @return {!MDCTextFieldLabelFoundation}
+   * @return {!MDCFloatingLabelFoundation}
    */
   getDefaultFoundation() {
-    return new MDCTextFieldLabelFoundation(/** @type {!MDCTextFieldLabelAdapter} */ (Object.assign({
+    return new MDCFloatingLabelFoundation(/** @type {!MDCFloatingLabelAdapter} */ (Object.assign({
       addClass: (className) => this.root_.classList.add(className),
       removeClass: (className) => this.root_.classList.remove(className),
       getWidth: () => this.root_.offsetWidth,
@@ -52,4 +53,4 @@ class MDCTextFieldLabel extends MDCComponent {
   }
 }
 
-export {MDCTextFieldLabel, MDCTextFieldLabelFoundation};
+export {MDCFloatingLabel, MDCFloatingLabelFoundation};
diff --git a/packages/mdc-textfield/label/mdc-text-field-label.scss b/packages/mdc-floating-label/mdc-floating-label.scss
similarity index 91%
rename from packages/mdc-textfield/label/mdc-text-field-label.scss
rename to packages/mdc-floating-label/mdc-floating-label.scss
index 342ebe68c36..5d7a94e65df 100644
--- a/packages/mdc-textfield/label/mdc-text-field-label.scss
+++ b/packages/mdc-floating-label/mdc-floating-label.scss
@@ -43,6 +43,6 @@
 }
 
 @at-root {
-  @include mdc-text-field-label-float_($mdc-text-field-label-position-y);
-  @include mdc-text-field-label-shake_(standard);
+  @include mdc-floating-label-position_($mdc-floating-label-position-y);
+  @include mdc-floating-label-shake_(standard);
 }
diff --git a/packages/mdc-floating-label/package.json b/packages/mdc-floating-label/package.json
new file mode 100644
index 00000000000..741912a6a2f
--- /dev/null
+++ b/packages/mdc-floating-label/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@material/floating-label",
+  "description": "The Material Components for the web floating-label component",
+  "version": "0.30.0",
+  "license": "Apache-2.0",
+  "keywords": [
+    "material components",
+    "material design",
+    "floatinglabel",
+    "floating-label"
+  ],
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/material-components/material-components-web.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@material/base": "^0.29.0",
+    "@material/theme": "^0.30.0",
+    "@material/rtl": "^0.30.0"
+  }
+}
diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
index 488b06c0c00..2309cbd7af6 100644
--- a/packages/mdc-textfield/README.md
+++ b/packages/mdc-textfield/README.md
@@ -177,7 +177,7 @@ Mixin | Description
 `mdc-text-field-box-corner-radius($radius)` | Customizes the border radius for a box text field
 `mdc-text-field-textarea-corner-radius($radius)` | Customizes the border radius for a `<textarea>` text field
 `mdc-text-field-ink-color($color)` | Customizes the text entered into the text-field.
-`mdc-text-field-label-color($color)` | Customizes the label color of the text-field.
+`mdc-floating-label-color($color)` | Customizes the label color of the text-field.
 `mdc-text-field-line-ripple-color($color)` | Customizes the color of the default line ripple of the text-field.
 `mdc-text-field-hover-line-ripple-color($color)` | Customizes the hover color of the line ripple of the text-field.
 `mdc-text-field-focused-line-ripple-color($color)` | Customizes the line-ripple ripple color when the text-field is focused.
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 557ba86b440..2a0d4a25f9e 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -16,8 +16,8 @@
 
 @import "@material/line-ripple/mixins";
 @import "outline/mixins";
-@import "label/mixins";
-@import "label/variables";
+@import "@material/floating-label/mixins";
+@import "@material/floating-label/variables";
 @import "helper-text/mixins";
 @import "icon/mixins";
 @import "icon/variables";
@@ -73,7 +73,7 @@
     @include mdc-text-field-textarea-fill-color_($color);
     // Automatically add label background color the same color as well to ensure
     // the label can be seen if the input scrolls behind the label
-    @include mdc-text-field-label-background-color_($color);
+    @include mdc-floating-label-background-color_($color);
   }
 }
 
@@ -108,7 +108,7 @@
 @mixin mdc-text-field-disabled_ {
   @include mdc-text-field-bottom-line-color_($mdc-text-field-disabled-border);
   @include mdc-text-field-ink-color_(text-disabled-on-background);
-  @include mdc-text-field-label-color_(text-disabled-on-background);
+  @include mdc-floating-label-color_(text-disabled-on-background);
   @include mdc-text-field-helper-text-color_(text-disabled-on-background);
   @include mdc-text-field-icon-color_($mdc-text-field-disabled-icon);
   @include mdc-text-field-fullwidth-bottom-line-color_($mdc-text-field-divider);
@@ -128,7 +128,7 @@
   @include mdc-text-field-bottom-line-color($mdc-text-field-error);
   @include mdc-text-field-hover-bottom-line-color($mdc-text-field-error);
   @include mdc-text-field-line-ripple-color($mdc-text-field-error);
-  @include mdc-text-field-label-color($mdc-text-field-error);
+  @include mdc-floating-label-color($mdc-text-field-error);
   @include mdc-text-field-helper-text-validation-color($mdc-text-field-error);
 
   + .mdc-text-field-helper-text--validation-msg {
@@ -137,7 +137,7 @@
 }
 
 @mixin mdc-text-field-focused_ {
-  @include mdc-text-field-label-color(primary);
+  @include mdc-floating-label-color(primary);
 
   @include mdc-required-text-field-label-asterix_ {
     color: $mdc-text-field-error;
@@ -150,13 +150,14 @@
 
 @mixin mdc-text-field-dense_ {
   // NOTE: This is an eyeball'd approximation of what's in the mocks.
-  @include mdc-text-field-label-float_(110%, 0%, $mdc-text-field-dense-label-scale);
+  @include mdc-floating-label-position_(110%, 0%, $mdc-floating-label-dense-scale);
 
   margin-top: 12px;
   margin-bottom: 4px;
   font-size: .813rem;
 }
 
+// TODO(mattgoo): can this be placed into the mdc-floating-label repo?
 @mixin mdc-required-text-field-label-asterix_() {
   .mdc-text-field__input:required + .mdc-text-field__label::after {
     @content;
@@ -192,8 +193,8 @@
 }
 
 @mixin mdc-text-field-outlined-dense_ {
-  @include mdc-text-field-label-float_($mdc-text-field-outlined-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
-  @include mdc-text-field-label-shake_(outlined-dense);
+  @include mdc-floating-label-position_($mdc-floating-label-outlined-dense-position-y, 0%, $mdc-floating-label-dense-scale);
+  @include mdc-floating-label-shake_(outlined-dense);
 
   height: 48px;
 
@@ -214,8 +215,8 @@
   @include mdc-text-field-outline-color($mdc-text-field-outlined-idle-border);
   @include mdc-text-field-hover-outline-color($mdc-text-field-outlined-hover-border);
   @include mdc-text-field-focused-outline-color(primary);
-  @include mdc-text-field-label-float_($mdc-text-field-outlined-label-position-y);
-  @include mdc-text-field-label-shake_(outlined);
+  @include mdc-floating-label-position_($mdc-floating-label-outlined-position-y);
+  @include mdc-floating-label-shake_(outlined);
 
   height: 56px;
   border: none;
@@ -260,8 +261,8 @@
   @include mdc-ripple-radius-bounded;
   @include mdc-text-field-box-corner-radius($mdc-text-field-border-radius);
   @include mdc-text-field-box-fill-color($mdc-text-field-box-background);
-  @include mdc-text-field-label-float_($mdc-text-field-box-label-position-y);
-  @include mdc-text-field-label-shake_(box);
+  @include mdc-floating-label-position_($mdc-floating-label-box-position-y);
+  @include mdc-floating-label-shake_(box);
 
   display: inline-flex;
   position: relative;
@@ -295,14 +296,14 @@
 @mixin mdc-text-field-box-disabled_ {
   @include mdc-text-field-box-fill-color_($mdc-text-field-box-disabled-background);
   @include mdc-text-field-bottom-line-color_($mdc-text-field-outlined-disabled-border);
-  @include mdc-text-field-label-color(text-hint-on-background);
+  @include mdc-floating-label-color(text-hint-on-background);
 
   border-bottom: none;
 }
 
 @mixin mdc-text-field-box-dense_ {
-  @include mdc-text-field-label-float_($mdc-text-field-box-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
-  @include mdc-text-field-label-shake_(box-dense);
+  @include mdc-floating-label-position_($mdc-floating-label-box-dense-position-y, 0%, $mdc-floating-label-dense-scale);
+  @include mdc-floating-label-shake_(box-dense);
 
   .mdc-text-field__input {
     padding: 12px 12px 0;
@@ -320,13 +321,13 @@
 }
 
 @mixin mdc-text-field-outlined-with-leading-icon_ {
-  @include mdc-text-field-label-float_($mdc-text-field-outlined-label-position-y, $mdc-text-field-outlined-with-leading-icon-label-position-x);
-  @include mdc-text-field-label-shake_(outlined-leading-icon);
+  @include mdc-floating-label-position_($mdc-floating-label-outlined-position-y, $mdc-floating-label-outlined-with-leading-icon-position-x);
+  @include mdc-floating-label-shake_(outlined-leading-icon);
 }
 
 @mixin mdc-text-field-outlined-dense-with-leading-icon_ {
-  @include mdc-text-field-label-float_($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-text-field-label-shake_(outlined-leading-icon-dense);
+  @include mdc-floating-label-position_($mdc-floating-label-outlined-dense-position-y, $mdc-floating-label-outlined-dense-with-leading-icon-position-x, $mdc-floating-label-dense-scale);
+  @include mdc-floating-label-shake_(outlined-leading-icon-dense);
 }
 
 @mixin mdc-text-field-with-trailing-icon_ {
@@ -369,7 +370,7 @@
 // Textarea
 
 @mixin mdc-text-field-textarea-disabled_ {
-  @include mdc-text-field-label-background-color_($mdc-textarea-disabled-background);
+  @include mdc-floating-label-background-color_($mdc-textarea-disabled-background);
   @include mdc-text-field-textarea-stroke-color_($mdc-text-field-disabled-border);
   @include mdc-text-field-textarea-fill-color_($mdc-textarea-disabled-background);
 
@@ -386,13 +387,13 @@
 
 @mixin mdc-text-field-textarea_ {
   @include mdc-text-field-textarea-corner-radius($mdc-text-field-border-radius);
-  @include mdc-text-field-label-background-color_($mdc-textarea-background);
+  @include mdc-floating-label-background-color_($mdc-textarea-background);
   @include mdc-text-field-textarea-stroke-color($mdc-textarea-border);
 
   // 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.
-  @include mdc-text-field-label-float_($mdc-text-field-textarea-label-position-y, 0%, $mdc-text-field-textarea-label-scale);
-  @include mdc-text-field-label-shake_(textarea);
+  @include mdc-floating-label-position_($mdc-floating-label-textarea-position-y, 0%, $mdc-floating-label-textarea-scale);
+  @include mdc-floating-label-shake_(textarea);
 
   $padding-inset: 16px;
   $label-offset-y: $padding-inset + 2;
diff --git a/packages/mdc-textfield/adapter.js b/packages/mdc-textfield/adapter.js
index fc31be86a0a..5b998bbae80 100644
--- a/packages/mdc-textfield/adapter.js
+++ b/packages/mdc-textfield/adapter.js
@@ -19,7 +19,7 @@
 import MDCLineRippleFoundation from '@material/line-ripple/foundation';
 import MDCTextFieldHelperTextFoundation from './helper-text/foundation';
 import MDCTextFieldIconFoundation from './icon/foundation';
-import MDCTextFieldLabelFoundation from './label/foundation';
+import MDCFloatingLabelFoundation from '@material/floating-label/foundation';
 import MDCTextFieldOutlineFoundation from './outline/foundation';
 
 /* eslint no-unused-vars: [2, {"args": "none"}] */
@@ -42,7 +42,7 @@ let NativeInputType;
  *   lineRipple: (!MDCLineRippleFoundation|undefined),
  *   helperText: (!MDCTextFieldHelperTextFoundation|undefined),
  *   icon: (!MDCTextFieldIconFoundation|undefined),
- *   label: (!MDCTextFieldLabelFoundation|undefined),
+ *   label: (!MDCFloatingLabelFoundation|undefined),
  *   outline: (!MDCTextFieldOutlineFoundation|undefined)
  * }}
  */
diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index fb76510e23d..8a672dd60b5 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -21,7 +21,7 @@ import {MDCTextFieldAdapter, NativeInputType, FoundationMapType} from './adapter
 import MDCLineRippleFoundation from '@material/line-ripple/foundation';
 import MDCTextFieldHelperTextFoundation from './helper-text/foundation';
 import MDCTextFieldIconFoundation from './icon/foundation';
-import MDCTextFieldLabelFoundation from './label/foundation';
+import MDCFloatingLabelFoundation from '@material/floating-label/foundation';
 import MDCTextFieldOutlineFoundation from './outline/foundation';
 /* eslint-enable no-unused-vars */
 import {cssClasses, strings, numbers} from './constants';
@@ -81,7 +81,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
     this.helperText_ = foundationMap.helperText;
     /** @type {!MDCTextFieldIconFoundation|undefined} */
     this.icon_ = foundationMap.icon;
-    /** @type {!MDCTextFieldLabelFoundation|undefined} */
+    /** @type {!MDCFloatingLabelFoundation|undefined} */
     this.label_ = foundationMap.label;
     /** @type {!MDCTextFieldOutlineFoundation|undefined} */
     this.outline_ = foundationMap.outline;
diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
index ffd841e9861..6ee9ec1b726 100644
--- a/packages/mdc-textfield/index.js
+++ b/packages/mdc-textfield/index.js
@@ -29,7 +29,7 @@ import MDCTextFieldFoundation from './foundation';
 import {MDCLineRipple, MDCLineRippleFoundation} from '@material/line-ripple/index';
 import {MDCTextFieldHelperText, MDCTextFieldHelperTextFoundation} from './helper-text/index';
 import {MDCTextFieldIcon, MDCTextFieldIconFoundation} from './icon/index';
-import {MDCTextFieldLabel, MDCTextFieldLabelFoundation} from './label/index';
+import {MDCFloatingLabel, MDCFloatingLabelFoundation} from '@material/floating-label/index';
 import {MDCTextFieldOutline, MDCTextFieldOutlineFoundation} from './outline/index';
 /* eslint-enable no-unused-vars */
 
@@ -53,7 +53,7 @@ class MDCTextField extends MDCComponent {
     this.helperText_;
     /** @private {?MDCTextFieldIcon} */
     this.icon_;
-    /** @private {?MDCTextFieldLabel} */
+    /** @private {?MDCFloatingLabel} */
     this.label_;
     /** @private {?MDCTextFieldOutline} */
     this.outline_;
@@ -76,8 +76,8 @@ class MDCTextField extends MDCComponent {
    * creates a new MDCTextFieldHelperText.
    * @param {(function(!Element): !MDCTextFieldIcon)=} iconFactory A function which
    * creates a new MDCTextFieldIcon.
-   * @param {(function(!Element): !MDCTextFieldLabel)=} labelFactory A function which
-   * creates a new MDCTextFieldLabel.
+   * @param {(function(!Element): !MDCFloatingLabel)=} labelFactory A function which
+   * creates a new MDCFloatingLabel.
    * @param {(function(!Element): !MDCTextFieldOutline)=} outlineFactory A function which
    * creates a new MDCTextFieldOutline.
    */
@@ -86,7 +86,7 @@ class MDCTextField extends MDCComponent {
     lineRippleFactory = (el) => new MDCLineRipple(el),
     helperTextFactory = (el) => new MDCTextFieldHelperText(el),
     iconFactory = (el) => new MDCTextFieldIcon(el),
-    labelFactory = (el) => new MDCTextFieldLabel(el),
+    labelFactory = (el) => new MDCFloatingLabel(el),
     outlineFactory = (el) => new MDCTextFieldOutline(el)) {
     this.input_ = this.root_.querySelector(strings.INPUT_SELECTOR);
     const labelElement = this.root_.querySelector(strings.LABEL_SELECTOR);
@@ -304,5 +304,5 @@ class MDCTextField extends MDCComponent {
 export {MDCTextField, MDCTextFieldFoundation,
   MDCTextFieldHelperText, MDCTextFieldHelperTextFoundation,
   MDCTextFieldIcon, MDCTextFieldIconFoundation,
-  MDCTextFieldLabel, MDCTextFieldLabelFoundation,
+  MDCFloatingLabel, MDCFloatingLabelFoundation,
   MDCTextFieldOutline, MDCTextFieldOutlineFoundation};
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index 9d09100dfa8..b030e8a8bd0 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -27,7 +27,7 @@
 @import "@material/line-ripple/mdc-line-ripple";
 @import "./helper-text/mdc-text-field-helper-text";
 @import "./icon/mdc-text-field-icon";
-@import "./label/mdc-text-field-label";
+@import "@material/floating-label/mdc-floating-label";
 @import "./outline/mdc-text-field-outline";
 
 // postcss-bem-linter: define text-field
@@ -37,7 +37,7 @@
   @include mdc-text-field-hover-bottom-line-color($mdc-text-field-underline-hover);
   @include mdc-text-field-line-ripple-color_(primary);
   @include mdc-text-field-ink-color(text-primary-on-background);
-  @include mdc-text-field-label-color($mdc-text-field-label);
+  @include mdc-floating-label-color($mdc-text-field-label);
   @include mdc-text-field-helper-text-color(text-hint-on-background);
   @include mdc-text-field-fullwidth-bottom-line-color($mdc-text-field-divider);
   @include mdc-text-field-icon-color($mdc-text-field-underline-hover);
diff --git a/packages/mdc-textfield/package.json b/packages/mdc-textfield/package.json
index 187354f8098..d227afbf839 100644
--- a/packages/mdc-textfield/package.json
+++ b/packages/mdc-textfield/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "@material/animation": "^0.25.0",
     "@material/base": "^0.29.0",
+    "@material/floating-label": "^0.30.0",
     "@material/line-ripple": "^0.30.0",
     "@material/ripple": "^0.30.0",
     "@material/rtl": "^0.30.0",

From 9b750cd3406d148dda8f0f16cad9413fc6edcc78 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Tue, 6 Feb 2018 17:53:52 -0800
Subject: [PATCH 02/47] chore(floating-label): changed all css classes to
 floating-label

WIP- JS tests
---
 demos/snackbar.html                           |  4 ++--
 demos/text-field.html                         | 24 +++++++++----------
 demos/theme/index.html                        |  6 ++---
 package.json                                  |  1 +
 packages/material-components-web/index.js     |  3 +++
 .../material-components-web.scss              |  1 +
 packages/material-components-web/package.json |  1 +
 packages/mdc-auto-init/README.md              |  4 ++--
 packages/mdc-floating-label/README.md         | 14 +++++------
 packages/mdc-floating-label/_mixins.scss      | 12 +++++-----
 packages/mdc-floating-label/constants.js      |  4 ++--
 packages/mdc-floating-label/index.js          |  1 -
 .../mdc-floating-label.scss                   |  6 ++---
 packages/mdc-line-ripple/README.md            |  2 +-
 packages/mdc-textfield/README.md              | 16 ++++++-------
 packages/mdc-textfield/_mixins.scss           | 14 +++++------
 packages/mdc-textfield/constants.js           |  2 +-
 packages/mdc-textfield/helper-text/README.md  |  4 ++--
 packages/mdc-textfield/icon/README.md         |  8 +++----
 packages/mdc-textfield/icon/_mixins.scss      |  2 +-
 packages/mdc-textfield/mdc-text-field.scss    |  8 +++----
 packages/mdc-textfield/outline/README.md      |  2 +-
 .../goldens/build-config-dev-env.golden.json  |  1 +
 .../goldens/build-config-no-env.golden.json   |  3 +++
 .../goldens/build-config-prod-env.golden.json |  5 ++++
 .../mdc-text-field-label-foundation.test.js   | 12 +++++-----
 .../mdc-text-field-label.test.js              | 12 +++++-----
 .../unit/mdc-textfield/mdc-text-field.test.js | 13 +++++-----
 webpack.config.js                             |  2 ++
 29 files changed, 102 insertions(+), 85 deletions(-)

diff --git a/demos/snackbar.html b/demos/snackbar.html
index c87fd24768e..dad32a74974 100644
--- a/demos/snackbar.html
+++ b/demos/snackbar.html
@@ -124,14 +124,14 @@ <h2 class="mdc-typography--title">Basic Example</h2>
 
         <div class="mdc-text-field">
           <input type="text" id="message" class="mdc-text-field__input" value="Message deleted">
-          <label class="mdc-text-field__label" for="message">Message Text</label>
+          <label class="mdc-floating-label" for="message">Message Text</label>
           <div class="mdc-line-ripple"></div>
         </div>
         <br/>
 
         <div class="mdc-text-field">
           <input type="text" id="action" class="mdc-text-field__input" value="Undo">
-          <label class="mdc-text-field__label" for="action">Action Text</label>
+          <label class="mdc-floating-label" for="action">Action Text</label>
           <div class="mdc-line-ripple"></div>
         </div>
         <br/>
diff --git a/demos/text-field.html b/demos/text-field.html
index 3a273d74aac..719c636dc0c 100644
--- a/demos/text-field.html
+++ b/demos/text-field.html
@@ -66,7 +66,7 @@
       <section class="hero">
         <div class="mdc-text-field">
           <input type="text" class="mdc-text-field__input" id="my-text-field" aria-controls="my-text-field-helper-text">
-          <label for="my-text-field" class="mdc-text-field__label">Text Field</label>
+          <label for="my-text-field" class="mdc-floating-label">Text Field</label>
           <div class="mdc-line-ripple"></div>
         </div>
       </section>
@@ -76,7 +76,7 @@ <h2>Full Functionality JS Component (Floating Label, Validation)</h2>
         <section id="demo-text-field-wrapper">
           <div class="mdc-text-field">
             <input type="text" class="mdc-text-field__input" id="full-func-text-field" aria-controls="my-text-field-helper-text">
-            <label for="full-func-text-field" class="mdc-text-field__label">Email Address</label>
+            <label for="full-func-text-field" class="mdc-floating-label">Email Address</label>
             <div class="mdc-line-ripple"></div>
           </div>
           <p id="my-text-field-helper-text" class="mdc-text-field-helper-text"
@@ -126,7 +126,7 @@ <h2>Password field with validation</h2>
           <input required pattern=".{8,}" type="password" class="mdc-text-field__input" id="pw"
                  aria-controls="pw-validation-msg"
                  autocomplete="current-password">
-          <label for="pw" class="mdc-text-field__label">Choose password</label>
+          <label for="pw" class="mdc-floating-label">Choose password</label>
           <div class="mdc-line-ripple"></div>
         </div>
         <p class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg"
@@ -141,7 +141,7 @@ <h2>Outlined Text Field</h2>
           <div id="tf-outlined-example" class="mdc-text-field mdc-text-field--outlined" data-demo-no-auto-js>
             <input required pattern=".{8,}" type="text" id="tf-outlined-input" class="mdc-text-field__input"
                    aria-controls="name-validation-message">
-            <label for="tf-outlined-input" class="mdc-text-field__label">Your Name</label>
+            <label for="tf-outlined-input" class="mdc-floating-label">Your Name</label>
             <div class="mdc-text-field__outline">
               <svg>
                 <path class="mdc-text-field__outline-path"/>
@@ -177,7 +177,7 @@ <h2>Text Field box</h2>
           <div id="tf-box-example" class="mdc-text-field mdc-text-field--box" data-demo-no-auto-js>
             <input type="text" id="tf-box" class="mdc-text-field__input"
                    aria-controls="name-validation-message">
-            <label for="tf-box" class="mdc-text-field__label">Your Name</label>
+            <label for="tf-box" class="mdc-floating-label">Your Name</label>
             <div class="mdc-line-ripple"></div>
           </div>
           <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
@@ -222,7 +222,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
             class="mdc-text-field mdc-text-field--box mdc-text-field--with-leading-icon" data-demo-no-auto-js>
             <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
             <input type="text" id="tf-box-leading" class="mdc-text-field__input">
-            <label for="tf-box-leading" class="mdc-text-field__label">Your name</label>
+            <label for="tf-box-leading" class="mdc-floating-label">Your name</label>
             <div class="mdc-line-ripple"></div>
           </div>
         </div>
@@ -230,7 +230,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
           <div id="tf-box-trailing-example"
             class="mdc-text-field mdc-text-field--box mdc-text-field--with-trailing-icon" data-demo-no-auto-js>
             <input type="text" id="tf-box-trailing" class="mdc-text-field__input">
-            <label for="tf-box-trailing" class="mdc-text-field__label">Your other name</label>
+            <label for="tf-box-trailing" class="mdc-floating-label">Your other name</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0">delete</i>
             <div class="mdc-line-ripple"></div>
           </div>
@@ -240,7 +240,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
             class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon" data-demo-no-auto-js>
             <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
             <input type="text" id="tf-outlined-leading" class="mdc-text-field__input">
-            <label for="tf-outlined-leading" class="mdc-text-field__label">Your other name</label>
+            <label for="tf-outlined-leading" class="mdc-floating-label">Your other name</label>
             <div class="mdc-text-field__outline">
               <svg>
                 <path class="mdc-text-field__outline-path"/>
@@ -253,7 +253,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
           <div id="tf-outlined-trailing-example"
             class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon" data-demo-no-auto-js>
             <input type="text" id="tf-outlined-trailing" class="mdc-text-field__input">
-            <label for="tf-outlined-trailing" class="mdc-text-field__label">Your other name</label>
+            <label for="tf-outlined-trailing" class="mdc-floating-label">Your other name</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0">delete</i>
             <div class="mdc-text-field__outline">
               <svg>
@@ -293,7 +293,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
         <h2>Preventing FOUC</h2>
         <div class="mdc-text-field mdc-text-field--upgraded">
           <input id="fouc" type="text" class="mdc-text-field__input" value="Pre-filled value">
-          <label for="fouc" class="mdc-text-field__label mdc-text-field__label--float-above">
+          <label for="fouc" class="mdc-floating-label mdc-floating-label--float-above">
             Label floating above
           </label>
           <div class="mdc-line-ripple"></div>
@@ -305,7 +305,7 @@ <h2>Textarea</h2>
         <section id="demo-text-field-textarea-wrapper">
           <div class="mdc-text-field mdc-text-field--textarea">
             <textarea id="textarea" class="mdc-text-field__input" rows="8" cols="40"></textarea>
-            <label for="textarea" class="mdc-text-field__label">Textarea Label</label>
+            <label for="textarea" class="mdc-floating-label">Textarea Label</label>
           </div>
         </section>
         <div>
@@ -335,7 +335,7 @@ <h2>Full-Width Text Field and Textarea</h2>
           </div>
           <div class="mdc-text-field mdc-text-field--textarea mdc-text-field--fullwidth full-width-textarea-example">
             <textarea id="full-width-textarea" class="mdc-text-field__input" rows="8"></textarea>
-            <label for="full-width-textarea" class="mdc-text-field__label">Textarea Label</label>
+            <label for="full-width-textarea" class="mdc-floating-label">Textarea Label</label>
           </div>
         </div>
         <div>
diff --git a/demos/theme/index.html b/demos/theme/index.html
index 9d9c921c23f..4f186dce237 100644
--- a/demos/theme/index.html
+++ b/demos/theme/index.html
@@ -836,7 +836,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
                    id="demo-text-field-default"
                    aria-controls="demo-text-field-default-helper-text"
                    autocomplete="email">
-            <label for="demo-text-field-default" class="mdc-text-field__label">Name (optional)</label>
+            <label for="demo-text-field-default" class="mdc-floating-label">Name (optional)</label>
             <div class="mdc-line-ripple"></div>
           </div>
           <p class="mdc-text-field-helper-text" id="demo-text-field-default-helper-text"
@@ -851,7 +851,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
                    aria-controls="demo-text-field-required-helper-text"
                    autocomplete="email"
                    required>
-            <label for="demo-text-field-required" class="mdc-text-field__label">Email (required)</label>
+            <label for="demo-text-field-required" class="mdc-floating-label">Email (required)</label>
             <div class="mdc-line-ripple"></div>
           </div>
           <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" id="demo-text-field-required-helper-text">
@@ -863,7 +863,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
             <input type="text" class="mdc-text-field__input"
                    id="demo-text-field-box"
                    aria-controls="name-validation-message">
-            <label for="demo-text-field-box" class="mdc-text-field__label">With <code>--box</code> modifier</label>
+            <label for="demo-text-field-box" class="mdc-floating-label">With <code>--box</code> modifier</label>
             <div class="mdc-line-ripple"></div>
           </div>
           <p class="mdc-text-field-helper-text" id="demo-text-field-box-helper-text"
diff --git a/package.json b/package.json
index 903a6b1a7a2..2071b0bbb8a 100644
--- a/package.json
+++ b/package.json
@@ -170,6 +170,7 @@
     "mdc-line-ripple",
     "mdc-checkbox",
     "mdc-chips",
+    "mdc-floating-label",
     "mdc-form-field",
     "mdc-icon-toggle",
     "mdc-menu",
diff --git a/packages/material-components-web/index.js b/packages/material-components-web/index.js
index 6fe16e86a5e..4d7949c4301 100644
--- a/packages/material-components-web/index.js
+++ b/packages/material-components-web/index.js
@@ -20,6 +20,7 @@ import * as checkbox from '@material/checkbox/index';
 import * as chips from '@material/chips/index';
 import * as dialog from '@material/dialog/index';
 import * as drawer from '@material/drawer/index';
+import * as floatingLabel from '@material/floating-label/index';
 import * as formField from '@material/form-field/index';
 import * as gridList from '@material/grid-list/index';
 import * as iconToggle from '@material/icon-toggle/index';
@@ -44,6 +45,7 @@ autoInit.register('MDCChipSet', chips.MDCChipSet);
 autoInit.register('MDCDialog', dialog.MDCDialog);
 autoInit.register('MDCPersistentDrawer', drawer.MDCPersistentDrawer);
 autoInit.register('MDCTemporaryDrawer', drawer.MDCTemporaryDrawer);
+autoInit.register('MDCFloatingLabel', floatingLabel.MDCFloatingLabel);
 autoInit.register('MDCFormField', formField.MDCFormField);
 autoInit.register('MDCRipple', ripple.MDCRipple);
 autoInit.register('MDCGridList', gridList.MDCGridList);
@@ -68,6 +70,7 @@ export {
   chips,
   dialog,
   drawer,
+  floatingLabel,
   formField,
   gridList,
   iconToggle,
diff --git a/packages/material-components-web/material-components-web.scss b/packages/material-components-web/material-components-web.scss
index d791151ceb0..bd21d1187d2 100644
--- a/packages/material-components-web/material-components-web.scss
+++ b/packages/material-components-web/material-components-web.scss
@@ -23,6 +23,7 @@
 @import "@material/drawer/mdc-drawer";
 @import "@material/elevation/mdc-elevation";
 @import "@material/fab/mdc-fab";
+@import "@material/floating-label/mdc-floating-label";
 @import "@material/form-field/mdc-form-field";
 @import "@material/grid-list/mdc-grid-list";
 @import "@material/icon-toggle/mdc-icon-toggle";
diff --git a/packages/material-components-web/package.json b/packages/material-components-web/package.json
index 760c37f3fd9..7ea4dfe45dd 100644
--- a/packages/material-components-web/package.json
+++ b/packages/material-components-web/package.json
@@ -25,6 +25,7 @@
     "@material/drawer": "^0.30.0",
     "@material/elevation": "^0.28.0",
     "@material/fab": "^0.30.0",
+    "@material/floating-label": "^0.30.0",
     "@material/form-field": "^0.30.0",
     "@material/grid-list": "^0.30.0",
     "@material/icon-toggle": "^0.30.0",
diff --git a/packages/mdc-auto-init/README.md b/packages/mdc-auto-init/README.md
index af64a85296c..98e911c1346 100644
--- a/packages/mdc-auto-init/README.md
+++ b/packages/mdc-auto-init/README.md
@@ -32,7 +32,7 @@ writing the markup, simply insert a script tag that calls `mdc.autoInit()`. Make
 ```html
 <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
   <input class="mdc-text-field__input" type="text" id="input">
-  <label for="input" class="mdc-text-field__label">Input Label</label>
+  <label for="input" class="mdc-floating-label">Input Label</label>
   <div class="mdc-line-ripple"></div>
 </div>
 
@@ -52,7 +52,7 @@ using a property whose name is the value of `data-mdc-auto-init`. For example, g
 ```html
 <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
   <input class="mdc-text-field__input" type="text" id="input">
-  <label for="input" class="mdc-text-field__label">Input Label</label>
+  <label for="input" class="mdc-floating-label">Input Label</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
diff --git a/packages/mdc-floating-label/README.md b/packages/mdc-floating-label/README.md
index 6d2955cc0cf..e0e24f8f63f 100644
--- a/packages/mdc-floating-label/README.md
+++ b/packages/mdc-floating-label/README.md
@@ -23,7 +23,7 @@ Floating labels display the type of input a field requires. Every text field and
 ### HTML Structure
 
 ```html
-<label class="mdc-text-field__label" for="my-text-field-id">Hint text</label>
+<label class="mdc-floating-label" for="my-text-field-id">Hint text</label>
 ```
 
 ### Usage within `mdc-text-field`
@@ -31,7 +31,7 @@ Floating labels display the type of input a field requires. Every text field and
 ```html
 <div class="mdc-text-field">
   <input type="text" id="my-text-field-id" class="mdc-text-field__input">
-  <label class="mdc-text-field__label" for="my-text-field-id">Hint text</label>
+  <label class="mdc-floating-label" for="my-text-field-id">Hint text</label>
   <div class="mdc-text-field__bottom-line"></div>
 </div>
 ```
@@ -45,12 +45,12 @@ It's also possible to wrap `mdc-text-field__input` within a `<label>` to avoid d
 ```html
 <label class="mdc-text-field">
   <input type="text" class="mdc-text-field__input">
-  <span class="mdc-text-field__label">Hint Text</span>
+  <span class="mdc-floating-label">Hint Text</span>
   <div class="mdc-text-field__bottom-line"></div>
 </label>
 ```
 
-> _NOTE_: Only place an `mdc-text-field__label` inside of a text field _if you plan on using
+> _NOTE_: Only place an `mdc-floating-label` inside of a text field _if you plan on using
 > Javascript_. Otherwise, the label must go outside of the text-field, as shown below.
 
 #### Single Line, CSS Only
@@ -67,9 +67,9 @@ It's also possible to wrap `mdc-text-field__input` within a `<label>` to avoid d
 
 CSS Class | Description
 --- | ---
-`mdc-text-field__label` | Mandatory
-`mdc-text-field__label--float-above` | Indicates the label is floating above the text field
-`mdc-text-field__label--shake` | Shakes the label
+`mdc-floating-label` | Mandatory
+`mdc-floating-label--float-above` | Indicates the label is floating above the text field
+`mdc-floating-label--shake` | Shakes the label
 
 <!-- TODO(mattgoo): add ### SCSS Classes -->
 
diff --git a/packages/mdc-floating-label/_mixins.scss b/packages/mdc-floating-label/_mixins.scss
index 3bd343f43f7..aa56ced3980 100644
--- a/packages/mdc-floating-label/_mixins.scss
+++ b/packages/mdc-floating-label/_mixins.scss
@@ -14,7 +14,7 @@
 // limitations under the License.
 //
 
-@import './variables';
+@import "./variables";
 
 // Public
 
@@ -59,11 +59,11 @@
 
 @mixin mdc-floating-label-position_($positionY, $positionX: 0%, $scale: .75) {
   @if $positionX == 0 {
-    .mdc-text-field__label--float-above {
+    .mdc-floating-label--float-above {
       transform: translateY(-1 * $positionY) scale($scale);
     }
   } @else {
-    .mdc-text-field__label--float-above {
+    .mdc-floating-label--float-above {
       transform: translateY(-1 * $positionY) translateX(-1 * $positionX) scale($scale);
 
       @include mdc-rtl {
@@ -74,13 +74,13 @@
 }
 
 @mixin mdc-floating-label-shake_($modifier) {
-  .mdc-text-field__label--shake {
+  .mdc-floating-label--shake {
     animation: invalid-shake-float-above-#{$modifier} 250ms 1;
   }
 }
 
 @mixin mdc-floating-label-color_($color) {
-  .mdc-text-field__label,
+  .mdc-floating-label,
   .mdc-text-field__input::placeholder { // placeholder used in place of label on css only version
     @include mdc-theme-prop(color, $color);
   }
@@ -88,7 +88,7 @@
 
 // Used for textarea in case of scrolling
 @mixin mdc-floating-label-background-color_($color) {
-  .mdc-text-field__label {
+  .mdc-floating-label {
     @include mdc-theme-prop(background-color, $color);
   }
 }
diff --git a/packages/mdc-floating-label/constants.js b/packages/mdc-floating-label/constants.js
index 2346fcf6630..789db67b3bf 100644
--- a/packages/mdc-floating-label/constants.js
+++ b/packages/mdc-floating-label/constants.js
@@ -17,8 +17,8 @@
 
 /** @enum {string} */
 const cssClasses = {
-  LABEL_FLOAT_ABOVE: 'mdc-text-field__label--float-above',
-  LABEL_SHAKE: 'mdc-text-field__label--shake',
+  LABEL_FLOAT_ABOVE: 'mdc-floating-label--float-above',
+  LABEL_SHAKE: 'mdc-floating-label--shake',
 };
 
 export {cssClasses};
diff --git a/packages/mdc-floating-label/index.js b/packages/mdc-floating-label/index.js
index adfd2fb70b4..9d9ba2a436b 100644
--- a/packages/mdc-floating-label/index.js
+++ b/packages/mdc-floating-label/index.js
@@ -27,7 +27,6 @@ import MDCFloatingLabelFoundation from './foundation';
 class MDCFloatingLabel extends MDCComponent {
   /**
    * @param {!Element} root
-   
    * @return {!MDCFloatingLabel}
    */
   static attachTo(root) {
diff --git a/packages/mdc-floating-label/mdc-floating-label.scss b/packages/mdc-floating-label/mdc-floating-label.scss
index 5d7a94e65df..6e3017d84e9 100644
--- a/packages/mdc-floating-label/mdc-floating-label.scss
+++ b/packages/mdc-floating-label/mdc-floating-label.scss
@@ -20,8 +20,8 @@
 @import "@material/theme/variables";
 @import "@material/theme/mixins";
 
-// postcss-bem-linter: define text-field-label
-.mdc-text-field__label {
+// postcss-bem-linter: define floating-label
+.mdc-floating-label {
   position: absolute;
   bottom: 8px;
   left: 0;
@@ -38,7 +38,7 @@
   // stylelint-enable plugin/selector-bem-pattern
 }
 
-.mdc-text-field__label--float-above {
+.mdc-floating-label--float-above {
   cursor: auto;
 }
 
diff --git a/packages/mdc-line-ripple/README.md b/packages/mdc-line-ripple/README.md
index e10b4f81d81..ede488e0641 100644
--- a/packages/mdc-line-ripple/README.md
+++ b/packages/mdc-line-ripple/README.md
@@ -31,7 +31,7 @@ The line ripple is used to highlight user-specified text above it. When a line r
 ```html
 <div class="mdc-text-field">
   <input type="text" id="my-text-field-id" class="mdc-text-field__input">
-  <label class="mdc-text-field__label" for="my-text-field-id">Hint text</label>
+  <label class="mdc-floating-label" for="my-text-field-id">Hint text</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
index 2309cbd7af6..e6324939f3c 100644
--- a/packages/mdc-textfield/README.md
+++ b/packages/mdc-textfield/README.md
@@ -41,7 +41,7 @@ npm install --save @material/textfield
 ```html
 <div class="mdc-text-field">
   <input type="text" id="my-text-field" class="mdc-text-field__input">
-  <label class="mdc-text-field__label" for="my-text-field">Hint text</label>
+  <label class="mdc-floating-label" for="my-text-field">Hint text</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
@@ -54,7 +54,7 @@ by HTML5's form validation API.
 ```html
 <div class="mdc-text-field">
   <input type="password" id="pw" class="mdc-text-field__input" required minlength=8>
-  <label for="pw" class="mdc-text-field__label">Password</label>
+  <label for="pw" class="mdc-floating-label">Password</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
@@ -64,14 +64,14 @@ by HTML5's form validation API.
 #### Pre-filled
 
 When dealing with JS-driven text fields that already have values, you'll want to ensure that you
-render `mdc-text-field__label` with the `mdc-text-field__label--float-above` modifier class, and `mdc-text-field` with the `mdc-text-field--upgraded` modifier class. This will
+render `mdc-floating-label` with the `mdc-floating-label--float-above` modifier class, and `mdc-text-field` with the `mdc-text-field--upgraded` modifier class. This will
 ensure that the label moves out of the way of the text field's value and prevents a Flash Of
 Un-styled Content (**FOUC**).
 
 ```html
 <div class="mdc-text-field mdc-text-field--upgraded">
   <input type="text" id="pre-filled" class="mdc-text-field__input" value="Pre-filled value">
-  <label class="mdc-text-field__label mdc-text-field__label--float-above" for="pre-filled">
+  <label class="mdc-floating-label mdc-floating-label--float-above" for="pre-filled">
     Label in correct place
   </label>
   <div class="mdc-line-ripple"></div>
@@ -93,7 +93,7 @@ Full width text fields are useful for in-depth tasks or entering complex informa
 
 > _NOTE_: Do not use `mdc-text-field--box` or `mdc-text-field--outlined` to style a full width text field.
 
-> _NOTE_: Do not use `mdc-text-field__label` within `mdc-text-field--fullwidth`. Labels should not be
+> _NOTE_: Do not use `mdc-floating-label` within `mdc-text-field--fullwidth`. Labels should not be
 included as part of the DOM structure of a full width text field.
 
 #### Textarea
@@ -101,7 +101,7 @@ included as part of the DOM structure of a full width text field.
 ```html
 <div class="mdc-text-field mdc-text-field--textarea">
   <textarea id="textarea" class="mdc-text-field__input" rows="8" cols="40"></textarea>
-  <label for="textarea" class="mdc-text-field__label">Textarea Label</label>
+  <label for="textarea" class="mdc-floating-label">Textarea Label</label>
 </div>
 ```
 
@@ -112,7 +112,7 @@ Add the `disabled` attribute to `<input>` if the `mdc-text-field` is disabled. Y
 ```html
 <div class="mdc-text-field mdc-text-field--disabled">
   <input type="text" id="disabled-text-field" class="mdc-text-field__input" disabled>
-  <label class="mdc-text-field__label" for="disabled-text-field">Disabled text field</label>
+  <label class="mdc-floating-label" for="disabled-text-field">Disabled text field</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
@@ -122,7 +122,7 @@ Add the `disabled` attribute to `<input>` if the `mdc-text-field` is disabled. Y
 ```html
 <div class="mdc-text-field mdc-text-field--outlined">
   <input type="text" id="tf-outlined" class="mdc-text-field__input">
-  <label for="tf-outlined" class="mdc-text-field__label">Your Name</label>
+  <label for="tf-outlined" class="mdc-floating-label">Your Name</label>
   <div class="mdc-text-field__outline">
     <svg>
       <path class="mdc-text-field__outline-path"/>
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 2a0d4a25f9e..4643fcab0e0 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -34,7 +34,7 @@
 @mixin mdc-text-field-textarea-corner-radius($radius) {
   border-radius: $radius;
 
-  .mdc-text-field__label {
+  .mdc-floating-label {
     // Bottom corners are square to prevent weird edge cases
     // where text would be visible outside of the curve.
     border-radius: $radius $radius 0 0;
@@ -119,7 +119,7 @@
     border-bottom: 1px dotted;
   }
 
-  .mdc-text-field__label {
+  .mdc-floating-label {
     cursor: default;
   }
 }
@@ -159,7 +159,7 @@
 
 // TODO(mattgoo): can this be placed into the mdc-floating-label repo?
 @mixin mdc-required-text-field-label-asterix_() {
-  .mdc-text-field__input:required + .mdc-text-field__label::after {
+  .mdc-text-field__input:required + .mdc-floating-label::after {
     @content;
   }
 }
@@ -202,7 +202,7 @@
     padding: 12px 12px 7px;
   }
 
-  .mdc-text-field__label {
+  .mdc-floating-label {
     bottom: 18px;
   }
 
@@ -230,7 +230,7 @@
     z-index: 1;
   }
 
-  .mdc-text-field__label {
+  .mdc-floating-label {
     @include mdc-rtl-reflexive-position(left, 16px);
 
     position: absolute;
@@ -277,7 +277,7 @@
     padding: 20px 16px 0;
   }
 
-  .mdc-text-field__label {
+  .mdc-floating-label {
     @include mdc-rtl-reflexive-position(left, 16px);
 
     position: absolute;
@@ -413,7 +413,7 @@
     border: 1px solid transparent;
   }
 
-  .mdc-text-field__label {
+  .mdc-floating-label {
     @include mdc-rtl-reflexive-position(left, 1px);
 
     top: $label-offset-y;
diff --git a/packages/mdc-textfield/constants.js b/packages/mdc-textfield/constants.js
index eb64d2577da..cb9c72c9b55 100644
--- a/packages/mdc-textfield/constants.js
+++ b/packages/mdc-textfield/constants.js
@@ -19,7 +19,7 @@
 const strings = {
   ARIA_CONTROLS: 'aria-controls',
   INPUT_SELECTOR: '.mdc-text-field__input',
-  LABEL_SELECTOR: '.mdc-text-field__label',
+  LABEL_SELECTOR: '.mdc-floating-label',
   ICON_SELECTOR: '.mdc-text-field__icon',
   OUTLINE_SELECTOR: '.mdc-text-field__outline',
   BOTTOM_LINE_SELECTOR: '.mdc-line-ripple',
diff --git a/packages/mdc-textfield/helper-text/README.md b/packages/mdc-textfield/helper-text/README.md
index 0cb478d09b8..ec4f9565a49 100644
--- a/packages/mdc-textfield/helper-text/README.md
+++ b/packages/mdc-textfield/helper-text/README.md
@@ -32,7 +32,7 @@ Helper text gives context about a field’s input, such as how the input will be
 ```html
 <div class="mdc-text-field">
   <input type="text" id="username" class="mdc-text-field__input">
-  <label for="username" class="mdc-text-field__label">Username</label>
+  <label for="username" class="mdc-floating-label">Username</label>
   <div class="mdc-line-ripple"></div>
 </div>
 <p class="mdc-text-field-helper-text" aria-hidden="true">
@@ -51,7 +51,7 @@ the input element.
 ```html
 <div class="mdc-text-field">
   <input type="text" id="username" class="mdc-text-field__input" aria-controls="username-helper-text">
-  <label for="username" class="mdc-text-field__label">Username</label>
+  <label for="username" class="mdc-floating-label">Username</label>
   <div class="mdc-line-ripple"></div>
 </div>
 <p id="username-helper-text" class="mdc-text-field-helper-text" aria-hidden="true">
diff --git a/packages/mdc-textfield/icon/README.md b/packages/mdc-textfield/icon/README.md
index e38592d77af..77d8f6f0841 100644
--- a/packages/mdc-textfield/icon/README.md
+++ b/packages/mdc-textfield/icon/README.md
@@ -38,7 +38,7 @@ In text field box:
 <div class="mdc-text-field mdc-text-field--box mdc-text-field--with-leading-icon">
   <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
   <input type="text" id="my-input" class="mdc-text-field__input">
-  <label for="my-input" class="mdc-text-field__label">Your Name</label>
+  <label for="my-input" class="mdc-floating-label">Your Name</label>
   <div class="mdc-text-field__bottom-line"></div>
 </div>
 ```
@@ -48,7 +48,7 @@ In outlined text field:
 <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon">
   <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
   <input type="text" id="my-input" class="mdc-text-field__input">
-  <label for="my-input" class="mdc-text-field__label">Your Name</label>
+  <label for="my-input" class="mdc-floating-label">Your Name</label>
   <div class="mdc-text-field__outline">
     <svg>
       <path class="mdc-text-field__outline-path"/>
@@ -64,7 +64,7 @@ In text field box:
 ```html
 <div class="mdc-text-field mdc-text-field--box mdc-text-field--with-trailing-icon">
   <input type="text" id="my-input" class="mdc-text-field__input">
-  <label for="my-input" class="mdc-text-field__label">Your Name</label>
+  <label for="my-input" class="mdc-floating-label">Your Name</label>
   <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
   <div class="mdc-text-field__bottom-line"></div>
 </div>
@@ -74,7 +74,7 @@ In outlined text field:
 ```html
 <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
   <input type="text" id="my-input" class="mdc-text-field__input">
-  <label for="my-input" class="mdc-text-field__label">Your Name</label>
+  <label for="my-input" class="mdc-floating-label">Your Name</label>
   <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
   <div class="mdc-text-field__outline">
     <svg>
diff --git a/packages/mdc-textfield/icon/_mixins.scss b/packages/mdc-textfield/icon/_mixins.scss
index 8eb68c67f9c..6a323cec1f8 100644
--- a/packages/mdc-textfield/icon/_mixins.scss
+++ b/packages/mdc-textfield/icon/_mixins.scss
@@ -43,7 +43,7 @@
   // Only move the label's position to allow room for the icon, if the icon is on the same
   // side as the label. Aka the icon is on left side in a LTR context.
   @if ($position-property == left) {
-    .mdc-text-field__label {
+    .mdc-floating-label {
 	  @include mdc-rtl-reflexive-position($position-property, $padding);
     }
   }
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index b030e8a8bd0..3dffc7d0d24 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -85,7 +85,7 @@
 
   // Move label when text-field gets autofilled in Chrome
   // stylelint-disable plugin/selector-bem-pattern
-  &:-webkit-autofill + .mdc-text-field__label {
+  &:-webkit-autofill + .mdc-floating-label {
     transform: translateY(-100%) scale(.75);
     cursor: auto;
   }
@@ -164,7 +164,7 @@
     height: 48px;
   }
 
-  .mdc-text-field__label {
+  .mdc-floating-label {
     pointer-events: none;
   }
 }
@@ -242,12 +242,12 @@
 
 // Never show the idle outline when the label is floating, otherwise the label
 // will collide with the idle outline.
-.mdc-text-field__label--float-above ~ .mdc-text-field__idle-outline {
+.mdc-floating-label--float-above ~ .mdc-text-field__idle-outline {
   opacity: 0;
 }
 
 // Show the outline when the label is floating, since the outline has a
 // notch for the label to fit into.
-.mdc-text-field__label--float-above ~ .mdc-text-field__outline {
+.mdc-floating-label--float-above ~ .mdc-text-field__outline {
   opacity: 1;
 }
diff --git a/packages/mdc-textfield/outline/README.md b/packages/mdc-textfield/outline/README.md
index 4f8e3e03879..f62de540985 100644
--- a/packages/mdc-textfield/outline/README.md
+++ b/packages/mdc-textfield/outline/README.md
@@ -37,7 +37,7 @@ The outline is a border around all sides of the text field. This is used for the
 ```html
 <div class="mdc-text-field mdc-text-field--outlined">
   <input class="mdc-text-field__input" id="my-text-field-id" type="text">
-  <label class="mdc-text-field__label" for="my-text-field-id">Label</label>
+  <label class="mdc-floating-label" for="my-text-field-id">Label</label>
   <div class="mdc-text-field__outline">
     <svg>
       <path class="mdc-text-field__outline-path"/>
diff --git a/test/build/goldens/build-config-dev-env.golden.json b/test/build/goldens/build-config-dev-env.golden.json
index b42c53dda7f..362422c9279 100644
--- a/test/build/goldens/build-config-dev-env.golden.json
+++ b/test/build/goldens/build-config-dev-env.golden.json
@@ -119,6 +119,7 @@
                   "/packages/mdc-drawer/node_modules",
                   "/packages/mdc-elevation/node_modules",
                   "/packages/mdc-fab/node_modules",
+                  "/packages/mdc-floating-label/node_modules",
                   "/packages/mdc-form-field/node_modules",
                   "/packages/mdc-grid-list/node_modules",
                   "/packages/mdc-icon-toggle/node_modules",
diff --git a/test/build/goldens/build-config-no-env.golden.json b/test/build/goldens/build-config-no-env.golden.json
index 3500ac68ec1..e6baa3d35ab 100644
--- a/test/build/goldens/build-config-no-env.golden.json
+++ b/test/build/goldens/build-config-no-env.golden.json
@@ -63,6 +63,9 @@
       "drawer": [
         "/packages/mdc-drawer/index.js"
       ],
+      "floatingLabel": [
+        "/packages/mdc-floating-label/index.js"
+      ],
       "formField": [
         "/packages/mdc-form-field/index.js"
       ],
diff --git a/test/build/goldens/build-config-prod-env.golden.json b/test/build/goldens/build-config-prod-env.golden.json
index 7f072d81598..5f8f5e1e91c 100644
--- a/test/build/goldens/build-config-prod-env.golden.json
+++ b/test/build/goldens/build-config-prod-env.golden.json
@@ -63,6 +63,9 @@
       "drawer": [
         "/packages/mdc-drawer/index.js"
       ],
+      "floatingLabel": [
+        "/packages/mdc-floating-label/index.js"
+      ],
       "formField": [
         "/packages/mdc-form-field/index.js"
       ],
@@ -153,6 +156,7 @@
       "mdc.drawer": "/packages/mdc-drawer/mdc-drawer.scss",
       "mdc.elevation": "/packages/mdc-elevation/mdc-elevation.scss",
       "mdc.fab": "/packages/mdc-fab/mdc-fab.scss",
+      "mdc.floating-label": "/packages/mdc-floating-label/mdc-floating-label.scss",
       "mdc.form-field": "/packages/mdc-form-field/mdc-form-field.scss",
       "mdc.grid-list": "/packages/mdc-grid-list/mdc-grid-list.scss",
       "mdc.icon-toggle": "/packages/mdc-icon-toggle/mdc-icon-toggle.scss",
@@ -220,6 +224,7 @@
                   "/packages/mdc-drawer/node_modules",
                   "/packages/mdc-elevation/node_modules",
                   "/packages/mdc-fab/node_modules",
+                  "/packages/mdc-floating-label/node_modules",
                   "/packages/mdc-form-field/node_modules",
                   "/packages/mdc-grid-list/node_modules",
                   "/packages/mdc-icon-toggle/node_modules",
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 caca9d96ad9..96e654e61e4 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
@@ -19,23 +19,23 @@ import td from 'testdouble';
 
 import {verifyDefaultAdapter} from '../helpers/foundation';
 import {setupFoundationTest} from '../helpers/setup';
-import MDCTextFieldLabelFoundation from '../../../packages/mdc-textfield/label/foundation';
+import MDCFloatingLabelFoundation from '../../../packages/mdc-floating-label/foundation';
 
-const {cssClasses} = MDCTextFieldLabelFoundation;
+const {cssClasses} = MDCFloatingLabelFoundation;
 
-suite('MDCTextFieldLabelFoundation');
+suite('MDCFloatingLabelFoundation');
 
 test('exports cssClasses', () => {
-  assert.isOk('cssClasses' in MDCTextFieldLabelFoundation);
+  assert.isOk('cssClasses' in MDCFloatingLabelFoundation);
 });
 
 test('defaultAdapter returns a complete adapter implementation', () => {
-  verifyDefaultAdapter(MDCTextFieldLabelFoundation, [
+  verifyDefaultAdapter(MDCFloatingLabelFoundation, [
     'addClass', 'removeClass', 'getWidth',
   ]);
 });
 
-const setupTest = () => setupFoundationTest(MDCTextFieldLabelFoundation);
+const setupTest = () => setupFoundationTest(MDCFloatingLabelFoundation);
 
 test('#getWidth returns the width of the label element scaled by 75%', () => {
   const {foundation, mockAdapter} = setupTest();
diff --git a/test/unit/mdc-textfield/mdc-text-field-label.test.js b/test/unit/mdc-textfield/mdc-text-field-label.test.js
index 6ea3624e6a4..4103210e79f 100644
--- a/test/unit/mdc-textfield/mdc-text-field-label.test.js
+++ b/test/unit/mdc-textfield/mdc-text-field-label.test.js
@@ -17,21 +17,21 @@
 import bel from 'bel';
 import {assert} from 'chai';
 
-import {MDCTextFieldLabel} from '../../../packages/mdc-textfield/label';
+import {MDCFloatingLabel} from '../../../packages/mdc-floating-label/index';
 
 const getFixture = () => bel`
-  <div class="mdc-text-field__label"></div>
+  <div class="mdc-floating-label"></div>
 `;
 
-suite('MDCTextFieldLabel');
+suite('MDCFloatingLabel');
 
-test('attachTo returns an MDCTextFieldLabel instance', () => {
-  assert.isOk(MDCTextFieldLabel.attachTo(getFixture()) instanceof MDCTextFieldLabel);
+test('attachTo returns an MDCFloatingLabel instance', () => {
+  assert.isOk(MDCFloatingLabel.attachTo(getFixture()) instanceof MDCFloatingLabel);
 });
 
 function setupTest() {
   const root = getFixture();
-  const component = new MDCTextFieldLabel(root);
+  const component = new MDCFloatingLabel(root);
   return {root, component};
 }
 
diff --git a/test/unit/mdc-textfield/mdc-text-field.test.js b/test/unit/mdc-textfield/mdc-text-field.test.js
index c19fb5e5102..618b4758209 100644
--- a/test/unit/mdc-textfield/mdc-text-field.test.js
+++ b/test/unit/mdc-textfield/mdc-text-field.test.js
@@ -21,8 +21,9 @@ import {assert} from 'chai';
 
 import {MDCRipple} from '../../../packages/mdc-ripple';
 import {MDCLineRipple} from '../../../packages/mdc-line-ripple';
+import {MDCFloatingLabel} from '../../../packages/mdc-floating-label';
 import {MDCTextField, MDCTextFieldFoundation, MDCTextFieldHelperText,
-  MDCTextFieldIcon, MDCTextFieldLabel, MDCTextFieldOutline} from '../../../packages/mdc-textfield';
+  MDCTextFieldIcon, MDCTextFieldOutline} from '../../../packages/mdc-textfield';
 
 const {cssClasses} = MDCTextFieldFoundation;
 
@@ -30,7 +31,7 @@ const getFixture = () => bel`
   <div class="mdc-text-field">
     <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
     <input type="text" class="mdc-text-field__input" id="my-text-field">
-    <label class="mdc-text-field__label" for="my-text-field">My Label</label>
+    <label class="mdc-floating-label" for="my-text-field">My Label</label>
     <div class="mdc-line-ripple"></div>
   </div>
 `;
@@ -97,7 +98,7 @@ test('#constructor when given a `mdc-text-field--outlined` element instantiates
   const root = bel`
     <div class="mdc-text-field mdc-text-field--outlined">
       <input type="text" class="mdc-text-field__input" id="my-text-field">
-      <label class="mdc-text-field__label" for="my-text-field">My Label</label>
+      <label class="mdc-floating-label" for="my-text-field">My Label</label>
       <div class="mdc-text-field__outline"></div>
       <div class="mdc-text-field__idle-outline"></div>
     </div>
@@ -126,7 +127,7 @@ test('#constructor when given a `mdc-text-field--outlined` element, initializes
   const root = bel`
     <div class="mdc-text-field mdc-text-field--outlined">
       <input type="text" class="mdc-text-field__input" id="my-text-field">
-      <label class="mdc-text-field__label" for="my-text-field">My Label</label>
+      <label class="mdc-floating-label" for="my-text-field">My Label</label>
       <div class="mdc-text-field__outline"></div>
       <div class="mdc-text-field__idle-outline"></div>
     </div>
@@ -160,10 +161,10 @@ test('#constructor instantiates an icon on the `.mdc-text-field__icon` element i
   assert.instanceOf(component.icon_, MDCTextFieldIcon);
 });
 
-test('#constructor instantiates a label on the `.mdc-text-field__label` element if present', () => {
+test('#constructor instantiates a label on the `.mdc-floating-label` element if present', () => {
   const root = getFixture();
   const component = new MDCTextField(root);
-  assert.instanceOf(component.label_, MDCTextFieldLabel);
+  assert.instanceOf(component.label_, MDCFloatingLabel);
 });
 
 test('#constructor instantiates an outline on the `.mdc-text-field__outline` element if present', () => {
diff --git a/webpack.config.js b/webpack.config.js
index 63cbe4e9ae0..2ca686034d8 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -111,6 +111,7 @@ if (!env.isDev()) {
       chips: [path.resolve('./packages/mdc-chips/index.js')],
       dialog: [path.resolve('./packages/mdc-dialog/index.js')],
       drawer: [path.resolve('./packages/mdc-drawer/index.js')],
+      floatingLabel: [path.resolve('./packages/mdc-floating-label/index.js')],
       formField: [path.resolve('./packages/mdc-form-field/index.js')],
       gridList: [path.resolve('./packages/mdc-grid-list/index.js')],
       iconToggle: [path.resolve('./packages/mdc-icon-toggle/index.js')],
@@ -161,6 +162,7 @@ if (!env.isDev()) {
       'mdc.drawer': path.resolve('./packages/mdc-drawer/mdc-drawer.scss'),
       'mdc.elevation': path.resolve('./packages/mdc-elevation/mdc-elevation.scss'),
       'mdc.fab': path.resolve('./packages/mdc-fab/mdc-fab.scss'),
+      'mdc.floating-label': path.resolve('./packages/mdc-floating-label/mdc-floating-label.scss'),
       'mdc.form-field': path.resolve('./packages/mdc-form-field/mdc-form-field.scss'),
       'mdc.grid-list': path.resolve('./packages/mdc-grid-list/mdc-grid-list.scss'),
       'mdc.icon-toggle': path.resolve('./packages/mdc-icon-toggle/mdc-icon-toggle.scss'),

From 5a4500f80de6ed5487679fbd8450ca1bda5283ac Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Wed, 7 Feb 2018 16:59:58 -0800
Subject: [PATCH 03/47] fix(floating-label): fixed all tests

---
 packages/mdc-floating-label/mdc-floating-label.scss | 1 +
 test/build/goldens/build-config-no-env.golden.json  | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/packages/mdc-floating-label/mdc-floating-label.scss b/packages/mdc-floating-label/mdc-floating-label.scss
index 6e3017d84e9..30bfd29724b 100644
--- a/packages/mdc-floating-label/mdc-floating-label.scss
+++ b/packages/mdc-floating-label/mdc-floating-label.scss
@@ -19,6 +19,7 @@
 @import "@material/rtl/mixins";
 @import "@material/theme/variables";
 @import "@material/theme/mixins";
+@import "@material/floating-label/mixins";
 
 // postcss-bem-linter: define floating-label
 .mdc-floating-label {
diff --git a/test/build/goldens/build-config-no-env.golden.json b/test/build/goldens/build-config-no-env.golden.json
index e6baa3d35ab..fc97b890c79 100644
--- a/test/build/goldens/build-config-no-env.golden.json
+++ b/test/build/goldens/build-config-no-env.golden.json
@@ -156,6 +156,7 @@
       "mdc.drawer": "/packages/mdc-drawer/mdc-drawer.scss",
       "mdc.elevation": "/packages/mdc-elevation/mdc-elevation.scss",
       "mdc.fab": "/packages/mdc-fab/mdc-fab.scss",
+      "mdc.floating-label": "/packages/mdc-floating-label/mdc-floating-label.scss",
       "mdc.form-field": "/packages/mdc-form-field/mdc-form-field.scss",
       "mdc.grid-list": "/packages/mdc-grid-list/mdc-grid-list.scss",
       "mdc.icon-toggle": "/packages/mdc-icon-toggle/mdc-icon-toggle.scss",
@@ -223,6 +224,7 @@
                   "/packages/mdc-drawer/node_modules",
                   "/packages/mdc-elevation/node_modules",
                   "/packages/mdc-fab/node_modules",
+                  "/packages/mdc-floating-label/node_modules",
                   "/packages/mdc-form-field/node_modules",
                   "/packages/mdc-grid-list/node_modules",
                   "/packages/mdc-icon-toggle/node_modules",

From 324a6380ff56cb6c36fe7a9ca0f471bf58336885 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Wed, 7 Feb 2018 17:17:13 -0800
Subject: [PATCH 04/47] chore(floating-label): created test directory

---
 .../mdc-floating-label-foundation.test.js}                        | 0
 .../mdc-floating-label.test.js}                                   | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename test/unit/{mdc-textfield/mdc-text-field-label-foundation.test.js => mdc-floating-label/mdc-floating-label-foundation.test.js} (100%)
 rename test/unit/{mdc-textfield/mdc-text-field-label.test.js => mdc-floating-label/mdc-floating-label.test.js} (100%)

diff --git a/test/unit/mdc-textfield/mdc-text-field-label-foundation.test.js b/test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js
similarity index 100%
rename from test/unit/mdc-textfield/mdc-text-field-label-foundation.test.js
rename to test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js
diff --git a/test/unit/mdc-textfield/mdc-text-field-label.test.js b/test/unit/mdc-floating-label/mdc-floating-label.test.js
similarity index 100%
rename from test/unit/mdc-textfield/mdc-text-field-label.test.js
rename to test/unit/mdc-floating-label/mdc-floating-label.test.js

From 51f16f693ee77b2a190e972ee94db433b65657dc Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Fri, 9 Feb 2018 11:18:24 -0800
Subject: [PATCH 05/47] fix(floating-label): removed label foundation from
 text-field

---
 packages/mdc-floating-label/index.js | 26 ++++++++++++++++---
 packages/mdc-textfield/foundation.js | 38 ++++++++++------------------
 packages/mdc-textfield/index.js      | 19 +++++++++++++-
 3 files changed, 55 insertions(+), 28 deletions(-)

diff --git a/packages/mdc-floating-label/index.js b/packages/mdc-floating-label/index.js
index 9d9ba2a436b..a13347dbba2 100644
--- a/packages/mdc-floating-label/index.js
+++ b/packages/mdc-floating-label/index.js
@@ -34,10 +34,30 @@ class MDCFloatingLabel extends MDCComponent {
   }
 
   /**
-   * @return {!MDCFloatingLabelFoundation}.
+   * Styles the label to produce the label shake for errors.
+   * @param {boolean} isValid Whether the input's value is valid (passes all
+   *     validity checks).
+   * @param {boolean} isFocused Whether the input is focused.
    */
-  get foundation() {
-    return this.foundation_;
+  shake(isValid, isFocused) {
+    this.foundation_.styleShake(isValid, isFocused);
+  }
+
+  /**
+   * Styles the label to float or defloat as necessary.
+   * @param {string} value The value of the input.
+   * @param {boolean} isFocused Whether the input is focused.
+   * @param {boolean} isBadInput The input's `validity.badInput` value.
+   */
+  float(value, isFocused, isBadInput) {
+    this.foundation_.styleFloat(value, isFocused, isBadInput);
+  }
+
+  /**
+   * @return {number}
+   */
+  getWidth() {
+    return this.foundation_.getWidth();
   }
 
   /**
diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index 8a672dd60b5..52230ccd735 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -81,8 +81,6 @@ class MDCTextFieldFoundation extends MDCFoundation {
     this.helperText_ = foundationMap.helperText;
     /** @type {!MDCTextFieldIconFoundation|undefined} */
     this.icon_ = foundationMap.icon;
-    /** @type {!MDCFloatingLabelFoundation|undefined} */
-    this.label_ = foundationMap.label;
     /** @type {!MDCTextFieldOutlineFoundation|undefined} */
     this.outline_ = foundationMap.outline;
 
@@ -109,8 +107,8 @@ class MDCTextFieldFoundation extends MDCFoundation {
   init() {
     this.adapter_.addClass(MDCTextFieldFoundation.cssClasses.UPGRADED);
     // Ensure label does not collide with any pre-filled value.
-    if (this.label_ && this.getValue()) {
-      this.label_.styleFloat(
+    if (this.getValue()) {
+      this.adapter_.floatLabel(
         this.getValue(), this.isFocused_, this.isBadInput_());
     }
 
@@ -156,13 +154,13 @@ class MDCTextFieldFoundation extends MDCFoundation {
    * Updates the focus outline for outlined text fields.
    */
   updateOutline() {
-    if (!this.outline_ || !this.label_) {
+    if (!this.outline_ || !this.adapter_.hasLabel()) {
       return;
     }
 
     const isDense = this.adapter_.hasClass(cssClasses.DENSE);
     const labelScale = isDense ? numbers.DENSE_LABEL_SCALE : numbers.LABEL_SCALE;
-    const labelWidth = this.label_.getWidth() * labelScale;
+    const labelWidth = this.adapter_.getLabelWidth() * labelScale;
     const isRtl = this.adapter_.isRtl();
     this.outline_.updateSvgPath(labelWidth, isRtl);
   }
@@ -177,11 +175,9 @@ class MDCTextFieldFoundation extends MDCFoundation {
     if (this.outline_) {
       this.updateOutline();
     }
-    if (this.label_) {
-      this.label_.styleShake(this.isValid(), this.isFocused_);
-      this.label_.styleFloat(
-        this.getValue(), this.isFocused_, this.isBadInput_());
-    }
+    this.adapter_.shakeLabel(this.isValid(), this.isFocused_);
+    this.adapter_.floatLabel(
+      this.getValue(), this.isFocused_, this.isBadInput_());
     if (this.helperText_) {
       this.helperText_.showToScreenReader();
     }
@@ -220,11 +216,9 @@ class MDCTextFieldFoundation extends MDCFoundation {
     const isValid = this.isValid();
     this.styleValidity_(isValid);
     this.styleFocused_(this.isFocused_);
-    if (this.label_) {
-      this.label_.styleShake(this.isValid(), this.isFocused_);
-      this.label_.styleFloat(
-        this.getValue(), this.isFocused_, this.isBadInput_());
-    }
+    this.adapter_.shakeLabel(this.isValid(), this.isFocused_);
+    this.adapter_.floatLabel(
+      this.getValue(), this.isFocused_, this.isBadInput_());
     if (shouldRemoveLabelFloat) {
       this.receivedUserInput_ = false;
     }
@@ -244,11 +238,9 @@ class MDCTextFieldFoundation extends MDCFoundation {
     this.getNativeInput_().value = value;
     const isValid = this.isValid();
     this.styleValidity_(isValid);
-    if (this.label_) {
-      this.label_.styleShake(isValid, this.isFocused_);
-      this.label_.styleFloat(
-        this.getValue(), this.isFocused_, this.isBadInput_());
-    }
+    this.adapter_.shakeLabel(isValid, this.isFocused_);
+    this.adapter_.floatLabel(
+      this.getValue(), this.isFocused_, this.isBadInput_());
   }
 
   /**
@@ -269,9 +261,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
     // Retrieve from the getter to ensure correct logic is applied.
     isValid = this.isValid();
     this.styleValidity_(isValid);
-    if (this.label_) {
-      this.label_.styleShake(isValid, this.isFocused_);
-    }
+    this.adapter_.shakeLabel(isValid, this.isFocused_);
   }
 
   /**
diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
index 6ee9ec1b726..496bbcf341b 100644
--- a/packages/mdc-textfield/index.js
+++ b/packages/mdc-textfield/index.js
@@ -267,6 +267,24 @@ class MDCTextField extends MDCComponent {
             this.lineRipple_.setRippleCenter(normalizedX);
           }
         },
+        shakeLabel: (isValid, isFocused) => {
+          if (this.label_) {
+            this.label_.shake(isValid, isFocused);
+          }
+        },
+        floatLabel: (value, isFocused, isBadInput) => {
+          if (this.label_) {
+            this.label_.float(value, isFocused, isBadInput);
+          }
+        },
+        hasLabel: () => {
+          return !!this.label_;
+        },
+        getLabelWidth: () => {
+          if (this.label_) {
+            return this.label_.getWidth();
+          }
+        }
       },
       this.getInputAdapterMethods_())),
       this.getFoundationMap_());
@@ -295,7 +313,6 @@ class MDCTextField extends MDCComponent {
     return {
       helperText: this.helperText_ ? this.helperText_.foundation : undefined,
       icon: this.icon_ ? this.icon_.foundation : undefined,
-      label: this.label_ ? this.label_.foundation : undefined,
       outline: this.outline_ ? this.outline_.foundation : undefined,
     };
   }

From 6f9abdf4973fd5cc7ad505d7ddb9d4d55e347ac7 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Mon, 12 Feb 2018 12:16:41 -0800
Subject: [PATCH 06/47] fix(floating-label): tests

---
 packages/mdc-textfield/_mixins.scss           |   3 +-
 packages/mdc-textfield/foundation.js          |   4 +
 packages/mdc-textfield/index.js               |   2 +-
 .../mdc-floating-label-foundation.test.js     |   2 +-
 test/unit/mdc-textfield/foundation.test.js    | 120 ++++++++----------
 .../unit/mdc-textfield/mdc-text-field.test.js |   1 +
 6 files changed, 60 insertions(+), 72 deletions(-)

diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 9955181c320..83c28b9bcb0 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -157,9 +157,8 @@
   font-size: .813rem;
 }
 
-// TODO(mattgoo): can this be placed into the mdc-floating-label repo?
 @mixin mdc-required-text-field-label-asterisk_() {
-  .mdc-text-field__input:required + .mdc-text-field__label::after {
+  .mdc-text-field__input:required + .mdc-floating-label::after {
     @content;
   }
 }
diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index 52230ccd735..739b27b434d 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -67,6 +67,10 @@ class MDCTextFieldFoundation extends MDCFoundation {
       activateLineRipple: () => {},
       deactivateLineRipple: () => {},
       setLineRippleTransformOrigin: () => {},
+      shakeLabel: () => {},
+      floatLabel: () => {},
+      hasLabel: () => {},
+      getLabelWidth: () => {},
     });
   }
 
diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
index 496bbcf341b..22de3c08635 100644
--- a/packages/mdc-textfield/index.js
+++ b/packages/mdc-textfield/index.js
@@ -284,7 +284,7 @@ class MDCTextField extends MDCComponent {
           if (this.label_) {
             return this.label_.getWidth();
           }
-        }
+        },
       },
       this.getInputAdapterMethods_())),
       this.getFoundationMap_());
diff --git a/test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js b/test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js
index 96e654e61e4..c84ffdcfddf 100644
--- a/test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js
+++ b/test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js
@@ -75,7 +75,7 @@ test('#styleFloat with empty value and badInput does not touch floating label',
   td.verify(mockAdapter.removeClass(cssClasses.LABEL_FLOAT_ABOVE), {times: 0});
 });
 
-test('#styleShake updates shake class', () => {
+test('#shake updates shake class', () => {
   const {foundation, mockAdapter} = setupTest();
 
   foundation.styleShake(/* isValid */ false, /* isFocused */ false);
diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
index 33cee653ced..670863a7c25 100644
--- a/test/unit/mdc-textfield/foundation.test.js
+++ b/test/unit/mdc-textfield/foundation.test.js
@@ -42,7 +42,7 @@ test('defaultAdapter returns a complete adapter implementation', () => {
     'registerTextFieldInteractionHandler', 'deregisterTextFieldInteractionHandler',
     'registerInputInteractionHandler', 'deregisterInputInteractionHandler',
     'getNativeInput', 'isFocused', 'isRtl', 'activateLineRipple', 'deactivateLineRipple',
-    'setLineRippleTransformOrigin',
+    'setLineRippleTransformOrigin', 'shakeLabel', 'floatLabel', 'hasLabel', 'getLabelWidth',
   ]);
 });
 
@@ -59,25 +59,16 @@ const setupTest = () => {
     deregisterInteractionHandler: () => {},
     handleInteraction: () => {},
   });
-  const label = td.object({
-    getWidth: () => {},
-    floatAbove: () => {},
-    deactivateFocus: () => {},
-    setValidity: () => {},
-    styleShake: () => {},
-    styleFloat: () => {},
-  });
   const outline = td.object({
     updateSvgPath: () => {},
   });
   const foundationMap = {
     helperText: helperText,
     icon: icon,
-    label: label,
     outline: outline,
   };
   const foundation = new MDCTextFieldFoundation(mockAdapter, foundationMap);
-  return {foundation, mockAdapter, helperText, icon, label, outline};
+  return {foundation, mockAdapter, helperText, icon, outline};
 };
 
 test('#constructor sets disabled to false', () => {
@@ -86,7 +77,7 @@ test('#constructor sets disabled to false', () => {
 });
 
 const setupValueTest = (value, optIsValid, optIsBadInput) => {
-  const {foundation, mockAdapter, helperText, label} = setupTest();
+  const {foundation, mockAdapter, helperText} = setupTest();
   const nativeInput = {
     value: value,
     validity: {
@@ -97,7 +88,7 @@ const setupValueTest = (value, optIsValid, optIsBadInput) => {
   td.when(mockAdapter.getNativeInput()).thenReturn(nativeInput);
   foundation.init();
 
-  return {foundation, mockAdapter, helperText, label, nativeInput};
+  return {foundation, mockAdapter, helperText, nativeInput};
 };
 
 test('#getValue returns the field\'s value', () => {
@@ -111,41 +102,41 @@ test('#getValue returns the field\'s value', () => {
 
 test('#setValue with non-empty value styles the label', () => {
   const value = 'new value';
-  const {foundation, nativeInput, label} = setupValueTest('');
+  const {foundation, nativeInput, mockAdapter} = setupValueTest('');
   // Initial empty value should not float label.
-  td.verify(label.styleFloat('', /* isFocused */ false, /* isBadInput */ false), {times: 0});
+  td.verify(mockAdapter.floatLabel('', /* isFocused */ false, /* isBadInput */ false), {times: 0});
   nativeInput.value = value;
   foundation.setValue(value);
-  td.verify(label.styleShake(/* isValid */ true, /* isFocused */ false));
-  td.verify(label.styleFloat(value, /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(/* isValid */ true, /* isFocused */ false));
+  td.verify(mockAdapter.floatLabel(value, /* isFocused */ false, /* isBadInput */ false));
 });
 
 test('#setValue with empty value styles the label', () => {
-  const {foundation, nativeInput, label} = setupValueTest('old value');
+  const {foundation, nativeInput, mockAdapter} = setupValueTest('old value');
   // Initial value should float the label.
-  td.verify(label.styleFloat('old value', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.floatLabel('old value', /* isFocused */ false, /* isBadInput */ false));
   nativeInput.value = '';
   foundation.setValue('');
-  td.verify(label.styleShake(/* isValid */ true, /* isFocused */ false));
-  td.verify(label.styleFloat('', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(/* isValid */ true, /* isFocused */ false));
+  td.verify(mockAdapter.floatLabel('', /* isFocused */ false, /* isBadInput */ false));
 });
 
 test('#setValue valid and invalid input', () => {
-  const {foundation, mockAdapter, nativeInput, helperText, label} =
+  const {foundation, mockAdapter, nativeInput, helperText} =
     setupValueTest('', /* isValid */ false);
 
   foundation.setValue('invalid');
   td.verify(mockAdapter.addClass(cssClasses.INVALID));
   td.verify(helperText.setValidity(false));
-  td.verify(label.styleShake(/* isValid */ false, /* isFocused */ false));
-  td.verify(label.styleFloat('invalid', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(/* isValid */ false, /* isFocused */ false));
+  td.verify(mockAdapter.floatLabel('invalid', /* isFocused */ false, /* isBadInput */ false));
 
   nativeInput.validity.valid = true;
   foundation.setValue('valid');
   td.verify(mockAdapter.removeClass(cssClasses.INVALID));
   td.verify(helperText.setValidity(true));
-  td.verify(label.styleShake(/* isValid */ true, /* isFocused */ false));
-  td.verify(label.styleFloat('valid', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(/* isValid */ true, /* isFocused */ false));
+  td.verify(mockAdapter.floatLabel('valid', /* isFocused */ false, /* isBadInput */ false));
 });
 
 test('#setValue does not affect focused state', () => {
@@ -183,17 +174,17 @@ test('#setValid overrides native validation', () => {
 });
 
 test('#setValid updates classes', () => {
-  const {foundation, mockAdapter, helperText, label} = setupTest();
+  const {foundation, mockAdapter, helperText} = setupTest();
 
   foundation.setValid(false);
   td.verify(mockAdapter.addClass(cssClasses.INVALID));
   td.verify(helperText.setValidity(false));
-  td.verify(label.styleShake(/* isValid */ false, /* isFocused */ false));
+  td.verify(mockAdapter.shakeLabel(/* isValid */ false, /* isFocused */ false));
 
   foundation.setValid(true);
   td.verify(mockAdapter.removeClass(cssClasses.INVALID));
   td.verify(helperText.setValidity(true));
-  td.verify(label.styleShake(/* isValid */ true, /* isFocused */ false));
+  td.verify(mockAdapter.shakeLabel(/* isValid */ true, /* isFocused */ false));
 
   // None of these is affected by setValid.
   td.verify(mockAdapter.addClass(cssClasses.FOCUSED), {times: 0});
@@ -336,7 +327,7 @@ test('#destroy removes event listeners', () => {
 });
 
 test('#init floats label if the input contains a value', () => {
-  const {foundation, mockAdapter, label} = setupTest();
+  const {foundation, mockAdapter} = setupTest();
   td.when(mockAdapter.getNativeInput()).thenReturn({
     value: 'Pre-filled value',
     disabled: false,
@@ -345,11 +336,11 @@ test('#init floats label if the input contains a value', () => {
     },
   });
   foundation.init();
-  td.verify(label.styleFloat('Pre-filled value', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.floatLabel('Pre-filled value', /* isFocused */ false, /* isBadInput */ false));
 });
 
 test('#init does not float label if the input does not contain a value', () => {
-  const {foundation, mockAdapter, label} = setupTest();
+  const {foundation, mockAdapter} = setupTest();
   td.when(mockAdapter.getNativeInput()).thenReturn({
     value: '',
     disabled: false,
@@ -358,7 +349,7 @@ test('#init does not float label if the input does not contain a value', () => {
     },
   });
   foundation.init();
-  td.verify(label.styleFloat(/* value */ '', /* isFocused */ false, /* isBadInput */ false), {times: 0});
+  td.verify(mockAdapter.floatLabel(/* value */ '', /* isFocused */ false, /* isBadInput */ false), {times: 0});
 });
 
 test('#setHelperTextContent sets the content of the helper text element', () => {
@@ -368,8 +359,9 @@ 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);
+  const {foundation, mockAdapter, outline} = setupTest();
+  td.when(mockAdapter.getLabelWidth()).thenReturn(30);
+  td.when(mockAdapter.hasLabel()).thenReturn(true);
   td.when(mockAdapter.hasClass(cssClasses.DENSE)).thenReturn(false);
   td.when(mockAdapter.isRtl()).thenReturn(false);
 
@@ -378,8 +370,9 @@ test('#updateOutline updates the SVG path of the outline element', () => {
 });
 
 test('#updateOutline updates the SVG path of the outline element when dense', () => {
-  const {foundation, mockAdapter, label, outline} = setupTest();
-  td.when(label.getWidth()).thenReturn(30);
+  const {foundation, mockAdapter, outline} = setupTest();
+  td.when(mockAdapter.getLabelWidth()).thenReturn(30);
+  td.when(mockAdapter.hasLabel()).thenReturn(true);
   td.when(mockAdapter.hasClass(cssClasses.DENSE)).thenReturn(true);
   td.when(mockAdapter.isRtl()).thenReturn(false);
 
@@ -389,18 +382,9 @@ test('#updateOutline updates the SVG path of the outline element when dense', ()
 
 const setupBareBonesTest = () => {
   const mockAdapter = td.object(MDCTextFieldFoundation.defaultAdapter);
-  const label = td.object({
-    getWidth: () => {},
-    floatAbove: () => {},
-    deactivateFocus: () => {},
-    setValidity: () => {},
-    style: () => {},
-  });
-  const foundationMap = {
-    label: label,
-  };
+  const foundationMap = {};
   const foundation = new MDCTextFieldFoundation(mockAdapter, foundationMap);
-  return {foundation, mockAdapter, label};
+  return {foundation, mockAdapter};
 };
 
 test('#updateOutline does nothing if no outline is present', () => {
@@ -411,7 +395,7 @@ test('#updateOutline does nothing if no outline is present', () => {
 });
 
 test('on input styles label if input event occurs without any other events', () => {
-  const {foundation, mockAdapter, label} = setupTest();
+  const {foundation, mockAdapter} = setupTest();
   let input;
 
   td.when(mockAdapter.registerInputInteractionHandler('input', td.matchers.isA(Function)))
@@ -419,14 +403,14 @@ test('on input styles label if input event occurs without any other events', ()
       input = handler;
     });
   foundation.init();
-  td.verify(label.styleFloat(), {times: 0});
+  td.verify(mockAdapter.floatLabel(), {times: 0});
   input();
-  td.verify(label.styleShake(/* isValid */ true, /* isFocused */ true));
-  td.verify(label.styleFloat(/* value */ '', /* isFocused */ true, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(/* isValid */ true, /* isFocused */ true));
+  td.verify(mockAdapter.floatLabel(/* value */ '', /* isFocused */ true, /* isBadInput */ false));
 });
 
 test('on input does nothing if input event preceded by keydown event', () => {
-  const {foundation, mockAdapter, label} = setupTest();
+  const {foundation, mockAdapter} = setupTest();
   const mockEvt = {
     type: 'keydown',
     key: 'Enter',
@@ -449,8 +433,8 @@ test('on input does nothing if input event preceded by keydown event', () => {
   foundation.init();
   keydown(mockEvt);
   input();
-  td.verify(label.styleShake(), {times: 0});
-  td.verify(label.styleFloat(), {times: 0});
+  td.verify(mockAdapter.shakeLabel(), {times: 0});
+  td.verify(mockAdapter.floatLabel(), {times: 0});
 });
 
 test('on focus adds mdc-text-field--focused class', () => {
@@ -478,16 +462,16 @@ test('on focus activates line ripple', () => {
 });
 
 test('on focus styles label', () => {
-  const {foundation, mockAdapter, label} = setupTest();
+  const {foundation, mockAdapter} = setupTest();
   let focus;
   td.when(mockAdapter.registerInputInteractionHandler('focus', td.matchers.isA(Function)))
     .thenDo((evtType, handler) => {
       focus = handler;
     });
   foundation.init();
-  td.verify(label.styleFloat(/* value */ '', /* isFocused */ false, /* isBadInput */ false), {times: 0});
+  td.verify(mockAdapter.floatLabel(/* value */ '', /* isFocused */ false, /* isBadInput */ false), {times: 0});
   focus();
-  td.verify(label.styleShake(/* isValid */ true, /* isFocused */ true));
+  td.verify(mockAdapter.shakeLabel(/* isValid */ true, /* isFocused */ true));
 });
 
 test('on focus makes helper text visible to the screen reader', () => {
@@ -503,7 +487,7 @@ test('on focus makes helper text visible to the screen reader', () => {
 });
 
 const setupBlurTest = () => {
-  const {foundation, mockAdapter, helperText, label} = setupTest();
+  const {foundation, mockAdapter, helperText} = setupTest();
   let blur;
   td.when(mockAdapter.registerInputInteractionHandler('blur', td.matchers.isA(Function))).thenDo((evtType, handler) => {
     blur = handler;
@@ -518,7 +502,7 @@ const setupBlurTest = () => {
   td.when(mockAdapter.getNativeInput()).thenReturn(nativeInput);
   foundation.init();
 
-  return {foundation, mockAdapter, blur, nativeInput, helperText, label};
+  return {foundation, mockAdapter, blur, nativeInput, helperText};
 };
 
 test('on blur removes mdc-text-field--focused class', () => {
@@ -528,20 +512,20 @@ test('on blur removes mdc-text-field--focused class', () => {
 });
 
 test('on blur styles label when no input value present and validity checks pass', () => {
-  const {blur, label} = setupBlurTest();
-  td.verify(label.styleFloat(/* value */ '', /* isFocused */ false), {times: 0});
+  const {blur, mockAdapter} = setupBlurTest();
+  td.verify(mockAdapter.floatLabel(/* value */ '', /* isFocused */ false), {times: 0});
   blur();
-  td.verify(label.styleShake(/* isValid */ true, /* isFocused */ false));
-  td.verify(label.styleFloat(/* value */ '', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(/* isValid */ true, /* isFocused */ false));
+  td.verify(mockAdapter.floatLabel(/* value */ '', /* isFocused */ false, /* isBadInput */ false));
 });
 
 test('on blur styles label if input has a value', () => {
-  const {blur, nativeInput, label} = setupBlurTest();
-  td.verify(label.styleFloat(/* value */ '', /* isFocused */ false), {times: 0});
+  const {blur, nativeInput, mockAdapter} = setupBlurTest();
+  td.verify(mockAdapter.floatLabel(/* value */ '', /* isFocused */ false), {times: 0});
   nativeInput.value = 'non-empty value';
   blur();
-  td.verify(label.styleShake(/* isValid */ true, /* isFocused */ false));
-  td.verify(label.styleFloat('non-empty value', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(/* isValid */ true, /* isFocused */ false));
+  td.verify(mockAdapter.floatLabel('non-empty value', /* isFocused */ false, /* isBadInput */ false));
 });
 
 test('on blur removes mdc-text-field--invalid if custom validity is false and' +
diff --git a/test/unit/mdc-textfield/mdc-text-field.test.js b/test/unit/mdc-textfield/mdc-text-field.test.js
index 618b4758209..384391ad404 100644
--- a/test/unit/mdc-textfield/mdc-text-field.test.js
+++ b/test/unit/mdc-textfield/mdc-text-field.test.js
@@ -76,6 +76,7 @@ class FakeIcon {
 class FakeLabel {
   constructor() {
     this.destroy = td.func('.destroy');
+    this.shake = td.func('.shake');
   }
 }
 

From 024ff39e38c2397524829aebec9b0e3881aed341 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Mon, 12 Feb 2018 14:48:02 -0800
Subject: [PATCH 07/47] fix(floating-label): updated readmes to reflect changes
 to floating-label

---
 README.md                                     |  2 +-
 demos/text-field.scss                         |  1 +
 demos/theme/theme-dark.scss                   |  1 +
 docs/docsite-index.md                         | 12 ++++-----
 docs/getting-started.md                       |  6 ++---
 docs/migrating-from-mdl.md                    |  6 ++---
 packages/mdc-floating-label/README.md         | 15 ++++++++---
 packages/mdc-textfield/README.md              |  3 +--
 packages/mdc-textfield/adapter.js             | 27 +++++++++++++++++++
 .../mdc-floating-label-foundation.test.js     |  2 +-
 10 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/README.md b/README.md
index d96c2c3f7a6..547c7044fb1 100644
--- a/README.md
+++ b/README.md
@@ -47,7 +47,7 @@ Then simply include the correct files, write some HTML, and call `mdc.autoInit()
     <h2 class="mdc-typography--display2">Hello, Material Components!</h2>
     <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
       <input type="text" class="mdc-text-field__input" id="demo-input">
-      <label for="demo-input" class="mdc-text-field__label">Tell us how you feel!</label>
+      <label for="demo-input" class="mdc-floating-label">Tell us how you feel!</label>
     </div>
     <script src="node_modules/material-components-web/dist/material-components-web.js"></script>
     <script>mdc.autoInit()</script>
diff --git a/demos/text-field.scss b/demos/text-field.scss
index 9844bfb847b..afa52b30ded 100644
--- a/demos/text-field.scss
+++ b/demos/text-field.scss
@@ -17,6 +17,7 @@
 @import "./common";
 @import "../packages/mdc-form-field/mdc-form-field";
 @import "../packages/mdc-textfield/mdc-text-field";
+@import "../packages/mdc-floating-label/mixins";
 
 // stylelint-disable selector-class-pattern
 .demo-text-field-custom-colors:not(.mdc-text-field--invalid) {
diff --git a/demos/theme/theme-dark.scss b/demos/theme/theme-dark.scss
index b2b978d92ed..fd77c8e923c 100644
--- a/demos/theme/theme-dark.scss
+++ b/demos/theme/theme-dark.scss
@@ -25,6 +25,7 @@ $mdc-theme-background: $material-color-grey-900;
 @import "../../packages/mdc-checkbox/mixins";
 @import "../../packages/mdc-radio/mixins";
 @import "../../packages/mdc-textfield/mixins";
+@import "../../packages/mdc-floating-label/mixins";
 
 // TODO: Call theme mixins for mdc-select
 
diff --git a/docs/docsite-index.md b/docs/docsite-index.md
index 26f97ff772f..26473fe66a6 100644
--- a/docs/docsite-index.md
+++ b/docs/docsite-index.md
@@ -35,9 +35,9 @@ Get up and running with Material Components for web
     ```
 
 2.  {: .step-list-item } ### Include the stylesheet
-    
+
     Include the MDC Web stylesheet in the head of your file
-    
+
     ```html
     <html>
       <head>
@@ -56,14 +56,14 @@ Get up and running with Material Components for web
         <h2 class="mdc-typography--display2">Hello, Material Components!</h2>
         <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
           <input type="text" class="mdc-text-field__input" id="demo-input">
-          <label for="demo-input" class="mdc-text-field__label">Tell us how you feel!</label>
+          <label for="demo-input" class="mdc-floating-label">Tell us how you feel!</label>
         </div>
       </body>
     ```
 
 4.  {: .step-list-item } ### Add scripts and instantiate
 
-    Add the MDC Web scripts and call MDC Auto Init. 
+    Add the MDC Web scripts and call MDC Auto Init.
 
     ```html
     <script src="node_modules/material-components-web/dist/material-components-web.js"></script>
@@ -71,7 +71,7 @@ Get up and running with Material Components for web
     ```
 
     A full example of the HTML could look like this:
-    
+
     ```html
     <!DOCTYPE html>
     <html>
@@ -84,7 +84,7 @@ Get up and running with Material Components for web
         <h2 class="mdc-typography--display2">Hello, Material Components!</h2>
         <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
           <input type="text" class="mdc-text-field__input" id="demo-input">
-          <label for="demo-input" class="mdc-text-field__label">Tell us how you feel!</label>
+          <label for="demo-input" class="mdc-floating-label">Tell us how you feel!</label>
         </div>
         <script src="node_modules/material-components-web/dist/material-components-web.js"></script>
         <script>mdc.autoInit()</script>
diff --git a/docs/getting-started.md b/docs/getting-started.md
index ceab5f2e272..037c69e3a11 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -112,7 +112,7 @@ Replace the contents of the `<body>` tag in `index.html` with the following:
       <div class="mdc-form-field">
         <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
           <input id="firstname" type="text" class="mdc-text-field__input">
-          <label for="firstname" class="mdc-text-field__label">
+          <label for="firstname" class="mdc-floating-label">
             First Name
           </label>
           <div class="mdc-line-ripple"></div>
@@ -122,7 +122,7 @@ Replace the contents of the `<body>` tag in `index.html` with the following:
       <div class="mdc-form-field">
         <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
           <input id="lastname" type="text" class="mdc-text-field__input">
-          <label for="lastname" class="mdc-text-field__label">
+          <label for="lastname" class="mdc-floating-label">
             Last Name
           </label>
           <div class="mdc-line-ripple"></div>
@@ -282,7 +282,7 @@ how to easily add components to a page, and how to customize and theme MDC Web t
 ## Next steps
 
 If you're looking to incorporate MDC Web Components into a framework like Angular or React, check our
-[framework integration guide](./integrating-into-frameworks.md). 
+[framework integration guide](./integrating-into-frameworks.md).
 
 If you'd like to contribute to
 MDC Web and build your own components, or extend one of ours to fit your own purposes, check out our
diff --git a/docs/migrating-from-mdl.md b/docs/migrating-from-mdl.md
index 1f5f6d4a62a..af4c3fc3930 100644
--- a/docs/migrating-from-mdl.md
+++ b/docs/migrating-from-mdl.md
@@ -92,7 +92,7 @@ MDC Web:
 ```html
 <div class="mdc-text-field">
   <input class="mdc-text-field__input" type="text" id="input">
-  <label for="input" class="mdc-text-field__label">Input Label</label>
+  <label for="input" class="mdc-floating-label">Input Label</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
@@ -118,7 +118,7 @@ element, with the component’s class name as the value. For example:
 ```html
 <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
   <input class="mdc-text-field__input" type="text" id="input">
-  <label for="input" class="mdc-text-field__label">Input Label</label>
+  <label for="input" class="mdc-floating-label">Input Label</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
@@ -199,7 +199,7 @@ Like in MDL, styling components with CSS classes is simply a matter of applied t
 ```html
 <div class="mdc-text-field">
   <input type="text" id="my-text-field" class="mdc-text-field__input">
-  <label class="mdc-text-field__label" for="my-text-field">Hint text</label>
+  <label class="mdc-floating-label" for="my-text-field">Hint text</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
diff --git a/packages/mdc-floating-label/README.md b/packages/mdc-floating-label/README.md
index e0e24f8f63f..d6fd9d50492 100644
--- a/packages/mdc-floating-label/README.md
+++ b/packages/mdc-floating-label/README.md
@@ -50,7 +50,7 @@ It's also possible to wrap `mdc-text-field__input` within a `<label>` to avoid d
 </label>
 ```
 
-> _NOTE_: Only place an `mdc-floating-label` inside of a text field _if you plan on using
+> _NOTE_: Only place a `mdc-floating-label` inside of a text field _if you plan on using
 > Javascript_. Otherwise, the label must go outside of the text-field, as shown below.
 
 #### Single Line, CSS Only
@@ -71,13 +71,20 @@ CSS Class | Description
 `mdc-floating-label--float-above` | Indicates the label is floating above the text field
 `mdc-floating-label--shake` | Shakes the label
 
-<!-- TODO(mattgoo): add ### SCSS Classes -->
+### SCSS Mixins
+
+Mixin | Description
+--- | ---
+`mdc-floating-label-color($color)` | Customizes the color of the label.
 
 ### `MDCFloatingLabel`
 
-##### `MDCFloatingLabel.foundation`
+Method Signature | Description
+--- | ---
+`shake(isValid: boolean, isFocused: boolean) => void` | Shakes label when invalid
+`float(value: string/number, isFocused: boolean, isBadInput: boolean) => void` | Floats label above text field or select
+`getWidth() => number` | Returns the width of the label element
 
-This allows the parent `MDCTextField` or `MDCSelect` component to access the public methods on the `MDCFloatingLabelFoundation` class.
 
 ### `MDCFloatingLabelAdapter`
 
diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
index e6324939f3c..c3ba9d10dbe 100644
--- a/packages/mdc-textfield/README.md
+++ b/packages/mdc-textfield/README.md
@@ -177,7 +177,6 @@ Mixin | Description
 `mdc-text-field-box-corner-radius($radius)` | Customizes the border radius for a box text field
 `mdc-text-field-textarea-corner-radius($radius)` | Customizes the border radius for a `<textarea>` text field
 `mdc-text-field-ink-color($color)` | Customizes the text entered into the text-field.
-`mdc-floating-label-color($color)` | Customizes the label color of the text-field.
 `mdc-text-field-line-ripple-color($color)` | Customizes the color of the default line ripple of the text-field.
 `mdc-text-field-hover-line-ripple-color($color)` | Customizes the hover color of the line ripple of the text-field.
 `mdc-text-field-focused-line-ripple-color($color)` | Customizes the line-ripple ripple color when the text-field is focused.
@@ -254,4 +253,4 @@ Method Signature | Description
 `setHelperTextContent(content: string) => void` | Sets the content of the helper text
 `updateOutline() => void` | Updates the focus outline for outlined text fields
 
-`MDCTextFieldFoundation` supports multiple optional sub-elements: line ripple, helper text, icon, label, and outline. The foundations of these sub-elements must be passed in as constructor arguments to `MDCTextFieldFoundation`.
+`MDCTextFieldFoundation` supports multiple optional sub-elements: line ripple, helper text, icon, and outline. The foundations of these sub-elements must be passed in as constructor arguments to `MDCTextFieldFoundation`.
diff --git a/packages/mdc-textfield/adapter.js b/packages/mdc-textfield/adapter.js
index 5b998bbae80..c959d834c05 100644
--- a/packages/mdc-textfield/adapter.js
+++ b/packages/mdc-textfield/adapter.js
@@ -146,6 +146,33 @@ class MDCTextFieldAdapter {
    * @param {number} normalizedX
    */
   setLineRippleTransformOrigin(normalizedX) {}
+
+  /**
+   * Shakes the floating label.
+   * @param {boolean} isValid
+   * @param {boolean} isFocused
+   */
+  shakeLabel(isValid, isFocused) {}
+
+  /**
+   * Floats the floating label element above the text-field
+   * @param {string|number} value
+   * @param {boolean} isValid
+   * @param {boolean} isBadInput
+   */
+  floatLabel(value, isFocused, isBadInput) {}
+
+  /**
+   * Sets the transform origin of the line ripple.
+   * @return {boolean}
+   */
+  hasLabel() {}
+
+  /**
+   * Get width of label in pixels
+   * @return {number}
+   */
+  getLabelWidth() {}
 }
 
 export {MDCTextFieldAdapter, NativeInputType, FoundationMapType};
diff --git a/test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js b/test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js
index c84ffdcfddf..96e654e61e4 100644
--- a/test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js
+++ b/test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js
@@ -75,7 +75,7 @@ test('#styleFloat with empty value and badInput does not touch floating label',
   td.verify(mockAdapter.removeClass(cssClasses.LABEL_FLOAT_ABOVE), {times: 0});
 });
 
-test('#shake updates shake class', () => {
+test('#styleShake updates shake class', () => {
   const {foundation, mockAdapter} = setupTest();
 
   foundation.styleShake(/* isValid */ false, /* isFocused */ false);

From 2f72c61791706a833e11beaadd05aa74578af3b7 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Mon, 12 Feb 2018 14:53:19 -0800
Subject: [PATCH 08/47] fix(floating-label): closure annotation

---
 packages/mdc-textfield/adapter.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mdc-textfield/adapter.js b/packages/mdc-textfield/adapter.js
index c959d834c05..c4aa2b0d0ac 100644
--- a/packages/mdc-textfield/adapter.js
+++ b/packages/mdc-textfield/adapter.js
@@ -157,7 +157,7 @@ class MDCTextFieldAdapter {
   /**
    * Floats the floating label element above the text-field
    * @param {string|number} value
-   * @param {boolean} isValid
+   * @param {boolean} isFocused
    * @param {boolean} isBadInput
    */
   floatLabel(value, isFocused, isBadInput) {}

From f4521259c6bb9bd25dc17d78ab5c8cea7a333e7d Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Mon, 12 Feb 2018 15:26:23 -0800
Subject: [PATCH 09/47] chore(floating-label): moved text-field-placeholder css
 rule into text-field

---
 packages/mdc-floating-label/_mixins.scss   | 11 ++---------
 packages/mdc-textfield/_mixins.scss        | 22 ++++++++++++++++++----
 packages/mdc-textfield/mdc-text-field.scss |  2 +-
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/packages/mdc-floating-label/_mixins.scss b/packages/mdc-floating-label/_mixins.scss
index aa56ced3980..594a98903cc 100644
--- a/packages/mdc-floating-label/_mixins.scss
+++ b/packages/mdc-floating-label/_mixins.scss
@@ -19,8 +19,8 @@
 // Public
 
 @mixin mdc-floating-label-color($color) {
-  &:not(.mdc-text-field--disabled) {
-    @include mdc-floating-label-color_($color);
+  .mdc-floating-label {
+    @include mdc-theme-prop(color, $color);
   }
 }
 
@@ -79,13 +79,6 @@
   }
 }
 
-@mixin mdc-floating-label-color_($color) {
-  .mdc-floating-label,
-  .mdc-text-field__input::placeholder { // placeholder used in place of label on css only version
-    @include mdc-theme-prop(color, $color);
-  }
-}
-
 // Used for textarea in case of scrolling
 @mixin mdc-floating-label-background-color_($color) {
   .mdc-floating-label {
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 83c28b9bcb0..d16e2fdf044 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -101,6 +101,12 @@
   }
 }
 
+@mixin mdc-text-field-label-color($color) {
+  &:not(.mdc-text-field--disabled) {
+    @include mdc-text-field-label-color_($color);
+  }
+}
+
 // Private mixins
 
 // Baseline
@@ -108,7 +114,7 @@
 @mixin mdc-text-field-disabled_ {
   @include mdc-text-field-bottom-line-color_($mdc-text-field-disabled-border);
   @include mdc-text-field-ink-color_(text-disabled-on-background);
-  @include mdc-floating-label-color_(text-disabled-on-background);
+  @include mdc-text-field-label-color_(text-disabled-on-background);
   @include mdc-text-field-helper-text-color_(text-disabled-on-background);
   @include mdc-text-field-icon-color_($mdc-text-field-disabled-icon);
   @include mdc-text-field-fullwidth-bottom-line-color_($mdc-text-field-divider);
@@ -128,7 +134,7 @@
   @include mdc-text-field-bottom-line-color($mdc-text-field-error);
   @include mdc-text-field-hover-bottom-line-color($mdc-text-field-error);
   @include mdc-text-field-line-ripple-color($mdc-text-field-error);
-  @include mdc-floating-label-color($mdc-text-field-error);
+  @include mdc-text-field-label-color($mdc-text-field-error);
   @include mdc-text-field-helper-text-validation-color($mdc-text-field-error);
 
   + .mdc-text-field-helper-text--validation-msg {
@@ -137,7 +143,7 @@
 }
 
 @mixin mdc-text-field-focused_ {
-  @include mdc-floating-label-color(primary);
+  @include mdc-text-field-label-color(primary);
 
   @include mdc-required-text-field-label-asterisk_ {
     color: $mdc-text-field-error;
@@ -295,7 +301,7 @@
 @mixin mdc-text-field-box-disabled_ {
   @include mdc-text-field-box-fill-color_($mdc-text-field-box-disabled-background);
   @include mdc-text-field-bottom-line-color_($mdc-text-field-outlined-disabled-border);
-  @include mdc-floating-label-color(text-hint-on-background);
+  @include mdc-text-field-label-color(text-hint-on-background);
 
   border-bottom: none;
 }
@@ -475,3 +481,11 @@
     @include mdc-line-ripple-color($color);
   }
 }
+
+@mixin mdc-text-field-label-color_($color) {
+  @include mdc-floating-label-color($color);
+
+  .mdc-text-field__input::placeholder { // placeholder used in place of label on css only version
+    @include mdc-theme-prop(color, $color);
+  }
+}
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index 8bc5661880f..db5d52f6ec1 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -37,7 +37,7 @@
   @include mdc-text-field-hover-bottom-line-color($mdc-text-field-underline-hover);
   @include mdc-text-field-line-ripple-color_(primary);
   @include mdc-text-field-ink-color(text-primary-on-background);
-  @include mdc-floating-label-color($mdc-text-field-label);
+  @include mdc-text-field-label-color($mdc-text-field-label);
   @include mdc-text-field-helper-text-color(text-hint-on-background);
   @include mdc-text-field-fullwidth-bottom-line-color($mdc-text-field-divider);
   @include mdc-text-field-icon-color($mdc-text-field-underline-hover);

From 4a9846c9bd4951c415d53cfe1e2b8b0324455613 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Mon, 12 Feb 2018 16:30:04 -0800
Subject: [PATCH 10/47] chore(text-field): moved invalid label keyframe
 animation shakes to text-field mixins

---
 packages/mdc-floating-label/README.md         |  4 ++
 packages/mdc-floating-label/_mixins.scss      | 19 ++------
 packages/mdc-floating-label/_variables.scss   | 10 ----
 .../mdc-floating-label.scss                   |  4 +-
 packages/mdc-textfield/_mixins.scss           | 46 +++++++++++--------
 packages/mdc-textfield/_variables.scss        | 12 +++++
 6 files changed, 50 insertions(+), 45 deletions(-)

diff --git a/packages/mdc-floating-label/README.md b/packages/mdc-floating-label/README.md
index d6fd9d50492..f0d7742c90b 100644
--- a/packages/mdc-floating-label/README.md
+++ b/packages/mdc-floating-label/README.md
@@ -76,6 +76,10 @@ CSS Class | Description
 Mixin | Description
 --- | ---
 `mdc-floating-label-color($color)` | Customizes the color of the label.
+`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.
+`mdc-floating-label-invalid-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Creates a shake keyframe animation for invalid label shake. To be used with sass mixin `mdc-floating-label-shake($modifier)`.
+`mdc-floating-label-shake($modifier)` | Applies shake keyframe animation to label.
+`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.
 
 ### `MDCFloatingLabel`
 
diff --git a/packages/mdc-floating-label/_mixins.scss b/packages/mdc-floating-label/_mixins.scss
index 594a98903cc..5a7c5de1f10 100644
--- a/packages/mdc-floating-label/_mixins.scss
+++ b/packages/mdc-floating-label/_mixins.scss
@@ -24,9 +24,7 @@
   }
 }
 
-// Private
-
-@mixin mdc-floating-label-invalid-shake-keyframes_($modifier, $positionY, $positionX: 0%, $scale: .75) {
+@mixin mdc-floating-label-invalid-shake-keyframes($modifier, $positionY, $positionX: 0%, $scale: .75) {
   @keyframes invalid-shake-float-above-#{$modifier} {
     0% {
       transform: translateX(calc(0 - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
@@ -48,16 +46,9 @@
   }
 }
 
-@include mdc-floating-label-invalid-shake-keyframes_(standard, $mdc-floating-label-position-y);
-@include mdc-floating-label-invalid-shake-keyframes_(box, $mdc-floating-label-box-position-y);
-@include mdc-floating-label-invalid-shake-keyframes_(box-dense, $mdc-floating-label-box-dense-position-y, 0%, $mdc-floating-label-dense-scale);
-@include mdc-floating-label-invalid-shake-keyframes_(outlined, $mdc-floating-label-outlined-position-y);
-@include mdc-floating-label-invalid-shake-keyframes_(outlined-dense, $mdc-floating-label-outlined-dense-position-y, 0%, $mdc-floating-label-dense-scale);
-@include mdc-floating-label-invalid-shake-keyframes_(outlined-leading-icon, $mdc-floating-label-outlined-position-y, $mdc-floating-label-outlined-with-leading-icon-position-x);
-@include mdc-floating-label-invalid-shake-keyframes_(outlined-leading-icon-dense, $mdc-floating-label-outlined-dense-position-y, $mdc-floating-label-outlined-dense-with-leading-icon-position-x, $mdc-floating-label-dense-scale);
-@include mdc-floating-label-invalid-shake-keyframes_(textarea, $mdc-floating-label-textarea-position-y, 0%, $mdc-floating-label-textarea-scale);
+@include mdc-floating-label-invalid-shake-keyframes(standard, $mdc-floating-label-position-y);
 
-@mixin mdc-floating-label-position_($positionY, $positionX: 0%, $scale: .75) {
+@mixin mdc-floating-label-float-position($positionY, $positionX: 0%, $scale: .75) {
   @if $positionX == 0 {
     .mdc-floating-label--float-above {
       transform: translateY(-1 * $positionY) scale($scale);
@@ -73,14 +64,14 @@
   }
 }
 
-@mixin mdc-floating-label-shake_($modifier) {
+@mixin mdc-floating-label-shake($modifier) {
   .mdc-floating-label--shake {
     animation: invalid-shake-float-above-#{$modifier} 250ms 1;
   }
 }
 
 // Used for textarea in case of scrolling
-@mixin mdc-floating-label-background-color_($color) {
+@mixin mdc-floating-label-fill-color($color) {
   .mdc-floating-label {
     @include mdc-theme-prop(background-color, $color);
   }
diff --git a/packages/mdc-floating-label/_variables.scss b/packages/mdc-floating-label/_variables.scss
index 79e05afb90d..8170ac386c4 100644
--- a/packages/mdc-floating-label/_variables.scss
+++ b/packages/mdc-floating-label/_variables.scss
@@ -15,13 +15,3 @@
 //
 
 $mdc-floating-label-position-y: 100%;
-$mdc-floating-label-box-position-y: 50%;
-$mdc-floating-label-box-dense-position-y: 90%;
-$mdc-floating-label-dense-scale: .923;
-$mdc-floating-label-outlined-position-y: 130%;
-$mdc-floating-label-outlined-dense-position-y: 145%;
-$mdc-floating-label-outlined-with-leading-icon-position-x: 32px;
-$mdc-floating-label-outlined-dense-with-leading-icon-position-x: 21px;
-$mdc-floating-label-textarea-position-y: 50%;
-// Note that the scale factor is an eyeball'd approximation of what's shown in the mocks.
-$mdc-floating-label-textarea-scale: .923;
diff --git a/packages/mdc-floating-label/mdc-floating-label.scss b/packages/mdc-floating-label/mdc-floating-label.scss
index 30bfd29724b..e147bab7694 100644
--- a/packages/mdc-floating-label/mdc-floating-label.scss
+++ b/packages/mdc-floating-label/mdc-floating-label.scss
@@ -44,6 +44,6 @@
 }
 
 @at-root {
-  @include mdc-floating-label-position_($mdc-floating-label-position-y);
-  @include mdc-floating-label-shake_(standard);
+  @include mdc-floating-label-float-position($mdc-floating-label-position-y);
+  @include mdc-floating-label-shake(standard);
 }
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index d16e2fdf044..f495fb70c61 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -17,8 +17,8 @@
 @import "@material/line-ripple/mixins";
 @import "outline/mixins";
 @import "@material/floating-label/mixins";
-@import "@material/floating-label/variables";
 @import "helper-text/mixins";
+@import "./variables";
 @import "icon/mixins";
 @import "icon/variables";
 @import "@material/theme/mixins";
@@ -73,7 +73,7 @@
     @include mdc-text-field-textarea-fill-color_($color);
     // Automatically add label background color the same color as well to ensure
     // the label can be seen if the input scrolls behind the label
-    @include mdc-floating-label-background-color_($color);
+    @include mdc-floating-label-fill-color($color);
   }
 }
 
@@ -156,7 +156,7 @@
 
 @mixin mdc-text-field-dense_ {
   // NOTE: This is an eyeball'd approximation of what's in the mocks.
-  @include mdc-floating-label-position_(110%, 0%, $mdc-floating-label-dense-scale);
+  @include mdc-floating-label-float-position(110%, 0%, $mdc-text-field-dense-label-scale);
 
   margin-top: 12px;
   margin-bottom: 4px;
@@ -198,8 +198,8 @@
 }
 
 @mixin mdc-text-field-outlined-dense_ {
-  @include mdc-floating-label-position_($mdc-floating-label-outlined-dense-position-y, 0%, $mdc-floating-label-dense-scale);
-  @include mdc-floating-label-shake_(outlined-dense);
+  @include mdc-floating-label-float-position($mdc-text-field-outlined-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
+  @include mdc-floating-label-shake(outlined-dense);
 
   height: 48px;
 
@@ -220,8 +220,8 @@
   @include mdc-text-field-outline-color($mdc-text-field-outlined-idle-border);
   @include mdc-text-field-hover-outline-color($mdc-text-field-outlined-hover-border);
   @include mdc-text-field-focused-outline-color(primary);
-  @include mdc-floating-label-position_($mdc-floating-label-outlined-position-y);
-  @include mdc-floating-label-shake_(outlined);
+  @include mdc-floating-label-float-position($mdc-text-field-outlined-label-position-y);
+  @include mdc-floating-label-shake(outlined);
 
   height: 56px;
   border: none;
@@ -266,8 +266,8 @@
   @include mdc-ripple-radius-bounded;
   @include mdc-text-field-box-corner-radius($mdc-text-field-border-radius);
   @include mdc-text-field-box-fill-color($mdc-text-field-box-background);
-  @include mdc-floating-label-position_($mdc-floating-label-box-position-y);
-  @include mdc-floating-label-shake_(box);
+  @include mdc-floating-label-float-position($mdc-text-field-box-label-position-y);
+  @include mdc-floating-label-shake(box);
 
   display: inline-flex;
   position: relative;
@@ -307,8 +307,8 @@
 }
 
 @mixin mdc-text-field-box-dense_ {
-  @include mdc-floating-label-position_($mdc-floating-label-box-dense-position-y, 0%, $mdc-floating-label-dense-scale);
-  @include mdc-floating-label-shake_(box-dense);
+  @include mdc-floating-label-float-position($mdc-text-field-box-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
+  @include mdc-floating-label-shake(box-dense);
 
   .mdc-text-field__input {
     padding: 12px 12px 0;
@@ -326,13 +326,13 @@
 }
 
 @mixin mdc-text-field-outlined-with-leading-icon_ {
-  @include mdc-floating-label-position_($mdc-floating-label-outlined-position-y, $mdc-floating-label-outlined-with-leading-icon-position-x);
-  @include mdc-floating-label-shake_(outlined-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(outlined-leading-icon);
 }
 
 @mixin mdc-text-field-outlined-dense-with-leading-icon_ {
-  @include mdc-floating-label-position_($mdc-floating-label-outlined-dense-position-y, $mdc-floating-label-outlined-dense-with-leading-icon-position-x, $mdc-floating-label-dense-scale);
-  @include mdc-floating-label-shake_(outlined-leading-icon-dense);
+  @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(outlined-leading-icon-dense);
 }
 
 @mixin mdc-text-field-with-trailing-icon_ {
@@ -379,7 +379,7 @@
 // Textarea
 
 @mixin mdc-text-field-textarea-disabled_ {
-  @include mdc-floating-label-background-color_($mdc-textarea-disabled-background);
+  @include mdc-floating-label-fill-color($mdc-textarea-disabled-background);
   @include mdc-text-field-textarea-stroke-color_($mdc-text-field-disabled-border);
   @include mdc-text-field-textarea-fill-color_($mdc-textarea-disabled-background);
 
@@ -396,13 +396,13 @@
 
 @mixin mdc-text-field-textarea_ {
   @include mdc-text-field-textarea-corner-radius($mdc-text-field-border-radius);
-  @include mdc-floating-label-background-color_($mdc-textarea-background);
+  @include mdc-floating-label-fill-color($mdc-textarea-background);
   @include mdc-text-field-textarea-stroke-color($mdc-textarea-border);
 
   // 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.
-  @include mdc-floating-label-position_($mdc-floating-label-textarea-position-y, 0%, $mdc-floating-label-textarea-scale);
-  @include mdc-floating-label-shake_(textarea);
+  @include mdc-floating-label-float-position($mdc-text-field-textarea-label-position-y, 0%, $mdc-text-field-textarea-label-scale);
+  @include mdc-floating-label-shake(textarea);
 
   $padding-inset: 16px;
   $label-offset-y: $padding-inset + 2;
@@ -489,3 +489,11 @@
     @include mdc-theme-prop(color, $color);
   }
 }
+
+@include mdc-floating-label-invalid-shake-keyframes(box, $mdc-text-field-box-label-position-y);
+@include mdc-floating-label-invalid-shake-keyframes(box-dense, $mdc-text-field-box-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
+@include mdc-floating-label-invalid-shake-keyframes(outlined, $mdc-text-field-outlined-label-position-y);
+@include mdc-floating-label-invalid-shake-keyframes(outlined-dense, $mdc-text-field-outlined-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
+@include mdc-floating-label-invalid-shake-keyframes(outlined-leading-icon, $mdc-text-field-outlined-label-position-y, $mdc-text-field-outlined-with-leading-icon-label-position-x);
+@include mdc-floating-label-invalid-shake-keyframes(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-invalid-shake-keyframes(textarea, $mdc-text-field-textarea-label-position-y, 0%, $mdc-text-field-textarea-label-scale);
diff --git a/packages/mdc-textfield/_variables.scss b/packages/mdc-textfield/_variables.scss
index a8005168da4..79acb22bc1e 100644
--- a/packages/mdc-textfield/_variables.scss
+++ b/packages/mdc-textfield/_variables.scss
@@ -38,3 +38,15 @@ $mdc-textarea-background: rgba(white, 1);
 $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-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-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%;
+// Note that the scale factor is an eyeball'd approximation of what's shown in the mocks.
+$mdc-text-field-textarea-label-scale: .923;

From 1f2cf629c6d0678784896ddcf5e15778150186a2 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Mon, 12 Feb 2018 16:45:36 -0800
Subject: [PATCH 11/47] fix(text-field): removed export of floating label

---
 packages/mdc-textfield/_variables.scss | 1 -
 packages/mdc-textfield/index.js        | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/mdc-textfield/_variables.scss b/packages/mdc-textfield/_variables.scss
index 79acb22bc1e..cd456a1dc14 100644
--- a/packages/mdc-textfield/_variables.scss
+++ b/packages/mdc-textfield/_variables.scss
@@ -39,7 +39,6 @@ $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-dense-label-scale: .923;
diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
index 22de3c08635..43817dd23df 100644
--- a/packages/mdc-textfield/index.js
+++ b/packages/mdc-textfield/index.js
@@ -321,5 +321,4 @@ class MDCTextField extends MDCComponent {
 export {MDCTextField, MDCTextFieldFoundation,
   MDCTextFieldHelperText, MDCTextFieldHelperTextFoundation,
   MDCTextFieldIcon, MDCTextFieldIconFoundation,
-  MDCFloatingLabel, MDCFloatingLabelFoundation,
   MDCTextFieldOutline, MDCTextFieldOutlineFoundation};

From 040f739edc2759f9000979d8506eb14d9e9a37bb Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Tue, 13 Feb 2018 09:05:05 -0800
Subject: [PATCH 12/47] fix(text-field): closure annotations

---
 packages/mdc-floating-label/README.md | 2 +-
 packages/mdc-textfield/adapter.js     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mdc-floating-label/README.md b/packages/mdc-floating-label/README.md
index f0d7742c90b..1f35d7d63f5 100644
--- a/packages/mdc-floating-label/README.md
+++ b/packages/mdc-floating-label/README.md
@@ -86,7 +86,7 @@ Mixin | Description
 Method Signature | Description
 --- | ---
 `shake(isValid: boolean, isFocused: boolean) => void` | Shakes label when invalid
-`float(value: string/number, isFocused: boolean, isBadInput: boolean) => void` | Floats label above text field or select
+`float(value: string, isFocused: boolean, isBadInput: boolean) => void` | Floats label above text field or select
 `getWidth() => number` | Returns the width of the label element
 
 
diff --git a/packages/mdc-textfield/adapter.js b/packages/mdc-textfield/adapter.js
index c4aa2b0d0ac..5d997272229 100644
--- a/packages/mdc-textfield/adapter.js
+++ b/packages/mdc-textfield/adapter.js
@@ -156,7 +156,7 @@ class MDCTextFieldAdapter {
 
   /**
    * Floats the floating label element above the text-field
-   * @param {string|number} value
+   * @param {string} value
    * @param {boolean} isFocused
    * @param {boolean} isBadInput
    */

From 43bd881a5a4c867b4bd1da3e2bc681f0e9e473b7 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Thu, 15 Feb 2018 14:39:03 -0800
Subject: [PATCH 13/47] fix(floating-label): sass compliation failure

---
 packages/mdc-floating-label/mdc-floating-label.scss | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/mdc-floating-label/mdc-floating-label.scss b/packages/mdc-floating-label/mdc-floating-label.scss
index e147bab7694..782ffaac480 100644
--- a/packages/mdc-floating-label/mdc-floating-label.scss
+++ b/packages/mdc-floating-label/mdc-floating-label.scss
@@ -14,12 +14,11 @@
 // limitations under the License.
 //
 
-@import "../mixins";
-@import "../variables";
+@import "./mixins";
+@import "./variables";
 @import "@material/rtl/mixins";
 @import "@material/theme/variables";
 @import "@material/theme/mixins";
-@import "@material/floating-label/mixins";
 
 // postcss-bem-linter: define floating-label
 .mdc-floating-label {

From 9b627e24c315859b84992591e691ac1312599b9e Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Thu, 15 Feb 2018 17:44:47 -0800
Subject: [PATCH 14/47] fix(text-field): updated foundation methods to guard
 against !hasLabel. updated tests

---
 packages/mdc-floating-label/README.md         | 31 +++---
 packages/mdc-floating-label/_mixins.scss      | 10 +-
 packages/mdc-floating-label/index.js          |  7 +-
 .../mdc-floating-label.scss                   |  4 +-
 packages/mdc-textfield/_mixins.scss           | 32 +++----
 packages/mdc-textfield/adapter.js             | 14 ++-
 packages/mdc-textfield/foundation.js          | 30 +++---
 packages/mdc-textfield/index.js               | 12 +--
 packages/mdc-textfield/mdc-text-field.scss    |  8 ++
 test/unit/mdc-textfield/foundation.test.js    | 94 ++++++++++++++++++-
 10 files changed, 167 insertions(+), 75 deletions(-)

diff --git a/packages/mdc-floating-label/README.md b/packages/mdc-floating-label/README.md
index 1f35d7d63f5..92c79f6360a 100644
--- a/packages/mdc-floating-label/README.md
+++ b/packages/mdc-floating-label/README.md
@@ -2,7 +2,7 @@
 title: "Floating Label"
 layout: detail
 section: components
-excerpt: "The label is a text caption or description for the text field or select."
+excerpt: "An animated text caption for a text field or select."
 path: /catalog/input-controls/floating-label/
 -->
 
@@ -51,12 +51,12 @@ It's also possible to wrap `mdc-text-field__input` within a `<label>` to avoid d
 ```
 
 > _NOTE_: Only place a `mdc-floating-label` inside of a text field _if you plan on using
-> Javascript_. Otherwise, the label must go outside of the text-field, as shown below.
+> JavaScript_. Otherwise, the label must go outside of the text-field, as shown below.
 
 #### Single Line, CSS Only
 
 ```html
-<label for="text-field-no-js">TextField with no JS: </label>
+<label for="text-field-no-js">TextField with no JS:</label>
 <div class="mdc-text-field">
   <input type="text" id="text-field-no-js" class="mdc-text-field__input" placeholder="Hint text">
   <div class="mdc-text-field__bottom-line"></div>
@@ -75,33 +75,32 @@ CSS Class | Description
 
 Mixin | Description
 --- | ---
-`mdc-floating-label-color($color)` | Customizes the color of the label.
+`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.
 `mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.
-`mdc-floating-label-invalid-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Creates a shake keyframe animation for invalid label shake. To be used with sass mixin `mdc-floating-label-shake($modifier)`.
-`mdc-floating-label-shake($modifier)` | Applies shake keyframe animation to label.
+`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.
+`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.
 `mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.
 
 ### `MDCFloatingLabel`
 
 Method Signature | Description
 --- | ---
-`shake(isValid: boolean, isFocused: boolean) => void` | Shakes label when invalid
-`float(value: string, isFocused: boolean, isBadInput: boolean) => void` | Floats label above text field or select
-`getWidth() => number` | Returns the width of the label element
-
+`shake(isValid: boolean, isFocused: boolean) => void` | Label animation class is applied unless isValid or isFocused is true.
+`float(value: string, isFocused: boolean, isBadInput: boolean) => void` | Floats label above text field or select.
+`getWidth() => number` | Returns the width of the label element.
 
 ### `MDCFloatingLabelAdapter`
 
 Method Signature | Description
 --- | ---
-`addClass(className: string) => void` | Adds a class to the label element
-`removeClass(className: string) => void` | Removes a class from the label element
-`getWidth() => number` | Returns the width of the label element
+`addClass(className: string) => void` | Adds a class to the label element.
+`removeClass(className: string) => void` | Removes a class from the label element.
+`getWidth() => number` | Returns the width of the label element.
 
 ### `MDCFloatingLabelFoundation`
 
 Method Signature | Description
 --- | ---
-`getWidth() => number` | Returns the width of the label element
-`styleShake(isValid: boolean, isFocused: boolean)` | Styles the label to produce the shake effect when needed.
-`styleFloat(value: string, isFocused: boolean, isBadInput: boolean)` | Styles the label to float or defloat as necessary.
+`getWidth() => number` | Returns the width of the label element.
+`styleShake(isValid: boolean, isFocused: boolean)` | Will remove shake class if isValid _or_ isFocused is true, otherwise it will add shake class.
+`styleFloat(value: string, isFocused: boolean, isBadInput: boolean)` | Will add class to float label if isFocused, or if value is present. Otherwise it will remove classes unless isBadInput is true.
diff --git a/packages/mdc-floating-label/_mixins.scss b/packages/mdc-floating-label/_mixins.scss
index 5a7c5de1f10..0fb1921c53f 100644
--- a/packages/mdc-floating-label/_mixins.scss
+++ b/packages/mdc-floating-label/_mixins.scss
@@ -24,8 +24,8 @@
   }
 }
 
-@mixin mdc-floating-label-invalid-shake-keyframes($modifier, $positionY, $positionX: 0%, $scale: .75) {
-  @keyframes invalid-shake-float-above-#{$modifier} {
+@mixin mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX: 0%, $scale: .75) {
+  @keyframes shake-float-above-#{$modifier} {
     0% {
       transform: translateX(calc(0 - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
     }
@@ -46,8 +46,6 @@
   }
 }
 
-@include mdc-floating-label-invalid-shake-keyframes(standard, $mdc-floating-label-position-y);
-
 @mixin mdc-floating-label-float-position($positionY, $positionX: 0%, $scale: .75) {
   @if $positionX == 0 {
     .mdc-floating-label--float-above {
@@ -64,9 +62,9 @@
   }
 }
 
-@mixin mdc-floating-label-shake($modifier) {
+@mixin mdc-floating-label-shake-animation($modifier) {
   .mdc-floating-label--shake {
-    animation: invalid-shake-float-above-#{$modifier} 250ms 1;
+    animation: shake-float-above-#{$modifier} 250ms 1;
   }
 }
 
diff --git a/packages/mdc-floating-label/index.js b/packages/mdc-floating-label/index.js
index a13347dbba2..6e478bc65ba 100644
--- a/packages/mdc-floating-label/index.js
+++ b/packages/mdc-floating-label/index.js
@@ -44,7 +44,8 @@ class MDCFloatingLabel extends MDCComponent {
   }
 
   /**
-   * Styles the label to float or defloat as necessary.
+   * Styles label to float if isFocused, or if value is present.
+   * Otherwise it will style to defloat unless isBadInput is true.
    * @param {string} value The value of the input.
    * @param {boolean} isFocused Whether the input is focused.
    * @param {boolean} isBadInput The input's `validity.badInput` value.
@@ -64,11 +65,11 @@ class MDCFloatingLabel extends MDCComponent {
    * @return {!MDCFloatingLabelFoundation}
    */
   getDefaultFoundation() {
-    return new MDCFloatingLabelFoundation(/** @type {!MDCFloatingLabelAdapter} */ (Object.assign({
+    return new MDCFloatingLabelFoundation({
       addClass: (className) => this.root_.classList.add(className),
       removeClass: (className) => this.root_.classList.remove(className),
       getWidth: () => this.root_.offsetWidth,
-    })));
+    });
   }
 }
 
diff --git a/packages/mdc-floating-label/mdc-floating-label.scss b/packages/mdc-floating-label/mdc-floating-label.scss
index 782ffaac480..6fcc518bc9a 100644
--- a/packages/mdc-floating-label/mdc-floating-label.scss
+++ b/packages/mdc-floating-label/mdc-floating-label.scss
@@ -44,5 +44,7 @@
 
 @at-root {
   @include mdc-floating-label-float-position($mdc-floating-label-position-y);
-  @include mdc-floating-label-shake(standard);
+  @include mdc-floating-label-shake-animation(standard);
 }
+
+@include mdc-floating-label-shake-keyframes(standard, $mdc-floating-label-position-y);
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index f495fb70c61..9c3c6952e11 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -14,13 +14,13 @@
 // limitations under the License.
 //
 
-@import "@material/line-ripple/mixins";
-@import "outline/mixins";
-@import "@material/floating-label/mixins";
-@import "helper-text/mixins";
-@import "./variables";
 @import "icon/mixins";
 @import "icon/variables";
+@import "helper-text/mixins";
+@import "outline/mixins";
+@import "./variables";
+@import "@material/line-ripple/mixins";
+@import "@material/floating-label/mixins";
 @import "@material/theme/mixins";
 
 @mixin mdc-text-field-outlined-corner-radius($radius) {
@@ -199,7 +199,7 @@
 
 @mixin mdc-text-field-outlined-dense_ {
   @include mdc-floating-label-float-position($mdc-text-field-outlined-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
-  @include mdc-floating-label-shake(outlined-dense);
+  @include mdc-floating-label-shake-animation(outlined-dense);
 
   height: 48px;
 
@@ -221,7 +221,7 @@
   @include mdc-text-field-hover-outline-color($mdc-text-field-outlined-hover-border);
   @include mdc-text-field-focused-outline-color(primary);
   @include mdc-floating-label-float-position($mdc-text-field-outlined-label-position-y);
-  @include mdc-floating-label-shake(outlined);
+  @include mdc-floating-label-shake-animation(outlined);
 
   height: 56px;
   border: none;
@@ -267,7 +267,7 @@
   @include mdc-text-field-box-corner-radius($mdc-text-field-border-radius);
   @include mdc-text-field-box-fill-color($mdc-text-field-box-background);
   @include mdc-floating-label-float-position($mdc-text-field-box-label-position-y);
-  @include mdc-floating-label-shake(box);
+  @include mdc-floating-label-shake-animation(box);
 
   display: inline-flex;
   position: relative;
@@ -308,7 +308,7 @@
 
 @mixin mdc-text-field-box-dense_ {
   @include mdc-floating-label-float-position($mdc-text-field-box-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
-  @include mdc-floating-label-shake(box-dense);
+  @include mdc-floating-label-shake-animation(box-dense);
 
   .mdc-text-field__input {
     padding: 12px 12px 0;
@@ -327,12 +327,12 @@
 
 @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(outlined-leading-icon);
+  @include mdc-floating-label-shake-animation(outlined-leading-icon);
 }
 
 @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(outlined-leading-icon-dense);
+  @include mdc-floating-label-shake-animation(outlined-leading-icon-dense);
 }
 
 @mixin mdc-text-field-with-trailing-icon_ {
@@ -402,7 +402,7 @@
   // 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.
   @include mdc-floating-label-float-position($mdc-text-field-textarea-label-position-y, 0%, $mdc-text-field-textarea-label-scale);
-  @include mdc-floating-label-shake(textarea);
+  @include mdc-floating-label-shake-animation(textarea);
 
   $padding-inset: 16px;
   $label-offset-y: $padding-inset + 2;
@@ -489,11 +489,3 @@
     @include mdc-theme-prop(color, $color);
   }
 }
-
-@include mdc-floating-label-invalid-shake-keyframes(box, $mdc-text-field-box-label-position-y);
-@include mdc-floating-label-invalid-shake-keyframes(box-dense, $mdc-text-field-box-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
-@include mdc-floating-label-invalid-shake-keyframes(outlined, $mdc-text-field-outlined-label-position-y);
-@include mdc-floating-label-invalid-shake-keyframes(outlined-dense, $mdc-text-field-outlined-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
-@include mdc-floating-label-invalid-shake-keyframes(outlined-leading-icon, $mdc-text-field-outlined-label-position-y, $mdc-text-field-outlined-with-leading-icon-label-position-x);
-@include mdc-floating-label-invalid-shake-keyframes(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-invalid-shake-keyframes(textarea, $mdc-text-field-textarea-label-position-y, 0%, $mdc-text-field-textarea-label-scale);
diff --git a/packages/mdc-textfield/adapter.js b/packages/mdc-textfield/adapter.js
index 5d997272229..bd97169a393 100644
--- a/packages/mdc-textfield/adapter.js
+++ b/packages/mdc-textfield/adapter.js
@@ -148,14 +148,19 @@ class MDCTextFieldAdapter {
   setLineRippleTransformOrigin(normalizedX) {}
 
   /**
-   * Shakes the floating label.
+   * Only implement if label exists.
+   * Should shake the floating label if input is _not_ focused and _not_ valid,
+   * otherwise it should shake.
    * @param {boolean} isValid
    * @param {boolean} isFocused
    */
   shakeLabel(isValid, isFocused) {}
 
   /**
-   * Floats the floating label element above the text-field
+   * Only implement if label exists.
+   * Floats the floating label element above the text-field if there is a value
+   * or is focused. Otherwise it should go back to resting state unless isBadInput
+   * is true.
    * @param {string} value
    * @param {boolean} isFocused
    * @param {boolean} isBadInput
@@ -163,13 +168,14 @@ class MDCTextFieldAdapter {
   floatLabel(value, isFocused, isBadInput) {}
 
   /**
-   * Sets the transform origin of the line ripple.
+   * Returns true if label element exists, false if it doesn't.
    * @return {boolean}
    */
   hasLabel() {}
 
   /**
-   * Get width of label in pixels
+   * Only implement if label exists.
+   * Returns width of label in pixels.
    * @return {number}
    */
   getLabelWidth() {}
diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index 739b27b434d..fd63570a06a 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -111,7 +111,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
   init() {
     this.adapter_.addClass(MDCTextFieldFoundation.cssClasses.UPGRADED);
     // Ensure label does not collide with any pre-filled value.
-    if (this.getValue()) {
+    if (this.adapter_.hasLabel() && this.getValue()) {
       this.adapter_.floatLabel(
         this.getValue(), this.isFocused_, this.isBadInput_());
     }
@@ -179,9 +179,11 @@ class MDCTextFieldFoundation extends MDCFoundation {
     if (this.outline_) {
       this.updateOutline();
     }
-    this.adapter_.shakeLabel(this.isValid(), this.isFocused_);
-    this.adapter_.floatLabel(
-      this.getValue(), this.isFocused_, this.isBadInput_());
+    if (this.adapter_.hasLabel()) {
+      this.adapter_.shakeLabel(this.isValid(), this.isFocused_);
+      this.adapter_.floatLabel(
+        this.getValue(), this.isFocused_, this.isBadInput_());
+    }
     if (this.helperText_) {
       this.helperText_.showToScreenReader();
     }
@@ -220,9 +222,11 @@ class MDCTextFieldFoundation extends MDCFoundation {
     const isValid = this.isValid();
     this.styleValidity_(isValid);
     this.styleFocused_(this.isFocused_);
-    this.adapter_.shakeLabel(this.isValid(), this.isFocused_);
-    this.adapter_.floatLabel(
-      this.getValue(), this.isFocused_, this.isBadInput_());
+    if (this.adapter_.hasLabel()) {
+      this.adapter_.shakeLabel(this.isValid(), this.isFocused_);
+      this.adapter_.floatLabel(
+        this.getValue(), this.isFocused_, this.isBadInput_());
+    }
     if (shouldRemoveLabelFloat) {
       this.receivedUserInput_ = false;
     }
@@ -242,9 +246,11 @@ class MDCTextFieldFoundation extends MDCFoundation {
     this.getNativeInput_().value = value;
     const isValid = this.isValid();
     this.styleValidity_(isValid);
-    this.adapter_.shakeLabel(isValid, this.isFocused_);
-    this.adapter_.floatLabel(
-      this.getValue(), this.isFocused_, this.isBadInput_());
+    if (this.adapter_.hasLabel()) {
+      this.adapter_.shakeLabel(isValid, this.isFocused_);
+      this.adapter_.floatLabel(
+        this.getValue(), this.isFocused_, this.isBadInput_());
+    }
   }
 
   /**
@@ -265,7 +271,9 @@ class MDCTextFieldFoundation extends MDCFoundation {
     // Retrieve from the getter to ensure correct logic is applied.
     isValid = this.isValid();
     this.styleValidity_(isValid);
-    this.adapter_.shakeLabel(isValid, this.isFocused_);
+    if (this.adapter_.hasLabel()) {
+      this.adapter_.shakeLabel(isValid, this.isFocused_);
+    }
   }
 
   /**
diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
index 43817dd23df..f41a22351f3 100644
--- a/packages/mdc-textfield/index.js
+++ b/packages/mdc-textfield/index.js
@@ -268,22 +268,16 @@ class MDCTextField extends MDCComponent {
           }
         },
         shakeLabel: (isValid, isFocused) => {
-          if (this.label_) {
-            this.label_.shake(isValid, isFocused);
-          }
+          this.label_.shake(isValid, isFocused);
         },
         floatLabel: (value, isFocused, isBadInput) => {
-          if (this.label_) {
-            this.label_.float(value, isFocused, isBadInput);
-          }
+          this.label_.float(value, isFocused, isBadInput);
         },
         hasLabel: () => {
           return !!this.label_;
         },
         getLabelWidth: () => {
-          if (this.label_) {
-            return this.label_.getWidth();
-          }
+          return this.label_.getWidth();
         },
       },
       this.getInputAdapterMethods_())),
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index db5d52f6ec1..f6af4fb708b 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -255,3 +255,11 @@
 .mdc-floating-label--float-above ~ .mdc-text-field__outline {
   opacity: 1;
 }
+
+@include mdc-floating-label-shake-keyframes(box, $mdc-text-field-box-label-position-y);
+@include mdc-floating-label-shake-keyframes(box-dense, $mdc-text-field-box-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
+@include mdc-floating-label-shake-keyframes(outlined, $mdc-text-field-outlined-label-position-y);
+@include mdc-floating-label-shake-keyframes(outlined-dense, $mdc-text-field-outlined-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
+@include mdc-floating-label-shake-keyframes(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(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(textarea, $mdc-text-field-textarea-label-position-y, 0%, $mdc-text-field-textarea-label-scale);
diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
index 670863a7c25..80033d11022 100644
--- a/test/unit/mdc-textfield/foundation.test.js
+++ b/test/unit/mdc-textfield/foundation.test.js
@@ -76,7 +76,7 @@ test('#constructor sets disabled to false', () => {
   assert.isNotOk(foundation.isDisabled());
 });
 
-const setupValueTest = (value, optIsValid, optIsBadInput) => {
+const setupValueTest = (value, optIsValid, optIsBadInput, hasLabel) => {
   const {foundation, mockAdapter, helperText} = setupTest();
   const nativeInput = {
     value: value,
@@ -85,6 +85,9 @@ const setupValueTest = (value, optIsValid, optIsBadInput) => {
       badInput: optIsBadInput === undefined ? false : !!optIsBadInput,
     },
   };
+  if (hasLabel) {
+    td.when(mockAdapter.hasLabel()).thenReturn(true);
+  }
   td.when(mockAdapter.getNativeInput()).thenReturn(nativeInput);
   foundation.init();
 
@@ -102,7 +105,7 @@ test('#getValue returns the field\'s value', () => {
 
 test('#setValue with non-empty value styles the label', () => {
   const value = 'new value';
-  const {foundation, nativeInput, mockAdapter} = setupValueTest('');
+  const {foundation, nativeInput, mockAdapter} = setupValueTest('', undefined, undefined, true);
   // Initial empty value should not float label.
   td.verify(mockAdapter.floatLabel('', /* isFocused */ false, /* isBadInput */ false), {times: 0});
   nativeInput.value = value;
@@ -112,7 +115,7 @@ test('#setValue with non-empty value styles the label', () => {
 });
 
 test('#setValue with empty value styles the label', () => {
-  const {foundation, nativeInput, mockAdapter} = setupValueTest('old value');
+  const {foundation, nativeInput, mockAdapter} = setupValueTest('old value', undefined, undefined, true);
   // Initial value should float the label.
   td.verify(mockAdapter.floatLabel('old value', /* isFocused */ false, /* isBadInput */ false));
   nativeInput.value = '';
@@ -123,7 +126,7 @@ test('#setValue with empty value styles the label', () => {
 
 test('#setValue valid and invalid input', () => {
   const {foundation, mockAdapter, nativeInput, helperText} =
-    setupValueTest('', /* isValid */ false);
+    setupValueTest('', /* isValid */ false, undefined, true);
 
   foundation.setValue('invalid');
   td.verify(mockAdapter.addClass(cssClasses.INVALID));
@@ -175,6 +178,7 @@ test('#setValid overrides native validation', () => {
 
 test('#setValid updates classes', () => {
   const {foundation, mockAdapter, helperText} = setupTest();
+  td.when(mockAdapter.hasLabel()).thenReturn(true);
 
   foundation.setValid(false);
   td.verify(mockAdapter.addClass(cssClasses.INVALID));
@@ -193,6 +197,26 @@ test('#setValid updates classes', () => {
   td.verify(mockAdapter.removeClass(cssClasses.DISABLED), {times: 0});
 });
 
+test('#setValid updates classes, but not label methods when hasLabel is false', () => {
+  const {foundation, mockAdapter, helperText} = setupTest();
+
+  foundation.setValid(false);
+  td.verify(mockAdapter.addClass(cssClasses.INVALID));
+  td.verify(helperText.setValidity(false));
+  td.verify(mockAdapter.shakeLabel(td.matchers.anything(), td.matchers.anything()), {times: 0});
+
+  foundation.setValid(true);
+  td.verify(mockAdapter.removeClass(cssClasses.INVALID));
+  td.verify(helperText.setValidity(true));
+  td.verify(mockAdapter.shakeLabel(td.matchers.anything(), td.matchers.anything()), {times: 0});
+
+  // None of these is affected by setValid.
+  td.verify(mockAdapter.addClass(cssClasses.FOCUSED), {times: 0});
+  td.verify(mockAdapter.removeClass(cssClasses.FOCUSED), {times: 0});
+  td.verify(mockAdapter.addClass(cssClasses.DISABLED), {times: 0});
+  td.verify(mockAdapter.removeClass(cssClasses.DISABLED), {times: 0});
+});
+
 test('#setRequired updates CSS classes', () => {
   // Native validity checking does not apply in unittests, so manually mark as valid or invalid.
   const {foundation, mockAdapter, nativeInput, helperText} =
@@ -328,6 +352,7 @@ test('#destroy removes event listeners', () => {
 
 test('#init floats label if the input contains a value', () => {
   const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.hasLabel()).thenReturn(true);
   td.when(mockAdapter.getNativeInput()).thenReturn({
     value: 'Pre-filled value',
     disabled: false,
@@ -339,6 +364,19 @@ test('#init floats label if the input contains a value', () => {
   td.verify(mockAdapter.floatLabel('Pre-filled value', /* isFocused */ false, /* isBadInput */ false));
 });
 
+test('#init doesnot call floatLabel if there is no label and the input contains a value', () => {
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.getNativeInput()).thenReturn({
+    value: 'Pre-filled value',
+    disabled: false,
+    validity: {
+      badInput: false,
+    },
+  });
+  foundation.init();
+  td.verify(mockAdapter.floatLabel(td.matchers.anything(), td.matchers.anything(), td.matchers.anything()), {times: 0});
+});
+
 test('#init does not float label if the input does not contain a value', () => {
   const {foundation, mockAdapter} = setupTest();
   td.when(mockAdapter.getNativeInput()).thenReturn({
@@ -397,7 +435,7 @@ test('#updateOutline does nothing if no outline is present', () => {
 test('on input styles label if input event occurs without any other events', () => {
   const {foundation, mockAdapter} = setupTest();
   let input;
-
+  td.when(mockAdapter.hasLabel()).thenReturn(true);
   td.when(mockAdapter.registerInputInteractionHandler('input', td.matchers.isA(Function)))
     .thenDo((evtType, handler) => {
       input = handler;
@@ -409,6 +447,19 @@ test('on input styles label if input event occurs without any other events', ()
   td.verify(mockAdapter.floatLabel(/* value */ '', /* isFocused */ true, /* isBadInput */ false));
 });
 
+test('on input doesnot styles label if input event occurs without any other events but hasLabel is false', () => {
+  const {foundation, mockAdapter} = setupTest();
+  let input;
+  td.when(mockAdapter.registerInputInteractionHandler('input', td.matchers.isA(Function)))
+    .thenDo((evtType, handler) => {
+      input = handler;
+    });
+  foundation.init();
+  input();
+  td.verify(mockAdapter.shakeLabel(td.matchers.anything(), td.matchers.anything()), {times: 0});
+  td.verify(mockAdapter.floatLabel(td.matchers.anything(), td.matchers.anything(), td.matchers.anything()), {times: 0});
+});
+
 test('on input does nothing if input event preceded by keydown event', () => {
   const {foundation, mockAdapter} = setupTest();
   const mockEvt = {
@@ -464,6 +515,7 @@ test('on focus activates line ripple', () => {
 test('on focus styles label', () => {
   const {foundation, mockAdapter} = setupTest();
   let focus;
+  td.when(mockAdapter.hasLabel()).thenReturn(true);
   td.when(mockAdapter.registerInputInteractionHandler('focus', td.matchers.isA(Function)))
     .thenDo((evtType, handler) => {
       focus = handler;
@@ -474,6 +526,19 @@ test('on focus styles label', () => {
   td.verify(mockAdapter.shakeLabel(/* isValid */ true, /* isFocused */ true));
 });
 
+test('on focus do not styles label if hasLabel is false', () => {
+  const {foundation, mockAdapter} = setupTest();
+  let focus;
+  td.when(mockAdapter.registerInputInteractionHandler('focus', td.matchers.isA(Function)))
+    .thenDo((evtType, handler) => {
+      focus = handler;
+    });
+  foundation.init();
+  focus();
+  td.verify(mockAdapter.floatLabel(td.matchers.anything(), td.matchers.anything(), td.matchers.anything()), {times: 0});
+  td.verify(mockAdapter.shakeLabel(td.matchers.anything(), td.matchers.anything()), {times: 0});
+});
+
 test('on focus makes helper text visible to the screen reader', () => {
   const {foundation, mockAdapter, helperText} = setupTest();
   let focus;
@@ -513,14 +578,24 @@ test('on blur removes mdc-text-field--focused class', () => {
 
 test('on blur styles label when no input value present and validity checks pass', () => {
   const {blur, mockAdapter} = setupBlurTest();
+  td.when(mockAdapter.hasLabel()).thenReturn(true);
   td.verify(mockAdapter.floatLabel(/* value */ '', /* isFocused */ false), {times: 0});
   blur();
   td.verify(mockAdapter.shakeLabel(/* isValid */ true, /* isFocused */ false));
   td.verify(mockAdapter.floatLabel(/* value */ '', /* isFocused */ false, /* isBadInput */ false));
 });
 
+test('does not style label on blur when no input value present and validity checks pass and hasLabel is false', () => {
+  const {blur, mockAdapter} = setupBlurTest();
+  td.verify(mockAdapter.floatLabel(/* value */ '', /* isFocused */ false), {times: 0});
+  blur();
+  td.verify(mockAdapter.shakeLabel(td.matchers.anything(), td.matchers.anything()), {times: 0});
+  td.verify(mockAdapter.floatLabel(td.matchers.anything(), td.matchers.anything(), td.matchers.anything()), {times: 0});
+});
+
 test('on blur styles label if input has a value', () => {
   const {blur, nativeInput, mockAdapter} = setupBlurTest();
+  td.when(mockAdapter.hasLabel()).thenReturn(true);
   td.verify(mockAdapter.floatLabel(/* value */ '', /* isFocused */ false), {times: 0});
   nativeInput.value = 'non-empty value';
   blur();
@@ -528,6 +603,15 @@ test('on blur styles label if input has a value', () => {
   td.verify(mockAdapter.floatLabel('non-empty value', /* isFocused */ false, /* isBadInput */ false));
 });
 
+test('does not style label on blur if input has a value and hasLabel is false', () => {
+  const {blur, nativeInput, mockAdapter} = setupBlurTest();
+  td.verify(mockAdapter.floatLabel(/* value */ '', /* isFocused */ false), {times: 0});
+  nativeInput.value = 'non-empty value';
+  blur();
+  td.verify(mockAdapter.shakeLabel(td.matchers.anything(), td.matchers.anything()), {times: 0});
+  td.verify(mockAdapter.floatLabel(td.matchers.anything(), td.matchers.anything(), td.matchers.anything()), {times: 0});
+});
+
 test('on blur removes mdc-text-field--invalid if custom validity is false and' +
      'input.checkValidity() returns true', () => {
   const {mockAdapter, blur} = setupBlurTest();

From 2c1c55e9186419d36e35363e497b0636e0fa4880 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Fri, 16 Feb 2018 10:46:00 -0800
Subject: [PATCH 15/47] fix(text-field): changed floating-label ink color mixin
 and updated text-field accordingly

---
 demos/text-field.scss                    | 23 +++++++++++------------
 demos/theme/theme-dark.scss              |  3 +--
 packages/mdc-floating-label/_mixins.scss |  4 +---
 packages/mdc-textfield/_mixins.scss      |  4 +++-
 4 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/demos/text-field.scss b/demos/text-field.scss
index afa52b30ded..b5c4ab1d9e4 100644
--- a/demos/text-field.scss
+++ b/demos/text-field.scss
@@ -17,7 +17,6 @@
 @import "./common";
 @import "../packages/mdc-form-field/mdc-form-field";
 @import "../packages/mdc-textfield/mdc-text-field";
-@import "../packages/mdc-floating-label/mixins";
 
 // stylelint-disable selector-class-pattern
 .demo-text-field-custom-colors:not(.mdc-text-field--invalid) {
@@ -29,7 +28,7 @@
   @include mdc-text-field-hover-bottom-line-color($hover-border);
   @include mdc-text-field-line-ripple-color($focused-border);
   @include mdc-text-field-ink-color(black);
-  @include mdc-floating-label-color(rgba(blue, .5));
+  @include mdc-text-field-label-color(rgba(blue, .5));
   @include mdc-text-field-outline-color($idle-border);
   @include mdc-text-field-hover-outline-color($hover-border);
   @include mdc-text-field-focused-outline-color($focused-border);
@@ -38,7 +37,7 @@
   @include mdc-text-field-icon-color($hover-border);
 
   &.mdc-text-field--focused {
-    @include mdc-floating-label-color(rgba(blue, .87));
+    @include mdc-text-field-label-color(rgba(blue, .87));
     @include mdc-text-field-icon-color($focused-border);
   }
 }
@@ -49,22 +48,22 @@
   $focused-border: rgba(blue, 1);
 
   @include mdc-text-field-ink-color(black);
-  @include mdc-floating-label-color(rgba(blue, .5));
+  @include mdc-text-field-label-color(rgba(blue, .5));
   @include mdc-text-field-textarea-stroke-color($idle-border);
 
   &.mdc-text-field--focused {
-    @include mdc-floating-label-color(rgba(blue, .87));
+    @include mdc-text-field-label-color(rgba(blue, .87));
     @include mdc-text-field-textarea-stroke-color($focused-border);
   }
 }
 
 .demo-textarea.mdc-text-field--invalid {
   @include mdc-text-field-ink-color(orange);
-  @include mdc-floating-label-color(rgba(orange, .5));
+  @include mdc-text-field-label-color(rgba(orange, .5));
   @include mdc-text-field-textarea-stroke-color(rgba(orange, .38));
 
   &.mdc-text-field--focused {
-    @include mdc-floating-label-color(rgba(orange, .87));
+    @include mdc-text-field-label-color(rgba(orange, .87));
     @include mdc-text-field-textarea-stroke-color(orange);
   }
 }
@@ -72,22 +71,22 @@
 .demo-fullwidth-input:not(.mdc-text-field--invalid) {
   @include mdc-text-field-fullwidth-bottom-line-color(rgba(blue, .38));
   @include mdc-text-field-ink-color(black);
-  @include mdc-floating-label-color(rgba(blue, .5));
+  @include mdc-text-field-label-color(rgba(blue, .5));
   @include mdc-text-field-line-ripple-color(blue);
 
   &.mdc-text-field--focused {
-    @include mdc-floating-label-color(rgba(blue, .87));
+    @include mdc-text-field-label-color(rgba(blue, .87));
   }
 }
 
 .demo-fullwidth-input.mdc-text-field--invalid {
   @include mdc-text-field-fullwidth-bottom-line-color(rgba(orange, .38));
   @include mdc-text-field-ink-color(orange);
-  @include mdc-floating-label-color(rgba(orange, .5));
+  @include mdc-text-field-label-color(rgba(orange, .5));
   @include mdc-text-field-line-ripple-color(orange);
 
   &.mdc-text-field--focused {
-    @include mdc-floating-label-color(rgba(orange, .87));
+    @include mdc-text-field-label-color(rgba(orange, .87));
     @include mdc-text-field-fullwidth-bottom-line-color(orange);
   }
 }
@@ -101,7 +100,7 @@
   @include mdc-text-field-hover-bottom-line-color($hover-border);
   @include mdc-text-field-line-ripple-color($focused-border);
   @include mdc-text-field-ink-color(orange);
-  @include mdc-floating-label-color(rgba(orange, .87));
+  @include mdc-text-field-label-color(rgba(orange, .87));
   @include mdc-text-field-outline-color($idle-border);
   @include mdc-text-field-hover-outline-color($hover-border);
   @include mdc-text-field-focused-outline-color($focused-border);
diff --git a/demos/theme/theme-dark.scss b/demos/theme/theme-dark.scss
index fd77c8e923c..804234fae1d 100644
--- a/demos/theme/theme-dark.scss
+++ b/demos/theme/theme-dark.scss
@@ -25,7 +25,6 @@ $mdc-theme-background: $material-color-grey-900;
 @import "../../packages/mdc-checkbox/mixins";
 @import "../../packages/mdc-radio/mixins";
 @import "../../packages/mdc-textfield/mixins";
-@import "../../packages/mdc-floating-label/mixins";
 
 // TODO: Call theme mixins for mdc-select
 
@@ -39,7 +38,7 @@ $mdc-theme-background: $material-color-grey-900;
 
 .demo-text-field {
   @include mdc-text-field-ink-color(text-primary-on-dark);
-  @include mdc-floating-label-color(text-secondary-on-dark);
+  @include mdc-text-field-label-color(text-secondary-on-dark);
   @include mdc-text-field-line-ripple-color(text-hint-on-dark);
 }
 
diff --git a/packages/mdc-floating-label/_mixins.scss b/packages/mdc-floating-label/_mixins.scss
index 0fb1921c53f..e16000cb24b 100644
--- a/packages/mdc-floating-label/_mixins.scss
+++ b/packages/mdc-floating-label/_mixins.scss
@@ -19,9 +19,7 @@
 // Public
 
 @mixin mdc-floating-label-color($color) {
-  .mdc-floating-label {
-    @include mdc-theme-prop(color, $color);
-  }
+  @include mdc-theme-prop(color, $color);
 }
 
 @mixin mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX: 0%, $scale: .75) {
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 9c3c6952e11..4a022682311 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -483,7 +483,9 @@
 }
 
 @mixin mdc-text-field-label-color_($color) {
-  @include mdc-floating-label-color($color);
+  .mdc-floating-label {
+    @include mdc-floating-label-color($color);
+  }
 
   .mdc-text-field__input::placeholder { // placeholder used in place of label on css only version
     @include mdc-theme-prop(color, $color);

From d7e1776f76028f6b0a7934273c1b6e895273367e Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Fri, 16 Feb 2018 16:32:55 -0800
Subject: [PATCH 16/47] fix(floating-label): updated API for shake and float in
 component, and in respective places

---
 packages/mdc-floating-label/README.md         |  8 +-
 packages/mdc-floating-label/_mixins.scss      |  4 +-
 packages/mdc-floating-label/foundation.js     | 24 +++---
 packages/mdc-floating-label/index.js          | 19 ++---
 packages/mdc-textfield/_mixins.scss           | 12 +--
 packages/mdc-textfield/adapter.js             | 20 ++---
 packages/mdc-textfield/foundation.js          | 30 ++++---
 packages/mdc-textfield/index.js               |  8 +-
 .../mdc-floating-label-foundation.test.js     | 36 ++-------
 test/unit/mdc-textfield/foundation.test.js    | 78 +++++++++----------
 10 files changed, 103 insertions(+), 136 deletions(-)

diff --git a/packages/mdc-floating-label/README.md b/packages/mdc-floating-label/README.md
index 92c79f6360a..5677f0f01b3 100644
--- a/packages/mdc-floating-label/README.md
+++ b/packages/mdc-floating-label/README.md
@@ -85,8 +85,8 @@ Mixin | Description
 
 Method Signature | Description
 --- | ---
-`shake(isValid: boolean, isFocused: boolean) => void` | Label animation class is applied unless isValid or isFocused is true.
-`float(value: string, isFocused: boolean, isBadInput: boolean) => void` | Floats label above text field or select.
+`shake(shouldShake: boolean) => void` | Shakes label if shouldShake is true.
+`float(shouldFloat: boolean) => void` | Floats label if shouldFloat is true.
 `getWidth() => number` | Returns the width of the label element.
 
 ### `MDCFloatingLabelAdapter`
@@ -102,5 +102,5 @@ Method Signature | Description
 Method Signature | Description
 --- | ---
 `getWidth() => number` | Returns the width of the label element.
-`styleShake(isValid: boolean, isFocused: boolean)` | Will remove shake class if isValid _or_ isFocused is true, otherwise it will add shake class.
-`styleFloat(value: string, isFocused: boolean, isBadInput: boolean)` | Will add class to float label if isFocused, or if value is present. Otherwise it will remove classes unless isBadInput is true.
+`styleShake(shouldShake: boolean)` | Adds shake class if shouldShake is true.
+`styleFloat(shouldFloat: boolean)` | Adds float class if shouldFloat is true.
diff --git a/packages/mdc-floating-label/_mixins.scss b/packages/mdc-floating-label/_mixins.scss
index e16000cb24b..03046b69509 100644
--- a/packages/mdc-floating-label/_mixins.scss
+++ b/packages/mdc-floating-label/_mixins.scss
@@ -23,7 +23,7 @@
 }
 
 @mixin mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX: 0%, $scale: .75) {
-  @keyframes shake-float-above-#{$modifier} {
+  @keyframes mdc-floating-label-shake-float-above-#{$modifier} {
     0% {
       transform: translateX(calc(0 - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
     }
@@ -62,7 +62,7 @@
 
 @mixin mdc-floating-label-shake-animation($modifier) {
   .mdc-floating-label--shake {
-    animation: shake-float-above-#{$modifier} 250ms 1;
+    animation: mdc-floating-label-shake-float-above-#{$modifier} 250ms 1;
   }
 }
 
diff --git a/packages/mdc-floating-label/foundation.js b/packages/mdc-floating-label/foundation.js
index d3cefc1b12c..1f54528b94a 100644
--- a/packages/mdc-floating-label/foundation.js
+++ b/packages/mdc-floating-label/foundation.js
@@ -60,30 +60,26 @@ class MDCFloatingLabelFoundation extends MDCFoundation {
 
   /**
    * Styles the label to produce the label shake for errors.
-   * @param {boolean} isValid Whether the input's value is valid (passes all
-   *     validity checks).
-   * @param {boolean} isFocused Whether the input is focused.
+   * @param {boolean} shouldShake adds shake class if true.
    */
-  styleShake(isValid, isFocused) {
+  styleShake(shouldShake) {
     const {LABEL_SHAKE} = MDCFloatingLabelFoundation.cssClasses;
-    if (isValid || isFocused) {
-      this.adapter_.removeClass(LABEL_SHAKE);
-    } else {
+    if (shouldShake) {
       this.adapter_.addClass(LABEL_SHAKE);
+    } else {
+      this.adapter_.removeClass(LABEL_SHAKE);
     }
   }
 
   /**
-   * Styles the label to float or defloat as necessary.
-   * @param {string} value The value of the input.
-   * @param {boolean} isFocused Whether the input is focused.
-   * @param {boolean} isBadInput The input's `validity.badInput` value.
+   * Styles the label to float or defloat.
+   * @param {boolean} shouldFloat adds float class if true.
    */
-  styleFloat(value, isFocused, isBadInput) {
+  styleFloat(shouldFloat) {
     const {LABEL_FLOAT_ABOVE, LABEL_SHAKE} = MDCFloatingLabelFoundation.cssClasses;
-    if (!!value || isFocused) {
+    if (shouldFloat) {
       this.adapter_.addClass(LABEL_FLOAT_ABOVE);
-    } else if (!isBadInput) {
+    } else {
       this.adapter_.removeClass(LABEL_FLOAT_ABOVE);
       this.adapter_.removeClass(LABEL_SHAKE);
     }
diff --git a/packages/mdc-floating-label/index.js b/packages/mdc-floating-label/index.js
index 6e478bc65ba..ca211ba8cdc 100644
--- a/packages/mdc-floating-label/index.js
+++ b/packages/mdc-floating-label/index.js
@@ -35,23 +35,18 @@ class MDCFloatingLabel extends MDCComponent {
 
   /**
    * Styles the label to produce the label shake for errors.
-   * @param {boolean} isValid Whether the input's value is valid (passes all
-   *     validity checks).
-   * @param {boolean} isFocused Whether the input is focused.
+   * @param {boolean} shouldShake styles the label to shake if true.
    */
-  shake(isValid, isFocused) {
-    this.foundation_.styleShake(isValid, isFocused);
+  shake(shouldShake) {
+    this.foundation_.styleShake(shouldShake);
   }
 
   /**
-   * Styles label to float if isFocused, or if value is present.
-   * Otherwise it will style to defloat unless isBadInput is true.
-   * @param {string} value The value of the input.
-   * @param {boolean} isFocused Whether the input is focused.
-   * @param {boolean} isBadInput The input's `validity.badInput` value.
+   * Styles label to float/defloat.
+   * @param {boolean} shouldFloat styles the label to float if true.
    */
-  float(value, isFocused, isBadInput) {
-    this.foundation_.styleFloat(value, isFocused, isBadInput);
+  float(shouldFloat) {
+    this.foundation_.styleFloat(shouldFloat);
   }
 
   /**
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 4a022682311..07763fe2393 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -14,14 +14,14 @@
 // limitations under the License.
 //
 
-@import "icon/mixins";
-@import "icon/variables";
-@import "helper-text/mixins";
-@import "outline/mixins";
-@import "./variables";
-@import "@material/line-ripple/mixins";
 @import "@material/floating-label/mixins";
+@import "@material/line-ripple/mixins";
 @import "@material/theme/mixins";
+@import "./helper-text/mixins";
+@import "./icon/mixins";
+@import "./icon/variables";
+@import "./outline/mixins";
+@import "./variables";
 
 @mixin mdc-text-field-outlined-corner-radius($radius) {
   border-radius: $radius;
diff --git a/packages/mdc-textfield/adapter.js b/packages/mdc-textfield/adapter.js
index bd97169a393..a35d39cafee 100644
--- a/packages/mdc-textfield/adapter.js
+++ b/packages/mdc-textfield/adapter.js
@@ -149,23 +149,17 @@ class MDCTextFieldAdapter {
 
   /**
    * Only implement if label exists.
-   * Should shake the floating label if input is _not_ focused and _not_ valid,
-   * otherwise it should shake.
-   * @param {boolean} isValid
-   * @param {boolean} isFocused
+   * Shakes label if shouldShake is true
+   * @param {boolean} shouldShake
    */
-  shakeLabel(isValid, isFocused) {}
+  shakeLabel(shouldShake) {}
 
   /**
    * Only implement if label exists.
-   * Floats the floating label element above the text-field if there is a value
-   * or is focused. Otherwise it should go back to resting state unless isBadInput
-   * is true.
-   * @param {string} value
-   * @param {boolean} isFocused
-   * @param {boolean} isBadInput
-   */
-  floatLabel(value, isFocused, isBadInput) {}
+   * Floats the label above the input element if shouldFloat is true.
+   * @param {boolean} shouldFloat
+   */
+  floatLabel(shouldFloat) {}
 
   /**
    * Returns true if label element exists, false if it doesn't.
diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index fd63570a06a..7709183bf83 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -47,6 +47,16 @@ class MDCTextFieldFoundation extends MDCFoundation {
     return numbers;
   }
 
+  /** @return {boolean} */
+  get shouldShake() {
+    return !this.isValid() && !this.isFocused_;
+  }
+
+  /** @return {boolean} */
+  get shouldFloat() {
+    return !this.isBadInput_() && (!!this.getValue() || this.isFocused_);
+  }
+
   /**
    * {@see MDCTextFieldAdapter} for typing information on parameters and return
    * types.
@@ -112,8 +122,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
     this.adapter_.addClass(MDCTextFieldFoundation.cssClasses.UPGRADED);
     // Ensure label does not collide with any pre-filled value.
     if (this.adapter_.hasLabel() && this.getValue()) {
-      this.adapter_.floatLabel(
-        this.getValue(), this.isFocused_, this.isBadInput_());
+      this.adapter_.floatLabel(this.shouldFloat);
     }
 
     if (this.adapter_.isFocused()) {
@@ -180,9 +189,8 @@ class MDCTextFieldFoundation extends MDCFoundation {
       this.updateOutline();
     }
     if (this.adapter_.hasLabel()) {
-      this.adapter_.shakeLabel(this.isValid(), this.isFocused_);
-      this.adapter_.floatLabel(
-        this.getValue(), this.isFocused_, this.isBadInput_());
+      this.adapter_.shakeLabel(this.shouldShake);
+      this.adapter_.floatLabel(this.shouldFloat);
     }
     if (this.helperText_) {
       this.helperText_.showToScreenReader();
@@ -223,9 +231,8 @@ class MDCTextFieldFoundation extends MDCFoundation {
     this.styleValidity_(isValid);
     this.styleFocused_(this.isFocused_);
     if (this.adapter_.hasLabel()) {
-      this.adapter_.shakeLabel(this.isValid(), this.isFocused_);
-      this.adapter_.floatLabel(
-        this.getValue(), this.isFocused_, this.isBadInput_());
+      this.adapter_.shakeLabel(this.shouldShake);
+      this.adapter_.floatLabel(this.shouldFloat);
     }
     if (shouldRemoveLabelFloat) {
       this.receivedUserInput_ = false;
@@ -247,9 +254,8 @@ class MDCTextFieldFoundation extends MDCFoundation {
     const isValid = this.isValid();
     this.styleValidity_(isValid);
     if (this.adapter_.hasLabel()) {
-      this.adapter_.shakeLabel(isValid, this.isFocused_);
-      this.adapter_.floatLabel(
-        this.getValue(), this.isFocused_, this.isBadInput_());
+      this.adapter_.shakeLabel(this.shouldShake);
+      this.adapter_.floatLabel(this.shouldFloat);
     }
   }
 
@@ -272,7 +278,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
     isValid = this.isValid();
     this.styleValidity_(isValid);
     if (this.adapter_.hasLabel()) {
-      this.adapter_.shakeLabel(isValid, this.isFocused_);
+      this.adapter_.shakeLabel(this.shouldShake);
     }
   }
 
diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
index f41a22351f3..46c0c1ae830 100644
--- a/packages/mdc-textfield/index.js
+++ b/packages/mdc-textfield/index.js
@@ -267,11 +267,11 @@ class MDCTextField extends MDCComponent {
             this.lineRipple_.setRippleCenter(normalizedX);
           }
         },
-        shakeLabel: (isValid, isFocused) => {
-          this.label_.shake(isValid, isFocused);
+        shakeLabel: (shouldShake) => {
+          this.label_.shake(shouldShake);
         },
-        floatLabel: (value, isFocused, isBadInput) => {
-          this.label_.float(value, isFocused, isBadInput);
+        floatLabel: (shouldFloat) => {
+          this.label_.float(shouldFloat);
         },
         hasLabel: () => {
           return !!this.label_;
diff --git a/test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js b/test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js
index 96e654e61e4..67863eb9004 100644
--- a/test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js
+++ b/test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js
@@ -44,46 +44,26 @@ test('#getWidth returns the width of the label element scaled by 75%', () => {
   assert.equal(foundation.getWidth(), width);
 });
 
-test('#styleFloat with non-empty value floats the label', () => {
+test('#styleFloat called with shouldFloat is true, floats the label', () => {
   const {foundation, mockAdapter} = setupTest();
-  foundation.styleFloat('new value', /* isFocused */ true, /* isBadInput */ false);
+  foundation.styleFloat(true);
   td.verify(mockAdapter.addClass(cssClasses.LABEL_FLOAT_ABOVE));
 });
 
-test('#styleFloat with empty value de-floats the label', () => {
+test('#styleFloat called with shouldFloat is false, de-floats the label', () => {
   const {foundation, mockAdapter} = setupTest();
-  foundation.styleFloat('', /* isFocused */ false, /* isBadInput */ false);
+  foundation.styleFloat(false);
   td.verify(mockAdapter.removeClass(cssClasses.LABEL_FLOAT_ABOVE));
 });
 
-test('#styleShake with valid and invalid input', () => {
+test('#styleShake called with shouldShake is true, should add shake class', () => {
   const {foundation, mockAdapter} = setupTest();
-  foundation.styleShake(/* isValid */ false, /* isFocused */ false);
+  foundation.styleShake(true);
   td.verify(mockAdapter.addClass(cssClasses.LABEL_SHAKE));
-
-  foundation.styleShake(/* isValid */ true, /* isFocused */ false);
-  td.verify(mockAdapter.removeClass(cssClasses.LABEL_SHAKE));
-
-  foundation.styleShake(/* isValid */ false, /* isFocused */ true);
-  td.verify(mockAdapter.removeClass(cssClasses.LABEL_SHAKE));
-});
-
-test('#styleFloat with empty value and badInput does not touch floating label', () => {
-  const {foundation, mockAdapter} = setupTest();
-  foundation.styleFloat('', /* isFocused*/ false, /* isBadInput */ true);
-  td.verify(mockAdapter.addClass(cssClasses.LABEL_FLOAT_ABOVE), {times: 0});
-  td.verify(mockAdapter.removeClass(cssClasses.LABEL_FLOAT_ABOVE), {times: 0});
 });
 
-test('#styleShake updates shake class', () => {
+test('#styleShake called with shouldShake is false, should remove shake class', () => {
   const {foundation, mockAdapter} = setupTest();
-
-  foundation.styleShake(/* isValid */ false, /* isFocused */ false);
-  td.verify(mockAdapter.addClass(cssClasses.LABEL_SHAKE));
-
-  foundation.styleShake(/* isValid */ true, /* isFocused */ false);
-  td.verify(mockAdapter.removeClass(cssClasses.LABEL_SHAKE));
-
-  foundation.styleShake(/* isValid */ false, /* isFocused */ true);
+  foundation.styleFloat(false);
   td.verify(mockAdapter.removeClass(cssClasses.LABEL_SHAKE));
 });
diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
index 80033d11022..ae6e248ef5a 100644
--- a/test/unit/mdc-textfield/foundation.test.js
+++ b/test/unit/mdc-textfield/foundation.test.js
@@ -107,21 +107,21 @@ test('#setValue with non-empty value styles the label', () => {
   const value = 'new value';
   const {foundation, nativeInput, mockAdapter} = setupValueTest('', undefined, undefined, true);
   // Initial empty value should not float label.
-  td.verify(mockAdapter.floatLabel('', /* isFocused */ false, /* isBadInput */ false), {times: 0});
+  td.verify(mockAdapter.floatLabel(false), {times: 0});
   nativeInput.value = value;
   foundation.setValue(value);
-  td.verify(mockAdapter.shakeLabel(/* isValid */ true, /* isFocused */ false));
-  td.verify(mockAdapter.floatLabel(value, /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(false));
+  td.verify(mockAdapter.floatLabel(true));
 });
 
 test('#setValue with empty value styles the label', () => {
   const {foundation, nativeInput, mockAdapter} = setupValueTest('old value', undefined, undefined, true);
   // Initial value should float the label.
-  td.verify(mockAdapter.floatLabel('old value', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.floatLabel(true));
   nativeInput.value = '';
   foundation.setValue('');
-  td.verify(mockAdapter.shakeLabel(/* isValid */ true, /* isFocused */ false));
-  td.verify(mockAdapter.floatLabel('', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(false));
+  td.verify(mockAdapter.floatLabel(false));
 });
 
 test('#setValue valid and invalid input', () => {
@@ -131,15 +131,15 @@ test('#setValue valid and invalid input', () => {
   foundation.setValue('invalid');
   td.verify(mockAdapter.addClass(cssClasses.INVALID));
   td.verify(helperText.setValidity(false));
-  td.verify(mockAdapter.shakeLabel(/* isValid */ false, /* isFocused */ false));
-  td.verify(mockAdapter.floatLabel('invalid', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(true));
+  td.verify(mockAdapter.floatLabel(true));
 
   nativeInput.validity.valid = true;
   foundation.setValue('valid');
   td.verify(mockAdapter.removeClass(cssClasses.INVALID));
   td.verify(helperText.setValidity(true));
-  td.verify(mockAdapter.shakeLabel(/* isValid */ true, /* isFocused */ false));
-  td.verify(mockAdapter.floatLabel('valid', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(false));
+  td.verify(mockAdapter.floatLabel(true));
 });
 
 test('#setValue does not affect focused state', () => {
@@ -183,12 +183,12 @@ test('#setValid updates classes', () => {
   foundation.setValid(false);
   td.verify(mockAdapter.addClass(cssClasses.INVALID));
   td.verify(helperText.setValidity(false));
-  td.verify(mockAdapter.shakeLabel(/* isValid */ false, /* isFocused */ false));
+  td.verify(mockAdapter.shakeLabel(true));
 
   foundation.setValid(true);
   td.verify(mockAdapter.removeClass(cssClasses.INVALID));
   td.verify(helperText.setValidity(true));
-  td.verify(mockAdapter.shakeLabel(/* isValid */ true, /* isFocused */ false));
+  td.verify(mockAdapter.shakeLabel(false));
 
   // None of these is affected by setValid.
   td.verify(mockAdapter.addClass(cssClasses.FOCUSED), {times: 0});
@@ -203,12 +203,12 @@ test('#setValid updates classes, but not label methods when hasLabel is false',
   foundation.setValid(false);
   td.verify(mockAdapter.addClass(cssClasses.INVALID));
   td.verify(helperText.setValidity(false));
-  td.verify(mockAdapter.shakeLabel(td.matchers.anything(), td.matchers.anything()), {times: 0});
+  td.verify(mockAdapter.shakeLabel(td.matchers.anything()), {times: 0});
 
   foundation.setValid(true);
   td.verify(mockAdapter.removeClass(cssClasses.INVALID));
   td.verify(helperText.setValidity(true));
-  td.verify(mockAdapter.shakeLabel(td.matchers.anything(), td.matchers.anything()), {times: 0});
+  td.verify(mockAdapter.shakeLabel(td.matchers.anything()), {times: 0});
 
   // None of these is affected by setValid.
   td.verify(mockAdapter.addClass(cssClasses.FOCUSED), {times: 0});
@@ -361,7 +361,7 @@ test('#init floats label if the input contains a value', () => {
     },
   });
   foundation.init();
-  td.verify(mockAdapter.floatLabel('Pre-filled value', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.floatLabel(true));
 });
 
 test('#init doesnot call floatLabel if there is no label and the input contains a value', () => {
@@ -374,7 +374,7 @@ test('#init doesnot call floatLabel if there is no label and the input contains
     },
   });
   foundation.init();
-  td.verify(mockAdapter.floatLabel(td.matchers.anything(), td.matchers.anything(), td.matchers.anything()), {times: 0});
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
 });
 
 test('#init does not float label if the input does not contain a value', () => {
@@ -437,27 +437,23 @@ test('on input styles label if input event occurs without any other events', ()
   let input;
   td.when(mockAdapter.hasLabel()).thenReturn(true);
   td.when(mockAdapter.registerInputInteractionHandler('input', td.matchers.isA(Function)))
-    .thenDo((evtType, handler) => {
-      input = handler;
-    });
+    .thenDo((evtType, handler) => input = handler);
   foundation.init();
-  td.verify(mockAdapter.floatLabel(), {times: 0});
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
   input();
-  td.verify(mockAdapter.shakeLabel(/* isValid */ true, /* isFocused */ true));
-  td.verify(mockAdapter.floatLabel(/* value */ '', /* isFocused */ true, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(false));
+  td.verify(mockAdapter.floatLabel(true));
 });
 
 test('on input doesnot styles label if input event occurs without any other events but hasLabel is false', () => {
   const {foundation, mockAdapter} = setupTest();
   let input;
   td.when(mockAdapter.registerInputInteractionHandler('input', td.matchers.isA(Function)))
-    .thenDo((evtType, handler) => {
-      input = handler;
-    });
+    .thenDo((evtType, handler) => input = handler);
   foundation.init();
   input();
-  td.verify(mockAdapter.shakeLabel(td.matchers.anything(), td.matchers.anything()), {times: 0});
-  td.verify(mockAdapter.floatLabel(td.matchers.anything(), td.matchers.anything(), td.matchers.anything()), {times: 0});
+  td.verify(mockAdapter.shakeLabel(td.matchers.anything()), {times: 0});
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
 });
 
 test('on input does nothing if input event preceded by keydown event', () => {
@@ -521,9 +517,9 @@ test('on focus styles label', () => {
       focus = handler;
     });
   foundation.init();
-  td.verify(mockAdapter.floatLabel(/* value */ '', /* isFocused */ false, /* isBadInput */ false), {times: 0});
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
   focus();
-  td.verify(mockAdapter.shakeLabel(/* isValid */ true, /* isFocused */ true));
+  td.verify(mockAdapter.shakeLabel(false));
 });
 
 test('on focus do not styles label if hasLabel is false', () => {
@@ -535,8 +531,8 @@ test('on focus do not styles label if hasLabel is false', () => {
     });
   foundation.init();
   focus();
-  td.verify(mockAdapter.floatLabel(td.matchers.anything(), td.matchers.anything(), td.matchers.anything()), {times: 0});
-  td.verify(mockAdapter.shakeLabel(td.matchers.anything(), td.matchers.anything()), {times: 0});
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
+  td.verify(mockAdapter.shakeLabel(td.matchers.anything()), {times: 0});
 });
 
 test('on focus makes helper text visible to the screen reader', () => {
@@ -579,28 +575,28 @@ test('on blur removes mdc-text-field--focused class', () => {
 test('on blur styles label when no input value present and validity checks pass', () => {
   const {blur, mockAdapter} = setupBlurTest();
   td.when(mockAdapter.hasLabel()).thenReturn(true);
-  td.verify(mockAdapter.floatLabel(/* value */ '', /* isFocused */ false), {times: 0});
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
   blur();
-  td.verify(mockAdapter.shakeLabel(/* isValid */ true, /* isFocused */ false));
-  td.verify(mockAdapter.floatLabel(/* value */ '', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(false));
+  td.verify(mockAdapter.floatLabel(false));
 });
 
 test('does not style label on blur when no input value present and validity checks pass and hasLabel is false', () => {
   const {blur, mockAdapter} = setupBlurTest();
   td.verify(mockAdapter.floatLabel(/* value */ '', /* isFocused */ false), {times: 0});
   blur();
-  td.verify(mockAdapter.shakeLabel(td.matchers.anything(), td.matchers.anything()), {times: 0});
-  td.verify(mockAdapter.floatLabel(td.matchers.anything(), td.matchers.anything(), td.matchers.anything()), {times: 0});
+  td.verify(mockAdapter.shakeLabel(td.matchers.anything()), {times: 0});
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
 });
 
 test('on blur styles label if input has a value', () => {
   const {blur, nativeInput, mockAdapter} = setupBlurTest();
   td.when(mockAdapter.hasLabel()).thenReturn(true);
-  td.verify(mockAdapter.floatLabel(/* value */ '', /* isFocused */ false), {times: 0});
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
   nativeInput.value = 'non-empty value';
   blur();
-  td.verify(mockAdapter.shakeLabel(/* isValid */ true, /* isFocused */ false));
-  td.verify(mockAdapter.floatLabel('non-empty value', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(false));
+  td.verify(mockAdapter.floatLabel(true));
 });
 
 test('does not style label on blur if input has a value and hasLabel is false', () => {
@@ -608,8 +604,8 @@ test('does not style label on blur if input has a value and hasLabel is false',
   td.verify(mockAdapter.floatLabel(/* value */ '', /* isFocused */ false), {times: 0});
   nativeInput.value = 'non-empty value';
   blur();
-  td.verify(mockAdapter.shakeLabel(td.matchers.anything(), td.matchers.anything()), {times: 0});
-  td.verify(mockAdapter.floatLabel(td.matchers.anything(), td.matchers.anything(), td.matchers.anything()), {times: 0});
+  td.verify(mockAdapter.shakeLabel(td.matchers.anything()), {times: 0});
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
 });
 
 test('on blur removes mdc-text-field--invalid if custom validity is false and' +

From 5973760cfc1aa888b6f7a458cb8cd5d5a8882321 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Tue, 20 Feb 2018 09:43:35 -0800
Subject: [PATCH 17/47] fix(floating-label): reorder scss import statements
 alphabetical

---
 packages/mdc-floating-label/mdc-floating-label.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mdc-floating-label/mdc-floating-label.scss b/packages/mdc-floating-label/mdc-floating-label.scss
index 6fcc518bc9a..acb8ccce7f9 100644
--- a/packages/mdc-floating-label/mdc-floating-label.scss
+++ b/packages/mdc-floating-label/mdc-floating-label.scss
@@ -14,11 +14,11 @@
 // limitations under the License.
 //
 
-@import "./mixins";
-@import "./variables";
 @import "@material/rtl/mixins";
 @import "@material/theme/variables";
 @import "@material/theme/mixins";
+@import "./mixins";
+@import "./variables";
 
 // postcss-bem-linter: define floating-label
 .mdc-floating-label {

From ce05cda32ba51294fe9c21aafc04d26596d326e2 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Wed, 21 Feb 2018 10:43:25 -0800
Subject: [PATCH 18/47] fix(floating-label): rename from styleShake to shake
 and styleFloat to float

---
 packages/material-components-web/package.json |  2 +-
 packages/mdc-floating-label/README.md         | 27 +++++---------
 packages/mdc-floating-label/_mixins.scss      |  2 --
 packages/mdc-floating-label/adapter.js        | 14 ++++++++
 packages/mdc-floating-label/foundation.js     | 27 +++++++++++---
 packages/mdc-floating-label/index.js          | 14 +++++---
 packages/mdc-floating-label/package.json      |  2 +-
 packages/mdc-textfield/mdc-text-field.scss    | 10 +++---
 packages/mdc-textfield/package.json           |  2 +-
 .../mdc-floating-label-foundation.test.js     | 35 ++++++++++++++-----
 10 files changed, 89 insertions(+), 46 deletions(-)

diff --git a/packages/material-components-web/package.json b/packages/material-components-web/package.json
index b7bfced7780..1a5cd096cdc 100644
--- a/packages/material-components-web/package.json
+++ b/packages/material-components-web/package.json
@@ -25,7 +25,7 @@
     "@material/drawer": "^0.30.0",
     "@material/elevation": "^0.28.0",
     "@material/fab": "^0.31.0",
-    "@material/floating-label": "^0.30.0",
+    "@material/floating-label": "0.0.0",
     "@material/form-field": "^0.31.0",
     "@material/grid-list": "^0.30.0",
     "@material/icon-toggle": "^0.31.0",
diff --git a/packages/mdc-floating-label/README.md b/packages/mdc-floating-label/README.md
index 5677f0f01b3..78ec14bc832 100644
--- a/packages/mdc-floating-label/README.md
+++ b/packages/mdc-floating-label/README.md
@@ -40,7 +40,8 @@ Floating labels display the type of input a field requires. Every text field and
 
 #### Avoid Dynamic ID Generation
 
-It's also possible to wrap `mdc-text-field__input` within a `<label>` to avoid dynamic id generation:
+If you're using the JavaScript-enabled version of floating label, you can avoid needing to assign
+a unique `id` to each `<input>` by wrapping `mdc-text-field__input` within a `<label>`:
 
 ```html
 <label class="mdc-text-field">
@@ -50,19 +51,6 @@ It's also possible to wrap `mdc-text-field__input` within a `<label>` to avoid d
 </label>
 ```
 
-> _NOTE_: Only place a `mdc-floating-label` inside of a text field _if you plan on using
-> JavaScript_. Otherwise, the label must go outside of the text-field, as shown below.
-
-#### Single Line, CSS Only
-
-```html
-<label for="text-field-no-js">TextField with no JS:</label>
-<div class="mdc-text-field">
-  <input type="text" id="text-field-no-js" class="mdc-text-field__input" placeholder="Hint text">
-  <div class="mdc-text-field__bottom-line"></div>
-</div>
-```
-
 ### CSS Classes
 
 CSS Class | Description
@@ -85,8 +73,8 @@ Mixin | Description
 
 Method Signature | Description
 --- | ---
-`shake(shouldShake: boolean) => void` | Shakes label if shouldShake is true.
-`float(shouldFloat: boolean) => void` | Floats label if shouldFloat is true.
+`shake(shouldShake: boolean) => void` | Shakes or stops shaking the label, depending on the value of `shouldShake`. Proxies to the foundation method of the same name.
+`float(shouldFloat: boolean) => void` | Floats or docks the label, depending on the value of `shouldFloat`. Proxies to the foundation method of the same name.
 `getWidth() => number` | Returns the width of the label element.
 
 ### `MDCFloatingLabelAdapter`
@@ -101,6 +89,9 @@ Method Signature | Description
 
 Method Signature | Description
 --- | ---
+`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.*
+`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.
 `getWidth() => number` | Returns the width of the label element.
-`styleShake(shouldShake: boolean)` | Adds shake class if shouldShake is true.
-`styleFloat(shouldFloat: boolean)` | Adds float class if shouldFloat is true.
+
+\* **N.B.:** Multiple consecutive calls to `shake(true)` will only shake the label once.
+To shake the label a second time, you must first call `shake(false)` to reset its state.
diff --git a/packages/mdc-floating-label/_mixins.scss b/packages/mdc-floating-label/_mixins.scss
index 03046b69509..281efff3d6b 100644
--- a/packages/mdc-floating-label/_mixins.scss
+++ b/packages/mdc-floating-label/_mixins.scss
@@ -16,8 +16,6 @@
 
 @import "./variables";
 
-// Public
-
 @mixin mdc-floating-label-color($color) {
   @include mdc-theme-prop(color, $color);
 }
diff --git a/packages/mdc-floating-label/adapter.js b/packages/mdc-floating-label/adapter.js
index be1dc42b194..b5915347ae7 100644
--- a/packages/mdc-floating-label/adapter.js
+++ b/packages/mdc-floating-label/adapter.js
@@ -45,6 +45,20 @@ class MDCFloatingLabelAdapter {
    * @return {number}
    */
   getWidth() {}
+
+  /**
+   * Registers an event listener on the root element for a given event.
+   * @param {string} evtType
+   * @param {function(!Event): undefined} handler
+   */
+  registerInteractionHandler(evtType, handler) {}
+
+  /**
+   * Deregisters an event listener on the root element for a given event.
+   * @param {string} evtType
+   * @param {function(!Event): undefined} handler
+   */
+  deregisterInteractionHandler(evtType, handler) {}
 }
 
 export default MDCFloatingLabelAdapter;
diff --git a/packages/mdc-floating-label/foundation.js b/packages/mdc-floating-label/foundation.js
index 1f54528b94a..c48ac9a1562 100644
--- a/packages/mdc-floating-label/foundation.js
+++ b/packages/mdc-floating-label/foundation.js
@@ -40,6 +40,8 @@ class MDCFloatingLabelFoundation extends MDCFoundation {
       addClass: () => {},
       removeClass: () => {},
       getWidth: () => {},
+      registerInteractionHandler: () => {},
+      deregisterInteractionHandler: () => {},
     });
   }
 
@@ -48,6 +50,9 @@ class MDCFloatingLabelFoundation extends MDCFoundation {
    */
   constructor(adapter) {
     super(Object.assign(MDCFloatingLabelFoundation.defaultAdapter, adapter));
+
+    /** @private {function(!Event): undefined} */
+    this.shakeAnimationEndHandler_ = () => this.handleShakeAnimationEnd_();
   }
 
   /**
@@ -60,22 +65,25 @@ class MDCFloatingLabelFoundation extends MDCFoundation {
 
   /**
    * Styles the label to produce the label shake for errors.
-   * @param {boolean} shouldShake adds shake class if true.
+   * @param {boolean} shouldShake adds shake class if true,
+   * otherwise removes shake class.
    */
-  styleShake(shouldShake) {
+  shake(shouldShake) {
     const {LABEL_SHAKE} = MDCFloatingLabelFoundation.cssClasses;
     if (shouldShake) {
       this.adapter_.addClass(LABEL_SHAKE);
+      this.adapter_.registerInteractionHandler('animationend', this.shakeAnimationEndHandler_);
     } else {
       this.adapter_.removeClass(LABEL_SHAKE);
     }
   }
 
   /**
-   * Styles the label to float or defloat.
-   * @param {boolean} shouldFloat adds float class if true.
+   * Styles the label to float or dock.
+   * @param {boolean} shouldFloat adds float class if true, otherwise remove
+   * float and shake class to dock label.
    */
-  styleFloat(shouldFloat) {
+  float(shouldFloat) {
     const {LABEL_FLOAT_ABOVE, LABEL_SHAKE} = MDCFloatingLabelFoundation.cssClasses;
     if (shouldFloat) {
       this.adapter_.addClass(LABEL_FLOAT_ABOVE);
@@ -84,6 +92,15 @@ class MDCFloatingLabelFoundation extends MDCFoundation {
       this.adapter_.removeClass(LABEL_SHAKE);
     }
   }
+
+  /**
+   * Handles an interaction event on the root element.
+   */
+  handleShakeAnimationEnd_() {
+    const {LABEL_SHAKE} = MDCFloatingLabelFoundation.cssClasses;
+    this.adapter_.removeClass(LABEL_SHAKE);
+    this.adapter_.deregisterInteractionHandler('animationend', this.shakeAnimationEndHandler_);
+  }
 }
 
 export default MDCFloatingLabelFoundation;
diff --git a/packages/mdc-floating-label/index.js b/packages/mdc-floating-label/index.js
index ca211ba8cdc..7a97cb4c925 100644
--- a/packages/mdc-floating-label/index.js
+++ b/packages/mdc-floating-label/index.js
@@ -35,18 +35,20 @@ class MDCFloatingLabel extends MDCComponent {
 
   /**
    * Styles the label to produce the label shake for errors.
-   * @param {boolean} shouldShake styles the label to shake if true.
+   * @param {boolean} shouldShake styles the label to shake by adding shake class
+   * if true, otherwise will stop shaking by removing shake class.
    */
   shake(shouldShake) {
-    this.foundation_.styleShake(shouldShake);
+    this.foundation_.shake(shouldShake);
   }
 
   /**
-   * Styles label to float/defloat.
-   * @param {boolean} shouldFloat styles the label to float if true.
+   * Styles label to float/dock.
+   * @param {boolean} shouldFloat styles the label to float by adding float class
+   * if true, otherwise docks the label by removing the float class.
    */
   float(shouldFloat) {
-    this.foundation_.styleFloat(shouldFloat);
+    this.foundation_.float(shouldFloat);
   }
 
   /**
@@ -64,6 +66,8 @@ class MDCFloatingLabel extends MDCComponent {
       addClass: (className) => this.root_.classList.add(className),
       removeClass: (className) => this.root_.classList.remove(className),
       getWidth: () => this.root_.offsetWidth,
+      registerInteractionHandler: (evtType, handler) => this.root_.addEventListener(evtType, handler),
+      deregisterInteractionHandler: (evtType, handler) => this.root_.removeEventListener(evtType, handler),
     });
   }
 }
diff --git a/packages/mdc-floating-label/package.json b/packages/mdc-floating-label/package.json
index 741912a6a2f..3e3a8ba7692 100644
--- a/packages/mdc-floating-label/package.json
+++ b/packages/mdc-floating-label/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@material/floating-label",
   "description": "The Material Components for the web floating-label component",
-  "version": "0.30.0",
+  "version": "0.0.0",
   "license": "Apache-2.0",
   "keywords": [
     "material components",
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index f6af4fb708b..23fcb72ccfb 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -14,21 +14,21 @@
 // limitations under the License.
 //
 
-@import "./functions";
-@import "./mixins";
-@import "./variables";
 @import "@material/animation/variables";
+@import "@material/floating-label/mdc-floating-label";
+@import "@material/line-ripple/mdc-line-ripple";
 @import "@material/ripple/common";
 @import "@material/ripple/mixins";
 @import "@material/rtl/mixins";
 @import "@material/theme/variables";
 @import "@material/typography/mixins";
 @import "@material/typography/variables";
-@import "@material/line-ripple/mdc-line-ripple";
+@import "./functions";
 @import "./helper-text/mdc-text-field-helper-text";
 @import "./icon/mdc-text-field-icon";
-@import "@material/floating-label/mdc-floating-label";
+@import "./mixins";
 @import "./outline/mdc-text-field-outline";
+@import "./variables";
 
 // postcss-bem-linter: define text-field
 
diff --git a/packages/mdc-textfield/package.json b/packages/mdc-textfield/package.json
index 348171aac75..e667fbea5f5 100644
--- a/packages/mdc-textfield/package.json
+++ b/packages/mdc-textfield/package.json
@@ -17,7 +17,7 @@
   "dependencies": {
     "@material/animation": "^0.25.0",
     "@material/base": "^0.29.0",
-    "@material/floating-label": "^0.30.0",
+    "@material/floating-label": "0.0.0",
     "@material/line-ripple": "^0.30.0",
     "@material/ripple": "^0.31.0",
     "@material/rtl": "^0.30.0",
diff --git a/test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js b/test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js
index 67863eb9004..cd800b11628 100644
--- a/test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js
+++ b/test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js
@@ -32,6 +32,7 @@ test('exports cssClasses', () => {
 test('defaultAdapter returns a complete adapter implementation', () => {
   verifyDefaultAdapter(MDCFloatingLabelFoundation, [
     'addClass', 'removeClass', 'getWidth',
+    'registerInteractionHandler', 'deregisterInteractionHandler',
   ]);
 });
 
@@ -44,26 +45,44 @@ test('#getWidth returns the width of the label element scaled by 75%', () => {
   assert.equal(foundation.getWidth(), width);
 });
 
-test('#styleFloat called with shouldFloat is true, floats the label', () => {
+test('#float called with shouldFloat is true, floats the label', () => {
   const {foundation, mockAdapter} = setupTest();
-  foundation.styleFloat(true);
+  foundation.float(true);
   td.verify(mockAdapter.addClass(cssClasses.LABEL_FLOAT_ABOVE));
 });
 
-test('#styleFloat called with shouldFloat is false, de-floats the label', () => {
+test('#float called with shouldFloat is false, de-floats the label', () => {
   const {foundation, mockAdapter} = setupTest();
-  foundation.styleFloat(false);
+  foundation.float(false);
   td.verify(mockAdapter.removeClass(cssClasses.LABEL_FLOAT_ABOVE));
 });
 
-test('#styleShake called with shouldShake is true, should add shake class', () => {
+test('#shake called with shouldShake is true, should add shake class', () => {
   const {foundation, mockAdapter} = setupTest();
-  foundation.styleShake(true);
+  foundation.shake(true);
   td.verify(mockAdapter.addClass(cssClasses.LABEL_SHAKE));
 });
 
-test('#styleShake called with shouldShake is false, should remove shake class', () => {
+test('#shake called with shouldShake is true, should register animationend event listener', () => {
   const {foundation, mockAdapter} = setupTest();
-  foundation.styleFloat(false);
+  foundation.shake(true);
+  td.verify(mockAdapter.registerInteractionHandler('animationend', td.matchers.isA(Function)));
+});
+
+test('#shake called with shouldShake is false, should remove shake class', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.shake(false);
+  td.verify(mockAdapter.removeClass(cssClasses.LABEL_SHAKE));
+});
+
+test('#float called with shouldFloat is false, should remove shake class', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.float(false);
   td.verify(mockAdapter.removeClass(cssClasses.LABEL_SHAKE));
 });
+
+test('#handleShakeAnimationEnd_ should deregisterInteractionHandler', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.handleShakeAnimationEnd_();
+  td.verify(mockAdapter.deregisterInteractionHandler('animationend', td.matchers.isA(Function)));
+});

From f8ca6f1ffe7c6293302dafb86b6ef91a63ddc74c Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Wed, 21 Feb 2018 16:27:32 -0800
Subject: [PATCH 19/47] fix(floating-label): moved animationend listeners to
 the init/destroy methods

---
 packages/mdc-floating-label/foundation.js     | 10 +++++--
 .../mdc-floating-label-foundation.test.js     | 26 ++++++++++++-------
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/packages/mdc-floating-label/foundation.js b/packages/mdc-floating-label/foundation.js
index c48ac9a1562..5b11e52f3d0 100644
--- a/packages/mdc-floating-label/foundation.js
+++ b/packages/mdc-floating-label/foundation.js
@@ -55,6 +55,14 @@ class MDCFloatingLabelFoundation extends MDCFoundation {
     this.shakeAnimationEndHandler_ = () => this.handleShakeAnimationEnd_();
   }
 
+  init() {
+    this.adapter_.registerInteractionHandler('animationend', this.shakeAnimationEndHandler_);
+  }
+
+  destroy() {
+    this.adapter_.deregisterInteractionHandler('animationend', this.shakeAnimationEndHandler_);
+  }
+
   /**
    * Returns the width of the label element.
    * @return {number}
@@ -72,7 +80,6 @@ class MDCFloatingLabelFoundation extends MDCFoundation {
     const {LABEL_SHAKE} = MDCFloatingLabelFoundation.cssClasses;
     if (shouldShake) {
       this.adapter_.addClass(LABEL_SHAKE);
-      this.adapter_.registerInteractionHandler('animationend', this.shakeAnimationEndHandler_);
     } else {
       this.adapter_.removeClass(LABEL_SHAKE);
     }
@@ -99,7 +106,6 @@ class MDCFloatingLabelFoundation extends MDCFoundation {
   handleShakeAnimationEnd_() {
     const {LABEL_SHAKE} = MDCFloatingLabelFoundation.cssClasses;
     this.adapter_.removeClass(LABEL_SHAKE);
-    this.adapter_.deregisterInteractionHandler('animationend', this.shakeAnimationEndHandler_);
   }
 }
 
diff --git a/test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js b/test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js
index cd800b11628..361966c5f40 100644
--- a/test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js
+++ b/test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js
@@ -23,10 +23,12 @@ import MDCFloatingLabelFoundation from '../../../packages/mdc-floating-label/fou
 
 const {cssClasses} = MDCFloatingLabelFoundation;
 
+const setupTest = () => setupFoundationTest(MDCFloatingLabelFoundation);
+
 suite('MDCFloatingLabelFoundation');
 
 test('exports cssClasses', () => {
-  assert.isOk('cssClasses' in MDCFloatingLabelFoundation);
+  assert.deepEqual(MDCFloatingLabelFoundation.cssClasses, cssClasses);
 });
 
 test('defaultAdapter returns a complete adapter implementation', () => {
@@ -36,7 +38,17 @@ test('defaultAdapter returns a complete adapter implementation', () => {
   ]);
 });
 
-const setupTest = () => setupFoundationTest(MDCFloatingLabelFoundation);
+test('#init should register animationend event listener', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.init();
+  td.verify(mockAdapter.registerInteractionHandler('animationend', td.matchers.isA(Function)));
+});
+
+test('#destroy should deregister animationend event listener', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.destroy();
+  td.verify(mockAdapter.deregisterInteractionHandler('animationend', td.matchers.isA(Function)));
+});
 
 test('#getWidth returns the width of the label element scaled by 75%', () => {
   const {foundation, mockAdapter} = setupTest();
@@ -63,12 +75,6 @@ test('#shake called with shouldShake is true, should add shake class', () => {
   td.verify(mockAdapter.addClass(cssClasses.LABEL_SHAKE));
 });
 
-test('#shake called with shouldShake is true, should register animationend event listener', () => {
-  const {foundation, mockAdapter} = setupTest();
-  foundation.shake(true);
-  td.verify(mockAdapter.registerInteractionHandler('animationend', td.matchers.isA(Function)));
-});
-
 test('#shake called with shouldShake is false, should remove shake class', () => {
   const {foundation, mockAdapter} = setupTest();
   foundation.shake(false);
@@ -81,8 +87,8 @@ test('#float called with shouldFloat is false, should remove shake class', () =>
   td.verify(mockAdapter.removeClass(cssClasses.LABEL_SHAKE));
 });
 
-test('#handleShakeAnimationEnd_ should deregisterInteractionHandler', () => {
+test('#handleShakeAnimationEnd_ should remove LABEL_SHAKE class', () => {
   const {foundation, mockAdapter} = setupTest();
   foundation.handleShakeAnimationEnd_();
-  td.verify(mockAdapter.deregisterInteractionHandler('animationend', td.matchers.isA(Function)));
+  td.verify(mockAdapter.removeClass(cssClasses.LABEL_SHAKE));
 });

From 161e40a87527f288287936aaac78c255f5cc31a8 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Wed, 21 Feb 2018 16:57:04 -0800
Subject: [PATCH 20/47] fix(floating-label): fix floating label animation
 function

---
 packages/mdc-floating-label/_functions.scss   | 21 +++++++++++++++++++
 .../mdc-floating-label.scss                   |  3 ++-
 2 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 packages/mdc-floating-label/_functions.scss

diff --git a/packages/mdc-floating-label/_functions.scss b/packages/mdc-floating-label/_functions.scss
new file mode 100644
index 00000000000..05e1660895b
--- /dev/null
+++ b/packages/mdc-floating-label/_functions.scss
@@ -0,0 +1,21 @@
+//
+// Copyright 2017 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+@import "@material/animation/variables";
+
+@function mdc-floating-label-transition($property) {
+  @return #{$property} 180ms $mdc-animation-standard-curve-timing-function;
+}
diff --git a/packages/mdc-floating-label/mdc-floating-label.scss b/packages/mdc-floating-label/mdc-floating-label.scss
index acb8ccce7f9..39561249ef3 100644
--- a/packages/mdc-floating-label/mdc-floating-label.scss
+++ b/packages/mdc-floating-label/mdc-floating-label.scss
@@ -17,6 +17,7 @@
 @import "@material/rtl/mixins";
 @import "@material/theme/variables";
 @import "@material/theme/mixins";
+@import "./functions";
 @import "./mixins";
 @import "./variables";
 
@@ -26,7 +27,7 @@
   bottom: 8px;
   left: 0;
   transform-origin: left top;
-  transition: mdc-text-field-transition(transform), mdc-text-field-transition(color);
+  transition: mdc-floating-label-transition(transform), mdc-floating-label-transition(color);
   cursor: text;
 
   // stylelint-disable plugin/selector-bem-pattern

From eb3893f0efe95a22cfefe17b5f7c578e5999faa0 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Thu, 22 Feb 2018 12:59:08 -0800
Subject: [PATCH 21/47] fix(floating-label): fixed rtl for floating-label

---
 packages/mdc-floating-label/mdc-floating-label.scss | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/mdc-floating-label/mdc-floating-label.scss b/packages/mdc-floating-label/mdc-floating-label.scss
index 39561249ef3..4969103bad4 100644
--- a/packages/mdc-floating-label/mdc-floating-label.scss
+++ b/packages/mdc-floating-label/mdc-floating-label.scss
@@ -30,13 +30,11 @@
   transition: mdc-floating-label-transition(transform), mdc-floating-label-transition(color);
   cursor: text;
 
-  // stylelint-disable plugin/selector-bem-pattern
-  @include mdc-rtl(".mdc-text-field") {
+  @include mdc-rtl() {
     right: 0;
     left: auto;
     transform-origin: right top;
   }
-  // stylelint-enable plugin/selector-bem-pattern
 }
 
 .mdc-floating-label--float-above {

From da53da73335da340c48491201abd0e104aa0f80b Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Thu, 22 Feb 2018 13:01:35 -0800
Subject: [PATCH 22/47] fix(floating-label): updated floating label comments

---
 packages/mdc-floating-label/adapter.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mdc-floating-label/adapter.js b/packages/mdc-floating-label/adapter.js
index b5915347ae7..caeba75972f 100644
--- a/packages/mdc-floating-label/adapter.js
+++ b/packages/mdc-floating-label/adapter.js
@@ -18,10 +18,10 @@
 /* eslint no-unused-vars: [2, {"args": "none"}] */
 
 /**
- * Adapter for MDC Text Field Label.
+ * Adapter for MDC Floating Label.
  *
  * Defines the shape of the adapter expected by the foundation. Implement this
- * adapter to integrate the Text Field label into your framework. See
+ * adapter to integrate the floating label into your framework. See
  * https://github.com/material-components/material-components-web/blob/master/docs/authoring-components.md
  * for more information.
  *

From 78f5b2d0b1fc31309d242ff8bdf7065788e50ecc Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Thu, 22 Feb 2018 14:26:29 -0800
Subject: [PATCH 23/47] fix(floating-label): remove empty parens from scss
 mixins

---
 packages/mdc-floating-label/mdc-floating-label.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mdc-floating-label/mdc-floating-label.scss b/packages/mdc-floating-label/mdc-floating-label.scss
index 4969103bad4..b1236ada892 100644
--- a/packages/mdc-floating-label/mdc-floating-label.scss
+++ b/packages/mdc-floating-label/mdc-floating-label.scss
@@ -30,7 +30,7 @@
   transition: mdc-floating-label-transition(transform), mdc-floating-label-transition(color);
   cursor: text;
 
-  @include mdc-rtl() {
+  @include mdc-rtl {
     right: 0;
     left: auto;
     transform-origin: right top;

From 60467b6e065b1dcf98f6034ab41d32f8ad1c5fdc Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Thu, 22 Feb 2018 17:14:39 -0800
Subject: [PATCH 24/47] WIP - decouple outline

---
 demos/text-field.html                         | 18 ++---
 package-lock.json                             | 80 +++++++++----------
 package.json                                  |  1 +
 packages/material-components-web/index.js     |  2 +
 .../material-components-web.scss              |  1 +
 packages/material-components-web/package.json |  1 +
 .../outline => mdc-notched-outline}/README.md |  2 +-
 packages/mdc-notched-outline/_mixins.scss     | 23 ++++++
 .../adapter.js                                |  8 +-
 .../constants.js                              |  6 +-
 .../foundation.js                             | 18 ++---
 .../outline => mdc-notched-outline}/index.js  | 28 +++----
 .../mdc-notched-outline.scss}                 | 11 +--
 packages/mdc-notched-outline/package.json     | 25 ++++++
 packages/mdc-textfield/_mixins.scss           | 63 ++++++++++++---
 packages/mdc-textfield/adapter.js             |  5 +-
 packages/mdc-textfield/constants.js           |  2 +-
 packages/mdc-textfield/foundation.js          | 11 +--
 packages/mdc-textfield/index.js               | 22 ++---
 packages/mdc-textfield/mdc-text-field.scss    |  6 +-
 packages/mdc-textfield/outline/_mixins.scss   | 60 --------------
 packages/mdc-textfield/package.json           |  1 +
 webpack.config.js                             |  1 +
 23 files changed, 216 insertions(+), 179 deletions(-)
 rename packages/{mdc-textfield/outline => mdc-notched-outline}/README.md (97%)
 create mode 100644 packages/mdc-notched-outline/_mixins.scss
 rename packages/{mdc-textfield/outline => mdc-notched-outline}/adapter.js (89%)
 rename packages/{mdc-textfield/outline => mdc-notched-outline}/constants.js (80%)
 rename packages/{mdc-textfield/outline => mdc-notched-outline}/foundation.js (84%)
 rename packages/{mdc-textfield/outline => mdc-notched-outline}/index.js (69%)
 rename packages/{mdc-textfield/outline/mdc-text-field-outline.scss => mdc-notched-outline/mdc-notched-outline.scss} (83%)
 create mode 100644 packages/mdc-notched-outline/package.json
 delete mode 100644 packages/mdc-textfield/outline/_mixins.scss

diff --git a/demos/text-field.html b/demos/text-field.html
index 476f057047d..6bd8a91a39c 100644
--- a/demos/text-field.html
+++ b/demos/text-field.html
@@ -140,12 +140,12 @@ <h2>Outlined Text Field</h2>
             <input required pattern=".{8,}" type="text" id="tf-outlined-input" class="mdc-text-field__input"
                    aria-controls="name-validation-message">
             <label for="tf-outlined-input" class="mdc-floating-label">Your Name</label>
-            <div class="mdc-text-field__outline">
+            <div class="mdc-notched-outline">
               <svg>
-                <path class="mdc-text-field__outline-path"/>
+                <path class="mdc-notched-outline__path"/>
               </svg>
             </div>
-            <div class="mdc-text-field__idle-outline"></div>
+            <div class="mdc-notched-outline--idle"></div>
           </div>
           <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg">
             Must be at least 8 characters
@@ -239,12 +239,12 @@ <h2>Text Field - Leading/Trailing icons</h2>
             <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
             <input type="text" id="tf-outlined-leading" class="mdc-text-field__input">
             <label for="tf-outlined-leading" class="mdc-floating-label">Your other name</label>
-            <div class="mdc-text-field__outline">
+            <div class="mdc-notched-outline">
               <svg>
-                <path class="mdc-text-field__outline-path"/>
+                <path class="mdc-notched-outline__path"/>
               </svg>
             </div>
-            <div class="mdc-text-field__idle-outline"></div>
+            <div class="mdc-notched-outline"></div>
           </div>
         </div>
         <div id="demo-tf-outlined-trailing-wrapper">
@@ -253,12 +253,12 @@ <h2>Text Field - Leading/Trailing icons</h2>
             <input type="text" id="tf-outlined-trailing" class="mdc-text-field__input">
             <label for="tf-outlined-trailing" class="mdc-floating-label">Your other name</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0">delete</i>
-            <div class="mdc-text-field__outline">
+            <div class="mdc-notched-outline">
               <svg>
-                <path class="mdc-text-field__outline-path"/>
+                <path class="mdc-notched-outline__path"/>
               </svg>
             </div>
-            <div class="mdc-text-field__idle-outline"></div>
+            <div class="mdc-notched-outline--idle"></div>
           </div>
         </div>
         <div>
diff --git a/package-lock.json b/package-lock.json
index bef54bc4c46..a6079cb85a9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2,6 +2,16 @@
   "requires": true,
   "lockfileVersion": 1,
   "dependencies": {
+    "JSONStream": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz",
+      "integrity": "sha1-cH92HgHa6eFvG8+TcDt4xwlmV5o=",
+      "dev": true,
+      "requires": {
+        "jsonparse": "1.3.1",
+        "through": "2.3.8"
+      }
+    },
     "abbrev": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.9.tgz",
@@ -1368,9 +1378,9 @@
       "integrity": "sha1-+GzWzvT1MAyOY+B6TVEvZfv/RTE=",
       "dev": true,
       "requires": {
+        "JSONStream": "1.3.1",
         "combine-source-map": "0.7.2",
         "defined": "1.0.0",
-        "JSONStream": "1.3.1",
         "through2": "2.0.3",
         "umd": "3.0.1"
       }
@@ -1404,6 +1414,7 @@
       "integrity": "sha512-gKfOsNQv/toWz+60nSPfYzuwSEdzvV2WdxrVPUbPD/qui44rAkB3t3muNtmmGYHqrG56FGwX9SUEQmzNLAeS7g==",
       "dev": true,
       "requires": {
+        "JSONStream": "1.3.1",
         "assert": "1.4.1",
         "browser-pack": "6.0.2",
         "browser-resolve": "1.11.2",
@@ -1425,7 +1436,6 @@
         "https-browserify": "1.0.0",
         "inherits": "2.0.3",
         "insert-module-globals": "7.0.1",
-        "JSONStream": "1.3.1",
         "labeled-stream-splicer": "2.0.0",
         "module-deps": "4.1.1",
         "os-browserify": "0.3.0",
@@ -2552,8 +2562,8 @@
       "integrity": "sha512-8od6g684Fhi5Vpp4ABRv/RBsW1AY6wSHbJHEK6FGTv+8jvAAnlABniZu/FVmX9TcirkHepaEsa1QGkRvbg0CKw==",
       "dev": true,
       "requires": {
-        "is-text-path": "1.0.1",
         "JSONStream": "1.3.1",
+        "is-text-path": "1.0.1",
         "lodash": "4.17.4",
         "meow": "3.7.0",
         "split2": "2.2.0",
@@ -5183,14 +5193,6 @@
             }
           }
         },
-        "string_decoder": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "safe-buffer": "5.0.1"
-          }
-        },
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
@@ -5201,6 +5203,14 @@
             "strip-ansi": "3.0.1"
           }
         },
+        "string_decoder": {
+          "version": "1.0.1",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "safe-buffer": "5.0.1"
+          }
+        },
         "stringstream": {
           "version": "0.0.5",
           "bundled": true,
@@ -6276,10 +6286,10 @@
       "integrity": "sha1-wDv04BywhtW15azorQr+eInWOMM=",
       "dev": true,
       "requires": {
+        "JSONStream": "1.3.1",
         "combine-source-map": "0.7.2",
         "concat-stream": "1.5.2",
         "is-buffer": "1.1.5",
-        "JSONStream": "1.3.1",
         "lexical-scope": "1.2.0",
         "process": "0.11.10",
         "through2": "2.0.3",
@@ -6971,16 +6981,6 @@
       "integrity": "sha1-T9kss04OnbPInIYi7PUfm5eMbLk=",
       "dev": true
     },
-    "JSONStream": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz",
-      "integrity": "sha1-cH92HgHa6eFvG8+TcDt4xwlmV5o=",
-      "dev": true,
-      "requires": {
-        "jsonparse": "1.3.1",
-        "through": "2.3.8"
-      }
-    },
     "jsprim": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.0.tgz",
@@ -8244,6 +8244,7 @@
       "integrity": "sha1-IyFYM/HaE/1gbMuAh7RIUty4If0=",
       "dev": true,
       "requires": {
+        "JSONStream": "1.3.1",
         "browser-resolve": "1.11.2",
         "cached-path-relative": "1.0.1",
         "concat-stream": "1.5.2",
@@ -8251,7 +8252,6 @@
         "detective": "4.7.1",
         "duplexer2": "0.1.4",
         "inherits": "2.0.3",
-        "JSONStream": "1.3.1",
         "parents": "1.0.1",
         "readable-stream": "2.2.9",
         "resolve": "1.3.3",
@@ -12100,23 +12100,6 @@
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
       "dev": true
     },
-    "string_decoder": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
-      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "5.1.1"
-      },
-      "dependencies": {
-        "safe-buffer": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
-          "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
-          "dev": true
-        }
-      }
-    },
     "string-width": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.0.0.tgz",
@@ -12138,6 +12121,23 @@
         "function-bind": "1.1.0"
       }
     },
+    "string_decoder": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "5.1.1"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
+          "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
+          "dev": true
+        }
+      }
+    },
     "stringify-entities": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-1.3.1.tgz",
diff --git a/package.json b/package.json
index 4fa933beba9..4c0abe99419 100644
--- a/package.json
+++ b/package.json
@@ -140,6 +140,7 @@
           "linear-progress",
           "list",
           "menu",
+          "notched-outline",
           "radio",
           "ripple",
           "rtl",
diff --git a/packages/material-components-web/index.js b/packages/material-components-web/index.js
index bd80e8868e5..ec817376f11 100644
--- a/packages/material-components-web/index.js
+++ b/packages/material-components-web/index.js
@@ -27,6 +27,7 @@ import * as iconToggle from '@material/icon-toggle/index';
 import * as linearProgress from '@material/linear-progress/index';
 import * as lineRipple from '@material/line-ripple/index';
 import * as menu from '@material/menu/index';
+import * as notchedOutline from '@material/notched-outline/index';
 import * as radio from '@material/radio/index';
 import * as ripple from '@material/ripple/index';
 import * as select from '@material/select/index';
@@ -52,6 +53,7 @@ autoInit.register('MDCRipple', ripple.MDCRipple);
 autoInit.register('MDCGridList', gridList.MDCGridList);
 autoInit.register('MDCIconToggle', iconToggle.MDCIconToggle);
 autoInit.register('MDCLinearProgress', linearProgress.MDCLinearProgress);
+autoInit.register('MDCNotchedOutline', notchedOutline.MDCNotchedOutline);
 autoInit.register('MDCRadio', radio.MDCRadio);
 autoInit.register('MDCSnackbar', snackbar.MDCSnackbar);
 autoInit.register('MDCTab', tabs.MDCTab);
diff --git a/packages/material-components-web/material-components-web.scss b/packages/material-components-web/material-components-web.scss
index 5a22e150914..16710eebb76 100644
--- a/packages/material-components-web/material-components-web.scss
+++ b/packages/material-components-web/material-components-web.scss
@@ -31,6 +31,7 @@
 @import "@material/linear-progress/mdc-linear-progress";
 @import "@material/list/mdc-list";
 @import "@material/menu/mdc-menu";
+@import "@material/notched-outline/mdc-notched-outline";
 @import "@material/radio/mdc-radio";
 @import "@material/ripple/mdc-ripple";
 @import "@material/select/mdc-select";
diff --git a/packages/material-components-web/package.json b/packages/material-components-web/package.json
index 6908c2e6d4c..99371f2ddce 100644
--- a/packages/material-components-web/package.json
+++ b/packages/material-components-web/package.json
@@ -33,6 +33,7 @@
     "@material/linear-progress": "^0.30.0",
     "@material/list": "^0.31.0",
     "@material/menu": "^0.31.0",
+    "@material/notched-outline": "0.0.0",
     "@material/radio": "^0.31.0",
     "@material/ripple": "^0.31.0",
     "@material/rtl": "^0.30.0",
diff --git a/packages/mdc-textfield/outline/README.md b/packages/mdc-notched-outline/README.md
similarity index 97%
rename from packages/mdc-textfield/outline/README.md
rename to packages/mdc-notched-outline/README.md
index f62de540985..4f8e3e03879 100644
--- a/packages/mdc-textfield/outline/README.md
+++ b/packages/mdc-notched-outline/README.md
@@ -37,7 +37,7 @@ The outline is a border around all sides of the text field. This is used for the
 ```html
 <div class="mdc-text-field mdc-text-field--outlined">
   <input class="mdc-text-field__input" id="my-text-field-id" type="text">
-  <label class="mdc-floating-label" for="my-text-field-id">Label</label>
+  <label class="mdc-text-field__label" for="my-text-field-id">Label</label>
   <div class="mdc-text-field__outline">
     <svg>
       <path class="mdc-text-field__outline-path"/>
diff --git a/packages/mdc-notched-outline/_mixins.scss b/packages/mdc-notched-outline/_mixins.scss
new file mode 100644
index 00000000000..c096fffb9dd
--- /dev/null
+++ b/packages/mdc-notched-outline/_mixins.scss
@@ -0,0 +1,23 @@
+//
+// Copyright 2018 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+@mixin mdc-notched-outline-color($color) {
+  @include mdc-theme-prop(border-color, $color);
+}
+
+@mixin mdc-notched-outline-path-color($color) {
+  @include mdc-theme-prop(stroke, $color);
+}
diff --git a/packages/mdc-textfield/outline/adapter.js b/packages/mdc-notched-outline/adapter.js
similarity index 89%
rename from packages/mdc-textfield/outline/adapter.js
rename to packages/mdc-notched-outline/adapter.js
index ce63594288c..cd421433d6d 100644
--- a/packages/mdc-textfield/outline/adapter.js
+++ b/packages/mdc-notched-outline/adapter.js
@@ -18,16 +18,16 @@
 /* eslint no-unused-vars: [2, {"args": "none"}] */
 
 /**
- * Adapter for MDC Text Field Outline.
+ * Adapter for MDC Notched Outline.
  *
  * Defines the shape of the adapter expected by the foundation. Implement this
- * adapter to integrate the Text Field outline into your framework. See
+ * adapter to integrate the Notched outline into your framework. See
  * https://github.com/material-components/material-components-web/blob/master/docs/authoring-components.md
  * for more information.
  *
  * @record
  */
-class MDCTextFieldOutlineAdapter {
+class MDCNotchedOutlineAdapter {
   /**
    * Returns the width of the root element.
    * @return {number}
@@ -55,4 +55,4 @@ class MDCTextFieldOutlineAdapter {
   getIdleOutlineStyleValue(propertyName) {}
 }
 
-export default MDCTextFieldOutlineAdapter;
+export default MDCNotchedOutlineAdapter;
diff --git a/packages/mdc-textfield/outline/constants.js b/packages/mdc-notched-outline/constants.js
similarity index 80%
rename from packages/mdc-textfield/outline/constants.js
rename to packages/mdc-notched-outline/constants.js
index 4a5d91d837e..93860240671 100644
--- a/packages/mdc-textfield/outline/constants.js
+++ b/packages/mdc-notched-outline/constants.js
@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2016 Google Inc. All Rights Reserved.
+ * Copyright 2018 Google Inc. All Rights Reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,8 +17,8 @@
 
 /** @enum {string} */
 const strings = {
-  PATH_SELECTOR: '.mdc-text-field__outline-path',
-  IDLE_OUTLINE_SELECTOR: '.mdc-text-field__idle-outline',
+  PATH_SELECTOR: '.mdc-notched-outline__path',
+  IDLE_OUTLINE_SELECTOR: '.mdc-notched-outline--idle',
 };
 
 export {strings};
diff --git a/packages/mdc-textfield/outline/foundation.js b/packages/mdc-notched-outline/foundation.js
similarity index 84%
rename from packages/mdc-textfield/outline/foundation.js
rename to packages/mdc-notched-outline/foundation.js
index b12a649fc33..92073117fbe 100644
--- a/packages/mdc-textfield/outline/foundation.js
+++ b/packages/mdc-notched-outline/foundation.js
@@ -16,26 +16,26 @@
  */
 
 import MDCFoundation from '@material/base/foundation';
-import MDCTextFieldOutlineAdapter from './adapter';
+import MDCNotchedOutlineAdapter from './adapter';
 import {strings} from './constants';
 
 /**
- * @extends {MDCFoundation<!MDCTextFieldOutlineAdapter>}
+ * @extends {MDCFoundation<!MDCNotchedOutlineAdapter>}
  * @final
  */
-class MDCTextFieldOutlineFoundation extends MDCFoundation {
+class MDCNotchedOutlineFoundation extends MDCFoundation {
   /** @return enum {string} */
   static get strings() {
     return strings;
   }
 
   /**
-   * {@see MDCTextFieldOutlineAdapter} for typing information on parameters and return
+   * {@see MDCNotchedOutlineAdapter} for typing information on parameters and return
    * types.
-   * @return {!MDCTextFieldOutlineAdapter}
+   * @return {!MDCNotchedOutlineAdapter}
    */
   static get defaultAdapter() {
-    return /** @type {!MDCTextFieldOutlineAdapter} */ ({
+    return /** @type {!MDCNotchedOutlineAdapter} */ ({
       getWidth: () => {},
       getHeight: () => {},
       setOutlinePathAttr: () => {},
@@ -44,10 +44,10 @@ class MDCTextFieldOutlineFoundation extends MDCFoundation {
   }
 
   /**
-   * @param {!MDCTextFieldOutlineAdapter} adapter
+   * @param {!MDCNotchedOutlineAdapter} adapter
    */
   constructor(adapter) {
-    super(Object.assign(MDCTextFieldOutlineFoundation.defaultAdapter, adapter));
+    super(Object.assign(MDCNotchedOutlineFoundation.defaultAdapter, adapter));
   }
 
   /**
@@ -93,4 +93,4 @@ class MDCTextFieldOutlineFoundation extends MDCFoundation {
   }
 }
 
-export default MDCTextFieldOutlineFoundation;
+export default MDCNotchedOutlineFoundation;
diff --git a/packages/mdc-textfield/outline/index.js b/packages/mdc-notched-outline/index.js
similarity index 69%
rename from packages/mdc-textfield/outline/index.js
rename to packages/mdc-notched-outline/index.js
index 98020a8acf8..17c13f9924b 100644
--- a/packages/mdc-textfield/outline/index.js
+++ b/packages/mdc-notched-outline/index.js
@@ -18,34 +18,34 @@
 import MDCComponent from '@material/base/component';
 
 import {strings} from './constants';
-import MDCTextFieldOutlineAdapter from './adapter';
-import MDCTextFieldOutlineFoundation from './foundation';
+import MDCNotchedOutlineAdapter from './adapter';
+import MDCNotchedOutlineFoundation from './foundation';
 
 /**
- * @extends {MDCComponent<!MDCTextFieldOutlineFoundation>}
+ * @extends {MDCComponent<!MDCNotchedOutlineFoundation>}
  * @final
  */
-class MDCTextFieldOutline extends MDCComponent {
+class MDCNotchedOutline extends MDCComponent {
   /**
    * @param {!Element} root
-   * @return {!MDCTextFieldOutline}
+   * @return {!MDCNotchedOutline}
    */
   static attachTo(root) {
-    return new MDCTextFieldOutline(root);
+    return new MDCNotchedOutline(root);
   }
 
   /**
-   * @return {!MDCTextFieldOutlineFoundation}
-   */
-  get foundation() {
-    return this.foundation_;
+    *
+    */
+  updateOutlinePath(labelWidth, isRtl) {
+    this.foundation_.updateSvgPath(labelWidth, isRtl);
   }
 
   /**
-   * @return {!MDCTextFieldOutlineFoundation}
+   * @return {!MDCNotchedOutlineFoundation}
    */
   getDefaultFoundation() {
-    return new MDCTextFieldOutlineFoundation(/** @type {!MDCTextFieldOutlineAdapter} */ (Object.assign({
+    return new MDCNotchedOutlineFoundation({
       getWidth: () => this.root_.offsetWidth,
       getHeight: () => this.root_.offsetHeight,
       setOutlinePathAttr: (value) => {
@@ -58,8 +58,8 @@ class MDCTextFieldOutline extends MDCComponent {
           return window.getComputedStyle(idleOutlineElement).getPropertyValue(propertyName);
         }
       },
-    })));
+    });
   }
 }
 
-export {MDCTextFieldOutline, MDCTextFieldOutlineFoundation};
+export {MDCNotchedOutline, MDCNotchedOutlineFoundation};
diff --git a/packages/mdc-textfield/outline/mdc-text-field-outline.scss b/packages/mdc-notched-outline/mdc-notched-outline.scss
similarity index 83%
rename from packages/mdc-textfield/outline/mdc-text-field-outline.scss
rename to packages/mdc-notched-outline/mdc-notched-outline.scss
index 9235bc9a1a0..3d7370204a3 100644
--- a/packages/mdc-textfield/outline/mdc-text-field-outline.scss
+++ b/packages/mdc-notched-outline/mdc-notched-outline.scss
@@ -15,15 +15,11 @@
 //
 
 @import "./mixins";
-@import "../mixins";
-@import "../variables";
 @import "@material/theme/mixins";
 @import "@material/ripple/mixins";
 @import "@material/ripple/variables";
 
-.mdc-text-field__idle-outline {
-  @include mdc-text-field-outlined-corner-radius($mdc-text-field-border-radius);
-
+.mdc-notched-outline--idle {
   position: absolute;
   top: 0;
   left: 0;
@@ -34,12 +30,11 @@
   opacity: 1;
 }
 
-.mdc-text-field__outline {
+.mdc-notched-outline {
   @include mdc-ripple-surface;
   @include mdc-ripple-radius-bounded;
   @include mdc-states-base-color(text-primary-on-background);
   @include mdc-states-press-opacity(map-get($mdc-ripple-dark-ink-opacities, "press"));
-  @include mdc-text-field-outlined-corner-radius($mdc-text-field-border-radius);
 
   position: absolute;
   top: 0;
@@ -57,7 +52,7 @@
   }
 }
 
-.mdc-text-field__outline-path {
+.mdc-notched-outline__path {
   stroke-width: 1px;
   transition: mdc-text-field-transition(stroke), mdc-text-field-transition(stroke-width),
   mdc-text-field-transition(opacity);
diff --git a/packages/mdc-notched-outline/package.json b/packages/mdc-notched-outline/package.json
new file mode 100644
index 00000000000..9de147861d8
--- /dev/null
+++ b/packages/mdc-notched-outline/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@material/notched-outline",
+  "description": "The Material Components for the web notched-outline component",
+  "version": "0.0.0",
+  "license": "Apache-2.0",
+  "keywords": [
+    "material components",
+    "material design",
+    "notchedoutline",
+    "notched-outline"
+  ],
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/material-components/material-components-web.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@material/animation": "^0.25.0",
+    "@material/base": "^0.29.0",
+    "@material/theme": "^0.30.0"
+  }
+}
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 07763fe2393..e4abc87245b 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -16,12 +16,11 @@
 
 @import "@material/floating-label/mixins";
 @import "@material/line-ripple/mixins";
+@import "helper-text/mixins";
+@import "icon/mixins";
+@import "icon/variables";
 @import "@material/theme/mixins";
-@import "./helper-text/mixins";
-@import "./icon/mixins";
-@import "./icon/variables";
-@import "./outline/mixins";
-@import "./variables";
+@import "@material/notched-outline/mixins";
 
 @mixin mdc-text-field-outlined-corner-radius($radius) {
   border-radius: $radius;
@@ -179,7 +178,7 @@
     border-bottom: none;
   }
 
-  .mdc-text-field__outline-path {
+  .mdc-notched-outline__path {
     stroke-width: 1px;
   }
 }
@@ -192,7 +191,7 @@
 }
 
 @mixin mdc-text-field-outlined-focused_ {
-  .mdc-text-field__outline-path {
+  .mdc-notched-outline__path {
     stroke-width: 2px;
   }
 }
@@ -247,17 +246,63 @@
     z-index: 2;
   }
 
+  .mdc-notched-outline,
+  .mdc-notched-outline--idle {
+    @include mdc-text-field-outlined-corner-radius($mdc-text-field-border-radius);
+  }
+
   // stylelint-disable plugin/selector-bem-pattern
-  .mdc-text-field__input:hover ~ .mdc-text-field__idle-outline {
+  .mdc-text-field__input:hover ~ .mdc-notched-outline--idle {
     border: 1px solid;
   }
 
-  .mdc-text-field__icon:hover ~ .mdc-text-field__idle-outline {
+  .mdc-text-field__icon:hover ~ .mdc-notched-outline--idle {
     border: 1px solid $mdc-text-field-outlined-hover-border;
   }
   // stylelint-enable plugin/selector-bem-pattern
 }
 
+@mixin mdc-text-field-outline-color($color) {
+  &:not(.mdc-text-field--disabled) {
+    @include mdc-text-field-outline-color_($color);
+  }
+}
+
+@mixin mdc-text-field-hover-outline-color($color) {
+  &:not(.mdc-text-field--disabled) {
+    @include mdc-text-field-hover-outline-color_($color);
+  }
+}
+
+@mixin mdc-text-field-focused-outline-color($color) {
+  &:not(.mdc-text-field--disabled) {
+    @include mdc-text-field-focused-outline-color_($color);
+  }
+}
+
+@mixin mdc-text-field-hover-outline-color_($color) {
+  .mdc-text-field__input:hover ~ .mdc-notched-outline--idle,
+  .mdc-text-field__icon:hover ~ .mdc-notched-outline--idle {
+    @include mdc-notched-outline-color($color);
+  }
+}
+
+@mixin mdc-text-field-focused-outline-color_($color) {
+  &.mdc-text-field--focused .mdc-notched-outline__path {
+    @include mdc-notched-outline-path-color($color);
+  }
+}
+
+@mixin mdc-text-field-outline-color_($color) {
+  .mdc-notched-outline--idle {
+    @include mdc-notched-outline-color($color);
+  }
+
+  &:not(.mdc-text-field--focused) .mdc-notched-outline__path {
+    @include mdc-notched-outline-path-color($color);
+  }
+}
+
 // Box
 
 @mixin mdc-text-field-box_ {
diff --git a/packages/mdc-textfield/adapter.js b/packages/mdc-textfield/adapter.js
index a35d39cafee..71540817c25 100644
--- a/packages/mdc-textfield/adapter.js
+++ b/packages/mdc-textfield/adapter.js
@@ -17,10 +17,10 @@
 
 /* eslint-disable no-unused-vars */
 import MDCLineRippleFoundation from '@material/line-ripple/foundation';
+import MDCNotchedOutlineFoundation from '@material/notched-outline/foundation';
 import MDCTextFieldHelperTextFoundation from './helper-text/foundation';
 import MDCTextFieldIconFoundation from './icon/foundation';
 import MDCFloatingLabelFoundation from '@material/floating-label/foundation';
-import MDCTextFieldOutlineFoundation from './outline/foundation';
 
 /* eslint no-unused-vars: [2, {"args": "none"}] */
 
@@ -43,7 +43,8 @@ let NativeInputType;
  *   helperText: (!MDCTextFieldHelperTextFoundation|undefined),
  *   icon: (!MDCTextFieldIconFoundation|undefined),
  *   label: (!MDCFloatingLabelFoundation|undefined),
- *   outline: (!MDCTextFieldOutlineFoundation|undefined)
+ *   outline: (!MDCTextFieldOutlineFoundation|undefined),
+ *   outline: (!MDCNotchedOutlineFoundation|undefined)
  * }}
  */
 let FoundationMapType;
diff --git a/packages/mdc-textfield/constants.js b/packages/mdc-textfield/constants.js
index cb9c72c9b55..12eeeb587d5 100644
--- a/packages/mdc-textfield/constants.js
+++ b/packages/mdc-textfield/constants.js
@@ -21,7 +21,7 @@ const strings = {
   INPUT_SELECTOR: '.mdc-text-field__input',
   LABEL_SELECTOR: '.mdc-floating-label',
   ICON_SELECTOR: '.mdc-text-field__icon',
-  OUTLINE_SELECTOR: '.mdc-text-field__outline',
+  OUTLINE_SELECTOR: '.mdc-notched-outline',
   BOTTOM_LINE_SELECTOR: '.mdc-line-ripple',
 };
 
diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index 7709183bf83..ef532d552d3 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -22,7 +22,6 @@ import MDCLineRippleFoundation from '@material/line-ripple/foundation';
 import MDCTextFieldHelperTextFoundation from './helper-text/foundation';
 import MDCTextFieldIconFoundation from './icon/foundation';
 import MDCFloatingLabelFoundation from '@material/floating-label/foundation';
-import MDCTextFieldOutlineFoundation from './outline/foundation';
 /* eslint-enable no-unused-vars */
 import {cssClasses, strings, numbers} from './constants';
 
@@ -95,8 +94,6 @@ class MDCTextFieldFoundation extends MDCFoundation {
     this.helperText_ = foundationMap.helperText;
     /** @type {!MDCTextFieldIconFoundation|undefined} */
     this.icon_ = foundationMap.icon;
-    /** @type {!MDCTextFieldOutlineFoundation|undefined} */
-    this.outline_ = foundationMap.outline;
 
     /** @private {boolean} */
     this.isFocused_ = false;
@@ -167,7 +164,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
    * Updates the focus outline for outlined text fields.
    */
   updateOutline() {
-    if (!this.outline_ || !this.adapter_.hasLabel()) {
+    if (!this.adapter_.hasOutline() || !this.adapter_.hasLabel()) {
       return;
     }
 
@@ -175,7 +172,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
     const labelScale = isDense ? numbers.DENSE_LABEL_SCALE : numbers.LABEL_SCALE;
     const labelWidth = this.adapter_.getLabelWidth() * labelScale;
     const isRtl = this.adapter_.isRtl();
-    this.outline_.updateSvgPath(labelWidth, isRtl);
+    this.adapter_.updateOutlinePath(labelWidth, isRtl);
   }
 
   /**
@@ -185,8 +182,8 @@ class MDCTextFieldFoundation extends MDCFoundation {
     this.isFocused_ = true;
     this.styleFocused_(this.isFocused_);
     this.adapter_.activateLineRipple();
-    if (this.outline_) {
-      this.updateOutline();
+    if (this.adapter_.hasOutline()) {
+      this.adapter_.updateOutlinePath();
     }
     if (this.adapter_.hasLabel()) {
       this.adapter_.shakeLabel(this.shouldShake);
diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
index 46c0c1ae830..fb46234b503 100644
--- a/packages/mdc-textfield/index.js
+++ b/packages/mdc-textfield/index.js
@@ -30,7 +30,7 @@ import {MDCLineRipple, MDCLineRippleFoundation} from '@material/line-ripple/inde
 import {MDCTextFieldHelperText, MDCTextFieldHelperTextFoundation} from './helper-text/index';
 import {MDCTextFieldIcon, MDCTextFieldIconFoundation} from './icon/index';
 import {MDCFloatingLabel, MDCFloatingLabelFoundation} from '@material/floating-label/index';
-import {MDCTextFieldOutline, MDCTextFieldOutlineFoundation} from './outline/index';
+import {MDCNotchedOutline, MDCNotchedOutlineFoundation} from '@material/notched-outline/index';
 /* eslint-enable no-unused-vars */
 
 /**
@@ -55,7 +55,7 @@ class MDCTextField extends MDCComponent {
     this.icon_;
     /** @private {?MDCFloatingLabel} */
     this.label_;
-    /** @private {?MDCTextFieldOutline} */
+    /** @private {?MDCNotchedOutline} */
     this.outline_;
   }
 
@@ -78,8 +78,8 @@ class MDCTextField extends MDCComponent {
    * creates a new MDCTextFieldIcon.
    * @param {(function(!Element): !MDCFloatingLabel)=} labelFactory A function which
    * creates a new MDCFloatingLabel.
-   * @param {(function(!Element): !MDCTextFieldOutline)=} outlineFactory A function which
-   * creates a new MDCTextFieldOutline.
+   * @param {(function(!Element): !MDCNotchedOutline)=} outlineFactory A function which
+   * creates a new MDCNotchedOutline.
    */
   initialize(
     rippleFactory = (el, foundation) => new MDCRipple(el, foundation),
@@ -87,7 +87,7 @@ class MDCTextField extends MDCComponent {
     helperTextFactory = (el) => new MDCTextFieldHelperText(el),
     iconFactory = (el) => new MDCTextFieldIcon(el),
     labelFactory = (el) => new MDCFloatingLabel(el),
-    outlineFactory = (el) => new MDCTextFieldOutline(el)) {
+    outlineFactory = (el) => new MDCNotchedOutline(el)) {
     this.input_ = this.root_.querySelector(strings.INPUT_SELECTOR);
     const labelElement = this.root_.querySelector(strings.LABEL_SELECTOR);
     if (labelElement) {
@@ -230,7 +230,7 @@ class MDCTextField extends MDCComponent {
    */
   layout() {
     if (this.outline_) {
-      this.foundation_.updateOutline();
+      // this.outline_.updateOutline();
     }
     if (this.ripple) {
       this.ripple.layout();
@@ -279,6 +279,12 @@ class MDCTextField extends MDCComponent {
         getLabelWidth: () => {
           return this.label_.getWidth();
         },
+        hasOutline: () => {
+          return !!this.outline_;
+        },
+        updateOutlinePath: (labelWidth, isRtl) => {
+          this.outline_.updateOutlinePath(labelWidth, isRtl);
+        },
       },
       this.getInputAdapterMethods_())),
       this.getFoundationMap_());
@@ -307,12 +313,10 @@ class MDCTextField extends MDCComponent {
     return {
       helperText: this.helperText_ ? this.helperText_.foundation : undefined,
       icon: this.icon_ ? this.icon_.foundation : undefined,
-      outline: this.outline_ ? this.outline_.foundation : undefined,
     };
   }
 }
 
 export {MDCTextField, MDCTextFieldFoundation,
   MDCTextFieldHelperText, MDCTextFieldHelperTextFoundation,
-  MDCTextFieldIcon, MDCTextFieldIconFoundation,
-  MDCTextFieldOutline, MDCTextFieldOutlineFoundation};
+  MDCTextFieldIcon, MDCTextFieldIconFoundation};
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index 23fcb72ccfb..2d9cd32df97 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -17,6 +17,7 @@
 @import "@material/animation/variables";
 @import "@material/floating-label/mdc-floating-label";
 @import "@material/line-ripple/mdc-line-ripple";
+@import "@material/notched-outline/mdc-notched-outline";
 @import "@material/ripple/common";
 @import "@material/ripple/mixins";
 @import "@material/rtl/mixins";
@@ -27,7 +28,6 @@
 @import "./helper-text/mdc-text-field-helper-text";
 @import "./icon/mdc-text-field-icon";
 @import "./mixins";
-@import "./outline/mdc-text-field-outline";
 @import "./variables";
 
 // postcss-bem-linter: define text-field
@@ -246,13 +246,13 @@
 
 // Never show the idle outline when the label is floating, otherwise the label
 // will collide with the idle outline.
-.mdc-floating-label--float-above ~ .mdc-text-field__idle-outline {
+.mdc-floating-label--float-above ~ .mdc-notched-outline--idle {
   opacity: 0;
 }
 
 // Show the outline when the label is floating, since the outline has a
 // notch for the label to fit into.
-.mdc-floating-label--float-above ~ .mdc-text-field__outline {
+.mdc-floating-label--float-above ~ .mdc-notched-outline {
   opacity: 1;
 }
 
diff --git a/packages/mdc-textfield/outline/_mixins.scss b/packages/mdc-textfield/outline/_mixins.scss
deleted file mode 100644
index a6a0d1b9118..00000000000
--- a/packages/mdc-textfield/outline/_mixins.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-//
-// Copyright 2018 Google Inc. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-//
-
-// Public mixins
-
-@mixin mdc-text-field-outline-color($color) {
-  &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-outline-color_($color);
-  }
-}
-
-@mixin mdc-text-field-hover-outline-color($color) {
-  &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-hover-outline-color_($color);
-  }
-}
-
-@mixin mdc-text-field-focused-outline-color($color) {
-  &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-focused-outline-color_($color);
-  }
-}
-
-// Private mixins
-
-@mixin mdc-text-field-outline-color_($color) {
-  .mdc-text-field__idle-outline {
-    @include mdc-theme-prop(border-color, $color);
-  }
-
-  &:not(.mdc-text-field--focused) .mdc-text-field__outline .mdc-text-field__outline-path {
-    @include mdc-theme-prop(stroke, $color);
-  }
-}
-
-@mixin mdc-text-field-hover-outline-color_($color) {
-  .mdc-text-field__input:hover ~ .mdc-text-field__idle-outline,
-  .mdc-text-field__icon:hover ~ .mdc-text-field__idle-outline {
-    @include mdc-theme-prop(border-color, $color);
-  }
-}
-
-@mixin mdc-text-field-focused-outline-color_($color) {
-  &.mdc-text-field--focused .mdc-text-field__outline-path {
-    @include mdc-theme-prop(stroke, $color);
-  }
-}
diff --git a/packages/mdc-textfield/package.json b/packages/mdc-textfield/package.json
index e667fbea5f5..539b48a7946 100644
--- a/packages/mdc-textfield/package.json
+++ b/packages/mdc-textfield/package.json
@@ -19,6 +19,7 @@
     "@material/base": "^0.29.0",
     "@material/floating-label": "0.0.0",
     "@material/line-ripple": "^0.30.0",
+    "@material/notched-outline": "0.0.0",
     "@material/ripple": "^0.31.0",
     "@material/rtl": "^0.30.0",
     "@material/theme": "^0.30.0",
diff --git a/webpack.config.js b/webpack.config.js
index d06854b9916..1d98c136ac2 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -87,6 +87,7 @@ if (!env.isDev()) {
       iconToggle: [path.resolve('./packages/mdc-icon-toggle/index.js')],
       linearProgress: [path.resolve('./packages/mdc-linear-progress/index.js')],
       menu: [path.resolve('./packages/mdc-menu/index.js')],
+      notchedOutline: [path.resolve('./packages/mdc-notched-outline/index.js')],
       radio: [path.resolve('./packages/mdc-radio/index.js')],
       ripple: [path.resolve('./packages/mdc-ripple/index.js')],
       select: [path.resolve('./packages/mdc-select/index.js')],

From 466e7e62fdcd12a0657aaa3bd2531f47e9bccf98 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Thu, 22 Feb 2018 17:19:34 -0800
Subject: [PATCH 25/47] fix(notched-outline): mainly working notched-outline

---
 packages/mdc-textfield/foundation.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index ef532d552d3..e29c338d8fa 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -183,7 +183,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
     this.styleFocused_(this.isFocused_);
     this.adapter_.activateLineRipple();
     if (this.adapter_.hasOutline()) {
-      this.adapter_.updateOutlinePath();
+      this.updateOutline();
     }
     if (this.adapter_.hasLabel()) {
       this.adapter_.shakeLabel(this.shouldShake);

From ca134d9a6cd0db5f8a3d2885debc3339c5fe53fc Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Fri, 23 Feb 2018 10:58:10 -0800
Subject: [PATCH 26/47] fix(text-field): decouple outline work on dense

---
 packages/mdc-textfield/index.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
index fb46234b503..7e2f054f491 100644
--- a/packages/mdc-textfield/index.js
+++ b/packages/mdc-textfield/index.js
@@ -229,9 +229,7 @@ class MDCTextField extends MDCComponent {
    * all dimensions and positions for the ripple element.
    */
   layout() {
-    if (this.outline_) {
-      // this.outline_.updateOutline();
-    }
+    this.foundation_.updateOutline();
     if (this.ripple) {
       this.ripple.layout();
     }

From 67c1ab8a9cfb11b71ca34f0587d32f0b9407c009 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Fri, 23 Feb 2018 14:58:20 -0800
Subject: [PATCH 27/47] fix(floating-label): fixed some typos and empty white
 space

---
 packages/mdc-floating-label/README.md    | 6 +++---
 packages/mdc-textfield/adapter.js        | 2 +-
 packages/mdc-textfield/icon/_mixins.scss | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/mdc-floating-label/README.md b/packages/mdc-floating-label/README.md
index 78ec14bc832..c7933359822 100644
--- a/packages/mdc-floating-label/README.md
+++ b/packages/mdc-floating-label/README.md
@@ -55,9 +55,9 @@ a unique `id` to each `<input>` by wrapping `mdc-text-field__input` within a `<l
 
 CSS Class | Description
 --- | ---
-`mdc-floating-label` | Mandatory
-`mdc-floating-label--float-above` | Indicates the label is floating above the text field
-`mdc-floating-label--shake` | Shakes the label
+`mdc-floating-label` | Mandatory.
+`mdc-floating-label--float-above` | Indicates the label is floating above the text field.
+`mdc-floating-label--shake` | Shakes the label.
 
 ### SCSS Mixins
 
diff --git a/packages/mdc-textfield/adapter.js b/packages/mdc-textfield/adapter.js
index a35d39cafee..f25b8b18172 100644
--- a/packages/mdc-textfield/adapter.js
+++ b/packages/mdc-textfield/adapter.js
@@ -149,7 +149,7 @@ class MDCTextFieldAdapter {
 
   /**
    * Only implement if label exists.
-   * Shakes label if shouldShake is true
+   * Shakes label if shouldShake is true.
    * @param {boolean} shouldShake
    */
   shakeLabel(shouldShake) {}
diff --git a/packages/mdc-textfield/icon/_mixins.scss b/packages/mdc-textfield/icon/_mixins.scss
index 6a323cec1f8..ab4a0eaceee 100644
--- a/packages/mdc-textfield/icon/_mixins.scss
+++ b/packages/mdc-textfield/icon/_mixins.scss
@@ -44,7 +44,7 @@
   // side as the label. Aka the icon is on left side in a LTR context.
   @if ($position-property == left) {
     .mdc-floating-label {
-	  @include mdc-rtl-reflexive-position($position-property, $padding);
+      @include mdc-rtl-reflexive-position($position-property, $padding);
     }
   }
 }

From 91ad0a97c9e3b8b212ee394d28b2f76ed525c354 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Tue, 27 Feb 2018 11:27:15 -0500
Subject: [PATCH 28/47] fix(notched-outline): updated notched-outline readme
 and scss

---
 packages/mdc-notched-outline/README.md        | 49 +++++++++----------
 packages/mdc-notched-outline/_mixins.scss     |  2 +
 packages/mdc-notched-outline/foundation.js    | 16 +++---
 packages/mdc-notched-outline/index.js         | 11 +++--
 .../mdc-notched-outline.scss                  | 11 +++--
 packages/mdc-textfield/README.md              | 10 ++--
 packages/mdc-textfield/_mixins.scss           | 42 ++++++++--------
 packages/mdc-textfield/adapter.js             | 15 ++++++
 packages/mdc-textfield/foundation.js          |  6 +--
 packages/mdc-textfield/index.js               |  8 +--
 10 files changed, 95 insertions(+), 75 deletions(-)

diff --git a/packages/mdc-notched-outline/README.md b/packages/mdc-notched-outline/README.md
index 4f8e3e03879..a6a9e1db56c 100644
--- a/packages/mdc-notched-outline/README.md
+++ b/packages/mdc-notched-outline/README.md
@@ -1,15 +1,15 @@
 <!--docs:
-title: "Text Field Outline"
+title: "Notched Outline"
 layout: detail
 section: components
-excerpt: "The outline is a border around the text field"
+excerpt: "The notched outline is a border around either a text field or select element"
 iconId: text_field
-path: /catalog/input-controls/text-field/outline/
+path: /catalog/input-controls/notched-outline
 -->
 
-# Text Field Outline
+# Notched Outline
 
-The outline is a border around all sides of the text field. This is used for the Outlined variation of Text Fields.
+The outline is a border around all sides of the text field or select. This is used for the Outlined variation of Text Fields and Select.
 
 ## Design & API Documentation
 
@@ -24,12 +24,12 @@ The outline is a border around all sides of the text field. This is used for the
 ### HTML Structure
 
 ```html
-<div class="mdc-text-field__outline">
+<div class="mdc-notched-outline">
   <svg>
-    <path class="mdc-text-field__outline-path"/>
+    <path class="mdc-notched-outline__path"/>
   </svg>
 </div>
-<div class="mdc-text-field__idle-outline"></div>
+<div class="mdc-notched-outline--idle"></div>
 ```
 
 ### Usage within `mdc-text-field`
@@ -38,12 +38,12 @@ The outline is a border around all sides of the text field. This is used for the
 <div class="mdc-text-field mdc-text-field--outlined">
   <input class="mdc-text-field__input" id="my-text-field-id" type="text">
   <label class="mdc-text-field__label" for="my-text-field-id">Label</label>
-  <div class="mdc-text-field__outline">
+  <div class="mdc-notched-outline">
     <svg>
-      <path class="mdc-text-field__outline-path"/>
+      <path class="mdc-notched-outline__path"/>
     </svg>
   </div>
-  <div class="mdc-text-field__idle-outline"></div>
+  <div class="mdc-notched-outline--idle"></div>
 </div>
 ```
 
@@ -51,26 +51,25 @@ The outline is a border around all sides of the text field. This is used for the
 
 CSS Class | Description
 --- | ---
-`mdc-text-field__outline` | Mandatory. Container for the SVG in the outline when the label is floating above the input.
-`mdc-text-field__outline-path` | Mandatory. The SVG path in the outline when the label is floating above the input.
-`mdc-text-field__idle-outline` | Mandatory. The outline when the label is resting in the input position.
+`mdc-notched-outline` | Mandatory. Container for the SVG of the outline when the label is floating above the input.
+`mdc-notched-outline__path` | Mandatory. The SVG path in the outline when the label is floating above the input.
+`mdc-notched-outline--idle` | Mandatory. The outline when the label is resting in the input position.
 
-#### `MDCTextFieldOutline`
-
-##### `MDCTextFieldOutline.foundation`
-
-This allows the parent `MDCTextField` component to access the public methods on the `MDCTextFieldOutlineFoundation` class.
+### `MDCNotchedOutline`
+Method Signature | Description
+--- | ---
+`updateSvgPath(notchWidth: number, isRtl: boolean) => void` | Updates the SVG of the outline element with a notch calculated based off of the notchWidth. The notch will appear left justified, unless isRtl is true.
 
-### `MDCTextFieldOutlineAdapter`
+### `MDCNotchedOutlineAdapter`
 
 Method Signature | Description
 --- | ---
-`getWidth() => number` | Returns the width of the outline element
-`getHeight() => number` | Returns the height of the outline element
-`setOutlinePathAttr(value: string) => void` | Sets the "d" attribute of the outline element's SVG path
-`getIdleOutlineStyleValue(propertyName: string) => string` | Returns the idle outline element's computed style value of the given css property `propertyName`
+`getWidth() => number` | Returns the width of the outline element.
+`getHeight() => number` | Returns the height of the outline element.
+`setOutlinePathAttr(value: string) => void` | Sets the "d" attribute of the outline element's SVG path.
+`getIdleOutlineStyleValue(propertyName: string) => string` | Returns the idle outline element's computed style value of the given css property `propertyName`.
 
-### `MDCTextFieldOutlineFoundation`
+### `MDCNotchedOutlineFoundation`
 
 Method Signature | Description
 --- | ---
diff --git a/packages/mdc-notched-outline/_mixins.scss b/packages/mdc-notched-outline/_mixins.scss
index c096fffb9dd..8f5f9fac8fb 100644
--- a/packages/mdc-notched-outline/_mixins.scss
+++ b/packages/mdc-notched-outline/_mixins.scss
@@ -14,6 +14,8 @@
 // limitations under the License.
 //
 
+@import "@material/theme/mixins";
+
 @mixin mdc-notched-outline-color($color) {
   @include mdc-theme-prop(border-color, $color);
 }
diff --git a/packages/mdc-notched-outline/foundation.js b/packages/mdc-notched-outline/foundation.js
index 92073117fbe..65bae47eca5 100644
--- a/packages/mdc-notched-outline/foundation.js
+++ b/packages/mdc-notched-outline/foundation.js
@@ -51,12 +51,12 @@ class MDCNotchedOutlineFoundation extends MDCFoundation {
   }
 
   /**
-   * Updates the SVG path of the focus outline element based on the given width of the
-   * label element and the RTL context.
-   * @param {number} labelWidth
+   * Updates the SVG path of the focus outline element based on the width
+   * of the notched element width and the RTL context.
+   * @param {number} notchWidth
    * @param {boolean=} isRtl
    */
-  updateSvgPath(labelWidth, isRtl = false) {
+  updateSvgPath(notchWidth, isRtl = false) {
     // 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');
@@ -65,7 +65,7 @@ class MDCNotchedOutlineFoundation extends MDCFoundation {
     const height = this.adapter_.getHeight();
     const cornerWidth = radius + 1.2;
     const leadingStrokeLength = Math.abs(11 - cornerWidth);
-    const paddedLabelWidth = labelWidth + 8;
+    const paddedNotchWidth = notchWidth + 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
@@ -78,15 +78,15 @@ class MDCNotchedOutlineFoundation extends MDCFoundation {
 
     let path;
     if (!isRtl) {
-      path = 'M' + (cornerWidth + leadingStrokeLength + paddedLabelWidth) + ',' + 1
-        + 'h' + (width - (2 * cornerWidth) - paddedLabelWidth - leadingStrokeLength)
+      path = 'M' + (cornerWidth + leadingStrokeLength + paddedNotchWidth) + ',' + 1
+        + 'h' + (width - (2 * cornerWidth) - paddedNotchWidth - leadingStrokeLength)
         + pathMiddle
         + 'h' + leadingStrokeLength;
     } else {
       path = 'M' + (width - cornerWidth - leadingStrokeLength) + ',' + 1
         + 'h' + leadingStrokeLength
         + pathMiddle
-        + 'h' + (width - (2 * cornerWidth) - paddedLabelWidth - leadingStrokeLength);
+        + 'h' + (width - (2 * cornerWidth) - paddedNotchWidth - leadingStrokeLength);
     }
 
     this.adapter_.setOutlinePathAttr(path);
diff --git a/packages/mdc-notched-outline/index.js b/packages/mdc-notched-outline/index.js
index 17c13f9924b..6ed30d14359 100644
--- a/packages/mdc-notched-outline/index.js
+++ b/packages/mdc-notched-outline/index.js
@@ -17,9 +17,9 @@
 
 import MDCComponent from '@material/base/component';
 
-import {strings} from './constants';
 import MDCNotchedOutlineAdapter from './adapter';
 import MDCNotchedOutlineFoundation from './foundation';
+import {strings} from './constants';
 
 /**
  * @extends {MDCComponent<!MDCNotchedOutlineFoundation>}
@@ -35,10 +35,13 @@ class MDCNotchedOutline extends MDCComponent {
   }
 
   /**
-    *
+    * Updates the SVG path of the focus outline element based on the width
+    * of the notched element width and the RTL context.
+    * @param {number} notchWidth Width of the size of the notch in the outline
+    * @param {boolean=} isRtl Determines if outline is rtl
     */
-  updateOutlinePath(labelWidth, isRtl) {
-    this.foundation_.updateSvgPath(labelWidth, isRtl);
+  updateSvgPath(notchWidth, isRtl) {
+    this.foundation_.updateSvgPath(notchWidth, isRtl);
   }
 
   /**
diff --git a/packages/mdc-notched-outline/mdc-notched-outline.scss b/packages/mdc-notched-outline/mdc-notched-outline.scss
index 3d7370204a3..e2224b1fd64 100644
--- a/packages/mdc-notched-outline/mdc-notched-outline.scss
+++ b/packages/mdc-notched-outline/mdc-notched-outline.scss
@@ -14,10 +14,10 @@
 // limitations under the License.
 //
 
-@import "./mixins";
 @import "@material/theme/mixins";
 @import "@material/ripple/mixins";
 @import "@material/ripple/variables";
+@import "./mixins";
 
 .mdc-notched-outline--idle {
   position: absolute;
@@ -45,16 +45,21 @@
   opacity: 0;
   overflow: hidden;
 
+  // stylelint-disable selector-max-type
+  // postcss-bem-linter: ignore
   svg {
     position: absolute;
     width: 100%;
     height: 100%;
   }
+  // stylelint-enable selector-max-type
 }
 
 .mdc-notched-outline__path {
   stroke-width: 1px;
-  transition: mdc-text-field-transition(stroke), mdc-text-field-transition(stroke-width),
-  mdc-text-field-transition(opacity);
+  transition:
+    mdc-text-field-transition(stroke),
+    mdc-text-field-transition(stroke-width),
+    mdc-text-field-transition(opacity);
   fill: transparent;
 }
diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
index b5beb3de567..26c7306e2c6 100644
--- a/packages/mdc-textfield/README.md
+++ b/packages/mdc-textfield/README.md
@@ -123,16 +123,16 @@ Add the `disabled` attribute to `<input>` if the `mdc-text-field` is disabled. Y
 <div class="mdc-text-field mdc-text-field--outlined">
   <input type="text" id="tf-outlined" class="mdc-text-field__input">
   <label for="tf-outlined" class="mdc-floating-label">Your Name</label>
-  <div class="mdc-text-field__outline">
+  <div class="mdc-notched-outline">
     <svg>
-      <path class="mdc-text-field__outline-path"/>
+      <path class="mdc-notched-outline__path"/>
     </svg>
   </div>
-  <div class="mdc-text-field__idle-outline"></div>
+  <div class="mdc-notched-outline--idle"></div>
 </div>
 ```
 
-See [here](outline/) for more information on using the outline sub-component.
+See [here](../mdc-notched-outline/) for more information on using the outline sub-component.
 
 > _NOTE_: Do not use `mdc-line-ripple` inside of `mdc-text-field` _if you plan on using `mdc-text-field--outlined`_. Bottom line should not be included as part of the DOM structure of an outlined text field.
 
@@ -226,6 +226,8 @@ Method Signature | Description
 `getNativeInput() => {value: string, disabled: boolean, badInput: boolean, checkValidity: () => boolean}?` | Returns an object representing the native text input element, with a similar API shape
 `isFocused() => boolean` | Returns whether the input is focused
 `isRtl() => boolean` | Returns whether the direction of the root element is set to RTL
+`hasOutline() => boolean` | Returns whether there is an outline element
+`updateOutlinePath(labelWidth: number, isRtl: boolean) => void` | Updates the outline path to create a notch for the label element
 
 #### `MDCTextFieldAdapter.getNativeInput()`
 
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index e4abc87245b..c37e6dd59d8 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -16,11 +16,11 @@
 
 @import "@material/floating-label/mixins";
 @import "@material/line-ripple/mixins";
+@import "@material/notched-outline/mixins";
+@import "@material/theme/mixins";
 @import "helper-text/mixins";
 @import "icon/mixins";
 @import "icon/variables";
-@import "@material/theme/mixins";
-@import "@material/notched-outline/mixins";
 
 @mixin mdc-text-field-outlined-corner-radius($radius) {
   border-radius: $radius;
@@ -106,6 +106,24 @@
   }
 }
 
+@mixin mdc-text-field-outline-color($color) {
+  &:not(.mdc-text-field--disabled) {
+    @include mdc-text-field-outline-color_($color);
+  }
+}
+
+@mixin mdc-text-field-hover-outline-color($color) {
+  &:not(.mdc-text-field--disabled) {
+    @include mdc-text-field-hover-outline-color_($color);
+  }
+}
+
+@mixin mdc-text-field-focused-outline-color($color) {
+  &:not(.mdc-text-field--disabled) {
+    @include mdc-text-field-focused-outline-color_($color);
+  }
+}
+
 // Private mixins
 
 // Baseline
@@ -251,7 +269,6 @@
     @include mdc-text-field-outlined-corner-radius($mdc-text-field-border-radius);
   }
 
-  // stylelint-disable plugin/selector-bem-pattern
   .mdc-text-field__input:hover ~ .mdc-notched-outline--idle {
     border: 1px solid;
   }
@@ -259,25 +276,6 @@
   .mdc-text-field__icon:hover ~ .mdc-notched-outline--idle {
     border: 1px solid $mdc-text-field-outlined-hover-border;
   }
-  // stylelint-enable plugin/selector-bem-pattern
-}
-
-@mixin mdc-text-field-outline-color($color) {
-  &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-outline-color_($color);
-  }
-}
-
-@mixin mdc-text-field-hover-outline-color($color) {
-  &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-hover-outline-color_($color);
-  }
-}
-
-@mixin mdc-text-field-focused-outline-color($color) {
-  &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-focused-outline-color_($color);
-  }
 }
 
 @mixin mdc-text-field-hover-outline-color_($color) {
diff --git a/packages/mdc-textfield/adapter.js b/packages/mdc-textfield/adapter.js
index 98b1c1f4994..c27a4dc38b7 100644
--- a/packages/mdc-textfield/adapter.js
+++ b/packages/mdc-textfield/adapter.js
@@ -174,6 +174,21 @@ class MDCTextFieldAdapter {
    * @return {number}
    */
   getLabelWidth() {}
+
+  /**
+   * Returns true if outline element exists, false if it doesn't.
+   * @return {boolean}
+   */
+  hasOutline() {}
+
+  /**
+   * Only implement if outline element exists.
+   * Updates SVG Path on outline element based on the width of the
+   * label element width and RTL context.
+   * @param {number} labelWidth
+   * @param {boolean} isRtl
+   */
+  updateOutlinePath(labelWidth, isRtl) {}
 }
 
 export {MDCTextFieldAdapter, NativeInputType, FoundationMapType};
diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index e29c338d8fa..d3d205ba1c3 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -80,6 +80,8 @@ class MDCTextFieldFoundation extends MDCFoundation {
       floatLabel: () => {},
       hasLabel: () => {},
       getLabelWidth: () => {},
+      hasOutline: () => {},
+      updateOutlinePath: () => {},
     });
   }
 
@@ -182,9 +184,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
     this.isFocused_ = true;
     this.styleFocused_(this.isFocused_);
     this.adapter_.activateLineRipple();
-    if (this.adapter_.hasOutline()) {
-      this.updateOutline();
-    }
+    this.updateOutline();
     if (this.adapter_.hasLabel()) {
       this.adapter_.shakeLabel(this.shouldShake);
       this.adapter_.floatLabel(this.shouldFloat);
diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
index 7e2f054f491..2a9fec602ad 100644
--- a/packages/mdc-textfield/index.js
+++ b/packages/mdc-textfield/index.js
@@ -277,12 +277,8 @@ class MDCTextField extends MDCComponent {
         getLabelWidth: () => {
           return this.label_.getWidth();
         },
-        hasOutline: () => {
-          return !!this.outline_;
-        },
-        updateOutlinePath: (labelWidth, isRtl) => {
-          this.outline_.updateOutlinePath(labelWidth, isRtl);
-        },
+        hasOutline: () => !!this.outline_,
+        updateOutlinePath: (labelWidth, isRtl) => this.outline_.updateSvgPath(labelWidth, isRtl),
       },
       this.getInputAdapterMethods_())),
       this.getFoundationMap_());

From edc898bd0d31c72485c40d8a496235cf495ab60f Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Tue, 27 Feb 2018 13:17:18 -0500
Subject: [PATCH 29/47] fix(text-field): fixed tests and moved notched-outline
 to its own package

---
 .../foundation.test.js}                       | 10 ++++-----
 .../mdc-notched-outline.test.js}              | 22 +++++++++----------
 test/unit/mdc-textfield/foundation.test.js    | 19 ++++++++--------
 .../unit/mdc-textfield/mdc-text-field.test.js | 22 +++++++++----------
 4 files changed, 36 insertions(+), 37 deletions(-)
 rename test/unit/{mdc-textfield/mdc-text-field-outline.foundation.test.js => mdc-notched-outline/foundation.test.js} (79%)
 rename test/unit/{mdc-textfield/mdc-text-field-outline.test.js => mdc-notched-outline/mdc-notched-outline.test.js} (74%)

diff --git a/test/unit/mdc-textfield/mdc-text-field-outline.foundation.test.js b/test/unit/mdc-notched-outline/foundation.test.js
similarity index 79%
rename from test/unit/mdc-textfield/mdc-text-field-outline.foundation.test.js
rename to test/unit/mdc-notched-outline/foundation.test.js
index 0b9cbbda5c6..247ad133b9d 100644
--- a/test/unit/mdc-textfield/mdc-text-field-outline.foundation.test.js
+++ b/test/unit/mdc-notched-outline/foundation.test.js
@@ -19,21 +19,21 @@ import td from 'testdouble';
 
 import {verifyDefaultAdapter} from '../helpers/foundation';
 import {setupFoundationTest} from '../helpers/setup';
-import MDCTextFieldOutlineFoundation from '../../../packages/mdc-textfield/outline/foundation';
+import MDCNotchedOutlineFoundation from '../../../packages/mdc-notched-outline/foundation';
 
-suite('MDCTextFieldOutlineFoundation');
+suite('MDCNotchedOutlineFoundation');
 
 test('exports strings', () => {
-  assert.isOk('strings' in MDCTextFieldOutlineFoundation);
+  assert.isOk('strings' in MDCNotchedOutlineFoundation);
 });
 
 test('defaultAdapter returns a complete adapter implementation', () => {
-  verifyDefaultAdapter(MDCTextFieldOutlineFoundation, [
+  verifyDefaultAdapter(MDCNotchedOutlineFoundation, [
     'getWidth', 'getHeight', 'setOutlinePathAttr', 'getIdleOutlineStyleValue',
   ]);
 });
 
-const setupTest = () => setupFoundationTest(MDCTextFieldOutlineFoundation);
+const setupTest = () => setupFoundationTest(MDCNotchedOutlineFoundation);
 
 test('#updateSvgPath sets the path of the outline element', () => {
   const {foundation, mockAdapter} = setupTest();
diff --git a/test/unit/mdc-textfield/mdc-text-field-outline.test.js b/test/unit/mdc-notched-outline/mdc-notched-outline.test.js
similarity index 74%
rename from test/unit/mdc-textfield/mdc-text-field-outline.test.js
rename to test/unit/mdc-notched-outline/mdc-notched-outline.test.js
index 356b7b28d0b..98a26ea486d 100644
--- a/test/unit/mdc-textfield/mdc-text-field-outline.test.js
+++ b/test/unit/mdc-notched-outline/mdc-notched-outline.test.js
@@ -17,25 +17,25 @@
 import bel from 'bel';
 import {assert} from 'chai';
 
-import {MDCTextFieldOutline} from '../../../packages/mdc-textfield/outline';
+import {MDCNotchedOutline} from '../../../packages/mdc-notched-outline';
 
 const getFixture = () => bel`
-  <div class="mdc-text-field__outline">
+  <div class="mdc-notched-outline">
     <svg>
-      <path class="mdc-text-field__outline-path">
+      <path class="mdc-notched-outline__path">
     </svg>
   </div>
 `;
 
-suite('MDCTextFieldOutline');
+suite('MDCNotchedOutline');
 
-test('attachTo returns an MDCTextFieldOutline instance', () => {
-  assert.isOk(MDCTextFieldOutline.attachTo(getFixture()) instanceof MDCTextFieldOutline);
+test('attachTo returns an MDCNotchedOutline instance', () => {
+  assert.isOk(MDCNotchedOutline.attachTo(getFixture()) instanceof MDCNotchedOutline);
 });
 
 function setupTest() {
   const root = getFixture();
-  const component = new MDCTextFieldOutline(root);
+  const component = new MDCNotchedOutline(root);
   return {root, component};
 }
 
@@ -54,7 +54,7 @@ test('#adapter.getHeight returns the height of the element', () => {
 test('#adapter.setOutlinePathAttr sets the SVG path of the element', () => {
   const {root, component} = setupTest();
   component.getDefaultFoundation().adapter_.setOutlinePathAttr('M 0 1');
-  const path = root.querySelector('.mdc-text-field__outline-path');
+  const path = root.querySelector('.mdc-notched-outline__path');
   assert.equal(path.getAttribute('d'), 'M 0 1');
 });
 
@@ -62,11 +62,11 @@ test('#adapter.getIdleOutlineStyleValue returns the value of the given property
   const outlineRoot = getFixture();
   const root = bel`<div></div>`;
   root.appendChild(outlineRoot);
-  root.appendChild(bel`<div class="mdc-text-field__idle-outline"></div>`);
-  const idleOutline = root.querySelector('.mdc-text-field__idle-outline');
+  root.appendChild(bel`<div class="mdc-notched-outline--idle"></div>`);
+  const idleOutline = root.querySelector('.mdc-notched-outline--idle');
   idleOutline.style.width = '500px';
 
-  const component = new MDCTextFieldOutline(outlineRoot);
+  const component = new MDCNotchedOutline(outlineRoot);
   assert.equal(
     component.getDefaultFoundation().adapter_.getIdleOutlineStyleValue('width'),
     getComputedStyle(idleOutline).getPropertyValue('width')
diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
index ae6e248ef5a..98f8fb1eec4 100644
--- a/test/unit/mdc-textfield/foundation.test.js
+++ b/test/unit/mdc-textfield/foundation.test.js
@@ -43,6 +43,7 @@ test('defaultAdapter returns a complete adapter implementation', () => {
     'registerInputInteractionHandler', 'deregisterInputInteractionHandler',
     'getNativeInput', 'isFocused', 'isRtl', 'activateLineRipple', 'deactivateLineRipple',
     'setLineRippleTransformOrigin', 'shakeLabel', 'floatLabel', 'hasLabel', 'getLabelWidth',
+    'hasOutline', 'updateOutlinePath',
   ]);
 });
 
@@ -59,16 +60,12 @@ const setupTest = () => {
     deregisterInteractionHandler: () => {},
     handleInteraction: () => {},
   });
-  const outline = td.object({
-    updateSvgPath: () => {},
-  });
   const foundationMap = {
-    helperText: helperText,
-    icon: icon,
-    outline: outline,
+    helperText,
+    icon,
   };
   const foundation = new MDCTextFieldFoundation(mockAdapter, foundationMap);
-  return {foundation, mockAdapter, helperText, icon, outline};
+  return {foundation, mockAdapter, helperText, icon};
 };
 
 test('#constructor sets disabled to false', () => {
@@ -397,25 +394,27 @@ test('#setHelperTextContent sets the content of the helper text element', () =>
 });
 
 test('#updateOutline updates the SVG path of the outline element', () => {
-  const {foundation, mockAdapter, outline} = setupTest();
+  const {foundation, mockAdapter} = setupTest();
   td.when(mockAdapter.getLabelWidth()).thenReturn(30);
   td.when(mockAdapter.hasLabel()).thenReturn(true);
+  td.when(mockAdapter.hasOutline()).thenReturn(true);
   td.when(mockAdapter.hasClass(cssClasses.DENSE)).thenReturn(false);
   td.when(mockAdapter.isRtl()).thenReturn(false);
 
   foundation.updateOutline();
-  td.verify(outline.updateSvgPath(30 * numbers.LABEL_SCALE, false));
+  td.verify(mockAdapter.updateOutlinePath(30 * numbers.LABEL_SCALE, false));
 });
 
 test('#updateOutline updates the SVG path of the outline element when dense', () => {
   const {foundation, mockAdapter, outline} = setupTest();
   td.when(mockAdapter.getLabelWidth()).thenReturn(30);
   td.when(mockAdapter.hasLabel()).thenReturn(true);
+  td.when(mockAdapter.hasOutline()).thenReturn(true);
   td.when(mockAdapter.hasClass(cssClasses.DENSE)).thenReturn(true);
   td.when(mockAdapter.isRtl()).thenReturn(false);
 
   foundation.updateOutline();
-  td.verify(outline.updateSvgPath(30 * numbers.DENSE_LABEL_SCALE, false));
+  td.verify(mockAdapter.updateOutlinePath(30 * numbers.DENSE_LABEL_SCALE, false));
 });
 
 const setupBareBonesTest = () => {
diff --git a/test/unit/mdc-textfield/mdc-text-field.test.js b/test/unit/mdc-textfield/mdc-text-field.test.js
index 384391ad404..792971063dc 100644
--- a/test/unit/mdc-textfield/mdc-text-field.test.js
+++ b/test/unit/mdc-textfield/mdc-text-field.test.js
@@ -22,8 +22,9 @@ import {assert} from 'chai';
 import {MDCRipple} from '../../../packages/mdc-ripple';
 import {MDCLineRipple} from '../../../packages/mdc-line-ripple';
 import {MDCFloatingLabel} from '../../../packages/mdc-floating-label';
+import {MDCNotchedOutline} from '../../../packages/mdc-notched-outline';
 import {MDCTextField, MDCTextFieldFoundation, MDCTextFieldHelperText,
-  MDCTextFieldIcon, MDCTextFieldOutline} from '../../../packages/mdc-textfield';
+  MDCTextFieldIcon} from '../../../packages/mdc-textfield';
 
 const {cssClasses} = MDCTextFieldFoundation;
 
@@ -82,7 +83,6 @@ class FakeLabel {
 
 class FakeOutline {
   constructor() {
-    this.createRipple = td.function('.createRipple');
     this.destroy = td.func('.destroy');
   }
 }
@@ -100,11 +100,11 @@ test('#constructor when given a `mdc-text-field--outlined` element instantiates
     <div class="mdc-text-field mdc-text-field--outlined">
       <input type="text" class="mdc-text-field__input" id="my-text-field">
       <label class="mdc-floating-label" for="my-text-field">My Label</label>
-      <div class="mdc-text-field__outline"></div>
-      <div class="mdc-text-field__idle-outline"></div>
+      <div class="mdc-notched-outline"></div>
+      <div class="mdc-notched-outline--idle"></div>
     </div>
   `;
-  const outline = root.querySelector('.mdc-text-field__outline');
+  const outline = root.querySelector('.mdc-notched-outline');
   const component = new MDCTextField(root, undefined, (el) => new FakeRipple(el));
   assert.equal(component.ripple.root, outline);
 });
@@ -129,8 +129,8 @@ test('#constructor when given a `mdc-text-field--outlined` element, initializes
     <div class="mdc-text-field mdc-text-field--outlined">
       <input type="text" class="mdc-text-field__input" id="my-text-field">
       <label class="mdc-floating-label" for="my-text-field">My Label</label>
-      <div class="mdc-text-field__outline"></div>
-      <div class="mdc-text-field__idle-outline"></div>
+      <div class="mdc-notched-outline"></div>
+      <div class="mdc-notched-outline--idle"></div>
     </div>
   `;
   const component = new MDCTextField(root);
@@ -168,11 +168,11 @@ test('#constructor instantiates a label on the `.mdc-floating-label` element if
   assert.instanceOf(component.label_, MDCFloatingLabel);
 });
 
-test('#constructor instantiates an outline on the `.mdc-text-field__outline` element if present', () => {
+test('#constructor instantiates an outline on the `.mdc-notched-outline` element if present', () => {
   const root = getFixture();
-  root.appendChild(bel`<div class="mdc-text-field__outline"></div>`);
+  root.appendChild(bel`<div class="mdc-notched-outline"></div>`);
   const component = new MDCTextField(root);
-  assert.instanceOf(component.outline_, MDCTextFieldOutline);
+  assert.instanceOf(component.outline_, MDCNotchedOutline);
 });
 
 test('#constructor handles undefined optional sub-elements gracefully', () => {
@@ -242,7 +242,7 @@ test('#destroy cleans up the label if present', () => {
 
 test('#destroy cleans up the outline if present', () => {
   const root = getFixture();
-  root.appendChild(bel`<div class="mdc-text-field__outline"></div>`);
+  root.appendChild(bel`<div class="mdc-notched-outline"></div>`);
   const {component, outline} = setupTest(root);
   component.destroy();
   td.verify(outline.destroy());

From 5dbf686bee8fc7031065b2ea13a71cc09bef82cf Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Tue, 27 Feb 2018 13:28:52 -0500
Subject: [PATCH 30/47] fix(text-field): closure tests

---
 package.json                               | 1 +
 packages/mdc-textfield/adapter.js          | 1 -
 test/unit/mdc-textfield/foundation.test.js | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 4c0abe99419..4dc98b3d541 100644
--- a/package.json
+++ b/package.json
@@ -176,6 +176,7 @@
     "mdc-form-field",
     "mdc-icon-toggle",
     "mdc-menu",
+    "mdc-notched-outline",
     "mdc-radio",
     "mdc-ripple",
     "mdc-selection-control",
diff --git a/packages/mdc-textfield/adapter.js b/packages/mdc-textfield/adapter.js
index c27a4dc38b7..2e1fb04695e 100644
--- a/packages/mdc-textfield/adapter.js
+++ b/packages/mdc-textfield/adapter.js
@@ -43,7 +43,6 @@ let NativeInputType;
  *   helperText: (!MDCTextFieldHelperTextFoundation|undefined),
  *   icon: (!MDCTextFieldIconFoundation|undefined),
  *   label: (!MDCFloatingLabelFoundation|undefined),
- *   outline: (!MDCTextFieldOutlineFoundation|undefined),
  *   outline: (!MDCNotchedOutlineFoundation|undefined)
  * }}
  */
diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
index 98f8fb1eec4..93fea42d93d 100644
--- a/test/unit/mdc-textfield/foundation.test.js
+++ b/test/unit/mdc-textfield/foundation.test.js
@@ -406,7 +406,7 @@ test('#updateOutline updates the SVG path of the outline element', () => {
 });
 
 test('#updateOutline updates the SVG path of the outline element when dense', () => {
-  const {foundation, mockAdapter, outline} = setupTest();
+  const {foundation, mockAdapter} = setupTest();
   td.when(mockAdapter.getLabelWidth()).thenReturn(30);
   td.when(mockAdapter.hasLabel()).thenReturn(true);
   td.when(mockAdapter.hasOutline()).thenReturn(true);

From 2ae20d135ecde0016bbb0c55ed7fb7e99cb837c2 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Tue, 27 Feb 2018 15:48:56 -0500
Subject: [PATCH 31/47] fix(notched-outline): renamed noched-outline--idle to
 notched-outline__idle

---
 demos/text-field.html                         |  4 +-
 packages/material-components-web/index.js     |  1 +
 packages/mdc-notched-outline/README.md        | 10 ++--
 packages/mdc-notched-outline/adapter.js       |  2 +-
 packages/mdc-notched-outline/constants.js     |  2 +-
 packages/mdc-notched-outline/foundation.js    |  2 +-
 packages/mdc-notched-outline/index.js         |  7 +--
 .../mdc-notched-outline.scss                  |  5 +-
 packages/mdc-textfield/README.md              |  2 +-
 packages/mdc-textfield/_mixins.scss           | 12 ++---
 packages/mdc-textfield/adapter.js             |  4 +-
 packages/mdc-textfield/index.js               | 46 +++++++++++++------
 packages/mdc-textfield/mdc-text-field.scss    |  2 +-
 scripts/webpack/css-bundle-factory.js         |  1 +
 .../mdc-notched-outline.test.js               |  4 +-
 .../unit/mdc-textfield/mdc-text-field.test.js |  4 +-
 16 files changed, 64 insertions(+), 44 deletions(-)

diff --git a/demos/text-field.html b/demos/text-field.html
index 6bd8a91a39c..0757c5cb1fd 100644
--- a/demos/text-field.html
+++ b/demos/text-field.html
@@ -145,7 +145,7 @@ <h2>Outlined Text Field</h2>
                 <path class="mdc-notched-outline__path"/>
               </svg>
             </div>
-            <div class="mdc-notched-outline--idle"></div>
+            <div class="mdc-notched-outline__idle"></div>
           </div>
           <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg">
             Must be at least 8 characters
@@ -258,7 +258,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
                 <path class="mdc-notched-outline__path"/>
               </svg>
             </div>
-            <div class="mdc-notched-outline--idle"></div>
+            <div class="mdc-notched-outline__idle"></div>
           </div>
         </div>
         <div>
diff --git a/packages/material-components-web/index.js b/packages/material-components-web/index.js
index b09877dfdab..524178b4571 100644
--- a/packages/material-components-web/index.js
+++ b/packages/material-components-web/index.js
@@ -80,6 +80,7 @@ export {
   lineRipple,
   linearProgress,
   menu,
+  notchedOutline,
   radio,
   ripple,
   select,
diff --git a/packages/mdc-notched-outline/README.md b/packages/mdc-notched-outline/README.md
index a6a9e1db56c..74c24e8a02a 100644
--- a/packages/mdc-notched-outline/README.md
+++ b/packages/mdc-notched-outline/README.md
@@ -29,7 +29,7 @@ The outline is a border around all sides of the text field or select. This is us
     <path class="mdc-notched-outline__path"/>
   </svg>
 </div>
-<div class="mdc-notched-outline--idle"></div>
+<div class="mdc-notched-outline__idle"></div>
 ```
 
 ### Usage within `mdc-text-field`
@@ -43,7 +43,7 @@ The outline is a border around all sides of the text field or select. This is us
       <path class="mdc-notched-outline__path"/>
     </svg>
   </div>
-  <div class="mdc-notched-outline--idle"></div>
+  <div class="mdc-notched-outline__idle"></div>
 </div>
 ```
 
@@ -53,7 +53,7 @@ CSS Class | Description
 --- | ---
 `mdc-notched-outline` | Mandatory. Container for the SVG of the outline when the label is floating above the input.
 `mdc-notched-outline__path` | Mandatory. The SVG path in the outline when the label is floating above the input.
-`mdc-notched-outline--idle` | Mandatory. The outline when the label is resting in the input position.
+`mdc-notched-outline__idle` | Mandatory. The outline when the label is resting, in the docked position.
 
 ### `MDCNotchedOutline`
 Method Signature | Description
@@ -67,10 +67,10 @@ Method Signature | Description
 `getWidth() => number` | Returns the width of the outline element.
 `getHeight() => number` | Returns the height of the outline element.
 `setOutlinePathAttr(value: string) => void` | Sets the "d" attribute of the outline element's SVG path.
-`getIdleOutlineStyleValue(propertyName: string) => string` | Returns the idle outline element's computed style value of the given css property `propertyName`.
+`getIdleOutlineStyleValue(propertyName: string) => string` | Returns the idle outline element's computed style value of a given css `propertyName`.
 
 ### `MDCNotchedOutlineFoundation`
 
 Method Signature | Description
 --- | ---
-`updateSvgPath(labelWidth: number, isRtl: boolean) => void` | Updates the SVG path of the focus outline element based on the given the width of the label element and the RTL context.
+`updateSvgPath(labelWidth: number, isRtl: boolean) => void` | Updates the SVG path of the focus outline element based on the given width of the label element and the RTL context.
diff --git a/packages/mdc-notched-outline/adapter.js b/packages/mdc-notched-outline/adapter.js
index cd421433d6d..e8cad43d460 100644
--- a/packages/mdc-notched-outline/adapter.js
+++ b/packages/mdc-notched-outline/adapter.js
@@ -21,7 +21,7 @@
  * Adapter for MDC Notched Outline.
  *
  * Defines the shape of the adapter expected by the foundation. Implement this
- * adapter to integrate the Notched outline into your framework. See
+ * adapter to integrate the Notched Outline into your framework. See
  * https://github.com/material-components/material-components-web/blob/master/docs/authoring-components.md
  * for more information.
  *
diff --git a/packages/mdc-notched-outline/constants.js b/packages/mdc-notched-outline/constants.js
index 93860240671..b669376e216 100644
--- a/packages/mdc-notched-outline/constants.js
+++ b/packages/mdc-notched-outline/constants.js
@@ -18,7 +18,7 @@
 /** @enum {string} */
 const strings = {
   PATH_SELECTOR: '.mdc-notched-outline__path',
-  IDLE_OUTLINE_SELECTOR: '.mdc-notched-outline--idle',
+  IDLE_OUTLINE_SELECTOR: '.mdc-notched-outline__idle',
 };
 
 export {strings};
diff --git a/packages/mdc-notched-outline/foundation.js b/packages/mdc-notched-outline/foundation.js
index 65bae47eca5..71660181588 100644
--- a/packages/mdc-notched-outline/foundation.js
+++ b/packages/mdc-notched-outline/foundation.js
@@ -52,7 +52,7 @@ class MDCNotchedOutlineFoundation extends MDCFoundation {
 
   /**
    * Updates the SVG path of the focus outline element based on the width
-   * of the notched element width and the RTL context.
+   * of the notched element and the RTL context.
    * @param {number} notchWidth
    * @param {boolean=} isRtl
    */
diff --git a/packages/mdc-notched-outline/index.js b/packages/mdc-notched-outline/index.js
index 6ed30d14359..99957b07037 100644
--- a/packages/mdc-notched-outline/index.js
+++ b/packages/mdc-notched-outline/index.js
@@ -36,9 +36,10 @@ class MDCNotchedOutline extends MDCComponent {
 
   /**
     * Updates the SVG path of the focus outline element based on the width
-    * of the notched element width and the RTL context.
-    * @param {number} notchWidth Width of the size of the notch in the outline
-    * @param {boolean=} isRtl Determines if outline is rtl
+    * of the notched element and the RTL context.
+    * @param {number} notchWidth Width of the size of the notch in the outline.
+    * @param {boolean=} isRtl Determines if outline is rtl. If rtl is true, outline notch
+    * will be right justified, otherwise left justified.
     */
   updateSvgPath(notchWidth, isRtl) {
     this.foundation_.updateSvgPath(notchWidth, isRtl);
diff --git a/packages/mdc-notched-outline/mdc-notched-outline.scss b/packages/mdc-notched-outline/mdc-notched-outline.scss
index e2224b1fd64..b90f962b0ec 100644
--- a/packages/mdc-notched-outline/mdc-notched-outline.scss
+++ b/packages/mdc-notched-outline/mdc-notched-outline.scss
@@ -14,12 +14,12 @@
 // limitations under the License.
 //
 
-@import "@material/theme/mixins";
 @import "@material/ripple/mixins";
 @import "@material/ripple/variables";
+@import "@material/theme/mixins";
 @import "./mixins";
 
-.mdc-notched-outline--idle {
+.mdc-notched-outline__idle {
   position: absolute;
   top: 0;
   left: 0;
@@ -46,7 +46,6 @@
   overflow: hidden;
 
   // stylelint-disable selector-max-type
-  // postcss-bem-linter: ignore
   svg {
     position: absolute;
     width: 100%;
diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
index 26c7306e2c6..27a37a20438 100644
--- a/packages/mdc-textfield/README.md
+++ b/packages/mdc-textfield/README.md
@@ -128,7 +128,7 @@ Add the `disabled` attribute to `<input>` if the `mdc-text-field` is disabled. Y
       <path class="mdc-notched-outline__path"/>
     </svg>
   </div>
-  <div class="mdc-notched-outline--idle"></div>
+  <div class="mdc-notched-outline__idle"></div>
 </div>
 ```
 
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index c37e6dd59d8..00ee1336449 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -265,22 +265,22 @@
   }
 
   .mdc-notched-outline,
-  .mdc-notched-outline--idle {
+  .mdc-notched-outline__idle {
     @include mdc-text-field-outlined-corner-radius($mdc-text-field-border-radius);
   }
 
-  .mdc-text-field__input:hover ~ .mdc-notched-outline--idle {
+  .mdc-text-field__input:hover ~ .mdc-notched-outline__idle {
     border: 1px solid;
   }
 
-  .mdc-text-field__icon:hover ~ .mdc-notched-outline--idle {
+  .mdc-text-field__icon:hover ~ .mdc-notched-outline__idle {
     border: 1px solid $mdc-text-field-outlined-hover-border;
   }
 }
 
 @mixin mdc-text-field-hover-outline-color_($color) {
-  .mdc-text-field__input:hover ~ .mdc-notched-outline--idle,
-  .mdc-text-field__icon:hover ~ .mdc-notched-outline--idle {
+  .mdc-text-field__input:hover ~ .mdc-notched-outline__idle,
+  .mdc-text-field__icon:hover ~ .mdc-notched-outline__idle {
     @include mdc-notched-outline-color($color);
   }
 }
@@ -292,7 +292,7 @@
 }
 
 @mixin mdc-text-field-outline-color_($color) {
-  .mdc-notched-outline--idle {
+  .mdc-notched-outline__idle {
     @include mdc-notched-outline-color($color);
   }
 
diff --git a/packages/mdc-textfield/adapter.js b/packages/mdc-textfield/adapter.js
index 2e1fb04695e..6da127c2a9b 100644
--- a/packages/mdc-textfield/adapter.js
+++ b/packages/mdc-textfield/adapter.js
@@ -16,11 +16,11 @@
  */
 
 /* eslint-disable no-unused-vars */
+import MDCFloatingLabelFoundation from '@material/floating-label/foundation';
 import MDCLineRippleFoundation from '@material/line-ripple/foundation';
 import MDCNotchedOutlineFoundation from '@material/notched-outline/foundation';
 import MDCTextFieldHelperTextFoundation from './helper-text/foundation';
 import MDCTextFieldIconFoundation from './icon/foundation';
-import MDCFloatingLabelFoundation from '@material/floating-label/foundation';
 
 /* eslint no-unused-vars: [2, {"args": "none"}] */
 
@@ -182,7 +182,7 @@ class MDCTextFieldAdapter {
 
   /**
    * Only implement if outline element exists.
-   * Updates SVG Path on outline element based on the width of the
+   * Updates SVG Path on outline element based on the
    * label element width and RTL context.
    * @param {number} labelWidth
    * @param {boolean} isRtl
diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
index 2a9fec602ad..dd0142310db 100644
--- a/packages/mdc-textfield/index.js
+++ b/packages/mdc-textfield/index.js
@@ -265,25 +265,43 @@ class MDCTextField extends MDCComponent {
             this.lineRipple_.setRippleCenter(normalizedX);
           }
         },
-        shakeLabel: (shouldShake) => {
-          this.label_.shake(shouldShake);
-        },
-        floatLabel: (shouldFloat) => {
-          this.label_.float(shouldFloat);
-        },
-        hasLabel: () => {
-          return !!this.label_;
-        },
-        getLabelWidth: () => {
-          return this.label_.getWidth();
-        },
-        hasOutline: () => !!this.outline_,
-        updateOutlinePath: (labelWidth, isRtl) => this.outline_.updateSvgPath(labelWidth, isRtl),
       },
+      this.getOutlineAdapterMethods_(),
+      this.getLabelAdapterMethods_(),
       this.getInputAdapterMethods_())),
       this.getFoundationMap_());
   }
 
+  /**
+   * @return {!{
+   *   shakeLabel: function(string, function()): undefined,
+   *   floatLabel: function(string, function()): undefined,
+   *   hasLabel: function(): ?Element,
+   *   getLabelWidth: function(): number,
+   * }}
+   */
+  getLabelAdapterMethods_() {
+    return {
+      shakeLabel: (shouldShake) => this.label_.shake(shouldShake),
+      floatLabel: (shouldFloat) => this.label_.float(shouldFloat),
+      hasLabel: () => !!this.label_,
+      getLabelWidth: () => this.label_.getWidth(),
+    };
+  }
+
+  /**
+   * @return {!{
+   *   hasOutline: function(): boolean,
+   *   updateOutlinePath: function(number, boolean): undefined,
+   * }}
+   */
+  getOutlineAdapterMethods_() {
+    return {
+      hasOutline: () => !!this.outline_,
+      updateOutlinePath: (labelWidth, isRtl) => this.outline_.updateSvgPath(labelWidth, isRtl),
+    };
+  }
+
   /**
    * @return {!{
    *   registerInputInteractionHandler: function(string, function()): undefined,
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index 2d9cd32df97..174388fbd35 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -246,7 +246,7 @@
 
 // Never show the idle outline when the label is floating, otherwise the label
 // will collide with the idle outline.
-.mdc-floating-label--float-above ~ .mdc-notched-outline--idle {
+.mdc-floating-label--float-above ~ .mdc-notched-outline__idle {
   opacity: 0;
 }
 
diff --git a/scripts/webpack/css-bundle-factory.js b/scripts/webpack/css-bundle-factory.js
index d95ea4d78b5..fc6742b90c8 100644
--- a/scripts/webpack/css-bundle-factory.js
+++ b/scripts/webpack/css-bundle-factory.js
@@ -145,6 +145,7 @@ module.exports = class {
         'mdc.linear-progress': getAbsolutePath('/packages/mdc-linear-progress/mdc-linear-progress.scss'),
         'mdc.list': getAbsolutePath('/packages/mdc-list/mdc-list.scss'),
         'mdc.menu': getAbsolutePath('/packages/mdc-menu/mdc-menu.scss'),
+        'mdc.notched-outline': getAbsolutePath('/packages/mdc-notched-outline/mdc-notched-outline.scss'),
         'mdc.radio': getAbsolutePath('/packages/mdc-radio/mdc-radio.scss'),
         'mdc.ripple': getAbsolutePath('/packages/mdc-ripple/mdc-ripple.scss'),
         'mdc.select': getAbsolutePath('/packages/mdc-select/mdc-select.scss'),
diff --git a/test/unit/mdc-notched-outline/mdc-notched-outline.test.js b/test/unit/mdc-notched-outline/mdc-notched-outline.test.js
index 98a26ea486d..008a42d0c02 100644
--- a/test/unit/mdc-notched-outline/mdc-notched-outline.test.js
+++ b/test/unit/mdc-notched-outline/mdc-notched-outline.test.js
@@ -62,8 +62,8 @@ test('#adapter.getIdleOutlineStyleValue returns the value of the given property
   const outlineRoot = getFixture();
   const root = bel`<div></div>`;
   root.appendChild(outlineRoot);
-  root.appendChild(bel`<div class="mdc-notched-outline--idle"></div>`);
-  const idleOutline = root.querySelector('.mdc-notched-outline--idle');
+  root.appendChild(bel`<div class="mdc-notched-outline__idle"></div>`);
+  const idleOutline = root.querySelector('.mdc-notched-outline__idle');
   idleOutline.style.width = '500px';
 
   const component = new MDCNotchedOutline(outlineRoot);
diff --git a/test/unit/mdc-textfield/mdc-text-field.test.js b/test/unit/mdc-textfield/mdc-text-field.test.js
index 792971063dc..4d747ac4268 100644
--- a/test/unit/mdc-textfield/mdc-text-field.test.js
+++ b/test/unit/mdc-textfield/mdc-text-field.test.js
@@ -101,7 +101,7 @@ test('#constructor when given a `mdc-text-field--outlined` element instantiates
       <input type="text" class="mdc-text-field__input" id="my-text-field">
       <label class="mdc-floating-label" for="my-text-field">My Label</label>
       <div class="mdc-notched-outline"></div>
-      <div class="mdc-notched-outline--idle"></div>
+      <div class="mdc-notched-outline__idle"></div>
     </div>
   `;
   const outline = root.querySelector('.mdc-notched-outline');
@@ -130,7 +130,7 @@ test('#constructor when given a `mdc-text-field--outlined` element, initializes
       <input type="text" class="mdc-text-field__input" id="my-text-field">
       <label class="mdc-floating-label" for="my-text-field">My Label</label>
       <div class="mdc-notched-outline"></div>
-      <div class="mdc-notched-outline--idle"></div>
+      <div class="mdc-notched-outline__idle"></div>
     </div>
   `;
   const component = new MDCTextField(root);

From f03ca0efea0bf2790b08b9b23e99436cd384b8db Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Wed, 28 Feb 2018 10:58:04 -0500
Subject: [PATCH 32/47] fix(floating-label): fixed readme

---
 demos/text-field.scss                        | 22 +++++++-------
 demos/theme/theme-dark.scss                  |  2 +-
 packages/mdc-floating-label/README.md        |  3 --
 packages/mdc-floating-label/_mixins.scss     | 14 ++++-----
 packages/mdc-floating-label/foundation.js    |  1 -
 packages/mdc-floating-label/index.js         |  1 -
 packages/mdc-textfield/README.md             | 18 +++++-------
 packages/mdc-textfield/_mixins.scss          | 30 ++++++++++++--------
 packages/mdc-textfield/_variables.scss       |  2 +-
 packages/mdc-textfield/helper-text/README.md |  8 ++++++
 packages/mdc-textfield/icon/README.md        |  8 +++++-
 packages/mdc-textfield/mdc-text-field.scss   |  2 +-
 packages/mdc-textfield/outline/README.md     |  8 ++++++
 13 files changed, 67 insertions(+), 52 deletions(-)

diff --git a/demos/text-field.scss b/demos/text-field.scss
index b5c4ab1d9e4..b81b02f4105 100644
--- a/demos/text-field.scss
+++ b/demos/text-field.scss
@@ -28,7 +28,7 @@
   @include mdc-text-field-hover-bottom-line-color($hover-border);
   @include mdc-text-field-line-ripple-color($focused-border);
   @include mdc-text-field-ink-color(black);
-  @include mdc-text-field-label-color(rgba(blue, .5));
+  @include mdc-text-field-label-ink-color(rgba(blue, .5));
   @include mdc-text-field-outline-color($idle-border);
   @include mdc-text-field-hover-outline-color($hover-border);
   @include mdc-text-field-focused-outline-color($focused-border);
@@ -37,7 +37,7 @@
   @include mdc-text-field-icon-color($hover-border);
 
   &.mdc-text-field--focused {
-    @include mdc-text-field-label-color(rgba(blue, .87));
+    @include mdc-text-field-label-ink-color(rgba(blue, .87));
     @include mdc-text-field-icon-color($focused-border);
   }
 }
@@ -48,22 +48,22 @@
   $focused-border: rgba(blue, 1);
 
   @include mdc-text-field-ink-color(black);
-  @include mdc-text-field-label-color(rgba(blue, .5));
+  @include mdc-text-field-label-ink-color(rgba(blue, .5));
   @include mdc-text-field-textarea-stroke-color($idle-border);
 
   &.mdc-text-field--focused {
-    @include mdc-text-field-label-color(rgba(blue, .87));
+    @include mdc-text-field-label-ink-color(rgba(blue, .87));
     @include mdc-text-field-textarea-stroke-color($focused-border);
   }
 }
 
 .demo-textarea.mdc-text-field--invalid {
   @include mdc-text-field-ink-color(orange);
-  @include mdc-text-field-label-color(rgba(orange, .5));
+  @include mdc-text-field-label-ink-color(rgba(orange, .5));
   @include mdc-text-field-textarea-stroke-color(rgba(orange, .38));
 
   &.mdc-text-field--focused {
-    @include mdc-text-field-label-color(rgba(orange, .87));
+    @include mdc-text-field-label-ink-color(rgba(orange, .87));
     @include mdc-text-field-textarea-stroke-color(orange);
   }
 }
@@ -71,22 +71,22 @@
 .demo-fullwidth-input:not(.mdc-text-field--invalid) {
   @include mdc-text-field-fullwidth-bottom-line-color(rgba(blue, .38));
   @include mdc-text-field-ink-color(black);
-  @include mdc-text-field-label-color(rgba(blue, .5));
+  @include mdc-text-field-label-ink-color(rgba(blue, .5));
   @include mdc-text-field-line-ripple-color(blue);
 
   &.mdc-text-field--focused {
-    @include mdc-text-field-label-color(rgba(blue, .87));
+    @include mdc-text-field-label-ink-color(rgba(blue, .87));
   }
 }
 
 .demo-fullwidth-input.mdc-text-field--invalid {
   @include mdc-text-field-fullwidth-bottom-line-color(rgba(orange, .38));
   @include mdc-text-field-ink-color(orange);
-  @include mdc-text-field-label-color(rgba(orange, .5));
+  @include mdc-text-field-label-ink-color(rgba(orange, .5));
   @include mdc-text-field-line-ripple-color(orange);
 
   &.mdc-text-field--focused {
-    @include mdc-text-field-label-color(rgba(orange, .87));
+    @include mdc-text-field-label-ink-color(rgba(orange, .87));
     @include mdc-text-field-fullwidth-bottom-line-color(orange);
   }
 }
@@ -100,7 +100,7 @@
   @include mdc-text-field-hover-bottom-line-color($hover-border);
   @include mdc-text-field-line-ripple-color($focused-border);
   @include mdc-text-field-ink-color(orange);
-  @include mdc-text-field-label-color(rgba(orange, .87));
+  @include mdc-text-field-label-ink-color(rgba(orange, .87));
   @include mdc-text-field-outline-color($idle-border);
   @include mdc-text-field-hover-outline-color($hover-border);
   @include mdc-text-field-focused-outline-color($focused-border);
diff --git a/demos/theme/theme-dark.scss b/demos/theme/theme-dark.scss
index 804234fae1d..b8dcee1bc22 100644
--- a/demos/theme/theme-dark.scss
+++ b/demos/theme/theme-dark.scss
@@ -38,7 +38,7 @@ $mdc-theme-background: $material-color-grey-900;
 
 .demo-text-field {
   @include mdc-text-field-ink-color(text-primary-on-dark);
-  @include mdc-text-field-label-color(text-secondary-on-dark);
+  @include mdc-text-field-label-ink-color(text-secondary-on-dark);
   @include mdc-text-field-line-ripple-color(text-hint-on-dark);
 }
 
diff --git a/packages/mdc-floating-label/README.md b/packages/mdc-floating-label/README.md
index c7933359822..90821f09c57 100644
--- a/packages/mdc-floating-label/README.md
+++ b/packages/mdc-floating-label/README.md
@@ -92,6 +92,3 @@ Method Signature | Description
 `shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.*
 `float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.
 `getWidth() => number` | Returns the width of the label element.
-
-\* **N.B.:** Multiple consecutive calls to `shake(true)` will only shake the label once.
-To shake the label a second time, you must first call `shake(false)` to reset its state.
diff --git a/packages/mdc-floating-label/_mixins.scss b/packages/mdc-floating-label/_mixins.scss
index 281efff3d6b..41f1dc1c9b0 100644
--- a/packages/mdc-floating-label/_mixins.scss
+++ b/packages/mdc-floating-label/_mixins.scss
@@ -16,7 +16,7 @@
 
 @import "./variables";
 
-@mixin mdc-floating-label-color($color) {
+@mixin mdc-floating-label-ink-color($color) {
   @include mdc-theme-prop(color, $color);
 }
 
@@ -43,12 +43,10 @@
 }
 
 @mixin mdc-floating-label-float-position($positionY, $positionX: 0%, $scale: .75) {
-  @if $positionX == 0 {
-    .mdc-floating-label--float-above {
+  .mdc-floating-label--float-above {
+    @if $positionX == 0 {
       transform: translateY(-1 * $positionY) scale($scale);
-    }
-  } @else {
-    .mdc-floating-label--float-above {
+    } @else {
       transform: translateY(-1 * $positionY) translateX(-1 * $positionX) scale($scale);
 
       @include mdc-rtl {
@@ -66,7 +64,5 @@
 
 // Used for textarea in case of scrolling
 @mixin mdc-floating-label-fill-color($color) {
-  .mdc-floating-label {
-    @include mdc-theme-prop(background-color, $color);
-  }
+  @include mdc-theme-prop(background-color, $color);
 }
diff --git a/packages/mdc-floating-label/foundation.js b/packages/mdc-floating-label/foundation.js
index 5b11e52f3d0..330d4a14d3b 100644
--- a/packages/mdc-floating-label/foundation.js
+++ b/packages/mdc-floating-label/foundation.js
@@ -19,7 +19,6 @@ import MDCFoundation from '@material/base/foundation';
 import MDCFloatingLabelAdapter from './adapter';
 import {cssClasses} from './constants';
 
-
 /**
  * @extends {MDCFoundation<!MDCFloatingLabelAdapter>}
  * @final
diff --git a/packages/mdc-floating-label/index.js b/packages/mdc-floating-label/index.js
index 7a97cb4c925..2d4fbadbcd9 100644
--- a/packages/mdc-floating-label/index.js
+++ b/packages/mdc-floating-label/index.js
@@ -16,7 +16,6 @@
  */
 
 import MDCComponent from '@material/base/component';
-
 import MDCFloatingLabelAdapter from './adapter';
 import MDCFloatingLabelFoundation from './foundation';
 
diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
index b5beb3de567..749e832f4d4 100644
--- a/packages/mdc-textfield/README.md
+++ b/packages/mdc-textfield/README.md
@@ -174,22 +174,18 @@ apply these mixins with CSS selectors such as `.foo-text-field.mdc-text-field--i
 
 Mixin | Description
 --- | ---
-`mdc-text-field-box-corner-radius($radius)` | Customizes the border radius for a box text field
-`mdc-text-field-textarea-corner-radius($radius)` | Customizes the border radius for a `<textarea>` text field
+`mdc-text-field-box-corner-radius($radius)` | Customizes the border radius for the text-field box variant.
+`mdc-text-field-textarea-corner-radius($radius)` | Customizes the border radius for a `<textarea>` variant.
+`mdc-text-field-outlined-corner-radius($radius)` | Sets the border radius of of the text-field outline variant.
 `mdc-text-field-ink-color($color)` | Customizes the text entered into the text-field.
 `mdc-text-field-line-ripple-color($color)` | Customizes the color of the default line ripple of the text-field.
-`mdc-text-field-hover-line-ripple-color($color)` | Customizes the hover color of the line ripple of the text-field.
-`mdc-text-field-focused-line-ripple-color($color)` | Customizes the line-ripple ripple color when the text-field is focused.
-`mdc-text-field-outline-color($color)` | Customizes the color of the border of the outlined text-field.
-`mdc-text-field-hover-outline-color($color)` | Customizes the hover color of the border of the outlined text-field.
-`mdc-text-field-focused-outline-color($color)` | Customizes the outlined border color when the text-field is focused.
 `mdc-text-field-box-fill-color($color)` | Customizes the background color of the text-field box.
 `mdc-text-field-textarea-stroke-color($color)` | Customizes the color of the border of the textarea.
 `mdc-text-field-textarea-fill-color($color)` | Customizes the color of the background of the textarea.
-`mdc-text-field-fullwidth-line-ripple-color($color)` | Customizes the line ripple under a fullwidth text field. Doesn't apply to a textarea.
-`mdc-text-field-icon-color($color)` | Customizes the color for the leading/trailing icons.
-`mdc-text-field-helper-text-color($color)` | Customizes the color of the helper text following a text-field.
-`mdc-text-field-helper-text-validation-color($color)` | Customizes the color of the helper text when it's used as a validation message.
+`mdc-text-field-label-ink-color($color)` | Customizes the text color of the label.
+`mdc-text-field-fullwidth-bottom-line-color($color)` | Customizes the fullwidth text-field variant bottom line color.
+`mdc-text-field-bottom-line-color($color)` | Customizes the text-field bottom line color except the outline and textarea variants.
+`mdc-text-field-hover-bottom-line-color($color)` | Customizes the hover text-field bottom line color except the outline and textarea variants.
 
 ### `MDCTextField`
 
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 07763fe2393..cd8796dad02 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -73,7 +73,9 @@
     @include mdc-text-field-textarea-fill-color_($color);
     // Automatically add label background color the same color as well to ensure
     // the label can be seen if the input scrolls behind the label
-    @include mdc-floating-label-fill-color($color);
+    .mdc-floating-label {
+      @include mdc-floating-label-fill-color($color);
+    }
   }
 }
 
@@ -101,9 +103,9 @@
   }
 }
 
-@mixin mdc-text-field-label-color($color) {
+@mixin mdc-text-field-label-ink-color($color) {
   &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-label-color_($color);
+    @include mdc-text-field-label-ink-color_($color);
   }
 }
 
@@ -114,7 +116,7 @@
 @mixin mdc-text-field-disabled_ {
   @include mdc-text-field-bottom-line-color_($mdc-text-field-disabled-border);
   @include mdc-text-field-ink-color_(text-disabled-on-background);
-  @include mdc-text-field-label-color_(text-disabled-on-background);
+  @include mdc-text-field-label-ink-color_(text-disabled-on-background);
   @include mdc-text-field-helper-text-color_(text-disabled-on-background);
   @include mdc-text-field-icon-color_($mdc-text-field-disabled-icon);
   @include mdc-text-field-fullwidth-bottom-line-color_($mdc-text-field-divider);
@@ -134,7 +136,7 @@
   @include mdc-text-field-bottom-line-color($mdc-text-field-error);
   @include mdc-text-field-hover-bottom-line-color($mdc-text-field-error);
   @include mdc-text-field-line-ripple-color($mdc-text-field-error);
-  @include mdc-text-field-label-color($mdc-text-field-error);
+  @include mdc-text-field-label-ink-color($mdc-text-field-error);
   @include mdc-text-field-helper-text-validation-color($mdc-text-field-error);
 
   + .mdc-text-field-helper-text--validation-msg {
@@ -143,7 +145,7 @@
 }
 
 @mixin mdc-text-field-focused_ {
-  @include mdc-text-field-label-color(primary);
+  @include mdc-text-field-label-ink-color(primary);
 
   @include mdc-required-text-field-label-asterisk_ {
     color: $mdc-text-field-error;
@@ -301,7 +303,7 @@
 @mixin mdc-text-field-box-disabled_ {
   @include mdc-text-field-box-fill-color_($mdc-text-field-box-disabled-background);
   @include mdc-text-field-bottom-line-color_($mdc-text-field-outlined-disabled-border);
-  @include mdc-text-field-label-color(text-hint-on-background);
+  @include mdc-text-field-label-ink-color(text-hint-on-background);
 
   border-bottom: none;
 }
@@ -379,7 +381,6 @@
 // Textarea
 
 @mixin mdc-text-field-textarea-disabled_ {
-  @include mdc-floating-label-fill-color($mdc-textarea-disabled-background);
   @include mdc-text-field-textarea-stroke-color_($mdc-text-field-disabled-border);
   @include mdc-text-field-textarea-fill-color_($mdc-textarea-disabled-background);
 
@@ -388,6 +389,10 @@
   .mdc-text-field__input {
     border: 1px solid transparent;
   }
+
+  .mdc-floating-label {
+    @include mdc-floating-label-fill-color($mdc-textarea-disabled-background);
+  }
 }
 
 @mixin mdc-text-field-textarea-invalid_ {
@@ -396,7 +401,6 @@
 
 @mixin mdc-text-field-textarea_ {
   @include mdc-text-field-textarea-corner-radius($mdc-text-field-border-radius);
-  @include mdc-floating-label-fill-color($mdc-textarea-background);
   @include mdc-text-field-textarea-stroke-color($mdc-textarea-border);
 
   // Translate above the top of the input, and compensate for the amount of offset needed
@@ -424,6 +428,7 @@
 
   .mdc-floating-label {
     @include mdc-rtl-reflexive-position(left, 1px);
+    @include mdc-floating-label-fill-color($mdc-textarea-background);
 
     top: $label-offset-y;
     bottom: auto;
@@ -482,12 +487,13 @@
   }
 }
 
-@mixin mdc-text-field-label-color_($color) {
+@mixin mdc-text-field-label-ink-color_($color) {
   .mdc-floating-label {
-    @include mdc-floating-label-color($color);
+    @include mdc-floating-label-ink-color($color);
   }
 
-  .mdc-text-field__input::placeholder { // placeholder used in place of label on css only version
+  // CSS-only version
+  .mdc-text-field__input::placeholder {
     @include mdc-theme-prop(color, $color);
   }
 }
diff --git a/packages/mdc-textfield/_variables.scss b/packages/mdc-textfield/_variables.scss
index cd456a1dc14..c179091c9c5 100644
--- a/packages/mdc-textfield/_variables.scss
+++ b/packages/mdc-textfield/_variables.scss
@@ -47,5 +47,5 @@ $mdc-text-field-outlined-dense-label-position-y: 145%;
 $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%;
-// Note that the scale factor is an eyeball'd approximation of what's shown in the mocks.
+// Note that the scale factor is an eyeballed approximation of what's shown in the mocks.
 $mdc-text-field-textarea-label-scale: .923;
diff --git a/packages/mdc-textfield/helper-text/README.md b/packages/mdc-textfield/helper-text/README.md
index ec4f9565a49..4c65241d2bb 100644
--- a/packages/mdc-textfield/helper-text/README.md
+++ b/packages/mdc-textfield/helper-text/README.md
@@ -73,6 +73,14 @@ CSS Class | Description
 `mdc-text-field-helper-text--persistent` | Makes the helper text permanently visible
 `mdc-text-field-helper-text--validation-msg` | Indicates the helper text is a validation message
 
+
+### Sass Mixins
+
+Mixin | Description
+--- | ---
+`mdc-text-field-helper-text-color($color)` | Customizes the color of the helper text following a text-field.
+`mdc-text-field-helper-text-validation-color($color)` | Customizes the color of the helper text when it's used as a validation message.
+
 ### `MDCTextFieldHelperText`
 
 ##### `MDCTextFieldHelperText.foundation`
diff --git a/packages/mdc-textfield/icon/README.md b/packages/mdc-textfield/icon/README.md
index 77d8f6f0841..0ee225c04c1 100644
--- a/packages/mdc-textfield/icon/README.md
+++ b/packages/mdc-textfield/icon/README.md
@@ -89,6 +89,12 @@ In outlined text field:
 and the css will ensure the cursor is set to default, and that actioning on an icon doesn't
 do anything unexpected.
 
+### Sass Mixins
+
+Mixin | Description
+--- | ---
+`mdc-text-field-icon-color($color)` | Customizes the color for the leading/trailing icons.
+
 ### `MDCTextFieldIcon`
 
 ##### `MDCTextFieldIcon.foundation`
@@ -109,4 +115,4 @@ Method Signature | Description
 Method Signature | Description
 --- | ---
 `setDisabled(disabled: boolean) => void` | Updates the icon's disabled state
-`handleInteraction(evt: Event) => void` | Handles a text field interaction event
\ No newline at end of file
+`handleInteraction(evt: Event) => void` | Handles a text field interaction event
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index 23fcb72ccfb..f048b6157b8 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -37,7 +37,7 @@
   @include mdc-text-field-hover-bottom-line-color($mdc-text-field-underline-hover);
   @include mdc-text-field-line-ripple-color_(primary);
   @include mdc-text-field-ink-color(text-primary-on-background);
-  @include mdc-text-field-label-color($mdc-text-field-label);
+  @include mdc-text-field-label-ink-color($mdc-text-field-label);
   @include mdc-text-field-helper-text-color(text-hint-on-background);
   @include mdc-text-field-fullwidth-bottom-line-color($mdc-text-field-divider);
   @include mdc-text-field-icon-color($mdc-text-field-underline-hover);
diff --git a/packages/mdc-textfield/outline/README.md b/packages/mdc-textfield/outline/README.md
index f62de540985..17e6fbf0036 100644
--- a/packages/mdc-textfield/outline/README.md
+++ b/packages/mdc-textfield/outline/README.md
@@ -55,6 +55,14 @@ CSS Class | Description
 `mdc-text-field__outline-path` | Mandatory. The SVG path in the outline when the label is floating above the input.
 `mdc-text-field__idle-outline` | Mandatory. The outline when the label is resting in the input position.
 
+### Sass Mixins
+
+Mixin | Description
+--- | ---
+`mdc-text-field-outline-color($color)` | Customizes the color of the border of the outlined text-field.
+`mdc-text-field-hover-outline-color($color)` | Customizes the hover color of the border of the outlined text-field.
+`mdc-text-field-focused-outline-color($color)` | Customizes the outlined border color when the text-field is focused.
+
 #### `MDCTextFieldOutline`
 
 ##### `MDCTextFieldOutline.foundation`

From 957fa3cbdf360b50b75af928df3406d3e00e92af Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Wed, 28 Feb 2018 12:41:07 -0500
Subject: [PATCH 33/47] fix(text-field): reverted sass mixin name change to
 ...-label-ink-color

---
 demos/text-field.scss                      | 22 +++++++++++-----------
 demos/theme/theme-dark.scss                |  2 +-
 packages/mdc-textfield/README.md           | 16 ++++++++--------
 packages/mdc-textfield/_mixins.scss        |  8 ++++----
 packages/mdc-textfield/mdc-text-field.scss |  2 +-
 5 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/demos/text-field.scss b/demos/text-field.scss
index b81b02f4105..b5c4ab1d9e4 100644
--- a/demos/text-field.scss
+++ b/demos/text-field.scss
@@ -28,7 +28,7 @@
   @include mdc-text-field-hover-bottom-line-color($hover-border);
   @include mdc-text-field-line-ripple-color($focused-border);
   @include mdc-text-field-ink-color(black);
-  @include mdc-text-field-label-ink-color(rgba(blue, .5));
+  @include mdc-text-field-label-color(rgba(blue, .5));
   @include mdc-text-field-outline-color($idle-border);
   @include mdc-text-field-hover-outline-color($hover-border);
   @include mdc-text-field-focused-outline-color($focused-border);
@@ -37,7 +37,7 @@
   @include mdc-text-field-icon-color($hover-border);
 
   &.mdc-text-field--focused {
-    @include mdc-text-field-label-ink-color(rgba(blue, .87));
+    @include mdc-text-field-label-color(rgba(blue, .87));
     @include mdc-text-field-icon-color($focused-border);
   }
 }
@@ -48,22 +48,22 @@
   $focused-border: rgba(blue, 1);
 
   @include mdc-text-field-ink-color(black);
-  @include mdc-text-field-label-ink-color(rgba(blue, .5));
+  @include mdc-text-field-label-color(rgba(blue, .5));
   @include mdc-text-field-textarea-stroke-color($idle-border);
 
   &.mdc-text-field--focused {
-    @include mdc-text-field-label-ink-color(rgba(blue, .87));
+    @include mdc-text-field-label-color(rgba(blue, .87));
     @include mdc-text-field-textarea-stroke-color($focused-border);
   }
 }
 
 .demo-textarea.mdc-text-field--invalid {
   @include mdc-text-field-ink-color(orange);
-  @include mdc-text-field-label-ink-color(rgba(orange, .5));
+  @include mdc-text-field-label-color(rgba(orange, .5));
   @include mdc-text-field-textarea-stroke-color(rgba(orange, .38));
 
   &.mdc-text-field--focused {
-    @include mdc-text-field-label-ink-color(rgba(orange, .87));
+    @include mdc-text-field-label-color(rgba(orange, .87));
     @include mdc-text-field-textarea-stroke-color(orange);
   }
 }
@@ -71,22 +71,22 @@
 .demo-fullwidth-input:not(.mdc-text-field--invalid) {
   @include mdc-text-field-fullwidth-bottom-line-color(rgba(blue, .38));
   @include mdc-text-field-ink-color(black);
-  @include mdc-text-field-label-ink-color(rgba(blue, .5));
+  @include mdc-text-field-label-color(rgba(blue, .5));
   @include mdc-text-field-line-ripple-color(blue);
 
   &.mdc-text-field--focused {
-    @include mdc-text-field-label-ink-color(rgba(blue, .87));
+    @include mdc-text-field-label-color(rgba(blue, .87));
   }
 }
 
 .demo-fullwidth-input.mdc-text-field--invalid {
   @include mdc-text-field-fullwidth-bottom-line-color(rgba(orange, .38));
   @include mdc-text-field-ink-color(orange);
-  @include mdc-text-field-label-ink-color(rgba(orange, .5));
+  @include mdc-text-field-label-color(rgba(orange, .5));
   @include mdc-text-field-line-ripple-color(orange);
 
   &.mdc-text-field--focused {
-    @include mdc-text-field-label-ink-color(rgba(orange, .87));
+    @include mdc-text-field-label-color(rgba(orange, .87));
     @include mdc-text-field-fullwidth-bottom-line-color(orange);
   }
 }
@@ -100,7 +100,7 @@
   @include mdc-text-field-hover-bottom-line-color($hover-border);
   @include mdc-text-field-line-ripple-color($focused-border);
   @include mdc-text-field-ink-color(orange);
-  @include mdc-text-field-label-ink-color(rgba(orange, .87));
+  @include mdc-text-field-label-color(rgba(orange, .87));
   @include mdc-text-field-outline-color($idle-border);
   @include mdc-text-field-hover-outline-color($hover-border);
   @include mdc-text-field-focused-outline-color($focused-border);
diff --git a/demos/theme/theme-dark.scss b/demos/theme/theme-dark.scss
index b8dcee1bc22..804234fae1d 100644
--- a/demos/theme/theme-dark.scss
+++ b/demos/theme/theme-dark.scss
@@ -38,7 +38,7 @@ $mdc-theme-background: $material-color-grey-900;
 
 .demo-text-field {
   @include mdc-text-field-ink-color(text-primary-on-dark);
-  @include mdc-text-field-label-ink-color(text-secondary-on-dark);
+  @include mdc-text-field-label-color(text-secondary-on-dark);
   @include mdc-text-field-line-ripple-color(text-hint-on-dark);
 }
 
diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
index 749e832f4d4..773d8f4bb76 100644
--- a/packages/mdc-textfield/README.md
+++ b/packages/mdc-textfield/README.md
@@ -174,18 +174,18 @@ apply these mixins with CSS selectors such as `.foo-text-field.mdc-text-field--i
 
 Mixin | Description
 --- | ---
+`mdc-text-field-bottom-line-color($color)` | Customizes the text-field bottom line color except the outline and textarea variants.
 `mdc-text-field-box-corner-radius($radius)` | Customizes the border radius for the text-field box variant.
-`mdc-text-field-textarea-corner-radius($radius)` | Customizes the border radius for a `<textarea>` variant.
-`mdc-text-field-outlined-corner-radius($radius)` | Sets the border radius of of the text-field outline variant.
-`mdc-text-field-ink-color($color)` | Customizes the text entered into the text-field.
-`mdc-text-field-line-ripple-color($color)` | Customizes the color of the default line ripple of the text-field.
 `mdc-text-field-box-fill-color($color)` | Customizes the background color of the text-field box.
-`mdc-text-field-textarea-stroke-color($color)` | Customizes the color of the border of the textarea.
-`mdc-text-field-textarea-fill-color($color)` | Customizes the color of the background of the textarea.
-`mdc-text-field-label-ink-color($color)` | Customizes the text color of the label.
 `mdc-text-field-fullwidth-bottom-line-color($color)` | Customizes the fullwidth text-field variant bottom line color.
-`mdc-text-field-bottom-line-color($color)` | Customizes the text-field bottom line color except the outline and textarea variants.
 `mdc-text-field-hover-bottom-line-color($color)` | Customizes the hover text-field bottom line color except the outline and textarea variants.
+`mdc-text-field-ink-color($color)` | Customizes the text entered into the text-field.
+`mdc-text-field-label-color($color)` | Customizes the text color of the label.
+`mdc-text-field-line-ripple-color($color)` | Customizes the color of the default line ripple of the text-field.
+`mdc-text-field-outlined-corner-radius($radius)` | Sets the border radius of of the text-field outline variant.
+`mdc-text-field-textarea-corner-radius($radius)` | Customizes the border radius for a `<textarea>` variant.
+`mdc-text-field-textarea-fill-color($color)` | Customizes the color of the background of the textarea.
+`mdc-text-field-textarea-stroke-color($color)` | Customizes the color of the border of the textarea.
 
 ### `MDCTextField`
 
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index cd8796dad02..4559a7e2d8d 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -103,7 +103,7 @@
   }
 }
 
-@mixin mdc-text-field-label-ink-color($color) {
+@mixin mdc-text-field-label-color($color) {
   &:not(.mdc-text-field--disabled) {
     @include mdc-text-field-label-ink-color_($color);
   }
@@ -136,7 +136,7 @@
   @include mdc-text-field-bottom-line-color($mdc-text-field-error);
   @include mdc-text-field-hover-bottom-line-color($mdc-text-field-error);
   @include mdc-text-field-line-ripple-color($mdc-text-field-error);
-  @include mdc-text-field-label-ink-color($mdc-text-field-error);
+  @include mdc-text-field-label-color($mdc-text-field-error);
   @include mdc-text-field-helper-text-validation-color($mdc-text-field-error);
 
   + .mdc-text-field-helper-text--validation-msg {
@@ -145,7 +145,7 @@
 }
 
 @mixin mdc-text-field-focused_ {
-  @include mdc-text-field-label-ink-color(primary);
+  @include mdc-text-field-label-color(primary);
 
   @include mdc-required-text-field-label-asterisk_ {
     color: $mdc-text-field-error;
@@ -303,7 +303,7 @@
 @mixin mdc-text-field-box-disabled_ {
   @include mdc-text-field-box-fill-color_($mdc-text-field-box-disabled-background);
   @include mdc-text-field-bottom-line-color_($mdc-text-field-outlined-disabled-border);
-  @include mdc-text-field-label-ink-color(text-hint-on-background);
+  @include mdc-text-field-label-color(text-hint-on-background);
 
   border-bottom: none;
 }
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index f048b6157b8..23fcb72ccfb 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -37,7 +37,7 @@
   @include mdc-text-field-hover-bottom-line-color($mdc-text-field-underline-hover);
   @include mdc-text-field-line-ripple-color_(primary);
   @include mdc-text-field-ink-color(text-primary-on-background);
-  @include mdc-text-field-label-ink-color($mdc-text-field-label);
+  @include mdc-text-field-label-color($mdc-text-field-label);
   @include mdc-text-field-helper-text-color(text-hint-on-background);
   @include mdc-text-field-fullwidth-bottom-line-color($mdc-text-field-divider);
   @include mdc-text-field-icon-color($mdc-text-field-underline-hover);

From cf75c3bad3ac263dec393245736b47e12f14d497 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Wed, 28 Feb 2018 14:33:04 -0500
Subject: [PATCH 34/47] fix(text-field): renamed shake animation names and
 updated readme

---
 packages/mdc-floating-label/README.md      |  2 +-
 packages/mdc-floating-label/_mixins.scss   | 10 +++++-----
 packages/mdc-floating-label/package.json   |  2 +-
 packages/mdc-textfield/_mixins.scss        | 13 +++++++------
 packages/mdc-textfield/mdc-text-field.scss | 12 ++++++------
 5 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/packages/mdc-floating-label/README.md b/packages/mdc-floating-label/README.md
index 90821f09c57..8626044ac2d 100644
--- a/packages/mdc-floating-label/README.md
+++ b/packages/mdc-floating-label/README.md
@@ -89,6 +89,6 @@ Method Signature | Description
 
 Method Signature | Description
 --- | ---
-`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.*
+`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.
 `float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.
 `getWidth() => number` | Returns the width of the label element.
diff --git a/packages/mdc-floating-label/_mixins.scss b/packages/mdc-floating-label/_mixins.scss
index 41f1dc1c9b0..7a89664e2c9 100644
--- a/packages/mdc-floating-label/_mixins.scss
+++ b/packages/mdc-floating-label/_mixins.scss
@@ -20,6 +20,11 @@
   @include mdc-theme-prop(color, $color);
 }
 
+// Used for textarea in case of scrolling
+@mixin mdc-floating-label-fill-color($color) {
+  @include mdc-theme-prop(background-color, $color);
+}
+
 @mixin mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX: 0%, $scale: .75) {
   @keyframes mdc-floating-label-shake-float-above-#{$modifier} {
     0% {
@@ -61,8 +66,3 @@
     animation: mdc-floating-label-shake-float-above-#{$modifier} 250ms 1;
   }
 }
-
-// Used for textarea in case of scrolling
-@mixin mdc-floating-label-fill-color($color) {
-  @include mdc-theme-prop(background-color, $color);
-}
diff --git a/packages/mdc-floating-label/package.json b/packages/mdc-floating-label/package.json
index 3e3a8ba7692..7ab8b72eebc 100644
--- a/packages/mdc-floating-label/package.json
+++ b/packages/mdc-floating-label/package.json
@@ -7,7 +7,7 @@
     "material components",
     "material design",
     "floatinglabel",
-    "floating-label"
+    "floating label"
   ],
   "main": "index.js",
   "repository": {
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 4559a7e2d8d..941409e7e8a 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -71,6 +71,7 @@
 @mixin mdc-text-field-textarea-fill-color($color) {
   &:not(.mdc-text-field--disabled) {
     @include mdc-text-field-textarea-fill-color_($color);
+
     // Automatically add label background color the same color as well to ensure
     // the label can be seen if the input scrolls behind the label
     .mdc-floating-label {
@@ -201,7 +202,7 @@
 
 @mixin mdc-text-field-outlined-dense_ {
   @include mdc-floating-label-float-position($mdc-text-field-outlined-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
-  @include mdc-floating-label-shake-animation(outlined-dense);
+  @include mdc-floating-label-shake-animation(text-field-outlined-dense);
 
   height: 48px;
 
@@ -223,7 +224,7 @@
   @include mdc-text-field-hover-outline-color($mdc-text-field-outlined-hover-border);
   @include mdc-text-field-focused-outline-color(primary);
   @include mdc-floating-label-float-position($mdc-text-field-outlined-label-position-y);
-  @include mdc-floating-label-shake-animation(outlined);
+  @include mdc-floating-label-shake-animation(text-field-outlined);
 
   height: 56px;
   border: none;
@@ -269,7 +270,7 @@
   @include mdc-text-field-box-corner-radius($mdc-text-field-border-radius);
   @include mdc-text-field-box-fill-color($mdc-text-field-box-background);
   @include mdc-floating-label-float-position($mdc-text-field-box-label-position-y);
-  @include mdc-floating-label-shake-animation(box);
+  @include mdc-floating-label-shake-animation(text-field-box);
 
   display: inline-flex;
   position: relative;
@@ -310,7 +311,7 @@
 
 @mixin mdc-text-field-box-dense_ {
   @include mdc-floating-label-float-position($mdc-text-field-box-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
-  @include mdc-floating-label-shake-animation(box-dense);
+  @include mdc-floating-label-shake-animation(text-field-box-dense);
 
   .mdc-text-field__input {
     padding: 12px 12px 0;
@@ -329,12 +330,12 @@
 
 @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(outlined-leading-icon);
+  @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon);
 }
 
 @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(outlined-leading-icon-dense);
+  @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon-dense);
 }
 
 @mixin mdc-text-field-with-trailing-icon_ {
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index 23fcb72ccfb..b1ba211941f 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -256,10 +256,10 @@
   opacity: 1;
 }
 
-@include mdc-floating-label-shake-keyframes(box, $mdc-text-field-box-label-position-y);
-@include mdc-floating-label-shake-keyframes(box-dense, $mdc-text-field-box-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
-@include mdc-floating-label-shake-keyframes(outlined, $mdc-text-field-outlined-label-position-y);
-@include mdc-floating-label-shake-keyframes(outlined-dense, $mdc-text-field-outlined-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
-@include mdc-floating-label-shake-keyframes(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(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-box, $mdc-text-field-box-label-position-y);
+@include mdc-floating-label-shake-keyframes(text-field-box-dense, $mdc-text-field-box-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
+@include mdc-floating-label-shake-keyframes(text-field-outlined, $mdc-text-field-outlined-label-position-y);
+@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(textarea, $mdc-text-field-textarea-label-position-y, 0%, $mdc-text-field-textarea-label-scale);

From f77280082a9cde1b8ccdfbf7f7a61ba718381314 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Wed, 28 Feb 2018 16:14:17 -0500
Subject: [PATCH 35/47] fix(notched-outline): some readme and comment edits

---
 demos/text-field.html                         |  2 +-
 packages/mdc-notched-outline/README.md        |  8 +++----
 packages/mdc-notched-outline/_mixins.scss     |  8 +++++--
 packages/mdc-notched-outline/foundation.js    |  4 ++--
 packages/mdc-notched-outline/index.js         | 10 ++++-----
 .../mdc-notched-outline.scss                  | 22 +++++++++----------
 packages/mdc-notched-outline/package.json     |  2 +-
 packages/mdc-textfield/README.md              |  4 +++-
 packages/mdc-textfield/_mixins.scss           | 13 +++++------
 packages/mdc-textfield/foundation.js          |  1 +
 packages/mdc-textfield/icon/README.md         | 12 +++++-----
 packages/mdc-textfield/index.js               |  8 +++----
 12 files changed, 49 insertions(+), 45 deletions(-)

diff --git a/demos/text-field.html b/demos/text-field.html
index 0757c5cb1fd..d93f1b1e018 100644
--- a/demos/text-field.html
+++ b/demos/text-field.html
@@ -244,7 +244,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
                 <path class="mdc-notched-outline__path"/>
               </svg>
             </div>
-            <div class="mdc-notched-outline"></div>
+            <div class="mdc-notched-outline__idle"></div>
           </div>
         </div>
         <div id="demo-tf-outlined-trailing-wrapper">
diff --git a/packages/mdc-notched-outline/README.md b/packages/mdc-notched-outline/README.md
index b574aac8efe..bafb4da672c 100644
--- a/packages/mdc-notched-outline/README.md
+++ b/packages/mdc-notched-outline/README.md
@@ -9,7 +9,7 @@ path: /catalog/input-controls/notched-outline
 
 # Notched Outline
 
-The outline is a border around all sides of the text field or select. This is used for the Outlined variation of Text Fields and Select.
+The outline is a border around all sides of either a text field or select component. This is used for the Outlined variant of either a Text Field or Select.
 
 ## Design & API Documentation
 
@@ -59,11 +59,11 @@ CSS Class | Description
 
 Mixin | Description
 --- | ---
-`mdc-text-field-outline-color($color)` | Customizes the color of the border of the outlined text-field.
-`mdc-text-field-hover-outline-color($color)` | Customizes the hover color of the border of the outlined text-field.
-`mdc-text-field-focused-outline-color($color)` | Customizes the outlined border color when the text-field is focused.
+`mdc-notched-outline-color($color)` | Customizes the border color of the idle outline.
+`mdc-notched-outline-path-color($color)` | Customizes the border color of the notched outlined.
 
 ### `MDCNotchedOutline`
+
 Method Signature | Description
 --- | ---
 `updateSvgPath(notchWidth: number, isRtl: boolean) => void` | Updates the SVG of the outline element with a notch calculated based off of the notchWidth. The notch will appear left justified, unless isRtl is true.
diff --git a/packages/mdc-notched-outline/_mixins.scss b/packages/mdc-notched-outline/_mixins.scss
index 8f5f9fac8fb..af090debe9b 100644
--- a/packages/mdc-notched-outline/_mixins.scss
+++ b/packages/mdc-notched-outline/_mixins.scss
@@ -17,9 +17,13 @@
 @import "@material/theme/mixins";
 
 @mixin mdc-notched-outline-color($color) {
-  @include mdc-theme-prop(border-color, $color);
+  .mdc-notched-outline__idle {
+    @include mdc-theme-prop(border-color, $color);
+  }
 }
 
 @mixin mdc-notched-outline-path-color($color) {
-  @include mdc-theme-prop(stroke, $color);
+  .mdc-notched-outline__path {
+    @include mdc-theme-prop(stroke, $color);
+  }
 }
diff --git a/packages/mdc-notched-outline/foundation.js b/packages/mdc-notched-outline/foundation.js
index 71660181588..7eaa4e24933 100644
--- a/packages/mdc-notched-outline/foundation.js
+++ b/packages/mdc-notched-outline/foundation.js
@@ -51,8 +51,8 @@ class MDCNotchedOutlineFoundation extends MDCFoundation {
   }
 
   /**
-   * Updates the SVG path of the focus outline element based on the width
-   * of the notched element and the RTL context.
+   * Updates the SVG path of the focus outline element based on the notchWidth
+   * and the RTL context.
    * @param {number} notchWidth
    * @param {boolean=} isRtl
    */
diff --git a/packages/mdc-notched-outline/index.js b/packages/mdc-notched-outline/index.js
index 99957b07037..778ddd768a3 100644
--- a/packages/mdc-notched-outline/index.js
+++ b/packages/mdc-notched-outline/index.js
@@ -35,11 +35,11 @@ class MDCNotchedOutline extends MDCComponent {
   }
 
   /**
-    * Updates the SVG path of the focus outline element based on the width
-    * of the notched element and the RTL context.
-    * @param {number} notchWidth Width of the size of the notch in the outline.
-    * @param {boolean=} isRtl Determines if outline is rtl. If rtl is true, outline notch
-    * will be right justified, otherwise left justified.
+    * Updates the SVG path of the outline element based on the
+    * notch element width and the RTL context.
+    * @param {number} notchWidth The notch width in the outline.
+    * @param {boolean=} isRtl Determines if outline is rtl. If rtl is true, notch
+    * will be right justified in outline path, otherwise left justified.
     */
   updateSvgPath(notchWidth, isRtl) {
     this.foundation_.updateSvgPath(notchWidth, isRtl);
diff --git a/packages/mdc-notched-outline/mdc-notched-outline.scss b/packages/mdc-notched-outline/mdc-notched-outline.scss
index b90f962b0ec..b933ce347b6 100644
--- a/packages/mdc-notched-outline/mdc-notched-outline.scss
+++ b/packages/mdc-notched-outline/mdc-notched-outline.scss
@@ -19,17 +19,6 @@
 @import "@material/theme/mixins";
 @import "./mixins";
 
-.mdc-notched-outline__idle {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: calc(100% - 4px);
-  height: calc(100% - 4px);
-  transition: opacity 100ms ease;
-  border: 1px solid;
-  opacity: 1;
-}
-
 .mdc-notched-outline {
   @include mdc-ripple-surface;
   @include mdc-ripple-radius-bounded;
@@ -54,6 +43,17 @@
   // stylelint-enable selector-max-type
 }
 
+.mdc-notched-outline__idle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: calc(100% - 4px);
+  height: calc(100% - 4px);
+  transition: opacity 100ms ease;
+  border: 1px solid;
+  opacity: 1;
+}
+
 .mdc-notched-outline__path {
   stroke-width: 1px;
   transition:
diff --git a/packages/mdc-notched-outline/package.json b/packages/mdc-notched-outline/package.json
index 9de147861d8..41697ab4690 100644
--- a/packages/mdc-notched-outline/package.json
+++ b/packages/mdc-notched-outline/package.json
@@ -7,7 +7,7 @@
     "material components",
     "material design",
     "notchedoutline",
-    "notched-outline"
+    "notched outline"
   ],
   "main": "index.js",
   "repository": {
diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
index fef0cb4d9e8..5970fb44b09 100644
--- a/packages/mdc-textfield/README.md
+++ b/packages/mdc-textfield/README.md
@@ -177,8 +177,10 @@ Mixin | Description
 `mdc-text-field-bottom-line-color($color)` | Customizes the text-field bottom line color except the outline and textarea variants.
 `mdc-text-field-box-corner-radius($radius)` | Customizes the border radius for the text-field box variant.
 `mdc-text-field-box-fill-color($color)` | Customizes the background color of the text-field box.
+`mdc-text-field-focused-outline-color($color)` | Customizes the outlined border color when the text-field is focused.
 `mdc-text-field-fullwidth-bottom-line-color($color)` | Customizes the fullwidth text-field variant bottom line color.
 `mdc-text-field-hover-bottom-line-color($color)` | Customizes the hover text-field bottom line color except the outline and textarea variants.
+`mdc-text-field-hover-outline-color($color)` | Customizes the outlined border color when the text-field is hovered.
 `mdc-text-field-ink-color($color)` | Customizes the text entered into the text-field.
 `mdc-text-field-label-color($color)` | Customizes the text color of the label.
 `mdc-text-field-line-ripple-color($color)` | Customizes the color of the default line ripple of the text-field.
@@ -206,7 +208,7 @@ Method Signature | Description
 
 ##### `MDCTextField.ripple`
 
-`MDCRipple` instance. When given an `mdc-text-field--box` root element, this is set to the `MDCRipple` instance on the root element. When given an `mdc-text-field--outlined` root element, this is set to the `MDCRipple` instance on the `mdc-text-field__outline` element. Otherwise, the field is set to `null`.
+`MDCRipple` instance. When given an `mdc-text-field--box` root element, this is set to the `MDCRipple` instance on the root element. When given an `mdc-text-field--outlined` root element, this is set to the `MDCRipple` instance on the `mdc-notched-outline` element. Otherwise, the field is set to `null`.
 
 ### `MDCTextFieldAdapter`
 
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index ea3dbb78f53..9f8843adea1 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -205,7 +205,6 @@
 }
 
 @mixin mdc-text-field-outlined-invalid_ {
-  // Outline specific mixins
   @include mdc-text-field-outline-color($mdc-text-field-error);
   @include mdc-text-field-hover-outline-color($mdc-text-field-error);
   @include mdc-text-field-focused-outline-color($mdc-text-field-error);
@@ -282,24 +281,22 @@
 }
 
 @mixin mdc-text-field-hover-outline-color_($color) {
-  .mdc-text-field__input:hover ~ .mdc-notched-outline__idle,
-  .mdc-text-field__icon:hover ~ .mdc-notched-outline__idle {
+  .mdc-text-field__input:hover ~,
+  .mdc-text-field__icon:hover ~ {
     @include mdc-notched-outline-color($color);
   }
 }
 
 @mixin mdc-text-field-focused-outline-color_($color) {
-  &.mdc-text-field--focused .mdc-notched-outline__path {
+  &.mdc-text-field--focused {
     @include mdc-notched-outline-path-color($color);
   }
 }
 
 @mixin mdc-text-field-outline-color_($color) {
-  .mdc-notched-outline__idle {
-    @include mdc-notched-outline-color($color);
-  }
+  @include mdc-notched-outline-color($color);
 
-  &:not(.mdc-text-field--focused) .mdc-notched-outline__path {
+  &:not(.mdc-text-field--focused) {
     @include mdc-notched-outline-path-color($color);
   }
 }
diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index d3d205ba1c3..f8884d72493 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -22,6 +22,7 @@ import MDCLineRippleFoundation from '@material/line-ripple/foundation';
 import MDCTextFieldHelperTextFoundation from './helper-text/foundation';
 import MDCTextFieldIconFoundation from './icon/foundation';
 import MDCFloatingLabelFoundation from '@material/floating-label/foundation';
+import MDCNotchedOutlineFoundation from '@material/notched-outline/foundation';
 /* eslint-enable no-unused-vars */
 import {cssClasses, strings, numbers} from './constants';
 
diff --git a/packages/mdc-textfield/icon/README.md b/packages/mdc-textfield/icon/README.md
index 0ee225c04c1..c545703ce5d 100644
--- a/packages/mdc-textfield/icon/README.md
+++ b/packages/mdc-textfield/icon/README.md
@@ -49,12 +49,12 @@ In outlined text field:
   <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
   <input type="text" id="my-input" class="mdc-text-field__input">
   <label for="my-input" class="mdc-floating-label">Your Name</label>
-  <div class="mdc-text-field__outline">
+  <div class="mdc-notched-outline">
     <svg>
-      <path class="mdc-text-field__outline-path"/>
+      <path class="mdc-notched-outline__path"/>
     </svg>
   </div>
-  <div class="mdc-text-field__idle-outline"></div>
+  <div class="mdc-notched-outline__idle"></div>
 </div>
 ```
 
@@ -76,12 +76,12 @@ In outlined text field:
   <input type="text" id="my-input" class="mdc-text-field__input">
   <label for="my-input" class="mdc-floating-label">Your Name</label>
   <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
-  <div class="mdc-text-field__outline">
+  <div class="mdc-notched-outline">
     <svg>
-      <path class="mdc-text-field__outline-path"/>
+      <path class="mdc-notched-outline__path"/>
     </svg>
   </div>
-  <div class="mdc-text-field__idle-outline"></div>
+  <div class="mdc-notched-outline__idle"></div>
 </div>
 ```
 
diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
index dd0142310db..8daf9b25d70 100644
--- a/packages/mdc-textfield/index.js
+++ b/packages/mdc-textfield/index.js
@@ -266,17 +266,17 @@ class MDCTextField extends MDCComponent {
           }
         },
       },
-      this.getOutlineAdapterMethods_(),
       this.getLabelAdapterMethods_(),
+      this.getOutlineAdapterMethods_(),
       this.getInputAdapterMethods_())),
       this.getFoundationMap_());
   }
 
   /**
    * @return {!{
-   *   shakeLabel: function(string, function()): undefined,
-   *   floatLabel: function(string, function()): undefined,
-   *   hasLabel: function(): ?Element,
+   *   shakeLabel: function(boolean): undefined,
+   *   floatLabel: function(boolean): undefined,
+   *   hasLabel: function(): boolean,
    *   getLabelWidth: function(): number,
    * }}
    */

From a14f34a008867dc518abbd9faeacc22822f77deb Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Wed, 28 Feb 2018 17:29:18 -0500
Subject: [PATCH 36/47] fix(text-field): updated golden files to pass tests

---
 test/build/goldens/build-config-no-env.golden.json   | 4 ++++
 test/build/goldens/build-config-prod-env.golden.json | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/test/build/goldens/build-config-no-env.golden.json b/test/build/goldens/build-config-no-env.golden.json
index 2f6fa32c12b..76dfe198227 100644
--- a/test/build/goldens/build-config-no-env.golden.json
+++ b/test/build/goldens/build-config-no-env.golden.json
@@ -81,6 +81,9 @@
       "menu": [
         "/packages/mdc-menu/index.js"
       ],
+      "notchedOutline": [
+        "/packages/mdc-notched-outline/index.js"
+      ],
       "radio": [
         "/packages/mdc-radio/index.js"
       ],
@@ -234,6 +237,7 @@
       "mdc.linear-progress": "/packages/mdc-linear-progress/mdc-linear-progress.scss",
       "mdc.list": "/packages/mdc-list/mdc-list.scss",
       "mdc.menu": "/packages/mdc-menu/mdc-menu.scss",
+      "mdc.notched-outline": "/packages/mdc-notched-outline/mdc-notched-outline.scss",
       "mdc.radio": "/packages/mdc-radio/mdc-radio.scss",
       "mdc.ripple": "/packages/mdc-ripple/mdc-ripple.scss",
       "mdc.select": "/packages/mdc-select/mdc-select.scss",
diff --git a/test/build/goldens/build-config-prod-env.golden.json b/test/build/goldens/build-config-prod-env.golden.json
index b602f45c10e..12341936deb 100644
--- a/test/build/goldens/build-config-prod-env.golden.json
+++ b/test/build/goldens/build-config-prod-env.golden.json
@@ -81,6 +81,9 @@
       "menu": [
         "/packages/mdc-menu/index.js"
       ],
+      "notchedOutline": [
+        "/packages/mdc-notched-outline/index.js"
+      ],
       "radio": [
         "/packages/mdc-radio/index.js"
       ],
@@ -234,6 +237,7 @@
       "mdc.linear-progress": "/packages/mdc-linear-progress/mdc-linear-progress.scss",
       "mdc.list": "/packages/mdc-list/mdc-list.scss",
       "mdc.menu": "/packages/mdc-menu/mdc-menu.scss",
+      "mdc.notched-outline": "/packages/mdc-notched-outline/mdc-notched-outline.scss",
       "mdc.radio": "/packages/mdc-radio/mdc-radio.scss",
       "mdc.ripple": "/packages/mdc-ripple/mdc-ripple.scss",
       "mdc.select": "/packages/mdc-select/mdc-select.scss",

From 0898056b6f279258ac0ed81ef818506fc8cb8670 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Thu, 1 Mar 2018 13:08:16 -0500
Subject: [PATCH 37/47] chore(notched-outline): update readme

---
 packages/mdc-notched-outline/README.md   | 24 +++++++-----------------
 packages/mdc-textfield/README.md         | 23 ++++++++++++-----------
 packages/mdc-textfield/outline/README.md |  0
 3 files changed, 19 insertions(+), 28 deletions(-)
 delete mode 100644 packages/mdc-textfield/outline/README.md

diff --git a/packages/mdc-notched-outline/README.md b/packages/mdc-notched-outline/README.md
index bafb4da672c..f6a0c17875e 100644
--- a/packages/mdc-notched-outline/README.md
+++ b/packages/mdc-notched-outline/README.md
@@ -32,28 +32,15 @@ The outline is a border around all sides of either a text field or select compon
 <div class="mdc-notched-outline__idle"></div>
 ```
 
-### Usage within `mdc-text-field`
-
-```html
-<div class="mdc-text-field mdc-text-field--outlined">
-  <input class="mdc-text-field__input" id="my-text-field-id" type="text">
-  <label class="mdc-text-field__label" for="my-text-field-id">Label</label>
-  <div class="mdc-notched-outline">
-    <svg>
-      <path class="mdc-notched-outline__path"/>
-    </svg>
-  </div>
-  <div class="mdc-notched-outline__idle"></div>
-</div>
-```
+> For usage within a text field [see](../mdc-textfield/README.md#outlined/).
 
 ### CSS Classes
 
 CSS Class | Description
 --- | ---
-`mdc-notched-outline` | Mandatory. Container for the SVG of the outline when the label is floating above the input.
-`mdc-notched-outline__path` | Mandatory. The SVG path in the outline when the label is floating above the input.
-`mdc-notched-outline__idle` | Mandatory. The outline when the label is resting, in the docked position.
+`mdc-notched-outline` | Mandatory. Container for the SVG of the notched outline path.
+`mdc-notched-outline__path` | Mandatory. The path of the SVG of the notched outline.
+`mdc-notched-outline__idle` | Mandatory. The full outline when the notch is hidden.
 
 ### Sass Mixins
 
@@ -82,3 +69,6 @@ Method Signature | Description
 Method Signature | Description
 --- | ---
 `updateSvgPath(labelWidth: number, isRtl: boolean) => void` | Updates the SVG path of the focus outline element based on the given width of the label element and the RTL context.
+
+
+[//]: <> (TODO(mattgoo): add how to hide/show notch in outline)
diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
index 5970fb44b09..6496cd1b78d 100644
--- a/packages/mdc-textfield/README.md
+++ b/packages/mdc-textfield/README.md
@@ -174,17 +174,18 @@ apply these mixins with CSS selectors such as `.foo-text-field.mdc-text-field--i
 
 Mixin | Description
 --- | ---
-`mdc-text-field-bottom-line-color($color)` | Customizes the text-field bottom line color except the outline and textarea variants.
-`mdc-text-field-box-corner-radius($radius)` | Customizes the border radius for the text-field box variant.
-`mdc-text-field-box-fill-color($color)` | Customizes the background color of the text-field box.
-`mdc-text-field-focused-outline-color($color)` | Customizes the outlined border color when the text-field is focused.
-`mdc-text-field-fullwidth-bottom-line-color($color)` | Customizes the fullwidth text-field variant bottom line color.
-`mdc-text-field-hover-bottom-line-color($color)` | Customizes the hover text-field bottom line color except the outline and textarea variants.
-`mdc-text-field-hover-outline-color($color)` | Customizes the outlined border color when the text-field is hovered.
-`mdc-text-field-ink-color($color)` | Customizes the text entered into the text-field.
+`mdc-text-field-bottom-line-color($color)` | Customizes the text field bottom line color except the outline and textarea variants.
+`mdc-text-field-box-corner-radius($radius)` | Customizes the border radius for the text field box variant.
+`mdc-text-field-box-fill-color($color)` | Customizes the background color of the text field box.
+`mdc-text-field-focused-outline-color($color)` | Customizes the outline border color when the text field is focused.
+`mdc-text-field-fullwidth-bottom-line-color($color)` | Customizes the fullwidth text field variant bottom line color.
+`mdc-text-field-hover-bottom-line-color($color)` | Customizes the hover text field bottom line color except the outline and textarea variants.
+`mdc-text-field-hover-outline-color($color)` | Customizes the outline border color when the text field is hovered.
+`mdc-text-field-ink-color($color)` | Customizes the text entered into the text field.
 `mdc-text-field-label-color($color)` | Customizes the text color of the label.
-`mdc-text-field-line-ripple-color($color)` | Customizes the color of the default line ripple of the text-field.
-`mdc-text-field-outlined-corner-radius($radius)` | Sets the border radius of of the text-field outline variant.
+`mdc-text-field-line-ripple-color($color)` | Customizes the color of the default line ripple of the text field.
+`mdc-text-field-outline-color($color)` | Customizes the border color of the outline text field.
+`mdc-text-field-outlined-corner-radius($radius)` | Sets the border radius of of the text field outline variant.
 `mdc-text-field-textarea-corner-radius($radius)` | Customizes the border radius for a `<textarea>` variant.
 `mdc-text-field-textarea-fill-color($color)` | Customizes the color of the background of the textarea.
 `mdc-text-field-textarea-stroke-color($color)` | Customizes the color of the border of the textarea.
@@ -253,4 +254,4 @@ Method Signature | Description
 `setHelperTextContent(content: string) => void` | Sets the content of the helper text
 `updateOutline() => void` | Updates the focus outline for outlined text fields
 
-`MDCTextFieldFoundation` supports multiple optional sub-elements: line ripple, helper text, icon, and outline. The foundations of these sub-elements must be passed in as constructor arguments to `MDCTextFieldFoundation`.
+`MDCTextFieldFoundation` supports multiple optional sub-elements: helper text and outline. The foundations of these sub-elements must be passed in as constructor arguments to `MDCTextFieldFoundation`.
diff --git a/packages/mdc-textfield/outline/README.md b/packages/mdc-textfield/outline/README.md
deleted file mode 100644
index e69de29bb2d..00000000000

From c2a9737735971af2405cea4ef1f10475e165b881 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Mon, 5 Mar 2018 17:19:04 -0800
Subject: [PATCH 38/47] fix(notched-outline): updated readme and fixed
 text-field readme

---
 packages/mdc-notched-outline/README.md    |  6 +--
 packages/mdc-notched-outline/_mixins.scss |  4 +-
 packages/mdc-notched-outline/index.js     |  4 +-
 packages/mdc-textfield/README.md          | 38 ++++++++++++++----
 packages/mdc-textfield/_mixins.scss       | 25 ++++--------
 packages/mdc-textfield/index.js           | 47 +++++++++++++++--------
 6 files changed, 73 insertions(+), 51 deletions(-)

diff --git a/packages/mdc-notched-outline/README.md b/packages/mdc-notched-outline/README.md
index f6a0c17875e..a1943bbab63 100644
--- a/packages/mdc-notched-outline/README.md
+++ b/packages/mdc-notched-outline/README.md
@@ -46,8 +46,8 @@ CSS Class | Description
 
 Mixin | Description
 --- | ---
-`mdc-notched-outline-color($color)` | Customizes the border color of the idle outline.
-`mdc-notched-outline-path-color($color)` | Customizes the border color of the notched outlined.
+`mdc-notched-outline-color($color)` | Customizes the border color of the notched outlined.
+`mdc-notched-outline-idle-color($color)` | Customizes the border color of the idle outline.
 
 ### `MDCNotchedOutline`
 
@@ -68,7 +68,7 @@ Method Signature | Description
 
 Method Signature | Description
 --- | ---
-`updateSvgPath(labelWidth: number, isRtl: boolean) => void` | Updates the SVG path of the focus outline element based on the given width of the label element and the RTL context.
+`updateSvgPath(notchWidth: number, isRtl: boolean) => void` | Updates the SVG path of the focus outline element based on the given notchWidth and the RTL context.
 
 
 [//]: <> (TODO(mattgoo): add how to hide/show notch in outline)
diff --git a/packages/mdc-notched-outline/_mixins.scss b/packages/mdc-notched-outline/_mixins.scss
index af090debe9b..43714af11c7 100644
--- a/packages/mdc-notched-outline/_mixins.scss
+++ b/packages/mdc-notched-outline/_mixins.scss
@@ -16,13 +16,13 @@
 
 @import "@material/theme/mixins";
 
-@mixin mdc-notched-outline-color($color) {
+@mixin mdc-notched-outline-idle-color($color) {
   .mdc-notched-outline__idle {
     @include mdc-theme-prop(border-color, $color);
   }
 }
 
-@mixin mdc-notched-outline-path-color($color) {
+@mixin mdc-notched-outline-color($color) {
   .mdc-notched-outline__path {
     @include mdc-theme-prop(stroke, $color);
   }
diff --git a/packages/mdc-notched-outline/index.js b/packages/mdc-notched-outline/index.js
index 778ddd768a3..c9836bf6737 100644
--- a/packages/mdc-notched-outline/index.js
+++ b/packages/mdc-notched-outline/index.js
@@ -58,9 +58,7 @@ class MDCNotchedOutline extends MDCComponent {
       },
       getIdleOutlineStyleValue: (propertyName) => {
         const idleOutlineElement = this.root_.parentNode.querySelector(strings.IDLE_OUTLINE_SELECTOR);
-        if (idleOutlineElement) {
-          return window.getComputedStyle(idleOutlineElement).getPropertyValue(propertyName);
-        }
+        return window.getComputedStyle(idleOutlineElement).getPropertyValue(propertyName);
       },
     });
   }
diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
index 6496cd1b78d..5c9a9c63fb9 100644
--- a/packages/mdc-textfield/README.md
+++ b/packages/mdc-textfield/README.md
@@ -172,23 +172,45 @@ apply these mixins with CSS selectors such as `.foo-text-field.mdc-text-field--i
 
 > _NOTE_: the `mdc-line-ripple-color` mixin should be applied from the not focused class `foo-text-field:not(.mdc-text-field--focused)`).
 
+#### Mixins for Text Field Box
+
 Mixin | Description
 --- | ---
-`mdc-text-field-bottom-line-color($color)` | Customizes the text field bottom line color except the outline and textarea variants.
 `mdc-text-field-box-corner-radius($radius)` | Customizes the border radius for the text field box variant.
 `mdc-text-field-box-fill-color($color)` | Customizes the background color of the text field box.
-`mdc-text-field-focused-outline-color($color)` | Customizes the outline border color when the text field is focused.
+
+#### Mixins for Text Field Outline
+
+Mixin | Description
+--- | ---
+`mdc-text-field-outline-color($color)` | Customizes the border color of the outline text field.
+`mdc-text-field-outlined-corner-radius($radius)` | Sets the border radius of of the text field outline variant.
+
+#### Mixins for Textarea
+
+Mixin | Description
+--- | ---
+`mdc-text-field-textarea-corner-radius($radius)` | Customizes the border radius for a `<textarea>` variant.
+`mdc-text-field-textarea-fill-color($color)` | Customizes the color of the background of the textarea.
+`mdc-text-field-textarea-stroke-color($color)` | Customizes the color of the border of the textarea.
+
+
+#### Mixins for Text Field Fullwidth
+
+Mixin | Description
+--- | ---
 `mdc-text-field-fullwidth-bottom-line-color($color)` | Customizes the fullwidth text field variant bottom line color.
+
+#### Other Mixins
+Mixin | Description
+--- | ---
+`mdc-text-field-bottom-line-color($color)` | Customizes the text field bottom line color except the outline and textarea variants.
+`mdc-text-field-focused-outline-color($color)` | Customizes the outline border color when the text field is focused.
 `mdc-text-field-hover-bottom-line-color($color)` | Customizes the hover text field bottom line color except the outline and textarea variants.
 `mdc-text-field-hover-outline-color($color)` | Customizes the outline border color when the text field is hovered.
 `mdc-text-field-ink-color($color)` | Customizes the text entered into the text field.
 `mdc-text-field-label-color($color)` | Customizes the text color of the label.
 `mdc-text-field-line-ripple-color($color)` | Customizes the color of the default line ripple of the text field.
-`mdc-text-field-outline-color($color)` | Customizes the border color of the outline text field.
-`mdc-text-field-outlined-corner-radius($radius)` | Sets the border radius of of the text field outline variant.
-`mdc-text-field-textarea-corner-radius($radius)` | Customizes the border radius for a `<textarea>` variant.
-`mdc-text-field-textarea-fill-color($color)` | Customizes the color of the background of the textarea.
-`mdc-text-field-textarea-stroke-color($color)` | Customizes the color of the border of the textarea.
 
 ### `MDCTextField`
 
@@ -254,4 +276,4 @@ Method Signature | Description
 `setHelperTextContent(content: string) => void` | Sets the content of the helper text
 `updateOutline() => void` | Updates the focus outline for outlined text fields
 
-`MDCTextFieldFoundation` supports multiple optional sub-elements: helper text and outline. The foundations of these sub-elements must be passed in as constructor arguments to `MDCTextFieldFoundation`.
+`MDCTextFieldFoundation` supports multiple optional sub-elements: helper text and icon. The foundations of these sub-elements must be passed in as constructor arguments to `MDCTextFieldFoundation`.
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 9f8843adea1..50fff98e5a1 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -198,10 +198,6 @@
   .mdc-text-field__input {
     border-bottom: none;
   }
-
-  .mdc-notched-outline__path {
-    stroke-width: 1px;
-  }
 }
 
 @mixin mdc-text-field-outlined-invalid_ {
@@ -271,33 +267,26 @@
     @include mdc-text-field-outlined-corner-radius($mdc-text-field-border-radius);
   }
 
-  .mdc-text-field__input:hover ~ .mdc-notched-outline__idle {
-    border: 1px solid;
-  }
-
   .mdc-text-field__icon:hover ~ .mdc-notched-outline__idle {
     border: 1px solid $mdc-text-field-outlined-hover-border;
   }
 }
 
+@mixin mdc-text-field-outline-color_($color) {
+  @include mdc-notched-outline-idle-color($color);
+  @include mdc-notched-outline-color($color);
+}
+
 @mixin mdc-text-field-hover-outline-color_($color) {
   .mdc-text-field__input:hover ~,
   .mdc-text-field__icon:hover ~ {
-    @include mdc-notched-outline-color($color);
+    @include mdc-notched-outline-idle-color($color);
   }
 }
 
 @mixin mdc-text-field-focused-outline-color_($color) {
   &.mdc-text-field--focused {
-    @include mdc-notched-outline-path-color($color);
-  }
-}
-
-@mixin mdc-text-field-outline-color_($color) {
-  @include mdc-notched-outline-color($color);
-
-  &:not(.mdc-text-field--focused) {
-    @include mdc-notched-outline-path-color($color);
+    @include mdc-notched-outline-color($color);
   }
 }
 
diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
index 3f950f65143..f152ffe6e9a 100644
--- a/packages/mdc-textfield/index.js
+++ b/packages/mdc-textfield/index.js
@@ -347,25 +347,11 @@ class MDCTextField extends MDCComponent {
           return document.activeElement === this.root_.querySelector(strings.INPUT_SELECTOR);
         },
         isRtl: () => window.getComputedStyle(this.root_).getPropertyValue('direction') === 'rtl',
-        activateLineRipple: () => {
-          if (this.lineRipple_) {
-            this.lineRipple_.activate();
-          }
-        },
-        deactivateLineRipple: () => {
-          if (this.lineRipple_) {
-            this.lineRipple_.deactivate();
-          }
-        },
-        setLineRippleTransformOrigin: (normalizedX) => {
-          if (this.lineRipple_) {
-            this.lineRipple_.setRippleCenter(normalizedX);
-          }
-        },
       },
+      this.getInputAdapterMethods_(),
       this.getLabelAdapterMethods_(),
-      this.getOutlineAdapterMethods_(),
-      this.getInputAdapterMethods_())),
+      this.getLineRippleAdapterMethods_(),
+      this.getOutlineAdapterMethods_())),
       this.getFoundationMap_());
   }
 
@@ -386,6 +372,33 @@ class MDCTextField extends MDCComponent {
     };
   }
 
+  /**
+   * @return {!{
+   *   activateLineRipple: function(): undefined,
+   *   deactivateLineRipple: function(): undefined,
+   *   setLineRippleTransformOrigin: function(!number): undefined,
+   * }}
+   */
+  getLineRippleAdapterMethods_() {
+    return {
+      activateLineRipple: () => {
+        if (this.lineRipple_) {
+          this.lineRipple_.activate();
+        }
+      },
+      deactivateLineRipple: () => {
+        if (this.lineRipple_) {
+          this.lineRipple_.deactivate();
+        }
+      },
+      setLineRippleTransformOrigin: (normalizedX) => {
+        if (this.lineRipple_) {
+          this.lineRipple_.setRippleCenter(normalizedX);
+        }
+      },
+    };
+  }
+
   /**
    * @return {!{
    *   hasOutline: function(): boolean,

From b98ae09e2a30cb5ca182da9f769375690ece3a10 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Tue, 6 Mar 2018 09:56:13 -0800
Subject: [PATCH 39/47] fix(notched-outline): removed unused scss rules and
 renamed mixin for consistency

---
 demos/text-field.scss                  |  4 ++--
 packages/mdc-notched-outline/README.md |  2 +-
 packages/mdc-textfield/README.md       |  2 +-
 packages/mdc-textfield/_mixins.scss    | 28 ++++++++++++++------------
 4 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/demos/text-field.scss b/demos/text-field.scss
index b5c4ab1d9e4..47e09f02e75 100644
--- a/demos/text-field.scss
+++ b/demos/text-field.scss
@@ -29,7 +29,7 @@
   @include mdc-text-field-line-ripple-color($focused-border);
   @include mdc-text-field-ink-color(black);
   @include mdc-text-field-label-color(rgba(blue, .5));
-  @include mdc-text-field-outline-color($idle-border);
+  @include mdc-text-field-outlined-color($idle-border);
   @include mdc-text-field-hover-outline-color($hover-border);
   @include mdc-text-field-focused-outline-color($focused-border);
   @include mdc-text-field-helper-text-color($idle-border);
@@ -101,7 +101,7 @@
   @include mdc-text-field-line-ripple-color($focused-border);
   @include mdc-text-field-ink-color(orange);
   @include mdc-text-field-label-color(rgba(orange, .87));
-  @include mdc-text-field-outline-color($idle-border);
+  @include mdc-text-field-outlined-color($idle-border);
   @include mdc-text-field-hover-outline-color($hover-border);
   @include mdc-text-field-focused-outline-color($focused-border);
   @include mdc-text-field-helper-text-validation-color($hover-border);
diff --git a/packages/mdc-notched-outline/README.md b/packages/mdc-notched-outline/README.md
index a1943bbab63..7a30d8cb717 100644
--- a/packages/mdc-notched-outline/README.md
+++ b/packages/mdc-notched-outline/README.md
@@ -32,7 +32,7 @@ The outline is a border around all sides of either a text field or select compon
 <div class="mdc-notched-outline__idle"></div>
 ```
 
-> For usage within a text field [see](../mdc-textfield/README.md#outlined/).
+> For usage within a text field see [here](../mdc-textfield/README.md#outlined/).
 
 ### CSS Classes
 
diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
index 5c9a9c63fb9..b704a7e368a 100644
--- a/packages/mdc-textfield/README.md
+++ b/packages/mdc-textfield/README.md
@@ -183,7 +183,7 @@ Mixin | Description
 
 Mixin | Description
 --- | ---
-`mdc-text-field-outline-color($color)` | Customizes the border color of the outline text field.
+`mdc-text-field-outlined-color($color)` | Customizes the border color of the outline text field.
 `mdc-text-field-outlined-corner-radius($radius)` | Sets the border radius of of the text field outline variant.
 
 #### Mixins for Textarea
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 50fff98e5a1..44f127bd26b 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -109,9 +109,9 @@
   }
 }
 
-@mixin mdc-text-field-outline-color($color) {
+@mixin mdc-text-field-outlined-color($color) {
   &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-outline-color_($color);
+    @include mdc-text-field-outlined-color_($color);
   }
 }
 
@@ -193,7 +193,7 @@
 
 @mixin mdc-text-field-outlined-disabled_ {
   @include mdc-text-field-ink-color_($mdc-text-field-placeholder);
-  @include mdc-text-field-outline-color_($mdc-text-field-outlined-disabled-border);
+  @include mdc-text-field-outlined-color_($mdc-text-field-outlined-disabled-border);
 
   .mdc-text-field__input {
     border-bottom: none;
@@ -201,7 +201,7 @@
 }
 
 @mixin mdc-text-field-outlined-invalid_ {
-  @include mdc-text-field-outline-color($mdc-text-field-error);
+  @include mdc-text-field-outlined-color($mdc-text-field-error);
   @include mdc-text-field-hover-outline-color($mdc-text-field-error);
   @include mdc-text-field-focused-outline-color($mdc-text-field-error);
 }
@@ -232,7 +232,7 @@
 }
 
 @mixin mdc-text-field-outlined_ {
-  @include mdc-text-field-outline-color($mdc-text-field-outlined-idle-border);
+  @include mdc-text-field-outlined-color($mdc-text-field-outlined-idle-border);
   @include mdc-text-field-hover-outline-color($mdc-text-field-outlined-hover-border);
   @include mdc-text-field-focused-outline-color(primary);
   @include mdc-floating-label-float-position($mdc-text-field-outlined-label-position-y);
@@ -266,21 +266,23 @@
   .mdc-notched-outline__idle {
     @include mdc-text-field-outlined-corner-radius($mdc-text-field-border-radius);
   }
-
-  .mdc-text-field__icon:hover ~ .mdc-notched-outline__idle {
-    border: 1px solid $mdc-text-field-outlined-hover-border;
-  }
 }
 
-@mixin mdc-text-field-outline-color_($color) {
+@mixin mdc-text-field-outlined-color_($color) {
   @include mdc-notched-outline-idle-color($color);
   @include mdc-notched-outline-color($color);
 }
 
 @mixin mdc-text-field-hover-outline-color_($color) {
-  .mdc-text-field__input:hover ~,
-  .mdc-text-field__icon:hover ~ {
-    @include mdc-notched-outline-idle-color($color);
+  &:not(.mdc-text-field--focused) {
+    .mdc-text-field__input:hover ~,
+    .mdc-text-field__icon:hover ~ {
+      @include mdc-notched-outline-idle-color($color);
+
+      .mdc-notched-outline {
+        @include mdc-notched-outline-color($color);
+      }
+    }
   }
 }
 

From b7b9ce739821a1f2c5959416e24d0ef04e059009 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Tue, 6 Mar 2018 10:07:57 -0800
Subject: [PATCH 40/47] fix(text-field): changed mixin name

BREAKING CHANGE: renamed mdc-text-field-outlined-corner-radius to mdc-text-field-outline-corner-radius
---
 demos/text-field.scss               |  4 ++--
 packages/mdc-textfield/README.md    |  4 ++--
 packages/mdc-textfield/_mixins.scss | 16 ++++++++--------
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/demos/text-field.scss b/demos/text-field.scss
index 47e09f02e75..b5c4ab1d9e4 100644
--- a/demos/text-field.scss
+++ b/demos/text-field.scss
@@ -29,7 +29,7 @@
   @include mdc-text-field-line-ripple-color($focused-border);
   @include mdc-text-field-ink-color(black);
   @include mdc-text-field-label-color(rgba(blue, .5));
-  @include mdc-text-field-outlined-color($idle-border);
+  @include mdc-text-field-outline-color($idle-border);
   @include mdc-text-field-hover-outline-color($hover-border);
   @include mdc-text-field-focused-outline-color($focused-border);
   @include mdc-text-field-helper-text-color($idle-border);
@@ -101,7 +101,7 @@
   @include mdc-text-field-line-ripple-color($focused-border);
   @include mdc-text-field-ink-color(orange);
   @include mdc-text-field-label-color(rgba(orange, .87));
-  @include mdc-text-field-outlined-color($idle-border);
+  @include mdc-text-field-outline-color($idle-border);
   @include mdc-text-field-hover-outline-color($hover-border);
   @include mdc-text-field-focused-outline-color($focused-border);
   @include mdc-text-field-helper-text-validation-color($hover-border);
diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
index b704a7e368a..f3413d0ea07 100644
--- a/packages/mdc-textfield/README.md
+++ b/packages/mdc-textfield/README.md
@@ -183,8 +183,8 @@ Mixin | Description
 
 Mixin | Description
 --- | ---
-`mdc-text-field-outlined-color($color)` | Customizes the border color of the outline text field.
-`mdc-text-field-outlined-corner-radius($radius)` | Sets the border radius of of the text field outline variant.
+`mdc-text-field-outline-color($color)` | Customizes the border color of the outline text field.
+`mdc-text-field-outline-corner-radius($radius)` | Sets the border radius of of the text field outline variant.
 
 #### Mixins for Textarea
 
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 44f127bd26b..34bfc9b6249 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -22,7 +22,7 @@
 @import "icon/mixins";
 @import "icon/variables";
 
-@mixin mdc-text-field-outlined-corner-radius($radius) {
+@mixin mdc-text-field-outline-corner-radius($radius) {
   border-radius: $radius;
 }
 
@@ -109,9 +109,9 @@
   }
 }
 
-@mixin mdc-text-field-outlined-color($color) {
+@mixin mdc-text-field-outline-color($color) {
   &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-outlined-color_($color);
+    @include mdc-text-field-outline-color_($color);
   }
 }
 
@@ -193,7 +193,7 @@
 
 @mixin mdc-text-field-outlined-disabled_ {
   @include mdc-text-field-ink-color_($mdc-text-field-placeholder);
-  @include mdc-text-field-outlined-color_($mdc-text-field-outlined-disabled-border);
+  @include mdc-text-field-outline-color_($mdc-text-field-outlined-disabled-border);
 
   .mdc-text-field__input {
     border-bottom: none;
@@ -201,7 +201,7 @@
 }
 
 @mixin mdc-text-field-outlined-invalid_ {
-  @include mdc-text-field-outlined-color($mdc-text-field-error);
+  @include mdc-text-field-outline-color($mdc-text-field-error);
   @include mdc-text-field-hover-outline-color($mdc-text-field-error);
   @include mdc-text-field-focused-outline-color($mdc-text-field-error);
 }
@@ -232,7 +232,7 @@
 }
 
 @mixin mdc-text-field-outlined_ {
-  @include mdc-text-field-outlined-color($mdc-text-field-outlined-idle-border);
+  @include mdc-text-field-outline-color($mdc-text-field-outlined-idle-border);
   @include mdc-text-field-hover-outline-color($mdc-text-field-outlined-hover-border);
   @include mdc-text-field-focused-outline-color(primary);
   @include mdc-floating-label-float-position($mdc-text-field-outlined-label-position-y);
@@ -264,11 +264,11 @@
 
   .mdc-notched-outline,
   .mdc-notched-outline__idle {
-    @include mdc-text-field-outlined-corner-radius($mdc-text-field-border-radius);
+    @include mdc-text-field-outline-corner-radius($mdc-text-field-border-radius);
   }
 }
 
-@mixin mdc-text-field-outlined-color_($color) {
+@mixin mdc-text-field-outline-color_($color) {
   @include mdc-notched-outline-idle-color($color);
   @include mdc-notched-outline-color($color);
 }

From fc35362fa6a91231c3446943d0bba0730a8e1cc5 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Tue, 6 Mar 2018 11:16:43 -0800
Subject: [PATCH 41/47] fix(text-field): moved textfield outline mixins to
 appropriate section

---
 packages/mdc-notched-outline/mdc-notched-outline.scss | 3 +++
 packages/mdc-textfield/README.md                      | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/mdc-notched-outline/mdc-notched-outline.scss b/packages/mdc-notched-outline/mdc-notched-outline.scss
index b933ce347b6..599018dfab1 100644
--- a/packages/mdc-notched-outline/mdc-notched-outline.scss
+++ b/packages/mdc-notched-outline/mdc-notched-outline.scss
@@ -16,6 +16,7 @@
 
 @import "@material/ripple/mixins";
 @import "@material/ripple/variables";
+@import "@material/textfield/functions";
 @import "@material/theme/mixins";
 @import "./mixins";
 
@@ -56,6 +57,8 @@
 
 .mdc-notched-outline__path {
   stroke-width: 1px;
+
+  // TODO(mattgoo): remove this text-field dep from notched-outline
   transition:
     mdc-text-field-transition(stroke),
     mdc-text-field-transition(stroke-width),
diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
index f3413d0ea07..2d6827943de 100644
--- a/packages/mdc-textfield/README.md
+++ b/packages/mdc-textfield/README.md
@@ -183,6 +183,8 @@ Mixin | Description
 
 Mixin | Description
 --- | ---
+`mdc-text-field-focused-outline-color($color)` | Customizes the outline border color when the text field is focused.
+`mdc-text-field-hover-outline-color($color)` | Customizes the outline border color when the text field is hovered.
 `mdc-text-field-outline-color($color)` | Customizes the border color of the outline text field.
 `mdc-text-field-outline-corner-radius($radius)` | Sets the border radius of of the text field outline variant.
 
@@ -205,9 +207,7 @@ Mixin | Description
 Mixin | Description
 --- | ---
 `mdc-text-field-bottom-line-color($color)` | Customizes the text field bottom line color except the outline and textarea variants.
-`mdc-text-field-focused-outline-color($color)` | Customizes the outline border color when the text field is focused.
 `mdc-text-field-hover-bottom-line-color($color)` | Customizes the hover text field bottom line color except the outline and textarea variants.
-`mdc-text-field-hover-outline-color($color)` | Customizes the outline border color when the text field is hovered.
 `mdc-text-field-ink-color($color)` | Customizes the text entered into the text field.
 `mdc-text-field-label-color($color)` | Customizes the text color of the label.
 `mdc-text-field-line-ripple-color($color)` | Customizes the color of the default line ripple of the text field.

From 2a30f0d309148271ef9fbe6cd1c7873e486f739e Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Tue, 6 Mar 2018 19:43:51 -0800
Subject: [PATCH 42/47] fix(package): remove duplicate package.json entries

---
 packages/material-components-web/package.json | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/material-components-web/package.json b/packages/material-components-web/package.json
index 961f090a605..8e0a133f304 100644
--- a/packages/material-components-web/package.json
+++ b/packages/material-components-web/package.json
@@ -36,8 +36,6 @@
     "@material/notched-outline": "0.0.0",
     "@material/radio": "^0.32.0",
     "@material/ripple": "^0.32.0",
-    "@material/radio": "^0.31.0",
-    "@material/ripple": "^0.31.0",
     "@material/rtl": "^0.30.0",
     "@material/select": "^0.32.0",
     "@material/selection-control": "^0.32.0",

From 3f3ca894c67d3fe7517d042bfe23c6ac70b48c5c Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Wed, 14 Mar 2018 15:22:35 -0700
Subject: [PATCH 43/47] fix(notched-outline): added 2 mixins to notched-outline
 and updated readme

---
 package-lock.json                         | 80 +++++++++++------------
 packages/mdc-notched-outline/README.md    |  2 +
 packages/mdc-notched-outline/_mixins.scss | 13 ++++
 packages/mdc-textfield/_mixins.scss       | 25 ++++---
 packages/mdc-textfield/adapter.js         |  6 --
 5 files changed, 70 insertions(+), 56 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e5902eb82fd..265f5728a87 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2,16 +2,6 @@
   "requires": true,
   "lockfileVersion": 1,
   "dependencies": {
-    "JSONStream": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz",
-      "integrity": "sha1-cH92HgHa6eFvG8+TcDt4xwlmV5o=",
-      "dev": true,
-      "requires": {
-        "jsonparse": "1.3.1",
-        "through": "2.3.8"
-      }
-    },
     "abbrev": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.9.tgz",
@@ -1378,9 +1368,9 @@
       "integrity": "sha1-+GzWzvT1MAyOY+B6TVEvZfv/RTE=",
       "dev": true,
       "requires": {
-        "JSONStream": "1.3.1",
         "combine-source-map": "0.7.2",
         "defined": "1.0.0",
+        "JSONStream": "1.3.1",
         "through2": "2.0.3",
         "umd": "3.0.1"
       }
@@ -1414,7 +1404,6 @@
       "integrity": "sha512-gKfOsNQv/toWz+60nSPfYzuwSEdzvV2WdxrVPUbPD/qui44rAkB3t3muNtmmGYHqrG56FGwX9SUEQmzNLAeS7g==",
       "dev": true,
       "requires": {
-        "JSONStream": "1.3.1",
         "assert": "1.4.1",
         "browser-pack": "6.0.2",
         "browser-resolve": "1.11.2",
@@ -1436,6 +1425,7 @@
         "https-browserify": "1.0.0",
         "inherits": "2.0.3",
         "insert-module-globals": "7.0.1",
+        "JSONStream": "1.3.1",
         "labeled-stream-splicer": "2.0.0",
         "module-deps": "4.1.1",
         "os-browserify": "0.3.0",
@@ -2562,8 +2552,8 @@
       "integrity": "sha512-8od6g684Fhi5Vpp4ABRv/RBsW1AY6wSHbJHEK6FGTv+8jvAAnlABniZu/FVmX9TcirkHepaEsa1QGkRvbg0CKw==",
       "dev": true,
       "requires": {
-        "JSONStream": "1.3.1",
         "is-text-path": "1.0.1",
+        "JSONStream": "1.3.1",
         "lodash": "4.17.4",
         "meow": "3.7.0",
         "split2": "2.2.0",
@@ -5193,22 +5183,22 @@
             }
           }
         },
-        "string-width": {
-          "version": "1.0.2",
+        "string_decoder": {
+          "version": "1.0.1",
           "bundled": true,
           "dev": true,
           "requires": {
-            "code-point-at": "1.1.0",
-            "is-fullwidth-code-point": "1.0.0",
-            "strip-ansi": "3.0.1"
+            "safe-buffer": "5.0.1"
           }
         },
-        "string_decoder": {
-          "version": "1.0.1",
+        "string-width": {
+          "version": "1.0.2",
           "bundled": true,
           "dev": true,
           "requires": {
-            "safe-buffer": "5.0.1"
+            "code-point-at": "1.1.0",
+            "is-fullwidth-code-point": "1.0.0",
+            "strip-ansi": "3.0.1"
           }
         },
         "stringstream": {
@@ -6286,10 +6276,10 @@
       "integrity": "sha1-wDv04BywhtW15azorQr+eInWOMM=",
       "dev": true,
       "requires": {
-        "JSONStream": "1.3.1",
         "combine-source-map": "0.7.2",
         "concat-stream": "1.5.2",
         "is-buffer": "1.1.5",
+        "JSONStream": "1.3.1",
         "lexical-scope": "1.2.0",
         "process": "0.11.10",
         "through2": "2.0.3",
@@ -6981,6 +6971,16 @@
       "integrity": "sha1-T9kss04OnbPInIYi7PUfm5eMbLk=",
       "dev": true
     },
+    "JSONStream": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz",
+      "integrity": "sha1-cH92HgHa6eFvG8+TcDt4xwlmV5o=",
+      "dev": true,
+      "requires": {
+        "jsonparse": "1.3.1",
+        "through": "2.3.8"
+      }
+    },
     "jsprim": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.0.tgz",
@@ -8244,7 +8244,6 @@
       "integrity": "sha1-IyFYM/HaE/1gbMuAh7RIUty4If0=",
       "dev": true,
       "requires": {
-        "JSONStream": "1.3.1",
         "browser-resolve": "1.11.2",
         "cached-path-relative": "1.0.1",
         "concat-stream": "1.5.2",
@@ -8252,6 +8251,7 @@
         "detective": "4.7.1",
         "duplexer2": "0.1.4",
         "inherits": "2.0.3",
+        "JSONStream": "1.3.1",
         "parents": "1.0.1",
         "readable-stream": "2.2.9",
         "resolve": "1.3.3",
@@ -12100,6 +12100,23 @@
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
       "dev": true
     },
+    "string_decoder": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "5.1.1"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
+          "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
+          "dev": true
+        }
+      }
+    },
     "string-width": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.0.0.tgz",
@@ -12121,23 +12138,6 @@
         "function-bind": "1.1.0"
       }
     },
-    "string_decoder": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
-      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "5.1.1"
-      },
-      "dependencies": {
-        "safe-buffer": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
-          "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
-          "dev": true
-        }
-      }
-    },
     "stringify-entities": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-1.3.1.tgz",
diff --git a/packages/mdc-notched-outline/README.md b/packages/mdc-notched-outline/README.md
index 7a30d8cb717..a7689c813ee 100644
--- a/packages/mdc-notched-outline/README.md
+++ b/packages/mdc-notched-outline/README.md
@@ -48,6 +48,8 @@ Mixin | Description
 --- | ---
 `mdc-notched-outline-color($color)` | Customizes the border color of the notched outlined.
 `mdc-notched-outline-idle-color($color)` | Customizes the border color of the idle outline.
+`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.
+`mdc-notched-outline-corner-radius($radius)` | Sets the corner radius of the notched outline element to the given number.
 
 ### `MDCNotchedOutline`
 
diff --git a/packages/mdc-notched-outline/_mixins.scss b/packages/mdc-notched-outline/_mixins.scss
index 43714af11c7..35065bbb1c6 100644
--- a/packages/mdc-notched-outline/_mixins.scss
+++ b/packages/mdc-notched-outline/_mixins.scss
@@ -27,3 +27,16 @@
     @include mdc-theme-prop(stroke, $color);
   }
 }
+
+@mixin mdc-notched-outline-stroke-width($width) {
+  .mdc-notched-outline__path {
+    stroke-width: $width;
+  }
+}
+
+@mixin mdc-notched-outline-corner-radius($radius) {
+  &,
+  ~ .mdc-notched-outline__idle {
+    border-radius: $radius;
+  }
+}
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 34bfc9b6249..ceb031fa9a2 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -22,10 +22,6 @@
 @import "icon/mixins";
 @import "icon/variables";
 
-@mixin mdc-text-field-outline-corner-radius($radius) {
-  border-radius: $radius;
-}
-
 @mixin mdc-text-field-box-corner-radius($radius) {
   border-radius: $radius $radius 0 0;
 }
@@ -207,9 +203,7 @@
 }
 
 @mixin mdc-text-field-outlined-focused_ {
-  .mdc-notched-outline__path {
-    stroke-width: 2px;
-  }
+  @include mdc-notched-outline-stroke-width(2px);
 }
 
 @mixin mdc-text-field-outlined-dense_ {
@@ -262,13 +256,17 @@
     z-index: 2;
   }
 
-  .mdc-notched-outline,
-  .mdc-notched-outline__idle {
-    @include mdc-text-field-outline-corner-radius($mdc-text-field-border-radius);
+  .mdc-notched-outline {
+    @include mdc-notched-outline-corner-radius($mdc-text-field-border-radius);
   }
 }
 
 @mixin mdc-text-field-outline-color_($color) {
+  /** NOTE: outlined version of text-field wants the "idle" and
+   * "notched" outline to have the same color. This covers two cases:
+   * 1) text field renders with NO value in the "idle" state
+   * 2) text field renders with a value in the "notched" state
+   */
   @include mdc-notched-outline-idle-color($color);
   @include mdc-notched-outline-color($color);
 }
@@ -279,6 +277,13 @@
     .mdc-text-field__icon:hover ~ {
       @include mdc-notched-outline-idle-color($color);
 
+      /** tldr; this doesn't break BEM:
+       * We need to wrap this mixin with the .mdc-notched-outline
+       * selector, because of the sibling selector '~'. The notched
+       * outline html structure has .mdc-notched-outline
+       * and .mdc-notched-outline__idle as siblings, while
+       * .mdc-notched-outline__path is a child of .mdc-notched-outline
+       */
       .mdc-notched-outline {
         @include mdc-notched-outline-color($color);
       }
diff --git a/packages/mdc-textfield/adapter.js b/packages/mdc-textfield/adapter.js
index 3db99f32cc0..d30db993eab 100644
--- a/packages/mdc-textfield/adapter.js
+++ b/packages/mdc-textfield/adapter.js
@@ -16,9 +16,6 @@
  */
 
 /* eslint-disable no-unused-vars */
-import MDCFloatingLabelFoundation from '@material/floating-label/foundation';
-import MDCLineRippleFoundation from '@material/line-ripple/foundation';
-import MDCNotchedOutlineFoundation from '@material/notched-outline/foundation';
 import MDCTextFieldHelperTextFoundation from './helper-text/foundation';
 import MDCTextFieldIconFoundation from './icon/foundation';
 
@@ -39,11 +36,8 @@ let NativeInputType;
 
 /**
  * @typedef {{
- *   lineRipple: (!MDCLineRippleFoundation|undefined),
  *   helperText: (!MDCTextFieldHelperTextFoundation|undefined),
  *   icon: (!MDCTextFieldIconFoundation|undefined),
- *   label: (!MDCFloatingLabelFoundation|undefined),
- *   outline: (!MDCNotchedOutlineFoundation|undefined)
  * }}
  */
 let FoundationMapType;

From 526a69f54729354a0669b46e22e20626e25fb50d Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Wed, 14 Mar 2018 16:45:52 -0700
Subject: [PATCH 44/47] test(notched-outline): added notchedOutline to deps to
 pass test

---
 scripts/webpack/js-bundle-factory.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scripts/webpack/js-bundle-factory.js b/scripts/webpack/js-bundle-factory.js
index 038e8b6ce10..c7047096a75 100644
--- a/scripts/webpack/js-bundle-factory.js
+++ b/scripts/webpack/js-bundle-factory.js
@@ -138,6 +138,7 @@ class JsBundleFactory {
         lineRipple: getAbsolutePath('/packages/mdc-line-ripple/index.js'),
         linearProgress: getAbsolutePath('/packages/mdc-linear-progress/index.js'),
         menu: getAbsolutePath('/packages/mdc-menu/index.js'),
+        notchedOutline: getAbsolutePath('/packages/mdc-notched-outline/index.js'),
         radio: getAbsolutePath('/packages/mdc-radio/index.js'),
         ripple: getAbsolutePath('/packages/mdc-ripple/index.js'),
         select: getAbsolutePath('/packages/mdc-select/index.js'),

From e9141eabf238d3b06cc8ee4fe51dab91eec43757 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Thu, 15 Mar 2018 10:06:40 -0700
Subject: [PATCH 45/47] fix(notched-outline): updated sass mixins to using 2
 broder-radius mixins

---
 packages/mdc-notched-outline/README.md    |  8 +++++
 packages/mdc-notched-outline/_mixins.scss |  7 ++--
 packages/mdc-textfield/_mixins.scss       | 40 ++++++++++++++---------
 3 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/packages/mdc-notched-outline/README.md b/packages/mdc-notched-outline/README.md
index a7689c813ee..51b0705f9b2 100644
--- a/packages/mdc-notched-outline/README.md
+++ b/packages/mdc-notched-outline/README.md
@@ -50,6 +50,14 @@ Mixin | Description
 `mdc-notched-outline-idle-color($color)` | Customizes the border color of the idle outline.
 `mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.
 `mdc-notched-outline-corner-radius($radius)` | Sets the corner radius of the notched outline element to the given number.
+`mdc-notched-outline-idle-corner-radius($radius)` | Sets the corner radius of the notched outline element in idle state.
+> NOTE:
+> 1. Having 2 corner radius mixins is intentional. Combining the mixins into one
+> causes the CSS output to be overly specific. The main cause of this is the fact that
+> `.mdc-notched-outline__idle` is sibling to `.mdc-notched-outline`. The future fix
+> is move `.mdc-notched-outline__idle` as a child to `.mdc-notched-outline`.
+> 1. Please be considerate of how you nest the `idle` and `notched` state Sass Mixins.
+> You may be overly specific in some cases, which should be avoided.
 
 ### `MDCNotchedOutline`
 
diff --git a/packages/mdc-notched-outline/_mixins.scss b/packages/mdc-notched-outline/_mixins.scss
index 35065bbb1c6..1a672a5a809 100644
--- a/packages/mdc-notched-outline/_mixins.scss
+++ b/packages/mdc-notched-outline/_mixins.scss
@@ -35,8 +35,11 @@
 }
 
 @mixin mdc-notched-outline-corner-radius($radius) {
-  &,
-  ~ .mdc-notched-outline__idle {
+  border-radius: $radius;
+}
+
+@mixin mdc-notched-outline-idle-corner-radius($radius) {
+  .mdc-notched-outline__idle {
     border-radius: $radius;
   }
 }
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index ceb031fa9a2..40ba0ae0f11 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -185,6 +185,19 @@
   }
 }
 
+@mixin mdc-text-field-outline-corner-radius_($radius) {
+   // NOTE: idle and notched state border radius mixins
+   // are broken into 2 different mixins, otherwise
+   // we would be overly specific (big no, no). The cause of
+   // this is because .mdc-notched-outline and .mdc-notched-outline__idle
+   // are siblings. .mdc-notched-outline__idle needs to be a child of
+   // .mdc-notched-outline in order to remedy this issue.
+  .mdc-notched-outline {
+    @include mdc-notched-outline-corner-radius($radius);
+  }
+  @include mdc-notched-outline-idle-corner-radius($radius);
+}
+
 // Outlined
 
 @mixin mdc-text-field-outlined-disabled_ {
@@ -231,6 +244,7 @@
   @include mdc-text-field-focused-outline-color(primary);
   @include mdc-floating-label-float-position($mdc-text-field-outlined-label-position-y);
   @include mdc-floating-label-shake-animation(text-field-outlined);
+  @include mdc-text-field-outline-corner-radius_($mdc-text-field-border-radius);
 
   height: 56px;
   border: none;
@@ -255,18 +269,13 @@
   .mdc-text-field__icon {
     z-index: 2;
   }
-
-  .mdc-notched-outline {
-    @include mdc-notched-outline-corner-radius($mdc-text-field-border-radius);
-  }
 }
 
 @mixin mdc-text-field-outline-color_($color) {
-  /** NOTE: outlined version of text-field wants the "idle" and
-   * "notched" outline to have the same color. This covers two cases:
-   * 1) text field renders with NO value in the "idle" state
-   * 2) text field renders with a value in the "notched" state
-   */
+  // NOTE: outlined version of text-field wants the "idle" and
+  // "notched" outline to have the same color. This covers two cases:
+  // 1) text field renders with NO value in the "idle" state
+  // 2) text field renders with a value in the "notched" state
   @include mdc-notched-outline-idle-color($color);
   @include mdc-notched-outline-color($color);
 }
@@ -277,13 +286,12 @@
     .mdc-text-field__icon:hover ~ {
       @include mdc-notched-outline-idle-color($color);
 
-      /** tldr; this doesn't break BEM:
-       * We need to wrap this mixin with the .mdc-notched-outline
-       * selector, because of the sibling selector '~'. The notched
-       * outline html structure has .mdc-notched-outline
-       * and .mdc-notched-outline__idle as siblings, while
-       * .mdc-notched-outline__path is a child of .mdc-notched-outline
-       */
+      // tldr; this doesn't break BEM:
+      // We need to wrap this mixin with the .mdc-notched-outline
+      // selector, because of the sibling selector '~'. The notched
+      // outline html structure has .mdc-notched-outline
+      // and .mdc-notched-outline__idle as siblings, while
+      // .mdc-notched-outline__path is a child of .mdc-notched-outline
       .mdc-notched-outline {
         @include mdc-notched-outline-color($color);
       }

From 9378b7cfbd7b5242e407110813cc66aecce5c144 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Thu, 15 Mar 2018 10:37:16 -0700
Subject: [PATCH 46/47] fix(text-field): lint fix

---
 packages/mdc-textfield/_mixins.scss | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 40ba0ae0f11..6bfa528f162 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -186,15 +186,16 @@
 }
 
 @mixin mdc-text-field-outline-corner-radius_($radius) {
-   // NOTE: idle and notched state border radius mixins
-   // are broken into 2 different mixins, otherwise
-   // we would be overly specific (big no, no). The cause of
-   // this is because .mdc-notched-outline and .mdc-notched-outline__idle
-   // are siblings. .mdc-notched-outline__idle needs to be a child of
-   // .mdc-notched-outline in order to remedy this issue.
+  // NOTE: idle and notched state border radius mixins
+  // are broken into 2 different mixins, otherwise
+  // we would be overly specific (big no, no). The cause of
+  // this is because .mdc-notched-outline and .mdc-notched-outline__idle
+  // are siblings. .mdc-notched-outline__idle needs to be a child of
+  // .mdc-notched-outline in order to remedy this issue.
   .mdc-notched-outline {
     @include mdc-notched-outline-corner-radius($radius);
   }
+
   @include mdc-notched-outline-idle-corner-radius($radius);
 }
 

From 0ec3a8f20266f21ad5723a174499ff17bec550d9 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Thu, 15 Mar 2018 16:35:19 -0700
Subject: [PATCH 47/47] fix(notched-outline): readme update explaining hwo to
 use mixins

---
 packages/mdc-notched-outline/README.md | 31 +++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/packages/mdc-notched-outline/README.md b/packages/mdc-notched-outline/README.md
index 51b0705f9b2..99f28a7b715 100644
--- a/packages/mdc-notched-outline/README.md
+++ b/packages/mdc-notched-outline/README.md
@@ -52,12 +52,31 @@ Mixin | Description
 `mdc-notched-outline-corner-radius($radius)` | Sets the corner radius of the notched outline element to the given number.
 `mdc-notched-outline-idle-corner-radius($radius)` | Sets the corner radius of the notched outline element in idle state.
 > NOTE:
-> 1. Having 2 corner radius mixins is intentional. Combining the mixins into one
-> causes the CSS output to be overly specific. The main cause of this is the fact that
-> `.mdc-notched-outline__idle` is sibling to `.mdc-notched-outline`. The future fix
-> is move `.mdc-notched-outline__idle` as a child to `.mdc-notched-outline`.
-> 1. Please be considerate of how you nest the `idle` and `notched` state Sass Mixins.
-> You may be overly specific in some cases, which should be avoided.
+> Because notched-outline has sibling elements, you need to call the "idle" Sass mixins with parent selectors.
+> Consider the following example HTML:
+>
+> ```html
+> <div class="foo-line-ripple-parent">
+>   <div class="mdc-notched-outline foo-line-ripple">
+>     <svg>
+>       <path class="mdc-notched-outline__path"/>
+>     </svg>
+>   </div>
+>   <div class="mdc-notched-outline__idle"></div>
+> </div>
+> ```
+> In order to customize any "non-idle" part of notched-outline, use the .foo-line-ripple CSS selector:
+> ```scss
+> .foo-line-ripple {
+>   @include mdc-notched-outline-color($fooColor);
+> }
+> ```
+> But in order to customize any "idle" part of the notched-outline, you must use the .foo-line-ripple-parent CSS selector:
+> ```scss
+> .foo-line-ripple-parent {
+>   @include mdc-notched-outline-idle-color($fooColor);
+> }
+> ```
 
 ### `MDCNotchedOutline`