feat(textfield): Use mdc-states mixin and add support for focus shade (#1677)

Author: kfranqueiro

packages/mdc-textfield/README.md

@@ -285,13 +285,13 @@ can be controlled by passing a ripple factory argument to the constructor.
 
 ```js
 const textFieldBoxEl = document.querySelector('.mdc-text-field--box');
-const textField = new MDCTextField(textFieldBoxEl, /* foundation */ undefined, (el) => {
-  // do something with el...
-  return new MDCRipple(el);
+const textField = new MDCTextField(textFieldBoxEl, /* MDCTextFieldFoundation */ undefined, (el, foundation) => {
+  // Optionally do something with the element or the Ripple foundation...
+  return new MDCRipple(el, foundation);
 });
 ```
 
-By default the ripple factory simply calls `new MDCRipple(el)` and returns the result.
+By default the ripple factory simply calls `new MDCRipple(el, foundation)` and returns the result.
 
 #### MDCTextField API
 

packages/mdc-textfield/index.js

@@ -16,7 +16,9 @@
  */
 
 import MDCComponent from '@material/base/component';
-import {MDCRipple} from '@material/ripple';
+import {MDCRipple, MDCRippleFoundation} from '@material/ripple';
+import {getMatchesProperty} from '@material/ripple/util';
+
 
 import {cssClasses, strings} from './constants';
 import {MDCTextFieldAdapter} from './adapter';
@@ -63,13 +65,20 @@ class MDCTextField extends MDCComponent {
    * creates a new MDCTextFieldBottomLine.
    */
   initialize(
-    rippleFactory = (el) => new MDCRipple(el),
+    rippleFactory = (el, foundation) => new MDCRipple(el, foundation),
     bottomLineFactory = (el) => new MDCTextFieldBottomLine(el)) {
     this.input_ = this.root_.querySelector(strings.INPUT_SELECTOR);
     this.label_ = this.root_.querySelector(strings.LABEL_SELECTOR);
     this.ripple = null;
     if (this.root_.classList.contains(cssClasses.BOX)) {
-      this.ripple = rippleFactory(this.root_);
+      const MATCHES = getMatchesProperty(HTMLElement.prototype);
+      const adapter = Object.assign(MDCRipple.createAdapter(this), {
+        isSurfaceActive: () => this.input_[MATCHES](':active'),
+        registerInteractionHandler: (type, handler) => this.input_.addEventListener(type, handler),
+        deregisterInteractionHandler: (type, handler) => this.input_.removeEventListener(type, handler),
+      });
+      const foundation = new MDCRippleFoundation(adapter);
+      this.ripple = rippleFactory(this.root_, foundation);
     };
     if (!this.root_.classList.contains(cssClasses.TEXTAREA)) {
       const bottomLineElement = this.root_.querySelector(strings.BOTTOM_LINE_SELECTOR);

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

@@ -141,7 +141,7 @@
 
 .mdc-text-field--box {
   @include mdc-ripple-surface;
-  @include mdc-ripple-color(black, .04);
+  @include mdc-states(text-primary-on-light, $has-nested-focusable-element: true);
   @include mdc-ripple-radius;
   @include mdc-text-field-box-corner-radius($mdc-text-field-border-radius);
 
@@ -156,7 +156,7 @@
   }
 
   @include mdc-theme-dark(".mdc-text-field", true) {
-    @include mdc-ripple-color(white, .05);
+    @include mdc-states(text-primary-on-dark, $has-nested-focusable-element: true);
   }
 
   // NOTE: For some reason, stylelint complains that the patterns below don't follow BEM.