fix(text-field): Update to match spec (#3397)

BREAKING CHANGE: This PR removes the margin-top from the mdc-text-field container. This can cause a UI to shift/change.

Author: williamernest

demos/text-field.html

@@ -86,9 +86,7 @@ <h2>Full Functionality JS Component (Floating Label, Validation)</h2>
             <div class="mdc-line-ripple"></div>
           </div>
           <p id="my-text-field-helper-text" class="mdc-text-field-helper-text"
-             aria-hidden="true" style="visibility: hidden">
-            Helper Text
-          </p>
+             aria-hidden="true" style="visibility: hidden">Helper Text</p>
         </section>
         <div>
           <input id="disable" type="checkbox">
@@ -137,9 +135,7 @@ <h2>Password field with validation</h2>
           <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"
-           id="pw-validation-msg">
-          Must be at least 8 characters long
-        </p>
+           id="pw-validation-msg">Must be at least 8 characters long</p>
       </section>
 
       <section class="example">
@@ -158,9 +154,7 @@ <h2>Outlined Text Field</h2>
             <div class="mdc-notched-outline__idle"></div>
           </div>
           <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
-             id="name-validation-message">
-            Helper Text
-          </p>
+             id="name-validation-message">Helper Text</p>
         </div>
         <div>
           <input id="outlined-disable" type="checkbox">
@@ -194,7 +188,7 @@ <h2>Outlined Text Field</h2>
 
       <section class="example" id="demo-tf-icon-container">
         <h2>Text Field - Leading/Trailing icons</h2>
-        <div id="demo-tf-leading-wrapper">
+        <div id="demo-tf-leading-wrapper" class="demo-tf-add-space">
           <div id="tf-leading-example"
             class="mdc-text-field mdc-text-field--with-leading-icon" data-demo-no-auto-js>
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
@@ -203,7 +197,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
             <div class="mdc-line-ripple"></div>
           </div>
         </div>
-        <div id="demo-tf-trailing-wrapper">
+        <div id="demo-tf-trailing-wrapper" class="demo-tf-add-space">
           <div id="tf-trailing-example"
             class="mdc-text-field mdc-text-field--with-trailing-icon" data-demo-no-auto-js>
             <input type="text" id="tf-trailing" class="mdc-text-field__input">
@@ -212,7 +206,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
             <div class="mdc-line-ripple"></div>
           </div>
         </div>
-        <div id="demo-tf-outlined-leading-wrapper">
+        <div id="demo-tf-outlined-leading-wrapper" class="demo-tf-add-space">
           <div id="tf-outlined-leading-example"
             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" role="button">event</i>
@@ -226,7 +220,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
             <div class="mdc-notched-outline__idle"></div>
           </div>
         </div>
-        <div id="demo-tf-outlined-trailing-wrapper" class="demo-text-field-wrapper">
+        <div id="demo-tf-outlined-trailing-wrapper" class="demo-text-field-wrapper demo-tf-add-space">
           <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">
@@ -346,8 +340,7 @@ <h2>Custom error state behaviour - remove error state as soon as invalid input i
             <div class="mdc-line-ripple"></div>
           </div>
           <p id="username-helper-text" class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true"
-            >Enter 10 digit phone number including area code
-          </p>
+            >Enter 10 digit phone number including area code</p>
         </section>
       </section>
     </main>

demos/text-field.scss

@@ -129,3 +129,6 @@
   margin-bottom: 8px;
 }
 
+.demo-tf-add-space {
+  margin: 10px 0;
+}

packages/mdc-notched-outline/foundation.js

@@ -98,7 +98,7 @@ class MDCNotchedOutlineFoundation extends MDCFoundation {
     const width = this.adapter_.getWidth();
     const height = this.adapter_.getHeight();
     const cornerWidth = radius + 1.2;
-    const leadingStrokeLength = Math.abs(11 - cornerWidth);
+    const leadingStrokeLength = Math.abs(12 - cornerWidth);
     const paddedNotchWidth = notchWidth + 8;
 
     // The right, bottom, and left sides of the outline follow the same SVG path.

packages/mdc-notched-outline/mdc-notched-outline.scss

@@ -28,12 +28,17 @@
 
 // Notched Outline is intended for use by multiple components, but its styles should only be emitted once when bundled
 @include mdc-base-emit-once("mdc-notched-outline") {
-  .mdc-notched-outline {
+  .mdc-notched-outline,
+  .mdc-notched-outline__idle {
     position: absolute;
     top: 0;
     left: 0;
-    width: calc(100% - 1px);
-    height: calc(100% - 2px);
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+  }
+
+  .mdc-notched-outline {
     transition: opacity $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function;
     opacity: 0;
     text-align: left;
@@ -53,11 +58,6 @@
   }
 
   .mdc-notched-outline__idle {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: calc(100% - 4px);
-    height: calc(100% - 4px);
     transition:
       opacity $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function,
       border-color $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function;

packages/mdc-textfield/_mixins.scss

@@ -190,9 +190,6 @@
   @include mdc-floating-label-float-position($mdc-text-field-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
   @include mdc-floating-label-shake-animation(text-field-dense);
 
-  margin-top: 12px;
-  margin-bottom: 4px;
-
   .mdc-text-field__input {
     padding: 12px 12px 0;
   }
@@ -293,7 +290,7 @@
 
   .mdc-text-field__input {
     display: flex;
-    padding: 12px;
+    padding: 12px 16px 14px;
     border: none !important;  // FF adds unwanted border in HC mode on windows.
     background-color: transparent;
     z-index: 1;
@@ -304,6 +301,8 @@
   }
 
   .mdc-floating-label {
+    @include mdc-rtl-reflexive-position(left, 16px);
+
     width: auto;
   }
 }
@@ -371,15 +370,19 @@
 }
 
 @mixin mdc-text-field-with-trailing-icon_ {
-  @include mdc-text-field-icon-horizontal-position_(right, $mdc-text-field-icon-position, $mdc-text-field-icon-padding);
+  @include mdc-text-field-icon-horizontal-position_(right, $mdc-text-field-trailing-icon-position, $mdc-text-field-icon-padding);
+
+  // Outlined uses 16px for text alignment when using a trailing icon.
+  &.mdc-text-field--outlined {
+    @include mdc-text-field-icon-horizontal-position_(right, $mdc-text-field-icon-position, $mdc-text-field-icon-padding);
+  }
 }
 
 @mixin mdc-text-field-dense-with-trailing-icon_ {
   @include mdc-text-field-icon-horizontal-position_(right, $mdc-text-field-dense-icon-position, $mdc-text-field-dense-icon-padding);
 }
 
 // Full Width
-
 @mixin mdc-text-field-fullwidth_ {
   width: 100%;
 
@@ -400,7 +403,6 @@
 }
 
 // Textarea
-
 @mixin mdc-text-field-textarea-disabled_ {
   @include mdc-text-field-textarea-stroke-color_($mdc-textarea-disabled-border-color);
   @include mdc-text-field-textarea-fill-color_($mdc-textarea-disabled-background);

packages/mdc-textfield/icon/_variables.scss

@@ -20,7 +20,8 @@
 // THE SOFTWARE.
 //
 
-$mdc-text-field-icon-position: 15px;
+$mdc-text-field-icon-position: 16px;
+$mdc-text-field-trailing-icon-position: 12px;
 $mdc-text-field-icon-padding: 48px;
 $mdc-text-field-dense-icon-position: 12px;
 $mdc-text-field-dense-icon-padding: 38px;

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

@@ -72,9 +72,15 @@
   position: relative;
   box-sizing: border-box;
   height: 56px;
-  margin-top: 16px;
   overflow: hidden;
   will-change: opacity, transform, color;
+
+  // stylelint-disable-next-line plugin/selector-bem-pattern
+  .mdc-floating-label {
+    @include mdc-rtl-reflexive-position(left, 12px);
+
+    pointer-events: none;
+  }
 }
 
 .mdc-text-field__input {
@@ -84,7 +90,7 @@
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  padding: 20px 16px 0;
+  padding: 20px 12px 6px;
   transition: mdc-text-field-transition(opacity);
   border: none;
   border-bottom: 1px solid;
@@ -106,20 +112,13 @@
     box-shadow: none;
   }
 }
-
-// stylelint-disable plugin/selector-bem-pattern
-.mdc-floating-label {
-  pointer-events: none;
-}
-
-// Move label when text-field gets autofilled in Chrome
+// stylelint-disable-next-line plugin/selector-bem-pattern
+// Move label when text-field gets auto-filled in Chrome.
 .mdc-text-field__input:-webkit-autofill + .mdc-floating-label {
   transform: translateY(-50%) scale(.75);
   cursor: auto;
 }
 
-// stylelint-enable plugin/selector-bem-pattern
-
 .mdc-text-field--outlined {
   @include mdc-text-field-outlined_;
 }
@@ -198,6 +197,11 @@
   }
 
   .mdc-text-field + & {
+    margin-right: 12px;
+    margin-left: 12px;
+  }
+
+  .mdc-text-field--outlined + & {
     margin-right: 16px;
     margin-left: 16px;
   }