From 4b7da8f5100c2e6536e33771ba2585cf9ea76e69 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Wed, 3 Aug 2022 11:06:52 -0400 Subject: [PATCH] update docs --- src/components/color-picker/color-picker.ts | 7 +++++-- src/components/details/details.ts | 2 +- src/components/dialog/dialog.ts | 5 +++-- src/components/drawer/drawer.ts | 5 +++-- src/components/input/input.ts | 8 ++++---- src/components/radio-group/radio-group.ts | 7 +++++-- src/components/range/range.ts | 8 ++++---- src/components/select/select.ts | 8 ++++---- src/components/textarea/textarea.ts | 8 ++++---- src/components/tooltip/tooltip.ts | 4 ++-- 10 files changed, 35 insertions(+), 27 deletions(-) diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts index 12ef46531..58c5a5c1c 100644 --- a/src/components/color-picker/color-picker.ts +++ b/src/components/color-picker/color-picker.ts @@ -45,7 +45,7 @@ declare const EyeDropper: EyeDropperConstructor; * @dependency sl-input * @dependency sl-visually-hidden * - * @slot label - The color picker's label. Alternatively, you can use the label prop. + * @slot label - The color picker's label. Alternatively, you can use the `label` attribute. * * @event sl-change Emitted when the color picker's value changes. * @@ -111,7 +111,10 @@ export default class SlColorPicker extends LitElement { @defaultValue() defaultValue = ''; - /* The color picker's label. This will not be displayed, but it will be announced by assistive devices. */ + /** + * The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to + * display HTML, you can use the `label` slot` instead. + */ @property() label = ''; /** diff --git a/src/components/details/details.ts b/src/components/details/details.ts index b31dfd89e..56c420360 100644 --- a/src/components/details/details.ts +++ b/src/components/details/details.ts @@ -17,7 +17,7 @@ import type { CSSResultGroup } from 'lit'; * @dependency sl-icon * * @slot - The details' content. - * @slot summary - The details' summary. Alternatively, you can use the summary prop. + * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute. * * @event sl-show - Emitted when the details opens. * @event sl-after-show - Emitted after the details opens and all animations are complete. diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts index 79b0337cb..cb8d4e6cb 100644 --- a/src/components/dialog/dialog.ts +++ b/src/components/dialog/dialog.ts @@ -21,7 +21,7 @@ import type { CSSResultGroup } from 'lit'; * @dependency sl-icon-button * * @slot - The dialog's content. - * @slot label - The dialog's label. Alternatively, you can use the label prop. + * @slot label - The dialog's label. Alternatively, you can use the `label` attribute. * @slot footer - The dialog's footer, usually one or more buttons representing various options. * * @event sl-show - Emitted when the dialog opens. @@ -74,7 +74,8 @@ export default class SlDialog extends LitElement { /** * The dialog's label as displayed in the header. You should always include a relevant label even when using - * `no-header`, as it is required for proper accessibility. + * `no-header`, as it is required for proper accessibility. If you need to display HTML, you can use the `label` slot + * instead. */ @property({ reflect: true }) label = ''; diff --git a/src/components/drawer/drawer.ts b/src/components/drawer/drawer.ts index c73faaad6..9417a2084 100644 --- a/src/components/drawer/drawer.ts +++ b/src/components/drawer/drawer.ts @@ -22,7 +22,7 @@ import type { CSSResultGroup } from 'lit'; * @dependency sl-icon-button * * @slot - The drawer's content. - * @slot label - The drawer's label. Alternatively, you can use the label prop. + * @slot label - The drawer's label. Alternatively, you can use the `label` attribute. * @slot footer - The drawer's footer, usually one or more buttons representing various options. * * @event sl-show - Emitted when the drawer opens. @@ -82,7 +82,8 @@ export default class SlDrawer extends LitElement { /** * The drawer's label as displayed in the header. You should always include a relevant label even when using - * `no-header`, as it is required for proper accessibility. + * `no-header`, as it is required for proper accessibility. If you need to display HTML, you can use the `label` slot + * instead. */ @property({ reflect: true }) label = ''; diff --git a/src/components/input/input.ts b/src/components/input/input.ts index 9d7e17a1e..be341cb47 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -19,13 +19,13 @@ import type { CSSResultGroup } from 'lit'; * * @dependency sl-icon * - * @slot label - The input's label. Alternatively, you can use the label prop. + * @slot label - The input's label. Alternatively, you can use the `label` attribute. * @slot prefix - Used to prepend an icon or similar element to the input. * @slot suffix - Used to append an icon or similar element to the input. * @slot clear-icon - An icon to use in lieu of the default clear icon. * @slot show-password-icon - An icon to use in lieu of the default show password icon. * @slot hide-password-icon - An icon to use in lieu of the default hide password icon. - * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop. + * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the `help-text` attribute. * * @event sl-change - Emitted when an alteration to the control's value is committed by the user. * @event sl-clear - Emitted when the clear button is activated. @@ -89,10 +89,10 @@ export default class SlInput extends LitElement { /** Draws a pill-style input with rounded edges. */ @property({ type: Boolean, reflect: true }) pill = false; - /** The input's label. Alternatively, you can use the label slot. */ + /** The input's label. If you need to display HTML, you can use the `label` slot instead. */ @property() label = ''; - /** The input's help text. Alternatively, you can use the help-text slot. */ + /** The input's help text. If you need to display HTML, you can use the `help-text` slot instead. */ @property({ attribute: 'help-text' }) helpText = ''; /** Adds a clear button when the input is populated. */ diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts index c5f28c062..7f39c9658 100644 --- a/src/components/radio-group/radio-group.ts +++ b/src/components/radio-group/radio-group.ts @@ -19,7 +19,7 @@ const RADIO_CHILDREN = ['sl-radio', 'sl-radio-button']; * @dependency sl-button-group * * @slot - The default slot where radio controls are placed. - * @slot label - The radio group label. Required for proper accessibility. Alternatively, you can use the label prop. + * @slot label - The radio group label. Required for proper accessibility. Alternatively, you can use the `label` attribute. * * @event sl-change - Emitted when the radio group's selected value changes. * @@ -45,7 +45,10 @@ export default class SlRadioGroup extends LitElement { @state() private customErrorMessage = ''; @state() private defaultValue = ''; - /** The radio group label. Required for proper accessibility. Alternatively, you can use the label slot. */ + /** + * The radio group label. Required for proper accessibility. If you need to display HTML, you can use the `label` slot + * instead. + */ @property() label = ''; /** The selected value of the control. */ diff --git a/src/components/range/range.ts b/src/components/range/range.ts index 8d4a22ccd..1216dc19c 100644 --- a/src/components/range/range.ts +++ b/src/components/range/range.ts @@ -16,8 +16,8 @@ import type { CSSResultGroup } from 'lit'; * @since 2.0 * @status stable * - * @slot label - The input's label. Alternatively, you can use the label prop. - * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop. + * @slot label - The input's label. Alternatively, you can use the `label` attribute. + * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the `help-text` attribute. * * @event sl-change - Emitted when the control's value changes. * @event sl-blur - Emitted when the control loses focus. @@ -60,10 +60,10 @@ export default class SlRange extends LitElement { /** The input's value attribute. */ @property({ type: Number }) value = 0; - /** The range's label. Alternatively, you can use the label slot. */ + /** The range's label. If you need to display HTML, you can use the `label` slot instead. */ @property() label = ''; - /** The range's help text. Alternatively, you can use the help-text slot. */ + /** The range's help text. If you need to display HTML, you can use the help-text slot instead. */ @property({ attribute: 'help-text' }) helpText = ''; /** Disables the input. */ diff --git a/src/components/select/select.ts b/src/components/select/select.ts index dbfabecb2..69696859e 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -34,8 +34,8 @@ import type { TemplateResult, CSSResultGroup } from 'lit'; * @slot prefix - Used to prepend an icon or similar element to the select. * @slot suffix - Used to append an icon or similar element to the select. * @slot clear-icon - An icon to use in lieu of the default clear icon. - * @slot label - The select's label. Alternatively, you can use the label prop. - * @slot help-text - Help text that describes how to use the select. + * @slot label - The select's label. Alternatively, you can use the `label` attribute. + * @slot help-text - Help text that describes how to use the select. Alternatively, you can use the `help-text` attribute. * * @event sl-clear - Emitted when the clear button is activated. * @event sl-change - Emitted when the control's value changes. @@ -117,7 +117,7 @@ export default class SlSelect extends LitElement { /** Draws a pill-style select with rounded edges. */ @property({ type: Boolean, reflect: true }) pill = false; - /** The select's label. Alternatively, you can use the label slot. */ + /** The select's label. If you need to display HTML, you can use the `label` slot instead. */ @property() label = ''; /** @@ -126,7 +126,7 @@ export default class SlSelect extends LitElement { */ @property() placement: 'top' | 'bottom' = 'bottom'; - /** The select's help text. Alternatively, you can use the help-text slot. */ + /** The select's help text. If you need to display HTML, you can use the `help-text` slot instead. */ @property({ attribute: 'help-text' }) helpText = ''; /** The select's required attribute. */ diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts index cfe75a97d..efb9f6264 100644 --- a/src/components/textarea/textarea.ts +++ b/src/components/textarea/textarea.ts @@ -15,8 +15,8 @@ import type { CSSResultGroup } from 'lit'; * @since 2.0 * @status stable * - * @slot label - The textarea's label. Alternatively, you can use the label prop. - * @slot help-text - Help text that describes how to use the input. + * @slot label - The textarea's label. Alternatively, you can use the `label` attribute. + * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the `help-text` attribute. * * @event sl-change - Emitted when an alteration to the control's value is committed by the user. * @event sl-input - Emitted when the control receives input and its value changes. @@ -55,10 +55,10 @@ export default class SlTextarea extends LitElement { /** Draws a filled textarea. */ @property({ type: Boolean, reflect: true }) filled = false; - /** The textarea's label. Alternatively, you can use the label slot. */ + /** The textarea's label. If you need to display HTML, you can use the `label` slot instead. */ @property() label = ''; - /** The textarea's help text. Alternatively, you can use the help-text slot. */ + /** The textarea's help text. If you need to display HTML, you can use the `help-text` slot instead. */ @property({ attribute: 'help-text' }) helpText = ''; /** The textarea's placeholder text. */ diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts index 34948f661..09f3ae92b 100644 --- a/src/components/tooltip/tooltip.ts +++ b/src/components/tooltip/tooltip.ts @@ -15,7 +15,7 @@ import type { CSSResultGroup } from 'lit'; * @status stable * * @slot - The tooltip's target element. Only the first element will be used as the target. - * @slot content - The tooltip's content. Alternatively, you can use the content prop. + * @slot content - The tooltip's content. Alternatively, you can use the `content` attribute. * * @event sl-show - Emitted when the tooltip begins to show. * @event sl-after-show - Emitted after the tooltip has shown and all animations are complete. @@ -44,7 +44,7 @@ export default class SlTooltip extends LitElement { private readonly localize = new LocalizeController(this); private positionerCleanup: ReturnType | undefined; - /** The tooltip's content. Alternatively, you can use the content slot. */ + /** The tooltip's content. If you need to display HTML, you can use the `content` slot instead. */ @property() content = ''; /**