@vaadin/vaadin-checkbox - npm Package Compare versions

Comparing version 2.4.0-alpha3 to 2.5.0-alpha1

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-checkbox",
-  "version": "2.4.0-alpha3",
+  "version": "2.5.0-alpha1",
   "main": "vaadin-checkbox.js",
@@ -16,0 +16,0 @@ "author": "Vaadin Ltd",

src/vaadin-checkbox-group.d.ts

@@ -55,2 +55,4 @@ /**
  * `has-value` | Set when the element has a value | :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
  * `required` | Set when the element is required | :host
@@ -90,2 +92,7 @@ * `invalid` | Set when the element is invalid | :host
   /**
+   * String used for the helper text.
+   */
+  helperText: string|null;
+
+  /**
    * Specifies that the user must fill in a value.
@@ -92,0 +99,0 @@ */

src/vaadin-checkbox-group.js

@@ -42,2 +42,4 @@ /**
  * `has-value` | Set when the element has a value | :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
  * `required` | Set when the element is required | :host
@@ -95,2 +97,6 @@ * `invalid` | Set when the element is invalid | :host
 
+      <div part="helper-text" on-click="focus" aria-live="assertive" aria-hidden\$="[[_getHelperTextAriaHidden(helperText, _hasSlottedHelper)]]">
+        <slot name="helper">[[helperText]]</slot>
+      </div>
+
       <div part="error-message" aria-live="assertive" aria-hidden\$="[[_getErrorMessageAriaHidden(invalid, errorMessage)]]">[[errorMessage]]</div>
@@ -144,6 +150,17 @@
         type: String,
-        value: ''
+        value: '',
+        observer: '_errorMessageChanged'
       },
 
       /**
+       * String used for the helper text.
+       * @type {string | null}
+       */
+      helperText: {
+        type: String,
+        value: '',
+        observer: '_helperTextChanged'
+      },
+
+      /**
        * Specifies that the user must fill in a value.
@@ -167,2 +184,5 @@ */
 
+      /** @private */
+      _hasSlottedHelper: Boolean,
+
     };
@@ -216,2 +236,4 @@ }
 
+      this._setOrToggleHasHelperAttribute();
+
       const hasValue = checkbox => {
@@ -317,6 +339,25 @@ const {value} = checkbox;
   _labelChanged(label) {
-    if (label) {
-      this.setAttribute('has-label', '');
+    this._setOrToggleAttribute('has-label', !!label);
+  }
+
+  /** @private */
+  _errorMessageChanged(errorMessage) {
+    this._setOrToggleAttribute('has-error-message', !!errorMessage);
+  }
+
+  /** @private */
+  _helperTextChanged(helperText) {
+    this._setOrToggleAttribute('has-helper', !!helperText);
+  }
+
+  /** @private */
+  _setOrToggleAttribute(name, value) {
+    if (!name) {
+      return;
+    }
+
+    if (value) {
+      this.setAttribute(name, (typeof value === 'boolean') ? '' : value);
     } else {
-      this.removeAttribute('has-label');
+      this.removeAttribute(name);
     }
@@ -352,2 +393,18 @@ }
   }
+
+  /** @private */
+  _setOrToggleHasHelperAttribute() {
+    const slottedNodes = this.shadowRoot.querySelector(`[name="helper"]`).assignedNodes();
+    // 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;
+
+    this._setOrToggleAttribute('has-helper', this._hasSlottedHelper ? 'slotted' : !!this.helperText);
+  }
+
+  /** @private */
+  _getHelperTextAriaHidden(helperText, hasSlottedHelper) {
+    return (!(helperText || hasSlottedHelper)).toString();
+  }
 }
@@ -354,0 +411,0 @@

src/vaadin-checkbox.js

@@ -114,3 +114,3 @@ /**
   static get version() {
-    return '2.4.0-alpha3';
+    return '2.5.0-alpha1';
   }
@@ -117,0 +117,0 @@

theme/lumo/vaadin-checkbox-group-styles.js

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

theme/material/vaadin-checkbox-group-styles.js

@@ -52,2 +52,20 @@ 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;
+      }
+
+      :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);
+      }
     </style>
@@ -54,0 +72,0 @@ </template>

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

59307

increased by7.42%

Lines of code

1289

increased by8.87%

No dependency changes