@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.
Files changed (71) hide show
  1. package/.eslintrc.json +44 -14
  2. package/CHANGELOG.md +11 -1
  3. package/contributor-docs/CONTRIBUTING.md +2 -2
  4. package/contributor-docs/component-contents-api-patterns.md +5 -4
  5. package/dist/browser.esm.js +130 -130
  6. package/dist/browser.esm.js.map +1 -1
  7. package/dist/browser.umd.js +113 -113
  8. package/dist/browser.umd.js.map +1 -1
  9. package/docs/content/BorderBox.md +1 -1
  10. package/docs/content/Box.md +9 -9
  11. package/docs/content/Breadcrumbs.md +12 -12
  12. package/docs/content/Buttons.md +15 -13
  13. package/docs/content/CircleOcticon.md +1 -1
  14. package/docs/content/CounterLabel.md +5 -3
  15. package/docs/content/Flash.md +6 -4
  16. package/docs/content/Flex.md +6 -6
  17. package/docs/content/FormGroup.md +11 -9
  18. package/docs/content/Grid.md +6 -6
  19. package/docs/content/Label.md +3 -1
  20. package/docs/content/LabelGroup.md +1 -1
  21. package/docs/content/Pagination.md +4 -4
  22. package/docs/content/PointerBox.md +2 -2
  23. package/docs/content/Portal.mdx +13 -8
  24. package/docs/content/Position.md +26 -23
  25. package/docs/content/SelectMenu.md +5 -3
  26. package/docs/content/SideNav.md +5 -5
  27. package/docs/content/StateLabel.md +8 -6
  28. package/docs/content/StyledOcticon.md +4 -2
  29. package/docs/content/Text.md +5 -3
  30. package/docs/content/TextInput.md +5 -3
  31. package/docs/content/Timeline.md +13 -13
  32. package/docs/content/Tooltip.md +1 -1
  33. package/docs/content/Truncate.md +3 -4
  34. package/docs/content/anchoredPosition.mdx +1 -1
  35. package/docs/content/getting-started.md +6 -2
  36. package/docs/content/linting.md +1 -1
  37. package/docs/content/overriding-styles.mdx +15 -13
  38. package/docs/content/primer-theme.md +1 -1
  39. package/docs/content/theming.md +5 -5
  40. package/docs/content/useOnEscapePress.mdx +3 -3
  41. package/docs/content/useOnOutsideClick.mdx +1 -1
  42. package/lib/Breadcrumbs.d.ts +40 -0
  43. package/lib/{Breadcrumb.js → Breadcrumbs.js} +31 -21
  44. package/lib/__tests__/{Breadcrumb.d.ts → Breadcrumbs.d.ts} +0 -0
  45. package/lib/__tests__/{Breadcrumb.js → Breadcrumbs.js} +7 -9
  46. package/lib/__tests__/{BreadcrumbItem.d.ts → BreadcrumbsItem.d.ts} +0 -0
  47. package/lib/__tests__/{BreadcrumbItem.js → BreadcrumbsItem.js} +6 -6
  48. package/lib/index.d.ts +2 -2
  49. package/lib/index.js +8 -2
  50. package/lib-esm/Breadcrumbs.d.ts +40 -0
  51. package/lib-esm/{Breadcrumb.js → Breadcrumbs.js} +28 -19
  52. package/lib-esm/__tests__/{Breadcrumb.d.ts → Breadcrumbs.d.ts} +0 -0
  53. package/lib-esm/__tests__/Breadcrumbs.js +29 -0
  54. package/lib-esm/__tests__/{BreadcrumbItem.d.ts → BreadcrumbsItem.d.ts} +0 -0
  55. package/lib-esm/__tests__/{BreadcrumbItem.js → BreadcrumbsItem.js} +7 -7
  56. package/lib-esm/index.d.ts +2 -2
  57. package/lib-esm/index.js +1 -1
  58. package/migrating.md +4 -4
  59. package/package-lock.json +561 -280
  60. package/package.json +6 -5
  61. package/src/{Breadcrumb.tsx → Breadcrumbs.tsx} +27 -13
  62. package/src/__tests__/Breadcrumbs.tsx +28 -0
  63. package/src/__tests__/{BreadcrumbItem.tsx → BreadcrumbsItem.tsx} +7 -7
  64. package/src/__tests__/__snapshots__/{Breadcrumb.tsx.snap → Breadcrumbs.tsx.snap} +3 -3
  65. package/src/__tests__/__snapshots__/{BreadcrumbItem.tsx.snap → BreadcrumbsItem.tsx.snap} +3 -3
  66. package/src/index.ts +2 -2
  67. package/stats.html +1 -1
  68. package/lib/Breadcrumb.d.ts +0 -23
  69. package/lib-esm/Breadcrumb.d.ts +0 -23
  70. package/lib-esm/__tests__/Breadcrumb.js +0 -31
  71. 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.primary" borderRadius={2}>
21
+ <Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2}>
22
22
  Item 1
23
23
  </Box>
24
24
  ```
@@ -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="text.secondary" bg="bg.tertiary" p={3}>
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.primary" borderWidth={1} borderStyle="solid" p={3}>
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.primary" borderBottomWidth={1} borderBottomStyle="solid" pb={3}>
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.primary" borderWidth={1} borderStyle="solid">
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.primary" borderWidth={1} borderStyle="solid">
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.primary" borderWidth={1} borderStyle="solid">
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.primary" borderWidth={1} borderStyle="solid">
64
+ <Box p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">
65
65
  1
66
66
  </Box>
67
- <Box p={3} borderColor="border.primary" borderWidth={1} borderStyle="solid">
67
+ <Box p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">
68
68
  2
69
69
  </Box>
70
- <Box p={3} borderColor="border.primary" borderWidth={1} borderStyle="solid">
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/Breadcrumb.tsx
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 Breadcrumb with [react-router](https://github.com/ReactTraining/react-router) or
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
- <Breadcrumb>
22
- <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
23
- <Breadcrumb.Item href="/about">About</Breadcrumb.Item>
24
- <Breadcrumb.Item href="/about/team" selected>
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
- </Breadcrumb.Item>
27
- </Breadcrumb>
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
- Breadcrumb and Breadcrumb.Item components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
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
- ### Breadcrumb
42
+ ### Breadcrumbs
43
43
 
44
- The `Breadcrumb` component does not receive any additional props besides `COMMON` system props.
44
+ The `Breadcrumbs` component does not receive any additional props besides `COMMON` system props.
45
45
 
46
- ### Breadcrumb.Item
46
+ ### Breadcrumbs.Item
47
47
 
48
48
  | Prop name | Type | Default | Description |
49
49
  | :-------- | :------ | :-----: | :----------------------------------------------- |
@@ -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
- <Button>Button</Button>
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
- <Button>Button</Button>
24
- <Button>Button</Button>
25
- </ButtonGroup>
26
-
27
- <ButtonTableList>Button Table List </ButtonTableList>
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: 'icon.success', color: 'text.inverse'}} />
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
- <CounterLabel>12</CounterLabel>
12
- <CounterLabel scheme="primary">13</CounterLabel>
13
- <CounterLabel scheme="secondary">13</CounterLabel>
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
@@ -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
- <Flash>Default Flash</Flash>
11
- <Flash variant="success">Success Flash</Flash>
12
- <Flash variant="warning">Warning Flash</Flash>
13
- <Flash variant="danger">Danger Flash</Flash>
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
@@ -13,7 +13,7 @@ Use [Box](/Box) instead.
13
13
 
14
14
  ```jsx
15
15
  <Flex flexWrap="nowrap">
16
- <Box p={3} color="text.inverse" bg="bg.infoInverse">
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="text.inverse" bg="bg.infoInverse">
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.primary" width={300} height={300} borderRadius={0}>
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="text.inverse" bg="bg.infoInverse">
37
+ <Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
38
38
  Item 1
39
39
  </Box>
40
- <Box p={3} color="text.inverse" bg="bg.warningInverse">
40
+ <Box p={3} color="fg.onEmphasis" bg="attention.emphasis">
41
41
  Item 2
42
42
  </Box>
43
- <Box p={3} color="text.inverse" bg="bg.dangerInverse">
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
- <FormGroup>
11
- <FormGroup.Label htmlFor="example-text">Example text</FormGroup.Label>
12
- <TextInput id="example-text" value="Example Value" />
13
- </FormGroup>
14
-
15
- <FormGroup>
16
- <FormGroup.Label htmlFor="example-text-b">Example text</FormGroup.Label>
17
- <TextInput id="example-text-b" value="Example Value" />
18
- </FormGroup>
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
@@ -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="text.inverse" bg="bg.infoInverse">
16
+ <Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
17
17
  1
18
18
  </Box>
19
- <Box p={3} color="text.inverse" bg="bg.warningInverse">
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="text.inverse" bg="bg.infoInverse">
29
+ <Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
30
30
  1
31
31
  </Box>
32
- <Box p={3} color="text.inverse" bg="bg.warningInverse">
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="text.inverse" bg="bg.infoInverse">
42
+ <Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
43
43
  1
44
44
  </Box>
45
- <Box p={3} color="text.inverse" bg="bg.warningInverse">
45
+ <Box p={3} color="fg.onEmphasis" bg="attention.emphasis">
46
46
  2
47
47
  </Box>
48
48
  </Grid>
@@ -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
- <Label variant="small" outline sx={{borderColor: "border.danger", mr: 2, color: "text.danger"}}>small</Label>
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: 'prState.closed.text', bg: 'prState.closed.bg'}}>
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.primary" borderRadius={2} p={2}>
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.primary" borderRadius={2} p={2}>
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.primary" borderRadius={2} p={2}>
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="bg.success" borderColor="border.success">
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="bg.success" borderColor="border.success" caret={pos}>
26
+ <PointerBox m={4} p={2} minHeight={100} bg="success.subtle" borderColor="success.emphasis" caret={pos}>
27
27
  {' '}
28
28
  Content{' '}
29
29
  </PointerBox>
@@ -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
- <Portal containerName="scrolling-canvas">
54
- <div>This div will be rendered into the element registered above.</div>
55
- <Portal>
56
- <div>
57
- This div will be rendered into the default
58
- portal root created at document.body
59
- </div>
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
- </Portal>
66
+ )
62
67
  ```
63
68
 
64
69
  ## System props
@@ -12,21 +12,25 @@ Use [Box](/Box) instead.
12
12
  **Before**
13
13
 
14
14
  ```jsx
15
- <Position position="absolute">...</Position>
16
- <Absolute>...</Absolute>
17
- <Relative>...</Relative>
18
- <Fixed>...</Fixed>
19
- <Sticky>...</Sticky>
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
- <Box position="absolute">...</Box>
26
- <Box position="absolute">...</Box>
27
- <Box position="relative">...</Box>
28
- <Box position="fixed">...</Box>
29
- <Box position="sticky">...</Box>
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.primary" borderRadius={2} size="100%">
39
- <Absolute left="100%" top={0} color="text.inverse" bg="bg.successInverse" p={1}>
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="text.inverse" bg="bg.successInverse" p={1}>
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="text.inverse" bg="bg.successInverse" p={1}>
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="text.inverse" bg="bg.successInverse" p={1}>
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="text.inverse" bg="bg.successInverse" p={1}>
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="text.inverse" bg="bg.successInverse" p={1}>
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="text.inverse" bg="bg.successInverse" p={1}>
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="text.inverse" bg="bg.successInverse" p={1}>
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="border.primary"
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="bg.success" p={6}>
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="text.inverse" bg="bg.dangerInverse" p={2}>
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.Menu>
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
- <SelectMenu.Tab index={0} tabName="Repository"/>
245
- <SelectMenu.Tab index={1} tabName="Organization"/>
244
+ <>
245
+ <SelectMenu.Tab index={0} tabName="Repository"/>
246
+ <SelectMenu.Tab index={1} tabName="Organization"/>
247
+ </>
246
248
  ```
247
249
 
248
250
  ### System Props
@@ -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="icon.success" />
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.primary"
74
+ borderColor="border.default"
75
75
  borderRadius={2}
76
76
  p={3}
77
- backgroundColor="bg.secondary"
77
+ backgroundColor="canvas.subtle"
78
78
  maxWidth={360}
79
79
  >
80
80
  <Box
81
81
  borderStyle="solid"
82
- borderColor="border.primary"
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="text.secondary">
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
- <StateLabel status="issueOpened">Open</StateLabel>
11
- <StateLabel status="issueClosed">Closed</StateLabel>
12
- <StateLabel status="pullOpened">Open</StateLabel>
13
- <StateLabel status="pullClosed">Closed</StateLabel>
14
- <StateLabel status="pullMerged">Merged</StateLabel>
15
- <StateLabel status="draft">Draft</StateLabel>
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
- <StyledOcticon icon={CheckIcon} size={32} color="icon.success" mr={2} />
12
- <StyledOcticon icon={XIcon} size={32} color="icon.danger" />
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
@@ -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
- <Text as='p' fontWeight="bold">bold</Text>
11
- <Text as='p' color="text.danger">danger color</Text>
12
- <Text as='p' color="text.inverse" bg="bg.canvasInverse" p={2}>inverse colors</Text>
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