From e6d3d8317aa6fb256e75fb0c39065cc0053a3d5e Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 8 Feb 2024 14:51:00 -0500 Subject: [PATCH] Add checkbox help text (#1860) * add help text to sl-checkbox to match sl-switch * add missing import --- docs/pages/components/checkbox.md | 14 ++ docs/pages/components/switch.md | 2 + docs/pages/resources/changelog.md | 2 + src/components/checkbox/checkbox.component.ts | 131 +++++++++++------- src/components/checkbox/checkbox.styles.ts | 2 + src/components/checkbox/checkbox.test.ts | 1 + 6 files changed, 102 insertions(+), 50 deletions(-) diff --git a/docs/pages/components/checkbox.md b/docs/pages/components/checkbox.md index dd88b3f6..f5197b9b 100644 --- a/docs/pages/components/checkbox.md +++ b/docs/pages/components/checkbox.md @@ -89,6 +89,20 @@ const App = () => ( ); ``` +### Help Text + +Add descriptive help text to a switch with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. + +```html:preview +Label +``` + +```jsx:react +import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox'; + +const App = () => Label; +``` + ### 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/pages/components/switch.md b/docs/pages/components/switch.md index 42765036..194a51cf 100644 --- a/docs/pages/components/switch.md +++ b/docs/pages/components/switch.md @@ -84,6 +84,8 @@ Add descriptive help text to a switch with the `help-text` attribute. For help t ``` ```jsx:react +import SlSwitch from '@shoelace-style/shoelace/dist/react/checkbox'; + const App = () => Label; ``` diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index fa67662d..7e935588 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -18,6 +18,8 @@ New versions of Shoelace are released as-needed and generally occur when a criti ## 2.13.1 +- Added help text to `` +- Added help text to `` [#1800] - Fixed a bug where the safe triangle was always visible when selecting nested `` elements [#1835] ## 2.13.0 diff --git a/src/components/checkbox/checkbox.component.ts b/src/components/checkbox/checkbox.component.ts index bb37a5a4..f4479c9c 100644 --- a/src/components/checkbox/checkbox.component.ts +++ b/src/components/checkbox/checkbox.component.ts @@ -1,6 +1,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { defaultValue } from '../../internal/default-value.js'; import { FormControlController } from '../../internal/form.js'; +import { HasSlotController } from '../../internal/slot.js'; import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { live } from 'lit/directives/live.js'; @@ -21,6 +22,7 @@ import type { ShoelaceFormControl } from '../../internal/shoelace-element.js'; * @dependency sl-icon * * @slot - The checkbox's label. + * @slot help-text - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute. * * @event sl-blur - Emitted when the checkbox loses focus. * @event sl-change - Emitted when the checked state changes. @@ -35,6 +37,7 @@ import type { ShoelaceFormControl } from '../../internal/shoelace-element.js'; * @csspart checked-icon - The checked icon, an `` element. * @csspart indeterminate-icon - The indeterminate icon, an `` element. * @csspart label - The container that wraps the checkbox's label. + * @csspart form-control-help-text - The help text's wrapper. */ export default class SlCheckbox extends ShoelaceElement implements ShoelaceFormControl { static styles: CSSResultGroup = styles; @@ -45,6 +48,7 @@ export default class SlCheckbox extends ShoelaceElement implements ShoelaceFormC defaultValue: (control: SlCheckbox) => control.defaultChecked, setValue: (control: SlCheckbox, checked: boolean) => (control.checked = checked) }); + private readonly hasSlotController = new HasSlotController(this, 'help-text'); @query('input[type="checkbox"]') input: HTMLInputElement; @@ -86,6 +90,9 @@ export default class SlCheckbox extends ShoelaceElement implements ShoelaceFormC /** Makes the checkbox a required field. */ @property({ type: Boolean, reflect: true }) required = false; + /** The checkbox's help text. If you need to display HTML, use the `help-text` slot instead. */ + @property({ attribute: 'help-text' }) helpText = ''; + /** Gets the validity state object */ get validity() { return this.input.validity; @@ -178,68 +185,92 @@ export default class SlCheckbox extends ShoelaceElement implements ShoelaceFormC } render() { + const hasHelpTextSlot = this.hasSlotController.test('help-text'); + const hasHelpText = this.helpText ? true : !!hasHelpTextSlot; + // // NOTE: we use a
around the label slot because of this Chrome bug. // // https://bugs.chromium.org/p/chromium/issues/detail?id=1413733 // return html` -