Add section styles

Author: mikeldking

src/menu/Menu.tsx

@@ -46,7 +46,7 @@ const menuULCSS = css`
   max-height: inherit;
   list-style: none;
   margin: 0;
-  padding: 0;
+  padding: ${theme.spacing.padding4}px 0;
 `;
 function Menu<T extends object>(
   props: MenuComponentProps<T>,

src/menu/MenuSection.tsx

@@ -4,6 +4,8 @@ import React, { Fragment, Key } from 'react';
 import { TreeState } from '@react-stately/tree';
 import { useMenuSection } from '@react-aria/menu';
 import { useSeparator } from '@react-aria/separator';
+import { css } from '@emotion/core';
+import theme from '../theme';
 
 interface MenuSectionProps<T> {
   item: Node<T>;
@@ -26,15 +28,36 @@ export function MenuSection<T>(props: MenuSectionProps<T>) {
   return (
     <Fragment>
       {item.key !== state.collection.getFirstKey() && (
-        <li {...separatorProps} className={'ac-menu-divider'} />
+        <li
+          {...separatorProps}
+          className={'ac-menu-divider'}
+          css={css`
+            border-bottom: 1px solid ${theme.components.dropdown.borderColor};
+          `}
+        />
       )}
       <li {...itemProps}>
         {item.rendered && (
-          <span {...headingProps} className={'ac-menu__section-heading'}>
+          <span
+            {...headingProps}
+            className={'ac-menu__section-heading'}
+            css={css`
+              display: inline-block;
+              margin: ${theme.spacing.margin8}px ${theme.spacing.margin16}px;
+              font-size: ${theme.typography.sizes.small.fontSize}px;
+              color: ${theme.textColors.white70};
+            `}
+          >
             {item.rendered}
           </span>
         )}
-        <ul {...groupProps} className={'ac-menu'}>
+        <ul
+          {...groupProps}
+          className={'ac-menu'}
+          css={css`
+            padding: 0;
+          `}
+        >
           {[...item.childNodes].map(node => {
             let item = (
               <MenuItem

stories/ActionMenu.stories.tsx

@@ -10,6 +10,8 @@ import {
   DropdownProps,
   ActionMenu,
   Item,
+  Heading,
+  Section,
 } from '../src';
 import { Icon, PlusCircleOutline } from '../src/icon';
 
@@ -37,13 +39,15 @@ const Template: Story<DropdownProps> = args => (
     <div
       css={css`
         margin: 24px;
+        > * {
+          margin-bottom: 16px;
+        }
       `}
     >
       <div
         css={css`
           display: flex;
           gap: 4px;
-          margin-bottom: 16px;
         `}
       >
         <ActionMenu
@@ -88,6 +92,20 @@ const Template: Story<DropdownProps> = args => (
           <Item key="three">Three</Item>
         </ActionMenu>
       </div>
+      <div>
+        <Heading>With Section</Heading>
+        <ActionMenu isOpen>
+          <Section title="File">
+            <Item key="new">New</Item>
+            <Item key="open">Open...</Item>
+          </Section>
+          <Section title="Save">
+            <Item key="save">Save</Item>
+            <Item key="saveAs">Save As...</Item>
+            <Item key="saveAll">Save All</Item>
+          </Section>
+        </ActionMenu>
+      </div>
     </div>
   </Provider>
 );