From b1d3e4ef11fedbac3aefb6cb51e4ef821a00d9c9 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Mon, 13 Sep 2021 18:13:20 +0300 Subject: [PATCH 01/32] refactor!: use new mixins for checkbox --- packages/checkbox/package.json | 1 + packages/checkbox/src/vaadin-checkbox.js | 279 ++++-------------- .../theme/lumo/vaadin-checkbox-styles.js | 1 - .../theme/material/vaadin-checkbox-styles.js | 1 - packages/field-base/src/aria-label-mixin.js | 23 +- packages/field-base/src/helper-text-mixin.js | 9 +- 6 files changed, 72 insertions(+), 242 deletions(-) diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json index 61bbd7a304..19c0070d8e 100644 --- a/packages/checkbox/package.json +++ b/packages/checkbox/package.json @@ -27,6 +27,7 @@ "dependencies": { "@polymer/polymer": "^3.0.0", "@vaadin/component-base": "^22.0.0-alpha6", + "@vaadin/field-base": "^22.0.0-alpha6", "@vaadin/vaadin-control-state-mixin": "^22.0.0-alpha6", "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha6", "@vaadin/vaadin-material-styles": "^22.0.0-alpha6", diff --git a/packages/checkbox/src/vaadin-checkbox.js b/packages/checkbox/src/vaadin-checkbox.js index a31a534f64..86fec0cf4f 100644 --- a/packages/checkbox/src/vaadin-checkbox.js +++ b/packages/checkbox/src/vaadin-checkbox.js @@ -4,9 +4,12 @@ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ */ import { PolymerElement, html } from '@polymer/polymer/polymer-element.js'; -import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js'; -import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js'; +import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js'; import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; +import { AriaLabelMixin } from '@vaadin/field-base/src/aria-label-mixin.js'; +import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js'; +import { InputSlotMixin } from '@vaadin/field-base/src/input-slot-mixin.js'; +import { SlotLabelMixin } from '@vaadin/field-base/src/slot-label-mixin.js'; import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; /** @@ -41,17 +44,26 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix * * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation. * - * @fires {Event} change - Fired when the user commits a value change. + * @fires {CustomEvent} change - Fired when the user commits a value change. * @fires {CustomEvent} checked-changed - Fired when the `checked` property changes. * @fires {CustomEvent} indeterminate-changed - Fired when the `indeterminate` property changes. * * @extends HTMLElement - * @mixes ElementMixin - * @mixes ControlStateMixin * @mixes ThemableMixin - * @mixes GestureEventListeners + * @mixes ElementMixin + * @mixes ActiveMixin + * @mixes AriaLabelMixin + * @mixes InputSlotMixin + * @mixes CheckedMixin + * @mixes SlotLabelMixin */ -class CheckboxElement extends ElementMixin(ControlStateMixin(ThemableMixin(GestureEventListeners(PolymerElement)))) { +class Checkbox extends SlotLabelMixin( + CheckedMixin(InputSlotMixin(AriaLabelMixin(ActiveMixin(ElementMixin(ThemableMixin(PolymerElement)))))) +) { + static get is() { + return 'vaadin-checkbox'; + } + static get template() { return html` - - +
+
+ +
+
+ +
+
+ +
+
`; } - static get is() { - return 'vaadin-checkbox'; - } - static get properties() { return { /** - * True if the checkbox is checked. - * @type {boolean} - */ - checked: { - type: Boolean, - value: false, - notify: true, - observer: '_checkedChanged', - reflectToAttribute: true - }, - - /** - * Indeterminate state of the checkbox when it's neither checked nor unchecked, but undetermined. + * True if the checkbox is in the indeterminate state which means + * it is not possible to say whether the checkbox is checked or unchecked. + * The state resets once the checkbox gets checked or unchecked. + * * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes + * * @type {boolean} */ indeterminate: { type: Boolean, notify: true, - observer: '_indeterminateChanged', - reflectToAttribute: true, - value: false + value: false, + reflectToAttribute: true }, /** - * The value given to the data submitted with the checkbox's name to the server when the control is inside a form. + * The name of the checkbox + * + * @type {string} */ - value: { - type: String, - value: 'on' - }, - - /** @private */ - _nativeCheckbox: { - type: Object + name: { + type: String } }; } - constructor() { - super(); - /** - * @type {string} - * Name of the element. - */ - this.name; + static get delegateProps() { + return [...super.delegateProps, 'indeterminate', 'name']; } - get name() { - return this.checked ? this._storedName : ''; - } - - set name(name) { - this._storedName = name; - } - - ready() { - super.ready(); - - this.setAttribute('role', 'checkbox'); - - this._nativeCheckbox = this.shadowRoot.querySelector('input[type="checkbox"]'); - - this.addEventListener('click', this._handleClick.bind(this)); - - this._addActiveListeners(); - - const attrName = this.getAttribute('name'); - if (attrName) { - this.name = attrName; - } - - this.shadowRoot - .querySelector('[part~="label"]') - .querySelector('slot') - .addEventListener('slotchange', this._updateLabelAttribute.bind(this)); - - this._updateLabelAttribute(); - } - - /** @private */ - _updateLabelAttribute() { - const label = this.shadowRoot.querySelector('[part~="label"]'); - const assignedNodes = label.firstElementChild.assignedNodes(); - if (this._isAssignedNodesEmpty(assignedNodes)) { - label.setAttribute('empty', ''); - } else { - label.removeAttribute('empty'); - } - } - - /** @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 || - (nodes.length == 1 && nodes[0].nodeType == Node.TEXT_NODE && nodes[0].textContent.trim() === '') - ); - } - - /** @private */ - _checkedChanged(checked) { - if (this.indeterminate) { - this.setAttribute('aria-checked', 'mixed'); - } else { - this.setAttribute('aria-checked', Boolean(checked)); - } - } - - /** @private */ - _indeterminateChanged(indeterminate) { - if (indeterminate) { - this.setAttribute('aria-checked', 'mixed'); - } else { - this.setAttribute('aria-checked', this.checked); - } - } - - /** @private */ - _addActiveListeners() { - // DOWN - this._addEventListenerToNode(this, 'down', (e) => { - if (this.__interactionsAllowed(e)) { - this.setAttribute('active', ''); - } - }); - - // UP - this._addEventListenerToNode(this, 'up', () => this.removeAttribute('active')); - - // KEYDOWN - this.addEventListener('keydown', (e) => { - if (this.__interactionsAllowed(e) && e.keyCode === 32) { - e.preventDefault(); - this.setAttribute('active', ''); - } - }); - - // KEYUP - this.addEventListener('keyup', (e) => { - if (this.__interactionsAllowed(e) && e.keyCode === 32) { - e.preventDefault(); - this._toggleChecked(); - this.removeAttribute('active'); + constructor() { + super(); - if (this.indeterminate) { - this.indeterminate = false; - } - } - }); + this._setType('checkbox'); } /** - * @return {!HTMLInputElement} + * @override * @protected */ - get focusElement() { - return this.shadowRoot.querySelector('input'); + get _sourceSlot() { + return this.$.noop; } /** - * True if users' interactions (mouse or keyboard) - * should toggle the checkbox + * @protected + * @override */ - __interactionsAllowed(e) { - if (this.disabled) { - return false; - } + _toggleChecked() { + this.indeterminate = false; - // https://github.com/vaadin/vaadin-checkbox/issues/63 - if (e.target.localName === 'a') { - return false; - } + super._toggleChecked(); - return true; - } - - /** @private */ - _handleClick(e) { - if (this.__interactionsAllowed(e)) { - if (!this.indeterminate) { - if (e.composedPath()[0] !== this._nativeCheckbox) { - e.preventDefault(); - this._toggleChecked(); - } - } else { - /* - * Required for IE 11 and Edge. - * See issue here: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7344418/ - */ - this.indeterminate = false; - e.preventDefault(); - this._toggleChecked(); - } - } - } - - /** @protected */ - _toggleChecked() { - this.checked = !this.checked; this.dispatchEvent(new CustomEvent('change', { composed: false, bubbles: true })); } @@ -328,6 +177,6 @@ class CheckboxElement extends ElementMixin(ControlStateMixin(ThemableMixin(Gestu */ } -customElements.define(CheckboxElement.is, CheckboxElement); +customElements.define(Checkbox.is, Checkbox); -export { CheckboxElement }; +export { Checkbox }; diff --git a/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js b/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js index 86e0ccdfe4..fc91fab023 100644 --- a/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js +++ b/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js @@ -26,7 +26,6 @@ registerStyles( border-radius: var(--lumo-border-radius-s); background-color: var(--lumo-contrast-20pct); transition: transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2), background-color 0.15s; - pointer-events: none; line-height: 1.2; cursor: var(--lumo-clickable-cursor); } diff --git a/packages/checkbox/theme/material/vaadin-checkbox-styles.js b/packages/checkbox/theme/material/vaadin-checkbox-styles.js index 26acb948cb..bf8d814342 100644 --- a/packages/checkbox/theme/material/vaadin-checkbox-styles.js +++ b/packages/checkbox/theme/material/vaadin-checkbox-styles.js @@ -32,7 +32,6 @@ registerStyles( position: relative; border-radius: 2px; box-shadow: inset 0 0 0 2px var(--material-secondary-text-color); - pointer-events: none; line-height: 1.275; background-color: transparent; } diff --git a/packages/field-base/src/aria-label-mixin.js b/packages/field-base/src/aria-label-mixin.js index 4db921dea7..0394a18d3c 100644 --- a/packages/field-base/src/aria-label-mixin.js +++ b/packages/field-base/src/aria-label-mixin.js @@ -9,27 +9,14 @@ import { InputMixin } from './input-mixin.js'; const AriaLabelMixinImplementation = (superclass) => class AriaLabelMixinClass extends InputMixin(LabelMixin(superclass)) { - constructor() { - super(); - - this.__preventDuplicateLabelClick = this.__preventDuplicateLabelClick.bind(this); - } - - /** @protected */ - connectedCallback() { - super.connectedCallback(); - - if (this._labelNode) { - this._labelNode.addEventListener('click', this.__preventDuplicateLabelClick); - } - } - /** @protected */ - disconnectedCallback() { - super.disconnectedCallback(); + ready() { + super.ready(); if (this._labelNode) { - this._labelNode.removeEventListener('click', this.__preventDuplicateLabelClick); + this._labelNode.addEventListener('click', (event) => { + this.__preventDuplicateLabelClick(event); + }); } } diff --git a/packages/field-base/src/helper-text-mixin.js b/packages/field-base/src/helper-text-mixin.js index f481184190..764b637c7b 100644 --- a/packages/field-base/src/helper-text-mixin.js +++ b/packages/field-base/src/helper-text-mixin.js @@ -52,8 +52,8 @@ const HelperTextMixinImplementation = (superclass) => } /** @protected */ - connectedCallback() { - super.connectedCallback(); + ready() { + super.ready(); if (this._helperNode) { this._currentHelper = this._helperNode; @@ -61,11 +61,6 @@ const HelperTextMixinImplementation = (superclass) => this._applyCustomHelper(); } - } - - /** @protected */ - ready() { - super.ready(); this.__helperSlot = this.shadowRoot.querySelector('[name="helper"]'); this.__helperSlot.addEventListener('slotchange', this.__onHelperSlotChange.bind(this)); From 816c2ef7f7ed1342c5e65cace2cb2484cee2e3e7 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Wed, 15 Sep 2021 15:03:03 +0300 Subject: [PATCH 02/32] fix: update Lumo visual tests --- .../test/visual/lumo/checkbox.test.js | 66 +++++++++++------- .../checkbox/baseline/rtl-empty.png | Bin 0 -> 273 bytes .../theme/lumo/vaadin-checkbox-styles.js | 4 +- 3 files changed, 44 insertions(+), 26 deletions(-) create mode 100644 packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/rtl-empty.png diff --git a/packages/checkbox/test/visual/lumo/checkbox.test.js b/packages/checkbox/test/visual/lumo/checkbox.test.js index 723462c134..ddcf12aa52 100644 --- a/packages/checkbox/test/visual/lumo/checkbox.test.js +++ b/packages/checkbox/test/visual/lumo/checkbox.test.js @@ -1,5 +1,6 @@ -import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js'; +import { sendKeys } from '@web/test-runner-commands'; import { visualDiff } from '@web/test-runner-visual-regression'; +import { fixtureSync } from '@vaadin/testing-helpers'; import '../../../theme/lumo/vaadin-checkbox.js'; describe('checkbox', () => { @@ -16,14 +17,9 @@ describe('checkbox', () => { await visualDiff(div, 'basic'); }); - it('focus-ring', async () => { - element.setAttribute('focus-ring', ''); - await visualDiff(div, 'focus-ring'); - }); - - it('disabled', async () => { - element.disabled = true; - await visualDiff(div, 'disabled'); + it('empty', async () => { + element.label = ''; + await visualDiff(div, 'empty'); }); it('checked', async () => { @@ -36,25 +32,47 @@ describe('checkbox', () => { await visualDiff(div, 'indeterminate'); }); - it('disabled checked', async () => { - element.disabled = true; - element.checked = true; - await visualDiff(div, 'disabled-checked'); + it('focus-ring', async () => { + await sendKeys({ press: 'Tab' }); + await visualDiff(div, 'focus-ring'); }); - it('disabled indeterminate', async () => { - element.disabled = true; - element.indeterminate = true; - await visualDiff(div, 'disabled-indeterminate'); - }); + describe('disabled', () => { + beforeEach(() => { + element.disabled = true; + }); - it('empty', async () => { - element.textContent = ''; - await visualDiff(div, 'empty'); + it('basic', async () => { + await visualDiff(div, 'disabled'); + }); + + it('checked', async () => { + element.checked = true; + await visualDiff(div, 'disabled-checked'); + }); + + it('indeterminate', async () => { + element.indeterminate = true; + await visualDiff(div, 'disabled-indeterminate'); + }); }); - it('RTL', async () => { - document.documentElement.setAttribute('dir', 'rtl'); - await visualDiff(div, 'rtl'); + describe('RTL', () => { + before(() => { + document.documentElement.setAttribute('dir', 'rtl'); + }); + + after(() => { + document.documentElement.removeAttribute('dir'); + }); + + it('basic', async () => { + await visualDiff(div, 'rtl'); + }); + + it('empty', async () => { + element.label = ''; + await visualDiff(div, 'rtl-empty'); + }); }); }); diff --git a/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/rtl-empty.png b/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/rtl-empty.png new file mode 100644 index 0000000000000000000000000000000000000000..3d09c8cfadb8c6fb25028aa051766c351268c254 GIT binary patch literal 273 zcmeAS@N?(olHy`uVBq!ia0vp^Iv~u!1|;QLq8Nb`V{wqX6T`Z5GB1Ig)1EGlArY-_ zulaH}If%4ATpgm7(y@i(*Z=*x99)K`_6IUWeRkUvNU)vTy#G$Q;VIua#pjeJwej8X zI+(+i7HlxP>88jTvDgoMvTxci&f2y)GcG6g`u^u#Hk)^8tvz9!k>3=P{ny~u+kXvW zb+P*C8d6n4zPA;V?dP54p4HrR|1pd1XW!3EXIX#0*tVxSzNDU$b+hISUy#|{Vsn<= z$jacd<*mJ$$bZ)H;MJELx}UFxa-Mbkz9BM&y~g90_Xen1usiHNb=bNuYprJidW*r+ L)z4*}Q$iB}M*D4D literal 0 HcmV?d00001 diff --git a/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js b/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js index fc91fab023..98c51a20ae 100644 --- a/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js +++ b/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js @@ -14,7 +14,7 @@ registerStyles( outline: none; } - [part='label']:not([empty]) { + :host([has-label]) [part='label'] { margin: 0.1875em 0.875em 0.1875em 0.375em; } @@ -105,7 +105,7 @@ registerStyles( } /* RTL specific styles */ - :host([dir='rtl']) [part='label']:not([empty]) { + :host([dir='rtl'][has-label]) [part='label'] { margin: 0.1875em 0.375em 0.1875em 0.875em; } From b4b66bbc0ba847490d45135fea7b8e41b163e92a Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Wed, 15 Sep 2021 15:11:02 +0300 Subject: [PATCH 03/32] fix: update Material visual tests --- .../test/visual/material/checkbox.test.js | 66 +++++++++++------- .../checkbox/baseline/rtl-empty.png | Bin 0 -> 256 bytes .../theme/material/vaadin-checkbox-styles.js | 4 +- 3 files changed, 44 insertions(+), 26 deletions(-) create mode 100644 packages/checkbox/test/visual/material/screenshots/checkbox/baseline/rtl-empty.png diff --git a/packages/checkbox/test/visual/material/checkbox.test.js b/packages/checkbox/test/visual/material/checkbox.test.js index cda49ec6a5..5b7e16355f 100644 --- a/packages/checkbox/test/visual/material/checkbox.test.js +++ b/packages/checkbox/test/visual/material/checkbox.test.js @@ -1,5 +1,6 @@ -import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js'; +import { sendKeys } from '@web/test-runner-commands'; import { visualDiff } from '@web/test-runner-visual-regression'; +import { fixtureSync } from '@vaadin/testing-helpers'; import '../../../theme/material/vaadin-checkbox.js'; describe('checkbox', () => { @@ -16,14 +17,9 @@ describe('checkbox', () => { await visualDiff(div, 'basic'); }); - it('focus-ring', async () => { - element.setAttribute('focus-ring', ''); - await visualDiff(div, 'focus-ring'); - }); - - it('disabled', async () => { - element.disabled = true; - await visualDiff(div, 'disabled'); + it('empty', async () => { + element.label = ''; + await visualDiff(div, 'empty'); }); it('checked', async () => { @@ -36,25 +32,47 @@ describe('checkbox', () => { await visualDiff(div, 'indeterminate'); }); - it('disabled checked', async () => { - element.disabled = true; - element.checked = true; - await visualDiff(div, 'disabled-checked'); + it('focus-ring', async () => { + await sendKeys({ press: 'Tab' }); + await visualDiff(div, 'focus-ring'); }); - it('disabled indeterminate', async () => { - element.disabled = true; - element.indeterminate = true; - await visualDiff(div, 'disabled-indeterminate'); - }); + describe('disabled', () => { + beforeEach(() => { + element.disabled = true; + }); - it('empty', async () => { - element.textContent = ''; - await visualDiff(div, 'empty'); + it('basic', async () => { + await visualDiff(div, 'disabled'); + }); + + it('checked', async () => { + element.checked = true; + await visualDiff(div, 'disabled-checked'); + }); + + it('indeterminate', async () => { + element.indeterminate = true; + await visualDiff(div, 'disabled-indeterminate'); + }); }); - it('RTL', async () => { - document.documentElement.setAttribute('dir', 'rtl'); - await visualDiff(div, 'rtl'); + describe('RTL', () => { + before(() => { + document.documentElement.setAttribute('dir', 'rtl'); + }); + + after(() => { + document.documentElement.removeAttribute('dir'); + }); + + it('basic', async () => { + await visualDiff(div, 'rtl'); + }); + + it('empty', async () => { + element.label = ''; + await visualDiff(div, 'rtl-empty'); + }); }); }); diff --git a/packages/checkbox/test/visual/material/screenshots/checkbox/baseline/rtl-empty.png b/packages/checkbox/test/visual/material/screenshots/checkbox/baseline/rtl-empty.png new file mode 100644 index 0000000000000000000000000000000000000000..77e47bfadf255d9f341b82da120229e760dd6628 GIT binary patch literal 256 zcmeAS@N?(olHy`uVBq!ia0vp^Iv~u!1|;QLq8Nb`V{wqX6T`Z5GB1IgU7jwEArY-_ zZ*1f}q9EXM@#9HehZkZi4lmSfSITIgV3pA*;PqgUcEeORb??uguGX!WiLkpC#jXG8 zXZZm=*3FtTd=KVur3D+zZo29BIw6~PYuJ~2+n??EUNMhdk>zsS=T>jc+Z!1SjybHo zy6alqLqj$Oh39)rrw19?zBvE-ULvvyKcf#>wp*$PdEMT8y)^RrEq$3}6Wy|N5BKH2 lj*|IR?YS($3`zNI@g;d$jfXbNy$1S%!PC{xWt~$(6982sXbu1X literal 0 HcmV?d00001 diff --git a/packages/checkbox/theme/material/vaadin-checkbox-styles.js b/packages/checkbox/theme/material/vaadin-checkbox-styles.js index bf8d814342..294367c9cf 100644 --- a/packages/checkbox/theme/material/vaadin-checkbox-styles.js +++ b/packages/checkbox/theme/material/vaadin-checkbox-styles.js @@ -14,7 +14,7 @@ registerStyles( -webkit-tap-highlight-color: transparent; } - [part='label']:not([empty]) { + :host([has-label]) [part='label'] { margin: 3px 12px 3px 6px; } @@ -126,7 +126,7 @@ registerStyles( } /* RTL specific styles */ - :host([dir='rtl']) [part='label']:not([empty]) { + :host([dir='rtl'][has-label]) [part='label'] { margin: 3px 6px 3px 12px; } `, From ea4fda2e9ebe3a4f2c80bca7b04eeef9d557b716 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Fri, 17 Sep 2021 10:19:20 +0300 Subject: [PATCH 04/32] refactor: switch checked state on change event --- packages/field-base/src/checked-mixin.js | 41 +++---------------- .../field-base/test/checked-mixin.test.js | 20 +++++---- 2 files changed, 16 insertions(+), 45 deletions(-) diff --git a/packages/field-base/src/checked-mixin.js b/packages/field-base/src/checked-mixin.js index c379b2bd5f..e4ce1c6ba1 100644 --- a/packages/field-base/src/checked-mixin.js +++ b/packages/field-base/src/checked-mixin.js @@ -33,48 +33,17 @@ const CheckedMixinImplementation = (superclass) => return this.inputElement; } - /** @protected */ - ready() { - super.ready(); - - this.addEventListener('click', (event) => { - this._onClick(event); - }); - } - - /** - * @param {!MouseEvent} event - * @return {boolean} - * @protected - */ - _interactionsAllowed(event) { - if (this.disabled) { - return false; - } - - if (event.target.localName === 'a') { - return false; - } - - return true; - } - /** - * @param {!MouseEvent} event * @protected + * @override */ - _onClick(event) { - if (!this._interactionsAllowed(event)) { - event.preventDefault(); - return; - } - - this._toggleChecked(); + _onChange(event) { + this._toggleChecked(event.target.checked); } /** @protected */ - _toggleChecked() { - this.checked = !this.checked; + _toggleChecked(checked) { + this.checked = checked; } }; diff --git a/packages/field-base/test/checked-mixin.test.js b/packages/field-base/test/checked-mixin.test.js index ec4d9c57f5..aa3e2c305d 100644 --- a/packages/field-base/test/checked-mixin.test.js +++ b/packages/field-base/test/checked-mixin.test.js @@ -1,5 +1,5 @@ import { expect } from '@esm-bundle/chai'; -import { fixtureSync, click } from '@vaadin/testing-helpers'; +import { fixtureSync, fire } from '@vaadin/testing-helpers'; import { PolymerElement, html } from '@polymer/polymer/polymer-element.js'; import { CheckedMixin } from '../src/checked-mixin.js'; import { InputSlotMixin } from '../src/input-slot-mixin.js'; @@ -53,6 +53,16 @@ describe('checked-mixin', () => { expect(element.hasAttribute('checked')).to.be.false; }); + it('should toggle checked property on change', () => { + input.checked = true; + fire(input, 'change'); + expect(element.checked).to.be.true; + + input.checked = false; + fire(input, 'change'); + expect(element.checked).to.be.false; + }); + it('should toggle checked property on click', () => { input.click(); expect(element.checked).to.be.true; @@ -71,14 +81,6 @@ describe('checked-mixin', () => { input.click(); expect(element.checked).to.be.false; }); - - it('should prevent default behaviour for click event when disabled', () => { - element.disabled = true; - - const event = click(input); - - expect(event.defaultPrevented).to.be.true; - }); }); describe('delegation', () => { From df0a6758e04eee99aae0f81ef19dcef70d857664 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Fri, 17 Sep 2021 10:20:26 +0300 Subject: [PATCH 05/32] feat: introduce _shouldSetActive method for ActiveMixin --- packages/component-base/src/active-mixin.js | 26 +++++++++++++------ .../component-base/test/active-mixin.test.js | 8 +----- 2 files changed, 19 insertions(+), 15 deletions(-) diff --git a/packages/component-base/src/active-mixin.js b/packages/component-base/src/active-mixin.js index d90956d1cf..caa86aa10e 100644 --- a/packages/component-base/src/active-mixin.js +++ b/packages/component-base/src/active-mixin.js @@ -27,19 +27,21 @@ const ActiveMixinImplementation = (superclass) => ready() { super.ready(); - this._addEventListenerToNode(this, 'down', () => { - if (this.disabled) return; - - this._setActive(true); + this._addEventListenerToNode(this, 'down', (event) => { + if (this._shouldSetActive(event)) { + this._setActive(true); + } }); this._addEventListenerToNode(this, 'up', () => { this._setActive(false); }); - this.addEventListener('blur', () => { - this._setActive(false); - }); + // TODO: Why is it needed? + // this.addEventListener('blur', (event) => { + // console.log(event); + // this._setActive(false); + // }); } /** @protected */ @@ -53,6 +55,14 @@ const ActiveMixinImplementation = (superclass) => this._setActive(false); } + /** + * @param {KeyboardEvent | MouseEvent} _event + * @protected + */ + _shouldSetActive(_event) { + return !this.disabled; + } + /** * Sets the `active` attribute on the element if an activation key is pressed. * @@ -63,7 +73,7 @@ const ActiveMixinImplementation = (superclass) => _onKeyDown(event) { super._onKeyDown(event); - if (!this.disabled && this._activeKeys.includes(event.key)) { + if (this._shouldSetActive(event) && this._activeKeys.includes(event.key)) { this._setActive(true); } } diff --git a/packages/component-base/test/active-mixin.test.js b/packages/component-base/test/active-mixin.test.js index fbca8f8779..d7a484df9a 100644 --- a/packages/component-base/test/active-mixin.test.js +++ b/packages/component-base/test/active-mixin.test.js @@ -1,6 +1,6 @@ import { expect } from '@esm-bundle/chai'; import { sendKeys } from '@web/test-runner-commands'; -import { fire, fixtureSync, isIOS, mousedown, mouseup, touchend, touchstart } from '@vaadin/testing-helpers'; +import { fixtureSync, isIOS, mousedown, mouseup, touchend, touchstart } from '@vaadin/testing-helpers'; import { PolymerElement, html } from '@polymer/polymer/polymer-element.js'; import { ActiveMixin } from '../src/active-mixin.js'; @@ -104,10 +104,4 @@ describe('active-mixin', () => { element.parentNode.removeChild(element); expect(element.hasAttribute('active')).to.be.false; }); - - it('should remove active attribute on blur', async () => { - await sendKeys({ down: 'Space' }); - fire(element, 'blur'); - expect(element.hasAttribute('active')).to.be.false; - }); }); From 0eb56c13b95b668a0bf438f7b974d7ac1797c5c4 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Fri, 17 Sep 2021 10:23:12 +0300 Subject: [PATCH 06/32] refactor: adapt checkbox to mixins' changes --- packages/checkbox/src/vaadin-checkbox.js | 40 ++++++++++++++++++------ 1 file changed, 31 insertions(+), 9 deletions(-) diff --git a/packages/checkbox/src/vaadin-checkbox.js b/packages/checkbox/src/vaadin-checkbox.js index 86fec0cf4f..d7f48a4ac6 100644 --- a/packages/checkbox/src/vaadin-checkbox.js +++ b/packages/checkbox/src/vaadin-checkbox.js @@ -95,6 +95,8 @@ class Checkbox extends SlotLabelMixin( opacity: 0; cursor: inherit; margin: 0; + /* A workaround to prevent loosing focus during CSS animations. */ + z-index: 1; }
@@ -136,6 +138,17 @@ class Checkbox extends SlotLabelMixin( */ name: { type: String + }, + + /** + * The value of the checkbox + * + * @type {string} + */ + value: { + type: String, + value: 'on', + observer: '_valueChanged' } }; } @@ -153,28 +166,37 @@ class Checkbox extends SlotLabelMixin( /** * @override * @protected + * @type {HTMLSlotElement} */ get _sourceSlot() { return this.$.noop; } /** + * @param {Event} event + * @return {boolean} * @protected - * @override */ - _toggleChecked() { - this.indeterminate = false; - - super._toggleChecked(); + _shouldSetActive(event) { + if (event.target.localName === 'a') { + return false; + } - this.dispatchEvent(new CustomEvent('change', { composed: false, bubbles: true })); + return super._shouldSetActive(event); } /** - * Fired when the user commits a value change. - * - * @event change + * @param {boolean} checked + * @protected + * @override */ + _toggleChecked(checked) { + if (this.indeterminate) { + this.indeterminate = false; + } + + super._toggleChecked(checked); + } } customElements.define(Checkbox.is, Checkbox); From 127b5d08366edb49a6982b4ae2b21e28230e0c03 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Fri, 17 Sep 2021 10:23:32 +0300 Subject: [PATCH 07/32] fix: update unit tests --- packages/checkbox/test/a11y.test.js | 55 ------ packages/checkbox/test/checkbox.test.js | 229 +++++++++++------------- 2 files changed, 101 insertions(+), 183 deletions(-) delete mode 100644 packages/checkbox/test/a11y.test.js diff --git a/packages/checkbox/test/a11y.test.js b/packages/checkbox/test/a11y.test.js deleted file mode 100644 index 2f8d2ce74f..0000000000 --- a/packages/checkbox/test/a11y.test.js +++ /dev/null @@ -1,55 +0,0 @@ -import { expect } from '@esm-bundle/chai'; -import { fixtureSync } from '@vaadin/testing-helpers'; -import '../vaadin-checkbox.js'; - -describe('a11y', () => { - let checkbox; - - beforeEach(() => { - checkbox = fixtureSync('Vaadin Checkbox'); - }); - - it('should set aria-checked to "true" when checked is set to true', () => { - checkbox.checked = true; - expect(checkbox.getAttribute('aria-checked')).to.be.eql('true'); - }); - - it('should set aria-checked to "false" when checked is set to false', () => { - checkbox.checked = false; - expect(checkbox.getAttribute('aria-checked')).to.be.eql('false'); - }); - - it('should set aria-checked to "mixed" when indeterminate is set to true', () => { - checkbox.indeterminate = true; - expect(checkbox.getAttribute('aria-checked')).to.be.eql('mixed'); - }); - - it('should set aria-checked to "mixed" when indeterminate is first set to true, then checked is set to false', () => { - checkbox.indeterminate = true; - checkbox.checked = false; - expect(checkbox.getAttribute('aria-checked')).to.be.eql('mixed'); - }); - - it('should set aria-checked to "mixed" when checked is first set to false, then indeterminate is set to true', () => { - checkbox.checked = false; - checkbox.indeterminate = true; - expect(checkbox.getAttribute('aria-checked')).to.be.eql('mixed'); - }); - - it('should set aria-checked to "mixed" when indeterminate is first set to true, then checked is set to true', () => { - checkbox.indeterminate = true; - checkbox.checked = true; - expect(checkbox.getAttribute('aria-checked')).to.be.eql('mixed'); - }); - - it('should set aria-checked to "mixed" when checked is first set to true, then indeterminate is set to true', () => { - checkbox.checked = true; - checkbox.indeterminate = true; - expect(checkbox.getAttribute('aria-checked')).to.be.eql('mixed'); - }); - - it('should set aria-checked to "false" when checked is set to null', () => { - checkbox.checked = null; - expect(checkbox.getAttribute('aria-checked')).to.eql('false'); - }); -}); diff --git a/packages/checkbox/test/checkbox.test.js b/packages/checkbox/test/checkbox.test.js index 36eb743a64..6f2bb22792 100644 --- a/packages/checkbox/test/checkbox.test.js +++ b/packages/checkbox/test/checkbox.test.js @@ -1,46 +1,35 @@ -import { expect } from '@esm-bundle/chai'; import sinon from 'sinon'; -import { click, fixtureSync, mousedown, mouseup, nextFrame, space, spaceKeyDown } from '@vaadin/testing-helpers'; +import { expect } from '@esm-bundle/chai'; +import { sendKeys } from '@web/test-runner-commands'; +import { click, fixtureSync, mousedown, mouseup, nextFrame } from '@vaadin/testing-helpers'; import '../vaadin-checkbox.js'; describe('checkbox', () => { - let checkbox, nativeCheckbox, label; - - const down = (node) => { - node.dispatchEvent(new CustomEvent('down')); - }; - - const up = (node) => { - node.dispatchEvent(new CustomEvent('up')); - }; + let checkbox, input, label, link; beforeEach(() => { - checkbox = fixtureSync( - 'Vaadin Checkbox with Terms & Conditions' - ); - nativeCheckbox = checkbox._nativeCheckbox; - label = checkbox.shadowRoot.querySelector('[part="label"]'); + checkbox = fixtureSync('Checkbox with Terms & Conditions'); + input = checkbox.inputElement; + label = checkbox._labelNode; + link = label.children[0]; }); - it('should define checkbox label using light DOM', () => { - const slot = label.querySelector('slot'); - const nodes = slot.assignedNodes({ flatten: true }); - expect(nodes[0].textContent).to.be.equal('Vaadin '); - expect(nodes[1].outerHTML).to.be.equal('Checkbox'); - }); - - it('should have input as focusElement', () => { - expect(checkbox.focusElement).to.be.eql(nativeCheckbox); - }); + // TODO: Will be tested with snapshot tests. + // it('should define checkbox label using light DOM', () => { + // expect(label.childNodes[0].textContent).to.be.equal('Vaadin '); + // expect(label.childNodes[1].outerHTML).to.be.equal('Checkbox'); + // }); - it('can be disabled imperatively', () => { - checkbox.disabled = true; - expect(nativeCheckbox.hasAttribute('disabled')).to.be.eql(true); - }); + // TODO: Will be tested with snapshot tests. + // it('can be disabled imperatively', () => { + // checkbox.disabled = true; + // expect(input.hasAttribute('disabled')).to.be.true; + // }); - it('has default value "on"', () => { - expect(checkbox.value).to.be.eql('on'); - }); + // TODO: Will be tested with snapshot tests. + // it('has default value "on"', () => { + // expect(checkbox.value).to.be.eql('on'); + // }); it('fires click event', () => { const spy = sinon.spy(); @@ -53,153 +42,130 @@ describe('checkbox', () => { expect(spy.calledOnce).to.be.true; }); - it('should have proper name', () => { - expect(checkbox.name).to.eq(''); - checkbox.checked = true; - expect(checkbox.name).to.eq('test-checkbox'); - }); + // TODO: Will be tested with snapshot tests. + // it('should have proper name', () => { + // expect(checkbox.name).to.eq(''); + // checkbox.checked = true; + // expect(checkbox.name).to.eq('test-checkbox'); + // }); it('should have display: none when hidden', () => { checkbox.setAttribute('hidden', ''); expect(getComputedStyle(checkbox).display).to.equal('none'); }); - it('should toggle on host click', () => { - checkbox.click(); - + it('should toggle checked property on input click', () => { + input.click(); expect(checkbox.checked).to.be.true; - checkbox.click(); - + input.click(); expect(checkbox.checked).to.be.false; }); - it('should not toggle on link inside host click', () => { - const slot = label.querySelector('slot'); - const link = slot.assignedNodes({ flatten: true })[3]; - expect(link.outerHTML).to.be.equal('Terms & Conditions'); - link.click(); - expect(checkbox.checked).to.be.false; - }); + it('should toggle checked property on label click', () => { + label.click(); + expect(checkbox.checked).to.be.true; - it('should not toggle on click when disabled', () => { - checkbox.disabled = true; label.click(); expect(checkbox.checked).to.be.false; }); - it('should bind checked to the native checkbox and vice versa', () => { - checkbox.checked = true; - expect(nativeCheckbox.checked).to.be.eql(true); - - nativeCheckbox.checked = false; - nativeCheckbox.dispatchEvent(new CustomEvent('change')); - expect(checkbox.checked).to.be.eql(false); + it('should not toggle checked property on label link click', () => { + link.click(); + expect(checkbox.checked).to.be.false; }); - it('should bind indeterminate to the native checkbox and vice versa', () => { - checkbox.indeterminate = true; - expect(nativeCheckbox.indeterminate).to.be.eql(true); - - nativeCheckbox.indeterminate = false; - nativeCheckbox.dispatchEvent(new CustomEvent('change')); - expect(checkbox.indeterminate).to.be.eql(false); + it('should not toggle checked property on click when disabled', () => { + checkbox.disabled = true; + checkbox.click(); + expect(checkbox.checked).to.be.false; }); - it('should set indeterminate to false when clicked the first time', () => { + it('should reset indeterminate attribute on first click', () => { checkbox.indeterminate = true; + expect(checkbox.indeterminate).to.be.true; checkbox.click(); - expect(checkbox.indeterminate).to.be.false; }); - it('native checkbox should have the `presentation` role', () => { - expect(nativeCheckbox.getAttribute('role')).to.be.eql('presentation'); - }); - - it('host should have the `checkbox` role', () => { - expect(checkbox.getAttribute('role')).to.be.eql('checkbox'); - }); + // TODO: Out of the date + // it('native checkbox should have the `presentation` role', () => { + // expect(input.getAttribute('role')).to.be.eql('presentation'); + // }); - it('should have active attribute on down', () => { - down(checkbox); + // TODO: Out of the date + // it('host should have the `checkbox` role', () => { + // expect(checkbox.getAttribute('role')).to.be.eql('checkbox'); + // }); + it('should set active attribute on input click', () => { + mousedown(input); expect(checkbox.hasAttribute('active')).to.be.true; }); - it('should not have active attribute after up', () => { - down(checkbox); - - up(checkbox); - - expect(checkbox.hasAttribute('active')).to.be.false; - }); - - it('should have active attribute on space', () => { - spaceKeyDown(checkbox); - + it('should set active attribute when pressing Space on input', async () => { + // Focus on the input + await sendKeys({ press: 'Tab' }); + // Hold down Space on the input + await sendKeys({ down: 'Space' }); expect(checkbox.hasAttribute('active')).to.be.true; }); - it('should not have active attribute after space', () => { - space(checkbox); - + it('should not set active attribute on label link click', () => { + mousedown(link); expect(checkbox.hasAttribute('active')).to.be.false; }); - it('should be checked after space when initially checked is false and indeterminate is true', () => { + it('should be checked on Space when initially checked is false and indeterminate is true', async () => { checkbox.checked = false; checkbox.indeterminate = true; - space(checkbox); + // Focus on the input + await sendKeys({ press: 'Tab' }); + // Press Space on the input + await sendKeys({ press: 'Space' }); expect(checkbox.checked).to.be.true; expect(checkbox.indeterminate).to.be.false; - expect(checkbox.getAttribute('aria-checked')).to.be.eql('true'); }); - it('should not be checked after space when initially checked is true and indeterminate is true', () => { + it('should not be checked on Space when initially checked is true and indeterminate is true', async () => { checkbox.checked = true; checkbox.indeterminate = true; - space(checkbox); + // Focus on the input + await sendKeys({ press: 'Tab' }); + // Press Space on the input + await sendKeys({ press: 'Space' }); expect(checkbox.checked).to.be.false; expect(checkbox.indeterminate).to.be.false; - expect(checkbox.getAttribute('aria-checked')).to.be.eql('false'); }); - it('should be checked after click when initially checked is false and indeterminate is true', () => { + it('should be checked on click when initially checked is false and indeterminate is true', () => { checkbox.checked = false; checkbox.indeterminate = true; - checkbox.click(); expect(checkbox.checked).to.be.true; expect(checkbox.indeterminate).to.be.false; - expect(checkbox.getAttribute('aria-checked')).to.be.eql('true'); }); - it('should not be checked after click when initially checked is true and indeterminate is true', () => { + it('should not be checked on click when initially checked is true and indeterminate is true', () => { checkbox.checked = true; checkbox.indeterminate = true; - checkbox.click(); expect(checkbox.checked).to.be.false; expect(checkbox.indeterminate).to.be.false; - expect(checkbox.getAttribute('aria-checked')).to.be.eql('false'); }); - it('should set empty attribute on part label when the label was removed', async () => { - while (checkbox.firstChild) { - checkbox.removeChild(checkbox.firstChild); - } - + it('should remove has-label attribute when the label was cleared', async () => { + label.innerHTML = ''; await nextFrame(); - expect(label.hasAttribute('empty')).to.be.true; + expect(checkbox.hasAttribute('has-input')).to.be.false; }); describe('change event', () => { @@ -210,65 +176,72 @@ describe('checkbox', () => { checkbox.addEventListener('change', changeSpy); }); - it('should not fire change-event when changing checked value programmatically', () => { + it('should not fire change event when changing checked state programmatically', () => { checkbox.checked = true; expect(changeSpy.called).to.be.false; }); - it('should fire change-event when user checks the element', () => { - checkbox.click(); - + it('should fire change event on input click', () => { + input.click(); expect(changeSpy.calledOnce).to.be.true; - }); - it('should fire change-event when user unchecks the element', () => { - checkbox.checked = true; - checkbox.click(); + input.click(); + expect(changeSpy.calledTwice).to.be.true; + }); + it('should fire change event on label click', () => { + label.click(); expect(changeSpy.calledOnce).to.be.true; + + label.click(); + expect(changeSpy.calledTwice).to.be.true; + }); + + it('should not fire change event on label link click', () => { + link.click(); + expect(changeSpy.called).to.be.false; }); it('should bubble', () => { checkbox.click(); - const event = changeSpy.getCall(0).args[0]; + const event = changeSpy.firstCall.args[0]; expect(event).to.have.property('bubbles', true); }); it('should not be composed', () => { checkbox.click(); - const event = changeSpy.getCall(0).args[0]; + const event = changeSpy.firstCall.args[0]; expect(event).to.have.property('composed', false); }); }); }); -describe('empty label', () => { - let checkbox, label; +describe('has-label attribute', () => { + let checkbox; beforeEach(() => { checkbox = fixtureSync(''); - label = checkbox.shadowRoot.querySelector('[part="label"]'); }); - it('should set empty attribute on part label when there is no label', () => { - expect(label.hasAttribute('empty')).to.be.true; + it('should not set has-label attribute when label content is empty', () => { + expect(checkbox.hasAttribute('has-label')).to.be.false; }); - it('should set empty attribute on part label when there is only one empty text node added', async () => { + it('should not set has-label attribute when only one empty text node added', async () => { const textNode = document.createTextNode(' '); checkbox.appendChild(textNode); await nextFrame(); - expect(label.hasAttribute('empty')).to.be.true; + expect(checkbox.hasAttribute('has-label')).to.be.false; }); - it('should remove empty attribute from part label when the label is added', async () => { + it('should set has-label attribute when the label is added', async () => { const paragraph = document.createElement('p'); paragraph.textContent = 'Added label'; checkbox.appendChild(paragraph); await nextFrame(); - expect(label.hasAttribute('empty')).to.be.false; + expect(checkbox.hasAttribute('has-label')).to.be.true; }); }); From 75810d48a6a57fa957035f249f9cd92148301049 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Fri, 17 Sep 2021 12:17:38 +0300 Subject: [PATCH 08/32] fix: prevent input from losing focus while animation --- packages/checkbox/src/vaadin-checkbox.js | 2 -- packages/checkbox/theme/lumo/vaadin-checkbox-styles.js | 2 ++ packages/checkbox/theme/material/vaadin-checkbox-styles.js | 2 ++ 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/checkbox/src/vaadin-checkbox.js b/packages/checkbox/src/vaadin-checkbox.js index d7f48a4ac6..2094781d21 100644 --- a/packages/checkbox/src/vaadin-checkbox.js +++ b/packages/checkbox/src/vaadin-checkbox.js @@ -95,8 +95,6 @@ class Checkbox extends SlotLabelMixin( opacity: 0; cursor: inherit; margin: 0; - /* A workaround to prevent loosing focus during CSS animations. */ - z-index: 1; }
diff --git a/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js b/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js index 98c51a20ae..0171e63e6b 100644 --- a/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js +++ b/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js @@ -43,6 +43,7 @@ registerStyles( /* Checkmark */ [part='checkbox']::after { content: ''; + pointer-events: none; display: inline-block; width: 0; height: 0; @@ -116,6 +117,7 @@ registerStyles( /* Used for activation "halo" */ [part='checkbox']::before { + pointer-events: none; color: transparent; display: inline-block; width: 100%; diff --git a/packages/checkbox/theme/material/vaadin-checkbox-styles.js b/packages/checkbox/theme/material/vaadin-checkbox-styles.js index 294367c9cf..d27eddfb61 100644 --- a/packages/checkbox/theme/material/vaadin-checkbox-styles.js +++ b/packages/checkbox/theme/material/vaadin-checkbox-styles.js @@ -40,6 +40,7 @@ registerStyles( [part='checkbox']::before { /* Needed to align the checkbox nicely on the baseline */ content: '\\2003'; + pointer-events: none; display: inline-block; width: 100%; height: 100%; @@ -54,6 +55,7 @@ registerStyles( /* Used for the checkmark */ [part='checkbox']::after { content: ''; + pointer-events: none; display: inline-block; width: 10px; height: 19px; From 447f406c56624641b667e1045f20bb5f3da49044 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Fri, 17 Sep 2021 12:19:58 +0300 Subject: [PATCH 09/32] test: clean unit tests --- packages/checkbox/test/checkbox.test.js | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/packages/checkbox/test/checkbox.test.js b/packages/checkbox/test/checkbox.test.js index 6f2bb22792..917940c246 100644 --- a/packages/checkbox/test/checkbox.test.js +++ b/packages/checkbox/test/checkbox.test.js @@ -89,16 +89,6 @@ describe('checkbox', () => { expect(checkbox.indeterminate).to.be.false; }); - // TODO: Out of the date - // it('native checkbox should have the `presentation` role', () => { - // expect(input.getAttribute('role')).to.be.eql('presentation'); - // }); - - // TODO: Out of the date - // it('host should have the `checkbox` role', () => { - // expect(checkbox.getAttribute('role')).to.be.eql('checkbox'); - // }); - it('should set active attribute on input click', () => { mousedown(input); expect(checkbox.hasAttribute('active')).to.be.true; From 9f9a0da25448fe3f3e23a695b3c3c2be9d1964e0 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Fri, 17 Sep 2021 12:50:33 +0300 Subject: [PATCH 10/32] fix: update type declarations --- packages/checkbox/src/vaadin-checkbox.d.ts | 80 ++++++++++------------ packages/checkbox/src/vaadin-checkbox.js | 46 +++++++------ 2 files changed, 60 insertions(+), 66 deletions(-) diff --git a/packages/checkbox/src/vaadin-checkbox.d.ts b/packages/checkbox/src/vaadin-checkbox.d.ts index 6b553d0db2..34fb7616c9 100644 --- a/packages/checkbox/src/vaadin-checkbox.d.ts +++ b/packages/checkbox/src/vaadin-checkbox.d.ts @@ -3,9 +3,12 @@ * Copyright (c) 2021 Vaadin Ltd. * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ */ -import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js'; -import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js'; +import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js'; import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; +import { AriaLabelMixin } from '@vaadin/field-base/src/aria-label-mixin.js'; +import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js'; +import { InputSlotMixin } from '@vaadin/field-base/src/input-slot-mixin.js'; +import { SlotLabelMixin } from '@vaadin/field-base/src/slot-label-mixin.js'; import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; /** @@ -18,95 +21,82 @@ export type CheckboxCheckedChangedEvent = CustomEvent<{ value: boolean }>; */ export type CheckboxIndeterminateChangedEvent = CustomEvent<{ value: boolean }>; -export interface CheckboxElementEventMap { +export interface CheckboxCustomEventMap { 'checked-changed': CheckboxCheckedChangedEvent; 'indeterminate-changed': CheckboxIndeterminateChangedEvent; } -export interface CheckboxEventMap extends HTMLElementEventMap, CheckboxElementEventMap {} +export interface CheckboxEventMap extends HTMLElementEventMap, CheckboxCustomEventMap {} /** - * `` is a Web Component for customized checkboxes. + * `` is an input field representing a binary choice. * * ```html - * - * Make my profile visible - * + * I accept the terms and conditions * ``` * * ### Styling * * The following shadow DOM parts are available for styling: * - * Part name | Description - * ------------------|---------------- - * `checkbox` | The wrapper element for the native - * `label` | The wrapper element in which the component's children, namely the label, is slotted + * Part name | Description + * ------------|---------------- + * `container` | The container element + * `checkbox` | The wrapper element which contains slotted + * `label` | The wrapper element which contains slotted