experiment: add LitElement based version of checkbox-group

packages/checkbox-group/package.json

@@ -25,7 +25,9 @@
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
-    "web-types.lit.json"
+    "web-types.lit.json",
+    "!vaadin-lit-*.d.ts",
+    "!vaadin-lit-*.js"
   ],
   "keywords": [
     "Vaadin",

packages/checkbox-group/src/vaadin-checkbox-group-mixin.js

@@ -34,6 +34,7 @@ export const CheckboxGroupMixin = (superclass) =>
           type: Array,
           value: () => [],
           notify: true,
+          sync: true,
           observer: '__valueChanged',
         },
       };

packages/checkbox-group/src/vaadin-lit-checkbox-group.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+export * from './vaadin-checkbox-group.js';

packages/checkbox-group/src/vaadin-lit-checkbox-group.js

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/checkbox/src/vaadin-lit-checkbox.js';
+import { html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { CheckboxGroupMixin } from './vaadin-checkbox-group-mixin.js';
+import { checkboxGroupStyles } from './vaadin-checkbox-group-styles.js';
+
+/**
+ * LitElement based version of `<vaadin-checkbox-group>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment and not yet a part of Vaadin platform.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class CheckboxGroup extends CheckboxGroupMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-checkbox-group';
+  }
+
+  static get styles() {
+    return checkboxGroupStyles;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div class="vaadin-group-field-container">
+        <div part="label">
+          <slot name="label"></slot>
+          <span part="required-indicator" aria-hidden="true"></span>
+        </div>
+
+        <div part="group-field">
+          <slot></slot>
+        </div>
+
+        <div part="helper-text">
+          <slot name="helper"></slot>
+        </div>
+
+        <div part="error-message">
+          <slot name="error-message"></slot>
+        </div>
+      </div>
+
+      <slot name="tooltip"></slot>
+    `;
+  }
+}
+
+defineCustomElement(CheckboxGroup);
+
+export { CheckboxGroup };

packages/checkbox-group/test/checkbox-group-lit.test.js

@@ -0,0 +1,2 @@
+import '../src/vaadin-lit-checkbox-group.js';
+import './checkbox-group.common.js';

packages/checkbox-group/test/checkbox-group-polymer.test.js

@@ -0,0 +1,2 @@
+import '../src/vaadin-checkbox-group.js';
+import './checkbox-group.common.js';

packages/checkbox-group/test/checkbox-group.test.js → packages/checkbox-group/test/checkbox-group.common.js

@@ -2,7 +2,6 @@ import { expect } from '@esm-bundle/chai';
 import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import '../vaadin-checkbox-group.js';
 
 describe('vaadin-checkbox-group', () => {
   let group, checkboxes;
@@ -32,8 +31,8 @@ describe('vaadin-checkbox-group', () => {
           <vaadin-checkbox value="2" label="Checkbox 2" disabled></vaadin-checkbox>
         </vaadin-checkbox-group>
       `);
-      checkboxes = group.querySelectorAll('vaadin-checkbox');
       await nextFrame();
+      checkboxes = group.querySelectorAll('vaadin-checkbox');
     });
 
     it('should keep initial disabled property for checkboxes', () => {
@@ -47,7 +46,9 @@ describe('vaadin-checkbox-group', () => {
       container.appendChild(group);
       await nextFrame();
       checkboxes[0].checked = true;
+      await nextFrame();
       checkboxes[0].checked = false;
+      await nextFrame();
       expect(checkboxes[0].checked).to.be.false;
     });
   });
@@ -64,12 +65,13 @@ describe('vaadin-checkbox-group', () => {
       checkboxes = [...group.querySelectorAll('vaadin-checkbox')];
     });
 
-    it('should propagate disabled property to checkboxes', () => {
+    it('should propagate disabled property to checkboxes', async () => {
       checkboxes.forEach((checkbox) => {
         expect(checkbox.disabled).to.be.true;
       });
 
       group.disabled = false;
+      await nextFrame();
       checkboxes.forEach((checkbox) => {
         expect(checkbox.disabled).to.be.false;
       });
@@ -161,34 +163,43 @@ describe('vaadin-checkbox-group', () => {
       expect(group.value).to.not.include('1');
     });
 
-    it('should set proper value to checkbox-group when a checkbox is checked', () => {
+    it('should set proper value to checkbox-group when a checkbox is checked', async () => {
       checkboxes[0].checked = true;
+      await nextFrame();
       expect(group.value).to.deep.equal(['1']);
       checkboxes[1].checked = true;
+      await nextFrame();
       expect(group.value).to.deep.equal(['1', '2']);
     });
 
-    it('should set proper value to checkbox-group when a checkbox is unchecked', () => {
+    it('should set proper value to checkbox-group when a checkbox is unchecked', async () => {
       checkboxes[0].checked = true;
+      await nextFrame();
       checkboxes[1].checked = true;
+      await nextFrame();
       expect(group.value).to.deep.equal(['1', '2']);
       checkboxes[1].checked = false;
+      await nextFrame();
       expect(group.value).to.deep.equal(['1']);
     });
 
-    it('should check proper checkbox when value is set', () => {
+    it('should check proper checkbox when value is set', async () => {
       group.value = ['2'];
+      await nextFrame();
       expect(checkboxes[1].checked).to.be.true;
       group.value = ['1', '3'];
+      await nextFrame();
       expect(checkboxes[0].checked).to.be.true;
       expect(checkboxes[2].checked).to.be.true;
     });
 
-    it('should uncheck proper checkbox when value is removed', () => {
+    it('should uncheck proper checkbox when value is removed', async () => {
       group.value = ['1', '3'];
+      await nextFrame();
       expect(checkboxes[0].checked).to.be.true;
       expect(checkboxes[2].checked).to.be.true;
       group.value = ['1'];
+      await nextFrame();
       expect(checkboxes[0].checked).to.be.true;
       expect(checkboxes[2].checked).to.be.false;
     });
@@ -256,10 +267,12 @@ describe('vaadin-checkbox-group', () => {
       checkboxes = [...group.querySelectorAll('vaadin-checkbox')];
     });
 
-    it('should toggle the attribute on value change', () => {
+    it('should toggle the attribute on value change', async () => {
       group.value = ['2'];
+      await nextFrame();
       expect(group.hasAttribute('has-value')).to.be.true;
       group.value = [];
+      await nextFrame();
       expect(group.hasAttribute('has-value')).to.be.false;
     });
   });

packages/checkbox-group/test/validation-lit.test.js

@@ -0,0 +1,2 @@
+import '../src/vaadin-lit-checkbox-group.js';
+import './validation.common.js';

packages/checkbox-group/test/validation-polymer.test.js

@@ -0,0 +1,2 @@
+import '../src/vaadin-checkbox-group.js';
+import './validation.common.js';

packages/checkbox-group/test/validation.test.js → packages/checkbox-group/test/validation.common.js

@@ -1,8 +1,7 @@
 import { expect } from '@esm-bundle/chai';
-import { fixtureSync, nextFrame, nextRender } from '@vaadin/testing-helpers';
+import { fixtureSync, nextFrame, nextRender, nextUpdate } from '@vaadin/testing-helpers';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import '../vaadin-checkbox-group.js';
 
 describe('validation', () => {
   let group, validateSpy;
@@ -56,15 +55,18 @@ describe('validation', () => {
       expect(group.checkValidity()).to.be.true;
     });
 
-    it('should validate when adding a value', () => {
+    it('should validate when adding a value', async () => {
       group.value = ['en', 'fr'];
+      await nextUpdate(group);
       expect(validateSpy.calledOnce).to.be.true;
     });
 
-    it('should validate when removing a value', () => {
+    it('should validate when removing a value', async () => {
       group.value = ['en', 'fr'];
+      await nextUpdate(group);
       validateSpy.resetHistory();
       group.value = ['en'];
+      await nextUpdate(group);
       expect(validateSpy.calledOnce).to.be.true;
     });
 
@@ -98,10 +100,11 @@ describe('validation', () => {
       expect(event.detail.valid).to.be.true;
     });
 
-    it('should fire a validated event on validation failure', () => {
+    it('should fire a validated event on validation failure', async () => {
       const validatedSpy = sinon.spy();
       group.addEventListener('validated', validatedSpy);
       group.required = true;
+      await nextUpdate(group);
       group.validate();
 
       expect(validatedSpy.calledOnce).to.be.true;
@@ -157,14 +160,17 @@ describe('validation', () => {
       expect(group.checkValidity()).to.be.true;
     });
 
-    it('should be valid after selecting a checkbox', () => {
+    it('should be valid after selecting a checkbox', async () => {
       checkboxes[0].click();
+      await nextUpdate(group);
       expect(group.invalid).to.be.false;
     });
 
-    it('should be invalid after deselecting all checkboxes', () => {
+    it('should be invalid after deselecting all checkboxes', async () => {
       checkboxes[0].click();
+      await nextUpdate(group);
       checkboxes[0].click();
+      await nextUpdate(group);
       expect(group.invalid).to.be.true;
     });
   });