diff --git a/.changeset/big-wombats-attack.md b/.changeset/big-wombats-attack.md new file mode 100644 index 000000000..504c2313b --- /dev/null +++ b/.changeset/big-wombats-attack.md @@ -0,0 +1,5 @@ +--- +'@lion/switch': patch +--- + +When clicking on the label the checked state should be toggled. This expected behavior comes from the native radio or checkbox. diff --git a/.lintstagedrc.js b/.lintstagedrc.js index ba46aa238..801ced191 100644 --- a/.lintstagedrc.js +++ b/.lintstagedrc.js @@ -2,7 +2,7 @@ module.exports = { '*': ['eclint fix', 'git add'], '*.js': ['eslint --fix', 'prettier --write', 'git add'], - '*.md': ['prettier --write', 'markdownlint', 'git add'], + '{*!(.changeset)/**/*.md,*.md}': ['prettier --write', 'markdownlint', 'git add'], 'yarn.lock': ['node ./scripts/yarn-lock-scan.js'], '*package.json': absolutePaths => { const sortPackages = []; diff --git a/package.json b/package.json index ea2718728..e0e37aa9f 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "lint": "run-p lint:*", "lint:eclint": "git ls-files | xargs eclint check", "lint:eslint": "eslint --ext .js,.html .", - "lint:markdownlint": "git ls-files '*.md' | xargs markdownlint --ignore '**/CHANGELOG.md'", + "lint:markdownlint": "git ls-files '*.md' | xargs markdownlint --ignore '{.changeset/*.md,**/CHANGELOG.md}'", "lint:prettier": "prettier \"**/*.js\" --list-different || (echo '↑↑ these files are not prettier formatted ↑↑' && exit 1)", "lint:types": "tsc", "lint:versions": "node ./scripts/lint-versions.js", diff --git a/packages/form-core/src/choice-group/ChoiceInputMixin.js b/packages/form-core/src/choice-group/ChoiceInputMixin.js index a659c2468..a240adae6 100644 --- a/packages/form-core/src/choice-group/ChoiceInputMixin.js +++ b/packages/form-core/src/choice-group/ChoiceInputMixin.js @@ -81,6 +81,7 @@ export const ChoiceInputMixin = superclass => constructor() { super(); this.modelValue = { value: '', checked: false }; + this.__toggleChecked = this.__toggleChecked.bind(this); } /** diff --git a/packages/switch/src/LionSwitch.js b/packages/switch/src/LionSwitch.js index 2ae9c15ef..e54e9d9c2 100644 --- a/packages/switch/src/LionSwitch.js +++ b/packages/switch/src/LionSwitch.js @@ -61,10 +61,19 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField)) 'checked-changed', this.__handleButtonSwitchCheckedChanged.bind(this), ); + if (this._labelNode) { + this._labelNode.addEventListener('click', this.__toggleChecked); + } this._syncButtonSwitch(); this.submitted = true; } + disconnectedCallback() { + if (this._labelNode) { + this._labelNode.removeEventListener('click', this.__toggleChecked); + } + } + updated(changedProperties) { super.updated(changedProperties); this._syncButtonSwitch(); diff --git a/packages/switch/test/lion-switch.test.js b/packages/switch/test/lion-switch.test.js index 0c3982728..95686b872 100644 --- a/packages/switch/test/lion-switch.test.js +++ b/packages/switch/test/lion-switch.test.js @@ -7,6 +7,14 @@ describe('lion-switch', () => { expect(Array.from(el.children).find(child => child.slot === 'input')).not.to.be.false; }); + it('clicking the label should toggle the checked state', async () => { + const el = await fixture(html``); + el._labelNode.click(); + expect(el.checked).to.be.true; + el._labelNode.click(); + expect(el.checked).to.be.false; + }); + it('should sync its "disabled" state to child button', async () => { const el = await fixture(html``); expect(el._inputNode.disabled).to.be.true;