diff --git a/packages/braid-design-system/src/lib/components/MenuRenderer/MenuRenderer.screenshots.tsx b/packages/braid-design-system/src/lib/components/MenuRenderer/MenuRenderer.screenshots.tsx index d376dd621b0..879bbd988c8 100644 --- a/packages/braid-design-system/src/lib/components/MenuRenderer/MenuRenderer.screenshots.tsx +++ b/packages/braid-design-system/src/lib/components/MenuRenderer/MenuRenderer.screenshots.tsx @@ -259,5 +259,23 @@ export const screenshots: ComponentScreenshot = { ), }, + { + label: 'With overflow hidden', + Example: () => ( + + ( + + + + )} + > + {}}>Button + Link + + + ), + }, ], }; diff --git a/packages/braid-design-system/src/lib/components/MenuRenderer/MenuRenderer.tsx b/packages/braid-design-system/src/lib/components/MenuRenderer/MenuRenderer.tsx index ede96848ca4..48f6b9d4f2d 100644 --- a/packages/braid-design-system/src/lib/components/MenuRenderer/MenuRenderer.tsx +++ b/packages/braid-design-system/src/lib/components/MenuRenderer/MenuRenderer.tsx @@ -353,20 +353,22 @@ export const MenuRenderer = ({ {trigger(triggerProps, { open })} {hasRenderedOnClient && ( - - {items} - + + + {items} + + )} @@ -433,59 +435,54 @@ export function Menu({ }); return ( - - - - - {Children.map(children, (item, i) => { - if (isDivider(item)) { - dividerCount++; - return item; - } - const menuItemIndex = i - dividerCount; - return ( - - {item} - - ); - })} - - + + + + {Children.map(children, (item, i) => { + if (isDivider(item)) { + dividerCount++; + return item; + } + const menuItemIndex = i - dividerCount; + return ( + + {item} + + ); + })} - - + + + ); }