fix(text-field): Input position and textarea size (#3321)

BREAKING CHANGE: The `mdc-text-field--upgraded` class has been removed. `mdc-text-field__input` position has changed by 2px to match spec. `mdc-text-field--textarea` width in IE and Edge now matches other browsers.

### What it does

- Fixes vertical text alignment of `mdc-text-field__input` in the `mdc-text-field--box` variant to match spec. Baseline is now 28px instead of 30px. See #2826.
- Fixes `textarea` width in IE and Edge:
    - Replaces unsupported values `fit-content` and `initial` with `auto`
- Removes the `mdc-text-field--upgraded` class:
    - Prevents text fields from resizing and causing browser reflow jank after the JS initializes
    - Most properties from `mdc-text-field--upgraded` have been moved to `mdc-text-field`
    - Sets `display: inline-flex`, `box-sizing: border-box`, and `margin-top: 16px` on all variants

### Example output

#### Before:

![before](https://user-images.githubusercontent.com/409245/43914999-46b71f76-9bbe-11e8-9882-24067cff11f8.png)

#### After:

![after](https://user-images.githubusercontent.com/409245/43915004-4b121b2a-9bbe-11e8-9011-729dc004ecc0.png)

#### Spec:

[Text field guidelines](https://material-io-project.appspot.com/design/components/text-fields.html#spec)

![image](https://user-images.githubusercontent.com/409245/43916708-33e4b994-9bc3-11e8-8b95-b907d801630e.png)

demos/text-field.html

@@ -321,7 +321,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
 
       <section class="example">
         <h2>Preventing FOUC</h2>
-        <div class="mdc-text-field mdc-text-field--upgraded">
+        <div class="mdc-text-field">
           <input id="fouc" type="text" class="mdc-text-field__input" value="Pre-filled value">
           <label for="fouc" class="mdc-floating-label mdc-floating-label--float-above">
             Label floating above

packages/mdc-textfield/README.md

@@ -162,12 +162,12 @@ 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-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
+render `mdc-floating-label` with the `mdc-floating-label--float-above` 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">
+<div class="mdc-text-field">
   <input type="text" id="pre-filled" class="mdc-text-field__input" value="Pre-filled value">
   <label class="mdc-floating-label mdc-floating-label--float-above" for="pre-filled">
     Label in correct place
@@ -183,7 +183,6 @@ Un-styled Content (**FOUC**).
 CSS Class | Description
 --- | ---
 `mdc-text-field` | Mandatory.
-`mdc-text-field--upgraded` | Indicates the text field is upgraded, using JavaScript.
 `mdc-text-field--box` | Styles the text field as a box text field.
 `mdc-text-field--outlined` | Styles the text field as an outlined text field.
 `mdc-text-field--fullwidth` | Styles the text field as a full width text field.

packages/mdc-textfield/_mixins.scss

@@ -262,7 +262,6 @@
   @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;
 
   .mdc-text-field__input {
@@ -333,10 +332,6 @@
   @include mdc-floating-label-float-position($mdc-text-field-box-label-position-y);
   @include mdc-floating-label-shake-animation(text-field-box);
 
-  display: inline-flex;
-  position: relative;
-  height: 56px;
-  margin-top: 16px;
   overflow: hidden;
 
   .mdc-text-field__input {
@@ -426,15 +421,12 @@
 
   &:not(.mdc-text-field--textarea) {
     display: block;
-    box-sizing: border-box;
-    height: 56px;
     margin: 0;
     border: none;
     border-bottom: 1px solid;
     outline: none;
 
     .mdc-text-field__input {
-      width: 100%;
       height: 100%;
       padding: 0;
       resize: none;
@@ -483,8 +475,8 @@
   $label-offset-x: $padding-inset;
 
   display: flex;
-  width: fit-content;
-  height: initial;
+  width: auto;
+  height: auto;
   transition: none;
   border: 1px solid;
   overflow: hidden;

packages/mdc-textfield/constants.js

@@ -28,7 +28,6 @@ const strings = {
 /** @enum {string} */
 const cssClasses = {
   ROOT: 'mdc-text-field',
-  UPGRADED: 'mdc-text-field--upgraded',
   DISABLED: 'mdc-text-field--disabled',
   DENSE: 'mdc-text-field--dense',
   FOCUSED: 'mdc-text-field--focused',

packages/mdc-textfield/foundation.js

@@ -136,8 +136,6 @@ class MDCTextFieldFoundation extends MDCFoundation {
   }
 
   init() {
-    this.adapter_.addClass(MDCTextFieldFoundation.cssClasses.UPGRADED);
-
     if (this.adapter_.isFocused()) {
       this.inputFocusHandler_();
     } else if (this.adapter_.hasLabel() && this.shouldFloat) {
@@ -159,7 +157,6 @@ class MDCTextFieldFoundation extends MDCFoundation {
   }
 
   destroy() {
-    this.adapter_.removeClass(MDCTextFieldFoundation.cssClasses.UPGRADED);
     this.adapter_.deregisterInputInteractionHandler('focus', this.inputFocusHandler_);
     this.adapter_.deregisterInputInteractionHandler('blur', this.inputBlurHandler_);
     this.adapter_.deregisterInputInteractionHandler('input', this.inputInputHandler_);

packages/mdc-textfield/mdc-text-field.scss

@@ -43,8 +43,11 @@
   @include mdc-text-field-icon-color($mdc-text-field-icon-color);
   @include mdc-text-field-caret-color(primary);
 
-  display: inline-block;
+  display: inline-flex;
   position: relative;
+  box-sizing: border-box;
+  height: 56px;
+  margin-top: 16px;
   will-change: opacity, transform, color;
 }
 
@@ -144,19 +147,6 @@
   @include mdc-text-field-dense-with-trailing-icon_;
 }
 
-.mdc-text-field--upgraded:not(.mdc-text-field--fullwidth):not(.mdc-text-field--box) {
-  display: inline-flex;
-  position: relative;
-  align-items: flex-end;
-  box-sizing: border-box;
-  margin-top: 16px;
-
-  // stylelint-disable-next-line selector-max-specificity
-  &:not(.mdc-text-field--textarea):not(.mdc-text-field--outlined) {
-    height: 48px;
-  }
-}
-
 .mdc-text-field--dense {
   @include mdc-text-field-dense_;
 }