From 6d9f513f68a053c0baea847e582350741061a1e2 Mon Sep 17 00:00:00 2001 From: Lea Verou Date: Fri, 13 Dec 2024 14:17:58 -0500 Subject: [PATCH] =?UTF-8?q?`help-text`=20=E2=9E=A1=EF=B8=8F=20`hint`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/docs/components/checkbox.md | 8 ++--- docs/docs/components/color-picker.md | 8 ++--- docs/docs/components/input.md | 16 ++++----- docs/docs/components/radio-group.md | 10 +++--- docs/docs/components/range.md | 6 ++-- docs/docs/components/select.md | 8 ++--- docs/docs/components/switch.md | 6 ++-- docs/docs/components/textarea.md | 6 ++-- docs/docs/experimental/form-validation.md | 18 +++++----- docs/docs/experimental/sandbox.md | 12 +++---- docs/docs/experimental/themer.md | 2 +- .../docs/patterns/ecommerce-product-detail.md | 6 ++-- .../docs/patterns/ecommerce-product-review.md | 14 ++++---- docs/docs/patterns/ecommerce.md | 34 +++++++++---------- docs/docs/theming/focus.md | 4 +-- src/components/checkbox/checkbox.test.ts | 2 +- src/components/checkbox/checkbox.ts | 30 ++++++++-------- src/components/color-picker/color-picker.ts | 22 ++++++------ src/components/input/input.test.ts | 2 +- src/components/input/input.ts | 32 ++++++++--------- src/components/radio-group/radio-group.ts | 32 ++++++++--------- src/components/range/range.test.ts | 2 +- src/components/range/range.ts | 32 ++++++++--------- src/components/select/select.ts | 32 ++++++++--------- src/components/switch/switch.test.ts | 2 +- src/components/switch/switch.ts | 30 ++++++++-------- src/components/textarea/textarea.test.ts | 2 +- src/components/textarea/textarea.ts | 32 ++++++++--------- src/styles/shadow/form-control.css | 12 +++---- 29 files changed, 211 insertions(+), 211 deletions(-) diff --git a/docs/docs/components/checkbox.md b/docs/docs/components/checkbox.md index 60634e9f4..a1d1f22d8 100644 --- a/docs/docs/components/checkbox.md +++ b/docs/docs/components/checkbox.md @@ -50,12 +50,12 @@ Use the `size` attribute to change a checkbox's size. Large ``` -### Help Text +### Hint -Add descriptive help text to a switch with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. +Add descriptive hint to a switch with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead. ```html {.example} -Label +Label ``` ### Custom Validity @@ -92,4 +92,4 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi }); }); -``` \ No newline at end of file +``` diff --git a/docs/docs/components/color-picker.md b/docs/docs/components/color-picker.md index 3b0f05184..d67f254d3 100644 --- a/docs/docs/components/color-picker.md +++ b/docs/docs/components/color-picker.md @@ -75,10 +75,10 @@ The color picker can be rendered as disabled. ``` -### Help Text +### Hint -Add descriptive help text to a color picker with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. +Add descriptive hint to a color picker with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead. ```html {.example} - -``` \ No newline at end of file + +``` diff --git a/docs/docs/components/input.md b/docs/docs/components/input.md index 52a8a3f2f..707838586 100644 --- a/docs/docs/components/input.md +++ b/docs/docs/components/input.md @@ -22,12 +22,12 @@ Use the `label` attribute to give the input an accessible label. For labels that ``` -### Help Text +### Hint -Add descriptive help text to an input with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. +Add descriptive hint to an input with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead. ```html {.example} - + ``` ### Placeholders @@ -132,9 +132,9 @@ Use the `prefix` and `suffix` slots to add icons. Use [CSS parts](#css-parts) to customize the way form controls are drawn. This example uses CSS grid to position the label to the left of the control, but the possible orientations are nearly endless. The same technique works for inputs, textareas, radio groups, and similar form controls. ```html {.example} - - - + + + -``` \ No newline at end of file +``` diff --git a/docs/docs/components/radio-group.md b/docs/docs/components/radio-group.md index f9d37c93d..8dcb732ae 100644 --- a/docs/docs/components/radio-group.md +++ b/docs/docs/components/radio-group.md @@ -14,12 +14,12 @@ layout: component ## Examples -### Help Text +### Hint -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. +Add descriptive hint to a radio group with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead. ```html {.example} - + Option 1 Option 2 Option 3 @@ -31,7 +31,7 @@ Add descriptive help text to a radio group with the `help-text` attribute. For h [Radio buttons](/docs/components/radio-button) offer an alternate way to display radio controls. In this case, an internal [button group](/docs/components/button-group) is used to group the buttons into a single, cohesive control. ```html {.example} - + Option 1 Option 2 Option 3 @@ -137,4 +137,4 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi alert('All fields are valid!'); }); -``` \ No newline at end of file +``` diff --git a/docs/docs/components/range.md b/docs/docs/components/range.md index 85fec2b17..c18be6ff2 100644 --- a/docs/docs/components/range.md +++ b/docs/docs/components/range.md @@ -22,12 +22,12 @@ Use the `label` attribute to give the range an accessible label. For labels that ``` -### Help Text +### Hint -Add descriptive help text to a range with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. +Add descriptive hint to a range with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead. ```html {.example} - + ``` ### Min, Max, and Step diff --git a/docs/docs/components/select.md b/docs/docs/components/select.md index f04938364..37b57f9d3 100644 --- a/docs/docs/components/select.md +++ b/docs/docs/components/select.md @@ -33,12 +33,12 @@ Use the `label` attribute to give the select an accessible label. For labels tha ``` -### Help Text +### Hint -Add descriptive help text to a select with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. +Add descriptive hint to a select with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead. ```html {.example} - + Novice Intermediate Advanced @@ -412,4 +412,4 @@ This can be hard to conceptualize, so heres a fairly large example showing how l container.addEventListener("click", addFooOption) container.addEventListener("submit", handleLazySubmit) -``` \ No newline at end of file +``` diff --git a/docs/docs/components/switch.md b/docs/docs/components/switch.md index d6c96b7a7..44eb52631 100644 --- a/docs/docs/components/switch.md +++ b/docs/docs/components/switch.md @@ -42,12 +42,12 @@ Use the `size` attribute to change a switch's size. Large ``` -### Help Text +### Hint -Add descriptive help text to a switch with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. +Add descriptive hint to a switch with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead. ```html {.example} -Label +Label ``` ### Custom Styles diff --git a/docs/docs/components/textarea.md b/docs/docs/components/textarea.md index d3fbbab05..4ea1807dc 100644 --- a/docs/docs/components/textarea.md +++ b/docs/docs/components/textarea.md @@ -22,12 +22,12 @@ Use the `label` attribute to give the textarea an accessible label. For labels t ``` -### Help Text +### Hint -Add descriptive help text to a textarea with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. +Add descriptive hint to a textarea with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead. ```html {.example} - + ``` ### Rows diff --git a/docs/docs/experimental/form-validation.md b/docs/docs/experimental/form-validation.md index 8b06cb1d3..d3efe0c0a 100644 --- a/docs/docs/experimental/form-validation.md +++ b/docs/docs/experimental/form-validation.md @@ -9,13 +9,13 @@ Adding the `wa-valid` or `wa-invalid` class to a form control will change its ap

Valid

-
-

Invalid

-
-
-
\ No newline at end of file + diff --git a/docs/docs/experimental/sandbox.md b/docs/docs/experimental/sandbox.md index e466d7df5..60286027c 100644 --- a/docs/docs/experimental/sandbox.md +++ b/docs/docs/experimental/sandbox.md @@ -132,9 +132,9 @@ layout: page
Switch on

- +

- +
Option 1 @@ -246,11 +246,11 @@ layout: page
- - + + OCBS - +
-``` \ No newline at end of file +``` diff --git a/docs/docs/experimental/themer.md b/docs/docs/experimental/themer.md index 5e6e37b0b..5198167ea 100644 --- a/docs/docs/experimental/themer.md +++ b/docs/docs/experimental/themer.md @@ -539,7 +539,7 @@ hasOutline: false Browse icons - It's dangerous to go alone. Take these! + It's dangerous to go alone. Take these! diff --git a/docs/docs/patterns/ecommerce-product-detail.md b/docs/docs/patterns/ecommerce-product-detail.md index 820bdbbc5..874972cc2 100644 --- a/docs/docs/patterns/ecommerce-product-detail.md +++ b/docs/docs/patterns/ecommerce-product-detail.md @@ -91,11 +91,11 @@ TODO Page Description
- + Black Gray - + S M L @@ -125,4 +125,4 @@ TODO Page Description } } -``` \ No newline at end of file +``` diff --git a/docs/docs/patterns/ecommerce-product-review.md b/docs/docs/patterns/ecommerce-product-review.md index b53805c03..57c8b905d 100644 --- a/docs/docs/patterns/ecommerce-product-review.md +++ b/docs/docs/patterns/ecommerce-product-review.md @@ -36,12 +36,12 @@ TODO Page Description 117 Reviews - + Option 1 Option 2 Option 3 - + Option 1 Option 2 Option 3 @@ -103,12 +103,12 @@ TODO Page Description - + Option 1 Option 2 Option 3 - + Option 1 Option 2 Option 3 @@ -228,7 +228,7 @@ TODO Page Description $140

The Zip Tote Basket is the perfect midpoint between shopping tote and comfy backpack. With convertible straps, you can hand carry, should sling, or backpack this convenient and spacious bag. The zip top and durable canvas construction keeps your goods protected for all-day use.

- + @@ -384,7 +384,7 @@ TODO Page Description
- + Option 1 Option 2 Option 3 @@ -461,4 +461,4 @@ TODO Page Description
-``` \ No newline at end of file +``` diff --git a/docs/docs/patterns/ecommerce.md b/docs/docs/patterns/ecommerce.md index a68056e64..997d96240 100644 --- a/docs/docs/patterns/ecommerce.md +++ b/docs/docs/patterns/ecommerce.md @@ -19,7 +19,7 @@ TODO Page Description

Get 15% Off...*

...your first online order when you signup for emails.

-
What would you link like people to call you?
+
What would you link like people to call you?
 Email me discount

*The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.

@@ -74,34 +74,34 @@ TODO Page Description Pants Shoes - +
Just Arrived - - + + - + - +
- - + +

footer with something cool in it

Signup now
- + - - + + ``` ### Slide Over @@ -580,7 +580,7 @@ TODO Page Description $140

The Zip Tote Basket is the perfect midpoint between shopping tote and comfy backpack. With convertible straps, you can hand carry, should sling, or backpack this convenient and spacious bag. The zip top and durable canvas construction keeps your goods protected for all-day use.

- + Black White @@ -616,11 +616,11 @@ TODO Page Description wa-radio-button #shadow-root div .button--medium { padding: var(--wa-space-xs) var(--wa-space-xs); } - + .color-circle { --background: #000; background: var(--background); - + width: 50px; height: 100%; } @@ -893,7 +893,7 @@ TODO Page Description
- + Standard Express diff --git a/docs/docs/theming/focus.md b/docs/docs/theming/focus.md index 4c3bd9ee6..bc586fbea 100644 --- a/docs/docs/theming/focus.md +++ b/docs/docs/theming/focus.md @@ -19,7 +19,7 @@ See your theme's focus ring in action by navigating this form example with your ```html {.example} - Press Tab to move focus to other interactive elements. + Press Tab to move focus to other interactive elements. Checkbox Button @@ -32,4 +32,4 @@ See your theme's focus ring in action by navigating this form example with your margin-block-start: var(--wa-space-m); } -``` \ No newline at end of file +``` diff --git a/src/components/checkbox/checkbox.test.ts b/src/components/checkbox/checkbox.test.ts index b85a9b1b8..8bb2392e1 100644 --- a/src/components/checkbox/checkbox.test.ts +++ b/src/components/checkbox/checkbox.test.ts @@ -28,7 +28,7 @@ describe('', () => { expect(el.checked).to.be.false; expect(el.indeterminate).to.be.false; expect(el.defaultChecked).to.be.false; - expect(el.helpText).to.equal(''); + expect(el.hint).to.equal(''); }); it('should have title if title attribute is set', async () => { diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts index b0730c505..2d315f127 100644 --- a/src/components/checkbox/checkbox.ts +++ b/src/components/checkbox/checkbox.ts @@ -25,7 +25,7 @@ import type { PropertyValues } from 'lit'; * @dependency wa-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. + * @slot hint - Text that describes how to use the checkbox. Alternatively, you can use the `hint` attribute. * * @event wa-blur - Emitted when the checkbox loses focus. * @event wa-change - Emitted when the checked state changes. @@ -33,14 +33,14 @@ import type { PropertyValues } from 'lit'; * @event wa-input - Emitted when the checkbox receives input. * @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied. * - * @csspart base - The component's base wrapper. + * @csspart label - The component's label . * @csspart control - The square container that wraps the checkbox's checked state. * @csspart control--checked - Matches the control part when the checkbox is checked. * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate. * @csspart checked-icon - The checked icon, a `` element. * @csspart indeterminate-icon - The indeterminate icon, a `` element. * @csspart label - The container that wraps the checkbox's label. - * @csspart form-control-help-text - The help text's wrapper. + * @csspart form-control-hint - The hint's wrapper. * * @cssproperty --background-color - The checkbox's background color. * @cssproperty --background-color-checked - The checkbox's background color when checked. @@ -75,7 +75,7 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement { return [...super.validators, ...validators]; } - private readonly hasSlotController = new HasSlotController(this, 'help-text'); + private readonly hasSlotController = new HasSlotController(this, 'hint'); @query('input[type="checkbox"]') input: HTMLInputElement; @@ -126,8 +126,8 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement { /** 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 = ''; + /** The checkbox's hint. If you need to display HTML, use the `hint` slot instead. */ + @property({ attribute: 'hint' }) hint = ''; private handleClick() { this.hasInteracted = true; @@ -210,8 +210,8 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement { } render() { - const hasHelpTextSlot = isServer ? true : this.hasSlotController.test('help-text'); - const hasHelpText = this.helpText ? true : !!hasHelpTextSlot; + const hasHelpTextSlot = isServer ? true : this.hasSlotController.test('hint'); + const hasHelpText = this.hint ? true : !!hasHelpTextSlot; const isIndeterminate = !this.checked && this.indeterminate; const iconName = isIndeterminate ? 'indeterminate' : 'check'; @@ -230,11 +230,11 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement { 'form-control--small': this.size === 'small', 'form-control--medium': this.size === 'medium', 'form-control--large': this.size === 'large', - 'form-control--has-help-text': hasHelpText + 'form-control--has-hint': hasHelpText })} >