@primer/components 33.0.0-rc.b495ba4a → 33.1.0-rc.6856bcf5
Sign up to get free protection for your applications and to get access to all the features.
- package/.devcontainer/devcontainer.json +1 -1
- package/.github/workflows/ci.yml +1 -1
- package/.github/workflows/release.yml +6 -27
- package/.github/workflows/release_canary.yml +4 -60
- package/.github/workflows/release_candidate.yml +5 -51
- package/.github/workflows/statuses.yml +32 -0
- package/.gitignore +1 -0
- package/.nvmrc +1 -1
- package/CHANGELOG.md +20 -0
- package/contributor-docs/CONTRIBUTING.md +14 -61
- package/dist/browser.esm.js +2 -2209
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +2 -2209
- package/dist/browser.umd.js.map +1 -1
- package/docs/content/AnchoredOverlay.mdx +121 -1
- package/docs/content/Avatar.mdx +29 -14
- package/docs/content/AvatarPair.mdx +47 -0
- package/docs/content/AvatarStack.mdx +14 -6
- package/docs/content/Box.mdx +13 -11
- package/docs/content/BranchName.mdx +52 -0
- package/docs/content/{Breadcrumbs.md → Breadcrumbs.mdx} +21 -13
- package/docs/content/Link.mdx +75 -0
- package/docs/content/Radio.md +90 -0
- package/docs/content/TextInput.mdx +125 -0
- package/docs/content/drafts/ActionList2.mdx +484 -0
- package/docs/content/drafts/ActionMenu2.mdx +302 -0
- package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +9 -1
- package/docs/src/@primer/gatsby-theme-doctocat/mdx-components.js +15 -2
- package/docs/src/@primer/gatsby-theme-doctocat/nav.yml +4 -0
- package/docs/src/component-checklist.js +10 -2
- package/docs/src/props-table.js +165 -0
- package/docs/src/props.js +14 -28
- package/lib/ActionList/Header.js +1 -1
- package/lib/ActionList/Item.js +10 -10
- package/lib/ActionList/List.js +1 -1
- package/lib/ActionList2/ActionListContainerContext.d.ts +10 -0
- package/lib/ActionList2/ActionListContainerContext.js +15 -0
- package/lib/ActionList2/Divider.d.ts +3 -2
- package/lib/ActionList2/Divider.js +10 -5
- package/lib/ActionList2/Item.js +22 -8
- package/lib/ActionList2/List.js +12 -2
- package/lib/ActionList2/Selection.js +11 -0
- package/lib/ActionList2/index.d.ts +1 -2
- package/lib/ActionMenu2.d.ts +317 -0
- package/lib/ActionMenu2.js +125 -0
- package/lib/Autocomplete/Autocomplete.d.ts +2 -1
- package/lib/Autocomplete/AutocompleteInput.d.ts +2 -1
- package/lib/BaseStyles.js +2 -20
- package/lib/BorderBox.js +1 -1
- package/lib/Box.js +1 -1
- package/lib/BranchName.js +1 -1
- package/lib/Breadcrumbs.js +3 -3
- package/lib/Button/Button.d.ts +2 -2
- package/lib/Button/Button.js +1 -1
- package/lib/Button/ButtonClose.d.ts +2 -2
- package/lib/Button/ButtonDanger.d.ts +2 -2
- package/lib/Button/ButtonGroup.js +1 -1
- package/lib/Button/ButtonInvisible.d.ts +2 -2
- package/lib/Button/ButtonOutline.d.ts +2 -2
- package/lib/Button/ButtonPrimary.d.ts +2 -2
- package/lib/Checkbox.d.ts +1 -1
- package/lib/Checkbox.js +1 -1
- package/lib/CircleOcticon.d.ts +35 -35
- package/lib/Details.js +1 -1
- package/lib/Dialog.d.ts +37 -37
- package/lib/Dropdown.d.ts +6 -6
- package/lib/DropdownMenu/DropdownButton.d.ts +6 -3
- package/lib/FilterList.d.ts +1 -1
- package/lib/FilteredActionList/FilteredActionList.js +1 -1
- package/lib/Flex.js +1 -1
- package/lib/LabelGroup.js +1 -1
- package/lib/Overlay.js +1 -1
- package/lib/Pagination/Pagination.js +2 -2
- package/lib/Position.d.ts +4 -4
- package/lib/Position.js +1 -1
- package/lib/Radio.d.ts +38 -0
- package/lib/Radio.js +55 -0
- package/lib/SelectMenu/SelectMenu.d.ts +11 -10
- package/lib/SelectMenu/SelectMenu.js +1 -1
- package/lib/SelectMenu/SelectMenuFilter.js +1 -1
- package/lib/SelectMenu/SelectMenuFooter.js +1 -1
- package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib/SelectMenu/SelectMenuItem.js +1 -1
- package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
- package/lib/SelectMenu/SelectMenuTab.js +1 -1
- package/lib/SelectMenu/SelectMenuTabPanel.js +1 -1
- package/lib/SelectMenu/SelectMenuTabs.js +1 -1
- package/lib/StateLabel.js +1 -1
- package/lib/StyledOcticon.js +1 -1
- package/lib/SubNav.js +3 -3
- package/lib/TextInputWithTokens.d.ts +2 -1
- package/lib/ThemeProvider.d.ts +1 -0
- package/lib/ThemeProvider.js +17 -4
- package/lib/Timeline.js +4 -4
- package/lib/Token/AvatarToken.d.ts +1 -1
- package/lib/Token/AvatarToken.js +1 -1
- package/lib/Token/IssueLabelToken.d.ts +1 -1
- package/lib/Token/Token.d.ts +1 -1
- package/lib/Token/TokenBase.js +1 -1
- package/lib/Tooltip.js +1 -1
- package/lib/UnderlineNav.js +2 -2
- package/lib/__tests__/Radio.test.d.ts +2 -0
- package/lib/__tests__/Radio.test.js +202 -0
- package/lib/__tests__/ThemeProvider.test.js +114 -0
- package/lib/drafts.d.ts +1 -0
- package/lib/drafts.js +13 -0
- package/lib/hooks/index.d.ts +1 -0
- package/lib/hooks/index.js +9 -1
- package/lib/index.d.ts +2 -0
- package/lib/index.js +8 -0
- package/lib/stories/ActionList.stories.js +3 -3
- package/lib/stories/ActionList2.stories.js +1 -1
- package/lib/stories/ActionMenu2.stories.js +455 -0
- package/lib/stories/Checkbox.stories.js +4 -4
- package/lib/stories/Radio.stories.js +146 -0
- package/lib/stories/ThemeProvider.stories.js +1 -5
- package/lib/stories/useFocusTrap.stories.js +1 -11
- package/lib/stories/useFocusZone.stories.js +2 -6
- package/lib-esm/ActionList/Header.js +1 -1
- package/lib-esm/ActionList/Item.js +10 -10
- package/lib-esm/ActionList/List.js +1 -1
- package/lib-esm/ActionList2/ActionListContainerContext.d.ts +10 -0
- package/lib-esm/ActionList2/ActionListContainerContext.js +3 -0
- package/lib-esm/ActionList2/Divider.d.ts +3 -2
- package/lib-esm/ActionList2/Divider.js +8 -5
- package/lib-esm/ActionList2/Item.js +20 -8
- package/lib-esm/ActionList2/List.js +10 -2
- package/lib-esm/ActionList2/Selection.js +9 -0
- package/lib-esm/ActionList2/index.d.ts +1 -2
- package/lib-esm/ActionMenu2.d.ts +317 -0
- package/lib-esm/ActionMenu2.js +100 -0
- package/lib-esm/Autocomplete/Autocomplete.d.ts +2 -1
- package/lib-esm/Autocomplete/AutocompleteInput.d.ts +2 -1
- package/lib-esm/BaseStyles.js +2 -20
- package/lib-esm/BorderBox.js +1 -1
- package/lib-esm/Box.js +1 -1
- package/lib-esm/BranchName.js +1 -1
- package/lib-esm/Breadcrumbs.js +3 -3
- package/lib-esm/Button/Button.d.ts +2 -2
- package/lib-esm/Button/Button.js +1 -1
- package/lib-esm/Button/ButtonClose.d.ts +2 -2
- package/lib-esm/Button/ButtonDanger.d.ts +2 -2
- package/lib-esm/Button/ButtonGroup.js +1 -1
- package/lib-esm/Button/ButtonInvisible.d.ts +2 -2
- package/lib-esm/Button/ButtonOutline.d.ts +2 -2
- package/lib-esm/Button/ButtonPrimary.d.ts +2 -2
- package/lib-esm/Checkbox.d.ts +1 -1
- package/lib-esm/Checkbox.js +1 -1
- package/lib-esm/CircleOcticon.d.ts +35 -35
- package/lib-esm/Details.js +1 -1
- package/lib-esm/Dialog.d.ts +37 -37
- package/lib-esm/Dropdown.d.ts +6 -6
- package/lib-esm/DropdownMenu/DropdownButton.d.ts +6 -3
- package/lib-esm/FilterList.d.ts +1 -1
- package/lib-esm/FilteredActionList/FilteredActionList.js +1 -1
- package/lib-esm/Flex.js +1 -1
- package/lib-esm/LabelGroup.js +1 -1
- package/lib-esm/Overlay.js +1 -1
- package/lib-esm/Pagination/Pagination.js +2 -2
- package/lib-esm/Position.d.ts +4 -4
- package/lib-esm/Position.js +1 -1
- package/lib-esm/Radio.d.ts +38 -0
- package/lib-esm/Radio.js +40 -0
- package/lib-esm/SelectMenu/SelectMenu.d.ts +11 -10
- package/lib-esm/SelectMenu/SelectMenu.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuFilter.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuFooter.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib-esm/SelectMenu/SelectMenuItem.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
- package/lib-esm/SelectMenu/SelectMenuTab.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuTabPanel.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuTabs.js +1 -1
- package/lib-esm/StateLabel.js +1 -1
- package/lib-esm/StyledOcticon.js +1 -1
- package/lib-esm/SubNav.js +3 -3
- package/lib-esm/TextInputWithTokens.d.ts +2 -1
- package/lib-esm/ThemeProvider.d.ts +1 -0
- package/lib-esm/ThemeProvider.js +17 -4
- package/lib-esm/Timeline.js +4 -4
- package/lib-esm/Token/AvatarToken.d.ts +1 -1
- package/lib-esm/Token/AvatarToken.js +1 -1
- package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
- package/lib-esm/Token/Token.d.ts +1 -1
- package/lib-esm/Token/TokenBase.js +1 -1
- package/lib-esm/Tooltip.js +1 -1
- package/lib-esm/UnderlineNav.js +2 -2
- package/lib-esm/__tests__/Radio.test.d.ts +2 -0
- package/lib-esm/__tests__/Radio.test.js +183 -0
- package/lib-esm/__tests__/ThemeProvider.test.js +114 -0
- package/lib-esm/drafts.d.ts +1 -0
- package/lib-esm/drafts.js +2 -1
- package/lib-esm/hooks/index.d.ts +1 -0
- package/lib-esm/hooks/index.js +2 -1
- package/lib-esm/index.d.ts +2 -0
- package/lib-esm/index.js +1 -0
- package/lib-esm/stories/ActionList.stories.js +3 -3
- package/lib-esm/stories/ActionList2.stories.js +1 -1
- package/lib-esm/stories/ActionMenu2.stories.js +393 -0
- package/lib-esm/stories/Checkbox.stories.js +5 -5
- package/lib-esm/stories/Radio.stories.js +121 -0
- package/lib-esm/stories/ThemeProvider.stories.js +1 -5
- package/lib-esm/stories/useFocusTrap.stories.js +1 -11
- package/lib-esm/stories/useFocusZone.stories.js +2 -6
- package/package-lock.json +1366 -3544
- package/package.json +14 -8
- package/script/component-status-project/build.ts +100 -0
- package/script/component-status-project/deploy.rb +142 -0
- package/src/ActionList2/ActionListContainerContext.tsx +14 -0
- package/src/ActionList2/Divider.tsx +13 -8
- package/src/ActionList2/Item.tsx +14 -6
- package/src/ActionList2/List.tsx +6 -2
- package/src/ActionList2/Selection.tsx +9 -0
- package/src/ActionMenu2.tsx +116 -0
- package/src/BranchName.tsx +2 -1
- package/src/Radio.tsx +76 -0
- package/src/ThemeProvider.tsx +22 -5
- package/src/__tests__/Radio.test.tsx +174 -0
- package/src/__tests__/ThemeProvider.test.tsx +116 -0
- package/src/__tests__/__snapshots__/BranchName.test.tsx.snap +3 -1
- package/src/__tests__/__snapshots__/Radio.test.tsx.snap +16 -0
- package/src/drafts.ts +1 -0
- package/src/hooks/index.ts +1 -0
- package/src/index.ts +2 -0
- package/src/stories/ActionMenu2.stories.tsx +605 -0
- package/src/stories/Checkbox.stories.tsx +1 -3
- package/src/stories/Radio.stories.tsx +126 -0
- package/stats.html +1 -1
- package/tsconfig.build.json +1 -1
- package/tsconfig.json +1 -1
- package/docs/content/ActionList2.mdx +0 -379
- package/docs/content/BranchName.md +0 -39
- package/docs/content/Link.md +0 -29
- package/docs/content/TextInput.md +0 -42
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "Primer Components",
|
3
|
-
"image": "mcr.microsoft.com/vscode/devcontainers/typescript-node:
|
3
|
+
"image": "mcr.microsoft.com/vscode/devcontainers/typescript-node:16",
|
4
4
|
"extensions": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"],
|
5
5
|
"forwardPorts": [8000],
|
6
6
|
"postCreateCommand": ["/bin/bash", "-c", "pushd docs && npm install && popd && npm install"],
|
package/.github/workflows/ci.yml
CHANGED
@@ -1,35 +1,14 @@
|
|
1
1
|
name: Release
|
2
|
+
|
2
3
|
on:
|
3
4
|
push:
|
4
5
|
branches:
|
5
6
|
- main
|
7
|
+
|
6
8
|
jobs:
|
7
9
|
release:
|
8
10
|
name: Release
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
with:
|
14
|
-
# This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
|
15
|
-
fetch-depth: 0
|
16
|
-
persist-credentials: false
|
17
|
-
|
18
|
-
- name: Set up Node.js
|
19
|
-
uses: actions/setup-node@v2
|
20
|
-
with:
|
21
|
-
node-version: 14
|
22
|
-
|
23
|
-
- name: Install dependencies
|
24
|
-
run: npm ci
|
25
|
-
|
26
|
-
- name: Create release pull request or publish to npm
|
27
|
-
id: changesets
|
28
|
-
uses: changesets/action@master
|
29
|
-
with:
|
30
|
-
title: Release Tracking
|
31
|
-
# This expects you to have a script called release which does a build for your packages and calls changeset publish
|
32
|
-
publish: npm run release
|
33
|
-
env:
|
34
|
-
GITHUB_TOKEN: ${{ secrets.GPR_AUTH_TOKEN_SHARED }}
|
35
|
-
NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
|
11
|
+
uses: primer/.github/.github/workflows/release.yml@main
|
12
|
+
secrets:
|
13
|
+
github_token: ${{ secrets.GPR_AUTH_TOKEN_SHARED }}
|
14
|
+
npm_token: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
|
@@ -4,67 +4,11 @@ on:
|
|
4
4
|
branches-ignore:
|
5
5
|
- 'main'
|
6
6
|
- 'changeset-release/main'
|
7
|
-
# To avoid unnecessary noise, we don't create canary releases when these paths change:
|
8
|
-
paths-ignore:
|
9
|
-
- '.changeset/**'
|
10
|
-
- '.devcontainer/**'
|
11
|
-
- '.github/**'
|
12
|
-
- '.storybook/**'
|
13
|
-
- '.vscode/**'
|
14
|
-
- 'docs/**'
|
15
7
|
|
16
8
|
jobs:
|
17
9
|
release-canary:
|
18
10
|
name: Canary
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
- name: Checkout repository
|
24
|
-
uses: actions/checkout@v2
|
25
|
-
with:
|
26
|
-
# This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
|
27
|
-
fetch-depth: 0
|
28
|
-
|
29
|
-
- name: Set up Node.js
|
30
|
-
uses: actions/setup-node@v2
|
31
|
-
with:
|
32
|
-
node-version: 14.x
|
33
|
-
|
34
|
-
- name: Install dependencies
|
35
|
-
run: npm ci
|
36
|
-
|
37
|
-
- name: Build
|
38
|
-
run: npm run build
|
39
|
-
|
40
|
-
- name: Create .npmrc
|
41
|
-
run: |
|
42
|
-
cat << EOF > "$HOME/.npmrc"
|
43
|
-
//registry.npmjs.org/:_authToken=$NPM_TOKEN
|
44
|
-
EOF
|
45
|
-
env:
|
46
|
-
NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
|
47
|
-
|
48
|
-
- name: Publish canary version
|
49
|
-
run: |
|
50
|
-
echo "$( jq '.version = "0.0.0"' package.json )" > package.json
|
51
|
-
echo -e "---\n'@primer/components': patch\n---\n\nFake entry to force publishing" > .changeset/force-snapshot-release.md
|
52
|
-
yarn changeset version --snapshot
|
53
|
-
yarn changeset publish --tag canary
|
54
|
-
env:
|
55
|
-
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
56
|
-
|
57
|
-
- name: Output canary version number
|
58
|
-
uses: actions/github-script@v4.0.2
|
59
|
-
with:
|
60
|
-
script: |
|
61
|
-
const package = require(`${process.env.GITHUB_WORKSPACE}/package.json`)
|
62
|
-
github.repos.createCommitStatus({
|
63
|
-
owner: context.repo.owner,
|
64
|
-
repo: context.repo.repo,
|
65
|
-
sha: context.sha,
|
66
|
-
state: 'success',
|
67
|
-
context: `Published ${package.name}`,
|
68
|
-
description: package.version,
|
69
|
-
target_url: `https://unpkg.com/${package.name}@${package.version}/`
|
70
|
-
})
|
11
|
+
uses: primer/.github/.github/workflows/release_canary.yml@main
|
12
|
+
secrets:
|
13
|
+
github_token: ${{ secrets.GITHUB_TOKEN }}
|
14
|
+
npm_token: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
|
@@ -1,4 +1,5 @@
|
|
1
1
|
name: Release
|
2
|
+
|
2
3
|
on:
|
3
4
|
push:
|
4
5
|
branches:
|
@@ -7,54 +8,7 @@ on:
|
|
7
8
|
jobs:
|
8
9
|
release-candidate:
|
9
10
|
name: Candidate
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
- name: Checkout repository
|
15
|
-
uses: actions/checkout@v2
|
16
|
-
with:
|
17
|
-
# This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
|
18
|
-
fetch-depth: 0
|
19
|
-
|
20
|
-
- name: Set up Node.js
|
21
|
-
uses: actions/setup-node@v2
|
22
|
-
with:
|
23
|
-
node-version: 14.x
|
24
|
-
|
25
|
-
- name: Install dependencies
|
26
|
-
run: npm ci
|
27
|
-
|
28
|
-
- name: Build
|
29
|
-
run: npm run build
|
30
|
-
|
31
|
-
- name: Create .npmrc
|
32
|
-
run: |
|
33
|
-
cat << EOF > "$HOME/.npmrc"
|
34
|
-
//registry.npmjs.org/:_authToken=$NPM_TOKEN
|
35
|
-
EOF
|
36
|
-
env:
|
37
|
-
NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
|
38
|
-
|
39
|
-
- name: Publish release candidate
|
40
|
-
run: |
|
41
|
-
version=$(jq -r .version package.json)
|
42
|
-
echo "$( jq ".version = \"$(echo $version)-rc.$(git rev-parse --short HEAD)\"" package.json )" > package.json
|
43
|
-
yarn publish --tag next
|
44
|
-
env:
|
45
|
-
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
46
|
-
|
47
|
-
- name: Output release candidate version number
|
48
|
-
uses: actions/github-script@v4.0.2
|
49
|
-
with:
|
50
|
-
script: |
|
51
|
-
const package = require(`${process.env.GITHUB_WORKSPACE}/package.json`)
|
52
|
-
github.repos.createCommitStatus({
|
53
|
-
owner: context.repo.owner,
|
54
|
-
repo: context.repo.repo,
|
55
|
-
sha: context.sha,
|
56
|
-
state: 'success',
|
57
|
-
context: `Published ${package.name}`,
|
58
|
-
description: package.version,
|
59
|
-
target_url: `https://unpkg.com/${package.name}@${package.version}/`
|
60
|
-
})
|
11
|
+
uses: primer/.github/.github/workflows/release_candidate.yml@main
|
12
|
+
secrets:
|
13
|
+
github_token: ${{ secrets.GITHUB_TOKEN }}
|
14
|
+
npm_token: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
|
@@ -0,0 +1,32 @@
|
|
1
|
+
name: Update status project
|
2
|
+
|
3
|
+
on:
|
4
|
+
push:
|
5
|
+
branches:
|
6
|
+
- main
|
7
|
+
# Only run workflow on changes to component docs
|
8
|
+
paths:
|
9
|
+
- 'docs/content/**'
|
10
|
+
|
11
|
+
jobs:
|
12
|
+
build-and-deploy:
|
13
|
+
name: Update status project
|
14
|
+
runs-on: ubuntu-latest
|
15
|
+
steps:
|
16
|
+
- uses: actions/checkout@v2
|
17
|
+
- name: Setup Ruby
|
18
|
+
uses: actions/setup-ruby@v1
|
19
|
+
with:
|
20
|
+
ruby-version: 2.7.x
|
21
|
+
- name: Set up Node.js
|
22
|
+
uses: actions/setup-node@v2
|
23
|
+
with:
|
24
|
+
node-version: 14
|
25
|
+
- name: Install node deps
|
26
|
+
run: npm ci
|
27
|
+
- name: Install ruby deps
|
28
|
+
run: gem install graphql-client
|
29
|
+
- name: Build statuses
|
30
|
+
run: npx ts-node script/component-status-project/build.ts
|
31
|
+
- name: Deploy statuses to project
|
32
|
+
run: GITHUB_TOKEN=${{ secrets.GITHUB_TOKEN }} script/component-status-project/deploy.rb
|
package/.gitignore
CHANGED
package/.nvmrc
CHANGED
@@ -1 +1 @@
|
|
1
|
-
|
1
|
+
v16
|
package/CHANGELOG.md
CHANGED
@@ -1,5 +1,17 @@
|
|
1
1
|
# @primer/components
|
2
2
|
|
3
|
+
## 33.1.0
|
4
|
+
|
5
|
+
### Minor Changes
|
6
|
+
|
7
|
+
- [#1658](https://github.com/primer/react/pull/1658) [`edc48ba8`](https://github.com/primer/react/commit/edc48ba817e2052d2f4ed8e602bffd92e82b8893) Thanks [@rezrah](https://github.com/rezrah)! - Adds a Radio component
|
8
|
+
|
9
|
+
### Patch Changes
|
10
|
+
|
11
|
+
- [#1675](https://github.com/primer/react/pull/1675) [`2380b668`](https://github.com/primer/react/commit/2380b66848a885ee5dd2e6b07a1173201976545f) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionMenu v2: Added `ActionMenu.Overlay` which accepts props to customize the Menu overlay.
|
12
|
+
|
13
|
+
* [#1702](https://github.com/primer/react/pull/1702) [`2c42c382`](https://github.com/primer/react/commit/2c42c382fc4ddf50fc18dd62ca854dc04304a539) Thanks [@colebemis](https://github.com/colebemis)! - Update `BranchName` styles to match github.com
|
14
|
+
|
3
15
|
## 33.0.0
|
4
16
|
|
5
17
|
### Major Changes
|
@@ -12,12 +24,20 @@
|
|
12
24
|
|
13
25
|
* [#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.
|
14
26
|
|
27
|
+
### Minor Changes
|
28
|
+
|
29
|
+
- [#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`
|
30
|
+
|
31
|
+
* [#1679](https://github.com/primer/react/pull/1679) [`006cc80b`](https://github.com/primer/react/commit/006cc80bd8fa2f31947e17e0683880e0b8cdc400) Thanks [@mattcosta7](https://github.com/mattcosta7)! - Add `resolvedColorScheme` property to the object returned by `useTheme()`
|
32
|
+
|
15
33
|
### Patch Changes
|
16
34
|
|
17
35
|
- [#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
|
18
36
|
|
19
37
|
* [#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.
|
20
38
|
|
39
|
+
- [#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.
|
40
|
+
|
21
41
|
## 32.1.0
|
22
42
|
|
23
43
|
### Minor Changes
|
@@ -6,7 +6,6 @@
|
|
6
6
|
4. [Developing Components](#developing-components)
|
7
7
|
- [Tools we use](#tools-we-use)
|
8
8
|
- [Component patterns](#component-patterns)
|
9
|
-
- [Adding system props](#adding-system-props)
|
10
9
|
- [Adding the sx prop](#adding-the-sx-prop)
|
11
10
|
- [Linting](#linting)
|
12
11
|
- [Testing](#testing)
|
@@ -21,8 +20,6 @@
|
|
21
20
|
- [Path aliasing](#path-aliasing)
|
22
21
|
- [Publishing](#publishing)
|
23
22
|
8. [Troubleshooting](#troubleshooting)
|
24
|
-
9. [Glossary](#glossary)
|
25
|
-
- [System Props](#system-props)
|
26
23
|
|
27
24
|
## Roadmap
|
28
25
|
|
@@ -77,65 +74,35 @@ Additionally, every component should support [the `sx` prop](https://primer.styl
|
|
77
74
|
|
78
75
|
Here's an example of a basic component written in the style of Primer Components:
|
79
76
|
|
80
|
-
```
|
81
|
-
import
|
82
|
-
import sx from './sx'
|
77
|
+
```tsx
|
78
|
+
import sx, {SxProp} from './sx'
|
83
79
|
|
84
|
-
const Component = styled.div
|
80
|
+
const Component = styled.div<SxProp>`
|
85
81
|
// additional styles here
|
86
82
|
|
87
|
-
${COMMON};
|
88
|
-
${TYPOGRAPHY};
|
89
83
|
${sx};
|
90
84
|
`
|
91
85
|
|
92
86
|
Component.defaultProps = {
|
93
87
|
m: 0,
|
94
|
-
fontSize: 5
|
88
|
+
fontSize: 5
|
95
89
|
}
|
96
90
|
|
97
91
|
export default Component
|
98
92
|
```
|
99
93
|
|
100
|
-
### Adding system props
|
101
|
-
|
102
|
-
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.
|
103
|
-
|
104
|
-
Categories of system props are exported from `src/constants.js`:
|
105
|
-
|
106
|
-
- `COMMON` includes color and spacing (margin and padding) props
|
107
|
-
- `TYPOGRAPHY` includes font family, font weight, and line-height props
|
108
|
-
- `POSITION` includes positioning props
|
109
|
-
- `FLEX` includes flexbox props
|
110
|
-
- `BORDER` includes border and box-shadow props
|
111
|
-
- `GRID` includes grid props
|
112
|
-
|
113
|
-
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:
|
114
|
-
|
115
|
-
```jsx
|
116
|
-
import {COMMON} from './constants'
|
117
|
-
|
118
|
-
const Component = styled.div`
|
119
|
-
// additional styles here
|
120
|
-
${COMMON};
|
121
|
-
`
|
122
|
-
```
|
123
|
-
|
124
|
-
Remember that the system prop function inside your style declaration needs to go _after_ any built-in styles you want to be overridable.
|
125
|
-
|
126
94
|
### Adding the `sx` prop
|
127
95
|
|
128
|
-
Each component should
|
96
|
+
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.
|
129
97
|
|
130
|
-
|
98
|
+
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.**
|
131
99
|
|
132
|
-
```
|
133
|
-
import {
|
134
|
-
import sx from './sx'
|
100
|
+
```tsx
|
101
|
+
import sx, {SxProp} from './sx'
|
135
102
|
|
136
|
-
const Component = styled.div
|
103
|
+
const Component = styled.div<SxProp>`
|
137
104
|
// additional styles here
|
138
|
-
|
105
|
+
|
139
106
|
${sx};
|
140
107
|
`
|
141
108
|
```
|
@@ -175,15 +142,16 @@ See [`src/__tests__/example.js`](src/__tests__/example.js) for examples of ways
|
|
175
142
|
|
176
143
|
### TypeScript support
|
177
144
|
|
178
|
-
|
145
|
+
Primer React is written in TypeScript. We include type definitions in our built artifacts. To check types, run the `typecheck` script:
|
179
146
|
|
180
|
-
|
147
|
+
```
|
148
|
+
npm run typecheck
|
149
|
+
```
|
181
150
|
|
182
151
|
### Additional resources
|
183
152
|
|
184
153
|
- [Primer Components Philosophy](https://primer.style/components/philosophy)
|
185
154
|
- [Primer Components Core Concepts](https://primer.style/components/core-concepts)
|
186
|
-
- [Primer Components System Props](https://primer.style/components/system-props)
|
187
155
|
- [Styled Components docs](https://styled-components.com/)
|
188
156
|
- [Styled System docs](https://styled-system.com/)
|
189
157
|
|
@@ -206,7 +174,6 @@ After opening a pull request, a member of the design systems team will add the a
|
|
206
174
|
- 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!)
|
207
175
|
- Does the component follow our [Primer Components code style](#component-patterns)?
|
208
176
|
- Does the component use theme values for most CSS values?
|
209
|
-
- Does the component have the [correct system props implemented](#adding-system-props)?
|
210
177
|
- Is the component API intuitive?
|
211
178
|
- Does the component have the appropriate [type definitions in `index.d.ts`](#typescript-support)?
|
212
179
|
- Is the component documented accurately?
|
@@ -251,20 +218,6 @@ Make sure to run `npm install` from inside the `docs/` subfolder _as well as_ th
|
|
251
218
|
|
252
219
|
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.
|
253
220
|
|
254
|
-
## Glossary
|
255
|
-
|
256
|
-
### System props
|
257
|
-
|
258
|
-
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:
|
259
|
-
|
260
|
-
```jsx
|
261
|
-
import styled from 'styled-components'
|
262
|
-
import {space} from 'styled-system'
|
263
|
-
const SpaceDiv = styled.div`
|
264
|
-
${space}
|
265
|
-
`
|
266
|
-
```
|
267
|
-
|
268
221
|
[classnames]: https://www.npmjs.com/package/classnames
|
269
222
|
[spread syntax]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
|
270
223
|
[styled-system]: https://styled-system.com
|