Dropdown Improvements (#820)

Included in this change is:
- adding spacing between dropdown menu and the trigger
- fix issue where triggers via renderTrigger were not being informed on hover events

src/components/Dropdown/V2/Dropdown.Trigger.tsx

@@ -6,7 +6,10 @@ import propConnect from '../../PropProvider/propConnect'
 import { TriggerUI } from './Dropdown.css.js'
 import Keys from '../../../constants/Keys'
 import { classNames } from '../../../utilities/classNames'
-import { namespaceComponent } from '../../../utilities/component'
+import {
+  namespaceComponent,
+  renderRenderPropComponent,
+} from '../../../utilities/component'
 import { noop } from '../../../utilities/other'
 import { COMPONENT_KEY } from './Dropdown.utils'
 
@@ -42,6 +45,8 @@ export class Trigger extends React.PureComponent<Props> {
     toggleOpen: noop,
   }
 
+  state = { isHovered: false }
+
   handleOnClick = (event: Event) => {
     this.props.onClick(event)
     this.props.toggleOpen()
@@ -87,6 +92,14 @@ export class Trigger extends React.PureComponent<Props> {
     }
   }
 
+  renderChildren() {
+    const { children } = this.props
+    const { isHovered } = this.state
+    const renderedChildren = renderRenderPropComponent(children, { isHovered })
+
+    return renderedChildren ? renderedChildren : children
+  }
+
   render() {
     const {
       className,
@@ -118,7 +131,11 @@ export class Trigger extends React.PureComponent<Props> {
         onFocus={onFocus}
         onClick={this.handleOnClick}
         onKeyDown={this.handleOnKeyDown}
-      />
+        onMouseOver={() => this.setState({ isHovered: true })}
+        onMouseLeave={() => this.setState({ isHovered: false })}
+      >
+        {this.renderChildren()}
+      </TriggerUI>
     )
   }
 }

src/components/Dropdown/V2/Dropdown.css.js

@@ -14,13 +14,17 @@ export const MenuContainerUI = styled('div')`
   position: absolute;
 
   &.is-dropUp {
-    bottom: 100%;
+    bottom: calc(100% + 5px);
   }
 
   &.is-dropLeft {
     right: 0%;
   }
 
+  &:not(.is-dropUp) {
+    top: 5px;
+  }
+
   .c-DropdownV2Block + .c-DropdownV2Block {
     border-top: 1px solid ${getColor('grey.600')};
   }