@vaadin/vaadin-radio-button - npm Package Compare versions

Comparing version 1.1.0-alpha2 to 1.1.0-alpha3

package.json

@@ -14,3 +14,3 @@ {
   "name": "@vaadin/vaadin-radio-button",
-  "version": "1.1.0-alpha2",
+  "version": "1.1.0-alpha3",
   "main": "vaadin-radio-button.js",
@@ -31,6 +31,6 @@ "author": "Vaadin Ltd",
     "@vaadin/vaadin-control-state-mixin": "^2.1.0-alpha2",
-    "@vaadin/vaadin-element-mixin": "^1.1.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "^1.2.0-alpha2",
     "@vaadin/vaadin-lumo-styles": "^1.1.0-alpha3",
     "@vaadin/vaadin-material-styles": "^1.1.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "^1.2.0-alpha2"
+    "@vaadin/vaadin-element-mixin": "^1.1.0-alpha1"
   },
@@ -43,6 +43,6 @@ "devDependencies": {
     "@vaadin/vaadin-button": "^2.1.0-alpha2",
-    "@vaadin/vaadin-demo-helpers": "^2.0.0-alpha2",
     "@webcomponents/webcomponentsjs": "^1.0.0",
-    "wct-browser-legacy": "0.0.1-pre.11"
+    "wct-browser-legacy": "0.0.1-pre.11",
+    "@vaadin/vaadin-demo-helpers": "^2.0.0-alpha2"
   }
 }

src/vaadin-radio-button.js

@@ -99,3 +99,3 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
   static get version() {
-    return '1.1.0-alpha2';
+    return '1.1.0-alpha3';
   }
@@ -102,0 +102,0 @@

src/vaadin-radio-group.js

@@ -19,2 +19,9 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
  *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name | Description
+ * ----------------|----------------
+ * `label` | The label element
+ * `group-field` | The element that wraps radio-buttons
+ *
  * The following state attributes are available for styling:
@@ -25,2 +32,5 @@ *
  * `disabled`   | Set when the radio group and its children are disabled. | :host
+ * `readonly` | Set to a readonly text field | :host
+ * `invalid` | Set when the element is invalid | :host
+ * `has-label` | Set when the element has a label | :host
  *
@@ -37,3 +47,36 @@ * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
     return html`
-    <slot id="slot"></slot>
+    <style>
+      :host {
+        display: inline-flex;
+      }
+
+      :host::before {
+        content: "\\2003";
+        width: 0;
+        display: inline-block;
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+
+      .vaadin-group-field-container {
+        display: flex;
+        flex-direction: column;
+      }
+
+      [part="label"]:empty {
+        display: none;
+      }
+    </style>
+
+    <div class="vaadin-group-field-container">
+      <label part="label">[[label]]</label>
+
+      <div part="group-field">
+        <slot id="slot"></slot>
+      </div>
+
+      <div part="error-message" id="[[_errorId]]" aria-live="assertive" aria-hidden\$="[[_getErrorMessageAriaHidden(invalid, errorMessage, _errorId)]]">[[errorMessage]]</div>
+    </div>
 `;
@@ -57,2 +100,41 @@ }
 
+      /**
+       * This attribute indicates that the user cannot modify the value of the control.
+       */
+      readonly: {
+        type: Boolean,
+        reflectToAttribute: true,
+        observer: '_readonlyChanged'
+      },
+
+      /**
+       * This property is set to true when the value is invalid.
+       */
+      invalid: {
+        type: Boolean,
+        reflectToAttribute: true,
+        notify: true,
+        value: false
+      },
+
+      /**
+       * Specifies that the user must fill in a value.
+       */
+      required: {
+        type: Boolean,
+        reflectToAttribute: true
+      },
+
+      /**
+       * Error to show when the input value is invalid.
+       */
+      errorMessage: {
+        type: String,
+        value: ''
+      },
+
+      _errorId: {
+        type: String
+      },
+
       _checkedButton: {
@@ -64,2 +146,11 @@ type: Object,
       /**
+       * String used for the label element.
+       */
+      label: {
+        type: String,
+        value: '',
+        observer: '_labelChanged'
+      },
+
+      /**
        * Value of the radio group.
@@ -111,2 +202,7 @@ */
     this.setAttribute('role', 'radiogroup');
+
+    this.addEventListener('focusout', e => this.validate());
+
+    const uniqueId = RadioGroupElement._uniqueId = 1 + RadioGroupElement._uniqueId || 0;
+    this._errorId = `${this.constructor.is}-error-${uniqueId}`;
   }
@@ -125,6 +221,23 @@
     this.setAttribute('aria-disabled', disabled);
+    this._updateDisableButtons();
+  }
 
-    this._radioButtons.forEach(button => button.disabled = disabled);
+  _updateDisableButtons() {
+    this._radioButtons.forEach(button => {
+      if (this.disabled) {
+        button.disabled = true;
+      } else if (this.readonly) {
+        // it's not possible to set readonly to radio buttons, but we can
+        // unchecked ones instead.
+        button.disabled = button !== this._checkedButton && this.readonly;
+      } else {
+        button.disabled = false;
+      }
+    });
   }
 
+  _readonlyChanged(newV, oldV) {
+    (newV || oldV) && this._updateDisableButtons();
+  }
+
   _addActiveListeners() {
@@ -134,5 +247,2 @@ this.addEventListener('keydown', e => {
       var checkedRadioButton = (e.target == this) ? this._checkedButton : e.target;
-      if (this.disabled) {
-        return;
-      }
 
@@ -170,2 +280,3 @@ // LEFT, UP - select previous radio button
 
+
   _hasEnabledButtons() {
@@ -205,3 +316,3 @@ return !this._radioButtons.every((button) => button.disabled);
     this._checkedButton = button;
-
+    this.readonly && this._updateDisableButtons();
     this._setFocusable(this._radioButtons.indexOf(button));
@@ -212,4 +323,4 @@ }
     this._radioButtons.forEach(button => button.checked = button === checkedButton);
-
     this.value = checkedButton.value;
+    this.validate();
   }
@@ -227,4 +338,28 @@
     }
+
+    if (newV !== '' && newV != null) {
+      this.setAttribute('has-value', '');
+    } else {
+      this.removeAttribute('has-value');
+    }
   }
 
+  /**
+   * Returns true if `value` is valid.
+   * `<iron-form>` uses this to check the validity or all its elements.
+   *
+   * @return {boolean} True if the value is valid.
+   */
+  validate() {
+    return !(this.invalid = !this.checkValidity());
+  }
+
+  /**
+   * Returns true if the current input value satisfies all constraints (if any)
+   * @returns {boolean}
+   */
+  checkValidity() {
+    return !this.required || !!this.value;
+  }
+
   _setFocusable(idx) {
@@ -234,2 +369,18 @@ const items = this._radioButtons;
   }
+
+  _labelChanged(label) {
+    if (label) {
+      this.setAttribute('has-label', '');
+    } else {
+      this.removeAttribute('has-label');
+    }
+  }
+
+  _getActiveErrorId(invalid, errorMessage, errorId) {
+    return errorMessage && invalid ? errorId : undefined;
+  }
+
+  _getErrorMessageAriaHidden(invalid, errorMessage, errorId) {
+    return (!this._getActiveErrorId(invalid, errorMessage, errorId)).toString();
+  }
 }
@@ -236,0 +387,0 @@

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

@@ -7,6 +7,79 @@ const $_documentContainer = document.createElement('div');
     <style>
-      :host([theme~="vertical"]) {
+      :host {
+        color: var(--lumo-body-text-color);
+        font-size: var(--lumo-font-size-m);
+        font-family: var(--lumo-font-family);
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-tap-highlight-color: transparent;
+        padding: var(--lumo-space-xs) 0;
+      }
+
+      :host::before {
+        height: var(--lumo-size-m);
+        box-sizing: border-box;
+        display: inline-flex;
+        align-items: center;
+      }
+
+      [part="label"] {
+        display: block;
+      }
+
+      :host([theme~="vertical"]) [part="group-field"] {
         display: flex;
         flex-direction: column;
       }
+
+      :host([has-label])::before {
+        margin-top: calc(var(--lumo-font-size-s) * 1.5);
+      }
+
+      :host([has-label]) {
+        padding-top: var(--lumo-space-m);
+      }
+
+      [part="label"] {
+        align-self: flex-start;
+        color: var(--lumo-secondary-text-color);
+        font-weight: 500;
+        font-size: var(--lumo-font-size-s);
+        margin-left: calc(var(--lumo-border-radius) / 4);
+        transition: color 0.2s;
+        line-height: 1;
+        padding-bottom: 0.7em;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        position: relative;
+        max-width: 100%;
+        box-sizing: border-box;
+      }
+
+      :host([invalid]) [part="label"] {
+        color: var(--lumo-error-text-color);
+      }
+
+      [part="error-message"] {
+        margin-left: calc(var(--lumo-border-radius) / 4);
+        font-size: var(--lumo-font-size-xs);
+        line-height: var(--lumo-line-height-xs);
+        color: var(--lumo-error-text-color);
+        will-change: max-height;
+        transition: 0.4s max-height;
+        max-height: 5em;
+      }
+
+      /* Margin that doesn’t reserve space when there’s no error message */
+      [part="error-message"]:not(:empty)::before,
+      [part="error-message"]:not(:empty)::after {
+        content: "";
+        display: block;
+        height: 0.4em;
+      }
+
+      :host(:not([invalid])) [part="error-message"] {
+        max-height: 0;
+        overflow: hidden;
+      }
     </style>
@@ -13,0 +86,0 @@ </template>

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

@@ -7,2 +7,34 @@ const $_documentContainer = document.createElement('div');
     <style>
+      :host {
+        display: inline-flex;
+        position: relative;
+        padding-top: 8px;
+        margin-bottom: 8px;
+        outline: none;
+        color: var(--material-body-text-color);
+        font-size: var(--material-body-font-size);
+        line-height: 24px;
+        font-family: var(--material-font-family);
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        contain: content;
+      }
+
+      :host::before {
+        line-height: 32px;
+      }
+
+      :host([has-label]) {
+        padding-top: 24px;
+      }
+
+      [part="label"]:empty {
+        display: none;
+      }
+
+      [part="label"]:empty::before {
+        content: " ";
+        position: absolute;
+      }
+
       :host([theme~="vertical"]) {
@@ -12,2 +44,44 @@ display: flex;
       }
+
+      :host([disabled]) [part="label"] {
+        color: var(--material-disabled-text-color);
+        -webkit-text-fill-color: var(--material-disabled-text-color);
+      }
+
+      [part="label"] {
+        display: block;
+        position: absolute;
+        top: 8px;
+        font-size: 1em;
+        line-height: 1;
+        height: 20px;
+        margin-bottom: -4px;
+        white-space: nowrap;
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+        color: var(--material-secondary-text-color);
+        transform-origin: 0 75%;
+        transform: scale(0.75);
+      }
+
+      :host([invalid]) [part="label"] {
+        color: var(--material-error-text-color);
+      }
+
+      [part="error-message"] {
+        font-size: .75em;
+        line-height: 1;
+        color: var(--material-error-text-color);
+        margin-top: 6px;
+      }
+
+      :host(:not([invalid])) [part="error-message"] {
+        margin-top: 0;
+        max-height: 0;
+        overflow: hidden;
+      }
+
+      :host([invalid]) [part="error-message"] {
+        animation: reveal 0.2s;
+      }
     </style>
@@ -14,0 +88,0 @@ </template>

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

449120

increased by474.14%

Number of package files

28

increased by40%

Lines of code

1341

increased by120.92%

No dependency changes