Document listboxOverflow Select prop

src/components/input/Select.tsx

@@ -446,24 +446,13 @@ type BaseSelectProps = CompositeProps & {
   /**
    * Indicates how overflowing content should be handled in the listbox.
    *
-<<<<<<< HEAD
    * - `truncate`: Truncate the options via `text-overflow: ellipsis`, so that
    *               they all fit in one line. This is the default value.
    * - `wrap`: Let options content wrap onto multiple lines via
    *           `white-space: normal`
    *
    * Complex content may still need to provide its own styling to handle content
    * overflow.
-=======
-   * - `truncate`: Truncate the options so that they all fit in one line. An
-   *               ellipsis will be rendered where needed.
-   *               This is the default value.
-   * - `wrap`: Let options content wrap multiple lines so that all content is
-   *           visible.
-   *
-   * This behavior can be also overwritten by providing more complex options
-   * content.
->>>>>>> 51ceff5 (Prevent Select listbox to grow out of viewport)
    */
   listboxOverflow?: ListboxOverflow;
 };

src/pattern-library/components/patterns/prototype/SelectPage.tsx

@@ -387,6 +387,33 @@ export default function SelectPage() {
               </div>
             </Library.Demo>
           </Library.Example>
+          <Library.Example title="listboxAsPopover">
+            <Library.Info>
+              <Library.InfoItem label="description">
+                Determines if the listbox should be rendered using the{' '}
+                <Link
+                  target="_blank"
+                  href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API"
+                >
+                  popover API
+                </Link>
+                . It{"'"}s mainly used as a test seam, but can help explicitly
+                disabling this behavior if needed.
+              </Library.InfoItem>
+              <Library.InfoItem label="type">
+                <code>boolean</code>
+              </Library.InfoItem>
+              <Library.InfoItem label="default">
+                <code>true</code> if the browser supports <code>[popover]</code>
+                . Otherwise it is <code>false</code>
+              </Library.InfoItem>
+            </Library.Info>
+            <Library.Demo
+              title="Non-popover listbox"
+              exampleFile="select-non-popover-listbox"
+              withSource
+            />
+          </Library.Example>
           <Library.Example title="listboxClasses">
             <Library.Info>
               <Library.InfoItem label="description">
@@ -405,30 +432,37 @@ export default function SelectPage() {
               </div>
             </Library.Demo>
           </Library.Example>
-          <Library.Example title="listboxAsPopover">
+          <Library.Example title="listboxOverflow">
             <Library.Info>
               <Library.InfoItem label="description">
-                Determines if the listbox should be rendered using the{' '}
-                <Link
-                  target="_blank"
-                  href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API"
-                >
-                  popover API
-                </Link>
-                . It{"'"}s mainly used as a test seam, but can help explicitly
-                disabling this behavior if needed.
+                Determines the behavior of the listbox options when their
+                content is larger than the listbox.
+                <ul className="list-disc">
+                  <li>
+                    <code>{"'truncate'"}</code>: Text will use one line and be
+                    truncated with an ellipsis.
+                  </li>
+                  <li>
+                    <code>{"'wrap'"}</code>: Text will span multiple lines if
+                    needed, ensuring all content is visible.
+                  </li>
+                </ul>
               </Library.InfoItem>
               <Library.InfoItem label="type">
-                <code>boolean</code>
+                <code>{"'truncate' | 'wrap'"}</code>
               </Library.InfoItem>
               <Library.InfoItem label="default">
-                <code>true</code> if the browser supports <code>[popover]</code>
-                . Otherwise it is <code>false</code>
+                <code>{"'truncate'"}</code>
               </Library.InfoItem>
             </Library.Info>
             <Library.Demo
-              title="Non-popover listbox"
-              exampleFile="select-non-popover-listbox"
+              title="Truncate listbox options"
+              exampleFile="select-truncate-listbox"
+              withSource
+            />
+            <Library.Demo
+              title="Wrap listbox options"
+              exampleFile="select-wrap-listbox"
               withSource
             />
           </Library.Example>

src/pattern-library/examples/select-truncate-listbox.tsx

@@ -0,0 +1,51 @@
+import { useId, useState } from 'preact/hooks';
+
+import { Select } from '../..';
+
+const items = [
+  {
+    id: '1',
+    name: 'All students - content is very long and will not fit the listbox',
+  },
+  {
+    id: '2',
+    name: 'Albert Banana - content is very long and will not fit the listbox',
+  },
+  {
+    id: '3',
+    name: 'Bernard California - content is very long and will not fit the listbox',
+  },
+  {
+    id: '4',
+    name: 'Cecelia Davenport - content is very long and will not fit the listbox',
+  },
+  {
+    id: '5',
+    name: 'Doris Evanescence - content is very long and will not fit the listbox',
+  },
+];
+
+export default function App() {
+  const [value, setSelected] = useState<{ id: string; name: string }>();
+  const selectId = useId();
+
+  return (
+    <div className="w-96 mx-auto">
+      <label htmlFor={selectId}>Select a person</label>
+      <Select
+        value={value}
+        onChange={newValue => setSelected(newValue)}
+        buttonId={selectId}
+        buttonContent={value ? value.name : <>Select one…</>}
+        listboxClasses="w-36"
+        listboxOverflow="truncate"
+      >
+        {items.map(item => (
+          <Select.Option value={item} key={item.id}>
+            {item.name}
+          </Select.Option>
+        ))}
+      </Select>
+    </div>
+  );
+}

src/pattern-library/examples/select-wrap-listbox.tsx

@@ -0,0 +1,51 @@
+import { useId, useState } from 'preact/hooks';
+
+import { Select } from '../..';
+
+const items = [
+  {
+    id: '1',
+    name: 'All students - content is very long and will not fit the listbox',
+  },
+  {
+    id: '2',
+    name: 'Albert Banana - content is very long and will not fit the listbox',
+  },
+  {
+    id: '3',
+    name: 'Bernard California - content is very long and will not fit the listbox',
+  },
+  {
+    id: '4',
+    name: 'Cecelia Davenport - content is very long and will not fit the listbox',
+  },
+  {
+    id: '5',
+    name: 'Doris Evanescence - content is very long and will not fit the listbox',
+  },
+];
+
+export default function App() {
+  const [value, setSelected] = useState<{ id: string; name: string }>();
+  const selectId = useId();
+
+  return (
+    <div className="w-96 mx-auto">
+      <label htmlFor={selectId}>Select a person</label>
+      <Select
+        value={value}
+        onChange={newValue => setSelected(newValue)}
+        buttonId={selectId}
+        buttonContent={value ? value.name : <>Select one…</>}
+        listboxClasses="w-36"
+        listboxOverflow="wrap"
+      >
+        {items.map(item => (
+          <Select.Option value={item} key={item.id}>
+            {item.name}
+          </Select.Option>
+        ))}
+      </Select>
+    </div>
+  );
+}