Merge branch '1.5'

.travis.yml

@@ -1,14 +1,14 @@
 sudo: false
 dist: xenial
 language: node_js
-node_js: 8.11
+node_js: 10.23
 
 cache:
   directories:
     - node_modules
 
 addons:
-  firefox: "66.0"
+  firefox: latest
   chrome: stable
 
 jobs:
@@ -22,12 +22,12 @@ jobs:
     - if: type = pull_request
       env: POLYMER=2
       addons:
-        firefox: "66.0"
+        firefox: latest
         chrome: stable
     - if: type = pull_request
       env: POLYMER=3
       addons:
-        firefox: "66.0"
+        firefox: latest
         chrome: stable
     - if: type = cron
       env: TEST_SUITE=unit_tests POLYMER=2

bower.json

@@ -29,22 +29,19 @@
   ],
   "dependencies": {
     "polymer": "^2.0.0",
-    "vaadin-control-state-mixin": "vaadin/vaadin-control-state-mixin#^2.1.1",
-    "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.2.1",
-    "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.2.0",
-    "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.2.0",
-    "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.3.0"
+    "vaadin-control-state-mixin": "vaadin/vaadin-control-state-mixin#^2.2.1",
+    "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.6.1",
+    "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.6.0",
+    "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.3.2",
+    "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.4.1"
   },
   "devDependencies": {
     "iron-component-page": "^3.0.0",
     "iron-form": "^2.0.0",
     "iron-test-helpers": "^2.0.0",
-    "vaadin-button": "vaadin/vaadin-button#^2.1.0",
+    "vaadin-button": "vaadin/vaadin-button#^2.4.0",
     "webcomponentsjs": "^1.0.0",
     "web-component-tester": "^6.1.5",
-    "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^3.0.0"
-  },
-  "resolutions": {
-    "vaadin-element-mixin": "^2.0.0"
+    "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^3.1.0"
   }
 }

demo/radio-button-basic-demos.html

@@ -46,6 +46,19 @@ <h3>Read-only</h3>
       </template>
     </vaadin-demo-snippet>
 
+    <h3>Helper text</h3>
+    <p>Use the <code>helper-text</code> attribute or add content to the <code>helper</code> slot to set helper content.</p>
+    <vaadin-demo-snippet id="basic-demos-helper-text">
+      <template preserve-content>
+        <vaadin-radio-group label="Label" theme="vertical">
+          <span slot="helper">Select an option</span>
+          <vaadin-radio-button checked>Option one</vaadin-radio-button>
+          <vaadin-radio-button>Option two</vaadin-radio-button>
+          <vaadin-radio-button>Option three</vaadin-radio-button>
+        </vaadin-radio-group>
+      </template>
+    </vaadin-demo-snippet>
+
     <h3>Object list</h3>
     <vaadin-demo-snippet id="object-list" when-defined="vaadin-radio-button">
       <template preserve-content>
@@ -78,12 +91,12 @@ <h3>Value change event</h3>
           <vaadin-radio-button value="two">Option two</vaadin-radio-button>
           <vaadin-radio-button value="three">Option three</vaadin-radio-button>
         </vaadin-radio-group>
-        <div id="output">Selected value:</div>
+        <div>Selected value: <span id="output"></span></div>
         <script>
           window.addDemoReadyListener('#value-change-event', function(document) {
             const radioButtonGroup = document.querySelector('vaadin-radio-group');
             const output = document.querySelector('#output');
-            radioButtonGroup.addEventListener('value-changed', function(event) {
+            radioButtonGroup.addEventListener('change', function(event) {
               output.textContent = radioButtonGroup.value;
             });
           });

demo/radio-button-theme-variants-demos.html

@@ -24,6 +24,25 @@ <h4>Vertical</h4>
       </template>
     </vaadin-demo-snippet>
 
+    <h3>Helper text position</h3>
+    <vaadin-demo-snippet id="theme-demos-helper-text-position">
+      <template preserve-content>
+        <h4>Below</h4>
+        <vaadin-radio-group label="Label" helper-text="Helper text below">
+          <vaadin-radio-button checked>Option one</vaadin-radio-button>
+          <vaadin-radio-button>Option two</vaadin-radio-button>
+          <vaadin-radio-button>Option three</vaadin-radio-button>
+        </vaadin-radio-group>
+
+        <h4>Above</h4>
+        <vaadin-radio-group label="Label" helper-text="Helper text above" theme="helper-above-field">
+          <vaadin-radio-button checked>Option one</vaadin-radio-button>
+          <vaadin-radio-button>Option two</vaadin-radio-button>
+          <vaadin-radio-button>Option three</vaadin-radio-button>
+        </vaadin-radio-group>
+      </template>
+    </vaadin-demo-snippet>
+
 
   </template>
   <script>

gen-tsd.json

@@ -0,0 +1,9 @@
+{
+  "excludeFiles": [
+    "wct.conf.js",
+    "index.html",
+    "demo/**/*",
+    "test/**/*",
+    "theme/**/*"
+  ]
+}

magi-p3-post.js

@@ -0,0 +1,12 @@
+module.exports = {
+  files: [
+    'vaadin-radio-button.js',
+    'vaadin-radio-group.js'
+  ],
+  from: [
+    /import '\.\/theme\/lumo\/vaadin-(.+)\.js';/
+  ],
+  to: [
+    `import './theme/lumo/vaadin-$1.js';\nexport * from './src/vaadin-$1.js';`
+  ]
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-radio-button",
-  "version": "1.2.3",
+  "version": "1.5.1",
   "description": "vaadin-radio-button",
   "main": "vaadin-radio-button.html",
   "repository": "vaadin/vaadin-radio-button",
@@ -19,6 +19,7 @@
   },
   "homepage": "https://vaadin.com/components",
   "files": [
+    "vaadin-*.d.ts",
     "vaadin-*.js",
     "src",
     "theme"

src/vaadin-radio-button.html

@@ -50,7 +50,7 @@
       <span part="radio">
         <input
           type="radio"
-          checked="{{checked::change}}"
+          checked="[[checked]]"
           disabled$="[[disabled]]"
           role="presentation"
           on-change="_onChange"
@@ -112,13 +112,14 @@
         }
 
         static get version() {
-          return '1.2.3';
+          return '1.5.1';
         }
 
         static get properties() {
           return {
             /**
              * True if the radio button is checked.
+             * @type {boolean}
              */
             checked: {
               type: Boolean,
@@ -135,6 +136,7 @@
 
             /**
              * The value for this element.
+             * @type {string}
              */
             value: {
               type: String,
@@ -152,6 +154,9 @@
         }
 
         /**
+         * @param {string} prop
+         * @param {?string} oldVal
+         * @param {?string} newVal
          * @protected
          */
         attributeChangedCallback(prop, oldVal, newVal) {
@@ -173,7 +178,7 @@
           }
         }
 
-
+        /** @protected */
         ready() {
           super.ready();
 
@@ -192,6 +197,7 @@
           this._updateLabelAttribute();
         }
 
+        /** @private */
         _updateLabelAttribute() {
           const label = this.shadowRoot.querySelector('[part~="label"]');
           const assignedNodes = label.firstElementChild.assignedNodes();
@@ -202,6 +208,7 @@
           }
         }
 
+        /** @private */
         _isAssignedNodesEmpty(nodes) {
           // The assigned nodes considered to be empty if there is no slotted content or only one empty text node
           return nodes.length === 0 ||
@@ -210,10 +217,12 @@
               && nodes[0].textContent.trim() === '');
         }
 
+        /** @private */
         _checkedChanged(checked) {
           this.setAttribute('aria-checked', checked);
         }
 
+        /** @private */
         _addListeners() {
           this._addEventListenerToNode(this, 'down', (e) => {
             if (!this.disabled) {
@@ -225,6 +234,10 @@
             this.removeAttribute('active');
 
             if (!this.checked && !this.disabled) {
+              // If you change this block, please test manually that radio-button and
+              // radio-group still works ok on iOS 12/13 and up as it may cause
+              // an issue that is not possible to test programmatically.
+              // See: https://github.com/vaadin/vaadin-radio-button/issues/140
               this.click();
             }
           });
@@ -251,15 +264,26 @@
          * @protected
          */
         click() {
-          this.shadowRoot.querySelector('input').click();
+          // If you change this block, please test manually that radio-button and
+          // radio-group still works ok on iOS 12/13 and up as it may cause
+          // an issue that is not possible to test programmatically.
+          // See: https://github.com/vaadin/vaadin-radio-button/issues/140
+          if (!this.disabled) {
+            this.shadowRoot.querySelector('input').dispatchEvent(new MouseEvent('click'));
+          }
         }
 
-        /** @protected */
+        /**
+         * @return {!HTMLInputElement}
+         * @protected
+         */
         get focusElement() {
           return this.shadowRoot.querySelector('input');
         }
 
+        /** @private */
         _onChange(e) {
+          this.checked = e.target.checked;
           // In the Shadow DOM, the `change` event is not leaked into the
           // ancestor tree, so we must do this manually.
           const changeEvent = new CustomEvent('change', {