Improve usecases in selectlist explainer (#918)

* Improve usecases in selectlist explainer * go back to country flags * switch to optgroups
openui · Nov 10, 2023 · 8897fcd · 8897fcd
1 parent 450a8e7
commit 8897fcd
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 12 deletions.
diff --git a/site/public/images/selectlist-animation.gif b/site/public/images/selectlist-animation.gif
diff --git a/site/public/images/selectlist-usecase-listbox.png b/site/public/images/selectlist-usecase-listbox.png
diff --git a/site/src/layouts/ComponentLayout.astro b/site/src/layouts/ComponentLayout.astro
@@ -24,6 +24,7 @@ const { name, pathToProposal, pathToResearch } = frontmatter
 
   :global(.code-image-container img) {
       height: 100%;
+      object-fit: contain;
   }
 
   @media (max-width: 800px) {

diff --git a/site/src/pages/components/selectlist.mdx b/site/src/pages/components/selectlist.mdx
@@ -77,15 +77,15 @@ This example adds "rich content" inside option elements in the form of country f
 ```html
 <selectlist>
   <option>
-    <img src="usa.jpg">
+    <img src="usa.jpg" alt="flag of USA">
     USA
   </option>
   <option>
-    <img src="germany.jpg">
+    <img src="germany.jpg" alt="flag of Germany">
     Germany
   </option>
   <option>
-    <img src="spain.jpg">
+    <img src="spain.jpg" alt="flag of Spain">
     Spain
   </option>
 </selectlist>
@@ -165,18 +165,44 @@ 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>
+        <optgroup label="1-2">
+          <option>one</option>
+          <option>two</option>
+        </optgroup>
+      </div>
+      <div>
+        <optgroup label="3-4">
+          <option>three</option>
+          <option>four</option>
+        </optgroup>
+      </div>
+      <div>
+        <optgroup label="5-6">
+          <option>five</option>
+          <option>six</option>
+        </optgroup>
+      </div>
+      <div>
+        <optgroup label="7-8">
+          <option>seven</option>
+          <option>eight</option>
+        </optgroup>
+      </div>
+    </div>
   </listbox>
 </selectlist>
 <style>
-div {
-  font-weight: bold;
+.container {
+  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>
 ```
@@ -189,6 +215,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.