From 1c5407c0e131e927e861775ce83e0526e780f0da Mon Sep 17 00:00:00 2001
From: Jon Rohan <rohan@github.com>
Date: Thu, 6 Sep 2018 13:52:11 -0700
Subject: [PATCH 01/51] Getting started on docs

---
 pages/components/docs/Avatar.md      | 20 ++++++++-
 pages/components/docs/BorderBox.md   | 20 ++++++---
 pages/components/docs/Box.js         | 66 ----------------------------
 pages/components/docs/Box.md         | 19 ++++++++
 pages/components/docs/BranchName.md  | 23 +++++-----
 pages/components/docs/Button.md      | 19 ++++++++
 pages/components/docs/Buttons.md     | 34 --------------
 pages/components/docs/CircleBadge.md | 28 ++++++------
 pages/components/docs/index.js       |  4 +-
 9 files changed, 95 insertions(+), 138 deletions(-)
 delete mode 100644 pages/components/docs/Box.js
 create mode 100644 pages/components/docs/Box.md
 create mode 100644 pages/components/docs/Button.md
 delete mode 100644 pages/components/docs/Buttons.md

diff --git a/pages/components/docs/Avatar.md b/pages/components/docs/Avatar.md
index 9e955821592..7fd1d6d2942 100644
--- a/pages/components/docs/Avatar.md
+++ b/pages/components/docs/Avatar.md
@@ -1,10 +1,26 @@
 
 # Avatar
----
+
+Avatars are images that users can set as their profile picture. On GitHub, they're always going to be rounded squares. They can be custom photos, uploaded by users, or generated as Identicons as a placeholder.
+
+## Default example
+
 ```.jsx
-<Avatar src="https://avatars.githubusercontent.com/primer?v=3&s=128" size={128} username="primer" />
+<Avatar src="https://avatars.githubusercontent.com/primer?v=3&s=128" size={128} />
 ```
 
+## System props
+
+Avatar components get `color, spacing` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+## Component props
+
+| Prop name | Type | Description |
+| :- | :- | :- |
+| alt | String | Passed through to alt on img tag |
+| isChild | Boolean | adds the `avatar-child` class if present |
+| size | Number | default: 20, adds the `avatar-small` class if less than 24 |
+| src | String | The source url of the avatar image |
 
 export const meta = {
   displayName: 'Avatar'
diff --git a/pages/components/docs/BorderBox.md b/pages/components/docs/BorderBox.md
index 1ea62000bb7..4a40d3b0172 100644
--- a/pages/components/docs/BorderBox.md
+++ b/pages/components/docs/BorderBox.md
@@ -1,13 +1,19 @@
 # BorderBox
----
+
+## Default example
 
 ```.jsx
 <BorderBox>This is a BorderBox</BorderBox>
-<BorderBox p={2}>This is a BorderBox with padding.</BorderBox>
-<BorderBox boxShadow="small" m={4} p={2}>This is a BorderBox with shadow.</BorderBox>
-<BorderBox boxShadow="medium" m={4} p={2}>This is a BorderBox with a medium shadow.</BorderBox>
-<BorderBox boxShadow="large" m={4} p={2}>This is a BorderBox with a large shadow.</BorderBox>
-<BorderBox boxShadow="extra-large" m={4} p={2}>This is a BorderBox with an extra-large shadow.</BorderBox>
-<BorderBox borderColor="green.5" p={2}>This is a BorderBox with a green border.</BorderBox>
 ```
+
+## System props
+
+BorderBox components get `COMMON` and `LAYOUT` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+## Component props
+
+| Prop name | Type | Description |
+| :- | :- | :- |
+| is | String |  |
+
 export const meta = { displayName: 'BorderBox'}
diff --git a/pages/components/docs/Box.js b/pages/components/docs/Box.js
deleted file mode 100644
index 511f788163d..00000000000
--- a/pages/components/docs/Box.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/* eslint-disable import/no-named-as-default-member */
-import React from 'react'
-import {theme, Box, Text} from '../../../src'
-
-const Mono = props => <Text fontFamily="mono" {...props} />
-
-const colors = [...Object.entries(theme.colors)].reduce((keys, [key, value]) => {
-  if (key !== 'bg' && key !== 'border') {
-    if (Array.isArray(value)) {
-      return keys.concat(Object.keys(value).map(i => `${key}.${i}`))
-    } else {
-      keys.push(key)
-    }
-  }
-  return keys
-}, [])
-
-const textColors = ['white', 'gray.5', 'black']
-
-export default function BoxExample() {
-  return (
-    <div>
-      <table>
-        <thead>
-          <tr>
-            <th className="text-left">
-              <Box pb={4}>color</Box>
-            </th>
-            <th colSpan={textColors.length}>
-              <Mono pb={4}>
-                bg=
-                {`{color}`}
-              </Mono>
-            </th>
-            <th>
-              <Mono pb={4}>borderColor</Mono>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          {colors.map(color => (
-            <tr key={color}>
-              <td>
-                <Mono mr={3}>{color}</Mono>
-              </td>
-              {textColors.map(fg => (
-                <td key={fg}>
-                  <Box p={3} mb={2} bg={color} color={fg} border={color === 'white' ? 1 : null}>
-                    <Mono>{fg}</Mono>
-                  </Box>
-                </td>
-              ))}
-              <td>
-                <Box p={3} mb={2} ml={3} borderColor={color} border={1}>
-                  <Mono>{color}</Mono>
-                </Box>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  )
-}
-
-export const meta = {displayName: 'Box'}
diff --git a/pages/components/docs/Box.md b/pages/components/docs/Box.md
new file mode 100644
index 00000000000..94689bdb766
--- /dev/null
+++ b/pages/components/docs/Box.md
@@ -0,0 +1,19 @@
+# Box
+
+## Default example
+
+```.jsx
+<Box>This is a Box</Box>
+```
+
+## System props
+
+Box components get `COMMON` and `LAYOUT` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+## Component props
+
+| Prop name | Type | Description |
+| :- | :- | :- |
+| is | String |  |
+
+export const meta = {displayName: 'Box'}
diff --git a/pages/components/docs/BranchName.md b/pages/components/docs/BranchName.md
index c03e5428b50..cb2285719c5 100644
--- a/pages/components/docs/BranchName.md
+++ b/pages/components/docs/BranchName.md
@@ -1,20 +1,19 @@
-
 # BranchName
----
+
+## Default example
 
 ```.jsx
 <BranchName>a_new_feature_branch</BranchName>
+```
 
-<ExampleHeading mt={3}>BranchName with Octicon</ExampleHeading>
-<BranchName>
-  <Octicon icon={GitBranch} />
-  a_new_feature_branch
-</BranchName>
+## System props
 
-<ExampleHeading mt={3}>Linked BranchName</ExampleHeading>
-<BranchName is="a" href="/">
-  a_new_feature_branch
-</BranchName>
-```
+BranchName components get `COMMON` and `LAYOUT` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+## Component props
+
+| Prop name | Type | Description |
+| :- | :- | :- |
+| is | String |  |
 
 export const meta = {displayName: 'BranchName'}
diff --git a/pages/components/docs/Button.md b/pages/components/docs/Button.md
new file mode 100644
index 00000000000..ed5e1c818fb
--- /dev/null
+++ b/pages/components/docs/Button.md
@@ -0,0 +1,19 @@
+# Button
+
+## Default example
+
+```.jsx
+<Button>Button</Button>
+```
+
+## System props
+
+Button components get `COMMON` and `LAYOUT` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+## Component props
+
+| Prop name | Type | Description |
+| :- | :- | :- |
+| is | String |  |
+
+export const meta = {displayName: 'Button'}
diff --git a/pages/components/docs/Buttons.md b/pages/components/docs/Buttons.md
deleted file mode 100644
index ce4c339ba7b..00000000000
--- a/pages/components/docs/Buttons.md
+++ /dev/null
@@ -1,34 +0,0 @@
-
-# Buttons
----
-
-```.jsx
-<FlexContainer flexDirection="column" alignItems="start" >
-  <Button> Button </Button>
-
-  <Button size="sm"> Button small </Button>
-
-  <Button size="large"> Button large </Button>
-
-  <ButtonDanger> ButtonDanger </ButtonDanger>
-
-  <ButtonPrimary> ButtonPrimary </ButtonPrimary>
-
-  <ButtonOutline> ButtonOutline </ButtonOutline>
-
-  <Button block> Button block </Button>
-
-  <Button linkStyle> Button linkStyle </Button>
-  <ButtonLink href="https://www.goatslive.com/">This is an {'<a>'} styled as a button</ButtonLink>
-
-  <ExampleHeading>Octicon Buttons</ExampleHeading>
-
-  <OcticonButton icon={Pencil} label="Edit" onClick={() => alert('edit')} mr={3} />
-
-  <Text color="red.5"><OcticonButton icon={X} label="Close" onClick={() => alert('close')} mr={3} /></Text>
-
-  <OcticonButton icon={Hubot} size="large" label="ROBOT" onClick={() => alert('beep boop')} />
-</FlexContainer>
-```
-
-export const meta = {displayName: 'Buttons'}
diff --git a/pages/components/docs/CircleBadge.md b/pages/components/docs/CircleBadge.md
index cc1c138fc5c..8d055c9a441 100644
--- a/pages/components/docs/CircleBadge.md
+++ b/pages/components/docs/CircleBadge.md
@@ -1,23 +1,21 @@
+# Button
 
-# CircleBadge
----
+## Default example
 
 ```.jsx
-<Heading fontSize={3}>Small, medium & large</Heading>
-<CircleBadge bg="blue.5" size="small"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
-<CircleBadge bg="blue.5" size="medium"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
-<CircleBadge bg="blue.5" size="large"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
+<CircleBadge>
+  <Octicon icon={Zap} />
+</CircleBadge>
+```
 
-<Heading fontSize={3}>With custom width & height</Heading>
-<CircleBadge bg="blue.5" size={40}><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
+## System props
 
-<Heading fontSize={3}>{`With <img> as a child & bg prop`}</Heading>
-<CircleBadge bg="blue.5" size="small"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
+Button components get `COMMON` and `LAYOUT` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
-<Heading fontSize={3}>With Octicon as child</Heading>
-<CircleBadge size="medium">
-  <Octicon icon={Zap}/>
-</CircleBadge>
-```
+## Component props
+
+| Prop name | Type | Description |
+| :- | :- | :- |
+| is | String |  |
 
 export const meta = {displayName: 'CircleBadge'}
diff --git a/pages/components/docs/index.js b/pages/components/docs/index.js
index a3acc28d7a3..4ebd0349e05 100644
--- a/pages/components/docs/index.js
+++ b/pages/components/docs/index.js
@@ -1,8 +1,8 @@
 export {meta as Avatar} from './Avatar.md'
 export {meta as BorderBox} from './BorderBox.md'
-export {meta as Box} from './Box.js'
+export {meta as Box} from './Box.md'
 export {meta as BranchName} from './BranchName.md'
-export {meta as Buttons} from './Buttons.md'
+export {meta as Button} from './Button.md'
 export {meta as CircleBadge} from './CircleBadge.md'
 export {meta as CircleOcticon} from './CircleOcticon.md'
 export {meta as CounterLabel} from './CounterLabel.md'

From 7ecc07d1d1bc43738fc8051273612af45fce4ae7 Mon Sep 17 00:00:00 2001
From: Jon Rohan <rohan@github.com>
Date: Fri, 7 Sep 2018 14:08:27 -0700
Subject: [PATCH 02/51] width 100% on doc

---
 pages/_app.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/_app.js b/pages/_app.js
index 71ddd54c213..828bdf05146 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -34,7 +34,7 @@ export default class MyApp extends App {
           <Header />
           <FlexContainer>
             <SideNav />
-            <Box maxWidth={1012} my={6} mx={'auto'} px={6} className="markdown-body">
+            <Box maxWidth={1012} width={'100%'} my={6} mx={'auto'} px={6} className="markdown-body">
               <Component {...page} />
             </Box>
           </FlexContainer>

From 2183cba2f3d8ac00b2f522d62f42e832c4fa2788 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 14:52:18 -0700
Subject: [PATCH 03/51] update BranchName docs

---
 pages/components/docs/BranchName.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/pages/components/docs/BranchName.md b/pages/components/docs/BranchName.md
index cb2285719c5..187ca76a611 100644
--- a/pages/components/docs/BranchName.md
+++ b/pages/components/docs/BranchName.md
@@ -12,8 +12,9 @@ BranchName components get `COMMON` and `LAYOUT` system props. Read our [System P
 
 ## Component props
 
-| Prop name | Type | Description |
-| :- | :- | :- |
-| is | String |  |
+| Prop name | Type | Description | Default |
+| :- | :- | :- | :- |
+| is | String | sets the HTML tag for the component | 'a'
+| href | String | a URL to link the component to | n/a
 
 export const meta = {displayName: 'BranchName'}

From 8306f2db21baa4b18e9f16f5c6831ba2d5a394b9 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 14:52:26 -0700
Subject: [PATCH 04/51] update Box docs

---
 pages/components/docs/Box.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/components/docs/Box.md b/pages/components/docs/Box.md
index 94689bdb766..517772487a1 100644
--- a/pages/components/docs/Box.md
+++ b/pages/components/docs/Box.md
@@ -14,6 +14,6 @@ Box components get `COMMON` and `LAYOUT` system props. Read our [System Props](/
 
 | Prop name | Type | Description |
 | :- | :- | :- |
-| is | String |  |
+| is | String | sets the HTML tag for the component |
 
 export const meta = {displayName: 'Box'}

From c496b06a60cd5fd23625532b25866310ee1b1101 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 14:52:34 -0700
Subject: [PATCH 05/51] update BorderBox docs

---
 pages/components/docs/BorderBox.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/pages/components/docs/BorderBox.md b/pages/components/docs/BorderBox.md
index 4a40d3b0172..47c822b4121 100644
--- a/pages/components/docs/BorderBox.md
+++ b/pages/components/docs/BorderBox.md
@@ -12,8 +12,6 @@ BorderBox components get `COMMON` and `LAYOUT` system props. Read our [System Pr
 
 ## Component props
 
-| Prop name | Type | Description |
-| :- | :- | :- |
-| is | String |  |
+BorderBox does not get any additional props other than the system props mentioned above.
 
 export const meta = { displayName: 'BorderBox'}

From 676d04f204aba494d04992cb47b7313ccd02b522 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 14:53:51 -0700
Subject: [PATCH 06/51] add Required column

---
 pages/components/docs/BranchName.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/pages/components/docs/BranchName.md b/pages/components/docs/BranchName.md
index 187ca76a611..1e346781892 100644
--- a/pages/components/docs/BranchName.md
+++ b/pages/components/docs/BranchName.md
@@ -12,9 +12,9 @@ BranchName components get `COMMON` and `LAYOUT` system props. Read our [System P
 
 ## Component props
 
-| Prop name | Type | Description | Default |
-| :- | :- | :- | :- |
-| is | String | sets the HTML tag for the component | 'a'
-| href | String | a URL to link the component to | n/a
+| Prop name | Type | Description | Default | Required? |
+| :- | :- | :- | :- | :- |
+| is | String | sets the HTML tag for the component | 'a' | No
+| href | String | a URL to link the component to | n/a | No
 
 export const meta = {displayName: 'BranchName'}

From 23f4883146a24da9268a7082eea32ffcf9108596 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 15:10:32 -0700
Subject: [PATCH 07/51] update Button docs

---
 pages/components/docs/Button.md | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/pages/components/docs/Button.md b/pages/components/docs/Button.md
index ed5e1c818fb..b545249c994 100644
--- a/pages/components/docs/Button.md
+++ b/pages/components/docs/Button.md
@@ -1,9 +1,13 @@
-# Button
+# Buttons
 
-## Default example
+## Default examples
 
 ```.jsx
 <Button>Button</Button>
+<ButtonDanger>Button Danger</ButtonDanger>
+<ButtonLink>Button Link</ButtonLink>
+<ButtonOutline>Button Outline</ButtonOutline>
+<ButtonPrimary>Button Primary</ButtonPrimary>
 ```
 
 ## System props
@@ -14,6 +18,11 @@ Button components get `COMMON` and `LAYOUT` system props. Read our [System Props
 
 | Prop name | Type | Description |
 | :- | :- | :- |
-| is | String |  |
+| is | String | sets the HTML tag for the component, defaults to `button` |
+| block | Boolean | adds `display: block` to the component |
+| disabled | Boolean | sets the `disabled` attribute on the Button |
+| grouped | Boolean | allows you to use Button in a line of Buttons without duplicate borders |
+| onClick | Function | function to be called when Button is clicked |
+| size | String | use `sm` for a small Button, or `large` for a large Button
 
 export const meta = {displayName: 'Button'}

From a7b51454b059be15ccd5e21e2e2ca2cf5e900232 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 15:10:41 -0700
Subject: [PATCH 08/51] avatar and branchname tweaks

---
 pages/components/docs/Avatar.md     | 10 +++++-----
 pages/components/docs/BranchName.md |  8 ++++----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/pages/components/docs/Avatar.md b/pages/components/docs/Avatar.md
index 7fd1d6d2942..7c16ced2867 100644
--- a/pages/components/docs/Avatar.md
+++ b/pages/components/docs/Avatar.md
@@ -15,12 +15,12 @@ Avatar components get `color, spacing` system props. Read our [System Props](/sy
 
 ## Component props
 
-| Prop name | Type | Description |
+| Prop name | Type | Description 
 | :- | :- | :- |
-| alt | String | Passed through to alt on img tag |
-| isChild | Boolean | adds the `avatar-child` class if present |
-| size | Number | default: 20, adds the `avatar-small` class if less than 24 |
-| src | String | The source url of the avatar image |
+| alt | String | Passed through to alt on img tag
+| isChild | Boolean | adds the `avatar-child` class if present
+| size | Number | default: 20, adds the `avatar-small` class if less than 24
+| src | String | The source url of the avatar image
 
 export const meta = {
   displayName: 'Avatar'
diff --git a/pages/components/docs/BranchName.md b/pages/components/docs/BranchName.md
index 1e346781892..ef81e7f5f19 100644
--- a/pages/components/docs/BranchName.md
+++ b/pages/components/docs/BranchName.md
@@ -12,9 +12,9 @@ BranchName components get `COMMON` and `LAYOUT` system props. Read our [System P
 
 ## Component props
 
-| Prop name | Type | Description | Default | Required? |
-| :- | :- | :- | :- | :- |
-| is | String | sets the HTML tag for the component | 'a' | No
-| href | String | a URL to link the component to | n/a | No
+| Prop name | Type | Description |
+| :- | :- | :- |
+| is | String | sets the HTML tag for the component |
+| href | String | a URL to link the component to |
 
 export const meta = {displayName: 'BranchName'}

From 851ab5901bfb8e40abac44f1e712a1daa4ffb4aa Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 15:25:40 -0700
Subject: [PATCH 09/51] set defualt size of CircleBadge to medium

---
 src/CircleBadge.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/CircleBadge.js b/src/CircleBadge.js
index 66369047281..ea380a002e1 100644
--- a/src/CircleBadge.js
+++ b/src/CircleBadge.js
@@ -5,7 +5,7 @@ import {withSystemProps, COMMON} from './system-props'
 
 const ICON_CLASS = 'CircleBadge-icon'
 
-const sizeMapper = size => {
+const sizeMapper = (size = 'medium') => {
   if (typeof size === 'number') return size
   const map = {
     small: 56,

From 8114d4807cde0ede77c70f88860f092f580a884d Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 15:25:54 -0700
Subject: [PATCH 10/51] update CircleBadge docs

---
 pages/components/docs/CircleBadge.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/pages/components/docs/CircleBadge.md b/pages/components/docs/CircleBadge.md
index 975f9071556..bf572bb3f0b 100644
--- a/pages/components/docs/CircleBadge.md
+++ b/pages/components/docs/CircleBadge.md
@@ -16,6 +16,10 @@ CircleBadge components get `COMMON` and `LAYOUT` system props. Read our [System
 
 | Prop name | Type | Description |
 | :- | :- | :- |
-| is | String |  |
+| is | String | sets the HTML tag for the component, defaults to `button` |
+| alt | String | alt tag |
+| size | String or Number | Use `small`, `medium`, or `large` for default sizes, or provide a custom size |
+| src | String | URL for image used in badge if `is` is set to `img` | 
+
 
 export const meta = {displayName: 'CircleBadge'}

From 14737c98b6be52e719a7a881be7538d56c001698 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 15:30:21 -0700
Subject: [PATCH 11/51] CircleOcticon docs

---
 pages/components/docs/CircleOcticon.md | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/pages/components/docs/CircleOcticon.md b/pages/components/docs/CircleOcticon.md
index e21cf675555..f13a249134e 100644
--- a/pages/components/docs/CircleOcticon.md
+++ b/pages/components/docs/CircleOcticon.md
@@ -1,11 +1,22 @@
 
 # CircleOcticon
 
+## Default example
+
 ```.jsx
-<FlexContainer>
-  <CircleOcticon icon={Check} size={32} bg="green.5" color="white" mr={2} />
-  <CircleOcticon icon={Zap} size={48} bg="blue.5" color="white" mr={2} />
-  <CircleOcticon icon={X} size={64} bg="red.5" color="white" mr={2} />
-</FlexContainer>
+  <CircleOcticon icon={Check} size={32} bg="green.5" color="white"/>
 ```
+
+## System props
+
+CircleOcticon components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+## Component props
+
+| Prop name | Type | Description |
+| :- | :- | :- |
+| icon | Octicon | Octicon component used in the component |
+| size | Number | used to set the width and height of the component |
+
+
 export const meta = {displayName: 'CircleOcticon'}

From 61dfbab764222c393550abf978be01c3647cd950 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 15:31:38 -0700
Subject: [PATCH 12/51] fix system props docs

---
 pages/components/docs/Avatar.md      | 4 ++--
 pages/components/docs/BranchName.md  | 2 +-
 pages/components/docs/Button.md      | 2 +-
 pages/components/docs/CircleBadge.md | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/pages/components/docs/Avatar.md b/pages/components/docs/Avatar.md
index 7c16ced2867..f6592e56755 100644
--- a/pages/components/docs/Avatar.md
+++ b/pages/components/docs/Avatar.md
@@ -11,11 +11,11 @@ Avatars are images that users can set as their profile picture. On GitHub, they'
 
 ## System props
 
-Avatar components get `color, spacing` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+Avatar components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 ## Component props
 
-| Prop name | Type | Description 
+| Prop name | Type | Description
 | :- | :- | :- |
 | alt | String | Passed through to alt on img tag
 | isChild | Boolean | adds the `avatar-child` class if present
diff --git a/pages/components/docs/BranchName.md b/pages/components/docs/BranchName.md
index ef81e7f5f19..450e4e0c06d 100644
--- a/pages/components/docs/BranchName.md
+++ b/pages/components/docs/BranchName.md
@@ -8,7 +8,7 @@
 
 ## System props
 
-BranchName components get `COMMON` and `LAYOUT` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+BranchName components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 ## Component props
 
diff --git a/pages/components/docs/Button.md b/pages/components/docs/Button.md
index b545249c994..f696d4772c7 100644
--- a/pages/components/docs/Button.md
+++ b/pages/components/docs/Button.md
@@ -12,7 +12,7 @@
 
 ## System props
 
-Button components get `COMMON` and `LAYOUT` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+Button components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 ## Component props
 
diff --git a/pages/components/docs/CircleBadge.md b/pages/components/docs/CircleBadge.md
index bf572bb3f0b..aa68a916494 100644
--- a/pages/components/docs/CircleBadge.md
+++ b/pages/components/docs/CircleBadge.md
@@ -10,7 +10,7 @@
 
 ## System props
 
-CircleBadge components get `COMMON` and `LAYOUT` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+CircleBadge components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 ## Component props
 
@@ -19,7 +19,7 @@ CircleBadge components get `COMMON` and `LAYOUT` system props. Read our [System
 | is | String | sets the HTML tag for the component, defaults to `button` |
 | alt | String | alt tag |
 | size | String or Number | Use `small`, `medium`, or `large` for default sizes, or provide a custom size |
-| src | String | URL for image used in badge if `is` is set to `img` | 
+| src | String | URL for image used in badge if `is` is set to `img` |
 
 
 export const meta = {displayName: 'CircleBadge'}

From 154b393466008b5ac7a0814e55cdd19d7c75fb4d Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 14:52:18 -0700
Subject: [PATCH 13/51] add CounterLabel prop docs

---
 pages/components/docs/CounterLabel.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/pages/components/docs/CounterLabel.md b/pages/components/docs/CounterLabel.md
index 78055d39029..e31aadcb129 100644
--- a/pages/components/docs/CounterLabel.md
+++ b/pages/components/docs/CounterLabel.md
@@ -1,10 +1,21 @@
 
 # CounterLabel
 
+## Default example
 ```.jsx
 <CounterLabel>12</CounterLabel>
 <CounterLabel scheme={'gray'}>13</CounterLabel>
 <CounterLabel scheme={'gray-light'}>13</CounterLabel>
 ```
 
+## System props
+
+CounterLabel components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+## Component props
+
+| Prop name | Type | Description |
+| :- | :- | :- |
+| scheme | String | Pass in 'gray' for a gray background and white text, or 'gray-light' for a lighter gray background and dark text. Omitting the scheme prop renders the default counter scheme |
+
 export const meta = {displayName: 'CounterLabel'}

From 868c83721453e311039387768f22a0feccc023e3 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 21:50:22 -0700
Subject: [PATCH 14/51] add Details props docs

---
 pages/components/docs/Details.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/pages/components/docs/Details.md b/pages/components/docs/Details.md
index 1143ac9ae04..175e811f03f 100644
--- a/pages/components/docs/Details.md
+++ b/pages/components/docs/Details.md
@@ -26,4 +26,16 @@
 <ExampleHeading>With render prop</ExampleHeading>
 <Details render={() => 'hi'} />
 ```
+
+## System props
+
+Details components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+## Component props
+
+| Prop name | Type | Description |
+| :- | :- | :- |
+| open | Boolean | Sets the open/closed state of the Details component |
+| render | Function | Optional render function as a prop, to allow you to handle toggling and open/closed state within a container component
+
 export const meta = {displayName: 'Details'}

From df866b25526098f3d4201688bf2d38e147902dfb Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 22:03:28 -0700
Subject: [PATCH 15/51] Donut chart system props

---
 pages/components/docs/DonutChart.md | 69 ++++-------------------------
 1 file changed, 9 insertions(+), 60 deletions(-)

diff --git a/pages/components/docs/DonutChart.md b/pages/components/docs/DonutChart.md
index 89930c37269..20fae12e4a8 100644
--- a/pages/components/docs/DonutChart.md
+++ b/pages/components/docs/DonutChart.md
@@ -1,67 +1,16 @@
 # DonutChart
 
 ```.jsx
-<Box mb={2}>
-  <ExampleHeading>
-    With <Text fontFamily="mono">data</Text> prop
-  </ExampleHeading>
-
-  <DonutChart mr={1} data={{error: 2, pending: 3, success: 5}} />
-  <DonutChart mr={1} data={{error: 1, pending: 4, success: 2}} />
-  <DonutChart mr={1} data={{pending: 2, success: 6}} />
-  <DonutChart mr={1} data={{pending: 0, success: 1}} />
-  <DonutChart mr={1} data={{pending: 1, queued: 1}} />
-  <DonutChart mr={1} data={{unknown: 1}} />
-</Box>
-<Box mb={2}>
-  <ExampleHeading>
-    With <Text fontFamily="mono">DonutSlice</Text> children
-  </ExampleHeading>
-
-  <DonutChart mr={1}>
-    <DonutSlice value={1} state="pending" />
-    <DonutSlice value={1} state="success" />
-    <DonutSlice value={1} state="error" />
-  </DonutChart>
-
-  <DonutChart mr={1}>
-    <DonutSlice value={1} state="error" />
-    <DonutSlice value={4} state="pending" />
-    <DonutSlice value={2} state="success" />
-  </DonutChart>
-
-  <DonutChart mr={1}>
-    <DonutSlice value={2} state="pending" />
-    <DonutSlice value={6} state="success" />
-  </DonutChart>
-
-  <DonutChart mr={1}>
-    <DonutSlice value={0} state="pending" />
-    <DonutSlice value={1} state="success" />
-  </DonutChart>
-
-  <DonutChart mr={1}>
-    <DonutSlice value={1} state="pending" />
-    <DonutSlice value={1} state="queued" />
-  </DonutChart>
+<DonutChart mr={1} data={{error: 2, pending: 3, success: 5}} />
+<DonutChart mr={1}>
+  <DonutSlice value={1} state="pending" />
+  <DonutSlice value={1} state="success" />
+  <DonutSlice value={1} state="error" />
+</DonutChart>
+```
 
-  <DonutChart>
-    <DonutSlice value={1} state="queued" />
-  </DonutChart>
-</Box>
+## System props
 
-<Box mb={2}>
-  <ExampleHeading>
-    With <Text fontFamily="mono">DonutSlice</Text> children
-  </ExampleHeading>
+Details components get `space` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
-  <DonutChart>
-    <DonutSlice value={1} fill={theme.colors.purple[0]} />
-    <DonutSlice value={1} fill={theme.colors.purple[1]} />
-    <DonutSlice value={1} fill={theme.colors.purple[2]} />
-    <DonutSlice value={1} fill={theme.colors.purple[3]} />
-    <DonutSlice value={1} fill={theme.colors.purple[4]} />
-  </DonutChart>
-</Box>
-```
 export const meta = {displayName: 'DonutChart'}

From 34206ee75d04516db2f936c83077bbd672025bf6 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 22:11:25 -0700
Subject: [PATCH 16/51] Dropdown system props docs

---
 pages/components/docs/DonutChart.md |  3 ++-
 pages/components/docs/Dropdown.md   | 42 ++++++++---------------------
 2 files changed, 13 insertions(+), 32 deletions(-)

diff --git a/pages/components/docs/DonutChart.md b/pages/components/docs/DonutChart.md
index 20fae12e4a8..3a5f83ced85 100644
--- a/pages/components/docs/DonutChart.md
+++ b/pages/components/docs/DonutChart.md
@@ -1,5 +1,6 @@
 # DonutChart
 
+## Default example
 ```.jsx
 <DonutChart mr={1} data={{error: 2, pending: 3, success: 5}} />
 <DonutChart mr={1}>
@@ -11,6 +12,6 @@
 
 ## System props
 
-Details components get `space` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+DonutChart components get `space` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 export const meta = {displayName: 'DonutChart'}
diff --git a/pages/components/docs/Dropdown.md b/pages/components/docs/Dropdown.md
index 746e5251b2f..5cca61c5189 100644
--- a/pages/components/docs/Dropdown.md
+++ b/pages/components/docs/Dropdown.md
@@ -1,39 +1,19 @@
 
 # Dropdown
 
+## Default example
 ```.jsx
-<Box mb={4}>
-  <ExampleHeading>Dropdown Primary</ExampleHeading>
-  <Dropdown scheme="primary" minWidth="5em">
-    <Box is="ul" m={0} p={0} className="list-style-none">
-      <li>Item 1</li>
-      <li>Item 2</li>
-      <li>Item 3</li>
-    </Box>
-  </Dropdown>
-</Box>
+<Dropdown scheme="primary" minWidth="5em">
+  <Box is="ul" m={0} p={0} className="list-style-none">
+    <li>Item 1</li>
+    <li>Item 2</li>
+    <li>Item 3</li>
+  </Box>
+</Dropdown>
+```
 
-<Box mb={4}>
-  <ExampleHeading>Dropdown</ExampleHeading>
-  <Dropdown minWidth="5em">
-    <Box is="ul" m={0} p={0} className="list-style-none">
-      <li>Item 1</li>
-      <li>Item 2</li>
-      <li>Item 3</li>
-    </Box>
-  </Dropdown>
-</Box>
+## System props
 
-<Box mb={4}>
-  <ExampleHeading>Dropdown with title</ExampleHeading>
-  <Dropdown title="Options" minWidth="5em">
-    <Box is="ul" m={0} p={0} className="list-style-none">
-      <li>Item 1</li>
-      <li>Item 2</li>
-      <li>Item 3</li>
-    </Box>
-  </Dropdown>
-</Box>
-```
+Dropdown components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 export const meta = {displayName: 'Dropdown'}

From fd6c28205e5db42bae55a614eee2369845bcdbbb Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 22:12:31 -0700
Subject: [PATCH 17/51] FilterList system props docs

---
 pages/components/docs/FilterList.md | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/pages/components/docs/FilterList.md b/pages/components/docs/FilterList.md
index 346db5c4c18..1a00436799d 100644
--- a/pages/components/docs/FilterList.md
+++ b/pages/components/docs/FilterList.md
@@ -1,18 +1,17 @@
 # FilterList
 
+## Default example
+
 ```.jsx
 <FilterList>
   <FilterListItem selected count='32' href='#foo'>First Filter</FilterListItem>
   <FilterListItem count='2' href='#bar'>Second Filter</FilterListItem>
   <FilterListItem href='#baz'>Third Filter</FilterListItem>
 </FilterList>
-
-<ExampleHeading>Small</ExampleHeading>
-<FilterList small>
-  <FilterListItem selected count='32' href='#foo'>First Filter</FilterListItem>
-  <FilterListItem href='#bar'>Second Filter</FilterListItem>
-  <FilterListItem href='#baz'>Third Filter</FilterListItem>
-</FilterList>
 ```
 
+## System props
+
+FilterList components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
 export const meta = {displayName: 'FilterList'}

From 17290cdb3021f4ab056cdea3693072208349dc6f Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 22:13:28 -0700
Subject: [PATCH 18/51] Flash system props doccs

---
 pages/components/docs/Flash.md | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/pages/components/docs/Flash.md b/pages/components/docs/Flash.md
index 8013b8d5265..d8a1db3cc4b 100644
--- a/pages/components/docs/Flash.md
+++ b/pages/components/docs/Flash.md
@@ -1,12 +1,14 @@
 
 # Flash
 
+## Default example
+
 ```.jsx
-<Flash m={4}> Flash </Flash>
-<Flash m={4} scheme="yellow"> Flash yellow </Flash>
-<Flash m={4} scheme="red"> Flash red </Flash>
 <Flash m={4} scheme="green"> Flash green </Flash>
-<Flash m={4} full> Flash full </Flash>
 ```
 
+## System props
+
+Flash components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
 export const meta = {displayName: 'Flash'}

From d31e2b3a697aeedd4a7e385eb8fa76c04bf74e78 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 22:15:39 -0700
Subject: [PATCH 19/51] flex system props docs

---
 pages/components/docs/Flex.md | 51 +++++++----------------------------
 1 file changed, 9 insertions(+), 42 deletions(-)

diff --git a/pages/components/docs/Flex.md b/pages/components/docs/Flex.md
index 1489ef0d51f..00161e9bbe0 100644
--- a/pages/components/docs/Flex.md
+++ b/pages/components/docs/Flex.md
@@ -1,7 +1,8 @@
 # FlexContainer and FlexItem
 
+## Default example
+
 ```.jsx
-<ExampleHeading mt={3}>FlexContainer + FlexItems</ExampleHeading>
 <BorderBox width={300} height={300} borderRadius={0}>
   <FlexContainer flexWrap="nowrap">
     <FlexItem>
@@ -21,49 +22,15 @@
     </FlexItem>
   </FlexContainer>
 </BorderBox>
+```
 
+## System props
 
-<ExampleHeading mt={2}>FlexContainer + FlexItems direction set to 'column'</ExampleHeading>
-<BorderBox width={400} height={200} borderRadius={0}>
-  <FlexContainer flexWrap="nowrap" flexDirection='column'>
-    <FlexItem>
-      <Box p={3} bg="blue.5">
-        Item 1
-      </Box>
-    </FlexItem>
-    <FlexItem>
-      <Box p={3} bg="green.5">
-        Item 2
-      </Box>
-    </FlexItem>
-    <FlexItem>
-      <Box p={3} bg="yellow.5">
-        Item 3
-      </Box>
-    </FlexItem>
-  </FlexContainer>
-</BorderBox>
+FlexContainer components get `FLEX_CONTAINER`, 'COMMON', and 'LAYOUT' system props.
+
+FlexItem components get `FLEX_ITEM`, 'COMMON', and 'LAYOUT' system props.
+
+Read our [System Props](/system-props) doc page for a full list of available props.
 
-<ExampleHeading mt={2}>FlexContainer + FlexItems using tag prop set to "p"</ExampleHeading>
-<BorderBox width={400} height={200} borderRadius={0}>
-  <FlexContainer flexWrap="nowrap">
-    <FlexItem is="p">
-      <Box p={3} bg="blue.5">
-        Item 1
-      </Box>
-    </FlexItem>
-    <FlexItem is="p">
-      <Box p={3} bg="green.5">
-        Item 2
-      </Box>
-    </FlexItem>
-    <FlexItem is="p">
-      <Box p={3} bg="yellow.5">
-        Item 3
-      </Box>
-    </FlexItem>
-  </FlexContainer>
-</BorderBox>
-```
 
 export const meta = {displayName: 'Flex'}

From 0183eccff4a5810c55c20c54a0bba87bbf782d49 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 22:16:59 -0700
Subject: [PATCH 20/51] heading system props docs

---
 pages/components/docs/Heading.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/pages/components/docs/Heading.md b/pages/components/docs/Heading.md
index 0688a6b6180..bf76ed62f43 100644
--- a/pages/components/docs/Heading.md
+++ b/pages/components/docs/Heading.md
@@ -1,9 +1,12 @@
 # Heading
 
+## Default example
 ```.jsx
 <Heading fontSize={1} mb={2}>With fontSize={1}</Heading>
-<Heading fontSize={2} mb={2}>With fontSize={2}</Heading>
-<Heading fontSize={3} mb={2}>With fontSize={3}</Heading>
 ```
 
+## System props
+
+Dropdown components get `TYPOGRAPHY` and 'COMMON' system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
 export const meta = {displayName: 'Heading'}

From 5361bb700318129b63e725b86bcef6fbb82ad901 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 22:18:06 -0700
Subject: [PATCH 21/51] Label system props docs

---
 pages/components/docs/Label.md | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/pages/components/docs/Label.md b/pages/components/docs/Label.md
index 21424a838fd..ea17509007d 100644
--- a/pages/components/docs/Label.md
+++ b/pages/components/docs/Label.md
@@ -1,13 +1,15 @@
 # Label
 
+## Default example
+
 ```.jsx
-<FlexContainer flexDirection="column" alignItems="start">
-  <Label m={1}>Default label</Label>
-  <Label m={1} scheme="gray-darker">Darker gray label</Label>
-  <Label m={1} scheme="orange">Orange label</Label>
-  <Label m={1} scheme="green">Green label</Label>
-  <Label m={1} outline>Default outline label</Label>
-  <Label m={1} outline scheme="green">Green outline label</Label>
-</FlexContainer>
+<Label m={1}>Default label</Label>
+<Label m={1} scheme="gray-darker">Darker gray label</Label>
+<Label m={1} outline>Default outline label</Label>
 ```
+
+## System props
+
+Dropdown components get 'COMMON' system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
 export const meta = {displayName: 'Label'}

From 1b6288c7221086121869e140e9e5baf59c090534 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 22:19:34 -0700
Subject: [PATCH 22/51] Link system props docs

---
 pages/components/docs/Heading.md |  2 +-
 pages/components/docs/Label.md   |  2 +-
 pages/components/docs/Link.md    | 10 +++++++---
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/pages/components/docs/Heading.md b/pages/components/docs/Heading.md
index bf76ed62f43..ecdd0ea4b1c 100644
--- a/pages/components/docs/Heading.md
+++ b/pages/components/docs/Heading.md
@@ -7,6 +7,6 @@
 
 ## System props
 
-Dropdown components get `TYPOGRAPHY` and 'COMMON' system props. Read our [System Props](/system-props) doc page for a full list of available props.
+Heading components get `TYPOGRAPHY` and 'COMMON' system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 export const meta = {displayName: 'Heading'}
diff --git a/pages/components/docs/Label.md b/pages/components/docs/Label.md
index ea17509007d..5efffbec44b 100644
--- a/pages/components/docs/Label.md
+++ b/pages/components/docs/Label.md
@@ -10,6 +10,6 @@
 
 ## System props
 
-Dropdown components get 'COMMON' system props. Read our [System Props](/system-props) doc page for a full list of available props.
+Label components get 'COMMON' system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 export const meta = {displayName: 'Label'}
diff --git a/pages/components/docs/Link.md b/pages/components/docs/Link.md
index 88c066beecf..8abf67f13c5 100644
--- a/pages/components/docs/Link.md
+++ b/pages/components/docs/Link.md
@@ -1,9 +1,13 @@
 # Link
 
+## Default example
+
 ```.jsx
 <Link mb={1} href="https://github.com">Link</Link>
-<Link mb={1} muted href="https://github.com">Link muted</Link>
-<Link mb={1} scheme="gray" href="https://github.com">Link gray</Link>
-<Link mb={1} scheme="gray-dark" href="https://github.com">Link gray-dark</Link>
 ```
+
+## System props
+
+Link components get 'COMMON' system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
 export const meta = {displayName: 'Link'}

From a6060a34e2d8b2060400f6c12ee12b56b7950694 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 22:20:11 -0700
Subject: [PATCH 23/51] MergeStatus system props docs

---
 pages/components/docs/MergeStatus.md | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/pages/components/docs/MergeStatus.md b/pages/components/docs/MergeStatus.md
index d82e1f826b1..f7f41f96125 100644
--- a/pages/components/docs/MergeStatus.md
+++ b/pages/components/docs/MergeStatus.md
@@ -1,12 +1,16 @@
 # MergeStatus
 
+
+## Default example
 ```.jsx
-<FlexContainer flexDirection="column" alignItems="start">
-  <MergeStatus mb={2} state="pending" />
-  <MergeStatus mb={2} state="invalid" />
-  <MergeStatus mb={2} state="merged" />
-  <MergeStatus mb={2} state="ready" />
-</FlexContainer>
+<MergeStatus mb={2} state="pending" />
+<MergeStatus mb={2} state="invalid" />
+<MergeStatus mb={2} state="merged" />
+<MergeStatus mb={2} state="ready" />
 ```
 
+## System props
+
+MergeStatus components get 'COMMON' system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
 export const meta = {displayName: 'MergeStatus'}

From 7408e8666cf394957448433ab19b8020eefe7df0 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 22:21:40 -0700
Subject: [PATCH 24/51] PointerBox system props docs

---
 pages/components/docs/PointerBox.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/pages/components/docs/PointerBox.md b/pages/components/docs/PointerBox.md
index 1ddd82aa068..c2157ab3ca5 100644
--- a/pages/components/docs/PointerBox.md
+++ b/pages/components/docs/PointerBox.md
@@ -1,9 +1,15 @@
 # PointerBox
 
+## Default example
+
 ```.jsx
 <PointerBox m={4} p={2} minHeight={100} bg="green.1" borderColor="green.5">
   PointerBox
 </PointerBox>
 ```
 
+## System props
+
+PointerBox components get 'LAYOUT' and 'COMMON' system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
 export const meta = {displayName: 'PointerBox'}

From fe829bf26759e503039d3c5dbf43855e4e87c617 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 22:22:31 -0700
Subject: [PATCH 25/51] Position system props docs

---
 pages/components/docs/Position.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/pages/components/docs/Position.md b/pages/components/docs/Position.md
index 918c8486e6b..98e4cb19446 100644
--- a/pages/components/docs/Position.md
+++ b/pages/components/docs/Position.md
@@ -1,5 +1,7 @@
 # Position Components
 
+## Default examples
+
 ```.jsx
 <Box p={2} mb={200}>
   <ExampleHeading mb={2}>Relative + Absolute</ExampleHeading>
@@ -33,4 +35,8 @@
 </Box>
 ```
 
+## System props
+
+Position components get 'POSITION', 'LAYOUT' and 'COMMON' system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
 export const meta = {displayName: 'Position'}

From 38e352acf861bdb98011be45e938618e6ab55a1d Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 22:25:45 -0700
Subject: [PATCH 26/51] add code quotes

---
 pages/components/docs/Flex.md        |  4 +-
 pages/components/docs/Heading.md     |  2 +-
 pages/components/docs/Label.md       |  2 +-
 pages/components/docs/Link.md        |  2 +-
 pages/components/docs/MergeStatus.md |  2 +-
 pages/components/docs/PointerBox.md  |  2 +-
 pages/components/docs/Position.md    |  2 +-
 pages/components/docs/StateLabel.md  | 78 ++--------------------------
 8 files changed, 13 insertions(+), 81 deletions(-)

diff --git a/pages/components/docs/Flex.md b/pages/components/docs/Flex.md
index 00161e9bbe0..8b70b1a5cc3 100644
--- a/pages/components/docs/Flex.md
+++ b/pages/components/docs/Flex.md
@@ -26,9 +26,9 @@
 
 ## System props
 
-FlexContainer components get `FLEX_CONTAINER`, 'COMMON', and 'LAYOUT' system props.
+FlexContainer components get `FLEX_CONTAINER`, `COMMON`, and `LAYOUT` system props.
 
-FlexItem components get `FLEX_ITEM`, 'COMMON', and 'LAYOUT' system props.
+FlexItem components get `FLEX_ITEM`, `COMMON`, and `LAYOUT` system props.
 
 Read our [System Props](/system-props) doc page for a full list of available props.
 
diff --git a/pages/components/docs/Heading.md b/pages/components/docs/Heading.md
index ecdd0ea4b1c..78c2d7051c3 100644
--- a/pages/components/docs/Heading.md
+++ b/pages/components/docs/Heading.md
@@ -7,6 +7,6 @@
 
 ## System props
 
-Heading components get `TYPOGRAPHY` and 'COMMON' system props. Read our [System Props](/system-props) doc page for a full list of available props.
+Heading components get `TYPOGRAPHY` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 export const meta = {displayName: 'Heading'}
diff --git a/pages/components/docs/Label.md b/pages/components/docs/Label.md
index 5efffbec44b..8cd3a0b06b2 100644
--- a/pages/components/docs/Label.md
+++ b/pages/components/docs/Label.md
@@ -10,6 +10,6 @@
 
 ## System props
 
-Label components get 'COMMON' system props. Read our [System Props](/system-props) doc page for a full list of available props.
+Label components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 export const meta = {displayName: 'Label'}
diff --git a/pages/components/docs/Link.md b/pages/components/docs/Link.md
index 8abf67f13c5..821c38b5497 100644
--- a/pages/components/docs/Link.md
+++ b/pages/components/docs/Link.md
@@ -8,6 +8,6 @@
 
 ## System props
 
-Link components get 'COMMON' system props. Read our [System Props](/system-props) doc page for a full list of available props.
+Link components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 export const meta = {displayName: 'Link'}
diff --git a/pages/components/docs/MergeStatus.md b/pages/components/docs/MergeStatus.md
index f7f41f96125..1d2243a9b22 100644
--- a/pages/components/docs/MergeStatus.md
+++ b/pages/components/docs/MergeStatus.md
@@ -11,6 +11,6 @@
 
 ## System props
 
-MergeStatus components get 'COMMON' system props. Read our [System Props](/system-props) doc page for a full list of available props.
+MergeStatus components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 export const meta = {displayName: 'MergeStatus'}
diff --git a/pages/components/docs/PointerBox.md b/pages/components/docs/PointerBox.md
index c2157ab3ca5..040fc7c8043 100644
--- a/pages/components/docs/PointerBox.md
+++ b/pages/components/docs/PointerBox.md
@@ -10,6 +10,6 @@
 
 ## System props
 
-PointerBox components get 'LAYOUT' and 'COMMON' system props. Read our [System Props](/system-props) doc page for a full list of available props.
+PointerBox components get `LAYOUT` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 export const meta = {displayName: 'PointerBox'}
diff --git a/pages/components/docs/Position.md b/pages/components/docs/Position.md
index 98e4cb19446..0f48c7c0ba3 100644
--- a/pages/components/docs/Position.md
+++ b/pages/components/docs/Position.md
@@ -37,6 +37,6 @@
 
 ## System props
 
-Position components get 'POSITION', 'LAYOUT' and 'COMMON' system props. Read our [System Props](/system-props) doc page for a full list of available props.
+Position components get `POSITION`, `LAYOUT` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 export const meta = {displayName: 'Position'}
diff --git a/pages/components/docs/StateLabel.md b/pages/components/docs/StateLabel.md
index a9e5904eb45..e87e0803b7c 100644
--- a/pages/components/docs/StateLabel.md
+++ b/pages/components/docs/StateLabel.md
@@ -1,81 +1,13 @@
 # StateLabel
 
-```.jsx
-<Box mb={2}>
-  <StateLabel state="open">Open</StateLabel>
-</Box>
-<Box mb={2}>
-  <StateLabel state="closed">Closed</StateLabel>
-</Box>
-<Box mb={4}>
-  <StateLabel state="merged">Merged</StateLabel>
-</Box>
+## Default example
 
-<ExampleHeading>By state (Octicons built in)</ExampleHeading>
-<Box mb={2}>
-  <StateLabel>Unknown</StateLabel>
-</Box>
-<Box mb={2}>
+```.jsx
   <StateLabel state="open">Open</StateLabel>
-</Box>
-<Box mb={2}>
-  <StateLabel state="closed">Closed</StateLabel>
-</Box>
-<Box mb={2}>
-  <StateLabel state="merged">Merged</StateLabel>
-</Box>
-<Box mb={2}>
-  <StateLabel state="reopened">Reopened</StateLabel>
-</Box>
+```
 
-<ExampleHeading>By color</ExampleHeading>
-<Box mb={2}>
-  <StateLabel scheme="invalid">Invalid</StateLabel>
-</Box>
-<Box mb={2}>
-  <StateLabel scheme="green">Green</StateLabel>
-</Box>
-<Box mb={2}>
-  <StateLabel scheme="red">Red</StateLabel>
-</Box>
-<Box mb={2}>
-  <StateLabel scheme="purple">Purple</StateLabel>
-</Box>
+## System props
 
-<ExampleHeading>Small, by state</ExampleHeading>
-<Box mb={2}>
-  <StateLabel mr={2} small>Unknown</StateLabel>
-  <StateLabel mr={2} small state="open">
-    Open
-  </StateLabel>
-  <StateLabel mr={2} small state="closed">
-    Closed
-  </StateLabel>
-  <StateLabel mr={2} small state="merged">
-    Merged
-  </StateLabel>
-  <StateLabel mr={2} small state="reopened">
-    Reopened
-  </StateLabel>
-</Box>
+StateLabel components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
-<ExampleHeading>Small, by color</ExampleHeading>
-<Box mb={2}>
-  <StateLabel mr={2} small scheme="invalid">
-    Invalid
-  </StateLabel>
-  <StateLabel mr={2} small scheme="green">
-    Green
-  </StateLabel>
-  <StateLabel mr={2} small scheme="red">
-    Red
-  </StateLabel>
-  <StateLabel mr={2} small scheme="purple">
-    Purple
-  </StateLabel>
-  <StateLabel mr={2} small scheme="green" icon={<Octicon icon={GitBranch} />}>
-    Custom Octicon
-  </StateLabel>
-</Box>
-```
 export const meta = {displayName: 'StateLabel'}

From 9ef50ce7939329bdb7ae11a195f459796e933966 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 22:28:52 -0700
Subject: [PATCH 27/51] Text system props docs

---
 pages/components/docs/Text.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/pages/components/docs/Text.md b/pages/components/docs/Text.md
index d408b302bfd..cdcb6d2b6fd 100644
--- a/pages/components/docs/Text.md
+++ b/pages/components/docs/Text.md
@@ -1,12 +1,12 @@
 # Text
 
+## Default example
 ```.jsx
-<Text is="div">Text</Text>
-<Text is="div" fontWeight="bold">Text bold</Text>
-<Text is="div" color="green.5">Text green</Text>
-<Text is="div" lineHeight="condensed">Text lineHeight 'condensed'</Text>
-<Text is="div" fontSize={4}>Text fontSize 4</Text>
-<Text is="div" p={4}>Text padding 4</Text>
+<Text is="div" fontWeight="bold" lineHeight="condensed">Text</Text>
 ```
 
+## System props
+
+Text components get `TYPOGRAPHY` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
 export const meta = {displayName: 'Text'}

From 170aecbcd923d8e14577390c4597a50a15d98ed0 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 22:28:59 -0700
Subject: [PATCH 28/51] TextInput system props docs

---
 pages/components/docs/TextInput.md | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/pages/components/docs/TextInput.md b/pages/components/docs/TextInput.md
index 68a7d963119..917b426e530 100644
--- a/pages/components/docs/TextInput.md
+++ b/pages/components/docs/TextInput.md
@@ -1,14 +1,13 @@
 # TextInput
 
+## Default example
+
 ```.jsx
 <TextInput name="zipcode" />
+```
 
-<ExampleHeading>Text Input Sizes</ExampleHeading>
-<TextInput name="zipcode" size="small" placeholder="Small input" />
-<TextInput name="zipcode" size="large" placeholder="Large input" />
+## System props
 
-<ExampleHeading>Text Input - Block</ExampleHeading>
-<TextInput block placeholder="Full width block input" />
-```
+TextInput components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 export const meta = {displayName: 'TextInput'}

From 798bf6ff85e9ecaa341b3d91c9eeb72e7431e937 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 22:29:44 -0700
Subject: [PATCH 29/51] tooltip system props docs

---
 pages/components/docs/Tooltip.md | 44 ++++----------------------------
 1 file changed, 5 insertions(+), 39 deletions(-)

diff --git a/pages/components/docs/Tooltip.md b/pages/components/docs/Tooltip.md
index a6f03586e5c..8980ac84b88 100644
--- a/pages/components/docs/Tooltip.md
+++ b/pages/components/docs/Tooltip.md
@@ -1,49 +1,15 @@
 # Tooltip
 
+## Default example
+
 ```.jsx
-<ExampleHeading mt={3}>Basic Tooltip</ExampleHeading>
 <BorderBox p={3}>
   <Tooltip text="Hello, Tooltip!">Text with a tooltip</Tooltip>
 </BorderBox>
+```
 
-<ExampleHeading mt={3}>Directions</ExampleHeading>
-{Tooltip.directions.map(dir => (
-  <BorderBox p={3} my={2} key="top">
-    <Tooltip text="Hello, Tooltip!" direction="${dir}">
-      Tooltip direction="${dir}"
-    </Tooltip>
-  </BorderBox>
-))}
-
-
-<ExampleHeading mt={3}>Word wrap</ExampleHeading>
-<BorderBox p={3} my={2}>
-  <Tooltip
-    text="Hello, Tooltip! This tooltip has a sentence that will wrap to a newline."
-    wrap
-    direction="ne"
-    align="left"
-  >
-    Word wrapping tooltip
-  </Tooltip>
-</BorderBox>
-
-<ExampleHeading mt={3}>Alignment</ExampleHeading>
-{Tooltip.alignments.map(align => (
-  <BorderBox p={3} my={2} key="${align}">
-    <Tooltip text="Hello, Tooltip!" direction="ne" align="${align}">
-      Tooltip align="${align}"
-    </Tooltip>
-  </BorderBox>
-))}
-
+## System props
 
-<ExampleHeading mt={3}>No Delay</ExampleHeading>
-<BorderBox p={3} my={2}>
-  <Tooltip noDelay text="Hello, Tooltip!">
-    Text with a tooltip
-  </Tooltip>
-</BorderBox>`
-```
+Tooltip components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 export const meta = {displayName: 'Tooltip'}

From 6332ec5919758a4f250e4834aff1a51d7590218c Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Thu, 13 Sep 2018 22:31:05 -0700
Subject: [PATCH 30/51] underlinenav system props docs

---
 pages/components/docs/UnderlineNav.md | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/pages/components/docs/UnderlineNav.md b/pages/components/docs/UnderlineNav.md
index 40fac39b577..e16f983d046 100644
--- a/pages/components/docs/UnderlineNav.md
+++ b/pages/components/docs/UnderlineNav.md
@@ -1,5 +1,13 @@
 # UnderlineNav
 
+
+To use UnderlineNav with [react-router](https://github.com/ReactTraining/react-router) or
+[react-router-dom](https://www.npmjs.com/package/react-router-dom), pass
+```is={NavLink}``` and omit the ```selected``` prop.
+This ensures that the NavLink gets ```activeClassName='selected'```
+
+## Default example
+
 ```.jsx
 <ExampleHeading>
   Using <Text fontFamily="mono">{'<UnderlineNavLink>'}</Text>
@@ -13,10 +21,9 @@
 </UnderlineNav>
 ```
 
-  To use UnderlineNav with [react-router](https://github.com/ReactTraining/react-router) or
-  [react-router-dom](https://www.npmjs.com/package/react-router-dom), pass
-  ```is={NavLink}``` and omit the ```selected``` prop.
-  This ensures that the NavLink gets ```activeClassName='selected'```
+## System props
+
+UnderlineNav and UnderlineNavLink components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 
 export const meta = {displayName: 'UnderlineNav'}

From e11dcc59356663cbed813e547fbb27f5b0dab2e1 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Fri, 14 Sep 2018 07:28:04 -0700
Subject: [PATCH 31/51] docs tweaks

---
 pages/components/docs/CircleBadge.md  | 4 ++--
 pages/components/docs/CounterLabel.md | 2 +-
 pages/components/docs/Details.md      | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/pages/components/docs/CircleBadge.md b/pages/components/docs/CircleBadge.md
index aa68a916494..2165aac3da4 100644
--- a/pages/components/docs/CircleBadge.md
+++ b/pages/components/docs/CircleBadge.md
@@ -16,10 +16,10 @@ CircleBadge components get `COMMON` system props. Read our [System Props](/syste
 
 | Prop name | Type | Description |
 | :- | :- | :- |
-| is | String | sets the HTML tag for the component, defaults to `button` |
+| is | String | sets the HTML tag for the component, defaults to `div` |
 | alt | String | alt tag |
 | size | String or Number | Use `small`, `medium`, or `large` for default sizes, or provide a custom size |
-| src | String | URL for image used in badge if `is` is set to `img` |
+
 
 
 export const meta = {displayName: 'CircleBadge'}
diff --git a/pages/components/docs/CounterLabel.md b/pages/components/docs/CounterLabel.md
index e31aadcb129..ba0b8888cda 100644
--- a/pages/components/docs/CounterLabel.md
+++ b/pages/components/docs/CounterLabel.md
@@ -16,6 +16,6 @@ CounterLabel components get `COMMON` system props. Read our [System Props](/syst
 
 | Prop name | Type | Description |
 | :- | :- | :- |
-| scheme | String | Pass in 'gray' for a gray background and white text, or 'gray-light' for a lighter gray background and dark text. Omitting the scheme prop renders the default counter scheme |
+| scheme | String | Pass in 'gray' for a darker gray background and white text, or 'gray-light' for a lighter gray background and dark text. Omitting the scheme prop renders the default counter scheme |
 
 export const meta = {displayName: 'CounterLabel'}
diff --git a/pages/components/docs/Details.md b/pages/components/docs/Details.md
index 175e811f03f..2bdb2e355c6 100644
--- a/pages/components/docs/Details.md
+++ b/pages/components/docs/Details.md
@@ -36,6 +36,6 @@ Details components get `COMMON` system props. Read our [System Props](/system-pr
 | Prop name | Type | Description |
 | :- | :- | :- |
 | open | Boolean | Sets the open/closed state of the Details component |
-| render | Function | Optional render function as a prop, to allow you to handle toggling and open/closed state within a container component
+| render | Function | Optional render function, to allow you to handle toggling and open/closed state from a container component.
 
 export const meta = {displayName: 'Details'}

From a597196c4ed90befcf83889140939b6b12c9bcaa Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Fri, 14 Sep 2018 07:28:14 -0700
Subject: [PATCH 32/51] add component props docs for DonutChart

---
 pages/components/docs/DonutChart.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/pages/components/docs/DonutChart.md b/pages/components/docs/DonutChart.md
index 3a5f83ced85..765d56b8270 100644
--- a/pages/components/docs/DonutChart.md
+++ b/pages/components/docs/DonutChart.md
@@ -14,4 +14,11 @@
 
 DonutChart components get `space` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
+## Component props
+
+| Prop name | Type | Description |
+| :- | :- | :- |
+| data | Object | Use the keys `error`, `pending`, and `success` to set values used to generate slices in the chart |
+| size | Number | Used to set the width and height of the component
+
 export const meta = {displayName: 'DonutChart'}

From 4b65a7daf84eaae061f78069adccf59a0558beb1 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Fri, 14 Sep 2018 07:31:14 -0700
Subject: [PATCH 33/51] add Dropdown component props

---
 pages/components/docs/Dropdown.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/pages/components/docs/Dropdown.md b/pages/components/docs/Dropdown.md
index 5cca61c5189..c8299f68902 100644
--- a/pages/components/docs/Dropdown.md
+++ b/pages/components/docs/Dropdown.md
@@ -16,4 +16,11 @@
 
 Dropdown components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
+## Component props
+
+| Prop name | Type | Description |
+| :- | :- | :- |
+| scheme | String | Button scheme used to style the component, can be one of `danger`, `outline` or `primary` |
+| title | String | Optional prop to set the text in the Dropdown button
+
 export const meta = {displayName: 'Dropdown'}

From a3ba7f5e1321939b8faae42bfc823e5a6b639232 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Fri, 14 Sep 2018 07:32:36 -0700
Subject: [PATCH 34/51] add FilterList component props

---
 pages/components/docs/FilterList.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/pages/components/docs/FilterList.md b/pages/components/docs/FilterList.md
index 1a00436799d..31cfd83d467 100644
--- a/pages/components/docs/FilterList.md
+++ b/pages/components/docs/FilterList.md
@@ -14,4 +14,10 @@
 
 FilterList components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
+## Component props
+
+| Prop name | Type | Description |
+| :- | :- | :- |
+| small | Boolean | Used to create a smaller version of the standard FilterList|
+
 export const meta = {displayName: 'FilterList'}

From dca747ecd2479ebcd3232c4657207a5faf040f3a Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Fri, 14 Sep 2018 07:34:39 -0700
Subject: [PATCH 35/51] add Flash component prop docs

---
 pages/components/docs/Flash.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/pages/components/docs/Flash.md b/pages/components/docs/Flash.md
index d8a1db3cc4b..a1daa9c2869 100644
--- a/pages/components/docs/Flash.md
+++ b/pages/components/docs/Flash.md
@@ -11,4 +11,11 @@
 
 Flash components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
+## Component props
+
+| Prop name | Type | Description |
+| :- | :- | :- |
+| full | Boolean | Creates a full width Flash component|
+| scheme | String | Can be one of `green`, `yellow`, or `red` - sets the background color, border, and text color of the Flash component
+
 export const meta = {displayName: 'Flash'}

From 64cb4d5bdfcd5d2ecdb271466e0b1322696bf0cd Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Fri, 14 Sep 2018 07:36:15 -0700
Subject: [PATCH 36/51] Flex component props docs

---
 pages/components/docs/Flex.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/pages/components/docs/Flex.md b/pages/components/docs/Flex.md
index 8b70b1a5cc3..bf86d3e0cf8 100644
--- a/pages/components/docs/Flex.md
+++ b/pages/components/docs/Flex.md
@@ -32,5 +32,8 @@ FlexItem components get `FLEX_ITEM`, `COMMON`, and `LAYOUT` system props.
 
 Read our [System Props](/system-props) doc page for a full list of available props.
 
+## Component props
+
+FlexContainer and FlexItem do not get any additional props other than the system props mentioned above.
 
 export const meta = {displayName: 'Flex'}

From 01abd523cbdef6680c5d25a36486777886b6baf7 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Fri, 14 Sep 2018 07:37:02 -0700
Subject: [PATCH 37/51] Heading component props docs

---
 pages/components/docs/Heading.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/pages/components/docs/Heading.md b/pages/components/docs/Heading.md
index 78c2d7051c3..09d32121c12 100644
--- a/pages/components/docs/Heading.md
+++ b/pages/components/docs/Heading.md
@@ -9,4 +9,8 @@
 
 Heading components get `TYPOGRAPHY` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
+## Component props
+
+Heading does not get any additional props other than the system props mentioned above.
+
 export const meta = {displayName: 'Heading'}

From c4b9ae88477d1d8fecdf9c8d790fa28ddaa69764 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Fri, 14 Sep 2018 07:39:11 -0700
Subject: [PATCH 38/51] Label component props docs

---
 pages/components/docs/Label.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/pages/components/docs/Label.md b/pages/components/docs/Label.md
index 8cd3a0b06b2..5a8446960b1 100644
--- a/pages/components/docs/Label.md
+++ b/pages/components/docs/Label.md
@@ -12,4 +12,11 @@
 
 Label components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
+## Component props
+
+| Prop name | Type | Description |
+| :- | :- | :- |
+| outline | Boolean | Creates an outline style label |
+| scheme | String | Can be one of `gray`, `gray-darker`, `orange` or `green` - sets the background color and text color of the Label component
+
 export const meta = {displayName: 'Label'}

From fc605e813af30139a945c418317daac8b3a21ace Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Fri, 14 Sep 2018 07:41:16 -0700
Subject: [PATCH 39/51] add Link component prop docs

---
 pages/components/docs/Link.md | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/pages/components/docs/Link.md b/pages/components/docs/Link.md
index 821c38b5497..34c7d4e9e28 100644
--- a/pages/components/docs/Link.md
+++ b/pages/components/docs/Link.md
@@ -10,4 +10,13 @@
 
 Link components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
+## Component props
+
+| Prop name | Type | Description |
+| :- | :- | :- |
+| href | String | URL to be used for the Link |
+| muted | Boolean | Applies a gray text color to the Link |
+| nounderline | Boolean | Removes underline from the Link |
+| scheme | String | Can be `gray` or `gray-dark`, sets the text color accordingly. |
+
 export const meta = {displayName: 'Link'}

From 9c2ca03d9a7bbefe46226baafce9e883a29d5217 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Fri, 14 Sep 2018 07:42:53 -0700
Subject: [PATCH 40/51] MergeStatus component prop docs

---
 pages/components/docs/MergeStatus.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/pages/components/docs/MergeStatus.md b/pages/components/docs/MergeStatus.md
index 1d2243a9b22..743c123470e 100644
--- a/pages/components/docs/MergeStatus.md
+++ b/pages/components/docs/MergeStatus.md
@@ -13,4 +13,10 @@
 
 MergeStatus components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
+## Component props
+
+| Prop name | Type | Description |
+| :- | :- | :- |
+| state | String | Can be one of `ready`, `invalid`, `merged`, or `pending`. Sets the appropriate background and text color on the component. |
+
 export const meta = {displayName: 'MergeStatus'}

From 8418f11b4cf444201a26720ce6e6d3f08a949c6d Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Fri, 14 Sep 2018 07:49:44 -0700
Subject: [PATCH 41/51] PointerBox component props docs

---
 pages/components/docs/PointerBox.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/pages/components/docs/PointerBox.md b/pages/components/docs/PointerBox.md
index 040fc7c8043..3458332878c 100644
--- a/pages/components/docs/PointerBox.md
+++ b/pages/components/docs/PointerBox.md
@@ -12,4 +12,10 @@
 
 PointerBox components get `LAYOUT` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
+## Component props
+
+| Prop name | Type | Description |
+| :- | :- | :- |
+| caret | String | Sets the location of the caret. The format is `[edge]-[position on edge]`. For example, `right-top` will position the caret on the top of the right edge of the box. Use `top`, `right`, `bottom`, or `left` to position a caret in the center of that edge. |
+
 export const meta = {displayName: 'PointerBox'}

From 006b4ad9e8bd26cd3a605fc6fb1ad7fe70a4bbdb Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Fri, 14 Sep 2018 07:50:52 -0700
Subject: [PATCH 42/51] Position component props docs

---
 pages/components/docs/Position.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/pages/components/docs/Position.md b/pages/components/docs/Position.md
index 0f48c7c0ba3..77c91cbf174 100644
--- a/pages/components/docs/Position.md
+++ b/pages/components/docs/Position.md
@@ -39,4 +39,8 @@
 
 Position components get `POSITION`, `LAYOUT` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
+## Component props
+
+Position does not get any additional props other than the system props mentioned above.
+
 export const meta = {displayName: 'Position'}

From f8e0c16c3ddc2b66a91013e5fb7d3ddc59a5f1c1 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Fri, 14 Sep 2018 08:43:52 -0700
Subject: [PATCH 43/51] StateLabel component docs

---
 pages/components/docs/StateLabel.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/pages/components/docs/StateLabel.md b/pages/components/docs/StateLabel.md
index e87e0803b7c..e277445ee9b 100644
--- a/pages/components/docs/StateLabel.md
+++ b/pages/components/docs/StateLabel.md
@@ -10,4 +10,12 @@
 
 StateLabel components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
+## Component props
+
+| Prop name | Type | Description |
+| :- | :- | :- |
+| icon | Node or Boolean | Provide a component for the Icon or set to `true` to match the icon to the `state` prop |
+| small | Boolean | Used to create a smaller version of the default StateLabel |
+| state | String | Can be one of `open`, `reopened`, `closed`, or `merged`. Used to set background color and Octicon.
+
 export const meta = {displayName: 'StateLabel'}

From e6e9c721b36f2f9979331e8c923470310a731f19 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Fri, 14 Sep 2018 08:51:00 -0700
Subject: [PATCH 44/51] Text component prop docs

---
 pages/components/docs/Text.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/pages/components/docs/Text.md b/pages/components/docs/Text.md
index cdcb6d2b6fd..6db4590ffb6 100644
--- a/pages/components/docs/Text.md
+++ b/pages/components/docs/Text.md
@@ -9,4 +9,8 @@
 
 Text components get `TYPOGRAPHY` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
+## Component props
+
+Text does not get any additional props other than the system props mentioned above.
+
 export const meta = {displayName: 'Text'}

From 794a0852cdb9778668835c283796b6746dd007a3 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Fri, 14 Sep 2018 08:51:09 -0700
Subject: [PATCH 45/51] TextInput component prop docs

---
 pages/components/docs/TextInput.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/pages/components/docs/TextInput.md b/pages/components/docs/TextInput.md
index 917b426e530..9512d186714 100644
--- a/pages/components/docs/TextInput.md
+++ b/pages/components/docs/TextInput.md
@@ -10,4 +10,19 @@
 
 TextInput components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
+## Component props
+
+| Prop name | Type | Description |
+| :- | :- | :- |
+| autocomplete | String | Allows user to set `autocomplete` attribute on input. See [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete) for attribute documentation. |
+| block | Boolean | Adds `display: block` to element |
+| disabled | Boolean | Sets the `disabled` attribute on the element |
+| id | String | Sets the `id` attribute on the element |
+| name | String | Sets the `name` attribute on the element |
+| onChange | Function | Function to be called when content in Input changes |
+| placeholder | String | Sets the placeholder text |
+| required | Boolean | Sets the `required` attribute on the element |
+| size | String | Can be either `small` or `large`. Creates a smaller or larger input than the default.
+| value | String | Current value of the Input. |
+
 export const meta = {displayName: 'TextInput'}

From bf5f18f9bb5dd5733e2fe1272ac13fff14c29b9f Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Fri, 14 Sep 2018 08:55:04 -0700
Subject: [PATCH 46/51] Add tooltip component prop docs

---
 pages/components/docs/Tooltip.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/pages/components/docs/Tooltip.md b/pages/components/docs/Tooltip.md
index 8980ac84b88..d5da4a912e7 100644
--- a/pages/components/docs/Tooltip.md
+++ b/pages/components/docs/Tooltip.md
@@ -12,4 +12,15 @@
 
 Tooltip components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
+## Component props
+
+| Prop name | Type | Description |
+| :- | :- | :- |
+| align | String | Can be either `left` or `right`.|
+| direction | String | Can be one of 'n', `ne`, `e`, `se`, `s`, `sw`, `w`, `nw` | Sets where the tooltip renders in relation to the target. |
+| noDelay | Boolean | When set to `true`, tooltip appears without any delay |
+| text | String | Text used in `aria-label` (for accessibility).
+| wrap | Boolean | Use `true` to allow text within tooltip to wrap.
+
+
 export const meta = {displayName: 'Tooltip'}

From 8b958a902666cfe652d12b591d9b0aac61dddcb5 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Fri, 14 Sep 2018 08:59:58 -0700
Subject: [PATCH 47/51] UnderlineNav component prop docs

---
 pages/components/docs/Box.md          |  2 +-
 pages/components/docs/UnderlineNav.md | 16 ++++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/pages/components/docs/Box.md b/pages/components/docs/Box.md
index 517772487a1..33763a84a33 100644
--- a/pages/components/docs/Box.md
+++ b/pages/components/docs/Box.md
@@ -14,6 +14,6 @@ Box components get `COMMON` and `LAYOUT` system props. Read our [System Props](/
 
 | Prop name | Type | Description |
 | :- | :- | :- |
-| is | String | sets the HTML tag for the component |
+| is | String | Sets the HTML tag for the component |
 
 export const meta = {displayName: 'Box'}
diff --git a/pages/components/docs/UnderlineNav.md b/pages/components/docs/UnderlineNav.md
index e16f983d046..be743bb888d 100644
--- a/pages/components/docs/UnderlineNav.md
+++ b/pages/components/docs/UnderlineNav.md
@@ -26,4 +26,20 @@ This ensures that the NavLink gets ```activeClassName='selected'```
 UnderlineNav and UnderlineNavLink components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 
+## Component props
+
+### UnderlineNav
+| Prop name | Type | Description |
+| :- | :- | :- |
+| actions | Node | Place another element, such as a button, to the opposite side of the navigation items.|
+| align | String | Use `right` to have navigation items aligned right. |
+| full | Boolean | Used to make navigation fill the width of the container. |
+| label | String | Used to set the `aria-label` on the top level `<nav>` element. |
+
+### UnderlineNavLink
+| Prop name | Type | Description |
+| :- | :- | :- |
+| is | String | sets the HTML tag for the component|
+| selected | Boolean | Used to style the link as selected or unselected |
+
 export const meta = {displayName: 'UnderlineNav'}

From 73db4c18f8be8e9251827c02831f48ecb1043670 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Fri, 14 Sep 2018 09:29:30 -0700
Subject: [PATCH 48/51] update snaps

---
 src/__tests__/__snapshots__/CircleBadge.js.snap      |  7 ++++++-
 src/__tests__/__snapshots__/Dropdown.js.snap         | 12 ++++++------
 src/__tests__/__snapshots__/FilterListItem.js.snap   |  4 ++--
 src/__tests__/__snapshots__/Link.js.snap             |  4 ++--
 src/__tests__/__snapshots__/UnderlineNavLink.js.snap |  4 ++--
 src/__tests__/__snapshots__/system-props.js.snap     |  5 +++--
 6 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/__tests__/__snapshots__/CircleBadge.js.snap b/src/__tests__/__snapshots__/CircleBadge.js.snap
index 496acf06647..5d90835819c 100644
--- a/src/__tests__/__snapshots__/CircleBadge.js.snap
+++ b/src/__tests__/__snapshots__/CircleBadge.js.snap
@@ -1,10 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CircleBadge respects "is" prop 1`] = `
+.emotion-0 {
+  width: 96px;
+  height: 96px;
+}
+
 <a
   blacklist={
     Array [
-      "css",
       "color",
       "bg",
       "m",
@@ -21,6 +25,7 @@ exports[`CircleBadge respects "is" prop 1`] = `
       "pl",
       "px",
       "py",
+      "css",
     ]
   }
   className="emotion-0 CircleBadge"
diff --git a/src/__tests__/__snapshots__/Dropdown.js.snap b/src/__tests__/__snapshots__/Dropdown.js.snap
index f2e371838c9..24ed2d85994 100644
--- a/src/__tests__/__snapshots__/Dropdown.js.snap
+++ b/src/__tests__/__snapshots__/Dropdown.js.snap
@@ -31,7 +31,6 @@ exports[`Dropdown matches the snapshots 1`] = `
 <div
   blacklist={
     Array [
-      "css",
       "color",
       "bg",
       "m",
@@ -48,6 +47,7 @@ exports[`Dropdown matches the snapshots 1`] = `
       "pl",
       "px",
       "py",
+      "css",
     ]
   }
   className="emotion-1 BtnGroup"
@@ -55,7 +55,6 @@ exports[`Dropdown matches the snapshots 1`] = `
   <details
     blacklist={
       Array [
-        "css",
         "color",
         "bg",
         "m",
@@ -72,6 +71,7 @@ exports[`Dropdown matches the snapshots 1`] = `
         "pl",
         "px",
         "py",
+        "css",
       ]
     }
     className="details-reset BtnGroup-form emotion-3"
@@ -80,7 +80,6 @@ exports[`Dropdown matches the snapshots 1`] = `
     <summary
       blacklist={
         Array [
-          "css",
           "color",
           "bg",
           "m",
@@ -97,6 +96,7 @@ exports[`Dropdown matches the snapshots 1`] = `
           "pl",
           "px",
           "py",
+          "css",
         ]
       }
       className="emotion-1 btn BtnGroup-item"
@@ -193,7 +193,6 @@ exports[`Dropdown matches the snapshots 2`] = `
 <div
   blacklist={
     Array [
-      "css",
       "color",
       "bg",
       "m",
@@ -210,6 +209,7 @@ exports[`Dropdown matches the snapshots 2`] = `
       "pl",
       "px",
       "py",
+      "css",
     ]
   }
   className="emotion-1 BtnGroup"
@@ -217,7 +217,6 @@ exports[`Dropdown matches the snapshots 2`] = `
   <details
     blacklist={
       Array [
-        "css",
         "color",
         "bg",
         "m",
@@ -234,6 +233,7 @@ exports[`Dropdown matches the snapshots 2`] = `
         "pl",
         "px",
         "py",
+        "css",
       ]
     }
     className="details-reset BtnGroup-form emotion-3"
@@ -242,7 +242,6 @@ exports[`Dropdown matches the snapshots 2`] = `
     <summary
       blacklist={
         Array [
-          "css",
           "color",
           "bg",
           "m",
@@ -259,6 +258,7 @@ exports[`Dropdown matches the snapshots 2`] = `
           "pl",
           "px",
           "py",
+          "css",
         ]
       }
       className="emotion-1 btn BtnGroup-item"
diff --git a/src/__tests__/__snapshots__/FilterListItem.js.snap b/src/__tests__/__snapshots__/FilterListItem.js.snap
index 5b72b9af6ed..86eb902e0ea 100644
--- a/src/__tests__/__snapshots__/FilterListItem.js.snap
+++ b/src/__tests__/__snapshots__/FilterListItem.js.snap
@@ -6,7 +6,6 @@ exports[`FilterListItem renders the given "is" prop 1`] = `
 <b
   blacklist={
     Array [
-      "css",
       "color",
       "bg",
       "m",
@@ -23,6 +22,7 @@ exports[`FilterListItem renders the given "is" prop 1`] = `
       "pl",
       "px",
       "py",
+      "css",
     ]
   }
   className="filter-item emotion-0"
@@ -33,7 +33,6 @@ exports[`FilterListItem respects the "selected" prop 1`] = `
 <a
   blacklist={
     Array [
-      "css",
       "color",
       "bg",
       "m",
@@ -50,6 +49,7 @@ exports[`FilterListItem respects the "selected" prop 1`] = `
       "pl",
       "px",
       "py",
+      "css",
     ]
   }
   className="filter-item selected emotion-0"
diff --git a/src/__tests__/__snapshots__/Link.js.snap b/src/__tests__/__snapshots__/Link.js.snap
index 41bc1a802b8..554fc71c16d 100644
--- a/src/__tests__/__snapshots__/Link.js.snap
+++ b/src/__tests__/__snapshots__/Link.js.snap
@@ -4,7 +4,6 @@ exports[`Link passes href down to link element 1`] = `
 <a
   blacklist={
     Array [
-      "css",
       "color",
       "bg",
       "m",
@@ -21,6 +20,7 @@ exports[`Link passes href down to link element 1`] = `
       "pl",
       "px",
       "py",
+      "css",
     ]
   }
   className="emotion-0 text-blue"
@@ -32,7 +32,6 @@ exports[`Link renders without any props 1`] = `
 <a
   blacklist={
     Array [
-      "css",
       "color",
       "bg",
       "m",
@@ -49,6 +48,7 @@ exports[`Link renders without any props 1`] = `
       "pl",
       "px",
       "py",
+      "css",
     ]
   }
   className="emotion-0 text-blue"
diff --git a/src/__tests__/__snapshots__/UnderlineNavLink.js.snap b/src/__tests__/__snapshots__/UnderlineNavLink.js.snap
index f36aaa2218a..091df232bdd 100644
--- a/src/__tests__/__snapshots__/UnderlineNavLink.js.snap
+++ b/src/__tests__/__snapshots__/UnderlineNavLink.js.snap
@@ -4,7 +4,6 @@ exports[`UnderlineNavLink renders the given "is" prop 1`] = `
 <b
   blacklist={
     Array [
-      "css",
       "color",
       "bg",
       "m",
@@ -21,6 +20,7 @@ exports[`UnderlineNavLink renders the given "is" prop 1`] = `
       "pl",
       "px",
       "py",
+      "css",
     ]
   }
   className="UnderlineNav-item no-underline emotion-0"
@@ -31,7 +31,6 @@ exports[`UnderlineNavLink respects the "selected" prop 1`] = `
 <a
   blacklist={
     Array [
-      "css",
       "color",
       "bg",
       "m",
@@ -48,6 +47,7 @@ exports[`UnderlineNavLink respects the "selected" prop 1`] = `
       "pl",
       "px",
       "py",
+      "css",
     ]
   }
   className="UnderlineNav-item no-underline selected emotion-0"
diff --git a/src/__tests__/__snapshots__/system-props.js.snap b/src/__tests__/__snapshots__/system-props.js.snap
index 0ac274bff03..c5a6213fc4f 100644
--- a/src/__tests__/__snapshots__/system-props.js.snap
+++ b/src/__tests__/__snapshots__/system-props.js.snap
@@ -9,8 +9,8 @@ exports[`system props withSystemProps() applies multiple theme values 1`] = `
 <b
   blacklist={
     Array [
-      "css",
       "fontFamily",
+      "font",
       "m",
       "mt",
       "mr",
@@ -25,6 +25,7 @@ exports[`system props withSystemProps() applies multiple theme values 1`] = `
       "pl",
       "px",
       "py",
+      "css",
     ]
   }
   className="emotion-0"
@@ -41,7 +42,6 @@ exports[`system props withSystemProps() applies one theme value 1`] = `
 <b
   blacklist={
     Array [
-      "css",
       "m",
       "mt",
       "mr",
@@ -56,6 +56,7 @@ exports[`system props withSystemProps() applies one theme value 1`] = `
       "pl",
       "px",
       "py",
+      "css",
     ]
   }
   className="emotion-0"

From b16b05d13d7c968d3b2ea78351ee7ee018cb5d06 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Fri, 14 Sep 2018 09:38:26 -0700
Subject: [PATCH 49/51] Revert "update snaps"

This reverts commit 73db4c18f8be8e9251827c02831f48ecb1043670.
---
 src/__tests__/__snapshots__/CircleBadge.js.snap      |  7 +------
 src/__tests__/__snapshots__/Dropdown.js.snap         | 12 ++++++------
 src/__tests__/__snapshots__/FilterListItem.js.snap   |  4 ++--
 src/__tests__/__snapshots__/Link.js.snap             |  4 ++--
 src/__tests__/__snapshots__/UnderlineNavLink.js.snap |  4 ++--
 src/__tests__/__snapshots__/system-props.js.snap     |  5 ++---
 6 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/src/__tests__/__snapshots__/CircleBadge.js.snap b/src/__tests__/__snapshots__/CircleBadge.js.snap
index 5d90835819c..496acf06647 100644
--- a/src/__tests__/__snapshots__/CircleBadge.js.snap
+++ b/src/__tests__/__snapshots__/CircleBadge.js.snap
@@ -1,14 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CircleBadge respects "is" prop 1`] = `
-.emotion-0 {
-  width: 96px;
-  height: 96px;
-}
-
 <a
   blacklist={
     Array [
+      "css",
       "color",
       "bg",
       "m",
@@ -25,7 +21,6 @@ exports[`CircleBadge respects "is" prop 1`] = `
       "pl",
       "px",
       "py",
-      "css",
     ]
   }
   className="emotion-0 CircleBadge"
diff --git a/src/__tests__/__snapshots__/Dropdown.js.snap b/src/__tests__/__snapshots__/Dropdown.js.snap
index 24ed2d85994..f2e371838c9 100644
--- a/src/__tests__/__snapshots__/Dropdown.js.snap
+++ b/src/__tests__/__snapshots__/Dropdown.js.snap
@@ -31,6 +31,7 @@ exports[`Dropdown matches the snapshots 1`] = `
 <div
   blacklist={
     Array [
+      "css",
       "color",
       "bg",
       "m",
@@ -47,7 +48,6 @@ exports[`Dropdown matches the snapshots 1`] = `
       "pl",
       "px",
       "py",
-      "css",
     ]
   }
   className="emotion-1 BtnGroup"
@@ -55,6 +55,7 @@ exports[`Dropdown matches the snapshots 1`] = `
   <details
     blacklist={
       Array [
+        "css",
         "color",
         "bg",
         "m",
@@ -71,7 +72,6 @@ exports[`Dropdown matches the snapshots 1`] = `
         "pl",
         "px",
         "py",
-        "css",
       ]
     }
     className="details-reset BtnGroup-form emotion-3"
@@ -80,6 +80,7 @@ exports[`Dropdown matches the snapshots 1`] = `
     <summary
       blacklist={
         Array [
+          "css",
           "color",
           "bg",
           "m",
@@ -96,7 +97,6 @@ exports[`Dropdown matches the snapshots 1`] = `
           "pl",
           "px",
           "py",
-          "css",
         ]
       }
       className="emotion-1 btn BtnGroup-item"
@@ -193,6 +193,7 @@ exports[`Dropdown matches the snapshots 2`] = `
 <div
   blacklist={
     Array [
+      "css",
       "color",
       "bg",
       "m",
@@ -209,7 +210,6 @@ exports[`Dropdown matches the snapshots 2`] = `
       "pl",
       "px",
       "py",
-      "css",
     ]
   }
   className="emotion-1 BtnGroup"
@@ -217,6 +217,7 @@ exports[`Dropdown matches the snapshots 2`] = `
   <details
     blacklist={
       Array [
+        "css",
         "color",
         "bg",
         "m",
@@ -233,7 +234,6 @@ exports[`Dropdown matches the snapshots 2`] = `
         "pl",
         "px",
         "py",
-        "css",
       ]
     }
     className="details-reset BtnGroup-form emotion-3"
@@ -242,6 +242,7 @@ exports[`Dropdown matches the snapshots 2`] = `
     <summary
       blacklist={
         Array [
+          "css",
           "color",
           "bg",
           "m",
@@ -258,7 +259,6 @@ exports[`Dropdown matches the snapshots 2`] = `
           "pl",
           "px",
           "py",
-          "css",
         ]
       }
       className="emotion-1 btn BtnGroup-item"
diff --git a/src/__tests__/__snapshots__/FilterListItem.js.snap b/src/__tests__/__snapshots__/FilterListItem.js.snap
index 86eb902e0ea..5b72b9af6ed 100644
--- a/src/__tests__/__snapshots__/FilterListItem.js.snap
+++ b/src/__tests__/__snapshots__/FilterListItem.js.snap
@@ -6,6 +6,7 @@ exports[`FilterListItem renders the given "is" prop 1`] = `
 <b
   blacklist={
     Array [
+      "css",
       "color",
       "bg",
       "m",
@@ -22,7 +23,6 @@ exports[`FilterListItem renders the given "is" prop 1`] = `
       "pl",
       "px",
       "py",
-      "css",
     ]
   }
   className="filter-item emotion-0"
@@ -33,6 +33,7 @@ exports[`FilterListItem respects the "selected" prop 1`] = `
 <a
   blacklist={
     Array [
+      "css",
       "color",
       "bg",
       "m",
@@ -49,7 +50,6 @@ exports[`FilterListItem respects the "selected" prop 1`] = `
       "pl",
       "px",
       "py",
-      "css",
     ]
   }
   className="filter-item selected emotion-0"
diff --git a/src/__tests__/__snapshots__/Link.js.snap b/src/__tests__/__snapshots__/Link.js.snap
index 554fc71c16d..41bc1a802b8 100644
--- a/src/__tests__/__snapshots__/Link.js.snap
+++ b/src/__tests__/__snapshots__/Link.js.snap
@@ -4,6 +4,7 @@ exports[`Link passes href down to link element 1`] = `
 <a
   blacklist={
     Array [
+      "css",
       "color",
       "bg",
       "m",
@@ -20,7 +21,6 @@ exports[`Link passes href down to link element 1`] = `
       "pl",
       "px",
       "py",
-      "css",
     ]
   }
   className="emotion-0 text-blue"
@@ -32,6 +32,7 @@ exports[`Link renders without any props 1`] = `
 <a
   blacklist={
     Array [
+      "css",
       "color",
       "bg",
       "m",
@@ -48,7 +49,6 @@ exports[`Link renders without any props 1`] = `
       "pl",
       "px",
       "py",
-      "css",
     ]
   }
   className="emotion-0 text-blue"
diff --git a/src/__tests__/__snapshots__/UnderlineNavLink.js.snap b/src/__tests__/__snapshots__/UnderlineNavLink.js.snap
index 091df232bdd..f36aaa2218a 100644
--- a/src/__tests__/__snapshots__/UnderlineNavLink.js.snap
+++ b/src/__tests__/__snapshots__/UnderlineNavLink.js.snap
@@ -4,6 +4,7 @@ exports[`UnderlineNavLink renders the given "is" prop 1`] = `
 <b
   blacklist={
     Array [
+      "css",
       "color",
       "bg",
       "m",
@@ -20,7 +21,6 @@ exports[`UnderlineNavLink renders the given "is" prop 1`] = `
       "pl",
       "px",
       "py",
-      "css",
     ]
   }
   className="UnderlineNav-item no-underline emotion-0"
@@ -31,6 +31,7 @@ exports[`UnderlineNavLink respects the "selected" prop 1`] = `
 <a
   blacklist={
     Array [
+      "css",
       "color",
       "bg",
       "m",
@@ -47,7 +48,6 @@ exports[`UnderlineNavLink respects the "selected" prop 1`] = `
       "pl",
       "px",
       "py",
-      "css",
     ]
   }
   className="UnderlineNav-item no-underline selected emotion-0"
diff --git a/src/__tests__/__snapshots__/system-props.js.snap b/src/__tests__/__snapshots__/system-props.js.snap
index c5a6213fc4f..0ac274bff03 100644
--- a/src/__tests__/__snapshots__/system-props.js.snap
+++ b/src/__tests__/__snapshots__/system-props.js.snap
@@ -9,8 +9,8 @@ exports[`system props withSystemProps() applies multiple theme values 1`] = `
 <b
   blacklist={
     Array [
+      "css",
       "fontFamily",
-      "font",
       "m",
       "mt",
       "mr",
@@ -25,7 +25,6 @@ exports[`system props withSystemProps() applies multiple theme values 1`] = `
       "pl",
       "px",
       "py",
-      "css",
     ]
   }
   className="emotion-0"
@@ -42,6 +41,7 @@ exports[`system props withSystemProps() applies one theme value 1`] = `
 <b
   blacklist={
     Array [
+      "css",
       "m",
       "mt",
       "mr",
@@ -56,7 +56,6 @@ exports[`system props withSystemProps() applies one theme value 1`] = `
       "pl",
       "px",
       "py",
-      "css",
     ]
   }
   className="emotion-0"

From 531fda8ed320c229580e4e829c6985fc9d336fa7 Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Fri, 14 Sep 2018 09:38:55 -0700
Subject: [PATCH 50/51] update CircleBadge snap

---
 src/__tests__/__snapshots__/CircleBadge.js.snap | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/__tests__/__snapshots__/CircleBadge.js.snap b/src/__tests__/__snapshots__/CircleBadge.js.snap
index 496acf06647..5d90835819c 100644
--- a/src/__tests__/__snapshots__/CircleBadge.js.snap
+++ b/src/__tests__/__snapshots__/CircleBadge.js.snap
@@ -1,10 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CircleBadge respects "is" prop 1`] = `
+.emotion-0 {
+  width: 96px;
+  height: 96px;
+}
+
 <a
   blacklist={
     Array [
-      "css",
       "color",
       "bg",
       "m",
@@ -21,6 +25,7 @@ exports[`CircleBadge respects "is" prop 1`] = `
       "pl",
       "px",
       "py",
+      "css",
     ]
   }
   className="emotion-0 CircleBadge"

From 21e5e3334ce6e656690c5e525f44e809f2697d2c Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Fri, 14 Sep 2018 09:45:58 -0700
Subject: [PATCH 51/51] update snap

---
 src/__tests__/__snapshots__/CircleBadge.js.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/__tests__/__snapshots__/CircleBadge.js.snap b/src/__tests__/__snapshots__/CircleBadge.js.snap
index 5d90835819c..e54d2baaae1 100644
--- a/src/__tests__/__snapshots__/CircleBadge.js.snap
+++ b/src/__tests__/__snapshots__/CircleBadge.js.snap
@@ -9,6 +9,7 @@ exports[`CircleBadge respects "is" prop 1`] = `
 <a
   blacklist={
     Array [
+      "css",
       "color",
       "bg",
       "m",
@@ -25,7 +26,6 @@ exports[`CircleBadge respects "is" prop 1`] = `
       "pl",
       "px",
       "py",
-      "css",
     ]
   }
   className="emotion-0 CircleBadge"