Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update SelectAnatomy description of parts #710

Merged
merged 2 commits into from
Apr 8, 2023
Merged

Update SelectAnatomy description of parts #710

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ce08772
Update SelectAnatomy description of parts
josepharhar Apr 6, 2023
4379648
Rephrase SelectAnatomy parts
josepharhar Apr 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions site/src/components/select-anatomy.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const SelectAnatomy = () => {
return (
<AnatomyWrapper>
<Host name="select">
<Slot name="button-container">
<Slot name="button">
<Part name="button">
<Slot name="selected-value">
<Part name="selected-value">Currently selected value</Part>
Expand All @@ -15,11 +15,11 @@ const SelectAnatomy = () => {
</Slot>
</Part>
</Slot>
<Slot name="listbox-container">
<Slot name="listbox">
<Part name="listbox">
<Slot>
<Part name="opt-group">
<Part name="option"></Part>
<Part name="optgroup (optional)">
<Part name="option">Option text</Part>
</Part>
</Slot>
</Part>
Expand Down
12 changes: 6 additions & 6 deletions site/src/pages/components/selectmenu.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,12 @@ Because the various parts of the selectmenu can be styled, it's important to und

<SelectAnatomy />

- `<select>` - The root element that contains the button and listbox.
- `<button>` - The button element that triggers the visibility of the listbox.
- `<selected-value>` - The element that displays the value of the currently selected option (optional). Note that this part does not necessarily have to be places inside the `<button>` part (read on for more information about how to slot your own markup).
- `<marker>` - Something that indicates this button opens a listbox, e.g. an icon.
- `<listbox>` - The wrapper that contains the `<option>`(s) and `<optgroup>`(s).
- `<optgroup>` - Groups `<option>`(s) together with a label (optional).
- `<selectmenu>` - The root element that contains the button and listbox.
- `slot=button` - The button element that triggers the visibility of the listbox. If this part is not provided by the author, then selectmenu will automatically create one.
- `slot=selected-value` - The element that displays the value of the currently selected option. If this part is not provided by the author, then selectmenu will automatically create one. Note that this part does not necessarily have to be placed inside the `slot=button` part (read on for more information about how to slot your own markup).
- `slot=marker` - Something that indicates this button opens a listbox, e.g. an icon. If this part is not provided by the author, then selectmenu will automatically create one.
- `slot=listbox` - The wrapper that contains the `<option>`(s) and `<optgroup>`(s). If this part is not provided by the author, then selectmenu will automatically create one.
- `<optgroup>` - Optional element which groups `<option>`(s) together with a label.
- `<option>` - Can have one or more and represents the potential values that can be chosen by the user.

## Styling selectmenu
Expand Down