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;