From ca0af1b5e2bf66356f42be3d9353fd7b440d3e8b Mon Sep 17 00:00:00 2001
From: Bonnie Zhou <bzbee003@gmail.com>
Date: Thu, 4 Jan 2018 18:04:04 -0500
Subject: [PATCH] feat(text-field): Handle leading/trailing icons in outlined
 text field (#1858)

---
 demos/text-field.html                         | 146 +++++++++++-------
 packages/mdc-textfield/mdc-text-field.scss    |  41 ++++-
 .../outline/mdc-text-field-outline.scss       |   2 -
 3 files changed, 125 insertions(+), 64 deletions(-)
diff --git a/demos/text-field.html b/demos/text-field.html
index 6a45094be89..b2af5a1f7c2 100644
--- a/demos/text-field.html
+++ b/demos/text-field.html
@@ -49,14 +49,9 @@
         background-color: #f2f2f2;
       }
 
-      .custom-text-field-input {
-        width: 300px;
-      }
-
       .full-width-textarea-example {
         margin-top: 16px;
       }
-
     </style>
   </head>
   <body class="mdc-typography">
@@ -275,28 +270,11 @@ <h2>Text Field box</h2>
 
       <section class="example">
         <h2>Text Field - Leading/Trailing icons</h2>
-        <div class="demo-note">
-          <em>
-            Note: Some implementations utilizing leading and trailing icons may wish to set a width on the
-            <code>input</code> element to achieve uniform widths on text fields.
-            This demo achieves that by adding a custom class name: <code>custom-text-field-input</code> and setting
-            some style:
-          </em>
-          <br />
-          <!--
-            The following text formatting achieves the visual output we are aiming for
-            since the <pre> tag honors whitespace and line breaks.
-          -->
-          <pre>
-<code>.custom-text-field-input {
-  width: 300px;
-}</code></pre>
-        </div>
         <div id="demo-tf-box-leading-wrapper">
           <div id="tf-box-leading-example"
             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 custom-text-field-input">
+            <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>
             <div class="mdc-text-field__bottom-line"></div>
           </div>
@@ -304,31 +282,59 @@ <h2>Text Field - Leading/Trailing icons</h2>
         <div id="demo-tf-box-trailing-wrapper">
           <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 custom-text-field-input">
+            <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>
             <i class="material-icons mdc-text-field__icon" tabindex="0">delete</i>
             <div class="mdc-text-field__bottom-line"></div>
           </div>
         </div>
+        <div id="demo-tf-outlined-leading-wrapper">
+          <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">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>
+            <div class="mdc-text-field__outline">
+              <svg>
+                <path class="mdc-text-field__outline-path"/>
+              </svg>
+            </div>
+            <div class="mdc-text-field__idle-outline"></div>
+          </div>
+        </div>
+        <div id="demo-tf-outlined-trailing-wrapper">
+          <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>
+            <i class="material-icons mdc-text-field__icon" tabindex="0">delete</i>
+            <div class="mdc-text-field__outline">
+              <svg>
+                <path class="mdc-text-field__outline-path"/>
+              </svg>
+            </div>
+            <div class="mdc-text-field__idle-outline"></div>
+          </div>
+        </div>
         <div>
-          <input id="box-disable-leading-trailing" type="checkbox">
-          <label for="box-disable-leading-trailing">Disabled</label>
+          <input id="disable-leading-trailing" type="checkbox">
+          <label for="disable-leading-trailing">Disabled</label>
         </div>
         <div>
-          <input id="box-rtl-leading-trailing" type="checkbox">
-          <label for="box-rtl-leading-trailing">RTL</label>
+          <input id="rtl-leading-trailing" type="checkbox">
+          <label for="rtl-leading-trailing">RTL</label>
         </div>
         <div>
-          <input id="box-dark-theme-leading-trailing" type="checkbox">
-          <label for="box-dark-theme-leading-trailing">Dark Theme</label>
+          <input id="dark-theme-leading-trailing" type="checkbox">
+          <label for="dark-theme-leading-trailing">Dark Theme</label>
         </div>
         <div>
-          <input id="box-dense-leading-trailing" type="checkbox">
-          <label for="box-dense-leading-trailing">Dense</label>
+          <input id="dense-leading-trailing" type="checkbox">
+          <label for="dense-leading-trailing">Dense</label>
         </div>
         <div>
-          <input id="box-unclickable-leading-trailing" type="checkbox">
-          <label for="box-unclickable-leading-trailing">Unclickable icons</label>
+          <input id="unclickable-leading-trailing" type="checkbox">
+          <label for="unclickable-leading-trailing">Unclickable icons</label>
         </div>
       </section>
 
@@ -460,46 +466,68 @@ <h2>Full-Width Text Field and Textarea</h2>
     </script>
     <script>
       setTimeout(function() {
-        var tfLeadingEl = document.getElementById('tf-box-leading-example');
-        var tfLeading = new mdc.textField.MDCTextField(tfLeadingEl);
-        var wrapperLeading = document.getElementById('demo-tf-box-leading-wrapper');
+        var tfBoxLeadingEl = document.getElementById('tf-box-leading-example');
+        var tfBoxLeading = new mdc.textField.MDCTextField(tfBoxLeadingEl);
+        var wrapperBoxLeading = document.getElementById('demo-tf-box-leading-wrapper');
+
+        var tfBoxTrailingEl = document.getElementById('tf-box-trailing-example');
+        var tfBoxTrailing = new mdc.textField.MDCTextField(tfBoxTrailingEl);
+        var wrapperBoxTrailing = document.getElementById('demo-tf-box-trailing-wrapper');
+
+        var tfOutlinedLeadingEl = document.getElementById('tf-outlined-leading-example');
+        var tfOutlinedLeading = new mdc.textField.MDCTextField(tfOutlinedLeadingEl);
+        var wrapperOutlinedLeading = document.getElementById('demo-tf-outlined-leading-wrapper');
 
-        var tfTrailingEl = document.getElementById('tf-box-trailing-example');
-        var tfTrailing = new mdc.textField.MDCTextField(tfTrailingEl);
-        var wrapperTrailing = document.getElementById('demo-tf-box-trailing-wrapper');
+        var tfOutlinedTrailingEl = document.getElementById('tf-outlined-trailing-example');
+        var tfOutlinedTrailing = new mdc.textField.MDCTextField(tfOutlinedTrailingEl);
+        var wrapperOutlinedTrailing = document.getElementById('demo-tf-outlined-trailing-wrapper');
 
         var tfIcons = document.querySelectorAll('.mdc-text-field__icon');
 
-        document.getElementById('box-disable-leading-trailing').addEventListener('change', function(evt) {
-          tfLeading.disabled = evt.target.checked;
-          tfTrailing.disabled = evt.target.checked;
+        document.getElementById('disable-leading-trailing').addEventListener('change', function(evt) {
+          tfBoxLeading.disabled = evt.target.checked;
+          tfBoxTrailing.disabled = evt.target.checked;
+          tfOutlinedLeading.disabled = evt.target.checked;
+          tfOutlinedTrailing.disabled = evt.target.checked;
         });
 
-        document.getElementById('box-rtl-leading-trailing').addEventListener('change', function(evt) {
+        document.getElementById('rtl-leading-trailing').addEventListener('change', function(evt) {
           if (evt.target.checked) {
-            wrapperLeading.setAttribute('dir', 'rtl');
-            wrapperTrailing.setAttribute('dir', 'rtl');
+            wrapperBoxLeading.setAttribute('dir', 'rtl');
+            wrapperBoxTrailing.setAttribute('dir', 'rtl');
+            wrapperOutlinedLeading.setAttribute('dir', 'rtl');
+            wrapperOutlinedTrailing.setAttribute('dir', 'rtl');
           } else {
-            wrapperLeading.removeAttribute('dir');
-            wrapperTrailing.removeAttribute('dir');
+            wrapperBoxLeading.removeAttribute('dir');
+            wrapperBoxTrailing.removeAttribute('dir');
+            wrapperOutlinedLeading.removeAttribute('dir');
+            wrapperOutlinedTrailing.removeAttribute('dir');
           }
-          tfLeading.layout();
-          tfTrailing.layout();
+          tfBoxLeading.layout();
+          tfBoxTrailing.layout();
+          tfOutlinedLeading.layout();
+          tfOutlinedTrailing.layout();
         });
 
-        document.getElementById('box-dark-theme-leading-trailing').addEventListener('change', function(evt) {
-          wrapperLeading.classList[evt.target.checked ? 'add' : 'remove']('mdc-theme--dark');
-          wrapperTrailing.classList[evt.target.checked ? 'add' : 'remove']('mdc-theme--dark');
+        document.getElementById('dark-theme-leading-trailing').addEventListener('change', function(evt) {
+          wrapperBoxLeading.classList[evt.target.checked ? 'add' : 'remove']('mdc-theme--dark');
+          wrapperBoxTrailing.classList[evt.target.checked ? 'add' : 'remove']('mdc-theme--dark');
+          wrapperOutlinedLeading.classList[evt.target.checked ? 'add' : 'remove']('mdc-theme--dark');
+          wrapperOutlinedTrailing.classList[evt.target.checked ? 'add' : 'remove']('mdc-theme--dark');
         });
 
-        document.getElementById('box-dense-leading-trailing').addEventListener('change', function(evt) {
-          tfLeadingEl.classList[evt.target.checked ? 'add' : 'remove']('mdc-text-field--dense');
-          tfLeading.layout();
-          tfTrailingEl.classList[evt.target.checked ? 'add' : 'remove']('mdc-text-field--dense');
-          tfTrailing.layout();
+        document.getElementById('dense-leading-trailing').addEventListener('change', function(evt) {
+          tfBoxLeadingEl.classList[evt.target.checked ? 'add' : 'remove']('mdc-text-field--dense');
+          tfBoxLeading.layout();
+          tfBoxTrailingEl.classList[evt.target.checked ? 'add' : 'remove']('mdc-text-field--dense');
+          tfBoxTrailing.layout();
+          tfOutlinedLeadingEl.classList[evt.target.checked ? 'add' : 'remove']('mdc-text-field--dense');
+          tfOutlinedLeading.layout();
+          tfOutlinedTrailingEl.classList[evt.target.checked ? 'add' : 'remove']('mdc-text-field--dense');
+          tfOutlinedTrailing.layout();
         });
 
-        document.getElementById('box-unclickable-leading-trailing').addEventListener('change', function(evt) {
+        document.getElementById('unclickable-leading-trailing').addEventListener('change', function(evt) {
           [].slice.call(tfIcons).forEach(function (icon) {
             icon.setAttribute('tabindex', evt.target.checked ? '-1' : '0');
           });
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index 4dbdd5edaa3..0a72bb8bc39 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -131,7 +131,7 @@
     padding: 12px;
     border: none;
     background-color: transparent;
-    z-index: 3;
+    z-index: 1;
 
     &:hover ~ .mdc-text-field__idle-outline {
       border: 1px solid $mdc-text-field-outlined-hover-border;
@@ -144,7 +144,6 @@
     position: absolute;
     bottom: 20px;
     transition: transform 260ms ease;
-    z-index: 2;
 
     &--float-above {
       transform: scale(.75) translateY(-170%);
@@ -155,6 +154,14 @@
     }
   }
 
+  .mdc-text-field__icon {
+    z-index: 2;
+
+    &:hover ~ .mdc-text-field__idle-outline {
+      border: 1px solid $mdc-text-field-outlined-hover-border;
+    }
+  }
+
   &.mdc-text-field--focused .mdc-text-field__idle-outline,
   .mdc-text-field__label--float-above ~ .mdc-text-field__idle-outline {
     opacity: 0;
@@ -207,8 +214,11 @@
         // stylelint-enable max-nesting-depth
       }
     }
-  }
 
+    .mdc-text-field__icon {
+      top: 12px;
+    }
+  }
   // stylelint-enable plugin/selector-bem-pattern
 }
 
@@ -221,6 +231,7 @@
   display: inline-flex;
   position: relative;
   height: 56px;
+  margin-top: 16px;
   background-color: $mdc-text-field-box-background;
   overflow: hidden;
 
@@ -306,6 +317,30 @@
   .mdc-text-field__label {
     @include mdc-rtl-reflexive-position(left, $mdc-text-field-icon-padding);
   }
+
+  // stylelint-disable plugin/selector-bem-pattern
+  &.mdc-text-field--outlined {
+    .mdc-text-field__label--float-above {
+      transform: scale(.75) translateX(-36%) translateY(-170%);
+
+      @include mdc-rtl {
+        transform: scale(.75) translateX(36%) translateY(-170%);
+      }
+    }
+
+    &.mdc-text-field--dense {
+      .mdc-text-field__label--float-above {
+        transform: translateX(-25%) translateY(-145%) scale(.923);
+
+        // stylelint-disable max-nesting-depth
+        @include mdc-rtl {
+          transform: translateX(25%) translateY(-145%) scale(.923);
+        }
+        // stylelint-enable max-nesting-depth
+      }
+    }
+  }
+  // stylelint-enable plugin/selector-bem-pattern
 }
 
 .mdc-text-field--with-trailing-icon {
diff --git a/packages/mdc-textfield/outline/mdc-text-field-outline.scss b/packages/mdc-textfield/outline/mdc-text-field-outline.scss
index ec82a7fc8ba..1c614126d47 100644
--- a/packages/mdc-textfield/outline/mdc-text-field-outline.scss
+++ b/packages/mdc-textfield/outline/mdc-text-field-outline.scss
@@ -30,7 +30,6 @@
   transition: opacity 100ms ease;
   border: 1px solid $mdc-text-field-outlined-idle-border;
   opacity: 1;
-  z-index: 2;
 }
 
 .mdc-text-field__outline {
@@ -48,7 +47,6 @@
   height: calc(100% - 2px);
   transition: mdc-text-field-transition(opacity);
   opacity: 0;
-  z-index: 2;
   overflow: hidden;
 
   svg {
