Update/7640/menu

docs/pages/components/Menu.mdx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import Callout from '../../components/callout';
 
 The `<Menu />` component is an accessibility-focused dropdown menu.
@@ -20,6 +21,7 @@ import {
   MenuList,
   MenuItem,
   MenuLink,
+  MenuDivider,
 } from 'minerva-ui';
 ```
 
@@ -39,6 +41,38 @@ import {
 </MenuContainer>
 ```
 
+## With Custom Colored Selected Menu Item
+
+```jsx live
+() => {
+  const [selectedItem, setSelectedItem] = useState('');
+
+  return (
+    <MenuContainer>
+      <MenuButton>
+        Actions <Icon name="chevron-down" ml={2} size="14px" />
+      </MenuButton>
+      <MenuList menuPosition="right">
+        <MenuItem
+          color={selectedItem === 'edit_profile' ? '#651FFF' : '#000'}
+          fontWeight={selectedItem === 'edit_profile' ? 'bold' : 'normal'}
+          onSelect={item => setSelectedItem('edit_profile')}
+        >
+          Edit Profile
+        </MenuItem>
+        <MenuItem
+          color={selectedItem === 'settings' ? '#651FFF' : '#000'}
+          fontWeight={selectedItem === 'settings' ? 'bold' : 'normal'}
+          onSelect={item => setSelectedItem('settings')}
+        >
+          Settings
+        </MenuItem>
+      </MenuList>
+    </MenuContainer>
+  );
+};
+```
+
 ## Positioned To Right
 
 Change alignment for `MenuList` relative to parent

package.json

@@ -105,6 +105,7 @@
     "@testing-library/react": "^10.0.4",
     "@types/styled-components": "^5.1.5",
     "@types/styled-system": "^5.1.10",
+    "@types/styled-system__css": "^5.0.15",
     "copy-to-clipboard": "^3.3.1",
     "eslint-config-cratebind": "^3.0.8",
     "eslint-config-react-app": "^5.2.1",

src/Menu/Menu.stories.tsx

@@ -8,10 +8,10 @@ import {
   MenuItem,
   MenuLink,
   MenuDivider,
+  MenuIcon,
 } from '.';
-import { Icon } from '..';
 import { filteredArgs } from '../utils';
-import { Flex } from '../layout';
+import { Flex, Box } from '../layout';
 
 const meta: Meta = {
   title: 'Menu',
@@ -38,10 +38,11 @@ const Template: Story<MenuContainerProps> = ({}) => {
     <>
       <MenuContainer>
         <MenuButton>
-          Actions <Icon name="chevron-down" ml={2} size="14px" />
+          <Box>Actions</Box>
+          <MenuIcon />
         </MenuButton>
         <MenuList>
-          <MenuItem onSelect={() => alert('Download')}>Download</MenuItem>
+          <MenuItem onSelect={() => {}}>Download</MenuItem>
           <MenuItem onSelect={() => alert('Copy')}>Create a Copy</MenuItem>
           <MenuItem onSelect={() => alert('Mark as Draft')}>
             Mark as Draft
@@ -63,7 +64,8 @@ export const PositionedRight = () => (
   <Flex justifyContent="flex-end">
     <MenuContainer>
       <MenuButton>
-        Actions <Icon name="chevron-down" ml={2} size="14px" />
+        <Box>Actions</Box>
+        <MenuIcon />
       </MenuButton>
       <MenuList menuPosition="right">
         <MenuItem onSelect={() => alert('Edit Profile')}>Edit Profile</MenuItem>
@@ -76,7 +78,8 @@ export const PositionedRight = () => (
 export const DisabledItems = () => (
   <MenuContainer>
     <MenuButton>
-      Actions <Icon name="chevron-down" ml={2} size="14px" />
+      <Box>Actions</Box>
+      <MenuIcon />
     </MenuButton>
     <MenuList>
       <MenuItem onSelect={() => alert('Edit Profile')}>Edit Profile</MenuItem>

src/Menu/index.tsx

@@ -7,17 +7,21 @@ import {
   MenuPopover as ReachMenuPopover,
   MenuItems as ReachMenuItems,
   MenuProps,
-  MenuButtonProps,
+  MenuButtonProps as ReachMenuButtonProps,
   MenuItemsProps,
+  MenuItemProps as ReachMenuItemProps,
+  MenuLinkProps as ReachMenuLinkProps,
+  useMenuButtonContext,
 } from '@reach/menu-button';
 import { positionDefault, positionRight } from '@reach/popover';
 import styled from 'styled-components';
-import Button, { ButtonProps } from '../Button';
-import { Box, MinervaProps } from '../layout';
+import { Box, MinervaProps, shouldForwardProp, systemProps } from '../layout';
+import { useComponentStyles } from '../theme';
+import { ChevronDown } from '../Icon/baseIcons';
 // import { useTheme } from '../theme';
 
 // import '@reach/menu-button/styles.css';
-import PseudoBox from '../PseudoBox';
+import PseudoBox, { createPseudoStyles, PseudoBoxProps } from '../PseudoBox';
 
 export type MenuContainerProps = MenuProps;
 
@@ -26,9 +30,20 @@ export const MenuContainer = (props: MenuContainerProps) => (
   <ReachMenuContainer {...props} />
 );
 
-export const MenuButton = (props: MenuButtonProps & ButtonProps) => (
-  <ReachMenuButton as={Button} {...props} />
-);
+type MenuButtonProps = ReachMenuButtonProps & MinervaProps;
+
+export const MenuButton = (props: MenuButtonProps) => {
+  const componentStyles = useComponentStyles('MenuButton');
+  const { isExpanded } = useMenuButtonContext();
+
+  return (
+    <BaseMenuButton
+      boxShadow={isExpanded ? '0 0 0 2px #CBBEE7' : 'none'}
+      {...componentStyles}
+      {...props}
+    />
+  );
+};
 
 export interface MenuListProps extends MinervaProps {
   children?: React.ReactNode;
@@ -37,15 +52,15 @@ export interface MenuListProps extends MinervaProps {
 
 export const OverlayBox = props => (
   <PseudoBox
-    py={1}
+    py="10px"
     mt="8px"
     bg="white"
     position="relative"
-    borderRadius="6px"
-    boxShadow="0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05)"
+    borderRadius="5px"
+    boxShadow="10px 10px 20px rgba(0, 0, 0, 0.12)"
     _after={{
       content: `''`,
-      boxShadow: '0 0 0 1px rgba(0,0,0,.05)',
+      boxShadow: '0 0 0 1px #E0E0E0',
       borderRadius: '6px',
       position: 'absolute',
       top: 0,
@@ -79,33 +94,55 @@ export const MenuList = ({
   </ReachMenuPopover>
 );
 
-export const MenuItem = styled(ReachMenuItem)`
-  color: #374151;
-  padding: 0.5rem 1rem;
-  font-size: 14px;
-  cursor: pointer;
-
-  &[data-selected],
-  &:hover {
-    background-color: #f4f5f7;
-    color: #161e2e;
-  }
-`;
-
-export const MenuLink = styled(ReachMenuLink)`
-  color: #374151;
-  padding: 0.5rem 1rem;
-  font-size: 14px;
-  display: block;
-  cursor: pointer;
-
-  &[data-selected],
-  &:hover {
-    background-color: #f4f5f7;
-    color: #161e2e;
-    text-decoration: none;
-  }
-`;
+export function MenuIcon(props: MinervaProps) {
+  const { isExpanded } = useMenuButtonContext();
+
+  return (
+    <Box
+      as={ChevronDown}
+      transform={isExpanded ? 'rotate(-180deg)' : undefined}
+      transition="transform 0.2s"
+      transformOrigin="center"
+      w="14px"
+      h="14px"
+      color="#000"
+      aria-hidden="true"
+      {...props}
+    />
+  );
+}
+
+type MenuItemProps = ReachMenuItemProps & MinervaProps;
+
+export const MenuItem = (props: MenuItemProps) => {
+  const componentStyles = useComponentStyles('MenuItem');
+
+  return (
+    <PseudoBox
+      as={ReachMenuItem}
+      cursor="pointer"
+      {...componentStyles}
+      {...props}
+    />
+  );
+};
+
+type MenuLinkProps = ReachMenuLinkProps &
+  MinervaProps &
+  React.LinkHTMLAttributes<HTMLAnchorElement>;
+
+export const MenuLink = (props: MenuLinkProps) => {
+  const componentStyles = useComponentStyles('MenuLink');
+
+  return (
+    <PseudoBox
+      as={ReachMenuLink}
+      cursor="pointer"
+      {...componentStyles}
+      {...props}
+    />
+  );
+};
 
 export const MenuDivider = props => (
   <Box
@@ -118,3 +155,11 @@ export const MenuDivider = props => (
 );
 
 export { useMenuButtonContext } from '@reach/menu-button';
+
+// using our own <Button /> component causes weird TS issues due to the `as` prop
+const BaseMenuButton = styled(ReachMenuButton).withConfig({
+  shouldForwardProp: shouldForwardProp,
+})<MinervaProps & PseudoBoxProps & ReachMenuButtonProps>(
+  createPseudoStyles,
+  systemProps
+);

src/PseudoBox/PseudoBox.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import PseudoBox from '.';
+
+const meta: Meta = {
+  title: 'PseudoBox',
+  component: PseudoBox,
+};
+
+export default meta;
+
+export const Basic = () => {
+  return (
+    <PseudoBox _hover={{ background: '#000' }}>
+      Pseudo Box with Hover Styles
+    </PseudoBox>
+  );
+};