message: migrate Dropdown to system props
diff: import React from 'react'
  import PropTypes from 'prop-types'
  import classnames from 'classnames'
  -import Details from './Details'
  +import Octicon from './Octicon'
  +import {TriangleDown} from '@githubprimer/octicons-react'
  import Button from './Button'
  +import Block from './Block'
  import Caret from './Caret'
  -import {mapWhitespaceProps} from './props'
  -
  -const arrowStyles = {
  - content: '',
  - border: '4px solid',
  - borderRightColor: 'transparent',
  - borderLeftColor: 'transparent',
  - borderBottomColor: 'transparent',
  - width: '0',
  - height: '0'
  -}
  +import Details from './Details'
  +import FlexContainer from './FlexContainer'
  +import {withSystemProps, COMMON} from './system-props'
  -export default function Dropdown({title, scheme, children, ...rest}) {
  - const {className} = mapWhitespaceProps(rest)
  +function Dropdown({title, scheme, children, className, ...rest}) {
  + const {minWidth} = rest
  return (
  - <div className={classnames(className, 'BtnGroup')}>
  - <Details className="details-reset BtnGroup-form d-flex">
  + <div className={classnames(className, 'BtnGroup')} {...rest}>
  + <FlexContainer is={Details} className="BtnGroup-form" css={{position: 'relative'}}>
  {({toggle}) => (
  <React.Fragment>
  <Button tag="summary" scheme={scheme} grouped onClick={toggle}>
  - {title} <div className="d-inline-block v-align-middle" style={arrowStyles} />
  + {title}
  + <Octicon icon={TriangleDown} size={14} ml={title ? 2 : 0} />
  </Button>
  - <div
  - className="border box-shadow position-absolute px-3 py-2 bg-white mt-1 rounded-1 list-style-none"
  - style={{zIndex: 99999}}
  + <Block
  + bg="white"
  + border={1}
  + borderColor="gray.2"
  + borderRadius={1}
  + boxShadow="small"
  + mt={1}
  + px={3}
  + py={2}
  + minWidth={minWidth}
  + css={{position: 'absolute', zIndex: 99999}}
  >
  - <div className="position-absolute ml-0 mt-n2">
  - <Caret edge="top" align="start" />
  - </div>
  {children}
  - </div>
  + <Caret location="top-left" />
  + </Block>
  </React.Fragment>
  )}
  - </Details>
  + </FlexContainer>
  </div>
  )
  }
  @@ -47,3 +48,5 @@ Dropdown.propTypes = {
  scheme: Button.propTypes.scheme,
  title: PropTypes.string
  }
  +
  +export default withSystemProps(Dropdown, COMMON)
  