From 380d56fa4058794b9551ac8b510045100dda9776 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 8 Feb 2024 12:42:59 -0500 Subject: [PATCH 01/17] remove html from getTextLabel() (#1840) --- docs/pages/resources/changelog.md | 4 ++++ src/components/option/option.component.ts | 2 +- src/components/option/option.test.ts | 5 +++++ 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 29cf2233..fa67662d 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -12,6 +12,10 @@ Components with the Experimental bad New versions of Shoelace are released as-needed and generally occur when a critical mass of changes have accumulated. At any time, you can see what's coming in the next release by visiting [next.shoelace.style](https://next.shoelace.style). +## Next + +- Fixed a bug in `` that caused HTML tags to be included in `getTextLabel()` + ## 2.13.1 - Fixed a bug where the safe triangle was always visible when selecting nested `` elements [#1835] diff --git a/src/components/option/option.component.ts b/src/components/option/option.component.ts index 142e2628..8ae60e18 100644 --- a/src/components/option/option.component.ts +++ b/src/components/option/option.component.ts @@ -112,7 +112,7 @@ export default class SlOption extends ShoelaceElement { [...nodes].forEach(node => { if (node.nodeType === Node.ELEMENT_NODE) { if (!(node as HTMLElement).hasAttribute('slot')) { - label += (node as HTMLElement).outerHTML; + label += (node as HTMLElement).textContent; } } diff --git a/src/components/option/option.test.ts b/src/components/option/option.test.ts index 1112f300..2d5320a7 100644 --- a/src/components/option/option.test.ts +++ b/src/components/option/option.test.ts @@ -52,4 +52,9 @@ describe('', () => { expect(el.value).to.equal('10'); }); + + it('should escape HTML when calling getTextLabel()', async () => { + const el = await fixture(html` Option `); + expect(el.getTextLabel()).to.equal('Option'); + }); }); From a5e9b942e386191f700d95e3e3fc19e7d0969e01 Mon Sep 17 00:00:00 2001 From: Konnor Rogers Date: Thu, 8 Feb 2024 12:46:31 -0500 Subject: [PATCH 02/17] fix animated image documentation for CSS part (#1838) --- src/components/animated-image/animated-image.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/animated-image/animated-image.component.ts b/src/components/animated-image/animated-image.component.ts index d301618d..9b07cc06 100644 --- a/src/components/animated-image/animated-image.component.ts +++ b/src/components/animated-image/animated-image.component.ts @@ -20,7 +20,7 @@ import type { CSSResultGroup } from 'lit'; * @slot play-icon - Optional play icon to use instead of the default. Works best with ``. * @slot pause-icon - Optional pause icon to use instead of the default. Works best with ``. * - * @part - control-box - The container that surrounds the pause/play icons and provides their background. + * @part control-box - The container that surrounds the pause/play icons and provides their background. * * @cssproperty --control-box-size - The size of the icon box. * @cssproperty --icon-size - The size of the play/pause icons. From 9451c3b8de58624162d8b6c8c09cadc82f7397d5 Mon Sep 17 00:00:00 2001 From: clintcs <114178960+clintcs@users.noreply.github.com> Date: Thu, 8 Feb 2024 09:54:21 -0800 Subject: [PATCH 03/17] add switch help text (#1800) --- docs/pages/components/switch.md | 12 +++ src/components/switch/switch.component.ts | 96 +++++++++++++++-------- src/components/switch/switch.styles.ts | 2 + src/components/switch/switch.test.ts | 1 + 4 files changed, 78 insertions(+), 33 deletions(-) diff --git a/docs/pages/components/switch.md b/docs/pages/components/switch.md index 31630c06..42765036 100644 --- a/docs/pages/components/switch.md +++ b/docs/pages/components/switch.md @@ -75,6 +75,18 @@ 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 +const App = () => Label; +``` + ### Custom Styles Use the available custom properties to change how the switch is styled. diff --git a/src/components/switch/switch.component.ts b/src/components/switch/switch.component.ts index 2ec28063..f4f263fa 100644 --- a/src/components/switch/switch.component.ts +++ b/src/components/switch/switch.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'; @@ -18,6 +19,7 @@ import type { ShoelaceFormControl } from '../../internal/shoelace-element.js'; * @since 2.0 * * @slot - The switch's label. + * @slot help-text - Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute. * * @event sl-blur - Emitted when the control loses focus. * @event sl-change - Emitted when the control's checked state changes. @@ -29,6 +31,7 @@ import type { ShoelaceFormControl } from '../../internal/shoelace-element.js'; * @csspart control - The control that houses the switch's thumb. * @csspart thumb - The switch's thumb. * @csspart label - The switch's label. + * @csspart form-control-help-text - The help text's wrapper. * * @cssproperty --width - The width of the switch. * @cssproperty --height - The height of the switch. @@ -42,6 +45,7 @@ export default class SlSwitch extends ShoelaceElement implements ShoelaceFormCon defaultValue: (control: SlSwitch) => control.defaultChecked, setValue: (control: SlSwitch, checked: boolean) => (control.checked = checked) }); + private readonly hasSlotController = new HasSlotController(this, 'help-text'); @query('input[type="checkbox"]') input: HTMLInputElement; @@ -76,6 +80,9 @@ export default class SlSwitch extends ShoelaceElement implements ShoelaceFormCon /** Makes the switch a required field. */ @property({ type: Boolean, reflect: true }) required = false; + /** The switch'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; @@ -179,46 +186,69 @@ export default class SlSwitch extends ShoelaceElement implements ShoelaceFormCon } render() { + const hasHelpTextSlot = this.hasSlotController.test('help-text'); + const hasHelpText = this.helpText ? true : !!hasHelpTextSlot; + return html` -