From e677ae440675a4167fe84aca2491c4e1d4c93e6a Mon Sep 17 00:00:00 2001
From: iqra-javed <35740252+iqra-javed@users.noreply.github.com>
Date: Tue, 1 Jun 2021 09:39:14 -0500
Subject: [PATCH 01/12] fix: update default Menu styles

---
 src/Menu/Menu.stories.tsx | 15 +++++----
 src/Menu/index.tsx        | 69 +++++++++++++++++++++++++++------------
 src/theme.ts              | 17 ++++++++++
 3 files changed, 75 insertions(+), 26 deletions(-)

diff --git a/src/Menu/Menu.stories.tsx b/src/Menu/Menu.stories.tsx
index 4574dfe5..df522c5d 100644
--- a/src/Menu/Menu.stories.tsx
+++ b/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>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>
diff --git a/src/Menu/index.tsx b/src/Menu/index.tsx
index 40d82950..aa118fc7 100644
--- a/src/Menu/index.tsx
+++ b/src/Menu/index.tsx
@@ -9,11 +9,14 @@ import {
   MenuProps,
   MenuButtonProps,
   MenuItemsProps,
+  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 { useComponentStyles } from '../theme';
+import { ChevronDown } from '../Icon/baseIcons';
 // import { useTheme } from '../theme';
 
 // import '@reach/menu-button/styles.css';
@@ -26,9 +29,21 @@ export const MenuContainer = (props: MenuContainerProps) => (
   <ReachMenuContainer {...props} />
 );
 
-export const MenuButton = (props: MenuButtonProps & ButtonProps) => (
-  <ReachMenuButton as={Button} {...props} />
-);
+export const MenuButton = (props: MenuButtonProps & ButtonProps) => {
+  const componentStyles = useComponentStyles('MenuButton');
+  const { isExpanded } = useMenuButtonContext();
+  return (
+    <ReachMenuButton
+      as={Button}
+      minWidth='140px'
+      justifyContent='space-between'
+      p='12px 15px'
+      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,31 +94,45 @@ export const MenuList = ({
   </ReachMenuPopover>
 );
 
+export function MenuIcon() {
+  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"
+    />
+  );
+}
+
 export const MenuItem = styled(ReachMenuItem)`
-  color: #374151;
-  padding: 0.5rem 1rem;
+  color: #000;
+  padding: 0.625rem 0.9375rem;
   font-size: 14px;
+  line-height: 112.6%;
   cursor: pointer;
 
-  &[data-selected],
-  &:hover {
-    background-color: #f4f5f7;
-    color: #161e2e;
+  &[data-selected] {
+    background: #F5F5F5;
   }
 `;
 
 export const MenuLink = styled(ReachMenuLink)`
-  color: #374151;
-  padding: 0.5rem 1rem;
+  color: #000;
+  padding: 0.625rem 0.9375rem;
   font-size: 14px;
+  line-height: 112.6%;
   display: block;
   cursor: pointer;
 
-  &[data-selected],
-  &:hover {
-    background-color: #f4f5f7;
-    color: #161e2e;
-    text-decoration: none;
+  &[data-selected] {
+    background: #F5F5F5;
   }
 `;
 
diff --git a/src/theme.ts b/src/theme.ts
index f803e613..687b431c 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -12,6 +12,7 @@ export interface MinervaTheme extends Theme {
   Button?: ThemeComponent;
   Drawer?: ThemeComponent;
   Heading?: ThemeComponent;
+  MenuButton?: ThemeComponent;
   Modal?: ThemeComponent;
   ModalContent?: ThemeComponent;
   ModalBody?: ThemeComponent;
@@ -100,6 +101,22 @@ const defaultTheme: MinervaTheme = {
   InputField: {},
   Link: {},
   Tabs: {},
+  MenuButton: {
+    _hover: {
+      boxShadow: '0 0 0 2px #CBBEE7',
+    },
+    _focus: {
+      outline: 'none',
+      boxShadow: '0 0 0 2px #CBBEE7',
+    },
+    _active: {
+      boxShadow: '0 0 0 2px #CBBEE7',
+    },
+    _disabled: {
+      background: '#E0E0E0',
+      color: 'rgba(30, 6, 84, 0.5)',
+    }
+  },
   Modal: {},
   ModalHeader: {},
   ModalBody: {},

From 302fca0da3efda8f78a0d9a357b3c692592721a5 Mon Sep 17 00:00:00 2001
From: iqra-javed <35740252+iqra-javed@users.noreply.github.com>
Date: Tue, 1 Jun 2021 10:02:23 -0500
Subject: [PATCH 02/12] fix: fix TS error in test file

---
 test/setup.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/setup.ts b/test/setup.ts
index d3d81605..3747a29b 100644
--- a/test/setup.ts
+++ b/test/setup.ts
@@ -5,7 +5,7 @@ import 'jest-styled-components';
 
 // ignore check styles function since we're inlining them
 jest.mock('@reach/utils', () => ({
-  ...jest.requireActual('@reach/utils'),
+  ...jest.requireActual('@reach/utils') as any,
   checkStyles: jest.fn(),
 }));
 

From 8fc9fb804248e3b10a3de8013b5a4a60753a0f36 Mon Sep 17 00:00:00 2001
From: Matt Wood <matt@cratebind.com>
Date: Tue, 1 Jun 2021 16:01:41 -0500
Subject: [PATCH 03/12] fix: create based button with styled component for menu
 button

---
 src/Menu/index.tsx | 32 ++++++++++++++++++++++----------
 src/theme.ts       |  2 +-
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/Menu/index.tsx b/src/Menu/index.tsx
index aa118fc7..44f1caf1 100644
--- a/src/Menu/index.tsx
+++ b/src/Menu/index.tsx
@@ -7,14 +7,13 @@ import {
   MenuPopover as ReachMenuPopover,
   MenuItems as ReachMenuItems,
   MenuProps,
-  MenuButtonProps,
+  MenuButtonProps as ReachMenuButtonProps,
   MenuItemsProps,
   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';
@@ -29,15 +28,17 @@ export const MenuContainer = (props: MenuContainerProps) => (
   <ReachMenuContainer {...props} />
 );
 
-export const MenuButton = (props: MenuButtonProps & ButtonProps) => {
+type MenuButtonProps = ReachMenuButtonProps;
+
+export const MenuButton = (props: MenuButtonProps) => {
   const componentStyles = useComponentStyles('MenuButton');
   const { isExpanded } = useMenuButtonContext();
   return (
     <ReachMenuButton
-      as={Button}
-      minWidth='140px'
-      justifyContent='space-between'
-      p='12px 15px'
+      as={BaseButton}
+      minWidth="140px"
+      justifyContent="space-between"
+      p="12px 15px"
       boxShadow={isExpanded ? '0 0 0 2px #CBBEE7' : 'none'}
       {...componentStyles}
       {...props}
@@ -119,7 +120,7 @@ export const MenuItem = styled(ReachMenuItem)`
   cursor: pointer;
 
   &[data-selected] {
-    background: #F5F5F5;
+    background: #f5f5f5;
   }
 `;
 
@@ -132,7 +133,7 @@ export const MenuLink = styled(ReachMenuLink)`
   cursor: pointer;
 
   &[data-selected] {
-    background: #F5F5F5;
+    background: #f5f5f5;
   }
 `;
 
@@ -147,3 +148,14 @@ 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 BaseButton = styled('button').withConfig({
+  shouldForwardProp: shouldForwardProp,
+})<MinervaProps>(
+  {
+    boxSizing: 'border-box',
+    minWidth: 0,
+  },
+  systemProps
+);
diff --git a/src/theme.ts b/src/theme.ts
index 549942a9..3fb5b731 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -134,7 +134,7 @@ const defaultTheme: MinervaTheme = {
     _disabled: {
       background: '#E0E0E0',
       color: 'rgba(30, 6, 84, 0.5)',
-    }
+    },
   },
   Modal: {},
   ModalHeader: {},

From 035794b46933a5e4adb7546b249c3867caa892ba Mon Sep 17 00:00:00 2001
From: Matt Wood <matt@cratebind.com>
Date: Tue, 1 Jun 2021 16:10:47 -0500
Subject: [PATCH 04/12] fix: fix MenuButton props

---
 src/Menu/index.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/Menu/index.tsx b/src/Menu/index.tsx
index 44f1caf1..e25da0a5 100644
--- a/src/Menu/index.tsx
+++ b/src/Menu/index.tsx
@@ -28,17 +28,16 @@ export const MenuContainer = (props: MenuContainerProps) => (
   <ReachMenuContainer {...props} />
 );
 
-type MenuButtonProps = ReachMenuButtonProps;
+type MenuButtonProps = ReachMenuButtonProps & MinervaProps;
 
 export const MenuButton = (props: MenuButtonProps) => {
   const componentStyles = useComponentStyles('MenuButton');
   const { isExpanded } = useMenuButtonContext();
   return (
-    <ReachMenuButton
-      as={BaseButton}
+    <BaseMenuButton
       minWidth="140px"
       justifyContent="space-between"
-      p="12px 15px"
+      padding="12px 15px"
       boxShadow={isExpanded ? '0 0 0 2px #CBBEE7' : 'none'}
       {...componentStyles}
       {...props}
@@ -150,9 +149,9 @@ 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 BaseButton = styled('button').withConfig({
+const BaseMenuButton = styled(ReachMenuButton).withConfig({
   shouldForwardProp: shouldForwardProp,
-})<MinervaProps>(
+})<MinervaProps & ReachMenuButtonProps>(
   {
     boxSizing: 'border-box',
     minWidth: 0,

From 0dba3a76194af3154df6f6e69ec964f21d51acf0 Mon Sep 17 00:00:00 2001
From: Matt Wood <matt@cratebind.com>
Date: Wed, 2 Jun 2021 10:34:58 -0500
Subject: [PATCH 05/12] fix: update menu snapshot

---
 test/__snapshots__/menu.test.tsx.snap | 176 +++-----------------------
 1 file changed, 18 insertions(+), 158 deletions(-)

diff --git a/test/__snapshots__/menu.test.tsx.snap b/test/__snapshots__/menu.test.tsx.snap
index 1c9bf9a4..f9a44942 100644
--- a/test/__snapshots__/menu.test.tsx.snap
+++ b/test/__snapshots__/menu.test.tsx.snap
@@ -4,91 +4,23 @@ exports[`<Menu /> should render when positioned to Right: Closed Menu 1`] = `
 .c0 {
   box-sizing: border-box;
   min-width: 0;
-  -webkit-transition: all 150ms ease 0s;
-  transition: all 150ms ease 0s;
-  outline: none;
-  cursor: pointer;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
-  background-color: #fff;
-  border-width: 1px;
-  color: #374151;
-  font-weight: 500;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  position: relative;
-  white-space: nowrap;
-  vertical-align: middle;
-  font-size: 14px;
-  line-height: 20px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  padding-left: 16px;
-  padding-right: 16px;
-  border-radius: 5px;
-  border-style: solid;
-  border-color: #d2d6dc;
-}
-
-.c1:hover backgroundColor {
-  50: #fdf2f2;
-  100: #fde8e8;
-  200: #fbd5d5;
-  300: #f8b4b4;
-  400: #f98080;
-  500: #f05252;
-  600: #e02424;
-  700: #c81e1e;
-  800: #9b1c1c;
-  900: #771d1d;
-}
-
-.c1:focus {
-  border-color: #a4cafe;
-  box-shadow: 0 0 0 3px rgba(118,169,250,.45);
-  outline: 0;
-}
-
-.c1:active,
-.c1[data-active=true] {
-  border-color: #a4cafe;
-  box-shadow: 0 0 0 3px rgba(118,169,250,.45);
-  outline: 0;
-}
-
-.c1:disabled,
-.c1:disabled:focus,
-.c1:disabled:hover,
-.c1[aria-disabled=true],
-.c1[aria-disabled=true]:focus,
-.c1[aria-disabled=true]:hover {
-  opacity: 0.4;
-  cursor: not-allowed;
+  min-width: 140px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  padding: 12px 15px;
+  box-shadow: none;
 }
 
 <div>
   <button
-    aria-busy="false"
     aria-controls="menu--7"
     aria-haspopup="true"
-    class="c0 c1"
+    class="c0"
     data-reach-menu-button=""
     data-testid="menu-button"
     id="menu-button--menu--7"
-    role="button"
     type="button"
   >
     Actions 
@@ -99,14 +31,12 @@ exports[`<Menu /> should render when positioned to Right: Closed Menu 1`] = `
 exports[`<Menu /> should render when positioned to Right: Open Menu 1`] = `
 <div>
   <button
-    aria-busy="false"
     aria-controls="menu--7"
     aria-haspopup="true"
-    class="sc-bdnxRM sc-eCApnc eJeGwH vEjHx"
+    class="sc-dIvrsQ jSOwKS"
     data-reach-menu-button=""
     data-testid="menu-button"
     id="menu-button--menu--7"
-    role="button"
     type="button"
   >
     Actions 
@@ -118,91 +48,23 @@ exports[`<Menu /> should render: Closed Menu 1`] = `
 .c0 {
   box-sizing: border-box;
   min-width: 0;
-  -webkit-transition: all 150ms ease 0s;
-  transition: all 150ms ease 0s;
-  outline: none;
-  cursor: pointer;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
-  background-color: #fff;
-  border-width: 1px;
-  color: #374151;
-  font-weight: 500;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  position: relative;
-  white-space: nowrap;
-  vertical-align: middle;
-  font-size: 14px;
-  line-height: 20px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  padding-left: 16px;
-  padding-right: 16px;
-  border-radius: 5px;
-  border-style: solid;
-  border-color: #d2d6dc;
-}
-
-.c1:hover backgroundColor {
-  50: #fdf2f2;
-  100: #fde8e8;
-  200: #fbd5d5;
-  300: #f8b4b4;
-  400: #f98080;
-  500: #f05252;
-  600: #e02424;
-  700: #c81e1e;
-  800: #9b1c1c;
-  900: #771d1d;
-}
-
-.c1:focus {
-  border-color: #a4cafe;
-  box-shadow: 0 0 0 3px rgba(118,169,250,.45);
-  outline: 0;
-}
-
-.c1:active,
-.c1[data-active=true] {
-  border-color: #a4cafe;
-  box-shadow: 0 0 0 3px rgba(118,169,250,.45);
-  outline: 0;
-}
-
-.c1:disabled,
-.c1:disabled:focus,
-.c1:disabled:hover,
-.c1[aria-disabled=true],
-.c1[aria-disabled=true]:focus,
-.c1[aria-disabled=true]:hover {
-  opacity: 0.4;
-  cursor: not-allowed;
+  min-width: 140px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  padding: 12px 15px;
+  box-shadow: none;
 }
 
 <div>
   <button
-    aria-busy="false"
     aria-controls="menu--1"
     aria-haspopup="true"
-    class="c0 c1"
+    class="c0"
     data-reach-menu-button=""
     data-testid="menu-button"
     id="menu-button--menu--1"
-    role="button"
     type="button"
   >
     Actions 
@@ -213,14 +75,12 @@ exports[`<Menu /> should render: Closed Menu 1`] = `
 exports[`<Menu /> should render: Open Menu 1`] = `
 <div>
   <button
-    aria-busy="false"
     aria-controls="menu--1"
     aria-haspopup="true"
-    class="sc-bdnxRM sc-eCApnc eJeGwH vEjHx"
+    class="sc-dIvrsQ jSOwKS"
     data-reach-menu-button=""
     data-testid="menu-button"
     id="menu-button--menu--1"
-    role="button"
     type="button"
   >
     Actions 

From 6f7e74ec0afdf26c183db652737314f4bf6a8db1 Mon Sep 17 00:00:00 2001
From: iqra-javed <35740252+iqra-javed@users.noreply.github.com>
Date: Wed, 2 Jun 2021 11:06:19 -0500
Subject: [PATCH 06/12] fix: fix menu button styles

---
 src/Menu/index.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/Menu/index.tsx b/src/Menu/index.tsx
index e25da0a5..7f396fcb 100644
--- a/src/Menu/index.tsx
+++ b/src/Menu/index.tsx
@@ -33,8 +33,13 @@ type MenuButtonProps = ReachMenuButtonProps & MinervaProps;
 export const MenuButton = (props: MenuButtonProps) => {
   const componentStyles = useComponentStyles('MenuButton');
   const { isExpanded } = useMenuButtonContext();
+
   return (
     <BaseMenuButton
+      display="flex"
+      alignItems="center"
+      border="1px solid #E0E0E0"
+      borderRadius="5px"
       minWidth="140px"
       justifyContent="space-between"
       padding="12px 15px"

From 223695fc766239c649f528168d594e9a2faf24b5 Mon Sep 17 00:00:00 2001
From: Matt Wood <matt@cratebind.com>
Date: Wed, 2 Jun 2021 11:22:16 -0500
Subject: [PATCH 07/12] fix: extract pseudo styles to function, use pseudo
 styles in menu button

---
 .storybook/main.js                  |   1 +
 package.json                        |   1 +
 src/Menu/index.tsx                  |   9 +-
 src/PseudoBox/PseudoBox.stories.tsx |  18 ++++
 src/PseudoBox/index.tsx             | 162 ++++++++++++++--------------
 yarn.lock                           |   7 ++
 6 files changed, 112 insertions(+), 86 deletions(-)
 create mode 100644 src/PseudoBox/PseudoBox.stories.tsx

diff --git a/.storybook/main.js b/.storybook/main.js
index 86e57839..be0855ad 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -5,6 +5,7 @@ module.exports = {
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   typescript: {
     check: false, // type-check stories during Storybook build
+    reactDocgen: false,
   },
   webpackFinal: async (config) => {
     // allow __DEV__ macro to be used
diff --git a/package.json b/package.json
index 335e0df9..6784aaf7 100644
--- a/package.json
+++ b/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",
diff --git a/src/Menu/index.tsx b/src/Menu/index.tsx
index e25da0a5..d3929e97 100644
--- a/src/Menu/index.tsx
+++ b/src/Menu/index.tsx
@@ -19,7 +19,7 @@ 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;
 
@@ -151,10 +151,7 @@ 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 & ReachMenuButtonProps>(
-  {
-    boxSizing: 'border-box',
-    minWidth: 0,
-  },
+})<MinervaProps & PseudoBoxProps & ReachMenuButtonProps>(
+  createPseudoStyles,
   systemProps
 );
diff --git a/src/PseudoBox/PseudoBox.stories.tsx b/src/PseudoBox/PseudoBox.stories.tsx
new file mode 100644
index 00000000..4e7591d9
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/PseudoBox/index.tsx b/src/PseudoBox/index.tsx
index 15f742d5..67e65278 100644
--- a/src/PseudoBox/index.tsx
+++ b/src/PseudoBox/index.tsx
@@ -1,9 +1,11 @@
 // import React from 'react';
 import styled, { CSSObject } from 'styled-components';
-import css from '@styled-system/css';
+import css, { SystemStyleObject } from '@styled-system/css';
 import { MinervaProps, Box, shouldForwardProp } from '../layout';
 // import { transformAliasProps } from '../utils';
 
+type PseudoBoxValue = string | number | CSSObject | undefined;
+
 export interface PseudoBoxProps {
   /**
    * Styles for CSS selector `&:after`
@@ -14,7 +16,7 @@ export interface PseudoBoxProps {
    * <PseudoBox _after={{content:`""` }}/>
    * ```
    */
-  _after?: string | number | CSSObject | undefined;
+  _after?: PseudoBoxValue;
   /**
    * Styles for CSS selector `&:before`
    *
@@ -24,41 +26,41 @@ export interface PseudoBoxProps {
    * <PseudoBox _before={{content:`""` }}/>
    * ```
    */
-  _before?: string | number | CSSObject | undefined;
+  _before?: PseudoBoxValue;
   /**
    * Styles for CSS selector `&:focus`
    *
    */
-  _focus?: string | number | CSSObject | undefined;
+  _focus?: PseudoBoxValue;
   /**
    * Styles for CSS selector `&:hover`
    */
-  _hover?: string | number | CSSObject | undefined;
+  _hover?: PseudoBoxValue;
   /**
    * Styles for CSS Selector `&:active`
    */
-  _active?: string | number | CSSObject | undefined;
+  _active?: PseudoBoxValue;
   /**
    * Styles for CSS Selector `&[aria-pressed=true]`
    * Typically used to style the current "pressed" state of toggle buttons
    */
-  _pressed?: string | number | CSSObject | undefined;
+  _pressed?: PseudoBoxValue;
   /**
    * Styles to apply when the ARIA attribute `aria-selected` is `true`
    * - CSS selector `&[aria-selected=true]`
    */
-  _selected?: string | number | CSSObject | undefined;
+  _selected?: PseudoBoxValue;
   /**
    * Styles to apply when a child of this element has received focus
    * - CSS Selector `&:focus-within`
    */
-  _focusWithin?: string | number | CSSObject | undefined;
+  _focusWithin?: PseudoBoxValue;
 
   /**
    * Styles to apply when the ARIA attribute `aria-invalid` is `true`
    * - CSS selector `&[aria-invalid=true]`
    */
-  _invalid?: string | number | CSSObject | undefined;
+  _invalid?: PseudoBoxValue;
   /**
    * Styles to apply when this element is disabled. The passed styles are applied to these CSS selectors:
    * - `&[aria-disabled=true]`
@@ -68,68 +70,68 @@ export interface PseudoBoxProps {
    * - `&:focus[aria-disabled=true]`
    * - `&:hover[aria-disabled=true]`
    */
-  _disabled?: string | number | CSSObject | undefined;
+  _disabled?: PseudoBoxValue;
   /**
    * Styles to apply when the ARIA attribute `aria-grabbed` is `true`
    * - CSS selector `&[aria-grabbed=true]`
    */
-  _grabbed?: string | number | CSSObject | undefined;
+  _grabbed?: PseudoBoxValue;
   /**
    * Styles to apply when the ARIA attribute `aria-expanded` is `true`
    * - CSS selector `&[aria-expanded=true]`
    */
-  _expanded?: string | number | CSSObject | undefined;
+  _expanded?: PseudoBoxValue;
   /**
    * Styles to apply when the ARIA attribute `aria-checked` is `true`
    * - CSS selector `&[aria-checked=true]`
    */
-  _checked?: string | number | CSSObject | undefined;
+  _checked?: PseudoBoxValue;
   /**
    * Styles to apply when the ARIA attribute `aria-checked` is `mixed`
    * - CSS selector `&[aria-checked=mixed]`
    */
-  _mixed?: string | number | CSSObject | undefined;
+  _mixed?: PseudoBoxValue;
   /**
    * Styles for CSS Selector `&:nth-child(odd)`
    */
-  _odd?: string | number | CSSObject | undefined;
+  _odd?: PseudoBoxValue;
   /**
    * Styles for CSS Selector `&:nth-child(even)`
    */
-  _even?: string | number | CSSObject | undefined;
+  _even?: PseudoBoxValue;
   /**
    * Styles for CSS Selector `&:visited`
    */
-  _visited?: string | number | CSSObject | undefined;
+  _visited?: PseudoBoxValue;
   /**
    * Styles for CSS Selector `&:readonly`
    */
-  _readOnly?: string | number | CSSObject | undefined;
+  _readOnly?: PseudoBoxValue;
   /**
    * Styles for CSS Selector `&:first-of-type`
    */
-  _first?: string | number | CSSObject | undefined;
+  _first?: PseudoBoxValue;
   /**
    * Styles for CSS Selector `&:last-of-type`
    */
-  _last?: string | number | CSSObject | undefined;
+  _last?: PseudoBoxValue;
   /**
    * Styles to apply when you hover on a parent that has `role=group`.
    */
-  _groupHover?: string | number | CSSObject | undefined;
+  _groupHover?: PseudoBoxValue;
   /**
    * Styles for CSS Selector `&:not(:first-of-type)`
    */
-  _notFirst?: string | number | CSSObject | undefined;
+  _notFirst?: PseudoBoxValue;
   /**
    * Styles for CSS Selector `&:not(:last-of-type)`
    */
-  _notLast?: string | number | CSSObject | undefined;
+  _notLast?: PseudoBoxValue;
   /**
    * Styles for CSS Selector `&::placeholder`.
    * Useful for inputs
    */
-  _placeholder?: string | number | CSSObject | undefined;
+  _placeholder?: PseudoBoxValue;
 }
 
 // export interface PseudoBoxProps = IPseudoBoxProps & MinervaProps;
@@ -162,62 +164,62 @@ const groupHover = '[role=group]:hover &';
 
 export type PseudoProps = MinervaProps & PseudoBoxProps;
 
+export function createPseudoStyles({
+  _after,
+  _focus,
+  _selected,
+  _focusWithin,
+  _hover,
+  _invalid,
+  _active,
+  _disabled,
+  _grabbed,
+  _pressed,
+  _expanded,
+  _visited,
+  _before,
+  _readOnly,
+  _first,
+  _notFirst,
+  _notLast,
+  _last,
+  _placeholder,
+  _checked,
+  _groupHover,
+  _mixed,
+  _odd,
+  _even,
+}: PseudoBoxProps) {
+  return css({
+    [hover]: _hover,
+    [focus]: _focus,
+    [active]: _active,
+    [visited]: _visited,
+    [disabled]: _disabled,
+    [selected]: _selected,
+    [invalid]: _invalid,
+    [expanded]: _expanded,
+    [grabbed]: _grabbed,
+    [readOnly]: _readOnly,
+    [first]: _first,
+    [notFirst]: _notFirst,
+    [notLast]: _notLast,
+    [last]: _last,
+    [odd]: _odd,
+    [even]: _even,
+    [mixed]: _mixed,
+    [checked]: _checked,
+    [pressed]: _pressed,
+    [groupHover]: _groupHover,
+    '&:before': _before,
+    '&:after': _after,
+    '&:focus-within': _focusWithin,
+    '&::placeholder': _placeholder,
+  } as SystemStyleObject);
+}
+
 const PseudoBox = styled(Box).withConfig({
   shouldForwardProp,
-})<PseudoProps>(
-  ({
-    _after,
-    _focus,
-    _selected,
-    _focusWithin,
-    _hover,
-    _invalid,
-    _active,
-    _disabled,
-    _grabbed,
-    _pressed,
-    _expanded,
-    _visited,
-    _before,
-    _readOnly,
-    _first,
-    _notFirst,
-    _notLast,
-    _last,
-    _placeholder,
-    _checked,
-    _groupHover,
-    _mixed,
-    _odd,
-    _even,
-  }: PseudoBoxProps) => {
-    return css({
-      [hover]: _hover,
-      [focus]: _focus,
-      [active]: _active,
-      [visited]: _visited,
-      [disabled]: _disabled,
-      [selected]: _selected,
-      [invalid]: _invalid,
-      [expanded]: _expanded,
-      [grabbed]: _grabbed,
-      [readOnly]: _readOnly,
-      [first]: _first,
-      [notFirst]: _notFirst,
-      [notLast]: _notLast,
-      [last]: _last,
-      [odd]: _odd,
-      [even]: _even,
-      [mixed]: _mixed,
-      [checked]: _checked,
-      [pressed]: _pressed,
-      [groupHover]: _groupHover,
-      '&:before': _before,
-      '&:after': _after,
-      '&:focus-within': _focusWithin,
-      '&::placeholder': _placeholder,
-    });
-  }
-);
+})<PseudoProps>(createPseudoStyles);
 
 export default PseudoBox;
diff --git a/yarn.lock b/yarn.lock
index a7697551..1ace20b7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5197,6 +5197,13 @@
   dependencies:
     csstype "^3.0.2"
 
+"@types/styled-system__css@^5.0.15":
+  version "5.0.15"
+  resolved "https://registry.yarnpkg.com/@types/styled-system__css/-/styled-system__css-5.0.15.tgz#f6f896e33393f8b3763f275afaa84261dae77a54"
+  integrity sha512-bbFlY2ATFEaWEMOllEqMktSzq4yGPAiZSrjGUQ124LSStm9QPhKErOuTxXfJi8VuymaQ+g1uC8AbC2o3BpgQyA==
+  dependencies:
+    csstype "^3.0.2"
+
 "@types/tapable@^1", "@types/tapable@^1.0.5":
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.7.tgz#545158342f949e8fd3bfd813224971ecddc3fac4"

From ee3a88f90a3f25a72024c9954eb92bf73a5f32b1 Mon Sep 17 00:00:00 2001
From: Matt Wood <matt@cratebind.com>
Date: Wed, 2 Jun 2021 11:25:01 -0500
Subject: [PATCH 08/12] fix: add base theme styles to MenuButton

---
 src/theme.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/theme.ts b/src/theme.ts
index 3fb5b731..de780193 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -121,6 +121,10 @@ const defaultTheme: MinervaTheme = {
   Link: {},
   Tabs: {},
   MenuButton: {
+    display: 'flex',
+    alignItems: 'center',
+    border: '1px solid #E0E0E0',
+    borderRadius: '5px',
     _hover: {
       boxShadow: '0 0 0 2px #CBBEE7',
     },

From 96326b26923a60ec74c9f5a8fe2519c963471f86 Mon Sep 17 00:00:00 2001
From: iqra-javed <35740252+iqra-javed@users.noreply.github.com>
Date: Wed, 2 Jun 2021 15:36:11 -0500
Subject: [PATCH 09/12] fix: fix prop forwarding on MenuItem and MenuLink, add
 example in docs

---
 docs/pages/components/Menu.mdx | 34 ++++++++++++++++++
 src/Menu/Menu.stories.tsx      |  2 +-
 src/Menu/index.tsx             | 64 ++++++++++++++++++----------------
 src/theme.ts                   | 23 ++++++++++++
 4 files changed, 91 insertions(+), 32 deletions(-)

diff --git a/docs/pages/components/Menu.mdx b/docs/pages/components/Menu.mdx
index f7b108fd..7052fb29 100644
--- a/docs/pages/components/Menu.mdx
+++ b/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
diff --git a/src/Menu/Menu.stories.tsx b/src/Menu/Menu.stories.tsx
index df522c5d..bae75188 100644
--- a/src/Menu/Menu.stories.tsx
+++ b/src/Menu/Menu.stories.tsx
@@ -42,7 +42,7 @@ const Template: Story<MenuContainerProps> = ({}) => {
           <MenuIcon />
         </MenuButton>
         <MenuList>
-          <MenuItem>Download</MenuItem>
+          <MenuItem onSelect={() => {}}>Download</MenuItem>
           <MenuItem onSelect={() => alert('Copy')}>Create a Copy</MenuItem>
           <MenuItem onSelect={() => alert('Mark as Draft')}>
             Mark as Draft
diff --git a/src/Menu/index.tsx b/src/Menu/index.tsx
index cb7b0598..a747bcc5 100644
--- a/src/Menu/index.tsx
+++ b/src/Menu/index.tsx
@@ -9,6 +9,8 @@ import {
   MenuProps,
   MenuButtonProps as ReachMenuButtonProps,
   MenuItemsProps,
+  MenuItemProps as ReachMenuItemProps,
+  MenuLinkProps as ReachMenuLinkProps,
   useMenuButtonContext,
 } from '@reach/menu-button';
 import { positionDefault, positionRight } from '@reach/popover';
@@ -36,13 +38,6 @@ export const MenuButton = (props: MenuButtonProps) => {
 
   return (
     <BaseMenuButton
-      display="flex"
-      alignItems="center"
-      border="1px solid #E0E0E0"
-      borderRadius="5px"
-      minWidth="140px"
-      justifyContent="space-between"
-      padding="12px 15px"
       boxShadow={isExpanded ? '0 0 0 2px #CBBEE7' : 'none'}
       {...componentStyles}
       {...props}
@@ -116,30 +111,37 @@ export function MenuIcon() {
   );
 }
 
-export const MenuItem = styled(ReachMenuItem)`
-  color: #000;
-  padding: 0.625rem 0.9375rem;
-  font-size: 14px;
-  line-height: 112.6%;
-  cursor: pointer;
-
-  &[data-selected] {
-    background: #f5f5f5;
-  }
-`;
-
-export const MenuLink = styled(ReachMenuLink)`
-  color: #000;
-  padding: 0.625rem 0.9375rem;
-  font-size: 14px;
-  line-height: 112.6%;
-  display: block;
-  cursor: pointer;
-
-  &[data-selected] {
-    background: #f5f5f5;
-  }
-`;
+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
diff --git a/src/theme.ts b/src/theme.ts
index de780193..391401ff 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -14,6 +14,8 @@ export interface MinervaTheme extends Theme {
   Drawer?: ThemeComponent;
   Heading?: ThemeComponent;
   MenuButton?: ThemeComponent;
+  MenuItem?: ThemeComponent;
+  MenuLink?: ThemeComponent;
   Modal?: ThemeComponent;
   ModalContent?: ThemeComponent;
   ModalBody?: ThemeComponent;
@@ -123,8 +125,11 @@ const defaultTheme: MinervaTheme = {
   MenuButton: {
     display: 'flex',
     alignItems: 'center',
+    justifyContent: 'space-between',
     border: '1px solid #E0E0E0',
     borderRadius: '5px',
+    minWidth: '140px',
+    padding: '12px 15px',
     _hover: {
       boxShadow: '0 0 0 2px #CBBEE7',
     },
@@ -140,6 +145,24 @@ const defaultTheme: MinervaTheme = {
       color: 'rgba(30, 6, 84, 0.5)',
     },
   },
+  MenuItem: {
+    color: '#000',
+    padding: '0.625rem 0.9375rem',
+    fontSize: '14px',
+    lineHeight: '112.6%',
+    _hover: {
+      background: '#f5f5f5',
+    },
+  },
+  MenuLink: {
+    color: '#000',
+    padding: ' 0.625rem 0.9375rem',
+    fontSize: '14px',
+    lineHeight: '112.6%',
+    _hover: {
+      background: '#f5f5f5',
+    },
+  },
   Modal: {},
   ModalHeader: {},
   ModalBody: {},

From 961c83fec7219dc76566a592a198981412ef3374 Mon Sep 17 00:00:00 2001
From: iqra-javed <35740252+iqra-javed@users.noreply.github.com>
Date: Wed, 2 Jun 2021 15:46:40 -0500
Subject: [PATCH 10/12] fix: update menu snapshots

---
 test/__snapshots__/menu.test.tsx.snap | 84 +++++++++++++++++++++++----
 1 file changed, 74 insertions(+), 10 deletions(-)

diff --git a/test/__snapshots__/menu.test.tsx.snap b/test/__snapshots__/menu.test.tsx.snap
index f9a44942..7ed9f8c4 100644
--- a/test/__snapshots__/menu.test.tsx.snap
+++ b/test/__snapshots__/menu.test.tsx.snap
@@ -2,15 +2,47 @@
 
 exports[`<Menu /> should render when positioned to Right: Closed Menu 1`] = `
 .c0 {
-  box-sizing: border-box;
-  min-width: 0;
-  min-width: 140px;
+  box-shadow: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
+  border: 1px solid #E0E0E0;
+  border-radius: 5px;
+  min-width: 140px;
   padding: 12px 15px;
-  box-shadow: none;
+}
+
+.c0:hover {
+  box-shadow: 0 0 0 2px #CBBEE7;
+}
+
+.c0:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #CBBEE7;
+}
+
+.c0:active,
+.c0[data-active=true] {
+  box-shadow: 0 0 0 2px #CBBEE7;
+}
+
+.c0:disabled,
+.c0:disabled:focus,
+.c0:disabled:hover,
+.c0[aria-disabled=true],
+.c0[aria-disabled=true]:focus,
+.c0[aria-disabled=true]:hover {
+  background: #E0E0E0;
+  color: rgba(30,6,84,0.5);
 }
 
 <div>
@@ -33,7 +65,7 @@ exports[`<Menu /> should render when positioned to Right: Open Menu 1`] = `
   <button
     aria-controls="menu--7"
     aria-haspopup="true"
-    class="sc-dIvrsQ jSOwKS"
+    class="sc-bkbkJK bjgAvd"
     data-reach-menu-button=""
     data-testid="menu-button"
     id="menu-button--menu--7"
@@ -46,15 +78,47 @@ exports[`<Menu /> should render when positioned to Right: Open Menu 1`] = `
 
 exports[`<Menu /> should render: Closed Menu 1`] = `
 .c0 {
-  box-sizing: border-box;
-  min-width: 0;
-  min-width: 140px;
+  box-shadow: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
+  border: 1px solid #E0E0E0;
+  border-radius: 5px;
+  min-width: 140px;
   padding: 12px 15px;
-  box-shadow: none;
+}
+
+.c0:hover {
+  box-shadow: 0 0 0 2px #CBBEE7;
+}
+
+.c0:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #CBBEE7;
+}
+
+.c0:active,
+.c0[data-active=true] {
+  box-shadow: 0 0 0 2px #CBBEE7;
+}
+
+.c0:disabled,
+.c0:disabled:focus,
+.c0:disabled:hover,
+.c0[aria-disabled=true],
+.c0[aria-disabled=true]:focus,
+.c0[aria-disabled=true]:hover {
+  background: #E0E0E0;
+  color: rgba(30,6,84,0.5);
 }
 
 <div>
@@ -77,7 +141,7 @@ exports[`<Menu /> should render: Open Menu 1`] = `
   <button
     aria-controls="menu--1"
     aria-haspopup="true"
-    class="sc-dIvrsQ jSOwKS"
+    class="sc-bkbkJK bjgAvd"
     data-reach-menu-button=""
     data-testid="menu-button"
     id="menu-button--menu--1"

From ba12f6c454e06a94eceb0899a888f690bf06d0d4 Mon Sep 17 00:00:00 2001
From: iqra-javed <35740252+iqra-javed@users.noreply.github.com>
Date: Wed, 2 Jun 2021 16:12:42 -0500
Subject: [PATCH 11/12] fix: add more menu tests

---
 test/__snapshots__/menu.test.tsx.snap |  8 ++++----
 test/menu.test.tsx                    | 27 +++++++++++++++++++++++++--
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/test/__snapshots__/menu.test.tsx.snap b/test/__snapshots__/menu.test.tsx.snap
index 7ed9f8c4..ffe89f51 100644
--- a/test/__snapshots__/menu.test.tsx.snap
+++ b/test/__snapshots__/menu.test.tsx.snap
@@ -47,12 +47,12 @@ exports[`<Menu /> should render when positioned to Right: Closed Menu 1`] = `
 
 <div>
   <button
-    aria-controls="menu--7"
+    aria-controls="menu--12"
     aria-haspopup="true"
     class="c0"
     data-reach-menu-button=""
     data-testid="menu-button"
-    id="menu-button--menu--7"
+    id="menu-button--menu--12"
     type="button"
   >
     Actions 
@@ -63,12 +63,12 @@ exports[`<Menu /> should render when positioned to Right: Closed Menu 1`] = `
 exports[`<Menu /> should render when positioned to Right: Open Menu 1`] = `
 <div>
   <button
-    aria-controls="menu--7"
+    aria-controls="menu--12"
     aria-haspopup="true"
     class="sc-bkbkJK bjgAvd"
     data-reach-menu-button=""
     data-testid="menu-button"
-    id="menu-button--menu--7"
+    id="menu-button--menu--12"
     type="button"
   >
     Actions 
diff --git a/test/menu.test.tsx b/test/menu.test.tsx
index f2db77b4..6d9301ab 100644
--- a/test/menu.test.tsx
+++ b/test/menu.test.tsx
@@ -21,12 +21,22 @@ const ExampleMenu = (props: MenuListProps) => (
       Actions <Icon name="chevron-down" ml={2} size="14px" />
     </MenuButton>
     <MenuList data-testid="menu-list" {...props}>
-      <MenuItem onSelect={() => alert('Download')}>Download</MenuItem>
+      <MenuItem
+        color="#ff0000"
+        data-testid="menu-item"
+        onSelect={() => alert('Download')}
+      >
+        Download
+      </MenuItem>
       <MenuItem onSelect={() => alert('Copy')}>Create a Copy</MenuItem>
       <MenuItem onSelect={() => alert('Mark as Draft')}>Mark as Draft</MenuItem>
       <MenuItem onSelect={() => alert('Delete')}>Delete</MenuItem>
       <MenuDivider />
-      <MenuLink href="https://minerva-ui-docs.vercel.app">
+      <MenuLink
+        color="#800080"
+        data-testid="menu-link"
+        href="https://minerva-ui-docs.vercel.app"
+      >
         Open Documentation
       </MenuLink>
     </MenuList>
@@ -51,6 +61,19 @@ describe('<Menu />', () => {
     expect(container).toMatchSnapshot('Open Menu');
   });
 
+  it('should pass basic style props', () => {
+    const color = '#ff0000';
+    const color2 = '#800080';
+    const { queryByTestId } = render(
+      <ThemeProvider>
+        <ExampleMenu menuPosition="right" />
+      </ThemeProvider>
+    );
+
+    expect(queryByTestId('menu-item')).toHaveStyleRule('color', color);
+    expect(queryByTestId('menu-link')).toHaveStyleRule('color', color2);
+  });
+
   it('should render when positioned to Right', () => {
     const { container, queryByTestId } = render(
       <ThemeProvider>

From fcd7eb9cac8babb57f3293c7d934f504410228a0 Mon Sep 17 00:00:00 2001
From: iqra-javed <35740252+iqra-javed@users.noreply.github.com>
Date: Fri, 4 Jun 2021 13:02:31 -0500
Subject: [PATCH 12/12] fix: add menu icon test, update test snapshots

---
 src/Menu/index.tsx                    |  3 +-
 test/__snapshots__/menu.test.tsx.snap | 88 +++++++++++++++++++++++++++
 test/menu.test.tsx                    |  5 +-
 3 files changed, 94 insertions(+), 2 deletions(-)

diff --git a/src/Menu/index.tsx b/src/Menu/index.tsx
index a747bcc5..24f4b453 100644
--- a/src/Menu/index.tsx
+++ b/src/Menu/index.tsx
@@ -94,7 +94,7 @@ export const MenuList = ({
   </ReachMenuPopover>
 );
 
-export function MenuIcon() {
+export function MenuIcon(props: MinervaProps) {
   const { isExpanded } = useMenuButtonContext();
 
   return (
@@ -107,6 +107,7 @@ export function MenuIcon() {
       h="14px"
       color="#000"
       aria-hidden="true"
+      {...props}
     />
   );
 }
diff --git a/test/__snapshots__/menu.test.tsx.snap b/test/__snapshots__/menu.test.tsx.snap
index ffe89f51..c3063947 100644
--- a/test/__snapshots__/menu.test.tsx.snap
+++ b/test/__snapshots__/menu.test.tsx.snap
@@ -1,6 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Menu /> should render when positioned to Right: Closed Menu 1`] = `
+.c1 {
+  box-sizing: border-box;
+  min-width: 0;
+  -webkit-transition: -webkit-transform 0.2s;
+  -webkit-transition: transform 0.2s;
+  transition: transform 0.2s;
+  -webkit-transform-origin: center;
+  -ms-transform-origin: center;
+  transform-origin: center;
+  width: 14px;
+  height: 14px;
+  color: #000;
+}
+
 .c0 {
   box-shadow: none;
   display: -webkit-box;
@@ -56,6 +70,21 @@ exports[`<Menu /> should render when positioned to Right: Closed Menu 1`] = `
     type="button"
   >
     Actions 
+    <svg
+      aria-hidden="true"
+      class="c1"
+      data-testid="menu-icon"
+      fill="none"
+      height="7"
+      viewBox="0 0 10 7"
+      width="10"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.95174 6.54518L0.70874 2.30218L2.12374 0.888184L4.95174 3.71718L7.77974 0.888184L9.19474 2.30218L4.95174 6.54518Z"
+        fill="black"
+      />
+    </svg>
   </button>
 </div>
 `;
@@ -72,11 +101,40 @@ exports[`<Menu /> should render when positioned to Right: Open Menu 1`] = `
     type="button"
   >
     Actions 
+    <svg
+      aria-hidden="true"
+      class="sc-bdnxRM dZCMJF"
+      data-testid="menu-icon"
+      fill="none"
+      height="7"
+      viewBox="0 0 10 7"
+      width="10"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.95174 6.54518L0.70874 2.30218L2.12374 0.888184L4.95174 3.71718L7.77974 0.888184L9.19474 2.30218L4.95174 6.54518Z"
+        fill="black"
+      />
+    </svg>
   </button>
 </div>
 `;
 
 exports[`<Menu /> should render: Closed Menu 1`] = `
+.c1 {
+  box-sizing: border-box;
+  min-width: 0;
+  -webkit-transition: -webkit-transform 0.2s;
+  -webkit-transition: transform 0.2s;
+  transition: transform 0.2s;
+  -webkit-transform-origin: center;
+  -ms-transform-origin: center;
+  transform-origin: center;
+  width: 14px;
+  height: 14px;
+  color: #000;
+}
+
 .c0 {
   box-shadow: none;
   display: -webkit-box;
@@ -132,6 +190,21 @@ exports[`<Menu /> should render: Closed Menu 1`] = `
     type="button"
   >
     Actions 
+    <svg
+      aria-hidden="true"
+      class="c1"
+      data-testid="menu-icon"
+      fill="none"
+      height="7"
+      viewBox="0 0 10 7"
+      width="10"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.95174 6.54518L0.70874 2.30218L2.12374 0.888184L4.95174 3.71718L7.77974 0.888184L9.19474 2.30218L4.95174 6.54518Z"
+        fill="black"
+      />
+    </svg>
   </button>
 </div>
 `;
@@ -148,6 +221,21 @@ exports[`<Menu /> should render: Open Menu 1`] = `
     type="button"
   >
     Actions 
+    <svg
+      aria-hidden="true"
+      class="sc-bdnxRM dZCMJF"
+      data-testid="menu-icon"
+      fill="none"
+      height="7"
+      viewBox="0 0 10 7"
+      width="10"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.95174 6.54518L0.70874 2.30218L2.12374 0.888184L4.95174 3.71718L7.77974 0.888184L9.19474 2.30218L4.95174 6.54518Z"
+        fill="black"
+      />
+    </svg>
   </button>
 </div>
 `;
diff --git a/test/menu.test.tsx b/test/menu.test.tsx
index 6d9301ab..18e1919f 100644
--- a/test/menu.test.tsx
+++ b/test/menu.test.tsx
@@ -11,6 +11,7 @@ import {
   ThemeProvider,
   MenuListProps,
   MenuDivider,
+  MenuIcon,
 } from '../src';
 // import { axe, toHaveNoViolations } from 'jest-axe';
 // expect.extend(toHaveNoViolations);
@@ -18,7 +19,7 @@ import {
 const ExampleMenu = (props: MenuListProps) => (
   <MenuContainer data-testid="menu-container">
     <MenuButton data-testid="menu-button">
-      Actions <Icon name="chevron-down" ml={2} size="14px" />
+      Actions <MenuIcon data-testid="menu-icon" />
     </MenuButton>
     <MenuList data-testid="menu-list" {...props}>
       <MenuItem
@@ -83,6 +84,8 @@ describe('<Menu />', () => {
 
     expect(queryByTestId('menu-button')).toBeInTheDocument();
 
+    expect(queryByTestId('menu-icon')).toBeInTheDocument();
+
     expect(container).toMatchSnapshot('Closed Menu');
 
     fireEvent.click(screen.getByTestId('menu-button'));