primer-react/src/Dropdown.js

Primer react components

import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import Octicon from './Octicon'
import {TriangleDown} from '@githubprimer/octicons-react'
import Button from './Button'
import Box from './Box'
import Caret from './Caret'
import Details from './Details'
import FlexContainer from './FlexContainer'
import {withSystemProps, COMMON} from './system-props'

function Dropdown({title, scheme, children, className, ...rest}) {
  const {minWidth} = rest
  return (
    <div className={classnames(className, 'BtnGroup')} {...rest}>
      <FlexContainer is={Details} className="BtnGroup-form" css={{position: 'relative'}}>
        {({toggle}) => (
          <React.Fragment>
            <Button is="summary" scheme={scheme} grouped onClick={toggle}>
              {title}
              <Octicon icon={TriangleDown} size={14} ml={title ? 2 : 0} />
            </Button>
            <Box
              bg="white"
              border={1}
              borderColor="gray.2"
              borderRadius={1}
              boxShadow="small"
              mt={1}
              px={3}
              py={2}
              minWidth={minWidth}
              css={{position: 'absolute', zIndex: 99999}}
            >
              {children}
              <Caret location="top-left" />
            </Box>
          </React.Fragment>
        )}
      </FlexContainer>
    </div>
  )
}

Dropdown.propTypes = {
  children: PropTypes.node,
  scheme: Button.propTypes.scheme,
  title: PropTypes.string
}

export default withSystemProps(Dropdown, COMMON)