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

Comparing version 1.2.0-alpha2 to 1.2.0-alpha3

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-custom-field",
-  "version": "1.2.0-alpha2",
+  "version": "1.2.0-alpha3",
   "main": "vaadin-custom-field.js",
@@ -52,3 +52,3 @@ "author": "Vaadin Ltd",
     "@vaadin/vaadin-form-layout": "^2.1.0",
-    "@vaadin/vaadin-select": "^2.2.0-alpha1",
+    "@vaadin/vaadin-select": "^2.2.0",
     "@webcomponents/webcomponentsjs": "^2.0.0",
@@ -55,0 +55,0 @@ "wct-browser-legacy": "^1.0.1",

src/vaadin-custom-field-mixin.js

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

src/vaadin-custom-field.d.ts

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

src/vaadin-custom-field.js

@@ -40,4 +40,2 @@ /**
  * `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
@@ -90,5 +88,2 @@ * `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>
@@ -103,3 +98,3 @@ </div>
   static get version() {
-    return '1.2.0-alpha2';
+    return '1.2.0-alpha3';
   }
@@ -162,14 +157,3 @@
         type: String,
-        value: '',
-        observer: '__errorMessageChanged'
-      },
-
-      /**
-       * String used for the helper text.
-       * @type {string | null}
-       */
-      helperText: {
-        type: String,
-        value: '',
-        observer: '__helperTextChanged'
+        value: ''
       }
@@ -181,3 +165,3 @@ };
     return [
-      '__getActiveErrorId(invalid, errorMessage, __errorId, helperText, __helperTextId, __hasSlottedHelper)',
+      '__getActiveErrorId(invalid, errorMessage, __errorId)',
       '__getActiveLabelId(label, __labelId)',
@@ -194,12 +178,2 @@ '__toggleHasValue(value)'
   /** @private */
-  __errorMessageChanged(errorMessage) {
-    this.__setOrToggleAttribute('has-error-message', !!errorMessage, this);
-  }
-
-  /** @private */
-  __helperTextChanged(helperText) {
-    this.__setOrToggleAttribute('has-helper', !!helperText, this);
-  }
-
-  /** @private */
   __toggleHasValue(value) {
@@ -263,15 +237,6 @@ if (value !== null && value.trim() !== '') {
   /** @private */
-  __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');
-    }
+  __getActiveErrorId(invalid, errorMessage, errorId) {
+    this.__setOrToggleAttribute('aria-describedby',
+      (errorMessage && invalid ? errorId : undefined),
+      this);
   }
@@ -278,0 +243,0 @@

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

@@ -51,53 +51,6 @@ 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="helper-text"],
-      :host(:hover:not([readonly]):not([disabled]):not([focused])) [part="helper-text"] ::slotted(*) {
+      :host(:hover:not([readonly]):not([disabled]):not([focused])) [part="label"] {
         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 */
@@ -104,0 +57,0 @@ @media (pointer: coarse) {

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

@@ -28,4 +28,3 @@ import '@vaadin/vaadin-material-styles/color.js';
       /* align with text-field error message */
-      [part="error-message"]:not(:empty),
-      :host([has-helper]) [part="helper-text"] {
+      [part="error-message"]:not(:empty) {
         margin-top: -8px;
@@ -42,20 +41,2 @@ }
       }
-
-      /* 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>
@@ -62,0 +43,0 @@ </template>

No alert changes

Worsened metrics

Total package byte prevSize

41341

decreased by-9.59%

Lines of code

700

decreased by-13.79%

No dependency changes