How to use the reakit.Box.propTypes function in reakit

To help you get started, we’ve selected a few reakit examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github exivity / ui / src / Input / Input.js View on Github external
import PropTypes from 'prop-types'
import { Box, Input as BaseInput, styled } from 'reakit'
import { theme } from 'styled-tools'
import withEnumProps from '../withEnumProps'

const Input = styled(BaseInput)`
  border-radius: ${theme('base.borderRadius')};
`

Input.propTypes = {
  ...Box.propTypes,

  primary: PropTypes.bool,
  secondary: PropTypes.bool,
  success: PropTypes.bool,
  warning: PropTypes.bool,
  danger: PropTypes.bool,

  scale: PropTypes.number,
  xsmall: PropTypes.bool,
  small: PropTypes.bool,
  large: PropTypes.bool,
  xlarge: PropTypes.bool,

  outlined: PropTypes.bool,

  disabled: PropTypes.bool,
github exivity / ui / src / Alert / Alert.js View on Github external
import PropTypes from 'prop-types'
import { Box, styled } from 'reakit'
import { theme } from 'styled-tools'

import withEnumProps from '../withEnumProps'

const Alert = styled(Box)`
  padding: ${theme('base.spaceHalf')} ${theme('base.space')};
  border-radius: ${theme('base.borderRadius')};
`

Alert.propTypes = {
  ...Box.propTypes,
  children: PropTypes.node,

  primary: PropTypes.bool,
  success: PropTypes.bool,
  warning: PropTypes.bool,
  danger: PropTypes.bool
}

Alert.defaultProps = {
  opaque: true,
  palette: 'primary'
}

export default withEnumProps(Alert, { palette: 'key' })
github exivity / ui / src / Navigation / Item.js View on Github external
import PropTypes from 'prop-types'
import { styled, Box } from 'reakit'

const Item = styled(Box.as('li'))`
  list-style: none;
`

Item.propTypes = {
  ...Box.propTypes,
  children: PropTypes.node
}

Item.defaultProps = {}

Item.displayName = 'Navigation.Item'

export default Item
github exivity / ui / src / Button / Button.js View on Github external
import PropTypes from 'prop-types'
import { styled, Box, Button as BaseButton } from 'reakit'
import { theme, ifProp } from 'styled-tools'

import { Icon } from '../Icon/Icon'
import withEnumProps from '../withEnumProps'

const Button = styled(BaseButton)`
  ${Icon} {
    margin-left: ${ifProp('rightIcon', theme('base.spaceHalf'), 0)};
    margin-right: ${ifProp('rightIcon', 0, theme('base.spaceHalf'))};
  }
`

Button.propTypes = {
  ...Box.propTypes,
  children: PropTypes.node,

  primary: PropTypes.bool,
  secondary: PropTypes.bool,
  success: PropTypes.bool,
  warning: PropTypes.bool,
  danger: PropTypes.bool,

  scale: PropTypes.number,
  xsmall: PropTypes.bool,
  small: PropTypes.bool,
  large: PropTypes.bool,
  xlarge: PropTypes.bool,

  outlined: PropTypes.bool,
  rightIcon: PropTypes.bool,