@primer/components 29.1.1-rc.0f976d3a → 30.0.0-rc.48fd5c94
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/.eslintrc.json +44 -14
- package/CHANGELOG.md +11 -1
- package/contributor-docs/CONTRIBUTING.md +2 -2
- package/contributor-docs/component-contents-api-patterns.md +5 -4
- package/dist/browser.esm.js +130 -130
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +113 -113
- package/dist/browser.umd.js.map +1 -1
- package/docs/content/BorderBox.md +1 -1
- package/docs/content/Box.md +9 -9
- package/docs/content/Breadcrumbs.md +12 -12
- package/docs/content/Buttons.md +15 -13
- package/docs/content/CircleOcticon.md +1 -1
- package/docs/content/CounterLabel.md +5 -3
- package/docs/content/Flash.md +6 -4
- package/docs/content/Flex.md +6 -6
- package/docs/content/FormGroup.md +11 -9
- package/docs/content/Grid.md +6 -6
- package/docs/content/Label.md +3 -1
- package/docs/content/LabelGroup.md +1 -1
- package/docs/content/Pagination.md +4 -4
- package/docs/content/PointerBox.md +2 -2
- package/docs/content/Portal.mdx +13 -8
- package/docs/content/Position.md +26 -23
- package/docs/content/SelectMenu.md +5 -3
- package/docs/content/SideNav.md +5 -5
- package/docs/content/StateLabel.md +8 -6
- package/docs/content/StyledOcticon.md +4 -2
- package/docs/content/Text.md +5 -3
- package/docs/content/TextInput.md +5 -3
- package/docs/content/Timeline.md +13 -13
- package/docs/content/Tooltip.md +1 -1
- package/docs/content/Truncate.md +3 -4
- package/docs/content/anchoredPosition.mdx +1 -1
- package/docs/content/getting-started.md +6 -2
- package/docs/content/linting.md +1 -1
- package/docs/content/overriding-styles.mdx +15 -13
- package/docs/content/primer-theme.md +1 -1
- package/docs/content/theming.md +5 -5
- package/docs/content/useOnEscapePress.mdx +3 -3
- package/docs/content/useOnOutsideClick.mdx +1 -1
- package/lib/Breadcrumbs.d.ts +40 -0
- package/lib/{Breadcrumb.js → Breadcrumbs.js} +31 -21
- package/lib/__tests__/{Breadcrumb.d.ts → Breadcrumbs.d.ts} +0 -0
- package/lib/__tests__/{Breadcrumb.js → Breadcrumbs.js} +7 -9
- package/lib/__tests__/{BreadcrumbItem.d.ts → BreadcrumbsItem.d.ts} +0 -0
- package/lib/__tests__/{BreadcrumbItem.js → BreadcrumbsItem.js} +6 -6
- package/lib/index.d.ts +2 -2
- package/lib/index.js +8 -2
- package/lib-esm/Breadcrumbs.d.ts +40 -0
- package/lib-esm/{Breadcrumb.js → Breadcrumbs.js} +28 -19
- package/lib-esm/__tests__/{Breadcrumb.d.ts → Breadcrumbs.d.ts} +0 -0
- package/lib-esm/__tests__/Breadcrumbs.js +29 -0
- package/lib-esm/__tests__/{BreadcrumbItem.d.ts → BreadcrumbsItem.d.ts} +0 -0
- package/lib-esm/__tests__/{BreadcrumbItem.js → BreadcrumbsItem.js} +7 -7
- package/lib-esm/index.d.ts +2 -2
- package/lib-esm/index.js +1 -1
- package/migrating.md +4 -4
- package/package-lock.json +561 -280
- package/package.json +6 -5
- package/src/{Breadcrumb.tsx → Breadcrumbs.tsx} +27 -13
- package/src/__tests__/Breadcrumbs.tsx +28 -0
- package/src/__tests__/{BreadcrumbItem.tsx → BreadcrumbsItem.tsx} +7 -7
- package/src/__tests__/__snapshots__/{Breadcrumb.tsx.snap → Breadcrumbs.tsx.snap} +3 -3
- package/src/__tests__/__snapshots__/{BreadcrumbItem.tsx.snap → BreadcrumbsItem.tsx.snap} +3 -3
- package/src/index.ts +2 -2
- package/stats.html +1 -1
- package/lib/Breadcrumb.d.ts +0 -23
- package/lib-esm/Breadcrumb.d.ts +0 -23
- package/lib-esm/__tests__/Breadcrumb.js +0 -31
- package/src/__tests__/Breadcrumb.tsx +0 -31
@@ -18,7 +18,7 @@ Use [Box](/Box) instead.
|
|
18
18
|
**After**
|
19
19
|
|
20
20
|
```jsx
|
21
|
-
<Box borderWidth="1px" borderStyle="solid" borderColor="border.
|
21
|
+
<Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2}>
|
22
22
|
Item 1
|
23
23
|
</Box>
|
24
24
|
```
|
package/docs/content/Box.md
CHANGED
@@ -8,7 +8,7 @@ import {Props} from '../src/props'
|
|
8
8
|
import {Box} from '@primer/components'
|
9
9
|
|
10
10
|
```jsx live
|
11
|
-
<Box color="
|
11
|
+
<Box color="fg.muted" bg="canvas.subtle" p={3}>
|
12
12
|
Hello
|
13
13
|
</Box>
|
14
14
|
```
|
@@ -24,7 +24,7 @@ Box also accepts all [styled system props](https://styled-system.com/table/).
|
|
24
24
|
### Border on all sides
|
25
25
|
|
26
26
|
```jsx live
|
27
|
-
<Box borderColor="border.
|
27
|
+
<Box borderColor="border.default" borderWidth={1} borderStyle="solid" p={3}>
|
28
28
|
Hello
|
29
29
|
</Box>
|
30
30
|
```
|
@@ -32,7 +32,7 @@ Box also accepts all [styled system props](https://styled-system.com/table/).
|
|
32
32
|
### Border on one side
|
33
33
|
|
34
34
|
```jsx live
|
35
|
-
<Box borderColor="border.
|
35
|
+
<Box borderColor="border.default" borderBottomWidth={1} borderBottomStyle="solid" pb={3}>
|
36
36
|
Hello
|
37
37
|
</Box>
|
38
38
|
```
|
@@ -43,13 +43,13 @@ Use Box to create [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/C
|
|
43
43
|
|
44
44
|
```jsx live
|
45
45
|
<Box display="flex">
|
46
|
-
<Box p={3} borderColor="border.
|
46
|
+
<Box p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">
|
47
47
|
1
|
48
48
|
</Box>
|
49
|
-
<Box flexGrow={1} p={3} borderColor="border.
|
49
|
+
<Box flexGrow={1} p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">
|
50
50
|
2
|
51
51
|
</Box>
|
52
|
-
<Box p={3} borderColor="border.
|
52
|
+
<Box p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">
|
53
53
|
3
|
54
54
|
</Box>
|
55
55
|
</Box>
|
@@ -61,13 +61,13 @@ Use Box to create [grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_
|
|
61
61
|
|
62
62
|
```jsx live
|
63
63
|
<Box display="grid" gridTemplateColumns="1fr 1fr" gridGap={3}>
|
64
|
-
<Box p={3} borderColor="border.
|
64
|
+
<Box p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">
|
65
65
|
1
|
66
66
|
</Box>
|
67
|
-
<Box p={3} borderColor="border.
|
67
|
+
<Box p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">
|
68
68
|
2
|
69
69
|
</Box>
|
70
|
-
<Box p={3} borderColor="border.
|
70
|
+
<Box p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">
|
71
71
|
3
|
72
72
|
</Box>
|
73
73
|
</Box>
|
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
title: Breadcrumbs
|
3
3
|
status: Alpha
|
4
|
-
source: https://github.com/primer/react/blob/main/src/
|
4
|
+
source: https://github.com/primer/react/blob/main/src/Breadcrumbs.tsx
|
5
5
|
---
|
6
6
|
|
7
7
|
Breadcrumbs are used to show taxonomical context on pages that are many levels deep in a site’s hierarchy. Breadcrumbs show and link to parent, grandparent, and sometimes great-grandparent pages. Breadcrumbs are most appropriate on pages that:
|
@@ -10,7 +10,7 @@ Breadcrumbs are used to show taxonomical context on pages that are many levels d
|
|
10
10
|
- Do not have a section-level navigation
|
11
11
|
- May need the ability to quickly go back to the previous (parent) page
|
12
12
|
|
13
|
-
To use
|
13
|
+
To use Breadcrumbs with [react-router](https://github.com/ReactTraining/react-router) or
|
14
14
|
[react-router-dom](https://www.npmjs.com/package/react-router-dom), pass
|
15
15
|
`as={NavLink}` and omit the `selected` prop.
|
16
16
|
This ensures that the NavLink gets `activeClassName='selected'`
|
@@ -18,13 +18,13 @@ This ensures that the NavLink gets `activeClassName='selected'`
|
|
18
18
|
## Default example
|
19
19
|
|
20
20
|
```jsx live
|
21
|
-
<
|
22
|
-
<
|
23
|
-
<
|
24
|
-
<
|
21
|
+
<Breadcrumbs>
|
22
|
+
<Breadcrumbs.Item href="/">Home</Breadcrumbs.Item>
|
23
|
+
<Breadcrumbs.Item href="/about">About</Breadcrumbs.Item>
|
24
|
+
<Breadcrumbs.Item href="/about/team" selected>
|
25
25
|
Team
|
26
|
-
</
|
27
|
-
</
|
26
|
+
</Breadcrumbs.Item>
|
27
|
+
</Breadcrumbs>
|
28
28
|
```
|
29
29
|
|
30
30
|
## System props
|
@@ -35,15 +35,15 @@ System props are deprecated in all components except [Box](/Box). Please use the
|
|
35
35
|
|
36
36
|
</Note>
|
37
37
|
|
38
|
-
|
38
|
+
Breadcrumbs and Breadcrumbs.Item components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
|
39
39
|
|
40
40
|
## Component props
|
41
41
|
|
42
|
-
###
|
42
|
+
### Breadcrumbs
|
43
43
|
|
44
|
-
The `
|
44
|
+
The `Breadcrumbs` component does not receive any additional props besides `COMMON` system props.
|
45
45
|
|
46
|
-
###
|
46
|
+
### Breadcrumbs.Item
|
47
47
|
|
48
48
|
| Prop name | Type | Default | Description |
|
49
49
|
| :-------- | :------ | :-----: | :----------------------------------------------- |
|
package/docs/content/Buttons.md
CHANGED
@@ -11,20 +11,22 @@ To create a button group, wrap `Button` elements in the `ButtonGroup` element. `
|
|
11
11
|
## Default examples
|
12
12
|
|
13
13
|
```jsx live
|
14
|
-
|
15
|
-
<ButtonDanger>Button Danger</ButtonDanger>
|
16
|
-
<ButtonOutline>Button Outline</ButtonOutline>
|
17
|
-
<ButtonPrimary>Button Primary</ButtonPrimary>
|
18
|
-
<ButtonInvisible>Button Invisible</ButtonInvisible>
|
19
|
-
<ButtonClose onClick={() => window.alert('button clicked')}/>
|
20
|
-
|
21
|
-
<ButtonGroup display='block' my={2}>
|
14
|
+
<>
|
22
15
|
<Button>Button</Button>
|
23
|
-
<
|
24
|
-
<
|
25
|
-
</
|
26
|
-
|
27
|
-
<
|
16
|
+
<ButtonDanger>Button Danger</ButtonDanger>
|
17
|
+
<ButtonOutline>Button Outline</ButtonOutline>
|
18
|
+
<ButtonPrimary>Button Primary</ButtonPrimary>
|
19
|
+
<ButtonInvisible>Button Invisible</ButtonInvisible>
|
20
|
+
<ButtonClose onClick={() => window.alert('button clicked')}/>
|
21
|
+
|
22
|
+
<ButtonGroup display='block' my={2}>
|
23
|
+
<Button>Button</Button>
|
24
|
+
<Button>Button</Button>
|
25
|
+
<Button>Button</Button>
|
26
|
+
</ButtonGroup>
|
27
|
+
|
28
|
+
<ButtonTableList>Button Table List </ButtonTableList>
|
29
|
+
</>
|
28
30
|
```
|
29
31
|
|
30
32
|
## System props
|
@@ -7,7 +7,7 @@ CircleOcticon renders any Octicon with a circle background. CircleOcticons are m
|
|
7
7
|
## Default example
|
8
8
|
|
9
9
|
```jsx live
|
10
|
-
<CircleOcticon icon={CheckIcon} size={32} sx={{bg:
|
10
|
+
<CircleOcticon icon={CheckIcon} size={32} sx={{bg: "success.fg", color: "fg.onEmphasis"}} />
|
11
11
|
```
|
12
12
|
|
13
13
|
## Component props
|
@@ -8,9 +8,11 @@ Use the CounterLabel component to add a count to navigational elements and butto
|
|
8
8
|
## Default example
|
9
9
|
|
10
10
|
```jsx live
|
11
|
-
|
12
|
-
<CounterLabel
|
13
|
-
<CounterLabel scheme="
|
11
|
+
<>
|
12
|
+
<CounterLabel>12</CounterLabel>
|
13
|
+
<CounterLabel scheme="primary">13</CounterLabel>
|
14
|
+
<CounterLabel scheme="secondary">13</CounterLabel>
|
15
|
+
</>
|
14
16
|
```
|
15
17
|
|
16
18
|
## System props
|
package/docs/content/Flash.md
CHANGED
@@ -7,10 +7,12 @@ The Flash component informs users of successful or pending actions.
|
|
7
7
|
## Default example
|
8
8
|
|
9
9
|
```jsx live
|
10
|
-
|
11
|
-
<Flash
|
12
|
-
<Flash variant="
|
13
|
-
<Flash variant="
|
10
|
+
<>
|
11
|
+
<Flash>Default Flash</Flash>
|
12
|
+
<Flash variant="success">Success Flash</Flash>
|
13
|
+
<Flash variant="warning">Warning Flash</Flash>
|
14
|
+
<Flash variant="danger">Danger Flash</Flash>
|
15
|
+
</>
|
14
16
|
```
|
15
17
|
|
16
18
|
## With an icon
|
package/docs/content/Flex.md
CHANGED
@@ -13,7 +13,7 @@ Use [Box](/Box) instead.
|
|
13
13
|
|
14
14
|
```jsx
|
15
15
|
<Flex flexWrap="nowrap">
|
16
|
-
<Box p={3} color="
|
16
|
+
<Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
|
17
17
|
Item 1
|
18
18
|
</Box>
|
19
19
|
</Flex>
|
@@ -23,7 +23,7 @@ Use [Box](/Box) instead.
|
|
23
23
|
|
24
24
|
```jsx
|
25
25
|
<Box display="flex" flexWrap="nowrap">
|
26
|
-
<Box p={3} color="
|
26
|
+
<Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
|
27
27
|
Item 1
|
28
28
|
</Box>
|
29
29
|
</Box>
|
@@ -32,15 +32,15 @@ Use [Box](/Box) instead.
|
|
32
32
|
## Default example
|
33
33
|
|
34
34
|
```jsx live
|
35
|
-
<Box borderWidth="1px" borderStyle="solid" borderColor="border.
|
35
|
+
<Box borderWidth="1px" borderStyle="solid" borderColor="border.default" width={300} height={300} borderRadius={0}>
|
36
36
|
<Flex flexWrap="nowrap">
|
37
|
-
<Box p={3} color="
|
37
|
+
<Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
|
38
38
|
Item 1
|
39
39
|
</Box>
|
40
|
-
<Box p={3} color="
|
40
|
+
<Box p={3} color="fg.onEmphasis" bg="attention.emphasis">
|
41
41
|
Item 2
|
42
42
|
</Box>
|
43
|
-
<Box p={3} color="
|
43
|
+
<Box p={3} color="fg.onEmphasis" bg="danger.emphasis">
|
44
44
|
Item 3
|
45
45
|
</Box>
|
46
46
|
</Flex>
|
@@ -7,15 +7,17 @@ Adds styles for multiple form elements used together.
|
|
7
7
|
## Default example
|
8
8
|
|
9
9
|
```jsx live
|
10
|
-
|
11
|
-
<FormGroup
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
<FormGroup
|
17
|
-
|
18
|
-
|
10
|
+
<>
|
11
|
+
<FormGroup>
|
12
|
+
<FormGroup.Label htmlFor="example-text">Example text</FormGroup.Label>
|
13
|
+
<TextInput id="example-text" value="Example Value" />
|
14
|
+
</FormGroup>
|
15
|
+
|
16
|
+
<FormGroup>
|
17
|
+
<FormGroup.Label htmlFor="example-text-b">Example text</FormGroup.Label>
|
18
|
+
<TextInput id="example-text-b" value="Example Value" />
|
19
|
+
</FormGroup>
|
20
|
+
</>
|
19
21
|
```
|
20
22
|
|
21
23
|
## System props
|
package/docs/content/Grid.md
CHANGED
@@ -13,10 +13,10 @@ Use [Box](/Box) instead.
|
|
13
13
|
|
14
14
|
```jsx
|
15
15
|
<Grid gridTemplateColumns="repeat(2, auto)" gridGap={3}>
|
16
|
-
<Box p={3} color="
|
16
|
+
<Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
|
17
17
|
1
|
18
18
|
</Box>
|
19
|
-
<Box p={3} color="
|
19
|
+
<Box p={3} color="fg.onEmphasis" bg="attention.emphasis">
|
20
20
|
2
|
21
21
|
</Box>
|
22
22
|
</Grid>
|
@@ -26,10 +26,10 @@ Use [Box](/Box) instead.
|
|
26
26
|
|
27
27
|
```jsx
|
28
28
|
<Box display="grid" gridTemplateColumns="repeat(2, auto)" gridGap={3}>
|
29
|
-
<Box p={3} color="
|
29
|
+
<Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
|
30
30
|
1
|
31
31
|
</Box>
|
32
|
-
<Box p={3} color="
|
32
|
+
<Box p={3} color="fg.onEmphasis" bg="attention.emphasis">
|
33
33
|
2
|
34
34
|
</Box>
|
35
35
|
</Box>
|
@@ -39,10 +39,10 @@ Use [Box](/Box) instead.
|
|
39
39
|
|
40
40
|
```jsx live
|
41
41
|
<Grid gridTemplateColumns="repeat(2, auto)" gridGap={3}>
|
42
|
-
<Box p={3} color="
|
42
|
+
<Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
|
43
43
|
1
|
44
44
|
</Box>
|
45
|
-
<Box p={3} color="
|
45
|
+
<Box p={3} color="fg.onEmphasis" bg="attention.emphasis">
|
46
46
|
2
|
47
47
|
</Box>
|
48
48
|
</Grid>
|
package/docs/content/Label.md
CHANGED
@@ -7,7 +7,8 @@ The Label component is used to add contextual metadata to a design. Visually it
|
|
7
7
|
## Default example
|
8
8
|
|
9
9
|
```jsx live
|
10
|
-
|
10
|
+
<>
|
11
|
+
<Label variant="small" outline sx={{borderColor: "danger.emphasis", mr: 2, color: "danger.fg"}}>small</Label>
|
11
12
|
<Label variant="medium" sx={{mr: 2}}>medium (default)</Label>
|
12
13
|
<Label variant="large" sx={{mr: 2}}>large</Label>
|
13
14
|
<Label variant="xl">xl label</Label>
|
@@ -18,6 +19,7 @@ The Label component is used to add contextual metadata to a design. Visually it
|
|
18
19
|
<Label variant="medium" sx={{bg:"#1C90FA", m: 1}}>css</Label>
|
19
20
|
<Label variant="medium" sx={{bg:"#FFF06C", color:"#24292E", m: 1}}>documentation</Label>
|
20
21
|
<Label variant="medium" sx={{bg: "#656BFE", m: 1}}>primer</Label>
|
22
|
+
</>
|
21
23
|
```
|
22
24
|
|
23
25
|
## System props
|
@@ -9,7 +9,7 @@ The LabelGroup component is used to add commonly used margins and wrapping for g
|
|
9
9
|
```jsx live
|
10
10
|
<LabelGroup>
|
11
11
|
<Label>Default label</Label>
|
12
|
-
<Label sx={{color:
|
12
|
+
<Label sx={{color: "fg.onEmphasis", bg: "danger.emphasis"}}>
|
13
13
|
Label with background indicating a closed PR state
|
14
14
|
</Label>
|
15
15
|
<Label outline>Default outline label</Label>
|
@@ -32,7 +32,7 @@ By default, clicking a link in the pagination component will cause the browser t
|
|
32
32
|
}
|
33
33
|
|
34
34
|
return (
|
35
|
-
<Box borderWidth="1px" borderStyle="solid" borderColor="border.
|
35
|
+
<Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} p={2}>
|
36
36
|
<Box>
|
37
37
|
Current page: {page} / {totalPages}
|
38
38
|
</Box>
|
@@ -63,7 +63,7 @@ type HrefBuilder = (page: number) => string
|
|
63
63
|
}
|
64
64
|
|
65
65
|
return (
|
66
|
-
<Box borderWidth="1px" borderStyle="solid" borderColor="border.
|
66
|
+
<Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} p={2}>
|
67
67
|
<Box>The last URL clicked was: {lastUrl}</Box>
|
68
68
|
<Pagination pageCount={15} currentPage={2} onPageChange={onPageChange} hrefBuilder={hrefBuilder} />
|
69
69
|
</Box>
|
@@ -116,7 +116,7 @@ To hide all the page numbers and create a simple pagination container with just
|
|
116
116
|
}
|
117
117
|
|
118
118
|
return (
|
119
|
-
<Box borderWidth="1px" borderStyle="solid" borderColor="border.
|
119
|
+
<Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} p={2}>
|
120
120
|
<Box>
|
121
121
|
Current page: {page} / {totalPages}
|
122
122
|
</Box>
|
@@ -154,7 +154,7 @@ Pagination components get `COMMON` system props. Read our [System Props](/system
|
|
154
154
|
The following snippet shows the properties in the theme that control the styling of the pagination component:
|
155
155
|
|
156
156
|
```javascript
|
157
|
-
{
|
157
|
+
export default {
|
158
158
|
// ... rest of theme ...
|
159
159
|
pagination: {
|
160
160
|
borderRadius,
|
@@ -7,7 +7,7 @@ PointerBox is a [BorderBox](./BorderBox) component with a caret added to it.
|
|
7
7
|
## Default example
|
8
8
|
|
9
9
|
```jsx live
|
10
|
-
<PointerBox m={4} p={2} minHeight={100} bg="
|
10
|
+
<PointerBox m={4} p={2} minHeight={100} bg="success.subtle" borderColor="success.emphasis">
|
11
11
|
PointerBox
|
12
12
|
</PointerBox>
|
13
13
|
```
|
@@ -23,7 +23,7 @@ function PointerBoxDemo(props) {
|
|
23
23
|
</Heading>
|
24
24
|
<CaretSelector current={pos} onChange={setPos} />
|
25
25
|
<Box position="relative" pt={4}>
|
26
|
-
<PointerBox m={4} p={2} minHeight={100} bg="
|
26
|
+
<PointerBox m={4} p={2} minHeight={100} bg="success.subtle" borderColor="success.emphasis" caret={pos}>
|
27
27
|
{' '}
|
28
28
|
Content{' '}
|
29
29
|
</PointerBox>
|
package/docs/content/Portal.mdx
CHANGED
@@ -48,17 +48,22 @@ registerPortalRoot(document.querySelector(".my-portal-root")!)
|
|
48
48
|
|
49
49
|
```jsx
|
50
50
|
import { Portal, registerPortalRoot } from "@primer/components"
|
51
|
+
|
51
52
|
registerPortalRoot(document.querySelector(".scrolling-canvas-root")!, "scrolling-canvas")
|
53
|
+
|
52
54
|
// ...
|
53
|
-
|
54
|
-
|
55
|
-
<Portal>
|
56
|
-
<div>
|
57
|
-
|
58
|
-
|
59
|
-
|
55
|
+
|
56
|
+
export default () => (
|
57
|
+
<Portal containerName="scrolling-canvas">
|
58
|
+
<div>This div will be rendered into the element registered above.</div>
|
59
|
+
<Portal>
|
60
|
+
<div>
|
61
|
+
This div will be rendered into the default
|
62
|
+
portal root created at document.body
|
63
|
+
</div>
|
64
|
+
</Portal>
|
60
65
|
</Portal>
|
61
|
-
|
66
|
+
)
|
62
67
|
```
|
63
68
|
|
64
69
|
## System props
|
package/docs/content/Position.md
CHANGED
@@ -12,21 +12,25 @@ Use [Box](/Box) instead.
|
|
12
12
|
**Before**
|
13
13
|
|
14
14
|
```jsx
|
15
|
-
|
16
|
-
<
|
17
|
-
<
|
18
|
-
<
|
19
|
-
<
|
15
|
+
<>
|
16
|
+
<Position position="absolute">...</Position>
|
17
|
+
<Absolute>...</Absolute>
|
18
|
+
<Relative>...</Relative>
|
19
|
+
<Fixed>...</Fixed>
|
20
|
+
<Sticky>...</Sticky>
|
21
|
+
</>
|
20
22
|
```
|
21
23
|
|
22
24
|
**After**
|
23
25
|
|
24
26
|
```jsx
|
25
|
-
|
26
|
-
<Box position="absolute">...</Box>
|
27
|
-
<Box position="
|
28
|
-
<Box position="
|
29
|
-
<Box position="
|
27
|
+
<>
|
28
|
+
<Box position="absolute">...</Box>
|
29
|
+
<Box position="absolute">...</Box>
|
30
|
+
<Box position="relative">...</Box>
|
31
|
+
<Box position="fixed">...</Box>
|
32
|
+
<Box position="sticky">...</Box>
|
33
|
+
</>
|
30
34
|
```
|
31
35
|
|
32
36
|
## Default examples
|
@@ -35,29 +39,29 @@ Use [Box](/Box) instead.
|
|
35
39
|
<Box p={2} mb={200}>
|
36
40
|
<Heading mb={2}>Relative + Absolute</Heading>
|
37
41
|
<Relative size={128} mx={128} my={6}>
|
38
|
-
<Box borderWidth="1px" borderStyle="solid" borderColor="border.
|
39
|
-
<Absolute left="100%" top={0} color="
|
42
|
+
<Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} size="100%">
|
43
|
+
<Absolute left="100%" top={0} color="fg.onEmphasis" bg="success.emphasis" p={1}>
|
40
44
|
rt
|
41
45
|
</Absolute>
|
42
|
-
<Absolute right="100%" top={0} color="
|
46
|
+
<Absolute right="100%" top={0} color="fg.onEmphasis" bg="success.emphasis" p={1}>
|
43
47
|
lt
|
44
48
|
</Absolute>
|
45
|
-
<Absolute left="100%" bottom={0} color="
|
49
|
+
<Absolute left="100%" bottom={0} color="fg.onEmphasis" bg="success.emphasis" p={1}>
|
46
50
|
rb
|
47
51
|
</Absolute>
|
48
|
-
<Absolute right="100%" bottom={0} color="
|
52
|
+
<Absolute right="100%" bottom={0} color="fg.onEmphasis" bg="success.emphasis" p={1}>
|
49
53
|
lb
|
50
54
|
</Absolute>
|
51
|
-
<Absolute left={0} top="100%" color="
|
55
|
+
<Absolute left={0} top="100%" color="fg.onEmphasis" bg="success.emphasis" p={1}>
|
52
56
|
bl
|
53
57
|
</Absolute>
|
54
|
-
<Absolute right={0} top="100%" color="
|
58
|
+
<Absolute right={0} top="100%" color="fg.onEmphasis" bg="success.emphasis" p={1}>
|
55
59
|
br
|
56
60
|
</Absolute>
|
57
|
-
<Absolute left={0} bottom="100%" color="
|
61
|
+
<Absolute left={0} bottom="100%" color="fg.onEmphasis" bg="success.emphasis" p={1}>
|
58
62
|
tl
|
59
63
|
</Absolute>
|
60
|
-
<Absolute right={0} bottom="100%" color="
|
64
|
+
<Absolute right={0} bottom="100%" color="fg.onEmphasis" bg="success.emphasis" p={1}>
|
61
65
|
tr
|
62
66
|
</Absolute>
|
63
67
|
</Box>
|
@@ -68,13 +72,12 @@ Use [Box](/Box) instead.
|
|
68
72
|
<Box
|
69
73
|
borderWidth="1px"
|
70
74
|
borderStyle="solid"
|
71
|
-
borderColor="
|
75
|
+
borderColor="success.emphasis"
|
72
76
|
borderRadius={2}
|
73
77
|
border={1}
|
74
|
-
borderColor="border.success"
|
75
78
|
height={500}
|
76
79
|
>
|
77
|
-
<Sticky top={0} bg="
|
80
|
+
<Sticky top={0} bg="success.subtle" p={6}>
|
78
81
|
I'm sticky!
|
79
82
|
</Sticky>
|
80
83
|
</Box>
|
@@ -82,7 +85,7 @@ Use [Box](/Box) instead.
|
|
82
85
|
<Heading my={2}>Fixed</Heading>
|
83
86
|
<p>(see the bottom right of the screen)</p>
|
84
87
|
|
85
|
-
<Fixed bottom={0} right={0} color="
|
88
|
+
<Fixed bottom={0} right={0} color="fg.onEmphasis" bg="danger.emphasis" p={2}>
|
86
89
|
I'm fixed to the bottom right.
|
87
90
|
</Fixed>
|
88
91
|
</Box>
|
@@ -84,7 +84,7 @@ Used to wrap the content in a `SelectMenu`.
|
|
84
84
|
```jsx
|
85
85
|
<SelectMenu.Modal>
|
86
86
|
{/* all menu content is wrapped in the modal*/}
|
87
|
-
</SelectMenu.
|
87
|
+
</SelectMenu.Modal>
|
88
88
|
```
|
89
89
|
|
90
90
|
### Right-aligned modal
|
@@ -241,8 +241,10 @@ Used for each individual tab inside of a `SelectMenu.Tabs`. Be sure to set the `
|
|
241
241
|
The `onClick` prop is optional and can be used for any events or data fetching you might need to trigger on tab clicks.
|
242
242
|
|
243
243
|
```jsx
|
244
|
-
|
245
|
-
<SelectMenu.Tab index={
|
244
|
+
<>
|
245
|
+
<SelectMenu.Tab index={0} tabName="Repository"/>
|
246
|
+
<SelectMenu.Tab index={1} tabName="Organization"/>
|
247
|
+
</>
|
246
248
|
```
|
247
249
|
|
248
250
|
### System Props
|
package/docs/content/SideNav.md
CHANGED
@@ -44,7 +44,7 @@ Add the `variant='full'` prop to a `SideNav.Link` to spread child elements acros
|
|
44
44
|
</SideNav.Link>
|
45
45
|
<SideNav.Link href="#url" variant="full" selected>
|
46
46
|
<Text>With a status icon</Text>
|
47
|
-
<StyledOcticon sx={{mr: 2}} size={16} icon={DotIcon} color="
|
47
|
+
<StyledOcticon sx={{mr: 2}} size={16} icon={DotIcon} color="success.fg" />
|
48
48
|
</SideNav.Link>
|
49
49
|
<SideNav.Link href="#url" variant="full">
|
50
50
|
<Text>With a label</Text>
|
@@ -71,22 +71,22 @@ Add the `variant="lightweight"` prop to `SideNav` to render an alternative, more
|
|
71
71
|
<Box
|
72
72
|
borderWidth="1px"
|
73
73
|
borderStyle="solid"
|
74
|
-
borderColor="border.
|
74
|
+
borderColor="border.default"
|
75
75
|
borderRadius={2}
|
76
76
|
p={3}
|
77
|
-
backgroundColor="
|
77
|
+
backgroundColor="canvas.subtle"
|
78
78
|
maxWidth={360}
|
79
79
|
>
|
80
80
|
<Box
|
81
81
|
borderStyle="solid"
|
82
|
-
borderColor="border.
|
82
|
+
borderColor="border.default"
|
83
83
|
borderWidth={0}
|
84
84
|
borderBottomWidth={1}
|
85
85
|
borderRadius={0}
|
86
86
|
mb={2}
|
87
87
|
pb={1}
|
88
88
|
>
|
89
|
-
<Heading as="h5" fontSize={1} color="
|
89
|
+
<Heading as="h5" fontSize={1} color="fg.muted">
|
90
90
|
Menu
|
91
91
|
</Heading>
|
92
92
|
</Box>
|
@@ -7,12 +7,14 @@ Use StateLabel components to show the status of an issue or pull request.
|
|
7
7
|
## Default example
|
8
8
|
|
9
9
|
```jsx live
|
10
|
-
|
11
|
-
<StateLabel status="
|
12
|
-
<StateLabel status="
|
13
|
-
<StateLabel status="
|
14
|
-
<StateLabel status="
|
15
|
-
<StateLabel status="
|
10
|
+
<>
|
11
|
+
<StateLabel status="issueOpened">Open</StateLabel>
|
12
|
+
<StateLabel status="issueClosed">Closed</StateLabel>
|
13
|
+
<StateLabel status="pullOpened">Open</StateLabel>
|
14
|
+
<StateLabel status="pullClosed">Closed</StateLabel>
|
15
|
+
<StateLabel status="pullMerged">Merged</StateLabel>
|
16
|
+
<StateLabel status="draft">Draft</StateLabel>
|
17
|
+
</>
|
16
18
|
```
|
17
19
|
|
18
20
|
## System props
|
@@ -8,8 +8,10 @@ StyledOcticon renders an [Octicon](https://octicons.github.com) with common syst
|
|
8
8
|
## Default example
|
9
9
|
|
10
10
|
```jsx live
|
11
|
-
|
12
|
-
<StyledOcticon icon={
|
11
|
+
<>
|
12
|
+
<StyledOcticon icon={CheckIcon} size={32} color="success.fg" mr={2} />
|
13
|
+
<StyledOcticon icon={XIcon} size={32} color="danger.fg" />
|
14
|
+
</>
|
13
15
|
```
|
14
16
|
|
15
17
|
## System props
|
package/docs/content/Text.md
CHANGED
@@ -7,9 +7,11 @@ The Text component is a wrapper component that will apply typography styles to t
|
|
7
7
|
## Default example
|
8
8
|
|
9
9
|
```jsx live
|
10
|
-
|
11
|
-
<Text as='p'
|
12
|
-
<Text as='p' color="
|
10
|
+
<>
|
11
|
+
<Text as='p' fontWeight="bold">bold</Text>
|
12
|
+
<Text as='p' color="danger.fg">danger color</Text>
|
13
|
+
<Text as='p' color="fg.onEmphasis" bg="neutral.emphasis" p={2}>inverse colors</Text>
|
14
|
+
</>
|
13
15
|
```
|
14
16
|
|
15
17
|
## System props
|