message: refactor Caret to accept a location prop
diff: @@ -16,12 +16,19 @@ const perpendicularEdge = {
  left: 'Top'
  }
  -function getPosition({edge, align}) {
  +const offsetSpacing = theme.space[3]
  +
  +function getEdgeAlign(location) {
  + const [edge, align] = location.split('-')
  + return [edge, align]
  +}
  +
  +function getPosition(edge, align) {
  const opposite = oppositeEdge[edge].toLowerCase()
  const perp = perpendicularEdge[edge].toLowerCase()
  return {
  [opposite]: '100%',
  - [perp]: '50%'
  + [align || perp]: align ? offsetSpacing : '50%'
  }
  }
  @@ -33,46 +40,48 @@ export default function Caret({css, ...rest}) {
  : <CaretSVG {...rest} />
  }
  +Caret.locations = [
  + 'top', 'top-left', 'top-right',
  + 'right', 'right-top', 'right-bottom',
  + 'bottom', 'bottom-left', 'bottom-right',
  + 'left', 'left-top', 'left-bottom'
  +]
  +
  Caret.defaultProps = {
  - align: 'center',
  borderColor: theme.colors.gray[2],
  borderWidth: 1,
  - edge: 'bottom',
  fill: theme.colors.white,
  - position: 'absolute',
  - size: 8,
  + location: 'bottom',
  + size: theme.space[2],
  css: false
  }
  Caret.propTypes = {
  - align: PropTypes.oneOf(['start', 'center', 'end']),
  borderColor: PropTypes.string,
  borderWidth: PropTypes.number,
  - edge: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
  + location: PropTypes.oneOf(Caret.locations),
  fill: PropTypes.string,
  - position: PropTypes.oneOf(['absolute', 'relative']),
  size: PropTypes.number,
  css: PropTypes.bool
  }
  function CaretCSS(props) {
  const {
  - align,
  borderColor,
  borderWidth,
  - edge,
  fill,
  - position,
  + location,
  size
  } = props
  + const [edge, align] = getEdgeAlign(location)
  const opposite = oppositeEdge[edge]
  const perp = perpendicularEdge[edge]
  const style = {
  pointerEvents: 'none',
  - position,
  - ...getPosition({edge, align})
  + position: 'absolute',
  + ...getPosition(edge, align)
  }
  const common = {
  @@ -108,21 +117,20 @@ function CaretCSS(props) {
  function CaretSVG(props) {
  const {
  - align,
  borderColor,
  borderWidth,
  - edge,
  fill,
  - position,
  + location,
  size
  } = props
  + const [edge, align] = getEdgeAlign(location)
  const perp = perpendicularEdge[edge]
  const style = {
  pointerEvents: 'none',
  - position,
  - ...getPosition({edge, align}),
  + position: 'absolute',
  + ...getPosition(edge, align),
  [`margin${perp}`]: -size
  }
  @@ -151,7 +159,7 @@ function CaretSVG(props) {
  <path d={line}
  fill='none'
  stroke={borderColor}
  - stroke-width={borderWidth} />
  + strokeWidth={borderWidth} />
  </g>
  </svg>
  )
  