feat(text-field): Move final JS colors to mixins. Update demos (#2006)

feat(text-field): Move final JS colors to mixins. Update demos
material-components · Jan 22, 2018 · 989c516 · 989c516
1 parent bf653a7
commit 989c516
Show file tree

Hide file tree

Showing 10 changed files with 322 additions and 140 deletions.
diff --git a/demos/text-field.html b/demos/text-field.html
@@ -119,10 +119,6 @@ <h2>Full Functionality JS Component (Floating Label, Validation)</h2>
           <input id="alternate-colors" type="checkbox">
           <label for="alternate-colors">Alternate Colors</label>
         </div>
-        <div>
-          <input id="alternate-error-colors" type="checkbox">
-          <label for="alternate-error-colors">Alternate Error Colors</label>
-        </div>
         <div>
           <input id="use-helper-text" type="checkbox">
           <label for="use-helper-text">Use Helper Text</label>
@@ -168,8 +164,7 @@ <h2>Outlined Text Field</h2>
             </div>
             <div class="mdc-text-field__idle-outline"></div>
           </div>
-          <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
-            id="name-validation-msg">
+          <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg">
             Must be at least 8 characters
           </p>
         </div>
@@ -221,7 +216,7 @@ <h2>Outlined Text Field</h2>
         <h2>Text Field box</h2>
         <div id="demo-tf-box-wrapper">
           <div id="tf-box-example" class="mdc-text-field mdc-text-field--box" data-demo-no-auto-js>
-            <input required pattern=".{8,}" type="text" id="tf-box" class="mdc-text-field__input"
+            <input type="text" id="tf-box" class="mdc-text-field__input"
                    aria-controls="name-validation-message">
             <label for="tf-box" class="mdc-text-field__label">Your Name</label>
             <div class="mdc-text-field__bottom-line"></div>
@@ -247,6 +242,14 @@ <h2>Text Field box</h2>
           <input id="box-dense" type="checkbox">
           <label for="box-dense">Dense</label>
         </div>
+        <div>
+          <input id="box-alternate-colors" type="checkbox">
+          <label for="box-alternate-colors">Alternate Colors</label>
+        </div>
+        <div>
+          <input id="box-required" type="checkbox">
+          <label for="box-required">Required</label>
+        </div>
         <script>
           demoReady(function() {
             var tfEl = document.getElementById('tf-box-example');
@@ -274,6 +277,17 @@ <h2>Text Field box</h2>
               tfEl.classList[evt.target.checked ? 'add' : 'remove']('mdc-text-field--dense');
               tf.layout();
             });
+
+            document.getElementById('box-alternate-colors').addEventListener('change', function (evt) {
+              var target = evt.target;
+              tfEl.classList[target.checked ? 'add' : 'remove']('demo-text-field-custom-colors');
+              tfEl.classList[target.checked ? 'add' : 'remove']('demo-text-field-custom-error-colors');
+            });
+
+            document.getElementById('box-required').addEventListener('change', function(evt) {
+              var target = evt.target;
+              tfEl.querySelector('.mdc-text-field__input').required = target.checked;
+            });
           });
         </script>
       </section>
@@ -346,6 +360,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="leading-trailing-alternate-colors" type="checkbox">
+          <label for="leading-trailing-alternate-colors">Alternate Colors</label>
+        </div>
         <div>
           <input id="required-leading-trailing" type="checkbox">
           <label for="required-leading-trailing">Required and must be at least 8 characters</label>
@@ -383,6 +401,10 @@ <h2>Textarea</h2>
           <input id="textarea-dark-theme" type="checkbox">
           <label for="textarea-dark-theme">Dark Theme</label>
         </div>
+        <div>
+          <input id="textarea-alternate-colors" type="checkbox">
+          <label for="textarea-alternate-colors">Alternate Colors</label>
+        </div>
         <div>
           <input id="textarea-required" type="checkbox">
           <label for="textarea-required">Required</label>
@@ -413,6 +435,14 @@ <h2>Full-Width Text Field and Textarea</h2>
           <input type="checkbox" id="fullwidth-dark-theme">
           <label for="fullwidth-dark-theme">Dark Theme</label>
         </div>
+        <div>
+          <input id="fullwidth-required" type="checkbox">
+          <label for="fullwidth-required">Required</label>
+        </div>
+        <div>
+          <input id="fullwidth-alternate-colors" type="checkbox">
+          <label for="fullwidth-alternate-colors">Alternate Colors</label>
+        </div>
       </section>
     </main>
 
@@ -447,6 +477,7 @@ <h2>Full-Width Text Field and Textarea</h2>
         var wrapperOutlinedTrailing = document.getElementById('demo-tf-outlined-trailing-wrapper');
 
         var tfIcons = document.querySelectorAll('.mdc-text-field__icon');
+        var tfInputs = tfIconContainer.querySelectorAll('.mdc-text-field__input');
 
         document.getElementById('disable-leading-trailing').addEventListener('change', function(evt) {
           tfBoxLeading.disabled = evt.target.checked;
@@ -498,12 +529,26 @@ <h2>Full-Width Text Field and Textarea</h2>
         });
 
         document.getElementById('required-leading-trailing').addEventListener('change', function(evt) {
-          tfIconContainer.querySelectorAll('.mdc-text-field__input')
-              .forEach(function(input) {
+          [].slice.call(tfInputs).forEach(function(input) {
                 input.required = evt.target.checked;
                 input.pattern = evt.target.checked ? '.{8,}' : '.*';
               });
         });
+
+        document.getElementById('leading-trailing-alternate-colors').addEventListener('change', function(evt) {
+          tfBoxLeadingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-colors');
+          tfBoxLeadingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-error-colors');
+          tfBoxLeading.layout();
+          tfBoxTrailingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-colors');
+          tfBoxTrailingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-error-colors');
+          tfBoxTrailing.layout();
+          tfOutlinedLeadingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-colors');
+          tfOutlinedLeadingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-error-colors');
+          tfOutlinedLeading.layout();
+          tfOutlinedTrailingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-colors');
+          tfOutlinedTrailingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-error-colors');
+          tfOutlinedTrailing.layout();
+        });
       });
 
       demoReady(function() {
@@ -539,9 +584,6 @@ <h2>Full-Width Text Field and Textarea</h2>
         document.getElementById('alternate-colors').addEventListener('change', function (evt) {
           var target = evt.target;
           tfRoot.classList[target.checked ? 'add' : 'remove']('demo-text-field-custom-colors');
-        });
-        document.getElementById('alternate-error-colors').addEventListener('change', function (evt) {
-          var target = evt.target;
           tfRoot.classList[target.checked ? 'add' : 'remove']('demo-text-field-custom-error-colors');
         });
         document.getElementById('use-helper-text').addEventListener('change', function(evt) {
@@ -584,9 +626,18 @@ <h2>Full-Width Text Field and Textarea</h2>
           var target = evt.target;
           section.classList[target.checked ? 'add' : 'remove']('mdc-theme--dark');
         });
+
+        document.getElementById('textarea-alternate-colors').addEventListener('change', function (evt) {
+          var target = evt.target;
+          tfRoot.classList[target.checked ? 'add' : 'remove']('demo-textarea');
+        });
+
         document.getElementById('textarea-required').addEventListener('change', function(evt) {
           var target = evt.target;
-          tfRoot.querySelector('.mdc-text-field__input').required = target.checked;
+          [].slice.call(tfRoot.querySelectorAll('.mdc-text-field__input'))
+              .forEach(function(input) {
+                input.required = target.checked;
+              })
         });
       });
 
@@ -615,6 +666,20 @@ <h2>Full-Width Text Field and Textarea</h2>
           var target = evt.target;
           section.classList[target.checked ? 'add' : 'remove']('mdc-theme--dark');
         });
+
+        document.getElementById('fullwidth-required').addEventListener('change', function(evt) {
+          var target = evt.target;
+          [].slice.call(section.querySelectorAll('.mdc-text-field__input'))
+              .forEach(function(input) {
+                input.required = target.checked;
+              })
+        });
+
+        document.getElementById('fullwidth-alternate-colors').addEventListener('change', function (evt) {
+          var target = evt.target;
+          tfRoot.classList[target.checked ? 'add' : 'remove']('demo-fullwidth-input');
+          tfMultiRoot.classList[target.checked ? 'add' : 'remove']('demo-textarea');
+        });
       });
     </script>
   </body>

diff --git a/demos/text-field.scss b/demos/text-field.scss
@@ -20,30 +20,94 @@
 
 // stylelint-disable selector-class-pattern
 .demo-text-field-custom-colors:not(.mdc-text-field--invalid) {
-  @include mdc-text-field-bottom-line-color(rgba(blue, .38));
-  @include mdc-text-field-hover-bottom-line-color(rgba(blue, .6));
-  @include mdc-text-field-focused-bottom-line-color(blue);
+  $idle-border: rgba(blue, .38);
+  $hover-border: rgba(blue, .6);
+  $focused-border: rgba(blue, 1);
+
+  @include mdc-text-field-bottom-line-color($idle-border);
+  @include mdc-text-field-hover-bottom-line-color($hover-border);
+  @include mdc-text-field-focused-bottom-line-color($focused-border);
   @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));
+  @include mdc-text-field-outline-color($idle-border);
+  @include mdc-text-field-hover-outline-color($hover-border);
+  @include mdc-text-field-focused-outline-color($focused-border);
+  @include mdc-text-field-helper-text-color($idle-border);
+  @include mdc-text-field-textarea-stroke-color($idle-border);
+  @include mdc-text-field-icon-color($hover-border);
 
   &.mdc-text-field--focused {
     @include mdc-text-field-label-color(rgba(blue, .87));
+    @include mdc-text-field-icon-color($focused-border);
   }
 }
 
-.demo-text-field-custom-error-colors.mdc-text-field--invalid {
-  @include mdc-text-field-bottom-line-color(rgba(orange, .38));
-  @include mdc-text-field-hover-bottom-line-color(rgba(orange, .6));
+.demo-textarea:not(.mdc-text-field--invalid) {
+  $idle-border: rgba(blue, .38);
+  $hover-border: rgba(blue, .6);
+  $focused-border: rgba(blue, 1);
+
+  @include mdc-text-field-ink-color(black);
+  @include mdc-text-field-label-color(rgba(blue, .5));
+  @include mdc-text-field-textarea-stroke-color($idle-border);
+
+  &.mdc-text-field--focused {
+    @include mdc-text-field-label-color(rgba(blue, .87));
+    @include mdc-text-field-textarea-stroke-color($focused-border);
+  }
+}
+
+.demo-textarea.mdc-text-field--invalid {
+  @include mdc-text-field-ink-color(orange);
+  @include mdc-text-field-label-color(rgba(orange, .5));
+  @include mdc-text-field-textarea-stroke-color(orange);
+
+  &.mdc-text-field--focused {
+    @include mdc-text-field-label-color(rgba(orange, .87));
+    @include mdc-text-field-textarea-stroke-color(orange);
+  }
+}
+
+.demo-fullwidth-input:not(.mdc-text-field--invalid) {
+  @include mdc-text-field-ink-color(black);
+  @include mdc-text-field-label-color(rgba(blue, .5));
+  @include mdc-text-field-focused-bottom-line-color(blue);
+
+  &.mdc-text-field--focused {
+    @include mdc-text-field-label-color(rgba(blue, .87));
+  }
+}
+
+.demo-fullwidth-input.mdc-text-field--invalid {
+  @include mdc-text-field-ink-color(orange);
+  @include mdc-text-field-label-color(rgba(orange, .5));
   @include mdc-text-field-focused-bottom-line-color(orange);
+
+  &.mdc-text-field--focused {
+    @include mdc-text-field-label-color(rgba(orange, .87));
+    @include mdc-text-field-fullwidth-bottom-line-color(orange);
+  }
+}
+
+.demo-text-field-custom-error-colors.mdc-text-field--invalid {
+  $idle-border: rgba(orange, .38);
+  $hover-border: rgba(orange, .6);
+  $focused-border: rgba(orange, 1);
+
+  @include mdc-text-field-bottom-line-color($idle-border);
+  @include mdc-text-field-hover-bottom-line-color($hover-border);
+  @include mdc-text-field-focused-bottom-line-color($focused-border);
   @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));
+  @include mdc-text-field-outline-color($idle-border);
+  @include mdc-text-field-hover-outline-color($hover-border);
+  @include mdc-text-field-focused-outline-color($focused-border);
+  @include mdc-text-field-helper-text-validation-color($hover-border);
+  @include mdc-text-field-textarea-stroke-color($idle-border);
+
+  @include mdc-text-field-icon-color($focused-border);
+
+  // Example for --invalid textfield when helper text is not a validation message.
+  @include mdc-text-field-helper-text-color(rgba(blue, .6));
 }
 // stylelint-enable selector-class-pattern
diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
@@ -172,14 +172,19 @@ Mixin | Description
 --- | ---
 `mdc-text-field-box-corner-radius($radius)` | Customizes the border radius for a box text field
 `mdc-text-field-textarea-corner-radius($radius)` | Customizes the border radius for a `<textarea>` text field
+`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-bottom-line-color($color)` | Customizes the color of the default bottom line of the text-field.
 `mdc-text-field-hover-bottom-line-color($color)` | Customizes the hover color of the bottom line of the text-field. 
 `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-box-fill-color($color)` | Customizes the background color of the text-field box. 
+`mdc-text-field-textarea-stroke-color($color)` | Customizes the color of the border of the textarea. 
+`mdc-text-field-textarea-fill-color($color)` | Customizes the color of the background of the textarea. 
+`mdc-text-field-fullwidth-bottom-line-color($color)` | Customizes the bottom line under a fullwidth text field. Doesn't apply to a textarea.
+`mdc-text-field-icon-color($color)` | Customizes the color for the leading/trailing icons.
 `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.