@primer/components 32.1.1-rc.92743105 → 33.0.0-rc.9cc2a259
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.devcontainer/devcontainer.json +1 -1
- package/.github/workflows/ci.yml +1 -1
- package/.github/workflows/release.yml +1 -1
- package/.github/workflows/release_canary.yml +1 -1
- package/.github/workflows/release_candidate.yml +1 -1
- package/.github/workflows/statuses.yml +32 -0
- package/.gitignore +1 -0
- package/.nvmrc +1 -1
- package/CHANGELOG.md +20 -2
- package/contributor-docs/CONTRIBUTING.md +14 -58
- package/dist/browser.esm.js +105 -108
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +105 -108
- package/dist/browser.umd.js.map +1 -1
- package/docs/content/BranchName.md +6 -5
- package/docs/content/Details.md +4 -8
- package/docs/content/Heading.md +5 -10
- package/docs/content/Label.md +6 -7
- package/docs/content/ProgressBar.mdx +7 -6
- package/docs/content/Text.md +0 -6
- package/docs/content/{ActionList2.mdx → drafts/ActionList2.mdx} +5 -9
- package/docs/content/drafts/ActionMenu2.mdx +251 -0
- package/docs/content/status.mdx +1 -1
- package/docs/content/system-props.mdx +1 -1
- package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +9 -1
- package/docs/src/@primer/gatsby-theme-doctocat/nav.yml +1 -1
- package/docs/src/component-checklist.js +10 -2
- package/lib/ActionList/Item.js +1 -1
- package/lib/ActionList2/Divider.d.ts +3 -2
- package/lib/ActionList2/Divider.js +10 -5
- package/lib/ActionList2/Item.js +21 -5
- package/lib/ActionList2/List.js +11 -1
- package/lib/ActionList2/MenuContext.d.ts +10 -0
- package/lib/ActionList2/MenuContext.js +15 -0
- package/lib/ActionList2/Selection.js +14 -1
- package/lib/ActionList2/index.d.ts +1 -2
- package/lib/ActionMenu2.d.ts +313 -0
- package/lib/ActionMenu2.js +91 -0
- package/lib/Autocomplete/Autocomplete.d.ts +2 -1
- package/lib/Autocomplete/AutocompleteInput.d.ts +2 -1
- package/lib/Avatar.d.ts +1 -2
- package/lib/Avatar.js +1 -1
- package/lib/BranchName.d.ts +1 -2
- package/lib/BranchName.js +1 -1
- package/lib/Button/Button.d.ts +2 -2
- package/lib/Button/ButtonClose.d.ts +2 -2
- package/lib/Button/ButtonDanger.d.ts +2 -2
- 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/CircleOcticon.d.ts +35 -35
- package/lib/Details.d.ts +1 -2
- package/lib/Details.js +1 -3
- package/lib/Dialog.d.ts +37 -37
- package/lib/Dropdown.d.ts +8 -72
- package/lib/DropdownMenu/DropdownButton.d.ts +6 -3
- package/lib/FilterList.d.ts +1 -1
- package/lib/Heading.d.ts +1 -2
- package/lib/Heading.js +1 -6
- package/lib/Position.d.ts +4 -4
- package/lib/ProgressBar.d.ts +16 -11
- package/lib/ProgressBar.js +6 -10
- package/lib/SelectMenu/SelectMenu.d.ts +11 -10
- package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
- package/lib/Spinner.d.ts +1 -2
- package/lib/Spinner.js +1 -3
- package/lib/TextInputWithTokens.d.ts +2 -1
- package/lib/Token/AvatarToken.d.ts +1 -1
- package/lib/Token/IssueLabelToken.d.ts +1 -1
- package/lib/Token/Token.d.ts +1 -1
- package/lib/__tests__/Avatar.test.js +4 -2
- package/lib/__tests__/Avatar.types.test.d.ts +3 -0
- package/lib/__tests__/Avatar.types.test.js +31 -0
- package/lib/__tests__/BranchName.types.test.d.ts +3 -0
- package/lib/__tests__/BranchName.types.test.js +28 -0
- package/lib/__tests__/Details.types.test.d.ts +3 -0
- package/lib/__tests__/Details.types.test.js +28 -0
- package/lib/__tests__/Heading.test.js +63 -30
- package/lib/__tests__/Heading.types.test.d.ts +3 -0
- package/lib/__tests__/Heading.types.test.js +28 -0
- package/lib/drafts.d.ts +1 -0
- package/lib/drafts.js +13 -0
- package/lib/stories/ActionMenu2.stories.js +433 -0
- package/lib-esm/ActionList/Item.js +1 -1
- package/lib-esm/ActionList2/Divider.d.ts +3 -2
- package/lib-esm/ActionList2/Divider.js +8 -5
- package/lib-esm/ActionList2/Item.js +19 -5
- package/lib-esm/ActionList2/List.js +9 -1
- package/lib-esm/ActionList2/MenuContext.d.ts +10 -0
- package/lib-esm/ActionList2/MenuContext.js +3 -0
- package/lib-esm/ActionList2/Selection.js +12 -1
- package/lib-esm/ActionList2/index.d.ts +1 -2
- package/lib-esm/ActionMenu2.d.ts +313 -0
- package/lib-esm/ActionMenu2.js +67 -0
- package/lib-esm/Autocomplete/Autocomplete.d.ts +2 -1
- package/lib-esm/Autocomplete/AutocompleteInput.d.ts +2 -1
- package/lib-esm/Avatar.d.ts +1 -2
- package/lib-esm/Avatar.js +2 -2
- package/lib-esm/BranchName.d.ts +1 -2
- package/lib-esm/BranchName.js +2 -2
- package/lib-esm/Button/Button.d.ts +2 -2
- package/lib-esm/Button/ButtonClose.d.ts +2 -2
- package/lib-esm/Button/ButtonDanger.d.ts +2 -2
- 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/CircleOcticon.d.ts +35 -35
- package/lib-esm/Details.d.ts +1 -2
- package/lib-esm/Details.js +1 -2
- package/lib-esm/Dialog.d.ts +37 -37
- package/lib-esm/Dropdown.d.ts +8 -72
- package/lib-esm/DropdownMenu/DropdownButton.d.ts +6 -3
- package/lib-esm/FilterList.d.ts +1 -1
- package/lib-esm/Heading.d.ts +1 -2
- package/lib-esm/Heading.js +2 -6
- package/lib-esm/Position.d.ts +4 -4
- package/lib-esm/ProgressBar.d.ts +16 -11
- package/lib-esm/ProgressBar.js +7 -11
- package/lib-esm/SelectMenu/SelectMenu.d.ts +11 -10
- package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
- package/lib-esm/Spinner.d.ts +1 -2
- package/lib-esm/Spinner.js +1 -2
- package/lib-esm/TextInputWithTokens.d.ts +2 -1
- package/lib-esm/Token/AvatarToken.d.ts +1 -1
- package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
- package/lib-esm/Token/Token.d.ts +1 -1
- package/lib-esm/__tests__/Avatar.test.js +4 -2
- package/lib-esm/__tests__/Avatar.types.test.d.ts +3 -0
- package/lib-esm/__tests__/Avatar.types.test.js +16 -0
- package/lib-esm/__tests__/BranchName.types.test.d.ts +3 -0
- package/lib-esm/__tests__/BranchName.types.test.js +13 -0
- package/lib-esm/__tests__/Details.types.test.d.ts +3 -0
- package/lib-esm/__tests__/Details.types.test.js +13 -0
- package/lib-esm/__tests__/Heading.test.js +62 -30
- package/lib-esm/__tests__/Heading.types.test.d.ts +3 -0
- package/lib-esm/__tests__/Heading.types.test.js +13 -0
- package/lib-esm/drafts.d.ts +1 -0
- package/lib-esm/drafts.js +2 -1
- package/lib-esm/stories/ActionMenu2.stories.js +376 -0
- package/package-lock.json +321 -269
- package/package.json +11 -5
- package/script/component-status-project/build.ts +100 -0
- package/script/component-status-project/deploy.rb +142 -0
- package/src/ActionList/Item.tsx +1 -0
- package/src/ActionList2/Divider.tsx +13 -8
- package/src/ActionList2/Item.tsx +13 -3
- package/src/ActionList2/List.tsx +6 -2
- package/src/ActionList2/MenuContext.tsx +6 -0
- package/src/ActionList2/Selection.tsx +11 -1
- package/src/ActionMenu2.tsx +94 -0
- package/src/Avatar.tsx +2 -4
- package/src/BranchName.tsx +3 -3
- package/src/Details.tsx +1 -5
- package/src/Heading.tsx +2 -9
- package/src/ProgressBar.tsx +11 -10
- package/src/Spinner.tsx +1 -3
- package/src/__tests__/Avatar.test.tsx +1 -1
- package/src/__tests__/Avatar.types.test.tsx +11 -0
- package/src/__tests__/BranchName.types.test.tsx +11 -0
- package/src/__tests__/Details.types.test.tsx +11 -0
- package/src/__tests__/Heading.test.tsx +71 -25
- package/src/__tests__/Heading.types.test.tsx +11 -0
- package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +4 -0
- package/src/drafts.ts +1 -0
- package/src/stories/ActionMenu2.stories.tsx +551 -0
- package/stats.html +1 -1
- package/tsconfig.build.json +1 -1
- package/tsconfig.json +1 -1
package/src/ProgressBar.tsx
CHANGED
@@ -1,13 +1,15 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import styled from 'styled-components'
|
3
3
|
import {width, WidthProps} from 'styled-system'
|
4
|
-
import {
|
4
|
+
import {get} from './constants'
|
5
5
|
import sx, {SxProp} from './sx'
|
6
|
-
import {ComponentProps} from './utils/types'
|
7
6
|
|
8
|
-
|
7
|
+
type ProgressProp = {progress?: string | number}
|
8
|
+
|
9
|
+
const Bar = styled.span<ProgressProp & SxProp>`
|
9
10
|
width: ${props => (props.progress ? `${props.progress}%` : 0)};
|
10
|
-
|
11
|
+
|
12
|
+
${sx};
|
11
13
|
`
|
12
14
|
|
13
15
|
const sizeMap = {
|
@@ -20,7 +22,6 @@ type StyledProgressContainerProps = {
|
|
20
22
|
inline?: boolean
|
21
23
|
barSize?: keyof typeof sizeMap
|
22
24
|
} & WidthProps &
|
23
|
-
SystemCommonProps &
|
24
25
|
SxProp
|
25
26
|
|
26
27
|
const ProgressContainer = styled.span<StyledProgressContainerProps>`
|
@@ -29,17 +30,17 @@ const ProgressContainer = styled.span<StyledProgressContainerProps>`
|
|
29
30
|
background-color: ${get('colors.border.default')};
|
30
31
|
border-radius: ${get('radii.1')};
|
31
32
|
height: ${props => sizeMap[props.barSize || 'default']};
|
32
|
-
|
33
|
+
|
33
34
|
${width}
|
34
35
|
${sx};
|
35
36
|
`
|
36
37
|
|
37
|
-
export type ProgressBarProps =
|
38
|
+
export type ProgressBarProps = {bg: string} & StyledProgressContainerProps & ProgressProp
|
38
39
|
|
39
|
-
function ProgressBar({progress, bg,
|
40
|
+
function ProgressBar({progress, bg, ...rest}: ProgressBarProps) {
|
40
41
|
return (
|
41
|
-
<ProgressContainer
|
42
|
-
<Bar progress={progress}
|
42
|
+
<ProgressContainer {...rest}>
|
43
|
+
<Bar progress={progress} sx={{bg}} />
|
43
44
|
</ProgressContainer>
|
44
45
|
)
|
45
46
|
}
|
package/src/Spinner.tsx
CHANGED
@@ -1,6 +1,5 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import styled from 'styled-components'
|
3
|
-
import {COMMON, SystemCommonProps} from './constants'
|
4
3
|
import sx, {SxProp} from './sx'
|
5
4
|
import {ComponentProps} from './utils/types'
|
6
5
|
|
@@ -40,7 +39,7 @@ function Spinner({size: sizeKey = 'medium', ...props}: SpinnerInternalProps) {
|
|
40
39
|
)
|
41
40
|
}
|
42
41
|
|
43
|
-
const StyledSpinner = styled(Spinner)<
|
42
|
+
const StyledSpinner = styled(Spinner)<SxProp>`
|
44
43
|
@keyframes rotate-keyframes {
|
45
44
|
100% {
|
46
45
|
transform: rotate(360deg);
|
@@ -49,7 +48,6 @@ const StyledSpinner = styled(Spinner)<SystemCommonProps & SxProp>`
|
|
49
48
|
|
50
49
|
animation: rotate-keyframes 1s linear infinite;
|
51
50
|
|
52
|
-
${COMMON}
|
53
51
|
${sx}
|
54
52
|
`
|
55
53
|
|
@@ -39,6 +39,6 @@ describe('Avatar', () => {
|
|
39
39
|
})
|
40
40
|
|
41
41
|
it('respects margin props', () => {
|
42
|
-
expect(render(<Avatar
|
42
|
+
expect(render(<Avatar src="primer.png" alt="" sx={{m: 2}} />)).toHaveStyleRule('margin', px(theme.space[2]))
|
43
43
|
})
|
44
44
|
})
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import Avatar from '../Avatar'
|
3
|
+
|
4
|
+
export function shouldAcceptCallWithNoProps() {
|
5
|
+
return <Avatar src="https://avatars.githubusercontent.com/primer" />
|
6
|
+
}
|
7
|
+
|
8
|
+
export function shouldNotAcceptSystemProps() {
|
9
|
+
// @ts-expect-error system props should not be accepted
|
10
|
+
return <Avatar src="https://avatars.githubusercontent.com/primer" backgroundColor="thistle" />
|
11
|
+
}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import BranchName from '../BranchName'
|
3
|
+
|
4
|
+
export function shouldAcceptCallWithNoProps() {
|
5
|
+
return <BranchName />
|
6
|
+
}
|
7
|
+
|
8
|
+
export function shouldNotAcceptSystemProps() {
|
9
|
+
// @ts-expect-error system props should not be accepted
|
10
|
+
return <BranchName backgroundColor="thistle" />
|
11
|
+
}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import Details from '../Details'
|
3
|
+
|
4
|
+
export function shouldAcceptCallWithNoProps() {
|
5
|
+
return <Details />
|
6
|
+
}
|
7
|
+
|
8
|
+
export function shouldNotAcceptSystemProps() {
|
9
|
+
// @ts-expect-error system props should not be accepted
|
10
|
+
return <Details backgroundColor="thistle" />
|
11
|
+
}
|
@@ -4,6 +4,7 @@ import {render, behavesAsComponent, checkExports} from '../utils/testing'
|
|
4
4
|
import {render as HTMLRender, cleanup} from '@testing-library/react'
|
5
5
|
import {axe, toHaveNoViolations} from 'jest-axe'
|
6
6
|
import 'babel-polyfill'
|
7
|
+
import ThemeProvider from '../ThemeProvider'
|
7
8
|
expect.extend(toHaveNoViolations)
|
8
9
|
|
9
10
|
const theme = {
|
@@ -48,44 +49,89 @@ describe('Heading', () => {
|
|
48
49
|
})
|
49
50
|
|
50
51
|
it('respects fontWeight', () => {
|
51
|
-
expect(
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
52
|
+
expect(
|
53
|
+
render(
|
54
|
+
<ThemeProvider theme={theme}>
|
55
|
+
<Heading sx={{fontWeight: 'bold'}} />
|
56
|
+
</ThemeProvider>
|
57
|
+
)
|
58
|
+
).toHaveStyleRule('font-weight', theme.fontWeights.bold)
|
59
|
+
expect(
|
60
|
+
render(
|
61
|
+
<ThemeProvider theme={theme}>
|
62
|
+
<Heading sx={{fontWeight: 'normal'}} />
|
63
|
+
</ThemeProvider>
|
64
|
+
)
|
65
|
+
).toHaveStyleRule('font-weight', theme.fontWeights.normal)
|
66
|
+
expect(
|
67
|
+
render(
|
68
|
+
<ThemeProvider theme={theme}>
|
69
|
+
<Heading sx={{fontWeight: 'semibold'}} />
|
70
|
+
</ThemeProvider>
|
71
|
+
)
|
72
|
+
).toHaveStyleRule('font-weight', theme.fontWeights.semibold)
|
73
|
+
expect(
|
74
|
+
render(
|
75
|
+
<ThemeProvider theme={theme}>
|
76
|
+
<Heading sx={{fontWeight: 'light'}} />
|
77
|
+
</ThemeProvider>
|
78
|
+
)
|
79
|
+
).toHaveStyleRule('font-weight', theme.fontWeights.light)
|
61
80
|
})
|
62
81
|
|
63
82
|
it('respects lineHeight', () => {
|
64
|
-
expect(
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
83
|
+
expect(
|
84
|
+
render(
|
85
|
+
<ThemeProvider theme={theme}>
|
86
|
+
<Heading sx={{lineHeight: 'normal'}} />
|
87
|
+
</ThemeProvider>
|
88
|
+
)
|
89
|
+
).toHaveStyleRule('line-height', String(theme.lineHeights.normal))
|
90
|
+
expect(
|
91
|
+
render(
|
92
|
+
<ThemeProvider theme={theme}>
|
93
|
+
<Heading sx={{lineHeight: 'condensed'}} />
|
94
|
+
</ThemeProvider>
|
95
|
+
)
|
96
|
+
).toHaveStyleRule('line-height', String(theme.lineHeights.condensed))
|
97
|
+
expect(
|
98
|
+
render(
|
99
|
+
<ThemeProvider theme={theme}>
|
100
|
+
<Heading sx={{lineHeight: 'condensedUltra'}} />
|
101
|
+
</ThemeProvider>
|
102
|
+
)
|
103
|
+
).toHaveStyleRule('line-height', String(theme.lineHeights.condensedUltra))
|
76
104
|
})
|
77
105
|
|
78
106
|
it('respects fontFamily="mono"', () => {
|
79
|
-
expect(
|
107
|
+
expect(
|
108
|
+
render(
|
109
|
+
<ThemeProvider theme={theme}>
|
110
|
+
<Heading sx={{fontFamily: 'mono'}} />
|
111
|
+
</ThemeProvider>
|
112
|
+
)
|
113
|
+
).toHaveStyleRule('font-family', theme.fonts.mono)
|
80
114
|
})
|
81
115
|
|
82
116
|
it('renders fontSize', () => {
|
83
117
|
for (const fontSize of theme.fontSizes) {
|
84
|
-
expect(
|
118
|
+
expect(
|
119
|
+
render(
|
120
|
+
<ThemeProvider theme={theme}>
|
121
|
+
<Heading sx={{fontSize}} />
|
122
|
+
</ThemeProvider>
|
123
|
+
)
|
124
|
+
).toHaveStyleRule('font-size', `${fontSize}`)
|
85
125
|
}
|
86
126
|
})
|
87
127
|
|
88
128
|
it('respects the "fontStyle" prop', () => {
|
89
|
-
expect(
|
129
|
+
expect(
|
130
|
+
render(
|
131
|
+
<ThemeProvider theme={theme}>
|
132
|
+
<Heading sx={{fontStyle: 'italic'}} />
|
133
|
+
</ThemeProvider>
|
134
|
+
)
|
135
|
+
).toHaveStyleRule('font-style', 'italic')
|
90
136
|
})
|
91
137
|
})
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import Heading from '../Heading'
|
3
|
+
|
4
|
+
export function shouldAcceptCallWithNoProps() {
|
5
|
+
return <Heading />
|
6
|
+
}
|
7
|
+
|
8
|
+
export function shouldNotAcceptSystemProps() {
|
9
|
+
// @ts-expect-error system props should not be accepted
|
10
|
+
return <Heading backgroundColor="thistle" />
|
11
|
+
}
|
@@ -513,6 +513,7 @@ Array [
|
|
513
513
|
.c6 rect {
|
514
514
|
fill: #ffffff;
|
515
515
|
stroke: #d0d7de;
|
516
|
+
shape-rendering: auto;
|
516
517
|
}
|
517
518
|
|
518
519
|
.c6 path {
|
@@ -1386,6 +1387,7 @@ Array [
|
|
1386
1387
|
.c6 rect {
|
1387
1388
|
fill: #ffffff;
|
1388
1389
|
stroke: #d0d7de;
|
1390
|
+
shape-rendering: auto;
|
1389
1391
|
}
|
1390
1392
|
|
1391
1393
|
.c6 path {
|
@@ -2206,6 +2208,7 @@ Array [
|
|
2206
2208
|
.c10 rect {
|
2207
2209
|
fill: #ffffff;
|
2208
2210
|
stroke: #d0d7de;
|
2211
|
+
shape-rendering: auto;
|
2209
2212
|
}
|
2210
2213
|
|
2211
2214
|
.c10 path {
|
@@ -2216,6 +2219,7 @@ Array [
|
|
2216
2219
|
.c6 rect {
|
2217
2220
|
fill: #0969da;
|
2218
2221
|
stroke: #0969da;
|
2222
|
+
shape-rendering: auto;
|
2219
2223
|
}
|
2220
2224
|
|
2221
2225
|
.c6 path {
|
package/src/drafts.ts
CHANGED