js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

help-text ➡️ hint

Browse Source
This commit is contained in:
Lea Verou
2024-12-13 14:17:58 -05:00
parent 4b56a03144
commit 6d9f513f68
29 changed files with 211 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/docs/components/checkbox.md
View File

@@ -50,12 +50,12 @@ Use the `size` attribute to change a checkbox's size.
<wa-checkbox size="large">Large</wa-checkbox>
```
### 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}
<wa-checkbox help-text="What should the user know about the checkbox?">Label</wa-checkbox>
<wa-checkbox hint="What should the user know about the checkbox?">Label</wa-checkbox>
```
### Custom Validity
@@ -92,4 +92,4 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
});
});
</script>
```
```

8
docs/docs/components/color-picker.md
View File

@@ -75,10 +75,10 @@ The color picker can be rendered as disabled.
<wa-color-picker disabled label="Select a color"></wa-color-picker>
```
### 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}
<wa-color-picker label="Select a color" help-text="Choose a color with appropate contrast!"></wa-color-picker>
```
<wa-color-picker label="Select a color" hint="Choose a color with appropate contrast!"></wa-color-picker>
```

16
docs/docs/components/input.md
View File

@@ -22,12 +22,12 @@ Use the `label` attribute to give the input an accessible label. For labels that
<wa-input label="What is your name?"></wa-input>
```
### 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}
<wa-input label="Nickname" help-text="What would you like people to call you?"></wa-input>
<wa-input label="Nickname" hint="What would you like people to call you?"></wa-input>
```
### 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}
<wa-input class="label-on-left" label="Name" help-text="Enter your name"></wa-input>
<wa-input class="label-on-left" label="Email" type="email" help-text="Enter your email"></wa-input>
<wa-textarea class="label-on-left" label="Bio" help-text="Tell us something about yourself"></wa-textarea>
<wa-input class="label-on-left" label="Name" hint="Enter your name"></wa-input>
<wa-input class="label-on-left" label="Email" type="email" hint="Enter your email"></wa-input>
<wa-textarea class="label-on-left" label="Bio" hint="Tell us something about yourself"></wa-textarea>
<style>
.label-on-left {
@@ -157,8 +157,8 @@ Use [CSS parts](#css-parts) to customize the way form controls are drawn. This e
text-align: right;
}
.label-on-left::part(form-control-help-text) {
.label-on-left::part(form-control-hint) {
grid-column-start: 2;
}
</style>
```
```

10
docs/docs/components/radio-group.md
View File

@@ -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}
<wa-radio-group label="Select an option" help-text="Choose the most appropriate option." name="a" value="1">
<wa-radio-group label="Select an option" hint="Choose the most appropriate option." name="a" value="1">
<wa-radio value="1">Option 1</wa-radio>
<wa-radio value="2">Option 2</wa-radio>
<wa-radio value="3">Option 3</wa-radio>
@@ -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}
<wa-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
<wa-radio-group label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
<wa-radio-button value="1">Option 1</wa-radio-button>
<wa-radio-button value="2">Option 2</wa-radio-button>
<wa-radio-button value="3">Option 3</wa-radio-button>
@@ -137,4 +137,4 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
alert('All fields are valid!');
});
</script>
```
```

6
docs/docs/components/range.md
View File

@@ -22,12 +22,12 @@ Use the `label` attribute to give the range an accessible label. For labels that
<wa-range label="Volume" min="0" max="100"></wa-range>
```
### 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}
<wa-range label="Volume" help-text="Controls the volume of the current song." min="0" max="100"></wa-range>
<wa-range label="Volume" hint="Controls the volume of the current song." min="0" max="100"></wa-range>
```
### Min, Max, and Step

8
docs/docs/components/select.md
View File

@@ -33,12 +33,12 @@ Use the `label` attribute to give the select an accessible label. For labels tha
</wa-select>
```
### 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}
<wa-select label="Experience" help-text="Please tell us your skill level.">
<wa-select label="Experience" hint="Please tell us your skill level.">
<wa-option value="1">Novice</wa-option>
<wa-option value="2">Intermediate</wa-option>
<wa-option value="3">Advanced</wa-option>
@@ -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)
</script>
```
```

6
docs/docs/components/switch.md
View File

@@ -42,12 +42,12 @@ Use the `size` attribute to change a switch's size.
<wa-switch size="large">Large</wa-switch>
```
### 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}
<wa-switch help-text="What should the user know about the switch?">Label</wa-switch>
<wa-switch hint="What should the user know about the switch?">Label</wa-switch>
```
### Custom Styles

6
docs/docs/components/textarea.md
View File

@@ -22,12 +22,12 @@ Use the `label` attribute to give the textarea an accessible label. For labels t
<wa-textarea label="Comments"></wa-textarea>
```
### 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}
<wa-textarea label="Feedback" help-text="Please tell us what you think."> </wa-textarea>
<wa-textarea label="Feedback" hint="Please tell us what you think."> </wa-textarea>
```
### Rows

18
docs/docs/experimental/form-validation.md
View File

@@ -9,13 +9,13 @@ Adding the `wa-valid` or `wa-invalid` class to a form control will change its ap
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
<div>
<h3>Valid</h3>
<wa-input class="wa-valid" label="Name" help-text="Just a first name is fine" placeholder="Enter your name"></wa-input><br>
<wa-select class="wa-valid" label="Choose one" help-text="Make a choice already">
<wa-input class="wa-valid" label="Name" hint="Just a first name is fine" placeholder="Enter your name"></wa-input><br>
<wa-select class="wa-valid" label="Choose one" hint="Make a choice already">
<wa-option>There can be only one!</wa-option>
<wa-option>Well, maybe two is OK</wa-option>
</wa-select>
<wa-textarea class="wa-valid" label="Bio" help-text="Tell us about yourself" placeholder="Enter a bio"></wa-textarea><br>
<wa-range class="wa-valid" value="50" label="Volume" help-text="Crank it up"></wa-range><br>
<wa-textarea class="wa-valid" label="Bio" hint="Tell us about yourself" placeholder="Enter a bio"></wa-textarea><br>
<wa-range class="wa-valid" value="50" label="Volume" hint="Crank it up"></wa-range><br>
<wa-checkbox class="wa-valid" checked>I am awesome</wa-checkbox><br>
<wa-checkbox class="wa-valid">So am I</wa-checkbox><br><br>
<wa-switch class="wa-valid" checked>Still awesome</wa-switch><br>
@@ -29,13 +29,13 @@ Adding the `wa-valid` or `wa-invalid` class to a form control will change its ap
</div>
<div>
<h3>Invalid</h3>
<wa-input class="wa-invalid" label="Name" help-text="Just a first name is fine" placeholder="Enter your name"></wa-input><br>
<wa-select class="wa-invalid" label="Choose one" help-text="Make a choice already">
<wa-input class="wa-invalid" label="Name" hint="Just a first name is fine" placeholder="Enter your name"></wa-input><br>
<wa-select class="wa-invalid" label="Choose one" hint="Make a choice already">
<wa-option>There can be only one!</wa-option>
<wa-option>Well, maybe two is OK</wa-option>
</wa-select>
<wa-textarea class="wa-invalid" label="Bio" help-text="Tell us about yourself" placeholder="Enter a bio"></wa-textarea><br>
<wa-range class="wa-invalid" value="50" label="Volume" help-text="Crank it up"></wa-range><br>
<wa-textarea class="wa-invalid" label="Bio" hint="Tell us about yourself" placeholder="Enter a bio"></wa-textarea><br>
<wa-range class="wa-invalid" value="50" label="Volume" hint="Crank it up"></wa-range><br>
<wa-checkbox class="wa-invalid" checked>I am awesome</wa-checkbox><br>
<wa-checkbox class="wa-invalid">So am I</wa-checkbox><br><br>
<wa-switch class="wa-invalid" checked>Still awesome</wa-switch><br>
@@ -47,4 +47,4 @@ Adding the `wa-valid` or `wa-invalid` class to a form control will change its ap
</wa-radio-group><br>
<wa-button variant="brand">Submit Form</wa-button>
</div>
</div>
</div>

12
docs/docs/experimental/sandbox.md
View File

@@ -132,9 +132,9 @@ layout: page
<br />
<wa-switch checked>Switch on</wa-switch>
<br /><br />
<wa-range label="Range" help-text="Here's a bit of handy content." min="0" max="100"></wa-range>
<wa-range label="Range" hint="Here's a bit of handy content." min="0" max="100"></wa-range>
<br /><br />
<wa-input label="Label" help-text="Super helpful and/or contextual content" placeholder="Placeholder"></wa-input>
<wa-input label="Label" hint="Super helpful and/or contextual content" placeholder="Placeholder"></wa-input>
<br />
<wa-select label="Select" multiple value="option-1 option-2">
<wa-option value="option-1">Option 1</wa-option>
@@ -246,11 +246,11 @@ layout: page
<wa-spinner></wa-spinner>
</div>
<div class="alignment">
<wa-input label="AaBbCc" help-text="Lorem ipsum dolor"></wa-input>
<wa-select label="AaBbCc" value="ocbs" multiple help-text="Lorem ipsum dolor">
<wa-input label="AaBbCc" hint="Lorem ipsum dolor"></wa-input>
<wa-select label="AaBbCc" value="ocbs" multiple hint="Lorem ipsum dolor">
<wa-option value="ocbs">OCBS</wa-option>
</wa-select>
<wa-color-picker label="AaBbCc" help-text="Lorem ipsum dolor"></wa-color-picker>
<wa-color-picker label="AaBbCc" hint="Lorem ipsum dolor"></wa-color-picker>
</div>
</div>
```
```

2
docs/docs/experimental/themer.md
View File

@@ -539,7 +539,7 @@ hasOutline: false
<wa-icon name="ellipsis" library="fa-classic-regular"></wa-icon>
<wa-visually-hidden>Browse icons</wa-visually-hidden>
</wa-button>
<small slot="help-text" style="display: inline-block; line-height: var(--wa-line-height-condensed);">It's dangerous to go alone. Take these!</small>
<small slot="hint" style="display: inline-block; line-height: var(--wa-line-height-condensed);">It's dangerous to go alone. Take these!</small>
</wa-radio-group>
</div>
</wa-details>

6
docs/docs/patterns/ecommerce-product-detail.md
View File

@@ -91,11 +91,11 @@ TODO Page Description
</section>
<section>
<form>
<wa-radio-group label="Color" help-text="Choose the most appropriate option." name="a" value="black" style="margin-bottom: 1rem;">
<wa-radio-group label="Color" hint="Choose the most appropriate option." name="a" value="black" style="margin-bottom: 1rem;">
<wa-radio value="black">Black</wa-radio>
<wa-radio value="gray">Gray</wa-radio>
</wa-radio-group>
<wa-radio-group label="Size" help-text="Select an option that makes you proud." name="a" value="medium" style="margin-bottom: 1rem;">
<wa-radio-group label="Size" hint="Select an option that makes you proud." name="a" value="medium" style="margin-bottom: 1rem;">
<wa-radio-button value="small">S</wa-radio-button>
<wa-radio-button value="medium">M</wa-radio-button>
<wa-radio-button value="large">L</wa-radio-button>
@@ -125,4 +125,4 @@ TODO Page Description
}
}
</style>
```
```

14
docs/docs/patterns/ecommerce-product-review.md
View File

@@ -36,12 +36,12 @@ TODO Page Description
<wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
<a href="#">117 Reviews</a>
</div>
<wa-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
<wa-radio-group label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
<wa-radio-button value="1">Option 1</wa-radio-button>
<wa-radio-button value="2">Option 2</wa-radio-button>
<wa-radio-button value="3">Option 3</wa-radio-button>
</wa-radio-group>
<wa-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
<wa-radio-group label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
<wa-radio-button value="1">Option 1</wa-radio-button>
<wa-radio-button value="2">Option 2</wa-radio-button>
<wa-radio-button value="3">Option 3</wa-radio-button>
@@ -103,12 +103,12 @@ TODO Page Description
<img src="/assets/images/patterns/gervyn-louis-semwwyXFQho-unsplash.jpg" />
</div>
</div>
<wa-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
<wa-radio-group label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
<wa-radio-button value="1">Option 1</wa-radio-button>
<wa-radio-button value="2">Option 2</wa-radio-button>
<wa-radio-button value="3">Option 3</wa-radio-button>
</wa-radio-group>
<wa-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
<wa-radio-group label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
<wa-radio-button value="1">Option 1</wa-radio-button>
<wa-radio-button value="2">Option 2</wa-radio-button>
<wa-radio-button value="3">Option 3</wa-radio-button>
@@ -228,7 +228,7 @@ TODO Page Description
<span class="price-big">$140</span>
<wa-rating class="sweater-rating" label="Rating" precision="0.5" value="2.5"></wa-rating>
<p>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.</p>
<wa-radio-group label="Select Color" help-text="Select an option that makes you proud." name="a" value="1">
<wa-radio-group label="Select Color" hint="Select an option that makes you proud." name="a" value="1">
<wa-radio-button value="1"></wa-radio-button>
<wa-radio-button value="2"></wa-radio-button>
<wa-radio-button value="3"></wa-radio-button>
@@ -384,7 +384,7 @@ TODO Page Description
<img src="/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg" />
</div>
<div class="div-3">
<wa-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
<wa-radio-group label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
<wa-radio-button value="1">Option 1</wa-radio-button>
<wa-radio-button value="2">Option 2</wa-radio-button>
<wa-radio-button value="3">Option 3</wa-radio-button>
@@ -461,4 +461,4 @@ TODO Page Description
</div>
```
```

34
docs/docs/patterns/ecommerce.md
View File

@@ -19,7 +19,7 @@ TODO Page Description
<h1 style="margin-bottom: 0;">Get 15% Off...*</h1>
<p>...your first online order when you signup for emails.</p>
<wa-input label="Email" style="margin-bottom: 1rem;">
<div slot="help-text">What would you <a href='#'>link</a> like people to call you?</div>
<div slot="hint">What would you <a href='#'>link</a> like people to call you?</div>
</wa-input>
<wa-button size="medium" style="width: 100%; margin-bottom: 1rem;" variant="danger">Email me discount</wa-button>
<p style="font-size: xx-small;font-style: italic;">*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.</p>
@@ -74,34 +74,34 @@ TODO Page Description
<wa-menu-item value="banana">Pants</wa-menu-item>
<wa-menu-item value="orange">Shoes</wa-menu-item>
</div>
<div>
<wa-menu-label>Just Arrived</wa-menu-label>
<wa-menu-item>
<a href="#">
<img style="width: 100%; max-width: 200px;" src="https://images.unsplash.com/photo-1523381294911-8d3cead13475?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDIzNDd8&ixlib=rb-4.0.3&q=80&w=1080" />
</a>
</wa-menu-item>
</div>
<wa-menu-item style="grid-column: 1/-1;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<p style="margin:0;">footer with something cool in it</p>
<wa-button variant="brand" size="small">Signup now</wa-button>
</div>
</wa-menu-item>
</wa-menu>
</wa-dropdown>
<style>
.mm-grid {
@@ -109,7 +109,7 @@ TODO Page Description
grid-template-columns: repeat(3, auto);
gap: 1rem;
.card-overview small {
color: var(--wa-color-text-quiet);
@@ -122,7 +122,7 @@ TODO Page Description
}
}
</style>
```
### Slide Over
@@ -580,7 +580,7 @@ TODO Page Description
<span class="price-big">$140</span>
<wa-rating class="sweater-rating" label="Rating" precision="0.5" value="2.5"></wa-rating>
<p>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.</p>
<wa-radio-group label="Select Color" help-text="Select an option that makes you proud." name="a" value="1">
<wa-radio-group label="Select Color" hint="Select an option that makes you proud." name="a" value="1">
<wa-radio-button value="1">Black
</wa-radio-button>
<wa-radio-button value="2">White</wa-radio-button>
@@ -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
<wa-input label="Postal Code" class="second-half" style="margin-top: 1.5rem;"></wa-input>
<wa-input label="Phone" class=" full-row" style="margin-top: 1.5rem;"></wa-input>
<hr class="full-row" />
<wa-radio-group label="Delivery Method" help-text="Select an option that makes you proud." name="a" value="1" class="full-row" style="margin-top: 1.5rem;">
<wa-radio-group label="Delivery Method" hint="Select an option that makes you proud." name="a" value="1" class="full-row" style="margin-top: 1.5rem;">
<wa-radio-button value="1">Standard</wa-radio-button>
<wa-radio-button value="2">Express</wa-radio-button>
</wa-radio-group>

4
docs/docs/theming/focus.md
View File

@@ -19,7 +19,7 @@ See your theme's focus ring in action by navigating this form example with your
```html {.example}
<form class="wa-block-spacing-m">
<wa-input label="Text Input">
<span slot="help-text">Press <kbd>Tab</kbd> to move focus to other interactive elements.</span>
<span slot="hint">Press <kbd>Tab</kbd> to move focus to other interactive elements.</span>
</wa-input>
<wa-checkbox>Checkbox</wa-checkbox>
<wa-button>Button</wa-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);
}
</style>
```
```

2
src/components/checkbox/checkbox.test.ts
View File

@@ -28,7 +28,7 @@ describe('<wa-checkbox>', () => {
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 () => {

30
src/components/checkbox/checkbox.ts
View File

@@ -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 `<wa-icon>` element.
* @csspart indeterminate-icon - The indeterminate icon, a `<wa-icon>` 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
})}
>
<label
part="base"
part="label"
class=${classMap({
checkbox: true,
'checkbox--checked': this.checked,
@@ -263,7 +263,7 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
.disabled=${this.disabled}
.required=${this.required}
aria-checked=${this.checked ? 'true' : 'false'}
aria-describedby="help-text"
aria-describedby="hint"
@click=${this.handleClick}
@input=${this.handleInput}
@blur=${this.handleBlur}
@@ -285,11 +285,11 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
<div
aria-hidden=${hasHelpText ? 'false' : 'true'}
class="form-control__help-text"
id="help-text"
part="form-control-help-text"
class="form-control__hint"
id="hint"
part="form-control-hint"
>
<slot name="help-text">${this.helpText}</slot>
<slot name="hint">${this.hint}</slot>
</div>
</div>
`;

22
src/components/color-picker/color-picker.ts
View File

@@ -51,7 +51,7 @@ declare const EyeDropper: EyeDropperConstructor;
* @dependency wa-visually-hidden
*
* @slot label - The color picker's form label. Alternatively, you can use the `label` attribute.
* @slot help-text - The color picker's form help text. Alternatively, you can use the `helpText` attribute.
* @slot hint - The color picker's form hint. Alternatively, you can use the `hint` attribute.
*
* @event wa-blur - Emitted when the color picker loses focus.
* @event wa-change - Emitted when the color picker's value changes.
@@ -114,7 +114,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
return [...super.validators, ...validators];
}
private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
private readonly hasSlotController = new HasSlotController(this, 'hint', 'label');
private isSafeValue = false;
private readonly localize = new LocalizeController(this);
@@ -180,7 +180,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
@property({ attribute: 'value', reflect: true }) defaultValue: null | string = this.getAttribute('value') || null;
@property({ attribute: 'with-label', reflect: true, type: Boolean }) withLabel = false;
@property({ attribute: 'with-help-text', reflect: true, type: Boolean }) withHelpText = false;
@property({ attribute: 'with-hint', reflect: true, type: Boolean }) withHelpText = false;
@state() private hasEyeDropper: boolean = false;
@@ -191,9 +191,9 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
@property() label = '';
/**
* The color picker's help text. If you need to display HTML, use the `help-text` slot instead.
* The color picker's hint. If you need to display HTML, use the `hint` slot instead.
*/
@property({ attribute: 'help-text' }) helpText = '';
@property({ attribute: 'hint' }) hint = '';
/**
* The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color
@@ -873,9 +873,9 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
const hasLabelSlot = !this.hasUpdated ? this.withLabel : this.withLabel || this.hasSlotController.test('label');
const hasHelpTextSlot = !this.hasUpdated
? this.withHelpText
: this.withHelpText || this.hasSlotController.test('help-text');
: this.withHelpText || this.hasSlotController.test('hint');
const hasLabel = this.label ? true : !!hasLabelSlot;
const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
const hasHelpText = this.hint ? true : !!hasHelpTextSlot;
const gridHandleX = this.saturation;
const gridHandleY = 100 - this.brightness;
@@ -1121,7 +1121,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
'form-control--medium': this.size === 'medium',
'form-control--large': this.size === 'large',
'form-control--has-label': hasLabel,
'form-control--has-help-text': hasHelpText
'form-control--has-hint': hasHelpText
})}
part="trigger-container form-control"
slot="trigger"
@@ -1167,11 +1167,11 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
})}
type="button"
aria-labelledby="form-control-label"
aria-describedby="help-text"
aria-describedby="hint"
></button>
<div part="form-control-help-text" id="help-text" class="form-control__help-text">
<slot name="help-text">${this.helpText}</slot>
<div part="form-control-hint" id="hint" class="form-control__hint">
<slot name="hint">${this.hint}</slot>
</div>
</div>
${colorPicker}

2
src/components/input/input.test.ts
View File

@@ -31,7 +31,7 @@ describe('<wa-input>', () => {
expect(el.filled).to.be.false;
expect(el.pill).to.be.false;
expect(el.label).to.equal('');
expect(el.helpText).to.equal('');
expect(el.hint).to.equal('');
expect(el.clearable).to.be.false;
expect(el.passwordToggle).to.be.false;
expect(el.passwordVisible).to.be.false;

32
src/components/input/input.ts
View File

@@ -32,7 +32,7 @@ import type WaButton from '../button/button.js';
* @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 - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
* @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
*
* @event wa-blur - Emitted when the control loses focus.
* @event wa-change - Emitted when an alteration to the control's value is committed by the user.
@@ -41,10 +41,10 @@ import type WaButton from '../button/button.js';
* @event wa-input - Emitted when the control receives input.
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
*
* @csspart form-control - The form control that wraps the label, input, and help text.
* @csspart form-control - The form control that wraps the label, input, and hint.
* @csspart form-control-label - The label's wrapper.
* @csspart form-control-input - The input's wrapper.
* @csspart form-control-help-text - The help text's wrapper.
* @csspart form-control-hint - The hint's wrapper.
* @csspart base - The component's base wrapper.
* @csspart input - The internal `<input>` control.
* @csspart prefix - The container that wraps the prefix.
@@ -70,7 +70,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
}
assumeInteractionOn = ['wa-blur', 'wa-input'];
private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
private readonly hasSlotController = new HasSlotController(this, 'hint', 'label');
private readonly localize = new LocalizeController(this);
@query('.input__control') input: HTMLInputElement;
@@ -130,8 +130,8 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
/** The input's label. If you need to display HTML, use the `label` slot instead. */
@property() label = '';
/** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
@property({ attribute: 'help-text' }) helpText = '';
/** The input's hint. If you need to display HTML, use the `hint` slot instead. */
@property({ attribute: 'hint' }) hint = '';
/** Adds a clear button when the input is not empty. */
@property({ type: Boolean }) clearable = false;
@@ -223,9 +223,9 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
@property({ attribute: 'with-label', type: Boolean }) withLabel = false;
/**
* Used for SSR. Will determine if the SSRed component will have the help text slot rendered on initial paint.
* Used for SSR. Will determine if the SSRed component will have the hint slot rendered on initial paint.
*/
@property({ attribute: 'with-help-text', type: Boolean }) withHelpText = false;
@property({ attribute: 'with-hint', type: Boolean }) withHelpText = false;
private handleBlur() {
this.hasFocus = false;
@@ -392,9 +392,9 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
render() {
const hasLabelSlot = this.hasUpdated ? this.hasSlotController.test('label') : this.withLabel;
const hasHelpTextSlot = this.hasUpdated ? this.hasSlotController.test('help-text') : this.withHelpText;
const hasHelpTextSlot = this.hasUpdated ? this.hasSlotController.test('hint') : this.withHelpText;
const hasLabel = this.label ? true : !!hasLabelSlot;
const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
const hasHelpText = this.hint ? true : !!hasHelpTextSlot;
const hasClearIcon = this.clearable && !this.disabled && !this.readonly;
const isClearIconVisible =
// prevents hydration mismatch errors.
@@ -411,7 +411,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
'form-control--medium': this.size === 'medium',
'form-control--large': this.size === 'large',
'form-control--has-label': hasLabel,
'form-control--has-help-text': hasHelpText
'form-control--has-hint': hasHelpText
})}
>
<label
@@ -473,7 +473,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
pattern=${ifDefined(this.pattern)}
enterkeyhint=${ifDefined(this.enterkeyhint)}
inputmode=${ifDefined(this.inputmode)}
aria-describedby="help-text"
aria-describedby="hint"
@change=${this.handleChange}
@input=${this.handleInput}
@keydown=${this.handleKeyDown}
@@ -529,12 +529,12 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
</div>
<div
part="form-control-help-text"
id="help-text"
class="form-control__help-text"
part="form-control-hint"
id="hint"
class="form-control__hint"
aria-hidden=${hasHelpText ? 'false' : 'true'}
>
<slot name="help-text">${this.helpText}</slot>
<slot name="hint">${this.hint}</slot>
</div>
</div>
`;

32
src/components/radio-group/radio-group.ts
View File

@@ -26,16 +26,16 @@ import type WaRadioButton from '../radio-button/radio-button.js';
* @slot - The default slot where `<wa-radio>` or `<wa-radio-button>` elements are placed.
* @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`
* attribute.
* @slot help-text - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.
* @slot hint - Text that describes how to use the radio group. Alternatively, you can use the `hint` attribute.
*
* @event wa-change - Emitted when the radio group's selected value changes.
* @event wa-input - Emitted when the radio group receives user input.
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
*
* @csspart form-control - The form control that wraps the label, input, and help text.
* @csspart form-control - The form control that wraps the label, input, and hint.
* @csspart form-control-label - The label's wrapper.
* @csspart form-control-input - The input's wrapper.
* @csspart form-control-help-text - The help text's wrapper.
* @csspart form-control-hint - The hint's wrapper.
* @csspart button-group - The button group that wraps radio buttons.
* @csspart button-group__base - The button group's `base` part.
*/
@@ -59,7 +59,7 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
return [...super.validators, ...validators];
}
private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
private readonly hasSlotController = new HasSlotController(this, 'hint', 'label');
@query('slot:not([name])') defaultSlot: HTMLSlotElement;
@@ -71,8 +71,8 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
*/
@property() label = '';
/** The radio groups's help text. If you need to display HTML, use the `help-text` slot instead. */
@property({ attribute: 'help-text' }) helpText = '';
/** The radio groups's hint. If you need to display HTML, use the `hint` slot instead. */
@property({ attribute: 'hint' }) hint = '';
/** The name of the radio group, submitted as a name/value pair with form data. */
@property({ reflect: true }) name: string | null = null;
@@ -113,9 +113,9 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
@property({ type: Boolean, attribute: 'with-label' }) withLabel = false;
/**
* Used for SSR. if true, will show slotted help text on initial render.
* Used for SSR. if true, will show slotted hint on initial render.
*/
@property({ type: Boolean, attribute: 'with-help-text' }) withHelpText = false;
@property({ type: Boolean, attribute: 'with-hint' }) withHelpText = false;
//
// We need this because if we don't have it, FormValidation yells at us that it's "not focusable".
@@ -311,9 +311,9 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
render() {
const hasLabelSlot = this.hasUpdated ? this.hasSlotController.test('label') : this.withLabel;
const hasHelpTextSlot = this.hasUpdated ? this.hasSlotController.test('help-text') : this.withHelpText;
const hasHelpTextSlot = this.hasUpdated ? this.hasSlotController.test('hint') : this.withHelpText;
const hasLabel = this.label ? true : !!hasLabelSlot;
const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
const hasHelpText = this.hint ? true : !!hasHelpTextSlot;
const defaultSlot = html` <slot @slotchange=${this.syncRadioElements}></slot> `;
return html`
@@ -326,11 +326,11 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
'form-control--large': this.size === 'large',
'form-control--radio-group': true,
'form-control--has-label': hasLabel,
'form-control--has-help-text': hasHelpText
'form-control--has-hint': hasHelpText
})}
role="radiogroup"
aria-labelledby="label"
aria-describedby="help-text"
aria-describedby="hint"
aria-errormessage="error-message"
>
<label
@@ -354,12 +354,12 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
</div>
<div
part="form-control-help-text"
id="help-text"
class="form-control__help-text"
part="form-control-hint"
id="hint"
class="form-control__hint"
aria-hidden=${hasHelpText ? 'false' : 'true'}
>
<slot name="help-text">${this.helpText}</slot>
<slot name="hint">${this.hint}</slot>
</div>
</fieldset>
`;

2
src/components/range/range.test.ts
View File

@@ -25,7 +25,7 @@ describe('<wa-range>', () => {
expect(el.value).to.equal(0);
expect(el.title).to.equal('');
expect(el.label).to.equal('');
expect(el.helpText).to.equal('');
expect(el.hint).to.equal('');
expect(el.disabled).to.be.false;
expect(el.checkValidity()).to.be.true;
expect(el.min).to.equal(0);

32
src/components/range/range.ts
View File

@@ -22,7 +22,7 @@ import styles from './range.css';
* @since 2.0
*
* @slot label - The range's label. Alternatively, you can use the `label` attribute.
* @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
* @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
*
* @event wa-blur - Emitted when the control loses focus.
* @event wa-change - Emitted when an alteration to the control's value is committed by the user.
@@ -30,10 +30,10 @@ import styles from './range.css';
* @event wa-input - Emitted when the control receives input.
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
*
* @csspart form-control - The form control that wraps the label, input, and help text.
* @csspart form-control - The form control that wraps the label, input, and hint.
* @csspart form-control-label - The label's wrapper.
* @csspart form-control-input - The range's wrapper.
* @csspart form-control-help-text - The help text's wrapper.
* @csspart form-control-hint - The hint's wrapper.
* @csspart base - The component's base wrapper.
* @csspart input - The internal `<input>` element.
* @csspart tooltip - The range's tooltip.
@@ -56,7 +56,7 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
return [...super.validators, MirrorValidator()];
}
private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
private readonly hasSlotController = new HasSlotController(this, 'hint', 'label');
private readonly localize = new LocalizeController(this);
private resizeObserver: ResizeObserver;
@@ -97,8 +97,8 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
/** The range's label. If you need to display HTML, use the `label` slot instead. */
@property() label = '';
/** The range's help text. If you need to display HTML, use the help-text slot instead. */
@property({ attribute: 'help-text' }) helpText = '';
/** The range's hint. If you need to display HTML, use the hint slot instead. */
@property({ attribute: 'hint' }) hint = '';
/** Disables the range. */
@property({ type: Boolean }) disabled = false;
@@ -134,9 +134,9 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
@property({ attribute: 'with-label', reflect: true, type: Boolean }) withLabel = false;
/**
* Used for SSR to render slotted labels. If true, will render slotted help-text content on first paint.
* Used for SSR to render slotted labels. If true, will render slotted hint content on first paint.
*/
@property({ attribute: 'with-help-text', reflect: true, type: Boolean }) withHelpText = false;
@property({ attribute: 'with-hint', reflect: true, type: Boolean }) withHelpText = false;
connectedCallback() {
super.connectedCallback();
@@ -273,9 +273,9 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
render() {
const hasLabelSlot = this.hasUpdated ? this.hasSlotController.test('label') : this.withLabel;
const hasHelpTextSlot = this.hasUpdated ? this.hasSlotController.test('help-text') : this.withHelpText;
const hasHelpTextSlot = this.hasUpdated ? this.hasSlotController.test('hint') : this.withHelpText;
const hasLabel = this.label ? true : !!hasLabelSlot;
const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
const hasHelpText = this.hint ? true : !!hasHelpTextSlot;
// NOTE - always bind value after min/max, otherwise it will be clamped
return html`
@@ -285,7 +285,7 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
'form-control': true,
'form-control--medium': true, // range only has one size
'form-control--has-label': hasLabel,
'form-control--has-help-text': hasHelpText
'form-control--has-hint': hasHelpText
})}
>
<label
@@ -326,7 +326,7 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
max=${ifDefined(this.max)}
step=${ifDefined(this.step)}
.value=${live(this.value.toString())}
aria-describedby="help-text"
aria-describedby="hint"
@change=${this.handleChange}
@focus=${this.handleFocus}
@input=${this.handleInput}
@@ -343,12 +343,12 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
</div>
<div
part="form-control-help-text"
id="help-text"
class="form-control__help-text"
part="form-control-hint"
id="hint"
class="form-control__hint"
aria-hidden=${hasHelpText ? 'false' : 'true'}
>
<slot name="help-text">${this.helpText}</slot>
<slot name="hint">${this.hint}</slot>
</div>
</div>
`;

32
src/components/select/select.ts
View File

@@ -45,7 +45,7 @@ import type WaPopup from '../popup/popup.js';
* @slot suffix - Used to append a presentational icon or similar element to the combobox.
* @slot clear-icon - An icon to use in lieu of the default clear icon.
* @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
* @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
* @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
*
* @event wa-change - Emitted when the control's value changes.
* @event wa-clear - Emitted when the control's value is cleared.
@@ -58,10 +58,10 @@ import type WaPopup from '../popup/popup.js';
* @event wa-after-hide - Emitted after the select's menu closes and all animations are complete.
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
*
* @csspart form-control - The form control that wraps the label, input, and help text.
* @csspart form-control - The form control that wraps the label, input, and hint.
* @csspart form-control-label - The label's wrapper.
* @csspart form-control-input - The select's wrapper.
* @csspart form-control-help-text - The help text's wrapper.
* @csspart form-control-hint - The hint's wrapper.
* @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
* @csspart prefix - The container that wraps the prefix slot.
* @csspart suffix - The container that wraps the suffix slot.
@@ -100,7 +100,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
assumeInteractionOn = ['wa-blur', 'wa-input'];
private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
private readonly hasSlotController = new HasSlotController(this, 'hint', 'label');
private readonly localize = new LocalizeController(this);
private typeToSelectString = '';
private typeToSelectTimeout: number;
@@ -211,8 +211,8 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
*/
@property({ reflect: true }) placement: 'top' | 'bottom' = 'bottom';
/** The select's help text. If you need to display HTML, use the `help-text` slot instead. */
@property({ attribute: 'help-text' }) helpText = '';
/** The select's hint. If you need to display HTML, use the `hint` slot instead. */
@property({ attribute: 'hint' }) hint = '';
/**
* Used for SSR purposes when a label is slotted in. Will show the label on first render.
@@ -220,9 +220,9 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
@property({ attribute: 'with-label', type: Boolean }) withLabel = false;
/**
* Used for SSR purposes when help-text is slotted in. Will show the help-text on first render.
* Used for SSR purposes when hint is slotted in. Will show the hint on first render.
*/
@property({ attribute: 'with-help-text', type: Boolean }) withHelpText = false;
@property({ attribute: 'with-hint', type: Boolean }) withHelpText = false;
/**
* By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
@@ -783,9 +783,9 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
render() {
const hasLabelSlot = this.hasUpdated ? this.hasSlotController.test('label') : this.withLabel;
const hasHelpTextSlot = this.hasUpdated ? this.hasSlotController.test('help-text') : this.withHelpText;
const hasHelpTextSlot = this.hasUpdated ? this.hasSlotController.test('hint') : this.withHelpText;
const hasLabel = this.label ? true : !!hasLabelSlot;
const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
const hasHelpText = this.hint ? true : !!hasHelpTextSlot;
const hasClearIcon =
(this.hasUpdated || isServer) && this.clearable && !this.disabled && this.value && this.value.length > 0;
const isPlaceholderVisible = Boolean(this.placeholder && (!this.value || this.value.length === 0));
@@ -799,7 +799,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
'form-control--medium': this.size === 'medium',
'form-control--large': this.size === 'large',
'form-control--has-label': hasLabel,
'form-control--has-help-text': hasHelpText
'form-control--has-hint': hasHelpText
})}
>
<label
@@ -868,7 +868,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
aria-haspopup="listbox"
aria-labelledby="label"
aria-disabled=${this.disabled ? 'true' : 'false'}
aria-describedby="help-text"
aria-describedby="hint"
role="combobox"
tabindex="0"
@focus=${this.handleFocus}
@@ -932,12 +932,12 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
</div>
<div
part="form-control-help-text"
id="help-text"
class="form-control__help-text"
part="form-control-hint"
id="hint"
class="form-control__hint"
aria-hidden=${hasHelpText ? 'false' : 'true'}
>
<slot name="help-text">${this.helpText}</slot>
<slot name="hint">${this.hint}</slot>
</div>
</div>
`;

2
src/components/switch/switch.test.ts
View File

@@ -26,7 +26,7 @@ describe('<wa-switch>', () => {
expect(el.required).to.be.false;
expect(el.checked).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 () => {

30
src/components/switch/switch.ts
View File

@@ -22,7 +22,7 @@ import type { PropertyValues } from 'lit';
* @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.
* @slot hint - Text that describes how to use the switch. Alternatively, you can use the `hint` attribute.
*
* @event wa-blur - Emitted when the control loses focus.
* @event wa-change - Emitted when the control's checked state changes.
@@ -34,7 +34,7 @@ import type { PropertyValues } from 'lit';
* @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.
* @csspart form-control-hint - The hint's wrapper.
*
* @cssproperty --background-color - The switch's background color.
* @cssproperty --background-color-checked - The switch's background color when checked.
@@ -58,7 +58,7 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
return [...super.validators, MirrorValidator()];
}
private readonly hasSlotController = new HasSlotController(this, 'help-text');
private readonly hasSlotController = new HasSlotController(this, 'hint');
@query('input[type="checkbox"]') input: HTMLInputElement;
@@ -114,13 +114,13 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
/** 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 = '';
/** The switch's hint. If you need to display HTML, use the `hint` slot instead. */
@property({ attribute: 'hint' }) hint = '';
/**
* Used for SSR. If you slot in help-text, make sure to add `with-help-text` to your component to get it to properly render with SSR.
* Used for SSR. If you slot in hint, make sure to add `with-hint` to your component to get it to properly render with SSR.
*/
@property({ attribute: 'with-help-text', type: Boolean }) withHelpText = false;
@property({ attribute: 'with-hint', type: Boolean }) withHelpText = false;
firstUpdated(changedProperties: PropertyValues<typeof this>) {
super.firstUpdated(changedProperties);
@@ -233,8 +233,8 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
}
render() {
const hasHelpTextSlot = this.hasUpdated ? this.hasSlotController.test('help-text') : this.withHelpText;
const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
const hasHelpTextSlot = this.hasUpdated ? this.hasSlotController.test('hint') : this.withHelpText;
const hasHelpText = this.hint ? true : !!hasHelpTextSlot;
return html`
<div
@@ -243,7 +243,7 @@ export default class WaSwitch 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
})}
>
<label
@@ -269,7 +269,7 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
.required=${this.required}
role="switch"
aria-checked=${this.checked ? 'true' : 'false'}
aria-describedby="help-text"
aria-describedby="hint"
@click=${this.handleClick}
@input=${this.handleInput}
@blur=${this.handleBlur}
@@ -288,11 +288,11 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
<div
aria-hidden=${hasHelpText ? 'false' : 'true'}
class="form-control__help-text"
id="help-text"
part="form-control-help-text"
class="form-control__hint"
id="hint"
part="form-control-hint"
>
<slot name="help-text">${this.helpText}</slot>
<slot name="hint">${this.hint}</slot>
</div>
</div>
`;

2
src/components/textarea/textarea.test.ts
View File

@@ -27,7 +27,7 @@ describe('<wa-textarea>', () => {
expect(el.title).to.equal('');
expect(el.filled).to.be.false;
expect(el.label).to.equal('');
expect(el.helpText).to.equal('');
expect(el.hint).to.equal('');
expect(el.placeholder).to.equal('');
expect(el.rows).to.equal(4);
expect(el.resize).to.equal('vertical');

32
src/components/textarea/textarea.ts
View File

@@ -21,7 +21,7 @@ import styles from './textarea.css';
* @since 2.0
*
* @slot label - The textarea's label. Alternatively, you can use the `label` attribute.
* @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
* @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
*
* @event wa-blur - Emitted when the control loses focus.
* @event wa-change - Emitted when an alteration to the control's value is committed by the user.
@@ -29,10 +29,10 @@ import styles from './textarea.css';
* @event wa-input - Emitted when the control receives input.
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
*
* @csspart form-control - The form control that wraps the label, input, and help text.
* @csspart form-control - The form control that wraps the label, input, and hint.
* @csspart form-control-label - The label's wrapper.
* @csspart form-control-input - The input's wrapper.
* @csspart form-control-help-text - The help text's wrapper.
* @csspart form-control-hint - The hint's wrapper.
* @csspart base - The component's base wrapper.
* @csspart textarea - The internal `<textarea>` control.
*
@@ -51,7 +51,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
}
assumeInteractionOn = ['wa-blur', 'wa-input'];
private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
private readonly hasSlotController = new HasSlotController(this, 'hint', 'label');
private resizeObserver: ResizeObserver;
@query('.textarea__control') input: HTMLTextAreaElement;
@@ -96,8 +96,8 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
/** The textarea's label. If you need to display HTML, use the `label` slot instead. */
@property() label = '';
/** The textarea's help text. If you need to display HTML, use the `help-text` slot instead. */
@property({ attribute: 'help-text' }) helpText = '';
/** The textarea's hint. If you need to display HTML, use the `hint` slot instead. */
@property({ attribute: 'hint' }) hint = '';
/** Placeholder text to show as a hint when the input is empty. */
@property() placeholder = '';
@@ -171,9 +171,9 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
@property({ attribute: 'with-label', type: Boolean }) withLabel = false;
/**
* Used for SSR. If you're slotting in a `help-text` element, make sure to set this to `true`.
* Used for SSR. If you're slotting in a `hint` element, make sure to set this to `true`.
*/
@property({ attribute: 'with-help-text', type: Boolean }) withHelpText = false;
@property({ attribute: 'with-hint', type: Boolean }) withHelpText = false;
connectedCallback() {
super.connectedCallback();
@@ -309,9 +309,9 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
render() {
const hasLabelSlot = this.hasUpdated ? this.hasSlotController.test('label') : this.withLabel;
const hasHelpTextSlot = this.hasUpdated ? this.hasSlotController.test('help-text') : this.withHelpText;
const hasHelpTextSlot = this.hasUpdated ? this.hasSlotController.test('hint') : this.withHelpText;
const hasLabel = this.label ? true : !!hasLabelSlot;
const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
const hasHelpText = this.hint ? true : !!hasHelpTextSlot;
return html`
<div
@@ -322,7 +322,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
'form-control--medium': this.size === 'medium',
'form-control--large': this.size === 'large',
'form-control--has-label': hasLabel,
'form-control--has-help-text': hasHelpText
'form-control--has-hint': hasHelpText
})}
>
<label
@@ -372,7 +372,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
spellcheck=${ifDefined(this.spellcheck)}
enterkeyhint=${ifDefined(this.enterkeyhint)}
inputmode=${ifDefined(this.inputmode)}
aria-describedby="help-text"
aria-describedby="hint"
@change=${this.handleChange}
@input=${this.handleInput}
@focus=${this.handleFocus}
@@ -385,12 +385,12 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
</div>
<div
part="form-control-help-text"
id="help-text"
class="form-control__help-text"
part="form-control-hint"
id="hint"
class="form-control__hint"
aria-hidden=${hasHelpText ? 'false' : 'true'}
>
<slot name="help-text">${this.helpText}</slot>
<slot name="hint">${this.hint}</slot>
</div>
</div>
`;

12
src/styles/shadow/form-control.css
View File

@@ -2,7 +2,7 @@
display: none;
}
.form-control .form-control__help-text {
.form-control .form-control__hint {
display: none;
}
@@ -34,24 +34,24 @@
}
/* Help text */
.form-control--has-help-text .form-control__help-text {
.form-control--has-hint .form-control__hint {
display: block;
color: var(--wa-color-text-quiet);
margin-top: var(--wa-space-3xs);
}
.form-control--has-help-text.form-control--small .form-control__help-text {
.form-control--has-hint.form-control--small .form-control__hint {
font-size: var(--wa-font-size-xs);
}
.form-control--has-help-text.form-control--medium .form-control__help-text {
.form-control--has-hint.form-control--medium .form-control__hint {
font-size: var(--wa-font-size-s);
}
.form-control--has-help-text.form-control--large .form-control__help-text {
.form-control--has-hint.form-control--large .form-control__hint {
font-size: var(--wa-font-size-m);
}
.form-control--has-help-text.form-control--radio-group .form-control__help-text {
.form-control--has-hint.form-control--radio-group .form-control__hint {
margin-top: var(--wa-space-2xs);
}