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

Improve usecases in selectlist explainer #918

Merged
merged 3 commits into from
Nov 10, 2023
Merged

Improve usecases in selectlist explainer #918

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1659c93
Improve usecases in selectlist explainer
josepharhar Oct 30, 2023
2bd16ef
go back to country flags
josepharhar Nov 6, 2023
99c0fb5
switch to optgroups
josepharhar Nov 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
Binary file added site/public/images/selectlist-animation.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified site/public/images/selectlist-usecase-listbox.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified site/public/images/selectlist-usecase-rich.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions site/src/layouts/ComponentLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const { name, pathToProposal, pathToResearch } = frontmatter

:global(.code-image-container img) {
height: 100%;
object-fit: contain;
}

@media (max-width: 800px) {
Expand Down
71 changes: 55 additions & 16 deletions site/src/pages/components/selectlist.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,23 +70,23 @@ selectlist::button {

### Rich content in `<option>`s

This example adds "rich content" inside option elements in the form of country flags. This is a common pattern on the web which isn't possible in the existing `<select>` element because `<select>`'s `<option>`s only render text content.
This example adds "rich content" inside option elements in the form of images next to the options. This is a common pattern on the web which isn't possible in the existing `<select>` element because `<select>`'s `<option>`s only render text content.

<div className="code-image-container">
<div>
```html
<selectlist>
<option>
<img src="usa.jpg">
USA
<img src="swallow.jpg">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do these new images exist in the repo? I don't see them but maybe I missed it.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't forget alt="" or alt

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I switched back to country flags and added alt text.
The images don't exist in the repo, but they don't need to because they aren't actually downloaded or rendered anywhere on the website - the only exist in the demo which I made locally just to create the adjacent screenshot.

Swallow
</option>
<option>
<img src="germany.jpg">
Germany
<img src="raven.jpg">
Raven
</option>
<option>
<img src="spain.jpg">
Spain
<img src="wasp.jpg">
Wasp
</option>
</selectlist>
```
Expand Down Expand Up @@ -165,18 +165,40 @@ This example has a `<listbox>` which enables it to put arbitrary content into th
```html
<selectlist>
<listbox>
<div>Heading</div>
<div>First two options:</div>
<option>one</option>
<option>two</option>
<div>Second two options:</div>
<option>three</option>
<option>four</option>
<div class=container>
<div>
<div role=group>1-2</div>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this a "good" example? I would think we should use <optgroup> instead of a handful of divs with "role=group", no?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like using optgroup here would just be asking for people to say that <select> can already handle this use case.
<optgroup> has a user agent shadowroot and assigns the actual text with role=group from an attribute, which is not very robust, and <selectlist> doesn't have that limitation since youre allowed to put <div role=group>s in it.

But yeah this example does not actually do anything that optgroup can't do...

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I definitely think an example using <optgroup> can showcase things the <select> can't do. For example, it can contain a fully-styled <legend> element (per the resolution):

<selectlist>
  <optgroup>
    <legend><img src=cool_group_icon>Fancy group</legend>
    <option>...

<option>one</option>
<option>two</option>
</div>
<div>
<div role=group>3-4</div>
<option>three</option>
<option>four</option>
</div>
<div>
<div role=group>5-6</div>
<option>five</option>
<option>six</option>
</div>
<div>
<div role=group>7-8</div>
<option>seven</option>
<option>eight</option>
</div>
</div>
</listbox>
</selectlist>
<style>
div {
font-weight: bold;
.container {
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
display: grid;
grid-template-rows: auto auto;
grid-template-columns: 50px 50px;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.container > div {
background-color: lightgray;
}
</style>
```
Expand All @@ -189,6 +211,23 @@ div {
</div>
</div>

Here is another example with custom content in the listbox: [codepen](https://codepen.io/una/pen/PoXbgVW)

### Animations

<div className="code-image-container">
<div>
This example uses view transitions to animate the opening and closing of the listbox.
[Link to codepen](https://codepen.io/argyleink/pen/wvYrZEV/ab71f1b613db0487f64ff8c6919b0173)
</div>
<div>
<Image
src="/images/selectlist-animation.gif"
alt="A selectlist with a listbox that animates open and closed"
/>
</div>
</div>

## Testing out the selectlist element

`<selectlist>` is currently implemented behind a flag in [Chromium](https://chromestatus.com/feature/5737365999976448). To use it, enable the **Experimental Web Platform features** flag in about:flags.
Expand Down