(html`
-
- `);
- const button = form.querySelector('sl-button')!;
- const radio = form.querySelectorAll('sl-radio-button')[1]!;
- const submitHandler = sinon.spy((event: SubmitEvent) => event.preventDefault());
-
- // Submitting the form after setting custom validity should not trigger the handler
- radio.setCustomValidity('Invalid selection');
- form.addEventListener('submit', submitHandler);
- button.click();
-
- await aTimeout(100);
-
- expect(submitHandler).to.not.have.been.called;
- });
});
});
diff --git a/src/components/radio-button/radio-button.ts b/src/components/radio-button/radio-button.ts
index 3acd6bf59..e32078dd7 100644
--- a/src/components/radio-button/radio-button.ts
+++ b/src/components/radio-button/radio-button.ts
@@ -1,13 +1,10 @@
-import { LitElement } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { html } from 'lit/static-html.js';
-import { emit } from '../../internal/event';
-import { FormSubmitController } from '../../internal/form';
-import { HasSlotController } from '../../internal/slot';
-import { watch } from '../../internal/watch';
-import styles from './radio-button.styles';
+import styles from '~/components/button/button.styles';
+import RadioBase from '~/internal/radio';
+import { HasSlotController } from '~/internal/slot';
/**
* @since 2.0
@@ -24,109 +21,16 @@ import styles from './radio-button.styles';
* @slot suffix - Used to append an icon or similar element to the button.
*
* @csspart base - The component's internal wrapper.
- * @csspart button - The internal button element.
* @csspart prefix - The prefix slot's container.
* @csspart label - The button's label.
* @csspart suffix - The suffix slot's container.
*/
@customElement('sl-radio-button')
-export default class SlRadioButton extends LitElement {
+export default class SlRadioButton extends RadioBase {
static styles = styles;
- @query('.button') input: HTMLInputElement;
- @query('.hidden-input') hiddenInput: HTMLInputElement;
-
- protected readonly formSubmitController = new FormSubmitController(this, {
- value: (control: SlRadioButton) => (control.checked ? control.value : undefined)
- });
private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
- @state() protected hasFocus = false;
-
- /** The radio's name attribute. */
- @property() name: string;
-
- /** The radio's value attribute. */
- @property() value: string;
-
- /** Disables the radio. */
- @property({ type: Boolean, reflect: true }) disabled = false;
-
- /** Draws the radio in a checked state. */
- @property({ type: Boolean, reflect: true }) checked = false;
-
- /**
- * This will be true when the control is in an invalid state. Validity in radios is determined by the message provided
- * by the `setCustomValidity` method.
- */
- @property({ type: Boolean, reflect: true }) invalid = false;
-
- connectedCallback(): void {
- super.connectedCallback();
- this.setAttribute('role', 'radio');
- }
-
- /** Simulates a click on the radio. */
- click() {
- this.input.click();
- }
-
- /** Sets focus on the radio. */
- focus(options?: FocusOptions) {
- this.input.focus(options);
- }
-
- /** Removes focus from the radio. */
- blur() {
- this.input.blur();
- }
-
- /** Checks for validity and shows the browser's validation message if the control is invalid. */
- reportValidity() {
- return this.hiddenInput.reportValidity();
- }
-
- /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
- setCustomValidity(message: string) {
- this.hiddenInput.setCustomValidity(message);
- }
-
- handleBlur() {
- this.hasFocus = false;
- emit(this, 'sl-blur');
- }
-
- handleClick() {
- if (!this.disabled) {
- this.checked = true;
- }
- }
-
- handleFocus() {
- this.hasFocus = true;
- emit(this, 'sl-focus');
- }
-
- @watch('checked')
- handleCheckedChange() {
- this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
-
- if (this.hasUpdated) {
- emit(this, 'sl-change');
- }
- }
-
- @watch('disabled', { waitUntilFirstUpdate: true })
- handleDisabledChange() {
- this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
-
- // Disabled form controls are always valid, so we need to recheck validity when the state changes
- if (this.hasUpdated) {
- this.input.disabled = this.disabled;
- this.invalid = !this.input.checkValidity();
- }
- }
-
/** The button's variant. */
@property({ reflect: true }) variant: 'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' =
'default';
@@ -134,54 +38,57 @@ export default class SlRadioButton extends LitElement {
/** The button's size. */
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+ /**
+ * This will be true when the control is in an invalid state. Validity in radio buttons is determined by the message
+ * provided by the `setCustomValidity` method.
+ */
+ @property({ type: Boolean, reflect: true }) invalid = false;
+
/** Draws a pill-style button with rounded edges. */
@property({ type: Boolean, reflect: true }) pill = false;
render() {
return html`
-
-
-
-
+
`;
}
}
diff --git a/src/components/radio-group/radio-group.styles.ts b/src/components/radio-group/radio-group.styles.ts
index ffad5702c..d6d7b5799 100644
--- a/src/components/radio-group/radio-group.styles.ts
+++ b/src/components/radio-group/radio-group.styles.ts
@@ -1,5 +1,5 @@
import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
+import componentStyles from '~/styles/component.styles';
export default css`
${componentStyles}
diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts
index dada60c1b..7431f24dc 100644
--- a/src/components/radio-group/radio-group.ts
+++ b/src/components/radio-group/radio-group.ts
@@ -1,9 +1,9 @@
import { html, LitElement } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
-import '../../components/button-group/button-group';
+import '~/components/button-group/button-group';
+import type SlRadio from '~/components/radio/radio';
import styles from './radio-group.styles';
-import type SlRadio from '../../components/radio/radio';
const RADIO_CHILDREN = ['sl-radio', 'sl-radio-button'];
diff --git a/src/components/radio/radio.styles.ts b/src/components/radio/radio.styles.ts
index cc5bf5f13..190313e22 100644
--- a/src/components/radio/radio.styles.ts
+++ b/src/components/radio/radio.styles.ts
@@ -1,6 +1,6 @@
import { css } from 'lit';
-import { focusVisibleSelector } from '../../internal/focus-visible';
-import componentStyles from '../../styles/component.styles';
+import { focusVisibleSelector } from '~/internal/focus-visible';
+import componentStyles from '~/styles/component.styles';
export default css`
${componentStyles}
diff --git a/src/components/radio/radio.test.ts b/src/components/radio/radio.test.ts
index 0654efbde..12c86e634 100644
--- a/src/components/radio/radio.test.ts
+++ b/src/components/radio/radio.test.ts
@@ -1,7 +1,7 @@
-import { aTimeout, expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';
+import { expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';
import { sendKeys } from '@web/test-runner-commands';
import sinon from 'sinon';
-import type SlRadioGroup from '../../components/radio-group/radio-group';
+import type SlRadioGroup from '~/components/radio-group/radio-group';
import type SlRadio from './radio';
describe('', () => {
@@ -75,7 +75,7 @@ describe('', () => {
-
+
Submit
@@ -96,29 +96,5 @@ describe('', () => {
expect(formData!.get('a')).to.equal('2');
});
-
- it('should show a constraint validation error when setCustomValidity() is called', async () => {
- const form = await fixture(html`
-
- `);
- const button = form.querySelector('sl-button')!;
- const radio = form.querySelectorAll('sl-radio')[1]!;
- const submitHandler = sinon.spy((event: SubmitEvent) => event.preventDefault());
-
- // Submitting the form after setting custom validity should not trigger the handler
- radio.setCustomValidity('Invalid selection');
- form.addEventListener('submit', submitHandler);
- button.click();
-
- await aTimeout(100);
-
- expect(submitHandler).to.not.have.been.called;
- });
});
});
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index 26eecd38e..6387da42e 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -1,11 +1,9 @@
-import { html, LitElement } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { live } from 'lit/directives/live.js';
-import { emit } from '../../internal/event';
-import { FormSubmitController } from '../../internal/form';
-import { watch } from '../../internal/watch';
+import RadioBase from '~/internal/radio';
import styles from './radio.styles';
/**
@@ -24,102 +22,9 @@ import styles from './radio.styles';
* @csspart label - The radio label.
*/
@customElement('sl-radio')
-export default class SlRadio extends LitElement {
+export default class SlRadio extends RadioBase {
static styles = styles;
- @query('.radio__input') input: HTMLInputElement;
-
- protected readonly formSubmitController = new FormSubmitController(this, {
- value: (control: HTMLInputElement) => (control.checked ? control.value : undefined)
- });
-
- @state() protected hasFocus = false;
-
- /** The radio's name attribute. */
- @property() name: string;
-
- /** The radio's value attribute. */
- @property() value: string;
-
- /** Disables the radio. */
- @property({ type: Boolean, reflect: true }) disabled = false;
-
- /** Draws the radio in a checked state. */
- @property({ type: Boolean, reflect: true }) checked = false;
-
- /**
- * This will be true when the control is in an invalid state. Validity in radios is determined by the message provided
- * by the `setCustomValidity` method.
- */
- @property({ type: Boolean, reflect: true }) invalid = false;
-
- connectedCallback(): void {
- super.connectedCallback();
- this.setAttribute('role', 'radio');
- }
-
- /** Simulates a click on the radio. */
- click() {
- this.input.click();
- }
-
- /** Sets focus on the radio. */
- focus(options?: FocusOptions) {
- this.input.focus(options);
- }
-
- /** Removes focus from the radio. */
- blur() {
- this.input.blur();
- }
-
- /** Checks for validity and shows the browser's validation message if the control is invalid. */
- reportValidity() {
- return this.input.reportValidity();
- }
-
- /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
- setCustomValidity(message: string) {
- this.input.setCustomValidity(message);
- this.invalid = !this.input.checkValidity();
- }
-
- handleBlur() {
- this.hasFocus = false;
- emit(this, 'sl-blur');
- }
-
- handleClick() {
- if (!this.disabled) {
- this.checked = true;
- }
- }
-
- handleFocus() {
- this.hasFocus = true;
- emit(this, 'sl-focus');
- }
-
- @watch('checked')
- handleCheckedChange() {
- this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
-
- if (this.hasUpdated) {
- emit(this, 'sl-change');
- }
- }
-
- @watch('disabled', { waitUntilFirstUpdate: true })
- handleDisabledChange() {
- this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
-
- // Disabled form controls are always valid, so we need to recheck validity when the state changes
- if (this.hasUpdated) {
- this.input.disabled = this.disabled;
- this.invalid = !this.input.checkValidity();
- }
- }
-
render() {
return html`