Add label attribute to option & menu-item (#704)

* Add `label` attribute and `defaultLabel` getter to option and menu-item, drop `getTextLabel()`

- Add `label` attribute to option and menu-item, closes #698
- [Option] Add `defaultLabel` cached property to both
- [Option] Remove `getTextLabel()` method from both (people can just set `el.label`)
- Refactor: Merge utils to get text content into one more powerful utility function
- Fixed typo in `slot.ts`

.

Add `label` attribute to menu, remove `getTextLabel`

* Update filename
This commit is contained in:
Lea Verou
2025-02-06 10:58:09 -05:00
committed by GitHub
parent 3394a95057
commit f1fa7f713e
8 changed files with 195 additions and 87 deletions

View File

@@ -130,6 +130,15 @@ Note that multi-select options may wrap, causing the control to expand verticall
Use the `value` attribute to set the initial selection.
```html {.example}
<wa-select value="option-1">
<wa-option value="option-1">Option 1</wa-option>
<wa-option value="option-2">Option 2</wa-option>
<wa-option value="option-3">Option 3</wa-option>
<wa-option value="option-4">Option 4</wa-option>
</wa-select>
```
When using `multiple`, the `value` _attribute_ uses space-delimited values to select more than one option. Because of this, `<wa-option>` values cannot contain spaces. If you're accessing the `value` _property_ through Javascript, it will be an array.
```html {.example}
@@ -294,7 +303,7 @@ Remember that custom tags are rendered in a shadow root. To style them, you can
return `
<wa-tag removable>
<wa-icon name="${name}" style="padding-inline-end: .5rem;"></wa-icon>
${option.getTextLabel()}
${option.label}
</wa-tag>
`;
};