diff --git a/packages/picker/README.md b/packages/picker/README.md index d0ebf27c96e..0879fd0a627 100644 --- a/packages/picker/README.md +++ b/packages/picker/README.md @@ -627,11 +627,11 @@ Use [``](../help-text/) to add help text and error text: Phone Text Email + + Choose the best way to contact you in case there's an issue with your + account. + - - Choose the best way to contact you in case there's an issue with your - account. - ``` @@ -652,10 +652,10 @@ Use [``](../help-text/) to add help text and error text: Phone Text Email + + Select a contact method. + - - Select a contact method. - ``` diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts index 6fdcd5f090d..1adaf6a9da9 100644 --- a/packages/picker/src/Picker.ts +++ b/packages/picker/src/Picker.ts @@ -61,6 +61,7 @@ import type { FieldLabel } from '@spectrum-web-components/field-label'; import { DesktopController } from './DesktopController.js'; import { MobileController } from './MobileController.js'; import { strategies } from './strategies.js'; +import { ManageHelpText } from '@spectrum-web-components/help-text/src/manage-help-text.js'; const chevronClass = { s: 'spectrum-UIIcon-ChevronDown75', @@ -80,9 +81,11 @@ export const DESCRIPTION_ID = 'option-picker'; * @fires change - Announces that the `value` of the element has changed * @fires sp-opened - Announces that the overlay has been opened */ -export class PickerBase extends SizedMixin(SpectrumElement, { - noDefaultSize: true, -}) { +export class PickerBase extends ManageHelpText( + SizedMixin(SpectrumElement, { + noDefaultSize: true, + }) +) { static override shadowRootOptions = { ...SpectrumElement.shadowRootOptions, delegatesFocus: true, @@ -574,7 +577,7 @@ export class PickerBase extends SizedMixin(SpectrumElement, { return html` + ${this.renderHelpText(this.invalid)}