feat(text-field): Move bottom-line to separate package (#2037)

BREAKING CHANGE: Moves the text-field bottom-line element to a new package (mdc-line-ripple), so we can reuse it in other components. The HTML class name for the bottom-line element has changed from mdc-text-field__bottom-line to mdc-line-ripple. Removes the animation end events from the bottom-line. Renames the bottom-line to line-ripple.

demos/snackbar.html

@@ -125,14 +125,14 @@ <h2 class="mdc-typography--title">Basic Example</h2>
         <div class="mdc-text-field">
           <input type="text" id="message" class="mdc-text-field__input" value="Message deleted">
           <label class="mdc-text-field__label" for="message">Message Text</label>
-          <div class="mdc-text-field__bottom-line"></div>
+          <div class="mdc-line-ripple"></div>
         </div>
         <br/>
 
         <div class="mdc-text-field">
           <input type="text" id="action" class="mdc-text-field__input" value="Undo">
           <label class="mdc-text-field__label" for="action">Action Text</label>
-          <div class="mdc-text-field__bottom-line"></div>
+          <div class="mdc-line-ripple"></div>
         </div>
         <br/>
 

demos/text-field.html

@@ -67,7 +67,7 @@
         <div class="mdc-text-field">
           <input type="text" class="mdc-text-field__input" id="my-text-field" aria-controls="my-text-field-helper-text">
           <label for="my-text-field" class="mdc-text-field__label">Text Field</label>
-          <div class="mdc-text-field__bottom-line"></div>
+          <div class="mdc-line-ripple"></div>
         </div>
       </section>
 
@@ -77,7 +77,7 @@ <h2>Full Functionality JS Component (Floating Label, Validation)</h2>
           <div class="mdc-text-field">
             <input type="text" class="mdc-text-field__input" id="full-func-text-field" aria-controls="my-text-field-helper-text">
             <label for="full-func-text-field" class="mdc-text-field__label">Email Address</label>
-            <div class="mdc-text-field__bottom-line"></div>
+            <div class="mdc-line-ripple"></div>
           </div>
           <p id="my-text-field-helper-text" class="mdc-text-field-helper-text"
              aria-hidden="true" style="display:none;">
@@ -127,7 +127,7 @@ <h2>Password field with validation</h2>
                  aria-controls="pw-validation-msg"
                  autocomplete="current-password">
           <label for="pw" class="mdc-text-field__label">Choose password</label>
-          <div class="mdc-text-field__bottom-line"></div>
+          <div class="mdc-line-ripple"></div>
         </div>
         <p class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg"
            id="pw-validation-msg">
@@ -204,7 +204,7 @@ <h2>Text Field box</h2>
             <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>
+            <div class="mdc-line-ripple"></div>
           </div>
           <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
             id="box-text-field-helper-text">
@@ -304,7 +304,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
             <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
             <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 class="mdc-line-ripple"></div>
           </div>
         </div>
         <div id="demo-tf-box-trailing-wrapper">
@@ -313,7 +313,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
             <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 class="mdc-line-ripple"></div>
           </div>
         </div>
         <div id="demo-tf-outlined-leading-wrapper">
@@ -377,7 +377,7 @@ <h2>Preventing FOUC</h2>
           <label for="fouc" class="mdc-text-field__label mdc-text-field__label--float-above">
             Label floating above
           </label>
-          <div class="mdc-text-field__bottom-line"></div>
+          <div class="mdc-line-ripple"></div>
         </div>
       </section>
 
@@ -412,7 +412,7 @@ <h2>Full-Width Text Field and Textarea</h2>
         <div id="demo-fullwidth-wrapper">
           <div class="mdc-text-field mdc-text-field--fullwidth">
             <input class="mdc-text-field__input" type="text" placeholder="Subject" aria-label="Subject">
-            <div class="mdc-text-field__bottom-line"></div>
+            <div class="mdc-line-ripple"></div>
           </div>
           <div class="mdc-text-field mdc-text-field--textarea mdc-text-field--fullwidth full-width-textarea-example">
             <textarea id="full-width-textarea" class="mdc-text-field__input" rows="8"></textarea>

demos/text-field.scss

@@ -26,7 +26,7 @@
 
   @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-line-ripple-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($idle-border);
@@ -71,7 +71,7 @@
 .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);
+  @include mdc-text-field-line-ripple-color(blue);
 
   &.mdc-text-field--focused {
     @include mdc-text-field-label-color(rgba(blue, .87));
@@ -81,7 +81,7 @@
 .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);
+  @include mdc-text-field-line-ripple-color(orange);
 
   &.mdc-text-field--focused {
     @include mdc-text-field-label-color(rgba(orange, .87));
@@ -96,7 +96,7 @@
 
   @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-line-ripple-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($idle-border);

demos/theme/index.html

@@ -674,7 +674,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
           <div class="mdc-select__surface" tabindex="0">
             <div class="mdc-select__label">Pick a food group</div>
             <div class="mdc-select__selected-text"></div>
-            <div class="mdc-select__bottom-line"></div>
+            <div class="mdc-select__line-ripple"></div>
           </div>
           <div class="mdc-menu mdc-select__menu">
             <ul class="mdc-list mdc-menu__items">
@@ -837,7 +837,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
                    aria-controls="demo-text-field-default-helper-text"
                    autocomplete="email">
             <label for="demo-text-field-default" class="mdc-text-field__label">Name (optional)</label>
-            <div class="mdc-text-field__bottom-line"></div>
+            <div class="mdc-line-ripple"></div>
           </div>
           <p class="mdc-text-field-helper-text" id="demo-text-field-default-helper-text"
              aria-hidden="true">
@@ -852,7 +852,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
                    autocomplete="email"
                    required>
             <label for="demo-text-field-required" class="mdc-text-field__label">Email (required)</label>
-            <div class="mdc-text-field__bottom-line"></div>
+            <div class="mdc-line-ripple"></div>
           </div>
           <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" id="demo-text-field-required-helper-text">
             A valid email address is required
@@ -864,7 +864,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
                    id="demo-text-field-box"
                    aria-controls="name-validation-message">
             <label for="demo-text-field-box" class="mdc-text-field__label">With <code>--box</code> modifier</label>
-            <div class="mdc-text-field__bottom-line"></div>
+            <div class="mdc-line-ripple"></div>
           </div>
           <p class="mdc-text-field-helper-text" id="demo-text-field-box-helper-text"
              aria-hidden="true">

demos/theme/theme-dark.scss

@@ -39,7 +39,7 @@ $mdc-theme-background: $material-color-grey-900;
 .demo-text-field {
   @include mdc-text-field-ink-color(text-primary-on-dark);
   @include mdc-text-field-label-color(text-secondary-on-dark);
-  @include mdc-text-field-bottom-line-color(text-hint-on-dark);
+  @include mdc-text-field-line-ripple-color(text-hint-on-dark);
 }
 
 .demo-checkbox-wrapper,

docs/getting-started.md

@@ -115,7 +115,7 @@ Replace the contents of the `<body>` tag in `index.html` with the following:
           <label for="firstname" class="mdc-text-field__label">
             First Name
           </label>
-          <div class="mdc-text-field__bottom-line"></div>
+          <div class="mdc-line-ripple"></div>
         </div>
       </div>
 
@@ -125,7 +125,7 @@ Replace the contents of the `<body>` tag in `index.html` with the following:
           <label for="lastname" class="mdc-text-field__label">
             Last Name
           </label>
-          <div class="mdc-text-field__bottom-line"></div>
+          <div class="mdc-line-ripple"></div>
         </div>
       </div>
     </div>

docs/migrating-from-mdl.md

@@ -93,7 +93,7 @@ MDC Web:
 <div class="mdc-text-field">
   <input class="mdc-text-field__input" type="text" id="input">
   <label for="input" class="mdc-text-field__label">Input Label</label>
-  <div class="mdc-text-field__bottom-line"></div>
+  <div class="mdc-line-ripple"></div>
 </div>
 ```
 
@@ -119,7 +119,7 @@ element, with the component’s class name as the value. For example:
 <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
   <input class="mdc-text-field__input" type="text" id="input">
   <label for="input" class="mdc-text-field__label">Input Label</label>
-  <div class="mdc-text-field__bottom-line"></div>
+  <div class="mdc-line-ripple"></div>
 </div>
 ```
 
@@ -200,7 +200,7 @@ Like in MDL, styling components with CSS classes is simply a matter of applied t
 <div class="mdc-text-field">
   <input type="text" id="my-text-field" class="mdc-text-field__input">
   <label class="mdc-text-field__label" for="my-text-field">Hint text</label>
-  <div class="mdc-text-field__bottom-line"></div>
+  <div class="mdc-line-ripple"></div>
 </div>
 ```
 

package.json

@@ -122,6 +122,7 @@
           "animation",
           "auto-init",
           "base",
+          "line-ripple",
           "button",
           "card",
           "checkbox",
@@ -163,6 +164,7 @@
   "closureWhitelist": [
     "mdc-animation",
     "mdc-base",
+    "mdc-line-ripple",
     "mdc-checkbox",
     "mdc-form-field",
     "mdc-icon-toggle",

packages/material-components-web/index.js

@@ -23,6 +23,7 @@ import * as formField from '@material/form-field/index';
 import * as gridList from '@material/grid-list/index';
 import * as iconToggle from '@material/icon-toggle/index';
 import * as linearProgress from '@material/linear-progress/index';
+import * as lineRipple from '@material/line-ripple/index';
 import * as menu from '@material/menu/index';
 import * as radio from '@material/radio/index';
 import * as ripple from '@material/ripple/index';
@@ -35,6 +36,7 @@ import * as textField from '@material/textfield/index';
 import * as toolbar from '@material/toolbar/index';
 
 // Register all components
+autoInit.register('MDCLineRipple', lineRipple.MDCLineRipple);
 autoInit.register('MDCCheckbox', checkbox.MDCCheckbox);
 autoInit.register('MDCDialog', dialog.MDCDialog);
 autoInit.register('MDCPersistentDrawer', drawer.MDCPersistentDrawer);
@@ -58,6 +60,7 @@ autoInit.register('MDCToolbar', toolbar.MDCToolbar);
 export {
   autoInit,
   base,
+  lineRipple,
   checkbox,
   dialog,
   drawer,

packages/material-components-web/material-components-web.scss

@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
+@import "@material/line-ripple/mdc-line-ripple";
 @import "@material/button/mdc-button";
 @import "@material/card/mdc-card";
 @import "@material/checkbox/mdc-checkbox";

packages/material-components-web/package.json

@@ -16,6 +16,7 @@
     "@material/animation": "^0.25.0",
     "@material/auto-init": "^0.29.0",
     "@material/base": "^0.29.0",
+    "@material/line-ripple": "^0.0.0",
     "@material/button": "^0.29.0",
     "@material/card": "^0.29.0",
     "@material/checkbox": "^0.29.0",

packages/mdc-auto-init/README.md

@@ -33,7 +33,7 @@ writing the markup, simply insert a script tag that calls `mdc.autoInit()`. Make
 <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
   <input class="mdc-text-field__input" type="text" id="input">
   <label for="input" class="mdc-text-field__label">Input Label</label>
-  <div class="mdc-text-field__bottom-line"></div>
+  <div class="mdc-line-ripple"></div>
 </div>
 
 <!-- at the bottom of the page -->
@@ -53,7 +53,7 @@ using a property whose name is the value of `data-mdc-auto-init`. For example, g
 <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
   <input class="mdc-text-field__input" type="text" id="input">
   <label for="input" class="mdc-text-field__label">Input Label</label>
-  <div class="mdc-text-field__bottom-line"></div>
+  <div class="mdc-line-ripple"></div>
 </div>
 ```
 

packages/mdc-textfield/bottom-line/README.md → packages/mdc-line-ripple/README.md

@@ -1,15 +1,14 @@
 <!--docs:
-title: "Text Field Bottom Line"
+title: "Line Ripple"
 layout: detail
 section: components
-excerpt: "The bottom line indicates where to enter text, displayed below the label"
-iconId: text_field
-path: /catalog/input-controls/text-field/bottom-line/
+excerpt: "The line ripple is used to highight user specified text above it."
+path: /catalog/input-controls/line-ripple/
 -->
 
-# Text Field Bottom Line
+# Line Ripple
 
-The bottom line indicates where to enter text, displayed below the label. When a text field is active or contains an error, the line’s color and thickness vary.
+The line ripple is used to highlight user specified text above it. When a the line ripple is active, the line’s color and thickness vary.
 
 ## Design & API Documentation
 
@@ -24,7 +23,7 @@ The bottom line indicates where to enter text, displayed below the label. When a
 ### HTML Structure
 
 ```html
-<div class="mdc-text-field__bottom-line"></div>
+<div class="mdc-line-ripple"></div>
 ```
 
 ### Usage within `mdc-text-field`
@@ -33,24 +32,27 @@ The bottom line indicates where to enter text, displayed below the label. When a
 <div class="mdc-text-field">
   <input type="text" id="my-text-field-id" class="mdc-text-field__input">
   <label class="mdc-text-field__label" for="my-text-field-id">Hint text</label>
-  <div class="mdc-text-field__bottom-line"></div>
+  <div class="mdc-line-ripple"></div>
 </div>
 ```
 
 ### CSS Classes
 
 CSS Class | Description
 --- | ---
-`mdc-text-field-bottom-line` | Mandatory
-`mdc-text-field-bottom-line--active` | Styles the bottom line as an active bottom line
+`mdc-line-ripple` | Mandatory
+`mdc-line-ripple--active` | Styles the line ripple as an active line ripple
+`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple. 
 
-### `MDCTextFieldBottomLine`
+### Sass Mixins
 
-##### `MDCTextFieldBottomLine.foundation`
+### `MDCLineRipple`
 
-This allows the parent `MDCTextField` component to access the public methods on the `MDCTextFieldBottomLineFoundation` class.
+`activate() => void` | Proxies to the foundations `activate()` method.
+`deactivate() => void` |  Proxies to the foundations `deactivate()` method.
+`setRippleCenter(number: xCoordinate) => void` | Proxies to the foundations `setRippleCenter(number: xCoordinate)` method.
 
-### `MDCTextFieldBottomLineAdapter`
+### `MDCLineRippleAdapter`
 
 Method Signature | Description
 --- | ---
@@ -59,13 +61,12 @@ Method Signature | Description
 `setAttr(attr: string, value: string) => void` | Sets an attribute with a given value on the root element
 `registerEventHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the root element for a given event
 `deregisterEventHandler(handler: EventListener) => void` | Deregisters an event listener on the root element for a given event
-`notifyAnimationEnd() => void` | Emits a custom event "MDCTextFieldBottomLine:animation-end" denoting the bottom line has finished its animation; either the activate or deactivate animation
 
-### `MDCTextFieldBottomLineFoundation`
+### `MDCLineRippleFoundation`
 
 Method Signature | Description
 --- | ---
-`activate() => void` | Activates the bottom line
-`deactivate => void` | Deactivates the bottom line
-`setTransformOrigin(evt: Event) => void` | Sets the transform origin given a user's click location
+`activate() => void` | Activates the line ripple
+`deactivate() => void` |  Deactivates the line ripple
+`setRippleCenter(number: xCoordinate) => void` | Sets the center of the ripple to the `xCoordinate` given.
 `handleTransitionEnd(evt: Event) => void` | Handles a transition end event

packages/mdc-line-ripple/_functions.scss

@@ -0,0 +1,21 @@
+//
+// 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.
+//
+
+@import "@material/animation/variables";
+
+@function mdc-line-ripple-transition-value($property) {
+  @return #{$property} 180ms $mdc-animation-standard-curve-timing-function;
+}