add open transition to menu (codesandbox#3670)

Author: siddharthkp

packages/components/src/components/IconButton/index.tsx

@@ -1,5 +1,6 @@
 // @ts-nocheck
 import React from 'react';
+import deepmerge from 'deepmerge';
 import { Button } from '../Button';
 import { Icon, IconNames } from '../Icon';
 
@@ -16,24 +17,28 @@ export const IconButton: React.FC<IconButtonProps> = ({
   name,
   title,
   size,
+  css = {},
   ...props
 }) => (
   // @ts-ignore
   <Button
     title={title}
     variant="link"
-    css={{
-      width: '26px', // same width as (height of the button)
-      padding: 0,
-      borderRadius: '50%',
-      ':hover:not(:disabled)': {
-        backgroundColor: 'secondaryButton.background',
+    css={deepmerge(
+      {
+        width: '26px', // same width as (height of the button)
+        padding: 0,
+        borderRadius: '50%',
+        ':hover:not(:disabled)': {
+          backgroundColor: 'secondaryButton.background',
+        },
+        ':focus:not(:disabled)': {
+          outline: 'none',
+          backgroundColor: 'secondaryButton.background',
+        },
       },
-      ':focus:not(:disabled)': {
-        outline: 'none',
-        backgroundColor: 'secondaryButton.background',
-      },
-    }}
+      css
+    )}
     // @ts-ignore
     {...props}
   >

packages/components/src/components/Menu/index.tsx

@@ -2,9 +2,30 @@ import React from 'react';
 import deepmerge from 'deepmerge';
 import css from '@styled-system/css';
 import * as ReachMenu from '@reach/menu-button';
-import { createGlobalStyle } from 'styled-components';
+import {
+  createGlobalStyle,
+  css as styledcss,
+  keyframes,
+} from 'styled-components';
 import { Element, Button, IconButton, List } from '../..';
 
+const transitions = {
+  slide: keyframes({
+    from: {
+      opacity: 0,
+      transform: 'translateY(-4px)',
+    },
+  }),
+  scale: keyframes({
+    from: {
+      opacity: 0,
+      transform: 'scale(0.7)',
+    },
+  }),
+};
+
+const MenuContext = React.createContext({ trigger: null });
+
 const Menu = ({ ...props }) => {
   const PortalStyles = createGlobalStyle(
     css({
@@ -20,6 +41,7 @@ const Menu = ({ ...props }) => {
         border: '1px solid',
         borderColor: 'menuList.border',
         ':focus': { outline: 'none' },
+        transform: 'translateY(4px)',
         // override reach ui styles
         padding: 0,
       },
@@ -38,13 +60,27 @@ const Menu = ({ ...props }) => {
         // override reach ui styles
         font: 'ineherit',
       },
-    })
+    }),
+    styledcss`
+      [data-reach-menu-list][data-trigger=MenuButton] {
+        animation: ${transitions.slide} 150ms ease-out;
+        transform-origin: top;
+      }
+      [data-reach-menu-list][data-trigger=MenuIconButton] {
+        animation: ${transitions.scale} 150ms ease-out;
+        transform-origin: top left;
+      } 
+    `
   );
 
+  const trigger = props.children[0].type.name;
+
   return (
-    <Element as={ReachMenu.Menu} data-component="Menu" {...props}>
+    <Element as={ReachMenu.Menu} {...props}>
       <PortalStyles />
-      {props.children}
+      <MenuContext.Provider value={{ trigger }}>
+        {props.children}
+      </MenuContext.Provider>
     </Element>
   );
 };
@@ -54,7 +90,15 @@ const MenuButton = props => (
     as={ReachMenu.MenuButton}
     variant="link"
     {...props}
-    css={deepmerge({ width: 'auto' }, props.css || {})}
+    css={deepmerge(
+      {
+        width: 'auto',
+        // disable scale feedback of buttons in menu
+        // to make the menu feel less jumpy
+        ':active:not(:disabled)': { transform: 'scale(1)' },
+      },
+      props.css || {}
+    )}
   >
     {props.children}
   </Button>
@@ -64,11 +108,19 @@ const MenuIconButton = props => (
   <IconButton as={ReachMenu.MenuButton} {...props} />
 );
 
-const MenuList = props => (
-  <List as={ReachMenu.MenuList} data-component="MenuList" {...props}>
-    {props.children}
-  </List>
-);
+const MenuList = props => {
+  const { trigger } = React.useContext(MenuContext);
+  return (
+    <List
+      as={ReachMenu.MenuList}
+      data-component="MenuList"
+      data-trigger={trigger}
+      {...props}
+    >
+      {props.children}
+    </List>
+  );
+};
 
 const MenuItem = props => (
   <Element as={ReachMenu.MenuItem} data-component="MenuItem" {...props} />

packages/components/src/components/Menu/menu.stories.tsx

@@ -16,10 +16,10 @@ export const Access = () => {
 
   return (
     <Stack justify="flex-end" align="center" css={{ '> *': { lineHeight: 1 } }}>
+      <Text size={2} variant="muted">
+        Everyone with link
+      </Text>{' '}
       <Menu>
-        <Text size={2} variant="muted">
-          Everyone with link
-        </Text>{' '}
         <Menu.Button css={{ color: 'white' }}>
           {selected}{' '}
           <Element
@@ -54,28 +54,14 @@ export const IconButton = () => {
   const [selected, select] = React.useState(options[0]);
 
   return (
-    <Stack justify="flex-end" align="center" css={{ '> *': { lineHeight: 1 } }}>
+    <Stack align="center" css={{ '> *': { lineHeight: 1 } }}>
       <Menu>
-        <Menu.Button
+        <Menu.IconButton
+          name="filter"
           css={{
             [selected !== options[0] && 'color']: 'blues.500',
           }}
-        >
-          <svg
-            width="14"
-            height="10"
-            viewBox="0 0 14 10"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d="M0 1C0 0.447715 0.447715 0 1 0H13C13.5523 0 14 0.447715 14 1C14 1.55228 13.5523 2 13 2H1C0.447716 2 0 1.55228 0 1ZM2 5C2 4.44772 2.44772 4 3 4H11C11.5523 4 12 4.44772 12 5C12 5.55228 11.5523 6 11 6H3C2.44772 6 2 5.55228 2 5ZM5 8C4.44772 8 4 8.44771 4 9C4 9.55229 4.44772 10 5 10H9C9.55228 10 10 9.55229 10 9C10 8.44771 9.55228 8 9 8H5Z"
-              fill="currentColor"
-            />
-          </svg>
-        </Menu.Button>
+        />
         <Menu.List>
           {options.map(option => (
             <Menu.Item onSelect={() => select(option)}>{option}</Menu.Item>