Use small OverflowMenu in snippets/gallery

seek-oss · Dec 23, 2024 · d328313 · d328313
1 parent 7cc79e7
commit d328313
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 73 deletions.
diff --git a/packages/braid-design-system/src/lib/components/Table/Table.gallery.tsx b/packages/braid-design-system/src/lib/components/Table/Table.gallery.tsx
@@ -1,21 +1,20 @@
 import React from 'react';
 import type { GalleryComponent } from 'site/types';
 import {
-  ButtonIcon,
-  IconOverflow,
-  MenuItem,
-  MenuRenderer,
   Table,
   TableBody,
   TableCell,
   TableHeader,
   TableHeaderCell,
   TableRow,
   Text,
+  Badge,
+  Stack,
+  OverflowMenu,
+  MenuItem,
 } from '..';
 import source from '@braid-design-system/source.macro';
 import { stripTypeAnyFromCode } from './stripTypeAnyFromCode';
-import { Badge, Stack } from '../../playroom/components';
 
 export const galleryItems: GalleryComponent = {
   examples: [
@@ -182,23 +181,14 @@ export const galleryItems: GalleryComponent = {
                         <Text>{row.column3}</Text>
                       </TableCell>
                       <TableCell width="content" align="right">
-                        <MenuRenderer
-                          align="right"
-                          offsetSpace="xsmall"
-                          trigger={(triggerProps) => (
-                            <ButtonIcon
-                              icon={<IconOverflow />}
-                              label="Options"
-                              size="small"
-                              variant="transparent"
-                              id={`options-${row.column1}`}
-                              {...triggerProps}
-                            />
-                          )}
+                        <OverflowMenu
+                          size="small"
+                          label="Options"
+                          id={`options-${row.column1}`}
                         >
-                          <MenuItem onClick={() => {}}>Button</MenuItem>
-                          <MenuItem onClick={() => {}}>Button</MenuItem>
-                        </MenuRenderer>
+                          <MenuItem>Option</MenuItem>
+                          <MenuItem>Option</MenuItem>
+                        </OverflowMenu>
                       </TableCell>
                     </TableRow>
                   ))}
@@ -258,23 +248,14 @@ export const galleryItems: GalleryComponent = {
                         <Text>{row.column2}</Text>
                       </TableCell>
                       <TableCell width="content" align="right">
-                        <MenuRenderer
-                          align="right"
-                          offsetSpace="xsmall"
-                          trigger={(triggerProps) => (
-                            <ButtonIcon
-                              icon={<IconOverflow />}
-                              label="Options"
-                              size="small"
-                              variant="transparent"
-                              id={`options-${row.line1}`}
-                              {...triggerProps}
-                            />
-                          )}
+                        <OverflowMenu
+                          size="small"
+                          label="Options"
+                          id={`options-${row.line1}`}
                         >
-                          <MenuItem onClick={() => {}}>Button</MenuItem>
-                          <MenuItem onClick={() => {}}>Button</MenuItem>
-                        </MenuRenderer>
+                          <MenuItem>Option</MenuItem>
+                          <MenuItem>Option</MenuItem>
+                        </OverflowMenu>
                       </TableCell>
                     </TableRow>
                   ))}

diff --git a/packages/braid-design-system/src/lib/components/Table/Table.snippets.tsx b/packages/braid-design-system/src/lib/components/Table/Table.snippets.tsx
@@ -9,11 +9,9 @@ import {
   TableHeaderCell,
   TableRow,
   Badge,
-  ButtonIcon,
-  MenuRenderer,
-  MenuItem,
-  IconOverflow,
   Stack,
+  OverflowMenu,
+  MenuItem,
 } from '../../playroom/components';
 import source from '@braid-design-system/source.macro';
 
@@ -127,23 +125,14 @@ export const snippets: Snippets = [
                 <Text>{row.column3}</Text>
               </TableCell>
               <TableCell width="content" align="right">
-                <MenuRenderer
-                  align="right"
-                  offsetSpace="xsmall"
-                  trigger={(triggerProps) => (
-                    <ButtonIcon
-                      icon={<IconOverflow />}
-                      label="Options"
-                      size="small"
-                      variant="transparent"
-                      id={`options-${row.column1}`}
-                      {...triggerProps}
-                    />
-                  )}
+                <OverflowMenu
+                  size="small"
+                  label="Options"
+                  id={`options-${row.column1}`}
                 >
-                  <MenuItem onClick={() => {}}>Button</MenuItem>
-                  <MenuItem onClick={() => {}}>Button</MenuItem>
-                </MenuRenderer>
+                  <MenuItem>Option</MenuItem>
+                  <MenuItem>Option</MenuItem>
+                </OverflowMenu>
               </TableCell>
             </TableRow>
           ))}
@@ -197,23 +186,14 @@ export const snippets: Snippets = [
                 <Text>{row.column2}</Text>
               </TableCell>
               <TableCell width="content" align="right">
-                <MenuRenderer
-                  align="right"
-                  offsetSpace="xsmall"
-                  trigger={(triggerProps) => (
-                    <ButtonIcon
-                      icon={<IconOverflow />}
-                      label="Options"
-                      size="small"
-                      variant="transparent"
-                      id={`options-${row.line1}`}
-                      {...triggerProps}
-                    />
-                  )}
+                <OverflowMenu
+                  size="small"
+                  label="Options"
+                  id={`options-${row.line1}`}
                 >
-                  <MenuItem onClick={() => {}}>Button</MenuItem>
-                  <MenuItem onClick={() => {}}>Button</MenuItem>
-                </MenuRenderer>
+                  <MenuItem>Option</MenuItem>
+                  <MenuItem>Option</MenuItem>
+                </OverflowMenu>
               </TableCell>
             </TableRow>
           ))}