chore: expands menu and combobox JSX API documentation (#606)

zendeskgarden · Aug 12, 2024 · 91d8d13 · 91d8d13
1 parent 902ac69
commit 91d8d13
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 0 deletions.
diff --git a/src/pages/components/combobox.mdx b/src/pages/components/combobox.mdx
@@ -239,11 +239,63 @@ The Combobox component follows this structure:
   <Combobox>
     <Option />
     <Option />
+    <OptGroup>
+      <Option />
+    </OptGroup>
     {/* etc. */}
   </Combobox>
 </Field>
 ```
 
+Use `Array.map` to iterate over options.
+
+```jsx
+const OPTIONS = [
+  { value: 'Sunflower' },
+  {
+    label: 'More flowers',
+    options: [
+      { value: 'Violet' },
+      { value: 'Daisy' },
+    ]
+  }
+]
+
+<Combobox>
+  {OPTIONS.map(option =>
+    option.options ? (
+      <OptGroup key={option.label} label={option.label}>
+        {option.options.map(groupOption => (
+          <Option key={groupOption.value} {...groupOption} />
+        ))}
+      </OptGroup>
+    ) : (
+      <Option key={option.value} {...option} />
+    )
+  )}
+</Combobox>
+```
+
+Match `Option` and `OptGroup` prop signatures when using wrapper components.
+
+```jsx
+const OptionComponent = forwardRef((props, ref) => (
+  <Option {...props} ref={ref} />
+))
+
+const OptGroupComponent = forwardRef((props, ref) => (
+  <OptGroup {...props} ref={ref} />
+))
+
+<Combobox>
+  <OptGroupComponent label="Flowers">
+    <OptionComponent value="Violet" />
+    <OptionComponent value="Sunflower" />
+    <OptionComponent value="Daisy" />
+  </OptGroupComponent>
+</Combobox>
+```
+
 ### Combobox
 
 <Component components={props.data.mdx.components} componentName="combobox" />

diff --git a/src/pages/components/menu.mdx b/src/pages/components/menu.mdx
@@ -171,10 +171,62 @@ The Menu component follows this structure:
 <Menu>
   <Item />
   <Item />
+  <ItemGroup>
+    <Item />
+  </ItemGroup>
   {/* etc. */}
 </Menu>
 ```
 
+Use `Array.map` to iterate over items.
+
+```jsx
+const ITEMS = [
+  { value: 'Sunflower' },
+  {
+    legend: 'More flowers',
+    items: [
+      { value: 'Violet' },
+      { value: 'Daisy' },
+    ]
+  }
+]
+
+<Menu>
+  {ITEMS.map(item =>
+    item.items ? (
+      <ItemGroup key={item.legend} legend={item.legend}>
+        {item.items.map(groupItem => (
+          <Item key={groupItem.value} {...groupItem} />
+        ))}
+      </ItemGroup>
+    ) : (
+      <Item key={item.value} {...item} />
+    )
+  )}
+</Menu>
+```
+
+Match `Item` and `ItemGroup` prop signatures when using wrapper components.
+
+```jsx
+const ItemComponent = forwardRef((props, ref) => (
+  <Item {...props} ref={ref} />
+))
+
+const ItemGroupComponent = forwardRef((props, ref) => (
+  <ItemGroup {...props} ref={ref} />
+))
+
+<Menu>
+  <ItemGroupComponent legend="Flowers">
+    <ItemComponent value="Violet" />
+    <ItemComponent value="Sunflower" />
+    <ItemComponent value="Daisy" />
+  </ItemGroupComponent>
+</Menu>
+```
+
 ### Menu
 
 <Component components={props.data.mdx.components} componentName="menu" />