diff --git a/demos/snackbar.html b/demos/snackbar.html index d2833188d62..c87fd24768e 100644 --- a/demos/snackbar.html +++ b/demos/snackbar.html @@ -125,14 +125,14 @@

Basic Example

-
+

-
+

diff --git a/demos/text-field.html b/demos/text-field.html index fad985742d4..b3280f4019d 100644 --- a/demos/text-field.html +++ b/demos/text-field.html @@ -67,7 +67,7 @@
-
+
@@ -77,7 +77,7 @@

Full Functionality JS Component (Floating Label, Validation)

-
+

Password field with validation

aria-controls="pw-validation-msg" autocomplete="current-password"> -
+

@@ -204,7 +204,7 @@

Text Field box

-
+

@@ -304,7 +304,7 @@

Text Field - Leading/Trailing icons

event -
+
@@ -313,7 +313,7 @@

Text Field - Leading/Trailing icons

delete -
+
@@ -377,7 +377,7 @@

Preventing FOUC

-
+
@@ -412,7 +412,7 @@

Full-Width Text Field and Textarea

-
+
diff --git a/demos/text-field.scss b/demos/text-field.scss index 9be6aed9df1..b8e506b1f84 100644 --- a/demos/text-field.scss +++ b/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); diff --git a/demos/theme/index.html b/demos/theme/index.html index 7567dcdc244..9d9c921c23f 100644 --- a/demos/theme/index.html +++ b/demos/theme/index.html @@ -674,7 +674,7 @@

Pick a food group
-
+
    @@ -837,7 +837,7 @@

    aria-controls="demo-text-field-default-helper-text" autocomplete="email"> -
    +

autocomplete="email" required> -
+

A valid email address is required @@ -864,7 +864,7 @@

id="demo-text-field-box" aria-controls="name-validation-message"> -
+

+
@@ -125,7 +125,7 @@ Replace the contents of the `` tag in `index.html` with the following: -
+
diff --git a/docs/migrating-from-mdl.md b/docs/migrating-from-mdl.md index 0fac99d4739..1f5f6d4a62a 100644 --- a/docs/migrating-from-mdl.md +++ b/docs/migrating-from-mdl.md @@ -93,7 +93,7 @@ MDC Web:
-
+
``` @@ -119,7 +119,7 @@ element, with the component’s class name as the value. For example:
-
+
``` @@ -200,7 +200,7 @@ Like in MDL, styling components with CSS classes is simply a matter of applied t
-
+
``` diff --git a/package.json b/package.json index b2c33a007c2..4b105925c3a 100644 --- a/package.json +++ b/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", diff --git a/packages/material-components-web/index.js b/packages/material-components-web/index.js index ad58905fe4e..f40011e5e90 100644 --- a/packages/material-components-web/index.js +++ b/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, diff --git a/packages/material-components-web/material-components-web.scss b/packages/material-components-web/material-components-web.scss index 8b7e5fd96f1..71626ecb0cb 100644 --- a/packages/material-components-web/material-components-web.scss +++ b/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"; diff --git a/packages/material-components-web/package.json b/packages/material-components-web/package.json index 2830c4b3739..173f2839e7f 100644 --- a/packages/material-components-web/package.json +++ b/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", diff --git a/packages/mdc-auto-init/README.md b/packages/mdc-auto-init/README.md index 03d01d0453e..af64a85296c 100644 --- a/packages/mdc-auto-init/README.md +++ b/packages/mdc-auto-init/README.md @@ -33,7 +33,7 @@ writing the markup, simply insert a script tag that calls `mdc.autoInit()`. Make
-
+
@@ -53,7 +53,7 @@ using a property whose name is the value of `data-mdc-auto-init`. For example, g
-
+
``` diff --git a/packages/mdc-textfield/bottom-line/README.md b/packages/mdc-line-ripple/README.md similarity index 51% rename from packages/mdc-textfield/bottom-line/README.md rename to packages/mdc-line-ripple/README.md index 06be255dd49..b520ac6237b 100644 --- a/packages/mdc-textfield/bottom-line/README.md +++ b/packages/mdc-line-ripple/README.md @@ -1,15 +1,14 @@ -# 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 -
+
``` ### Usage within `mdc-text-field` @@ -33,7 +32,7 @@ The bottom line indicates where to enter text, displayed below the label. When a
-
+
``` @@ -41,16 +40,19 @@ The bottom line indicates where to enter text, displayed below the label. When a 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 diff --git a/packages/mdc-line-ripple/_functions.scss b/packages/mdc-line-ripple/_functions.scss new file mode 100644 index 00000000000..45ff870b4f3 --- /dev/null +++ b/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; +} diff --git a/packages/mdc-line-ripple/_mixins.scss b/packages/mdc-line-ripple/_mixins.scss new file mode 100644 index 00000000000..32cae008179 --- /dev/null +++ b/packages/mdc-line-ripple/_mixins.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. +// + +// Public + +@mixin mdc-line-ripple-color($color) { + @include mdc-theme-prop(background-color, $color); +} diff --git a/packages/mdc-textfield/bottom-line/adapter.js b/packages/mdc-line-ripple/adapter.js similarity index 65% rename from packages/mdc-textfield/bottom-line/adapter.js rename to packages/mdc-line-ripple/adapter.js index e1053578132..3998ec6d9d7 100644 --- a/packages/mdc-textfield/bottom-line/adapter.js +++ b/packages/mdc-line-ripple/adapter.js @@ -1,6 +1,6 @@ /** * @license - * Copyright 2017 Google Inc. All Rights Reserved. + * 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. @@ -18,55 +18,54 @@ /* eslint no-unused-vars: [2, {"args": "none"}] */ /** - * Adapter for MDC TextField Bottom Line. + * Adapter for MDC TextField Line Ripple. * * Defines the shape of the adapter expected by the foundation. Implement this - * adapter to integrate the TextField bottom line into your framework. See + * adapter to integrate the line ripple into your framework. See * https://github.com/material-components/material-components-web/blob/master/docs/authoring-components.md * for more information. * * @record */ -class MDCTextFieldBottomLineAdapter { +class MDCLineRippleAdapter { /** - * Adds a class to the bottom line element. + * Adds a class to the line ripple element. * @param {string} className */ addClass(className) {} /** - * Removes a class from the bottom line element. + * Removes a class from the line ripple element. * @param {string} className */ removeClass(className) {} /** - * Sets an attribute with a given value on the bottom line element. + * @param {string} className + * @return {boolean} + */ + hasClass(className) {} + + /** + * Sets an attribute with a given value on the line ripple element. * @param {string} attr * @param {string} value */ setAttr(attr, value) {} /** - * Registers an event listener on the bottom line element for a given event. + * Registers an event listener on the line ripple element for a given event. * @param {string} evtType * @param {function(!Event): undefined} handler */ registerEventHandler(evtType, handler) {} /** - * Deregisters an event listener on the bottom line element for a given event. + * Deregisters an event listener on the line ripple element for a given event. * @param {string} evtType * @param {function(!Event): undefined} handler */ deregisterEventHandler(evtType, handler) {} - - /** - * Emits a custom event "MDCTextFieldBottomLine:animation-end" denoting the - * bottom line has finished its animation; either the activate or - * deactivate animation - */ - notifyAnimationEnd() {} } -export default MDCTextFieldBottomLineAdapter; +export default MDCLineRippleAdapter; diff --git a/packages/mdc-textfield/bottom-line/constants.js b/packages/mdc-line-ripple/constants.js similarity index 71% rename from packages/mdc-textfield/bottom-line/constants.js rename to packages/mdc-line-ripple/constants.js index 2d3f432c5f4..d6404974d9d 100644 --- a/packages/mdc-textfield/bottom-line/constants.js +++ b/packages/mdc-line-ripple/constants.js @@ -1,6 +1,6 @@ /** * @license - * Copyright 2017 Google Inc. All Rights Reserved. + * 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. @@ -15,14 +15,10 @@ * limitations under the License. */ -/** @enum {string} */ -const strings = { - ANIMATION_END_EVENT: 'MDCTextFieldBottomLine:animation-end', -}; - /** @enum {string} */ const cssClasses = { - BOTTOM_LINE_ACTIVE: 'mdc-text-field__bottom-line--active', + LINE_RIPPLE_ACTIVE: 'mdc-line-ripple--active', + LINE_RIPPLE_DEACTIVATING: 'mdc-line-ripple--deactivating', }; -export {strings, cssClasses}; +export {cssClasses}; diff --git a/packages/mdc-textfield/bottom-line/foundation.js b/packages/mdc-line-ripple/foundation.js similarity index 55% rename from packages/mdc-textfield/bottom-line/foundation.js rename to packages/mdc-line-ripple/foundation.js index efed5285737..cd8a3964711 100644 --- a/packages/mdc-textfield/bottom-line/foundation.js +++ b/packages/mdc-line-ripple/foundation.js @@ -16,46 +16,41 @@ */ import MDCFoundation from '@material/base/foundation'; -import MDCTextFieldBottomLineAdapter from './adapter'; -import {cssClasses, strings} from './constants'; +import MDCLineRippleAdapter from './adapter'; +import {cssClasses} from './constants'; /** - * @extends {MDCFoundation} + * @extends {MDCFoundation} * @final */ -class MDCTextFieldBottomLineFoundation extends MDCFoundation { +class MDCLineRippleFoundation extends MDCFoundation { /** @return enum {string} */ static get cssClasses() { return cssClasses; } - /** @return enum {string} */ - static get strings() { - return strings; - } - /** - * {@see MDCTextFieldBottomLineAdapter} for typing information on parameters and return + * {@see MDCLineRippleAdapter} for typing information on parameters and return * types. - * @return {!MDCTextFieldBottomLineAdapter} + * @return {!MDCLineRippleAdapter} */ static get defaultAdapter() { - return /** @type {!MDCTextFieldBottomLineAdapter} */ ({ + return /** @type {!MDCLineRippleAdapter} */ ({ addClass: () => {}, removeClass: () => {}, + hasClass: () => {}, setAttr: () => {}, registerEventHandler: () => {}, deregisterEventHandler: () => {}, - notifyAnimationEnd: () => {}, }); } /** - * @param {!MDCTextFieldBottomLineAdapter} adapter + * @param {!MDCLineRippleAdapter=} adapter */ - constructor(adapter) { - super(Object.assign(MDCTextFieldBottomLineFoundation.defaultAdapter, adapter)); + constructor(adapter = /** @type {!MDCLineRippleAdapter} */ ({})) { + super(Object.assign(MDCLineRippleFoundation.defaultAdapter, adapter)); /** @private {function(!Event): undefined} */ this.transitionEndHandler_ = (evt) => this.handleTransitionEnd(evt); @@ -70,31 +65,29 @@ class MDCTextFieldBottomLineFoundation extends MDCFoundation { } /** - * Activates the bottom line + * Activates the line ripple */ activate() { - this.adapter_.addClass(cssClasses.BOTTOM_LINE_ACTIVE); + this.adapter_.removeClass(cssClasses.LINE_RIPPLE_DEACTIVATING); + this.adapter_.addClass(cssClasses.LINE_RIPPLE_ACTIVE); } /** - * Sets the transform origin given a user's click location. - * @param {!Event} evt + * Sets the center of the ripple animation to the given X coordinate. + * @param {!number} xCoordinate */ - setTransformOrigin(evt) { - const targetClientRect = evt.target.getBoundingClientRect(); - const evtCoords = {x: evt.clientX, y: evt.clientY}; - const normalizedX = evtCoords.x - targetClientRect.left; + setRippleCenter(xCoordinate) { const attributeString = - `transform-origin: ${normalizedX}px center`; + `transform-origin: ${xCoordinate}px center`; this.adapter_.setAttr('style', attributeString); } /** - * Deactivates the bottom line + * Deactivates the line ripple */ deactivate() { - this.adapter_.removeClass(cssClasses.BOTTOM_LINE_ACTIVE); + this.adapter_.addClass(cssClasses.LINE_RIPPLE_DEACTIVATING); } /** @@ -102,12 +95,17 @@ class MDCTextFieldBottomLineFoundation extends MDCFoundation { * @param {!Event} evt */ handleTransitionEnd(evt) { - // Wait for the bottom line to be either transparent or opaque + // Wait for the line ripple to be either transparent or opaque // before emitting the animation end event + const isDeactivating = this.adapter_.hasClass(cssClasses.LINE_RIPPLE_DEACTIVATING); + if (evt.propertyName === 'opacity') { - this.adapter_.notifyAnimationEnd(); + if (isDeactivating) { + this.adapter_.removeClass(cssClasses.LINE_RIPPLE_ACTIVE); + this.adapter_.removeClass(cssClasses.LINE_RIPPLE_DEACTIVATING); + } } } } -export default MDCTextFieldBottomLineFoundation; +export default MDCLineRippleFoundation; diff --git a/packages/mdc-textfield/bottom-line/index.js b/packages/mdc-line-ripple/index.js similarity index 54% rename from packages/mdc-textfield/bottom-line/index.js rename to packages/mdc-line-ripple/index.js index 996b7dd9cfc..588612ab587 100644 --- a/packages/mdc-textfield/bottom-line/index.js +++ b/packages/mdc-line-ripple/index.js @@ -1,6 +1,6 @@ /** * @license - * Copyright 2017 Google Inc. All Rights Reserved. + * 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. @@ -17,44 +17,58 @@ import MDCComponent from '@material/base/component'; -import MDCTextFieldBottomLineAdapter from './adapter'; -import MDCTextFieldBottomLineFoundation from './foundation'; +import MDCLineRippleAdapter from './adapter'; +import MDCLineRippleFoundation from './foundation'; /** - * @extends {MDCComponent} + * @extends {MDCComponent} * @final */ -class MDCTextFieldBottomLine extends MDCComponent { +class MDCLineRipple extends MDCComponent { /** * @param {!Element} root - * @return {!MDCTextFieldBottomLine} + * @return {!MDCLineRipple} */ static attachTo(root) { - return new MDCTextFieldBottomLine(root); + return new MDCLineRipple(root); } /** - * @return {!MDCTextFieldBottomLineFoundation} + * Activates the line ripple */ - get foundation() { - return this.foundation_; + activate() { + this.foundation_.activate(); } /** - * @return {!MDCTextFieldBottomLineFoundation} + * Deactivates the line ripple + */ + deactivate() { + this.foundation_.deactivate(); + } + + /** + * Sets the transform origin given a user's click location. The `rippleCenter` is the + * x-coordinate of the middle of the ripple. + * @param {!number} xCoordinate + */ + setRippleCenter(xCoordinate) { + this.foundation_.setRippleCenter(xCoordinate); + } + + /** + * @return {!MDCLineRippleFoundation} */ getDefaultFoundation() { - return new MDCTextFieldBottomLineFoundation(/** @type {!MDCTextFieldBottomLineAdapter} */ (Object.assign({ + return new MDCLineRippleFoundation(/** @type {!MDCLineRippleAdapter} */ (Object.assign({ addClass: (className) => this.root_.classList.add(className), removeClass: (className) => this.root_.classList.remove(className), + hasClass: (className) => this.root_.classList.contains(className), setAttr: (attr, value) => this.root_.setAttribute(attr, value), registerEventHandler: (evtType, handler) => this.root_.addEventListener(evtType, handler), deregisterEventHandler: (evtType, handler) => this.root_.removeEventListener(evtType, handler), - notifyAnimationEnd: () => { - this.emit(MDCTextFieldBottomLineFoundation.strings.ANIMATION_END_EVENT, {}); - }, }))); } } -export {MDCTextFieldBottomLine, MDCTextFieldBottomLineFoundation}; +export {MDCLineRipple, MDCLineRippleFoundation}; diff --git a/packages/mdc-textfield/bottom-line/mdc-text-field-bottom-line.scss b/packages/mdc-line-ripple/mdc-line-ripple.scss similarity index 58% rename from packages/mdc-textfield/bottom-line/mdc-text-field-bottom-line.scss rename to packages/mdc-line-ripple/mdc-line-ripple.scss index e4092e96d8d..d4a245b8f39 100644 --- a/packages/mdc-textfield/bottom-line/mdc-text-field-bottom-line.scss +++ b/packages/mdc-line-ripple/mdc-line-ripple.scss @@ -14,29 +14,28 @@ // limitations under the License. // -@import "../functions"; +@import "./functions"; @import "./mixins"; @import "@material/theme/mixins"; -// postcss-bem-linter: define textfield -.mdc-text-field { - &__bottom-line { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 2px; - transform: scaleX(0); - transition: mdc-text-field-transition(transform), mdc-text-field-transition(opacity); - opacity: 0; - z-index: 2; - } +// postcss-bem-linter: define line-ripple +.mdc-line-ripple { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 2px; + transform: scaleX(0); + transition: mdc-line-ripple-transition-value(transform), mdc-line-ripple-transition-value(opacity); + opacity: 0; + z-index: 2; +} - &__bottom-line--active { - transform: scaleX(1); - } +.mdc-line-ripple--active { + transform: scaleX(1); + opacity: 1; +} - .mdc-text-field__input:focus ~ .mdc-text-field__bottom-line { - opacity: 1; - } +.mdc-line-ripple--deactivating { + opacity: 0; } diff --git a/packages/mdc-line-ripple/package.json b/packages/mdc-line-ripple/package.json new file mode 100644 index 00000000000..89f95684a08 --- /dev/null +++ b/packages/mdc-line-ripple/package.json @@ -0,0 +1,25 @@ +{ + "name": "@material/line-ripple", + "description": "The Material Components for the web line-ripple component", + "version": "0.0.0", + "license": "Apache-2.0", + "keywords": [ + "material components", + "material design", + "lineripple", + "line-ripple" + ], + "main": "index.js", + "repository": { + "type": "git", + "url": "git+https://github.com/material-components/material-components-web.git" + }, + "publishConfig": { + "access": "public" + }, + "dependencies": { + "@material/animation": "^0.25.0", + "@material/base": "^0.29.0", + "@material/theme": "^0.29.0" + } +} diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md index 7ddcc3c716f..e542f5a6d24 100644 --- a/packages/mdc-textfield/README.md +++ b/packages/mdc-textfield/README.md @@ -42,7 +42,7 @@ npm install --save @material/textfield
-
+
``` @@ -55,7 +55,7 @@ by HTML5's form validation API.
-
+
``` @@ -74,7 +74,7 @@ Un-styled Content (**FOUC**). -
+
``` @@ -113,7 +113,7 @@ Add the `disabled` attribute to `` if the `mdc-text-field` is disabled. Y
-
+
``` @@ -134,7 +134,7 @@ Add the `disabled` attribute to `` if the `mdc-text-field` is disabled. Y See [here](outline/) for more information on using the outline sub-component. -> _NOTE_: Do not use `mdc-text-field__bottom-line` inside of `mdc-text-field` _if you plan on using `mdc-text-field--outlined`_. Bottom line should not be included as part of the DOM structure of an outlined text field. +> _NOTE_: Do not use `mdc-line-ripple` inside of `mdc-text-field` _if you plan on using `mdc-text-field--outlined`_. Bottom line should not be included as part of the DOM structure of an outlined text field. #### Helper Text @@ -170,7 +170,7 @@ these mixins within CSS selectors like `.foo-text-field:not(.mdc-text-field--foc and `.foo-tab.mdc-text-field--focused` to select your focused text-fields. To change the invalid state of your text fields, apply these mixins with CSS selectors such as `.foo-text-field.mdc-text-field--invalid`. -> _NOTE_: the `mdc-text-field-focused-bottom-line-color` mixin should be applied from the not focused class `foo-text-field:not(.mdc-tab--focused)`). +> _NOTE_: the `mdc-line-ripple-color` mixin should be applied from the not focused class `foo-text-field:not(.mdc-tab--focused)`). Mixin | Description --- | --- @@ -178,16 +178,16 @@ Mixin | Description `mdc-text-field-textarea-corner-radius($radius)` | Customizes the border radius for a `