@material/textfield - npm Package Compare versions

Comparing version 0.38.1 to 0.39.0-0

constants.js

@@ -31,3 +31,2 @@ /**
   ROOT: 'mdc-text-field',
-  UPGRADED: 'mdc-text-field--upgraded',
   DISABLED: 'mdc-text-field--disabled',
@@ -53,2 +52,7 @@ DENSE: 'mdc-text-field--dense',
 
-export {cssClasses, strings, numbers, VALIDATION_ATTR_WHITELIST};
+// Label should always float for these types as they show some UI even if value is empty.
+const ALWAYS_FLOAT_TYPES = [
+  'color', 'date', 'datetime-local', 'month', 'range', 'time', 'week',
+];
+
+export {cssClasses, strings, numbers, VALIDATION_ATTR_WHITELIST, ALWAYS_FLOAT_TYPES};

foundation.js

@@ -24,5 +24,4 @@ /**
 import {MDCTextFieldAdapter, NativeInputType, FoundationMapType} from './adapter';
-import {cssClasses, strings, numbers, VALIDATION_ATTR_WHITELIST} from './constants';
+import {cssClasses, strings, numbers, VALIDATION_ATTR_WHITELIST, ALWAYS_FLOAT_TYPES} from './constants';
 
-
 /**
@@ -50,8 +49,17 @@ * @extends {MDCFoundation<!MDCTextFieldAdapter>}
   get shouldShake() {
-    return !this.isValid() && !this.isFocused_;
+    return !this.isValid() && !this.isFocused_ && !!this.getValue();
   }
 
+  /**
+   * @return {boolean}
+   * @private
+   */
+  get shouldAlwaysFloat_() {
+    const type = this.getNativeInput_().type;
+    return ALWAYS_FLOAT_TYPES.indexOf(type) >= 0;
+  }
+
   /** @return {boolean} */
   get shouldFloat() {
-    return this.isFocused_ || !!this.getValue() || this.isBadInput_();
+    return this.shouldAlwaysFloat_ || this.isFocused_ || !!this.getValue() || this.isBadInput_();
   }
@@ -111,2 +119,6 @@
     this.isValid_ = true;
+
+    /** @private {boolean} */
+    this.useNativeValidation_ = true;
+
     /** @private {function(): undefined} */
@@ -130,11 +142,7 @@ this.inputFocusHandler_ = () => this.activateFocus();
   init() {
-    this.adapter_.addClass(MDCTextFieldFoundation.cssClasses.UPGRADED);
-    // Ensure label does not collide with any pre-filled value.
-    if (this.adapter_.hasLabel() && (this.getValue() || this.isBadInput_())) {
-      this.adapter_.floatLabel(this.shouldFloat);
-      this.notchOutline(this.shouldFloat);
-    }
-
     if (this.adapter_.isFocused()) {
       this.inputFocusHandler_();
+    } else if (this.adapter_.hasLabel() && this.shouldFloat) {
+      this.notchOutline(true);
+      this.adapter_.floatLabel(true);
     }
@@ -156,3 +164,2 @@
   destroy() {
-    this.adapter_.removeClass(MDCTextFieldFoundation.cssClasses.UPGRADED);
     this.adapter_.deregisterInputInteractionHandler('focus', this.inputFocusHandler_);
@@ -198,3 +205,3 @@ this.adapter_.deregisterInputInteractionHandler('blur', this.inputBlurHandler_);
   notchOutline(openNotch) {
-    if (!this.adapter_.hasOutline() || !this.adapter_.hasLabel()) {
+    if (!this.adapter_.hasOutline()) {
       return;
@@ -221,6 +228,6 @@ }
     this.adapter_.activateLineRipple();
-    this.notchOutline(this.shouldFloat);
     if (this.adapter_.hasLabel()) {
+      this.notchOutline(this.shouldFloat);
+      this.adapter_.floatLabel(this.shouldFloat);
       this.adapter_.shakeLabel(this.shouldShake);
-      this.adapter_.floatLabel(this.shouldFloat);
     }
@@ -260,4 +267,2 @@ if (this.helperText_) {
     this.adapter_.deactivateLineRipple();
-    const input = this.getNativeInput_();
-    const shouldRemoveLabelFloat = !input.value && !this.isBadInput_();
     const isValid = this.isValid();
@@ -267,7 +272,7 @@ this.styleValidity_(isValid);
     if (this.adapter_.hasLabel()) {
+      this.notchOutline(this.shouldFloat);
+      this.adapter_.floatLabel(this.shouldFloat);
       this.adapter_.shakeLabel(this.shouldShake);
-      this.adapter_.floatLabel(this.shouldFloat);
-      this.notchOutline(this.shouldFloat);
     }
-    if (shouldRemoveLabelFloat) {
+    if (!this.shouldFloat) {
       this.receivedUserInput_ = false;
@@ -292,5 +297,5 @@ }
     if (this.adapter_.hasLabel()) {
+      this.notchOutline(this.shouldFloat);
+      this.adapter_.floatLabel(this.shouldFloat);
       this.adapter_.shakeLabel(this.shouldShake);
-      this.adapter_.floatLabel(this.shouldFloat);
-      this.notchOutline(this.shouldFloat);
     }
@@ -304,4 +309,4 @@ }
   isValid() {
-    return this.useCustomValidityChecking_
-      ? this.isValid_ : this.isNativeInputValid_();
+    return this.useNativeValidation_
+      ? this.isNativeInputValid_() : this.isValid_;
   }
@@ -313,9 +318,8 @@
   setValid(isValid) {
-    this.useCustomValidityChecking_ = true;
     this.isValid_ = isValid;
-    // Retrieve from the getter to ensure correct logic is applied.
-    isValid = this.isValid();
     this.styleValidity_(isValid);
+
+    const shouldShake = !isValid && !this.isFocused_;
     if (this.adapter_.hasLabel()) {
-      this.adapter_.shakeLabel(this.shouldShake);
+      this.adapter_.shakeLabel(shouldShake);
     }
@@ -325,2 +329,10 @@ }
   /**
+   * Enables or disables the use of native validation. Use this for custom validation.
+   * @param {boolean} useNativeValidation Set this to false to ignore native input validation.
+   */
+  setUseNativeValidation(useNativeValidation) {
+    this.useNativeValidation_ = useNativeValidation;
+  }
+
+  /**
    * @return {boolean} True if the Text Field is disabled.
@@ -327,0 +339,0 @@ */

helper-text/README.md

@@ -30,2 +30,4 @@ <!--docs:
 
+> NOTE: Make sure there are no white-space characters before helper text content.
+
 ### Styles
@@ -32,0 +34,0 @@

index.js

@@ -329,2 +329,10 @@ /**
   /**
+   * Enables or disables the use of native validation. Use this for custom validation.
+   * @param {boolean} useNativeValidation Set this to false to ignore native input validation.
+   */
+  set useNativeValidation(useNativeValidation) {
+    this.foundation_.setUseNativeValidation(useNativeValidation);
+  }
+
+  /**
    * Recomputes the outline SVG path for the outline element.
@@ -331,0 +339,0 @@ */

package.json

 {
   "name": "@material/textfield",
   "description": "The Material Components for the web text field component",
-  "version": "0.38.1",
+  "version": "0.39.0-0",
   "license": "Apache-2.0",
@@ -20,10 +20,10 @@ "keywords": [
     "@material/base": "^0.35.0",
-    "@material/floating-label": "^0.38.0",
+    "@material/floating-label": "^0.39.0-0",
     "@material/line-ripple": "^0.38.0",
-    "@material/notched-outline": "^0.38.0",
+    "@material/notched-outline": "^0.39.0-0",
     "@material/ripple": "^0.38.1",
     "@material/rtl": "^0.36.0",
     "@material/theme": "^0.38.0",
-    "@material/typography": "^0.38.0"
+    "@material/typography": "^0.39.0-0"
   }
 }

README.md

@@ -12,5 +12,5 @@ <!--docs:
 The existing default text field style will be changed in an upcoming release. The Material spec indicates that
-the default style will be the filled variant (currently referred to as the box variant). This will become the  
+the default style will be the filled variant (currently referred to as the box variant). This will become the
 default style. Continuing to add the `mdc-text-field--box` class to the text field will
-result in no change. 
+result in no change.
 
@@ -57,6 +57,2 @@ # Text Field
 
-> NOTE: Text field supports `text`, `number`, and `password` input types (e.g., `<input type="password" class="mdc-text-field__input">`).
->
-> Other input types (such as `date`) are not currently supported.
-
 > NOTE: For more details, see [MDC Line Ripple](../mdc-line-ripple/README.md)
@@ -171,3 +167,3 @@ > and [MDC Floating Label](../mdc-floating-label/README.md).
 When dealing with JS-driven text fields that already have values, you'll want to ensure that you
-render `mdc-floating-label` with the `mdc-floating-label--float-above` modifier class, and `mdc-text-field` with the `mdc-text-field--upgraded` modifier class. This will
+render `mdc-floating-label` with the `mdc-floating-label--float-above` modifier class. This will
 ensure that the label moves out of the way of the text field's value and prevents a Flash Of
@@ -177,3 +173,3 @@ Un-styled Content (**FOUC**).
 ```html
-<div class="mdc-text-field mdc-text-field--upgraded">
+<div class="mdc-text-field">
   <input type="text" id="pre-filled" class="mdc-text-field__input" value="Pre-filled value">
@@ -194,3 +190,2 @@ <label class="mdc-floating-label mdc-floating-label--float-above" for="pre-filled">
 `mdc-text-field` | Mandatory.
-`mdc-text-field--upgraded` | Indicates the text field is upgraded, using JavaScript.
 `mdc-text-field--box` | Styles the text field as a box text field.
@@ -263,2 +258,3 @@ `mdc-text-field--outlined` | Styles the text field as an outlined text field.
 `disabled` | Boolean | Proxies to the foundation's `isDisabled`/`setDisabled` methods.
+`useNativeValidation` | Boolean (write-only) | Proxies to the foundation's `setUseNativeValidation` method.
 `valid` | Boolean | Proxies to the foundation's `isValid`/`setValid` methods.
@@ -312,4 +308,5 @@ `required` | Boolean | Proxies to the foundation's `isRequired`/`setRequired` methods.
 `setValue(value: string)` | Sets the input's value.
-`isValid() => boolean` | If a custom validity is set, returns that value. Otherwise, returns the result of native validity checks.
-`setValid(isValid: boolean)` | Sets custom validity. Once set, native validity checking is ignored.
+`setUseNativeValidation(useNativeValidation: boolean)` | Sets whether to check native HTML validity state (`true`, default) or custom validity state when updating styles (`false`).
+`setValid(isValid: boolean)` | Sets custom validity and updates styles accordingly. Note that native validation will still be honored subsequently unless `setUseNativeValidation(false)` is also called.
+`isValid() => boolean` | Returns the component's current validity state (either native or custom, depending on how `setUseNativeValidation()` was configured).
 `isDisabled() => boolean` | Returns whether or not the input is disabled.
@@ -316,0 +313,0 @@ `setDisabled(disabled: boolean) => void` | Updates the input's disabled state.

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

Total package byte prevSize

486496

increased by0.11%

Lines of code

7821

increased by0.49%

Worsened metrics

Number of lines in readme file

319

decreased by-0.93%

Dependency changes

• + Added@material/animation@0.39.0(transitive)

• + Added@material/base@0.39.0(transitive)

• + Added@material/floating-label@0.39.1(transitive)

• + Added@material/notched-outline@0.39.1(transitive)

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

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

• + Added@material/typography@0.39.0(transitive)

• - Removed@material/floating-label@0.38.0(transitive)

• - Removed@material/notched-outline@0.38.0(transitive)

• - Removed@material/typography@0.38.0(transitive)

• Updated@material/floating-label@^0.39.0-0

• Updated@material/notched-outline@^0.39.0-0

• Updated@material/typography@^0.39.0-0