Styled-system upgrade tracking

[shawnbot]

What to do

1. Factor out any instances of theme.colors.bg and theme.colors.border, since those aren't there anymore. Some components used these to fill in the gaps left by our CSS components. Please leave notes in Add docs for migrating to system props #161 if you come across any gotchas.

2. Add common system props. See contributing.md (introduced in initial contributing/dev docs #180) for details.

3. Refactor tests to get them passing again.

   • For components with only system props (system components?), we can get by with snapshot tests for now. Snapshots are stored in git, so we can look at them after the first run (when jest prompts us to update them) and spot-check the files generated in src/__tests__/__snapshots__ for any potential issues.

   • Use the expect(render(<X />)).toHaveStyleRule() to test individual style props. For props that are based on the theme, you can import theme from '../theme' and pass theme={theme}, then compare the style rule value to the one in the theme. Note that it's not currently possible to test responsive props. See Refactor tests to work with emotion #165 for more info.

   • For components that render system components (X = props => <Block {...props} />), be sure to spread the base component's propTypes into your components' prop-types.

4. Rename all tag props to is to match styled-system conventions.

Components

• Avatar (src/Avatar.js) @emplums Make Avatar Emo #170
• Block (src/Block.js) @shawnbot Introduce emotion and styled-system #164
• Box (src/Box.js) [DELETE] @emplums (TBD, see Update Block component to be called Box again #189)
• BranchName (src/BranchName.js) @emplums Update BranchName to use emotion #178
• Button (src/Button.js) @emplums Update Button + variations to emotion + styled-system #181
• ButtonDanger (src/ButtonDanger.js) @emplums Update Button + variations to emotion + styled-system #181
• ButtonLink (src/ButtonLink.js) @emplums Update Button + variations to emotion + styled-system #181
• ButtonOutline (src/ButtonOutline.js) @emplums Update Button + variations to emotion + styled-system #181
• ButtonPrimary (src/ButtonPrimary.js) @emplums Update Button + variations to emotion + styled-system #181
• Caret (src/Caret.js) @emplums Update Caret with emotion #184
• CaretBox (src/CaretBox.js) @emplums @shawnbot (multiple PRs)
• CircleBadge (src/CircleBadge.js) @emplums Update CircleBadge to use Emotion + Styled System #195
• CircleOcticon (src/CircleOcticon.js) @emplums - No changes necessary
• CounterLabel (src/CounterLabel.js) @emplums Update CounterLabel to use Styled System & Emotion #196
• Details (src/Details.js) @shawnbot Styled Details #194
• DonutChart (src/DonutChart.js) @shawnbot Styled Donut Charts #183
• DonutSlice (src/DonutSlice.js) @shawnbot Styled Donut Charts #183
• Dropdown (src/Dropdown.js) @shawnbot Migrate Dropdown to system props, fix border prop issue #192
• Flash (src/Flash.js) @shawnbot
• FlexContainer (src/FlexContainer.js) @shawnbot
• FlexItem (src/FlexItem.js) @shawnbot
• Label (src/Label.js) @shawnbot
• Heading (src/Heading.js) @shawnbot
• Link (src/Link.js) @jonrohan Upgrading Link.js to styled-system #169
• MergeStatus (src/MergeStatus.js) @jonrohan Updating MergeStatus.js to styled-systems emotion #171
• OcticonButton (src/OcticonButton.js) @jonrohan Updating OcticonButton.js to styled-systems emotion #172
• StateLabel (src/StateLabel.js) @jonrohan Updating StateLabel.js to styled-systems emotion #173
• Text (src/Text.js) @shawnbot
• TextInput (src/TextInput.js) @jonrohan Updating TextInput.js to styled-systems emotion #174
• Tooltip (src/Tooltip.js) @jonrohan Updating Tooltip.js to styled-systems emotion #176
• UnderlineNav (src/UnderlineNav.js) @jonrohan Updating UnderlineNav.js to styled-systems emotion #177
• UnderlineNavLink (src/UnderlineNavLink.js) @jonrohan Updating UnderlineNavLink.js to styled-systems emotion #179

Docs / Examples

• Replace all instances of color names without a step (red) with "stepped" equivalents (red.5) in all three color props: bg, color, and borderColor (see First stab at migration docs #185 for info). @emplums
• Replace all instances of tag="foo" with is="foo" @emplums

Etc.

• src/props.js needs to be reorganized, and many of the helper functions from this can go. Once we're finished with the component migration, we can use eslint to figure out which functions aren't used anymore. @shawnbot Styled system wrap-up, test fixes #203
• src/theme.js may need some love to match up with all of the styled-system functions @shawnbot

[shawnbot]

Since we decided to do the Box deprecating in a future release, are we done with this??

[shawnbot]

I crossed out the Box item (to be dealt with in #189) and am closing this because we're DONE!