update docs with listbox

reach · Mar 6, 2020 · d08ff79 · d08ff79
1 parent 22c04ad
commit d08ff79
Show file tree

Hide file tree

Showing 4 changed files with 699 additions and 112 deletions.
diff --git a/website/src/components/Layout.js b/website/src/components/Layout.js
@@ -22,6 +22,7 @@ import "@reach/combobox/styles.css";
 import "@reach/slider/styles.css";
 import "@reach/checkbox/styles.css";
 import "@reach/accordion/styles.css";
+import "@reach/listbox/styles.css";
 import "../styles/app.scss";
 
 const NavLink = forwardRef(function NavLink({ children, ...props }, ref) {
@@ -225,6 +226,7 @@ function Nav({ media }) {
                 <NavLink to="/combobox">Combobox</NavLink>
                 <NavLink to="/dialog">Dialog (Modal)</NavLink>
                 <NavLink to="/disclosure">Disclosure</NavLink>
+                <NavLink to="/listbox">Listbox</NavLink>
                 <NavLink to="/menu-button">Menu Button</NavLink>
                 <NavLink to="/portal">Portal</NavLink>
                 <NavLink to="/skip-nav">Skip Nav</NavLink>

diff --git a/website/src/components/mdx-layout.js b/website/src/components/mdx-layout.js
@@ -4,37 +4,48 @@ import {
   Accordion,
   AccordionButton,
   AccordionItem,
-  AccordionPanel
+  AccordionPanel,
 } from "@reach/accordion";
 import Alert from "@reach/alert";
 import {
   AlertDialog,
   AlertDialogLabel,
   AlertDialogDescription,
   AlertDialogOverlay,
-  AlertDialogContent
+  AlertDialogContent,
 } from "@reach/alert-dialog";
 import {
   Disclosure,
   DisclosureButton,
-  DisclosurePanel
+  DisclosurePanel,
 } from "@reach/disclosure";
 import { useId } from "@reach/auto-id";
 import {
   CustomCheckbox,
   CustomCheckboxContainer,
   CustomCheckboxInput,
   MixedCheckbox,
-  useMixedCheckbox
+  useMixedCheckbox,
 } from "@reach/checkbox";
 import {
   Combobox,
   ComboboxInput,
   ComboboxPopover,
   ComboboxList,
   ComboboxOption,
-  ComboboxOptionText
+  ComboboxOptionText,
 } from "@reach/combobox";
+import {
+  Listbox,
+  ListboxInput,
+  ListboxButton,
+  ListboxArrow,
+  ListboxPopover,
+  ListboxList,
+  ListboxOption,
+  ListboxGroup,
+  ListboxGroupLabel,
+} from "@reach/listbox";
 import Component from "@reach/component-component";
 import { Dialog, DialogOverlay, DialogContent } from "@reach/dialog";
 import {
@@ -44,7 +55,7 @@ import {
   MenuItem,
   MenuItems,
   MenuPopover,
-  MenuLink
+  MenuLink,
 } from "@reach/menu-button";
 import Portal from "@reach/portal";
 import Rect, { useRect } from "@reach/rect";
@@ -54,7 +65,7 @@ import {
   SliderTrack,
   SliderTrackHighlight,
   SliderHandle,
-  SliderMarker
+  SliderMarker,
 } from "@reach/slider";
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from "@reach/tabs";
 import Tooltip, { useTooltip, TooltipPopup } from "@reach/tooltip";
@@ -137,6 +148,15 @@ function MyPageLayout({ children }) {
                   DisclosureButton,
                   DisclosurePanel,
                   GatsbyLink,
+                  Listbox,
+                  ListboxInput,
+                  ListboxButton,
+                  ListboxArrow,
+                  ListboxPopover,
+                  ListboxList,
+                  ListboxOption,
+                  ListboxGroup,
+                  ListboxGroupLabel,
                   matchSorter,
                   Menu,
                   MenuButton,
@@ -170,12 +190,12 @@ function MyPageLayout({ children }) {
                   useTransition,
                   useWindowSize,
                   VisuallyHidden,
-                  WindowSize
+                  WindowSize,
                 }}
               />
             );
           },
-          table: Table
+          table: Table,
         }}
       >
         <main>