fix(text-field): Remove press ripple effect (#2419)

material-components · Mar 20, 2018 · e207f0f · e207f0f
1 parent 68ae77c
commit e207f0f
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 42 deletions.
diff --git a/packages/mdc-notched-outline/mdc-notched-outline.scss b/packages/mdc-notched-outline/mdc-notched-outline.scss
@@ -21,11 +21,6 @@
 @import "./mixins";
 
 .mdc-notched-outline {
-  @include mdc-ripple-surface;
-  @include mdc-ripple-radius-bounded;
-  @include mdc-states-base-color(text-primary-on-background);
-  @include mdc-states-press-opacity(map-get($mdc-ripple-dark-ink-opacities, "press"));
-
   position: absolute;
   top: 0;
   left: 0;

diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
@@ -310,7 +310,13 @@
 
 @mixin mdc-text-field-box_ {
   @include mdc-ripple-surface;
-  @include mdc-states(text-primary-on-background, $has-nested-focusable-element: true);
+  // Text Field Box intentionally omits press ripple, so each state needs to be specified individually
+  @include mdc-states-base-color(text-primary-on-background);
+  @include mdc-states-hover-opacity(mdc-states-opacity(text-primary-on-background, hover));
+  @include mdc-states-focus-opacity(
+    mdc-states-opacity(text-primary-on-background, focus),
+    $has-nested-focusable-element: true
+  );
   @include mdc-ripple-radius-bounded;
   @include mdc-text-field-box-corner-radius($mdc-text-field-border-radius);
   @include mdc-text-field-box-fill-color($mdc-text-field-box-background);

diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
@@ -113,20 +113,16 @@ class MDCTextField extends MDCComponent {
     }
 
     this.ripple = null;
-    if (this.root_.classList.contains(cssClasses.BOX) || this.root_.classList.contains(cssClasses.OUTLINED)) {
-      // For outlined text fields, the ripple is instantiated on the outline element instead of the root element
-      // to clip the ripple at the outline while still allowing the label to be visible beyond the outline.
-      const rippleCapableSurface = outlineElement ? this.outline_ : this;
-      const rippleRoot = outlineElement ? outlineElement : this.root_;
+    if (this.root_.classList.contains(cssClasses.BOX)) {
       const MATCHES = getMatchesProperty(HTMLElement.prototype);
       const adapter =
-        Object.assign(MDCRipple.createAdapter(/** @type {!RippleCapableSurface} */ (rippleCapableSurface)), {
+        Object.assign(MDCRipple.createAdapter(/** @type {!RippleCapableSurface} */ (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(rippleRoot, foundation);
+      this.ripple = rippleFactory(this.root_, foundation);
     }
   }
 

diff --git a/test/unit/mdc-textfield/mdc-text-field.test.js b/test/unit/mdc-textfield/mdc-text-field.test.js
@@ -94,21 +94,6 @@ test('#constructor when given a `mdc-text-field--box` element instantiates a rip
   assert.equal(component.ripple.root, root);
 });
 
-test('#constructor when given a `mdc-text-field--outlined` element instantiates a ripple on the ' +
-     'outline element', () => {
-  const root = bel`
-    <div class="mdc-text-field mdc-text-field--outlined">
-      <input type="text" class="mdc-text-field__input" id="my-text-field">
-      <label class="mdc-floating-label" for="my-text-field">My Label</label>
-      <div class="mdc-notched-outline"></div>
-      <div class="mdc-notched-outline__idle"></div>
-    </div>
-  `;
-  const outline = root.querySelector('.mdc-notched-outline');
-  const component = new MDCTextField(root, undefined, (el) => new FakeRipple(el));
-  assert.equal(component.ripple.root, outline);
-});
-
 test('#constructor sets the ripple property to `null` when not given a `mdc-text-field--box` nor ' +
      'a `mdc-text-field--outlined` subelement', () => {
   const component = new MDCTextField(getFixture());
@@ -123,20 +108,6 @@ test('#constructor when given a `mdc-text-field--box` element, initializes a def
   assert.instanceOf(component.ripple, MDCRipple);
 });
 
-test('#constructor when given a `mdc-text-field--outlined` element, initializes a default ripple when no ' +
-     'ripple factory given', () => {
-  const root = bel`
-    <div class="mdc-text-field mdc-text-field--outlined">
-      <input type="text" class="mdc-text-field__input" id="my-text-field">
-      <label class="mdc-floating-label" for="my-text-field">My Label</label>
-      <div class="mdc-notched-outline"></div>
-      <div class="mdc-notched-outline__idle"></div>
-    </div>
-  `;
-  const component = new MDCTextField(root);
-  assert.instanceOf(component.ripple, MDCRipple);
-});
-
 test('#constructor instantiates a line ripple on the `.mdc-line-ripple` element if present', () => {
   const root = getFixture();
   const component = new MDCTextField(root);