diff --git a/docs/components/radio-group.md b/docs/components/radio-group.md index 446acd4d..06163985 100644 --- a/docs/components/radio-group.md +++ b/docs/components/radio-group.md @@ -24,12 +24,12 @@ const App = () => ( ## Examples -### Showing the Label +### Help Text -You can show the fieldset and legend that wraps the radio group using the `fieldset` attribute. If you don't use this option, you should still provide a label so screen readers announce the control correctly. +Add descriptive help text to a radio group with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. ```html preview - + Option 1 Option 2 Option 3 @@ -40,7 +40,7 @@ You can show the fieldset and legend that wraps the radio group using the `field import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react'; const App = () => ( - + Option 1 Option 2 Option 3 @@ -53,7 +53,7 @@ const App = () => ( [Radio buttons](/components/radio-button) offer an alternate way to display radio controls. In this case, an internal [button group](/components/button-group) is used to group the buttons into a single, cohesive control. ```html preview - + Option 1 Option 2 Option 3 @@ -154,7 +154,7 @@ const App = () => { }; ``` -#### Custom Validity +### Custom Validity Use the `setCustomValidity()` method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string. diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 1f527884..3b2e059c 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -10,11 +10,14 @@ _During the beta period, these restrictions may be relaxed in the event of a mis ## Next +- 🚨 BREAKING: Removed the `fieldset` property from `` (use CSS parts if you want to keep the border) [#965](https://github.com/shoelace-style/shoelace/issues/965) +- 🚨 BREAKING: Removed `base` and `label` parts from `` (use `form-control` and `form-control__label` instead) [#965](https://github.com/shoelace-style/shoelace/issues/965) - Added `button--checked` to `` and `control--checked` to `` to style just the checked state [#933](https://github.com/shoelace-style/shoelace/pull/933) - Added tests for `` and `` [#935](https://github.com/shoelace-style/shoelace/pull/935) - Added translations for Turkish, English (United Kingdom) and German (Austria) [#989](https://github.com/shoelace-style/shoelace/pull/989) - Added `--indicator-transition-duration` custom property to `` [#986](https://github.com/shoelace-style/shoelace/issues/986) - Added the ability to cancel `sl-show` and `sl-hide` events in `` [#993](https://github.com/shoelace-style/shoelace/issues/993) +- Added `focus()` and `blur()` methods to `` - Fixed a bug in `` that prevented the border radius to apply correctly to the header [#934](https://github.com/shoelace-style/shoelace/pull/934) - Fixed a bug in `` where the inner border disappeared on focus [#980](https://github.com/shoelace-style/shoelace/pull/980) - Fixed a bug that caused prefix/suffix animations in `` to wobble [#996](https://github.com/shoelace-style/shoelace/issues/996) diff --git a/src/components/radio-button/radio-button.ts b/src/components/radio-button/radio-button.ts index 5caae32d..cc8ed669 100644 --- a/src/components/radio-button/radio-button.ts +++ b/src/components/radio-button/radio-button.ts @@ -57,9 +57,14 @@ export default class SlRadioButton extends ShoelaceElement { this.setAttribute('role', 'presentation'); } - @watch('disabled', { waitUntilFirstUpdate: true }) - handleDisabledChange() { - this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false'); + /** Sets focus on the button. */ + focus(options?: FocusOptions) { + this.input.focus(options); + } + + /** Removes focus from the button. */ + blur() { + this.input.blur(); } handleBlur() { @@ -77,6 +82,11 @@ export default class SlRadioButton extends ShoelaceElement { this.checked = true; } + @watch('disabled', { waitUntilFirstUpdate: true }) + handleDisabledChange() { + this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false'); + } + handleFocus() { this.hasFocus = true; this.emit('sl-focus'); diff --git a/src/components/radio-group/radio-group.styles.ts b/src/components/radio-group/radio-group.styles.ts index 1a33ed3c..7b914d7b 100644 --- a/src/components/radio-group/radio-group.styles.ts +++ b/src/components/radio-group/radio-group.styles.ts @@ -1,47 +1,22 @@ import { css } from 'lit'; import componentStyles from '../../styles/component.styles'; +import formControlStyles from '../../styles/form-control.styles'; export default css` ${componentStyles} + ${formControlStyles} :host { display: block; } - .radio-group { - border: solid var(--sl-panel-border-width) var(--sl-panel-border-color); - border-radius: var(--sl-border-radius-medium); - padding: var(--sl-spacing-large); - padding-top: var(--sl-spacing-x-small); - } - - .radio-group .radio-group__label { - font-family: var(--sl-input-font-family); - font-size: var(--sl-input-font-size-medium); - font-weight: var(--sl-input-font-weight); - color: var(--sl-input-color); - padding: 0 var(--sl-spacing-2x-small); - } - - ::slotted(sl-radio:not(:last-of-type)) { - margin-bottom: var(--sl-spacing-2x-small); - } - - .radio-group:not(.radio-group--has-fieldset) { + .form-control { border: none; padding: 0; - margin: 0; - min-width: 0; } - .radio-group:not(.radio-group--has-fieldset) .radio-group__label { - position: absolute; - width: 0; - height: 0; - clip: rect(0 0 0 0); - clip-path: inset(50%); - overflow: hidden; - white-space: nowrap; + .form-control__label { + padding: 0; } .radio-group--required .radio-group__label::after { diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts index 4a977448..137cd70d 100644 --- a/src/components/radio-group/radio-group.ts +++ b/src/components/radio-group/radio-group.ts @@ -3,6 +3,7 @@ import { customElement, property, query, state } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; import { FormSubmitController } from '../../internal/form'; import ShoelaceElement from '../../internal/shoelace-element'; +import { HasSlotController } from '../../internal/slot'; import { watch } from '../../internal/watch'; import '../button-group/button-group'; import styles from './radio-group.styles'; @@ -23,8 +24,10 @@ import type { CSSResultGroup } from 'lit'; * * @event sl-change - Emitted when the radio group's selected value changes. * - * @csspart base - The component's internal wrapper. - * @csspart label - The radio group's label. + * @csspart form-control - The form control that wraps the label, input, and help-text. + * @csspart form-control-label - The label's wrapper. + * @csspart form-control-input - The input's wrapper. + * @csspart form-control-help-text - The help text's wrapper. * @csspart button-group - The button group that wraps radio buttons. * @csspart button-group__base - The button group's `base` part. */ @@ -35,6 +38,7 @@ export default class SlRadioGroup extends ShoelaceElement { protected readonly formSubmitController = new FormSubmitController(this, { defaultValue: (control: SlRadioGroup) => control.defaultValue }); + private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label'); @query('slot:not([name])') defaultSlot: HTMLSlotElement; @query('.radio-group__validation-input') input: HTMLInputElement; @@ -50,6 +54,9 @@ export default class SlRadioGroup extends ShoelaceElement { */ @property() label = ''; + /** The input's help text. If you need to display HTML, you can use the `help-text` slot instead. */ + @property({ attribute: 'help-text' }) helpText = ''; + /** The selected value of the control. */ @property({ reflect: true }) value = ''; @@ -62,9 +69,6 @@ export default class SlRadioGroup extends ShoelaceElement { */ @property({ type: Boolean, reflect: true }) invalid = false; - /** Shows the fieldset and legend that surrounds the radio group. */ - @property({ type: Boolean, attribute: 'fieldset', reflect: true }) fieldset = false; - /** Ensures a child radio is checked before allowing the containing form to submit. */ @property({ type: Boolean, reflect: true }) required = false; @@ -127,11 +131,11 @@ export default class SlRadioGroup extends ShoelaceElement { return !this.invalid; } - private getAllRadios() { + getAllRadios() { return [...this.querySelectorAll('sl-radio, sl-radio-button')]; } - private handleRadioClick(event: MouseEvent) { + handleRadioClick(event: MouseEvent) { const target = event.target as SlRadio | SlRadioButton; if (target.disabled) { @@ -143,7 +147,7 @@ export default class SlRadioGroup extends ShoelaceElement { radios.forEach(radio => (radio.checked = radio === target)); } - private handleKeyDown(event: KeyboardEvent) { + handleKeyDown(event: KeyboardEvent) { if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(event.key)) { return; } @@ -180,7 +184,18 @@ export default class SlRadioGroup extends ShoelaceElement { event.preventDefault(); } - private handleSlotChange() { + handleLabelClick() { + const radios = this.getAllRadios(); + const checked = radios.find(radio => radio.checked); + const radioToFocus = checked || radios[0]; + + // Move focus to the checked radio (or the first one if none are checked) when clicking the label + if (radioToFocus) { + radioToFocus.focus(); + } + } + + handleSlotChange() { const radios = this.getAllRadios(); radios.forEach(radio => (radio.checked = radio.value === this.value)); @@ -205,18 +220,23 @@ export default class SlRadioGroup extends ShoelaceElement { } } - private showNativeErrorMessage() { + showNativeErrorMessage() { this.input.hidden = false; this.input.reportValidity(); setTimeout(() => (this.input.hidden = true), 10000); } - private updateCheckedRadio() { + updateCheckedRadio() { const radios = this.getAllRadios(); radios.forEach(radio => (radio.checked = radio.value === this.value)); } render() { + const hasLabelSlot = this.hasSlotController.test('label'); + const hasHelpTextSlot = this.hasSlotController.test('help-text'); + const hasLabel = this.label ? true : !!hasLabelSlot; + const hasHelpText = this.helpText ? true : !!hasHelpTextSlot; + const defaultSlot = html` - + -