fix(text-field): Update styles

demos/text-field.html

@@ -194,7 +194,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 +203,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 +212,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 +226,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">

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

@@ -32,8 +32,9 @@
     position: absolute;
     top: 0;
     left: 0;
-    width: calc(100% - 1px);
-    height: calc(100% - 2px);
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
     transition: opacity $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function;
     opacity: 0;
     text-align: left;
@@ -56,8 +57,9 @@
     position: absolute;
     top: 0;
     left: 0;
-    width: calc(100% - 4px);
-    height: calc(100% - 4px);
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
     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,7 +370,13 @@
 }
 
 @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_ {

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,12 @@
   position: relative;
   box-sizing: border-box;
   height: 56px;
-  margin-top: 16px;
   overflow: hidden;
   will-change: opacity, transform, color;
+
+  .mdc-floating-label {
+    @include mdc-rtl-reflexive-position(left, 12px);
+  }
 }
 
 .mdc-text-field__input {
@@ -84,7 +87,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;
@@ -198,6 +201,11 @@
   }
 
   .mdc-text-field + & {
+    margin-right: 12px;
+    margin-left: 12px;
+  }
+
+  .mdc-text-field--outlined + & {
     margin-right: 16px;
     margin-left: 16px;
   }