From 1dae53c0e733ccf48ea4d1b13222a12da1f1dd72 Mon Sep 17 00:00:00 2001
From: Will Ernest <34519388+williamernest@users.noreply.github.com>
Date: Tue, 16 Jan 2018 19:14:54 -0800
Subject: [PATCH] feat(text-field): Move text-field outline colors to mixins
 (#1963)

* feat(text-field): Move color mixins for outline/helper text. Update demos/docs
Breaking Change: Moves color customization of the outline text-field to SASS mixins.
---
 demos/text-field.html                         | 24 ++++--
 demos/text-field.scss                         |  8 ++
 packages/mdc-textfield/README.md              |  5 ++
 packages/mdc-textfield/_mixins.scss           | 34 +++------
 .../mdc-textfield/bottom-line/_mixins.scss    |  4 +-
 .../mdc-text-field-bottom-line.scss           |  6 +-
 .../mdc-textfield/helper-text/_mixins.scss    | 43 +++++++++++
 .../mdc-text-field-helper-text.scss           |  6 --
 packages/mdc-textfield/mdc-text-field.scss    | 23 ++----
 packages/mdc-textfield/outline/_mixins.scss   | 60 +++++++++++++++
 .../outline/mdc-text-field-outline.scss       | 75 ++++++++++---------
 11 files changed, 195 insertions(+), 93 deletions(-)
 create mode 100644 packages/mdc-textfield/helper-text/_mixins.scss
 create mode 100644 packages/mdc-textfield/outline/_mixins.scss

diff --git a/demos/text-field.html b/demos/text-field.html
index 431b7b2ca4b..81ea05c308e 100644
--- a/demos/text-field.html
+++ b/demos/text-field.html
@@ -182,8 +182,8 @@ <h2>Outlined Text Field</h2>
           <label for="outlined-rtl">RTL</label>
         </div>
         <div>
-          <input id="outlined-dark-theme" type="checkbox">
-          <label for="outlined-dark-theme">Dark Theme</label>
+          <input id="outlined-custom-colors" type="checkbox">
+          <label for="outlined-custom-colors">Alternate Colors</label>
         </div>
         <div>
           <input id="outlined-dense" type="checkbox">
@@ -205,8 +205,9 @@ <h2>Outlined Text Field</h2>
               }
               tf.layout();
             });
-            document.getElementById('outlined-dark-theme').addEventListener('change', function(evt) {
-              wrapper.classList[evt.target.checked ? 'add' : 'remove']('mdc-theme--dark');
+            document.getElementById('outlined-custom-colors').addEventListener('change', function(evt) {
+              tfEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-colors');
+              tfEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-error-colors');
             });
             document.getElementById('outlined-dense').addEventListener('change', function(evt) {
               tfEl.classList[evt.target.checked ? 'add' : 'remove']('mdc-text-field--dense');
@@ -277,7 +278,7 @@ <h2>Text Field box</h2>
         </script>
       </section>
 
-      <section class="example">
+      <section class="example" id="demo-tf-icon-container">
         <h2>Text Field - Leading/Trailing icons</h2>
         <div id="demo-tf-box-leading-wrapper">
           <div id="tf-box-leading-example"
@@ -345,6 +346,10 @@ <h2>Text Field - Leading/Trailing icons</h2>
           <input id="unclickable-leading-trailing" type="checkbox">
           <label for="unclickable-leading-trailing">Unclickable icons</label>
         </div>
+        <div>
+          <input id="required-leading-trailing" type="checkbox">
+          <label for="required-leading-trailing">Required</label>
+        </div>
       </section>
 
       <section class="example">
@@ -475,6 +480,8 @@ <h2>Full-Width Text Field and Textarea</h2>
       });
 
       demoReady(function() {
+        var tfIconContainer = document.getElementById('demo-tf-icon-container');
+
         var tfBoxLeadingEl = document.getElementById('tf-box-leading-example');
         var tfBoxLeading = new mdc.textField.MDCTextField(tfBoxLeadingEl);
         var wrapperBoxLeading = document.getElementById('demo-tf-box-leading-wrapper');
@@ -541,6 +548,13 @@ <h2>Full-Width Text Field and Textarea</h2>
             icon.setAttribute('tabindex', evt.target.checked ? '-1' : '0');
           });
         });
+
+        document.getElementById('required-leading-trailing').addEventListener('change', function(evt) {
+          tfIconContainer.querySelectorAll('.mdc-text-field__input')
+              .forEach(function(input) {
+                input.required = evt.target.checked;
+              });
+        });
       });
 
       demoReady(function() {
diff --git a/demos/text-field.scss b/demos/text-field.scss
index 200c01a3565..f25f0b74807 100644
--- a/demos/text-field.scss
+++ b/demos/text-field.scss
@@ -25,6 +25,10 @@
   @include mdc-text-field-focused-bottom-line-color(blue);
   @include mdc-text-field-ink-color(black);
   @include mdc-text-field-label-color(rgba(blue, .5));
+  @include mdc-text-field-outline-color(rgba(blue, .38));
+  @include mdc-text-field-hover-outline-color(rgba(blue, .6));
+  @include mdc-text-field-focused-outline-color(rgba(blue, 1));
+  @include mdc-text-field-helper-text-color(rgba(blue, .38));
 
   &.mdc-text-field--focused {
     @include mdc-text-field-label-color(rgba(blue, .87));
@@ -37,5 +41,9 @@
   @include mdc-text-field-focused-bottom-line-color(orange);
   @include mdc-text-field-ink-color(orange);
   @include mdc-text-field-label-color(rgba(orange, .87));
+  @include mdc-text-field-outline-color(rgba(orange, .38));
+  @include mdc-text-field-hover-outline-color(rgba(orange, .6));
+  @include mdc-text-field-focused-outline-color(rgba(orange, 1));
+  @include mdc-text-field-helper-text-validation-color(rgba(orange, .6));
 }
 // stylelint-enable selector-class-pattern
diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
index dd54f9984fb..cb37738e865 100644
--- a/packages/mdc-textfield/README.md
+++ b/packages/mdc-textfield/README.md
@@ -210,6 +210,11 @@ Mixin | Description
 `mdc-text-field-focused-bottom-line-color($color)` | Customizes the bottom-line ripple color when the text-field is focused.  
 `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-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-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.
 
 ### `MDCTextField`
 
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 10288fb5274..2cdcff3f03f 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -15,7 +15,9 @@
 //
 
 @import "bottom-line/mixins";
+@import "outline/mixins";
 @import "label/mixins";
+@import "helper-text/mixins";
 
 @mixin mdc-text-field-outlined-corner-radius($radius) {
   border-radius: $radius;
@@ -80,6 +82,7 @@
   @include mdc-text-field-bottom-line-color_($mdc-text-field-disabled-border-on-light);
   @include mdc-text-field-ink-color_(text-disabled-on-light);
   @include mdc-text-field-label-color_(text-disabled-on-light);
+  @include mdc-text-field-helper-text-color_(text-disabled-on-light);
 
   @include mdc-theme-dark(".mdc-text-field") {
     @include mdc-text-field-bottom-line-color_($mdc-text-field-disabled-border-on-dark);
@@ -97,12 +100,6 @@
     }
   }
 
-  // stylelint-disable plugin/selector-bem-pattern
-  + .mdc-text-field-helper-text {
-    @include mdc-theme-prop(color, text-disabled-on-light);
-  }
-  // stylelint-enable plugin/selector-bem-pattern
-
   @include mdc-theme-dark(".mdc-text-field", true) {
     // stylelint-disable plugin/selector-bem-pattern
     + .mdc-text-field-helper-text {
@@ -122,22 +119,15 @@
   @include mdc-text-field-hover-bottom-line-color($mdc-text-field-error-on-light);
   @include mdc-text-field-focused-bottom-line-color($mdc-text-field-error-on-light);
   @include mdc-text-field-label-color($mdc-text-field-error-on-light);
+  @include mdc-text-field-helper-text-validation-color($mdc-text-field-error-on-light);
 
-  .mdc-text-field__idle-outline {
-    border-color: $mdc-text-field-error-on-light;
-  }
-
-  .mdc-text-field__input:hover ~ .mdc-text-field__idle-outline {
-    border-color: $mdc-text-field-error-on-light;
-  }
-
-  .mdc-text-field__outline .mdc-text-field__outline-path {
-    stroke: $mdc-text-field-error-on-light;
-  }
+  // Outline specific mixins
+  @include mdc-text-field-outline-color($mdc-text-field-error-on-light);
+  @include mdc-text-field-hover-outline-color($mdc-text-field-error-on-light);
+  @include mdc-text-field-focused-outline-color($mdc-text-field-error-on-light);
 
   + .mdc-text-field-helper-text--validation-msg {
     opacity: 1;
-    color: $mdc-text-field-error-on-light;
   }
 
   @include mdc-theme-dark(".mdc-text-field", true) {
@@ -170,21 +160,17 @@
 // Outline
 
 @mixin mdc-text-field-outline-disabled_ {
-  @include mdc-theme-prop(color, $mdc-text-field-light-placeholder);
+  @include mdc-text-field-ink-color_($mdc-text-field-light-placeholder);
+  @include mdc-text-field-outline-color_($mdc-text-field-outlined-disabled-border);
 
   .mdc-text-field__input {
     border-bottom: none;
   }
 
   .mdc-text-field__outline-path {
-    stroke: $mdc-text-field-outlined-disabled-border;
     stroke-width: 1px;
   }
 
-  .mdc-text-field__idle-outline {
-    border-color: $mdc-text-field-outlined-disabled-border;
-  }
-
   .mdc-text-field__label {
     bottom: 20px;
   }
diff --git a/packages/mdc-textfield/bottom-line/_mixins.scss b/packages/mdc-textfield/bottom-line/_mixins.scss
index ca9314d42fc..ff07f4a7dcd 100644
--- a/packages/mdc-textfield/bottom-line/_mixins.scss
+++ b/packages/mdc-textfield/bottom-line/_mixins.scss
@@ -42,13 +42,13 @@
   }
 }
 
-@mixin mdc-text-field-hover-bottom-line-color($color) {
+@mixin mdc-text-field-hover-bottom-line-color_($color) {
   .mdc-text-field__input:hover {
     @include mdc-theme-prop(border-color, $color);
   }
 }
 
-@mixin mdc-text-field-focused-bottom-line-color($color) {
+@mixin mdc-text-field-focused-bottom-line-color_($color) {
   .mdc-text-field__bottom-line {
     @include mdc-theme-prop(background-color, $color);
   }
diff --git a/packages/mdc-textfield/bottom-line/mdc-text-field-bottom-line.scss b/packages/mdc-textfield/bottom-line/mdc-text-field-bottom-line.scss
index fb5fbe8a4b4..e4092e96d8d 100644
--- a/packages/mdc-textfield/bottom-line/mdc-text-field-bottom-line.scss
+++ b/packages/mdc-textfield/bottom-line/mdc-text-field-bottom-line.scss
@@ -15,14 +15,12 @@
 //
 
 @import "../functions";
+@import "./mixins";
 @import "@material/theme/mixins";
 
 // postcss-bem-linter: define textfield
 .mdc-text-field {
-
   &__bottom-line {
-    @include mdc-theme-prop(background-color, primary);
-
     position: absolute;
     bottom: 0;
     left: 0;
@@ -41,4 +39,4 @@
   .mdc-text-field__input:focus ~ .mdc-text-field__bottom-line {
     opacity: 1;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/mdc-textfield/helper-text/_mixins.scss b/packages/mdc-textfield/helper-text/_mixins.scss
new file mode 100644
index 00000000000..6d52ef599d4
--- /dev/null
+++ b/packages/mdc-textfield/helper-text/_mixins.scss
@@ -0,0 +1,43 @@
+//
+// 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-helper-text-color($color) {
+  &:not(.mdc-text-field--disabled) {
+    @include mdc-text-field-helper-text-color_($color);
+  }
+}
+
+@mixin mdc-text-field-helper-text-validation-color($color) {
+  &:not(.mdc-text-field--disabled) {
+    @include mdc-text-field-helper-text-validation-color_($color);
+  }
+}
+
+// Private mixins
+
+@mixin mdc-text-field-helper-text-color_($color) {
+  + .mdc-text-field-helper-text {
+    @include mdc-theme-prop(color, $color);
+  }
+}
+
+@mixin mdc-text-field-helper-text-validation-color_($color) {
+  + .mdc-text-field-helper-text--validation-msg {
+    @include mdc-theme-prop(color, $color);
+  }
+}
diff --git a/packages/mdc-textfield/helper-text/mdc-text-field-helper-text.scss b/packages/mdc-textfield/helper-text/mdc-text-field-helper-text.scss
index 9af8bbc8cb7..b152ea45457 100644
--- a/packages/mdc-textfield/helper-text/mdc-text-field-helper-text.scss
+++ b/packages/mdc-textfield/helper-text/mdc-text-field-helper-text.scss
@@ -20,18 +20,12 @@
 // postcss-bem-linter: define text-field-helper-text
 
 .mdc-text-field-helper-text {
-  @include mdc-theme-prop(color, text-hint-on-light);
-
   margin: 0;
   transition: mdc-text-field-transition(opacity);
   opacity: 0;
   font-size: .75rem;
   will-change: opacity;
 
-  @include mdc-theme-dark {
-    @include mdc-theme-prop(color, text-hint-on-dark);
-  }
-
   // stylelint-disable plugin/selector-bem-pattern
   .mdc-text-field + & {
     margin-bottom: 8px;
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index 8a9ff3ea8ea..62bbdf7d6f5 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -43,6 +43,12 @@
   @include mdc-text-field-focused-bottom-line-color(primary);
   @include mdc-text-field-ink-color(text-primary-on-light);
   @include mdc-text-field-label-color($mdc-text-field-light-label);
+  @include mdc-text-field-helper-text-color(text-hint-on-light);
+
+  // Outline specific colors
+  @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);
 
   display: inline-block;
   position: relative;
@@ -127,7 +133,7 @@
     z-index: 1;
 
     &:hover ~ .mdc-text-field__idle-outline {
-      border: 1px solid $mdc-text-field-outlined-hover-border;
+      border: 1px solid;
     }
   }
 
@@ -151,7 +157,7 @@
     z-index: 2;
 
     &:hover ~ .mdc-text-field__idle-outline {
-      border: 1px solid $mdc-text-field-outlined-hover-border;
+      border: 1px solid;
     }
   }
 
@@ -166,22 +172,9 @@
   }
 
   &.mdc-text-field--focused .mdc-text-field__outline-path {
-    @include mdc-theme-prop(stroke, primary);
-
     stroke-width: 2px;
   }
 
-  &:not(.mdc-text-field--invalid) {
-    &.mdc-text-field--focused .mdc-text-field__label {
-      @include mdc-theme-prop(color, primary);
-    }
-
-    // stylelint-disable-next-line selector-max-specificity
-    &:not(.mdc-text-field--focused) .mdc-text-field__input:hover ~ .mdc-text-field__outline .mdc-text-field__outline-path {
-      stroke: $mdc-text-field-outlined-hover-border;
-    }
-  }
-
   &.mdc-text-field--disabled {
     @include mdc-text-field-outline-disabled_;
   }
diff --git a/packages/mdc-textfield/outline/_mixins.scss b/packages/mdc-textfield/outline/_mixins.scss
new file mode 100644
index 00000000000..a6a0d1b9118
--- /dev/null
+++ b/packages/mdc-textfield/outline/_mixins.scss
@@ -0,0 +1,60 @@
+//
+// 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/outline/mdc-text-field-outline.scss b/packages/mdc-textfield/outline/mdc-text-field-outline.scss
index 1c614126d47..ff13993b057 100644
--- a/packages/mdc-textfield/outline/mdc-text-field-outline.scss
+++ b/packages/mdc-textfield/outline/mdc-text-field-outline.scss
@@ -14,52 +14,53 @@
 // limitations under the License.
 //
 
+@import "./mixins";
 @import "../mixins";
 @import "../variables";
 @import "@material/theme/mixins";
 @import "@material/ripple/variables";
 
-.mdc-text-field__idle-outline {
-  @include mdc-text-field-outlined-corner-radius($mdc-text-field-border-radius);
+.mdc-text-field {
+  &__idle-outline {
+    @include mdc-text-field-outlined-corner-radius($mdc-text-field-border-radius);
 
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: calc(100% - 4px);
-  height: calc(100% - 4px);
-  transition: opacity 100ms ease;
-  border: 1px solid $mdc-text-field-outlined-idle-border;
-  opacity: 1;
-}
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: calc(100% - 4px);
+    height: calc(100% - 4px);
+    transition: opacity 100ms ease;
+    border: 1px solid;
+    opacity: 1;
+  }
+
+  &__outline {
+    @include mdc-ripple-surface;
+    @include mdc-ripple-radius;
+    @include mdc-states-base-color(text-primary-on-light);
+    @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);
 
-.mdc-text-field__outline {
-  @include mdc-ripple-surface;
-  @include mdc-ripple-radius;
-  @include mdc-states-base-color(text-primary-on-light);
-  @include mdc-states-press-opacity(map-get($mdc-ripple-dark-ink-opacities, "press"));
-  @include mdc-theme-prop(color, primary);
-  @include mdc-text-field-outlined-corner-radius($mdc-text-field-border-radius);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: calc(100% - 1px);
+    height: calc(100% - 2px);
+    transition: mdc-text-field-transition(opacity);
+    opacity: 0;
+    overflow: hidden;
 
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: calc(100% - 1px);
-  height: calc(100% - 2px);
-  transition: mdc-text-field-transition(opacity);
-  opacity: 0;
-  overflow: hidden;
+    svg {
+      position: absolute;
+      width: 100%;
+      height: 100%;
 
-  svg {
-    position: absolute;  
-    width: 100%;
-    height: 100%;  
-  
-    .mdc-text-field__outline-path {
-      stroke: $mdc-text-field-outlined-idle-border;
-      stroke-width: 1px;
-      transition: mdc-text-field-transition(stroke), mdc-text-field-transition(stroke-width),
+      .mdc-text-field__outline-path {
+        stroke-width: 1px;
+        transition: mdc-text-field-transition(stroke), mdc-text-field-transition(stroke-width),
         mdc-text-field-transition(opacity);
-      fill: transparent;
+        fill: transparent;
+      }
     }
   }
-}
+}
\ No newline at end of file