Add tooltip and dropdown style overrides (#373)

* Add style override for DropdownMenu when open
* Add style override for tooltip overlay
* Fix Icon option in styleguide demo

package.json

@@ -126,6 +126,7 @@
     },
     "setupFilesAfterEnv": [
       "<rootDir>/scripts/test/testSetup.js"
-    ]
+    ],
+    "snapshotSerializers": ["enzyme-to-json/serializer"]
   }
 }

src/components/Forms/__tests__/__snapshots__/Select.spec.js.snap

@@ -184,6 +184,7 @@ exports[`renders Select correctly 1`] = `
           </div>
           <div
             data-radium={true}
+            data-testid="menu-container"
             style={
               Object {
                 "display": "block",
@@ -558,6 +559,7 @@ exports[`renders Select w/ server error correctly 1`] = `
           </div>
           <div
             data-radium={true}
+            data-testid="menu-container"
             style={
               Object {
                 "display": "block",
@@ -934,6 +936,7 @@ exports[`renders disabled Select correctly 1`] = `
           </div>
           <div
             data-radium={true}
+            data-testid="menu-container"
             style={
               Object {
                 "display": "block",
@@ -1308,6 +1311,7 @@ exports[`renders invalid Select correctly 1`] = `
           </div>
           <div
             data-radium={true}
+            data-testid="menu-container"
             style={
               Object {
                 "display": "block",
@@ -1681,6 +1685,7 @@ exports[`uses a custom theme for all child components if one is provided 1`] = `
         </div>
         <div
           data-radium={true}
+          data-testid="menu-container"
           style={
             Object {
               "display": "block",

src/components/Menus/DropdownMenu.d.ts

@@ -33,6 +33,9 @@ export interface DropdownMenuProps<TValue extends string | number | boolean = st
   /** Customize style of menu parent */
   menuContainerStyle?: RadiumStyles
 
+  /** Customize style of menu parent when dropdown is open */
+  menuContainerOpenStyle?: RadiumStyles
+
   /** Props passed to Menu component */
   menuProps?: MenuProps
 }

src/components/Menus/DropdownMenu.js

@@ -56,6 +56,8 @@ class DropdownMenu extends React.Component {
     style: PropTypes.shape({}),
     /** Customize style of menu parent */
     menuContainerStyle: PropTypes.shape({}),
+    /** Customize style of menu parent when dropdown is open */
+    menuContainerOpenStyle: PropTypes.shape({}),
     /** Props passed to Menu component */
     menuProps: PropTypes.shape({}),
   }
@@ -190,7 +192,7 @@ class DropdownMenu extends React.Component {
   }
 
   render() {
-    const { style, children, menuProps, menuContainerStyle } = this.props
+    const { style, children, menuProps, menuContainerStyle, menuContainerOpenStyle } = this.props
 
     const isOpen = this.state.open
 
@@ -201,9 +203,10 @@ class DropdownMenu extends React.Component {
           style={[
             styles.menuContainer,
             menuContainerStyle,
-            isOpen && styles.menuContainerOpen,
+            isOpen && [styles.menuContainerOpen, menuContainerOpenStyle],
             !isOpen && styles.menuContainerClosed,
           ]}
+          data-testid="menu-container"
         >
           <Slide in={isOpen} axis="y" style={styles.transitionContainer} offset={30}>
             <Fade in={isOpen} transitionTime={200}>

src/components/Menus/__tests__/DropdownMenu.spec.js

@@ -34,6 +34,43 @@ it('renders DropdownMenu with icons and trigger correctly', () => {
   expect(tree).toMatchSnapshot()
 })
 
+it('renders DropdownMenu in open state correctly', () => {
+  const menuContainerSelector = "div[data-testid='menu-container']"
+  const hiddenZIndex = -9000
+  const shownZIndex = 1234
+
+  const wrapper = mount(
+    <StyleRoot>
+      <div>
+        <DropdownMenu
+          menuContainerOpenStyle={{ zIndex: shownZIndex }}
+          triggerElement={<Button id="trigger"> Share </Button>}
+        >
+          <MenuItem label="Share via Email" value="email" leftIcon="emailFilled" />
+          <MenuItem
+            label="Share via Facebook"
+            value="facebook"
+            leftIcon="facebookFilled"
+            leftIconStyles={{ color: '#3c5a99' }}
+          />
+          <MenuItem
+            label="Share via Twitter"
+            value="twitter"
+            leftIcon="twitterFilled"
+            leftIconStyles={{ color: '#1da1f2' }}
+          />
+        </DropdownMenu>
+      </div>
+    </StyleRoot>
+  )
+
+  expect(wrapper.find(menuContainerSelector).prop('style').zIndex).toBe(hiddenZIndex)
+  wrapper.find('#trigger button').simulate('mousedown')
+  expect(wrapper.find(menuContainerSelector).prop('style').zIndex).toBe(shownZIndex)
+
+  expect(wrapper).toMatchSnapshot()
+})
+
 it('should call callbacks correctly', () => {
   const onClose = spy()
   const onOpen = spy()