@vaadin/vaadin-text-field - npm Package Compare versions

Comparing version 2.7.0-alpha4 to 2.8.0-alpha1

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-text-field",
-  "version": "2.7.0-alpha4",
+  "version": "2.8.0-alpha1",
   "main": "vaadin-text-field.js",
@@ -16,0 +16,0 @@ "author": "Vaadin Ltd",

src/vaadin-email-field.js

@@ -66,3 +66,3 @@ /**
   static get version() {
-    return '2.7.0-alpha4';
+    return '2.8.0-alpha1';
   }
@@ -69,0 +69,0 @@

src/vaadin-integer-field.js

@@ -35,3 +35,3 @@ /**
   static get version() {
-    return '2.7.0-alpha4';
+    return '2.8.0-alpha1';
   }
@@ -38,0 +38,0 @@

src/vaadin-number-field.js

@@ -108,3 +108,3 @@ /**
   static get version() {
-    return '2.7.0-alpha4';
+    return '2.8.0-alpha1';
   }
@@ -111,0 +111,0 @@

src/vaadin-password-field.js

@@ -79,3 +79,3 @@ /**
   static get version() {
-    return '2.7.0-alpha4';
+    return '2.8.0-alpha1';
   }
@@ -82,0 +82,0 @@

src/vaadin-text-area.d.ts

@@ -66,2 +66,4 @@ /**
  * `has-label` | Set when the element has a label | :host
+ * `has-helper` | Set when the element has helper text | :host
+ * `has-error-message` | Set when the element has an error message | :host
  * `invalid` | Set when the element is invalid | :host
@@ -68,0 +70,0 @@ * `focused` | Set when the element is focused | :host

src/vaadin-text-area.js

@@ -53,2 +53,4 @@ /**
  * `has-label` | Set when the element has a label | :host
+ * `has-helper` | Set when the element has helper text | :host
+ * `has-error-message` | Set when the element has an error message | :host
  * `invalid` | Set when the element is invalid | :host
@@ -82,4 +84,5 @@ * `focused` | Set when the element is focused | :host
 
-      /* The label and the error message should neither grow nor shrink. */
+      /* The label, helper text and the error message should neither grow nor shrink. */
       [part="label"],
+      [part="helper-text"],
       [part="error-message"] {
@@ -131,2 +134,6 @@ flex: none;
 
+      <div part="helper-text" on-click="focus" id="[[_helperTextId]]">
+        <slot name="helper">[[helperText]]</slot>
+      </div>
+
       <div part="error-message" id="[[_errorId]]" aria-live="assertive" aria-hidden\$="[[_getErrorMessageAriaHidden(invalid, errorMessage, _errorId)]]">[[errorMessage]]</div>
@@ -143,3 +150,3 @@
   static get version() {
-    return '2.7.0-alpha4';
+    return '2.8.0-alpha1';
   }
@@ -146,0 +153,0 @@

src/vaadin-text-field-mixin.d.ts

@@ -97,2 +97,7 @@ /**
   /**
+   * String used for the helper text.
+   */
+  helperText: string|null;
+
+  /**
    * Maximum number of characters (in Unicode code points) that the user can enter.
@@ -99,0 +104,0 @@ */

src/vaadin-text-field-mixin.js

@@ -190,3 +190,4 @@ /**
         type: String,
-        value: ''
+        value: '',
+        observer: '_errorMessageChanged'
       },
@@ -226,2 +227,12 @@
       /**
+       * String used for the helper text.
+       * @type {string | null}
+       */
+      helperText: {
+        type: String,
+        value: '',
+        observer: '_helperTextChanged'
+      },
+
+      /**
        * Maximum number of characters (in Unicode code points) that the user can enter.
@@ -327,6 +338,12 @@ */
       /** @private */
+      _helperTextId: String,
+
+      /** @private */
       _errorId: String,
 
       /** @private */
-      _inputId: String
+      _inputId: String,
+
+      /** @private */
+      _hasSlottedHelper: Boolean
     };
@@ -339,5 +356,5 @@ }
       '_hostAccessiblePropsChanged(' + HOST_PROPS.accessible.join(', ') + ')',
-      '_getActiveErrorId(invalid, errorMessage, _errorId)',
+      '_getActiveErrorId(invalid, errorMessage, _errorId, helperText, _helperTextId, _hasSlottedHelper)',
       '_getActiveLabelId(label, _labelId, _inputId)',
-      '__observeOffsetHeight(errorMessage, invalid, label)',
+      '__observeOffsetHeight(errorMessage, invalid, label, helperText)',
       '__enabledCharPatternChanged(_enabledCharPattern)'
@@ -485,6 +502,27 @@ ];
   _labelChanged(label) {
-    if (label !== '' && label != null) {
-      this.setAttribute('has-label', '');
-    } else {
-      this.removeAttribute('has-label');
+    this._setOrToggleAttribute('has-label', !!label, this);
+  }
+
+  /** @private */
+  _helperTextChanged(helperText) {
+    this._setOrToggleAttribute('has-helper', !!helperText, this);
+  }
+
+  /** @private */
+  _errorMessageChanged(errorMessage) {
+    this._setOrToggleAttribute('has-error-message', !!errorMessage, this);
+  }
+
+  /** @private */
+  _onHelperSlotChange() {
+    const slottedNodes = this.shadowRoot.querySelector(`[name="helper"]`).assignedNodes({flatten: true});
+    // Only has slotted helper if not a text node
+    // Text nodes are added by the helperText prop and not the helper slot
+    // The filter is added due to shady DOM triggering this callback on helperText prop change
+    this._hasSlottedHelper = slottedNodes.filter(node => node.nodeType !== 3).length;
+
+    if (this._hasSlottedHelper) {
+      this.setAttribute('has-helper', 'slotted');
+    } else if (this.helperText === '' || this.helperText === null) {
+      this.removeAttribute('has-helper');
     }
@@ -646,2 +684,5 @@ }
 
+    this._onHelperSlotChange();
+    this.shadowRoot.querySelector('[name="helper"]').addEventListener('slotchange', this._onHelperSlotChange.bind(this));
+
     if (!(window.ShadyCSS && window.ShadyCSS.nativeCss)) {
@@ -659,2 +700,3 @@ this.updateStyles();
     this._labelId = `${this.constructor.is}-label-${uniqueId}`;
+    this._helperTextId = `${this.constructor.is}-helper-${uniqueId}`;
     this._inputId = `${this.constructor.is}-input-${uniqueId}`;
@@ -815,6 +857,11 @@
   /** @private */
-  _getActiveErrorId(invalid, errorMessage, errorId) {
-    this._setOrToggleAttribute('aria-describedby',
-      (errorMessage && invalid ? errorId : undefined),
-      this.focusElement);
+  _getActiveErrorId(invalid, errorMessage, errorId, helperText, helperTextId, hasSlottedHelper) {
+    const ids = [];
+    if (helperText || hasSlottedHelper) {
+      ids.push(helperTextId);
+    }
+    if (errorMessage && invalid) {
+      ids.push(errorId);
+    }
+    this._setOrToggleAttribute('aria-describedby', ids.join(' '), this.focusElement);
   }
@@ -821,0 +868,0 @@

src/vaadin-text-field.d.ts

@@ -72,2 +72,4 @@ /**
  * `has-label` | Set when the element has a label | :host
+ * `has-helper` | Set when the element has helper text or slot | :host
+ * `has-error-message` | Set when the element has an error message | :host
  * `invalid` | Set when the element is invalid | :host
@@ -74,0 +76,0 @@ * `input-prevented` | Temporarily set when invalid input is prevented | :host

src/vaadin-text-field.js

@@ -59,2 +59,4 @@ /**
  * `has-label` | Set when the element has a label | :host
+ * `has-helper` | Set when the element has helper text or slot | :host
+ * `has-error-message` | Set when the element has an error message | :host
  * `invalid` | Set when the element is invalid | :host
@@ -103,2 +105,6 @@ * `input-prevented` | Temporarily set when invalid input is prevented | :host
 
+      <div part="helper-text" on-click="focus" id="[[_helperTextId]]">
+        <slot name="helper">[[helperText]]</slot>
+      </div>
+
       <div part="error-message" id="[[_errorId]]" aria-live="assertive" aria-hidden\$="[[_getErrorMessageAriaHidden(invalid, errorMessage, _errorId)]]">[[errorMessage]]</div>
@@ -115,3 +121,3 @@
   static get version() {
-    return '2.7.0-alpha4';
+    return '2.8.0-alpha1';
   }
@@ -118,0 +124,0 @@

theme/lumo/vaadin-text-field-styles.js

@@ -36,2 +36,18 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 
+      :host([has-helper]) [part="helper-text"]::before {
+        content: "";
+        display: block;
+        height: 0.4em;
+      }
+
+      [part="helper-text"],
+      [part="helper-text"] ::slotted(*) {
+        display: block;
+        color: var(--lumo-secondary-text-color);
+        font-size: var(--lumo-font-size-xs);
+        line-height: var(--lumo-line-height-xs);
+        margin-left: calc(var(--lumo-border-radius-m) / 4);
+        transition: color 0.2s;
+      }
+
       [part="value"],
@@ -121,3 +137,5 @@ [part="input-field"] ::slotted(input),
 
-      :host(:hover:not([readonly]):not([focused])) [part="label"] {
+      :host(:hover:not([readonly]):not([focused])) [part="label"],
+      :host(:hover:not([readonly])) [part="helper-text"],
+      :host(:hover:not([readonly])) [part="helper-text"] ::slotted(*) {
         color: var(--lumo-body-text-color);
@@ -203,2 +221,3 @@ }
       :host([disabled]) [part="label"],
+      :host([disabled]) [part="helper-text"],
       :host([disabled]) [part="value"],
@@ -273,2 +292,31 @@ :host([disabled]) [part="input-field"] ::slotted(*) {
       }
+      /* helper-text position */
+
+      :host([has-helper][theme~="helper-above-field"]) [part="helper-text"]::before {
+        display: none;
+      }
+
+      :host([has-helper][theme~="helper-above-field"]) [part="helper-text"]::after {
+        content: "";
+        display: block;
+        height: 0.4em;
+      }
+
+      :host([has-helper][theme~="helper-above-field"]) [part="label"] {
+        order: 0;
+        padding-bottom: 0.4em;
+      }
+
+      :host([has-helper][theme~="helper-above-field"]) [part="helper-text"] {
+        order: 1;
+      }
+
+      :host([has-helper][theme~="helper-above-field"]) [part="input-field"] {
+        order: 2;
+      }
+
+      :host([has-helper][theme~="helper-above-field"]) [part="error-message"] {
+        order: 3;
+      }
+
       /* Slotted content */
@@ -275,0 +323,0 @@

theme/material/vaadin-text-field-styles.js

@@ -151,2 +151,7 @@ import '@vaadin/vaadin-material-styles/color.js';
 
+      /* According to material theme guidelines, helper text should be hidden when error message is set and input is invalid */
+      :host([has-helper][invalid][has-error-message]) [part="helper-text"] {
+        display: none;
+      }
+
       [part="label"] {
@@ -158,2 +163,15 @@ width: 133%;
 
+      :host([has-helper]) [part="helper-text"]::before {
+        content: "";
+        display: block;
+        height: 6px;
+      }
+
+      [part="helper-text"],
+      [part="helper-text"] ::slotted(*) {
+        font-size: .75rem;
+        line-height: 1;
+        color: var(--material-secondary-text-color);
+      }
+
       /* TODO: using unsupported selector to fix IE11 (even thought the label element is scaled down,
@@ -160,0 +178,0 @@ the 133% width still takes the same space as an unscaled element */

No alert changes

Improved metrics

Total package byte prevSize

136789

increased by3.45%

Lines of code

3339

increased by3.47%

No dependency changes