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

Comparing version 1.2.0-alpha3 to 1.3.0-alpha1

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-custom-field",
-  "version": "1.2.0-alpha3",
+  "version": "1.3.0-alpha1",
   "main": "vaadin-custom-field.js",
@@ -16,0 +16,0 @@ "author": "Vaadin Ltd",

src/vaadin-custom-field-mixin.js

@@ -65,3 +65,9 @@ import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
       /** @private */
-      __labelId: String
+      __labelId: String,
+
+      /** @private */
+      __helperTextId: String,
+
+      /** @private */
+      __hasSlottedHelper: Boolean,
     };
@@ -93,2 +99,5 @@ }
 
+    this.$.helperSlot.addEventListener('slotchange', this.__onHelperSlotChange.bind(this));
+    this.__onHelperSlotChange();
+
     const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
@@ -127,2 +136,3 @@ this.addEventListener('keydown', e => {
     this.__labelId = `${this.constructor.is}-label-${uniqueId}`;
+    this.__helperTextId = `${this.constructor.is}-helper-${uniqueId}`;
   }
@@ -205,2 +215,17 @@
 
+  /** @private */
+  __onHelperSlotChange() {
+    const slottedNodes = this.$.helperSlot.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 slotchange event on helperText prop change
+    this.__hasSlottedHelper = slottedNodes.filter(node => node.nodeType !== 3).length > 0;
+
+    if (this.__hasSlottedHelper) {
+      this.setAttribute('has-helper', 'slotted');
+    } else if (this.helperText === '' || this.helperText === null) {
+      this.removeAttribute('has-helper');
+    }
+  }
+
   /**
@@ -207,0 +232,0 @@ * Fired on Tab keydown triggered from the internal inputs,

src/vaadin-custom-field.d.ts

@@ -51,2 +51,4 @@ /**
  * `has-label`  | Set when the field 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, regardless if the field is valid or not | :host
  * `invalid`    | Set when the field is invalid | :host
@@ -97,2 +99,7 @@ * `focused`    | Set when the field contains focus | :host
   /**
+   * String used for the helper text.
+   */
+  helperText: string|null;
+
+  /**
    * Returns true if `value` is valid.
@@ -99,0 +106,0 @@ * `<iron-form>` uses this to check the validity or all its elements.

src/vaadin-custom-field.js

@@ -40,2 +40,4 @@ /**
  * `has-label`  | Set when the field 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, regardless if the field is valid or not | :host
  * `invalid`    | Set when the field is invalid | :host
@@ -88,2 +90,5 @@ * `focused`    | Set when the field contains focus | :host
       </div>
+      <div part="helper-text" on-click="focus" id="[[__helperTextId]]">
+        <slot name="helper" id="helperSlot">[[helperText]]</slot>
+      </div>
       <div part="error-message" id="[[__errorId]]" aria-live="assertive" aria-hidden\$="[[__getErrorMessageAriaHidden(invalid, errorMessage, __errorId)]]">[[errorMessage]]</div>
@@ -98,3 +103,3 @@ </div>
   static get version() {
-    return '1.2.0-alpha3';
+    return '1.3.0-alpha1';
   }
@@ -157,3 +162,14 @@
         type: String,
-        value: ''
+        value: '',
+        observer: '__errorMessageChanged'
+      },
+
+      /**
+       * String used for the helper text.
+       * @type {string | null}
+       */
+      helperText: {
+        type: String,
+        value: '',
+        observer: '__helperTextChanged'
       }
@@ -165,3 +181,3 @@ };
     return [
-      '__getActiveErrorId(invalid, errorMessage, __errorId)',
+      '__getActiveErrorId(invalid, errorMessage, __errorId, helperText, __helperTextId, __hasSlottedHelper)',
       '__getActiveLabelId(label, __labelId)',
@@ -178,2 +194,12 @@ '__toggleHasValue(value)'
   /** @private */
+  __errorMessageChanged(errorMessage) {
+    this.__setOrToggleAttribute('has-error-message', !!errorMessage, this);
+  }
+
+  /** @private */
+  __helperTextChanged(helperText) {
+    this.__setOrToggleAttribute('has-helper', !!helperText, this);
+  }
+
+  /** @private */
   __toggleHasValue(value) {
@@ -237,6 +263,15 @@ if (value !== null && value.trim() !== '') {
   /** @private */
-  __getActiveErrorId(invalid, errorMessage, errorId) {
-    this.__setOrToggleAttribute('aria-describedby',
-      (errorMessage && invalid ? errorId : undefined),
-      this);
+  __getActiveErrorId(invalid, errorMessage, errorId, helperText, helperTextId, hasSlottedHelper) {
+    const ids = [];
+    if (helperText || hasSlottedHelper) {
+      ids.push(helperTextId);
+    }
+    if (errorMessage && invalid) {
+      ids.push(errorId);
+    }
+    if (ids.length > 0) {
+      this.setAttribute('aria-describedby', ids.join(' '));
+    } else {
+      this.removeAttribute('aria-describedby');
+    }
   }
@@ -243,0 +278,0 @@

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

@@ -51,6 +51,53 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 
-      :host(:hover:not([readonly]):not([disabled]):not([focused])) [part="label"] {
+      :host(:hover:not([readonly]):not([disabled]):not([focused])) [part="label"],
+      :host(:hover:not([readonly]):not([disabled]):not([focused])) [part="helper-text"],
+      :host(:hover:not([readonly]):not([disabled]):not([focused])) [part="helper-text"] ::slotted(*) {
         color: var(--lumo-body-text-color);
       }
 
+      :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;
+      }
+
+      /* 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"]) .inputs-wrapper {
+        order: 2;
+      }
+
+      :host([has-helper][theme~="helper-above-field"]) [part="error-message"] {
+        order: 3;
+      }
+
       /* Touch device adjustment */
@@ -57,0 +104,0 @@ @media (pointer: coarse) {

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

@@ -28,3 +28,4 @@ import '@vaadin/vaadin-material-styles/color.js';
       /* align with text-field error message */
-      [part="error-message"]:not(:empty) {
+      [part="error-message"]:not(:empty),
+      :host([has-helper]) [part="helper-text"] {
         margin-top: -8px;
@@ -41,2 +42,20 @@ }
       }
+
+      /* 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;
+      }
+
+      :host([has-helper]) [part="helper-text"]::before {
+        content: "";
+        display: block;
+        height: 6px;
+      }
+
+      [part="helper-text"],
+      [part="helper-text"] ::slotted(*) {
+        font-size: .75em;
+        line-height: 1;
+        color: var(--material-secondary-text-color);
+      }
     </style>
@@ -43,0 +62,0 @@ </template>

No alert changes

Improved metrics

Total package byte prevSize

45719

increased by10.59%

Lines of code

812

increased by16%

No dependency changes