@material/textfield - npm Package Compare versions

Comparing version 0.29.0 to 0.30.0

adapter.js

@@ -19,3 +19,3 @@ /**
 /* eslint-disable no-unused-vars */
-import MDCTextFieldBottomLineFoundation from './bottom-line/foundation';
+import MDCLineRippleFoundation from '@material/line-ripple/foundation';
 import MDCTextFieldHelperTextFoundation from './helper-text/foundation';
@@ -43,3 +43,3 @@ import MDCTextFieldIconFoundation from './icon/foundation';
  * @typedef {{
- *   bottomLine: (!MDCTextFieldBottomLineFoundation|undefined),
+ *   lineRipple: (!MDCLineRippleFoundation|undefined),
  *   helperText: (!MDCTextFieldHelperTextFoundation|undefined),
@@ -79,2 +79,3 @@ *   icon: (!MDCTextFieldIconFoundation|undefined),
    * @param {string} className
+   * @return {boolean}
    */
@@ -112,16 +113,2 @@ hasClass(className) {}
   /**
-   * Registers an event listener on the bottom line element for a given event.
-   * @param {string} evtType
-   * @param {function(!Event): undefined} handler
-   */
-  registerBottomLineEventHandler(evtType, handler) {}
-
-  /**
-   * Deregisters an event listener on the bottom line element for a given event.
-   * @param {string} evtType
-   * @param {function(!Event): undefined} handler
-   */
-  deregisterBottomLineEventHandler(evtType, handler) {}
-
-  /**
    * Returns an object representing the native text input element, with a
@@ -150,4 +137,20 @@ * similar API shape. The object returned should include the value, disabled
   isRtl() {}
+
+  /**
+   * Activates the line ripple.
+   */
+  activateLineRipple() {}
+
+  /**
+   * Deactivates the line ripple.
+   */
+  deactivateLineRipple() {}
+
+  /**
+   * Sets the transform origin of the line ripple.
+   * @param {number} normalizedX
+   */
+  setLineRippleTransformOrigin(normalizedX) {}
 }
 
 export {MDCTextFieldAdapter, NativeInputType, FoundationMapType};

constants.js

@@ -25,3 +25,3 @@ /**
   OUTLINE_SELECTOR: '.mdc-text-field__outline',
-  BOTTOM_LINE_SELECTOR: '.mdc-text-field__bottom-line',
+  BOTTOM_LINE_SELECTOR: '.mdc-line-ripple',
 };
@@ -28,0 +28,0 @@

foundation.js

@@ -20,4 +20,4 @@ /**
 import {MDCTextFieldAdapter, NativeInputType, FoundationMapType} from './adapter';
-import MDCTextFieldBottomLineFoundation from './bottom-line/foundation';
 /* eslint-disable no-unused-vars */
+import MDCLineRippleFoundation from '@material/line-ripple/foundation';
 import MDCTextFieldHelperTextFoundation from './helper-text/foundation';
@@ -65,7 +65,8 @@ import MDCTextFieldIconFoundation from './icon/foundation';
       deregisterInputInteractionHandler: () => {},
-      registerBottomLineEventHandler: () => {},
-      deregisterBottomLineEventHandler: () => {},
       getNativeInput: () => {},
       isFocused: () => {},
       isRtl: () => {},
+      activateLineRipple: () => {},
+      deactivateLineRipple: () => {},
+      setLineRippleTransformOrigin: () => {},
     });
@@ -75,11 +76,8 @@ }
   /**
-   * @param {!MDCTextFieldAdapter=} adapter
+   * @param {!MDCTextFieldAdapter} adapter
    * @param {!FoundationMapType=} foundationMap Map from subcomponent names to their subfoundations.
    */
-  constructor(adapter = /** @type {!MDCTextFieldAdapter} */ ({}),
-    foundationMap = /** @type {!FoundationMapType} */ ({})) {
+  constructor(adapter, foundationMap = /** @type {!FoundationMapType} */ ({})) {
     super(Object.assign(MDCTextFieldFoundation.defaultAdapter, adapter));
 
-    /** @type {!MDCTextFieldBottomLineFoundation|undefined} */
-    this.bottomLine_ = foundationMap.bottomLine;
     /** @type {!MDCTextFieldHelperTextFoundation|undefined} */
@@ -109,7 +107,5 @@ this.helperText_ = foundationMap.helperText;
     /** @private {function(!Event): undefined} */
-    this.setPointerXOffset_ = (evt) => this.setBottomLineTransformOrigin(evt);
+    this.setPointerXOffset_ = (evt) => this.setTransformOrigin(evt);
     /** @private {function(!Event): undefined} */
     this.textFieldInteractionHandler_ = () => this.handleTextFieldInteraction();
-    /** @private {function(!Event): undefined} */
-    this.bottomLineAnimationEndHandler_ = () => this.handleBottomLineAnimationEnd();
   }
@@ -138,4 +134,2 @@
     });
-    this.adapter_.registerBottomLineEventHandler(
-      MDCTextFieldBottomLineFoundation.strings.ANIMATION_END_EVENT, this.bottomLineAnimationEndHandler_);
   }
@@ -154,4 +148,2 @@
     });
-    this.adapter_.deregisterBottomLineEventHandler(
-      MDCTextFieldBottomLineFoundation.strings.ANIMATION_END_EVENT, this.bottomLineAnimationEndHandler_);
   }
@@ -190,5 +182,3 @@
     this.styleFocused_(this.isFocused_);
-    if (this.bottomLine_) {
-      this.bottomLine_.activate();
-    }
+    this.adapter_.activateLineRipple();
     if (this.outline_) {
@@ -208,10 +198,11 @@ this.updateOutline();
   /**
-   * Sets the bottom line's transform origin, so that the bottom line activate
+   * Sets the line ripple's transform origin, so that the line ripple activate
    * animation will animate out from the user's click location.
    * @param {!Event} evt
    */
-  setBottomLineTransformOrigin(evt) {
-    if (this.bottomLine_) {
-      this.bottomLine_.setTransformOrigin(evt);
-    }
+  setTransformOrigin(evt) {
+    const targetClientRect = evt.target.getBoundingClientRect();
+    const evtCoords = {x: evt.clientX, y: evt.clientY};
+    const normalizedX = evtCoords.x - targetClientRect.left;
+    this.adapter_.setLineRippleTransformOrigin(normalizedX);
   }
@@ -230,15 +221,2 @@
   /**
-   * Handles when bottom line animation ends, performing actions that must wait
-   * for animations to finish.
-   */
-  handleBottomLineAnimationEnd() {
-    // We need to wait for the bottom line to be entirely transparent
-    // before removing the class. If we do not, we see the line start to
-    // scale down before disappearing
-    if (!this.isFocused_ && this.bottomLine_) {
-      this.bottomLine_.deactivate();
-    }
-  }
-
-  /**
    * Deactivates the Text Field's focus state.
@@ -248,2 +226,3 @@ */
     this.isFocused_ = false;
+    this.adapter_.deactivateLineRipple();
     const input = this.getNativeInput_();
@@ -250,0 +229,0 @@ const shouldRemoveLabelFloat = !input.value && !this.isBadInput_();

helper-text/foundation.js

@@ -55,5 +55,5 @@ /**
   /**
-   * @param {!MDCTextFieldHelperTextAdapter=} adapter
+   * @param {!MDCTextFieldHelperTextAdapter} adapter
    */
-  constructor(adapter = /** @type {!MDCTextFieldHelperTextAdapter} */ ({})) {
+  constructor(adapter) {
     super(Object.assign(MDCTextFieldHelperTextFoundation.defaultAdapter, adapter));
@@ -60,0 +60,0 @@ }

helper-text/README.md

@@ -36,3 +36,3 @@ <!--docs:
   <label for="username" class="mdc-text-field__label">Username</label>
-  <div class="mdc-text-field__bottom-line"></div>
+  <div class="mdc-line-ripple"></div>
 </div>
@@ -56,3 +56,3 @@ <p class="mdc-text-field-helper-text" aria-hidden="true">
   <label for="username" class="mdc-text-field__label">Username</label>
-  <div class="mdc-text-field__bottom-line"></div>
+  <div class="mdc-line-ripple"></div>
 </div>
@@ -59,0 +59,0 @@ <p id="username-helper-text" class="mdc-text-field-helper-text" aria-hidden="true">

icon/foundation.js

@@ -48,5 +48,5 @@ /**
   /**
-   * @param {!MDCTextFieldIconAdapter=} adapter
+   * @param {!MDCTextFieldIconAdapter} adapter
    */
-  constructor(adapter = /** @type {!MDCTextFieldIconAdapter} */ ({})) {
+  constructor(adapter) {
     super(Object.assign(MDCTextFieldIconFoundation.defaultAdapter, adapter));
@@ -53,0 +53,0 @@

index.js

@@ -20,3 +20,3 @@ /**
 /* eslint-disable no-unused-vars */
-import {MDCRipple, MDCRippleFoundation, RippleCapableSurface} from '@material/ripple';
+import {MDCRipple, MDCRippleFoundation, RippleCapableSurface} from '@material/ripple/index';
 /* eslint-enable no-unused-vars */
@@ -30,7 +30,7 @@ import {getMatchesProperty} from '@material/ripple/util';
 /* eslint-disable no-unused-vars */
-import {MDCTextFieldBottomLine, MDCTextFieldBottomLineFoundation} from './bottom-line';
-import {MDCTextFieldHelperText, MDCTextFieldHelperTextFoundation} from './helper-text';
-import {MDCTextFieldIcon, MDCTextFieldIconFoundation} from './icon';
-import {MDCTextFieldLabel, MDCTextFieldLabelFoundation} from './label';
-import {MDCTextFieldOutline, MDCTextFieldOutlineFoundation} from './outline';
+import {MDCLineRipple, MDCLineRippleFoundation} from '@material/line-ripple/index';
+import {MDCTextFieldHelperText, MDCTextFieldHelperTextFoundation} from './helper-text/index';
+import {MDCTextFieldIcon, MDCTextFieldIconFoundation} from './icon/index';
+import {MDCTextFieldLabel, MDCTextFieldLabelFoundation} from './label/index';
+import {MDCTextFieldOutline, MDCTextFieldOutlineFoundation} from './outline/index';
 /* eslint-enable no-unused-vars */
@@ -52,4 +52,4 @@
     this.ripple;
-    /** @private {?MDCTextFieldBottomLine} */
-    this.bottomLine_;
+    /** @private {?MDCLineRipple} */
+    this.lineRipple_;
     /** @private {?MDCTextFieldHelperText} */
@@ -76,4 +76,4 @@ this.helperText_;
    * creates a new MDCRipple.
-   * @param {(function(!Element): !MDCTextFieldBottomLine)=} bottomLineFactory A function which
-   * creates a new MDCTextFieldBottomLine.
+   * @param {(function(!Element): !MDCLineRipple)=} lineRippleFactory A function which
+   * creates a new MDCLineRipple.
    * @param {(function(!Element): !MDCTextFieldHelperText)=} helperTextFactory A function which
@@ -90,3 +90,3 @@ * creates a new MDCTextFieldHelperText.
     rippleFactory = (el, foundation) => new MDCRipple(el, foundation),
-    bottomLineFactory = (el) => new MDCTextFieldBottomLine(el),
+    lineRippleFactory = (el) => new MDCLineRipple(el),
     helperTextFactory = (el) => new MDCTextFieldHelperText(el),
@@ -101,5 +101,5 @@ iconFactory = (el) => new MDCTextFieldIcon(el),
     }
-    const bottomLineElement = this.root_.querySelector(strings.BOTTOM_LINE_SELECTOR);
-    if (bottomLineElement) {
-      this.bottomLine_ = bottomLineFactory(bottomLineElement);
+    const lineRippleElement = this.root_.querySelector(strings.BOTTOM_LINE_SELECTOR);
+    if (lineRippleElement) {
+      this.lineRipple_ = lineRippleFactory(lineRippleElement);
     }
@@ -143,4 +143,4 @@ const outlineElement = this.root_.querySelector(strings.OUTLINE_SELECTOR);
     }
-    if (this.bottomLine_) {
-      this.bottomLine_.destroy();
+    if (this.lineRipple_) {
+      this.lineRipple_.destroy();
     }
@@ -258,16 +258,21 @@ if (this.helperText_) {
         deregisterTextFieldInteractionHandler: (evtType, handler) => this.root_.removeEventListener(evtType, handler),
-        registerBottomLineEventHandler: (evtType, handler) => {
-          if (this.bottomLine_) {
-            this.bottomLine_.listen(evtType, handler);
+        isFocused: () => {
+          return document.activeElement === this.root_.querySelector(strings.INPUT_SELECTOR);
+        },
+        isRtl: () => window.getComputedStyle(this.root_).getPropertyValue('direction') === 'rtl',
+        activateLineRipple: () => {
+          if (this.lineRipple_) {
+            this.lineRipple_.activate();
           }
         },
-        deregisterBottomLineEventHandler: (evtType, handler) => {
-          if (this.bottomLine_) {
-            this.bottomLine_.unlisten(evtType, handler);
+        deactivateLineRipple: () => {
+          if (this.lineRipple_) {
+            this.lineRipple_.deactivate();
           }
         },
-        isFocused: () => {
-          return document.activeElement === this.root_.querySelector(strings.INPUT_SELECTOR);
+        setLineRippleTransformOrigin: (normalizedX) => {
+          if (this.lineRipple_) {
+            this.lineRipple_.setRippleCenter(normalizedX);
+          }
         },
-        isRtl: () => window.getComputedStyle(this.root_).getPropertyValue('direction') === 'rtl',
       },
@@ -299,3 +304,2 @@ this.getInputAdapterMethods_())),
     return {
-      bottomLine: this.bottomLine_ ? this.bottomLine_.foundation : undefined,
       helperText: this.helperText_ ? this.helperText_.foundation : undefined,
@@ -310,3 +314,2 @@ icon: this.icon_ ? this.icon_.foundation : undefined,
 export {MDCTextField, MDCTextFieldFoundation,
-  MDCTextFieldBottomLine, MDCTextFieldBottomLineFoundation,
   MDCTextFieldHelperText, MDCTextFieldHelperTextFoundation,
@@ -313,0 +316,0 @@ MDCTextFieldIcon, MDCTextFieldIconFoundation,

label/foundation.js

@@ -47,5 +47,5 @@ /**
   /**
-   * @param {!MDCTextFieldLabelAdapter=} adapter
+   * @param {!MDCTextFieldLabelAdapter} adapter
    */
-  constructor(adapter = /** @type {!MDCTextFieldLabelAdapter} */ ({})) {
+  constructor(adapter) {
     super(Object.assign(MDCTextFieldLabelFoundation.defaultAdapter, adapter));
@@ -84,3 +84,3 @@ }
   styleFloat(value, isFocused, isBadInput) {
-    const {LABEL_FLOAT_ABOVE} = MDCTextFieldLabelFoundation.cssClasses;
+    const {LABEL_FLOAT_ABOVE, LABEL_SHAKE} = MDCTextFieldLabelFoundation.cssClasses;
     if (!!value || isFocused) {
@@ -90,2 +90,3 @@ this.adapter_.addClass(LABEL_FLOAT_ABOVE);
       this.adapter_.removeClass(LABEL_FLOAT_ABOVE);
+      this.adapter_.removeClass(LABEL_SHAKE);
     }
@@ -92,0 +93,0 @@ }

outline/foundation.js

@@ -47,5 +47,5 @@ /**
   /**
-   * @param {!MDCTextFieldOutlineAdapter=} adapter
+   * @param {!MDCTextFieldOutlineAdapter} adapter
    */
-  constructor(adapter = /** @type {!MDCTextFieldOutlineAdapter} */ ({})) {
+  constructor(adapter) {
     super(Object.assign(MDCTextFieldOutlineFoundation.defaultAdapter, adapter));
@@ -52,0 +52,0 @@ }

package.json

 {
   "name": "@material/textfield",
   "description": "The Material Components for the web text field component",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "license": "Apache-2.0",
@@ -20,7 +20,8 @@ "keywords": [
     "@material/base": "^0.29.0",
-    "@material/ripple": "^0.29.0",
-    "@material/rtl": "^0.29.0",
-    "@material/theme": "^0.29.0",
+    "@material/line-ripple": "^0.30.0",
+    "@material/ripple": "^0.30.0",
+    "@material/rtl": "^0.30.0",
+    "@material/theme": "^0.30.0",
     "@material/typography": "^0.28.0"
   }
 }

README.md

@@ -45,3 +45,3 @@ <!--docs:
   <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>
@@ -59,3 +59,3 @@ ```
   <label for="pw" class="mdc-text-field__label">Password</label>
-  <div class="mdc-text-field__bottom-line"></div>
+  <div class="mdc-line-ripple"></div>
 </div>
@@ -79,3 +79,3 @@ ```
   </label>
-  <div class="mdc-text-field__bottom-line"></div>
+  <div class="mdc-line-ripple"></div>
 </div>
@@ -86,2 +86,4 @@ ```
 
+Full width text fields are useful for in-depth tasks or entering complex information.
+
 ```html
@@ -96,2 +98,4 @@ <div class="mdc-text-field mdc-text-field--fullwidth">
 
+> _NOTE_: Do not use `mdc-text-field--box` or `mdc-text-field--outlined` to style a full width text field.
+
 > _NOTE_: Do not use `mdc-text-field__label` within `mdc-text-field--fullwidth`. Labels should not be
@@ -117,3 +121,3 @@ included as part of the DOM structure of a full width text field.
   <label class="mdc-text-field__label" for="disabled-text-field">Disabled text field</label>
-  <div class="mdc-text-field__bottom-line"></div>
+  <div class="mdc-line-ripple"></div>
 </div>
@@ -139,3 +143,3 @@ ```
 
-> _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.
 
@@ -150,4 +154,4 @@ #### Helper Text
 
-Leading and trailing icons can be added to MDC Text Fields as visual indicators as well as interaction targets.
-See [here](icon/) for more information on using icons.
+Leading and trailing icons can be added within the box or outlined variants of MDC Text Field as visual indicators as
+well as interaction targets. See [here](icon/) for more information on using icons.
 
@@ -172,8 +176,8 @@ ### CSS Classes
 
-To customize the colors of any part of the text-field, use the following mixins. We recommend you apply 
-these mixins within CSS selectors like `.foo-text-field:not(.mdc-text-field--focused)` to select your unfocused text fields, 
-and `.foo-tab.mdc-text-field--focused` to select your focused text-fields. To change the invalid state of your text fields, 
+To customize the colors of any part of the text-field, use the following mixins. We recommend you apply
+these mixins within CSS selectors like `.foo-text-field:not(.mdc-text-field--focused)` to select your unfocused text fields,
+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)`).
 
@@ -184,10 +188,15 @@ Mixin | Description
 `mdc-text-field-textarea-corner-radius($radius)` | Customizes the border radius for a `<textarea>` 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-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-line-ripple-color($color)` | Customizes the color of the default line ripple of the text-field.
+`mdc-text-field-hover-line-ripple-color($color)` | Customizes the hover color of the line ripple of the text-field.
+`mdc-text-field-focused-line-ripple-color($color)` | Customizes the line-ripple ripple color when the text-field is focused.
+`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-line-ripple-color($color)` | Customizes the line ripple 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.
@@ -228,4 +237,2 @@ `mdc-text-field-helper-text-validation-color($color)` | Customizes the color of the helper text when it's used as a validation message.
 `deregisterInputInteractionHandler(evtType: string, handler: EventListener)` => void | Deregisters an event listener on the native input element for a given event
-`registerBottomLineEventHandler(evtType: string, handler: EventListener)` => void | Registers an event listener on the bottom line element for a given event
-`deregisterBottomLineEventHandler(evtType: string, handler: EventListener)` => void | Deregisters an event listener on the bottom line element for a given event
 `getNativeInput() => {value: string, disabled: boolean, badInput: boolean, checkValidity: () => boolean}?` | Returns an object representing the native text input element, with a similar API shape
@@ -258,6 +265,5 @@ `isFocused() => boolean` | Returns whether the input is focused
 `deactivateFocus() => void` | Deactivates the focus state of the Text Field. Normally called in response to the input blur event.
-`handleBottomLineAnimationEnd(evt: Event) => void` | Handles the end of the bottom line animation, performing actions that must wait for animations to finish. Expects a transition-end event.
 `setHelperTextContent(content: string) => void` | Sets the content of the helper text
 `updateOutline() => void` | Updates the focus outline for outlined text fields
 
-`MDCTextFieldFoundation` supports multiple optional sub-elements: bottom line, helper text, icon, label, and outline. The foundations of these sub-elements must be passed in as constructor arguments to `MDCTextFieldFoundation`.
+`MDCTextFieldFoundation` supports multiple optional sub-elements: line ripple, helper text, icon, label, and outline. The foundations of these sub-elements must be passed in as constructor arguments to `MDCTextFieldFoundation`.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

258

increased by2.38%

Worsened metrics

Total package byte prevSize

499789

decreased by-5.67%

Dependency count

7

increased by16.67%

Number of package files

44

decreased by-8.33%

Lines of code

7866

decreased by-4.04%

Dependency changes

• + Added@material/line-ripple@^0.30.0

• + Added@material/line-ripple@0.30.0(transitive)

• + Added@material/ripple@0.30.0(transitive)

• + Added@material/rtl@0.30.0(transitive)

• + Added@material/theme@0.30.0(transitive)

• - Removed@material/ripple@0.29.0(transitive)

• - Removed@material/rtl@0.29.0(transitive)

• - Removed@material/theme@0.29.0(transitive)

• Updated@material/ripple@^0.30.0

• Updated@material/rtl@^0.30.0

• Updated@material/theme@^0.30.0