Merge pull request #209 from primer/release-2.0.0-beta

2.0.0-beta release tracking

.babelrc

@@ -1,10 +1,10 @@
 {
   "presets": [
     "env",
-    "stage-0",
     "react"
   ],
   "plugins": [
-    "add-react-displayname"
+    "add-react-displayname",
+    "transform-object-rest-spread"
   ]
 }

README.md

@@ -24,7 +24,7 @@ All of our components are exported by name from `primer-react`, so you can impor
 
 ```js
 import {
-  Block,
+  Box,
   Button,
   Heading,
   Text
@@ -60,54 +60,8 @@ To run `primer-react` locally when adding or updating components:
 
 Remember to build the documentation before publishing with `npm run build:docs`
 
-### Code Style
+> 👉 See [the contributing docs](contributing.md) for more info on code style, testing, and coverage.
 
-We use the [React configuration](https://github.com/github/eslint-plugin-github/blob/master/lib/configs/react.js)
-from [GitHub's eslint plugin](https://github.com/github/eslint-plugin-github)
-to lint our JavaScript. To check your work before pushing, run:
-
-```
-npm run lint
-```
-
-Or, you can use [npx] to run eslint on one or more specific files:
-
-
-```sh
-# lint the component and the tests in src/__tests__
-npx eslint src/**/MyComponent.js
-```
-
-**Protip:** The [eslint `--fix` flag](https://eslint.org/docs/user-guide/command-line-interface#--fix)
-can automatically fix most linting errors, such as those involving whitespace
-or incorrect ordering of object keys and imports. You can fix those issues
-across the entire project with:
-
-```sh
-npm run lint -- --fix
-```
-
-**Protip:** `npm run lint -- --quiet` (or `npx eslint --quiet ...`) will
-suppress warnings so that you can focus on fixing errors.
-
-### Testing
-
-We test our components with [Jest](https://facebook.github.io/jest/) and
-[react-test-renderer](https://reactjs.org/docs/test-renderer.html). You can run
-the tests locally with `npm test` (or `npm t`). To run the tests as you work,
-run Jest in watch mode with:
-
-```
-npm t -- --watch
-```
-
-See [`src/__tests__/example.js`](src/__tests__/example.js) for an
-example of how we're testing our components.
-
-#### Code coverage
-
-A code coverage report is included in the `npm test` output, and
-test coverage data is generated in the `coverage/` directory.
 
 ## Principles
 
@@ -120,5 +74,4 @@ test coverage data is generated in the `coverage/` directory.
 
 
 [emotion]: https://emotion.sh/
-[npx]: https://www.npmjs.com/package/npx
 [Primer CSS]: https://github.com/primer/primer

contributing.md

@@ -1,13 +1,60 @@
 # Contribution guidelines
 
+1. [Code style](#code-style)
+2. [Testing](#testing)
+    * [Code coverage](#code-coverage)
+3. [Tools we use](#tools-we-use)
+4. [Component patterns](#component-patterns)
+    * [Components with only system props](#components-with-only-system-props)
+    * [Primer CSS components](#primer-css-components)
+5. [Glossary](#glossary)
+
+## Code Style
+
+We use the [React configuration](https://github.com/github/eslint-plugin-github/blob/master/lib/configs/react.js) from [GitHub's eslint plugin](https://github.com/github/eslint-plugin-github) to lint our JavaScript. To check your work before pushing, run:
+
+```
+npm run lint
+```
+
+Or, you can use [npx] to run eslint on one or more specific files:
+
+
+```sh
+# lint the component and the tests in src/__tests__
+npx eslint src/**/MyComponent.js
+```
+
+**Protip:** The [eslint `--fix` flag](https://eslint.org/docs/user-guide/command-line-interface#--fix) can automatically fix most linting errors, such as those involving whitespace or incorrect ordering of object keys and imports. You can fix those issues across the entire project with:
+
+```sh
+npm run lint -- --fix
+```
+
+**Protip:** `npm run lint -- --quiet` (or `npx eslint --quiet ...`) will suppress warnings so that you can focus on fixing errors.
+
+## Testing
+
+We test our components with [Jest](https://facebook.github.io/jest/) and [react-test-renderer](https://reactjs.org/docs/test-renderer.html). You can run the tests locally with `npm test` (or `npm t`). To run the tests as you work, run Jest in watch mode with:
+
+```
+npm t -- --watch
+```
+
+See [`src/__tests__/example.js`](src/__tests__/example.js) for examples of ways that we test our components.
+
+### Code coverage
+
+A code coverage report is included in the `npm test` output, and test coverage data is generated in the `coverage/` directory.
+
 ## Tools we use
 
-### Components
 1. We use [emotion] to style our components, and [emotion-theming] as the theme provider.
-1. We use style functions from [styled-system] whenever possible, and styled-systems' `style()` function to create new ones.
-1. We use [system-components] to reduce the amount of boilerplate needed to implement styled-system functions.
+2. We use style functions from [styled-system] whenever possible, and styled-systems' `style()` function to create new ones.
+3. We use [system-components] to reduce the amount of boilerplate needed to implement styled-system functions.
 
 ## Component patterns
+
 With a couple of exceptions, all components should be created by the `withSystemProps()` function from `src/system-props.js`. This function takes a "component-ish" value as its first argument, and an array of [system props](#system-props) as the second:
 
 ```jsx
@@ -41,6 +88,7 @@ Categories of system props are exported from `src/system-props`:
 * `FLEX_ITEM` includes `COMMON` and flexbox props for items in a flex container
 
 ### Components with only system props
+
 Components with only system props should be created by passing the default tag to `withSystemProps()`:
 
 ```jsx
@@ -148,3 +196,4 @@ SpaceDiv.propTypes = {
 [styled-system]: https://jxnblk.com/styled-system/getting-started
 [system-components]: https://jxnblk.com/styled-system/system-components
 [table]: https://jxnblk.com/styled-system/table
+[npx]: https://www.npmjs.com/package/npx

docs/demos/index.html

@@ -9,7 +9,7 @@
       margin: 0;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
       line-height: undefined;
-    }</style><div class="css-qurhtp"><nav class="css-0 UnderlineNav"><div class="UnderlineNav-body"><a class="UnderlineNav-item no-underline css-gajhq5" px="3" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py" href="/primer-react/components">Components</a><a class="UnderlineNav-item no-underline css-gajhq5 selected" aria-current="page" px="3" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py" href="/primer-react/demos">Demos</a><a class="UnderlineNav-item no-underline css-gajhq5" px="3" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py" href="/primer-react/sandbox">Sandbox</a></div><div class="UnderlineNav-actions"><span class="css-3c0b3d"><svg aria-hidden="true" class="mr-2" height="16" role="img" viewBox="0 0 16 16" width="16" style="display:inline-block;fill:currentColor;user-select:none;vertical-align:text-bottom"><path fill-rule="evenodd" d="M1 4.732v7.47c0 .45.3.84.75.97l6.5 1.73c.16.05.34.05.5 0l6.5-1.73c.45-.13.75-.52.75-.97v-7.47c0-.45-.3-.84-.75-.97l-6.5-1.74a1.4 1.4 0 0 0-.5 0l-6.5 1.74c-.45.13-.75.52-.75.97zm7 9.09l-6-1.59v-6.77l6 1.61v6.75zm-6-9.36l2.5-.67 6.5 1.73-2.5.67L2 4.463zm13 7.77l-6 1.59v-6.75l2-.55v2.44l2-.53v-2.44l2-.53v6.77zm-2-7.24l-6.5-1.73 2-.53 6.5 1.73-2 .53z"></path></svg><a class="css-0 text-blue" href="https://github.com/primer/primer-react/releases/v1.0.0-beta" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py">[email protected]</a></span></div></nav><div class="css-19midj6"><div class="nanotx9z16"><div class="nanolgtq4w"><div class="css-1ay9vb9"><nav class="menu"><a class="menu-heading no-underline link-gray-dark active" aria-current="page" href="/demos/">Demo Library</a><a class="menu-item no-underline link-gray-dark" href="/demos/MergeBox">MergeBox</a><a class="menu-item no-underline link-gray-dark" href="/demos/MergeButton">MergeButton</a></nav></div></div><style>.nanolgtq4w{width:192px;flex:none;height:100vh;overflow-y:auto;-webkit-overflow-scrolling:touch;border-right:1px solid #f6f6f6}</style><div class="nano1pfbsnd"><div width="256" height="192" class="nano1moj4mh"><a class="nano1d78h17" href="/demos/MergeBox"><div p="2" class="nano15alqsq"><div class="css-19kzrtu"><div class="react-live"><div class="nano13x0vfn"><div class="react-live-preview"><div><div class="d-flex flex-items-start"><span class="css-0 State" style="background-color:#dbab09"><span class="d-flex m-1"><svg aria-hidden="true" class="octicon" height="32" role="img" viewBox="0 0 12 16" width="24" style="display:inline-block;fill:currentColor;user-select:none;vertical-align:text-bottom"><path fill-rule="evenodd" d="M10 7.01c-.73 0-1.38.41-1.73 1.02v-.02C7.22 7.99 6 7.65 5.14 6.99c-.75-.58-1.5-1.61-1.89-2.44A1.993 1.993 0 0 0 2 1C.89 1 0 1.9 0 3.01a2 2 0 0 0 1 1.72v6.56c-.59.35-1 .99-1 1.72 0 1.11.89 2 2 2a1.993 1.993 0 0 0 1-3.72V7.68c.67.7 1.44 1.27 2.3 1.69.86.42 2.03.63 2.97.64v-.02c.36.61 1 1.02 1.73 1.02 1.11 0 2-.89 2-2 0-1.11-.89-2-2-2zm-6.8 6c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.21c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm8 6c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg></span></span><div class="css-122lflx"><div class="p-2 d-flex border-bottom"><div class="css-164r41r"><div class="css-1i94lbw"><svg aria-hidden="true" class="octicon" height="32" role="img" viewBox="0 0 12 16" width="24" style="display:inline-block;fill:currentColor;user-select:none;vertical-align:text-bottom"><path fill-rule="evenodd" d="M12 5.5l-8 8-4-4L1.5 8 4 10.5 10.5 4 12 5.5z"></path></svg></div></div><div class="css-1i1z72r"><p class="css-1t0t53h">This branch has no conflicts with the base branch</p><p class="css-11uccam">Merging can be performed automatically</p></div></div><div style="border-bottom-left-radius:3px;border-bottom-right-radius:3px" class="css-16gqalq"><div class="BtnGroup"><button style="border-right:0" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py" type="button" class="css-0 btn BtnGroup-item">Merge Pull Request</button><details blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py" class="details-reset details-reset d-flex float-right css-0"><summary style="border-top-left-radius:0;border-bottom-left-radius:0" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py" type="button" class="css-0 btn"><div class="d-inline-block v-align-middle" style="content:;border:4px solid;border-right-color:transparent;border-left-color:transparent;border-bottom-color:transparent;width:0;height:0"></div></summary><div position="absolute" style="z-index:99999" class="css-14z1vk2"><div class="css-4kp0i1"><ul class="list-style-none p-0 m-0"><li class="border-bottom py-2 pl-4 pr-2"><p class="css-1qghdj1">Create a merge commit</p><p class="css-vnp7sw">All commits from this branch will be added to the base branch via a merge commit.</p></li><li class="border-bottom py-2 pl-4 pr-2"><p class="css-1qghdj1">Squash and merge</p><p class="css-vnp7sw">The<!-- --> 21 commits<!-- --> from this branch will be combined into one commit in the base branch.</p></li><li class="py-2 pl-4 pr-2"><p class="css-1qghdj1">Rebase and merge</p><p class="css-vnp7sw">The<!-- --> 21 commits<!-- --> from this branch will be rebased and added to the base branch</p></li></ul><svg width="16" height="16" style="pointer-events:none;position:absolute;bottom:100%;left:8px"><g transform="translate(8,16) rotate(180)"><path d="M-8,0L0,8L8,0L-8,0Z" fill="#fff"></path><path d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" stroke-width="1"></path></g></svg></div></div></details></div><span class="css-1isemmb">You can also </span><a class="css-0 text-blue no-underline" href="x-github-client://openRepo/https://github.com/primer/primer-react?branch=master" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py">open this in Github Desktop</a><span class="css-0"> or view </span><button blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py" type="button" class="css-0 btn-link">command line instructions.</button></div><svg width="16" height="16" style="pointer-events:none;position:absolute;right:100%;top:8px"><g transform="translate(16,8) rotate(90)"><path d="M-8,0L0,8L8,0L-8,0Z" fill="#fff"></path><path d="M-8,0L0,8L8,0" fill="none" stroke="#ffd33d" stroke-width="1"></path></g></svg></div></div></div></div><div mt="2" class="nano1c0guhj"><pre class="prism-code nano11r6mrt" spellcheck="false" contenteditable="true"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MergeBox</span>
+    }</style><div class="css-qurhtp"><nav class="css-0 UnderlineNav"><div class="UnderlineNav-body"><a class="UnderlineNav-item no-underline css-gajhq5" px="3" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py" href="/primer-react/components">Components</a><a class="UnderlineNav-item no-underline css-gajhq5 selected" aria-current="page" px="3" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py" href="/primer-react/demos">Demos</a><a class="UnderlineNav-item no-underline css-gajhq5" px="3" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py" href="/primer-react/sandbox">Sandbox</a></div><div class="UnderlineNav-actions"><span class="css-3c0b3d"><svg aria-hidden="true" class="mr-2" height="16" role="img" viewBox="0 0 16 16" width="16" style="display:inline-block;fill:currentColor;user-select:none;vertical-align:text-bottom"><path fill-rule="evenodd" d="M1 4.732v7.47c0 .45.3.84.75.97l6.5 1.73c.16.05.34.05.5 0l6.5-1.73c.45-.13.75-.52.75-.97v-7.47c0-.45-.3-.84-.75-.97l-6.5-1.74a1.4 1.4 0 0 0-.5 0l-6.5 1.74c-.45.13-.75.52-.75.97zm7 9.09l-6-1.59v-6.77l6 1.61v6.75zm-6-9.36l2.5-.67 6.5 1.73-2.5.67L2 4.463zm13 7.77l-6 1.59v-6.75l2-.55v2.44l2-.53v-2.44l2-.53v6.77zm-2-7.24l-6.5-1.73 2-.53 6.5 1.73-2 .53z"></path></svg><a class="css-0 text-blue" href="https://github.com/primer/primer-react/releases/v2.0.0-beta" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py">[email protected]</a></span></div></nav><div class="css-19midj6"><div class="nanotx9z16"><div class="nanolgtq4w"><div class="css-1ay9vb9"><nav class="menu"><a class="menu-heading no-underline link-gray-dark active" aria-current="page" href="/demos/">Demo Library</a><a class="menu-item no-underline link-gray-dark" href="/demos/MergeBox">MergeBox</a><a class="menu-item no-underline link-gray-dark" href="/demos/MergeButton">MergeButton</a></nav></div></div><style>.nanolgtq4w{width:192px;flex:none;height:100vh;overflow-y:auto;-webkit-overflow-scrolling:touch;border-right:1px solid #f6f6f6}</style><div class="nano1pfbsnd"><div width="256" height="192" class="nano1moj4mh"><a class="nano1d78h17" href="/demos/MergeBox"><div p="2" class="nano15alqsq"><div class="css-19kzrtu"><div class="react-live"><div class="nano13x0vfn"><div class="react-live-preview"><div><div class="d-flex flex-items-start"><span class="css-0 State" style="background-color:#dbab09"><span class="d-flex m-1"><svg aria-hidden="true" class="octicon" height="32" role="img" viewBox="0 0 12 16" width="24" style="display:inline-block;fill:currentColor;user-select:none;vertical-align:text-bottom"><path fill-rule="evenodd" d="M10 7.01c-.73 0-1.38.41-1.73 1.02v-.02C7.22 7.99 6 7.65 5.14 6.99c-.75-.58-1.5-1.61-1.89-2.44A1.993 1.993 0 0 0 2 1C.89 1 0 1.9 0 3.01a2 2 0 0 0 1 1.72v6.56c-.59.35-1 .99-1 1.72 0 1.11.89 2 2 2a1.993 1.993 0 0 0 1-3.72V7.68c.67.7 1.44 1.27 2.3 1.69.86.42 2.03.63 2.97.64v-.02c.36.61 1 1.02 1.73 1.02 1.11 0 2-.89 2-2 0-1.11-.89-2-2-2zm-6.8 6c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.21c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm8 6c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg></span></span><div class="css-122lflx"><div class="p-2 d-flex border-bottom"><div class="css-164r41r"><div class="css-1i94lbw"><svg aria-hidden="true" class="octicon" height="32" role="img" viewBox="0 0 12 16" width="24" style="display:inline-block;fill:currentColor;user-select:none;vertical-align:text-bottom"><path fill-rule="evenodd" d="M12 5.5l-8 8-4-4L1.5 8 4 10.5 10.5 4 12 5.5z"></path></svg></div></div><div class="css-1i1z72r"><p class="css-1t0t53h">This branch has no conflicts with the base branch</p><p class="css-11uccam">Merging can be performed automatically</p></div></div><div style="border-bottom-left-radius:3px;border-bottom-right-radius:3px" class="css-16gqalq"><div class="BtnGroup"><button style="border-right:0" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py" type="button" class="css-0 btn BtnGroup-item">Merge Pull Request</button><details blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py" class="details-reset details-reset d-flex float-right css-0"><summary style="border-top-left-radius:0;border-bottom-left-radius:0" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py" type="button" class="css-0 btn"><div class="d-inline-block v-align-middle" style="content:;border:4px solid;border-right-color:transparent;border-left-color:transparent;border-bottom-color:transparent;width:0;height:0"></div></summary><div position="absolute" style="z-index:99999" class="css-14z1vk2"><div class="css-4kp0i1"><ul class="list-style-none p-0 m-0"><li class="border-bottom py-2 pl-4 pr-2"><p class="css-1qghdj1">Create a merge commit</p><p class="css-vnp7sw">All commits from this branch will be added to the base branch via a merge commit.</p></li><li class="border-bottom py-2 pl-4 pr-2"><p class="css-1qghdj1">Squash and merge</p><p class="css-vnp7sw">The<!-- --> 21 commits<!-- --> from this branch will be combined into one commit in the base branch.</p></li><li class="py-2 pl-4 pr-2"><p class="css-1qghdj1">Rebase and merge</p><p class="css-vnp7sw">The<!-- --> 21 commits<!-- --> from this branch will be rebased and added to the base branch</p></li></ul><svg width="16" height="16" style="pointer-events:none;position:absolute;bottom:100%;left:8px"><g transform="translate(8,16) rotate(180)"><path d="M-8,0L0,8L8,0L-8,0Z" fill="#fff"></path><path d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" stroke-width="1"></path></g></svg></div></div></details></div><span class="css-1isemmb">You can also </span><a class="css-0 text-blue no-underline" href="x-github-client://openRepo/https://github.com/primer/primer-react?branch=master" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py">open this in Github Desktop</a><span class="css-0"> or view </span><button blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py" type="button" class="css-0 btn-link">command line instructions.</button></div><svg width="16" height="16" style="pointer-events:none;position:absolute;right:100%;top:8px"><g transform="translate(16,8) rotate(90)"><path d="M-8,0L0,8L8,0L-8,0Z" fill="#fff"></path><path d="M-8,0L0,8L8,0" fill="none" stroke="#ffd33d" stroke-width="1"></path></g></svg></div></div></div></div><div mt="2" class="nano1c0guhj"><pre class="prism-code nano11r6mrt" spellcheck="false" contenteditable="true"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MergeBox</span>
   <span class="token attr-name">state</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>pending<span class="token punctuation">'</span></span>
   <span class="token attr-name">numCommits</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">21</span><span class="token punctuation">}</span></span>
   <span class="token attr-name">repoUrl</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>https://github.com/primer/primer-react<span class="token punctuation">'</span></span>