feat(menu): add menu divider

documentation-site/examples/menu/dividers.js

@@ -0,0 +1,38 @@
+// @flow
+import * as React from 'react';
+import {StatefulMenu} from 'baseui/menu';
+
+const ITEMS = [
+  {label: 'Menu option A'},
+  {label: 'Menu option B'},
+  {divider: true},
+  {label: 'Menu option X'},
+  {label: 'Menu option Y'},
+  {label: 'Menu option Z'},
+  {divider: true},
+  {label: 'Menu option 1'},
+  {label: 'Menu option 2'},
+  {label: 'Menu option 3'},
+];
+
+export default function Example() {
+  return (
+    <StatefulMenu
+      items={ITEMS}
+      onItemSelect={console.log}
+      overrides={{
+        List: {
+          style: {
+            height: '250px',
+            width: '350px',
+          },
+        },
+        Option: {
+          props: {
+            getItemLabel: (item) => item.label,
+          },
+        },
+      }}
+    />
+  );
+}

documentation-site/examples/menu/dividers.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import {StatefulMenu} from 'baseui/menu';
+
+const ITEMS = [
+  {label: 'Menu option A'},
+  {label: 'Menu option B'},
+  {divider: true},
+  {label: 'Menu option X'},
+  {label: 'Menu option Y'},
+  {label: 'Menu option Z'},
+  {divider: true},
+  {label: 'Menu option 1'},
+  {label: 'Menu option 2'},
+  {label: 'Menu option 3'},
+];
+
+export default function Example() {
+  return (
+    <StatefulMenu
+      items={ITEMS}
+      onItemSelect={console.log}
+      overrides={{
+        List: {
+          style: {
+            height: '250px',
+            width: '350px',
+          },
+        },
+        Option: {
+          props: {
+            getItemLabel: (item: {label: string}) => item.label,
+          },
+        },
+      }}
+    />
+  );
+}

documentation-site/pages/components/menu.mdx

@@ -18,6 +18,7 @@ import ChildRenderAll from 'examples/menu/child-render-all.js';
 import Grouped from 'examples/menu/grouped.js';
 import VirtualList from 'examples/menu/virtual-list.js';
 import Href from 'examples/menu/href.js';
+import Dividers from 'examples/menu/dividers.js';
 
 import Overrides from '../../components/overrides';
 import { StatefulMenu, OptionProfile } from 'baseui/menu';
@@ -96,6 +97,10 @@ The provided id will be set as a value for the item container's `id` attribute t
   <Href />
 </Example>
 
+<Example title="Menu with Dividers" path="menu/dividers.js">
+  <Dividers />
+</Example>
+
 ## Overrides
 
 <Overrides
@@ -108,8 +113,10 @@ The provided id will be set as a value for the item container's `id` attribute t
           items={[
             { label: 'Item One' },
             { label: 'Item Two' },
+            { divider: true },
             { label: 'Item Three', disabled: true },
             { label: 'Item Four', disabled: true },
+            { divider: true },
             { label: 'Item Five' },
             { label: 'Item Six' },
           ]}

src/menu/__tests__/menu-dividers.scenario.tsx

@@ -0,0 +1,43 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+
+import { Menu } from '..';
+
+const ITEMS = [
+  { label: 'Menu option A' },
+  { label: 'Menu option B' },
+  { divider: true },
+  { label: 'Menu option X' },
+  { label: 'Menu option Y' },
+  { label: 'Menu option Z' },
+  { divider: true },
+  { label: 'Menu option 1' },
+  { label: 'Menu option 2' },
+  { label: 'Menu option 3' },
+];
+
+export function Scenario() {
+  return (
+    <Menu
+      items={ITEMS}
+      rootRef={React.createRef()}
+      overrides={{
+        List: {
+          style: {
+            width: '200px',
+          },
+        },
+        Option: {
+          props: {
+            getItemLabel: (item) => item.label,
+          },
+        },
+      }}
+    />
+  );
+}

src/menu/__tests__/menu.stories.tsx

@@ -15,6 +15,7 @@ import { Scenario as MenuStateful } from './menu-stateful.scenario';
 import { Scenario as MenuVirtualized } from './menu-virtualized.scenario';
 import { Scenario as MenuDefault } from './menu.scenario';
 import { Scenario as MenuProfileMenu } from './menu-profile-menu.scenario';
+import { Scenario as MenuDividers } from './menu-dividers.scenario';
 
 export const ChildInPopover = () => <MenuChildInPopover />;
 export const ChildRenderAll = () => <MenuChildRenderAll />;
@@ -26,3 +27,4 @@ export const Stateful = () => <MenuStateful />;
 export const Virtualized = () => <MenuVirtualized />;
 export const Menu = () => <MenuDefault />;
 export const ProfileMenu = () => <MenuProfileMenu />;
+export const Dividers = () => <MenuDividers />;

src/menu/index.js.flow

@@ -25,6 +25,7 @@ export {
   StyledProfileTitle,
   StyledProfileSubtitle,
   StyledProfileBody,
+  StyledMenuDivider,
 } from './styled-components.js';
 // Flow
 export type * from './types.js';

src/menu/index.ts

@@ -40,6 +40,7 @@ export {
   StyledProfileTitle,
   StyledProfileSubtitle,
   StyledProfileBody,
+  StyledMenuDivider,
 } from './styled-components';
 // Flow
 export * from './types';

src/menu/menu.js.flow

@@ -8,7 +8,12 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import { LocaleContext } from '../locale/index.js';
 // Components
-import { StyledList, StyledEmptyState, StyledOptgroupHeader } from './styled-components.js';
+import {
+  StyledList,
+  StyledEmptyState,
+  StyledOptgroupHeader,
+  StyledMenuDivider,
+} from './styled-components.js';
 import OptionList from './option-list.js';
 import { getOverrides } from '../helpers/overrides.js';
 // Types
@@ -49,6 +54,7 @@ export default function Menu(props: StatelessMenuPropsT) {
     overrides.OptgroupHeader,
     StyledOptgroupHeader
   );
+  const [MenuDivider, menuDividerProps] = getOverrides(overrides.MenuDivider, StyledMenuDivider);
 
   const groupedItems = Array.isArray(props.items) ? { __ungrouped: props.items } : props.items;
   const optgroups = Object.keys(groupedItems);
@@ -65,6 +71,10 @@ export default function Menu(props: StatelessMenuPropsT) {
         itemIndex = itemIndex + 1;
         const { getRequiredItemProps = (item, index) => ({}) } = props;
 
+        if (item.divider === true) {
+          return <MenuDivider {...menuDividerProps} />;
+        }
+
         const {
           disabled,
           isFocused,

src/menu/menu.tsx

@@ -7,7 +7,12 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import { LocaleContext } from '../locale';
 // Components
-import { StyledList, StyledEmptyState, StyledOptgroupHeader } from './styled-components';
+import {
+  StyledList,
+  StyledEmptyState,
+  StyledOptgroupHeader,
+  StyledMenuDivider,
+} from './styled-components';
 import OptionList from './option-list';
 import { getOverrides } from '../helpers/overrides';
 // Types
@@ -52,6 +57,7 @@ export default function Menu(props: StatelessMenuProps) {
     overrides.OptgroupHeader,
     StyledOptgroupHeader
   );
+  const [MenuDivider, menuDividerProps] = getOverrides(overrides.MenuDivider, StyledMenuDivider);
 
   const groupedItems = Array.isArray(props.items) ? { __ungrouped: props.items } : props.items;
   const optgroups = Object.keys(groupedItems);
@@ -70,6 +76,10 @@ export default function Menu(props: StatelessMenuProps) {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { getRequiredItemProps = (item, index) => ({} as RenderItemProps) } = props;
 
+        if (item.divider === true) {
+          return <MenuDivider {...menuDividerProps} />;
+        }
+
         const {
           disabled,
           isFocused,

src/menu/styled-components.js.flow

@@ -210,3 +210,16 @@ export const StyledProfileBody = styled<StyledPropsT>('p', ({ $theme }) => ({
   marginLeft: 0,
   marginRight: 0,
 }));
+
+export const StyledMenuDivider = styled<StyledPropsT>('li', ({ $theme }) => ({
+  color: $theme.colors.contentPrimary,
+  borderBottomWidth: $theme.borders.border300.borderWidth,
+  borderBottomStyle: $theme.borders.border300.borderStyle,
+  borderBottomColor: $theme.borders.border300.borderColor,
+  marginTop: $theme.sizing.scale100,
+  marginBottom: $theme.sizing.scale100,
+  marginLeft: $theme.sizing.scale600,
+  marginRight: $theme.sizing.scale600,
+  listStyle: 'none',
+  height: 0,
+}));

src/menu/styled-components.tsx

@@ -232,3 +232,17 @@ export const StyledProfileBody = styled<'p', StyledProps>('p', ({ $theme }) => (
   marginRight: 0,
 }));
 StyledProfileBody.displayName = 'StyledProfileBody';
+
+export const StyledMenuDivider = styled<'li', StyledProps>('li', ({ $theme }) => ({
+  color: $theme.colors.contentPrimary,
+  borderBottomWidth: $theme.borders.border300.borderWidth,
+  borderBottomStyle: $theme.borders.border300.borderStyle,
+  borderBottomColor: $theme.borders.border300.borderColor,
+  marginTop: $theme.sizing.scale100,
+  marginBottom: $theme.sizing.scale100,
+  marginLeft: $theme.sizing.scale500,
+  marginRight: $theme.sizing.scale500,
+  listStyle: 'none',
+  height: 0,
+}));
+StyledProfileBody.displayName = 'StyledMenuDivider';

src/menu/types.js.flow

@@ -144,6 +144,7 @@ export type MenuPropsT = {
     Option?: OverrideT,
     OptgroupHeader?: OverrideT,
     ListItem?: OverrideT,
+    MenuDivider?: OverrideT;
   },
   /** Renders all menu content for SEO purposes regardless of menu  state */
   renderAll?: boolean,

src/menu/types.ts

@@ -153,6 +153,7 @@ export type MenuOverrides = {
   Option?: Override;
   OptgroupHeader?: Override;
   ListItem?: Override;
+  MenuDivider?: Override;
 };
 export type MenuProps = {
   overrides?: MenuOverrides;