Add Caret component

[shawnbot]

The Caret component renders a filled and stroked triangle that can be positioned on any edge of its (relatively or absolutely positioned) parent. It looks like this when placed inside a Box:

Props

• edge determines its absolute positioning relative to its container: top, right, bottom (the default), or left
• borderColor determines the border color; the default is the same light gray applied by the border utility class
• borderWidth should be self-explanatory; the default is 1 (pixel)
• fill determines the fill (background) color; the default is white
• align determines the alignment along perpendicular edge. In this initial version, it's always centered (align='center').

Examples

import {Block, Box, Caret, theme} from 'primer-react'

export default () => (
  <Block p={4}>
    <Box position='relative'>Some text! <Caret /></Box>
    <Box shadow='medium' position='relative'>
      Look over here → <Caret edge='right' />
    </Box>
    <Box border={[true, 'red']} position='relative'>
      <Caret edge='left' borderColor={theme.colors.red[5]} />
      ← Look over here 
    </Box>
  </Block>
)

Caveats

• As you can see, it's not exactly easy to coordinate border colors between Box and Caret, but I think we can build on this with something like an ArrowBox that passes the appropriate color down automatically.
• There is some serious inline styles voodoo going on here. This should probably be done in SVG rather than with CSS borders. Addendum: as of 5a13341, we now have SVG output by default, with the ability to pass a css prop that forces it to use CSS border hacks. Should we just do SVG and remove most of the code here?

Also in this PR

To support the examples for this, I've also added support for the position and shadow props on the Block component so that we can do relative positioning and box shadows, a boolean mono prop for Text, and Text.propTypes for validation.

[jonrohan]

determines the alignment along perpendicular edge. In this initial version, it's always centered

Wouldn't we need it to have the align="top" option so we can recreate the merge box?

[shawnbot]

@jonrohan yep, I was thinking that would be possible with edge='left' align='start', but I'm definitely open to other ways of specifying it. Maybe cardinal directions like n, nw, etc. are better?

[shawnbot]

Check out the differences in the CSS and SVG implementations, which somehow ended up being the exact same number of lines (?!):

CSS

https://github.com/primer/primer-react/blob/b5618340f341ac572dac8feac079e862f89397c6/src/Caret.js#L69-L107

SVG

https://github.com/primer/primer-react/blob/b5618340f341ac572dac8feac079e862f89397c6/src/Caret.js#L120-L158

The exported component switches between the two via the css prop, but I left a note for us to discuss later regarding browser support and whether we want to do this with feature detection (or only support SVG!):

https://github.com/primer/primer-react/blob/b5618340f341ac572dac8feac079e862f89397c6/src/Caret.js#L28-L34

[shawnbot]

I thought that this was easier to read than a switch statement, but can change it if it seems too clever.

[emplums]

I think it's fine this way!

[jonrohan]

Should we just do SVG and remove most of the code here?

I'm down for removing the CSS version and just using SVG which has full browser support.

[shawnbot]

This seems like something we might want a helper for in props.js because it's kind of a pain to maintain. I'd like to see something like:

import {passToStyle} from './props'

const stylize = passToStyle([
  'width', 'minWidth', 'maxWidth',
  'height', 'minHeight', 'maxHeight'
])

const mapBlockProps = props => classifyBlockProps(map(stylize(props))

[emplums]

Agreed, I was running into this when I was working on the Dropdown stuff

[emplums]

This is looking good to me! Just left a few comments

[emplums]

Agreed, I was running into this when I was working on the Dropdown stuff

[emplums]

I think it's fine this way!

[shawnbot]

Spoke with the team and @emplums suggested that we use words that people already know like top, top-left etc. for positioning it. We've merged this as-is for now, and I'm going to file a follow-up issue where we can discuss the ideal API.