@primer/components 32.1.1-rc.92743105 → 33.0.0-rc.9cc2a259

package/.devcontainer/devcontainer.json

@@ -1,6 +1,6 @@
 {
   "name": "Primer Components",
-  "image": "mcr.microsoft.com/vscode/devcontainers/typescript-node:14",
+  "image": "mcr.microsoft.com/vscode/devcontainers/typescript-node:16",
   "extensions": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"],
   "forwardPorts": [8000],
   "postCreateCommand": ["/bin/bash", "-c", "pushd docs && npm install && popd && npm install"],

package/.github/workflows/ci.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 16
 
       - name: Install dependencies
         run: npm ci

package/.github/workflows/release.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 16
 
       - name: Install dependencies
         run: npm ci

package/.github/workflows/release_canary.yml

@@ -29,7 +29,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: 14.x
+          node-version: 16
 
       - name: Install dependencies
         run: npm ci

package/.github/workflows/release_candidate.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: 14.x
+          node-version: 16
 
       - name: Install dependencies
         run: npm ci

package/.github/workflows/statuses.yml

@@ -0,0 +1,32 @@
+name: Update status project
+
+on:
+  push:
+    branches:
+      - main
+    # Only run workflow on changes to component docs
+    paths:
+      - 'docs/content/**'
+
+jobs:
+  build-and-deploy:
+    name: Update status project
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup Ruby
+        uses: actions/setup-ruby@v1
+        with:
+          ruby-version: 2.7.x
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14
+      - name: Install node deps
+        run: npm ci
+      - name: Install ruby deps
+        run: gem install graphql-client
+      - name: Build statuses
+        run: npx ts-node script/component-status-project/build.ts
+      - name: Deploy statuses to project
+        run: GITHUB_TOKEN=${{ secrets.GITHUB_TOKEN }} script/component-status-project/deploy.rb

package/.gitignore

@@ -8,3 +8,4 @@ lib/
 lib-esm/
 public/
 stats.html
+.env

package/.nvmrc

@@ -1 +1 @@
-v14
+v16

package/CHANGELOG.md

@@ -1,10 +1,28 @@
 # @primer/components
 
-## 32.1.1
+## 33.0.0
+
+### Major Changes
+
+- [#1643](https://github.com/primer/react/pull/1643) [`3938550f`](https://github.com/primer/react/commit/3938550fb3ea3fbec542a0cadaf6aeb734fba938) Thanks [@jfuchs](https://github.com/jfuchs)! - Details no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
+
+* [#1643](https://github.com/primer/react/pull/1643) [`3938550f`](https://github.com/primer/react/commit/3938550fb3ea3fbec542a0cadaf6aeb734fba938) Thanks [@jfuchs](https://github.com/jfuchs)! - Avatar no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
+
+- [#1643](https://github.com/primer/react/pull/1643) [`3938550f`](https://github.com/primer/react/commit/3938550fb3ea3fbec542a0cadaf6aeb734fba938) Thanks [@jfuchs](https://github.com/jfuchs)! - BranchName no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
+
+* [#1643](https://github.com/primer/react/pull/1643) [`3938550f`](https://github.com/primer/react/commit/3938550fb3ea3fbec542a0cadaf6aeb734fba938) Thanks [@jfuchs](https://github.com/jfuchs)! - Heading no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
+
+### Minor Changes
+
+- [#1619](https://github.com/primer/react/pull/1619) [`a13efa45`](https://github.com/primer/react/commit/a13efa457ded69656fb390b5b9b666d00157fd21) Thanks [@siddharthkp](https://github.com/siddharthkp)! - Add composable `ActionMenu` to `@primer/components/drafts`
 
 ### Patch Changes
 
-- [#1596](https://github.com/primer/react/pull/1596) [`5c6dc644`](https://github.com/primer/react/commit/5c6dc644c1e68b36d309deac653aca189f1fa624) Thanks [@dmarcey](https://github.com/dmarcey)! - Fix alignment of items in ActionList (single-select) if some of the items have wrapping text.
+- [#1668](https://github.com/primer/react/pull/1668) [`98dc6336`](https://github.com/primer/react/commit/98dc633674b793edfa4fbeb88fd239e6ca40544e) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionList: Fix multiple selection svg by overriding global shape-rendering for github.com
+
+* [#1596](https://github.com/primer/react/pull/1596) [`5c6dc644`](https://github.com/primer/react/commit/5c6dc644c1e68b36d309deac653aca189f1fa624) Thanks [@dmarcey](https://github.com/dmarcey)! - Fix alignment of items in ActionList (single-select) if some of the items have wrapping text.
+
+- [#1538](https://github.com/primer/react/pull/1538) [`dda6e5d7`](https://github.com/primer/react/commit/dda6e5d7204347c3c66183464dd0903e878a4f20) Thanks [@shiftkey](https://github.com/shiftkey)! - Update `typescript` package to correct generated type declarations.
 
 ## 32.1.0
 

package/contributor-docs/CONTRIBUTING.md

@@ -77,65 +77,35 @@ Additionally, every component should support [the `sx` prop](https://primer.styl
 
 Here's an example of a basic component written in the style of Primer Components:
 
-```jsx
-import {TYPOGRAPHY, COMMON} from './constants'
-import sx from './sx'
+```tsx
+import sx, {SxProp} from './sx'
 
-const Component = styled.div`
+const Component = styled.div<SxProp>`
   // additional styles here
 
-  ${COMMON};
-  ${TYPOGRAPHY};
   ${sx};
 `
 
 Component.defaultProps = {
   m: 0,
-  fontSize: 5,
+  fontSize: 5
 }
 
 export default Component
 ```
 
-### Adding system props
-
-Each component should have access to the appropriate system props. Every component has access to `COMMON`. For **most** components added, you'll only need to give the component to `COMMON`. If you are unsure, ping a DS team member on your PR.
-
-Categories of system props are exported from `src/constants.js`:
-
-- `COMMON` includes color and spacing (margin and padding) props
-- `TYPOGRAPHY` includes font family, font weight, and line-height props
-- `POSITION` includes positioning props
-- `FLEX` includes flexbox props
-- `BORDER` includes border and box-shadow props
-- `GRID` includes grid props
-
-To give the component access to a group of system props, import the system prop function from `./constants` and include the system prop function in your styled-component like so:
-
-```jsx
-import {COMMON} from './constants'
-
-const Component = styled.div`
-  // additional styles here
-  ${COMMON};
-`
-```
-
-Remember that the system prop function inside your style declaration needs to go _after_ any built-in styles you want to be overridable.
-
 ### Adding the `sx` prop
 
-Each component should provide access to a prop called `sx` that allows for setting theme-aware ad-hoc styles. See the [overriding styles](https://primer.style/components/overriding-styles) doc for more information on using the prop.
+Each component should accept a prop called `sx` that allows for setting theme-aware ad-hoc styles. See the [overriding styles](https://primer.style/components/overriding-styles) doc for more information on using the prop.
 
-Adding the `sx` prop is similar to adding system props; import the default export from the `sx` module, add it to your style definition, and add the appropriate prop types. **The `sx` prop should go at the _very end_ of your style definition.**
+To add the `sx` prop to your component: import the default export from the `sx` module, add it to your style definition, and add the appropriate prop types. **The `sx` prop should go at the _very end_ of your style definition.**
 
-```jsx
-import {COMMON} from './constants'
-import sx from './sx'
+```tsx
+import sx, {SxProp} from './sx'
 
-const Component = styled.div`
+const Component = styled.div<SxProp>`
   // additional styles here
-  ${COMMON};
+
   ${sx};
 `
 ```
@@ -175,15 +145,16 @@ See [`src/__tests__/example.js`](src/__tests__/example.js) for examples of ways
 
 ### TypeScript support
 
-Several of the projects that consume Primer Components are written in TypeScript. Though Primer Components is not currently written in TS, we do export type definitions in order to make Primer Components compatible with other TS projects.
+Primer React is written in TypeScript. We include type definitions in our built artifacts. To check types, run the `typecheck` script:
 
-Whenever adding new components or modifying the props of an existing component, **please make sure to update the type definition** in `index.d.ts`! This is super important to make sure we don't break compatibility :)
+```
+npm run typecheck
+```
 
 ### Additional resources
 
 - [Primer Components Philosophy](https://primer.style/components/philosophy)
 - [Primer Components Core Concepts](https://primer.style/components/core-concepts)
-- [Primer Components System Props](https://primer.style/components/system-props)
 - [Styled Components docs](https://styled-components.com/)
 - [Styled System docs](https://styled-system.com/)
 
@@ -206,7 +177,6 @@ After opening a pull request, a member of the design systems team will add the a
 - If it's a new component, does the component make sense to add to Primer Components? (Ideally this is discussed before the pull request stage, please reach out to a DS member if you aren't sure if a component should be added to Primer Components!)
 - Does the component follow our [Primer Components code style](#component-patterns)?
 - Does the component use theme values for most CSS values?
-- Does the component have the [correct system props implemented](#adding-system-props)?
 - Is the component API intuitive?
 - Does the component have the appropriate [type definitions in `index.d.ts`](#typescript-support)?
 - Is the component documented accurately?
@@ -251,20 +221,6 @@ Make sure to run `npm install` from inside the `docs/` subfolder _as well as_ th
 
 Ensure you are using the latest minor of Node.js for the major version specified in the `.nvmrc` file. For example, if `.nvmrc` contains `8`, make sure you're using the latest version of Node.js with the major version of 8.
 
-## Glossary
-
-### System props
-
-System props are style functions that provide one or more props, and can be passed directly the return value of [styled-components]'s `styled()` function:
-
-```jsx
-import styled from 'styled-components'
-import {space} from 'styled-system'
-const SpaceDiv = styled.div`
-  ${space}
-`
-```
-
 [classnames]: https://www.npmjs.com/package/classnames
 [spread syntax]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
 [styled-system]: https://styled-system.com