fix: replace borderbox with box
Luke Karrys committed
Oct 15, 2023 at 13:19 UTC
d1bb51d18e0ee4ef86784bb5cd5a8c63a01ebc55
9 files changed
+72
-29
.eslintrc.js
+1
-1
@@ -3,7 +3,7 @@ module.exports = {
3
ignorePatterns: ['cli/', '.cache/', 'public/'],
4
extends: [
5
'react-app',
6
- 'react-app/jest',
6
+ // 'react-app/jest',
7
'eslint:recommended',
8
'plugin:react/recommended',
9
'plugin:github/react',
theme/src/components/border-box.js
deleted
-6
@@ -1,6 +0,0 @@
1
-import React from 'react'
2
-import {Box} from '@primer/react'
3
-
4
-const BorderBox = props => <Box {...props} />
5
-
6
-export default BorderBox
theme/src/components/nav-drawer.js
+5
-5
@@ -1,6 +1,5 @@
1
import React from 'react'
2
import {Box, Link} from '@primer/react'
3
-import BorderBox from './border-box'
3
import {XIcon, ThreeBarsIcon} from '@primer/octicons-react'
4
import {Link as GatsbyLink} from 'gatsby'
5
import DarkButton from './dark-button'
@@ -44,7 +43,7 @@ function NavDrawer({location, repositoryUrl}) {
43
style={{overflow: 'auto', WebkitOverflowScrolling: 'touch'}}
44
>
45
<Box display="flex" flexDirection="column" flex="1 0 auto" color="gray.7" bg="gray.0">
47
- <BorderBox borderWidth={0} borderRadius={0} borderBottomWidth={1} borderColor="gray.7">
46
+ <Box borderStyle="solid" borderWidth={0} borderRadius={0} borderBottomWidth={1} borderColor="gray.7">
47
<Box
48
display="flex"
49
py={3}
@@ -62,7 +61,7 @@ function NavDrawer({location, repositoryUrl}) {
61
<XIcon />
62
</DarkButton>
63
</Box>
65
- </BorderBox>
64
+ </Box>
65
{navItems.length > 0 ? (
66
<Box display="flex" flexDirection="column">
67
<NavItems location={location} items={navItems} repositoryUrl={repositoryUrl} />
@@ -82,7 +81,8 @@ function NavDrawer({location, repositoryUrl}) {
81
82
function HeaderNavItems({items}) {
83
return items.map((item, index) => (
85
- <BorderBox
84
+ <Box
85
+ borderStyle="solid"
86
key={item.title}
87
borderWidth={0}
88
borderRadius={0}
@@ -93,7 +93,7 @@ function HeaderNavItems({items}) {
93
<Link key={index} href={item.url} sx={{color: 'inherit', display: 'block'}}>
94
{item.title}
95
</Link>
96
- </BorderBox>
96
+ </Box>
97
))
98
}
99
theme/src/components/nav-items.js
+22
-5
@@ -3,7 +3,6 @@ import {Link as GatsbyLink} from 'gatsby'
3
import {Box, StyledOcticon, Link, themeGet} from '@primer/react'
4
import {LinkExternalIcon} from '@primer/octicons-react'
5
import styled from 'styled-components'
6
-import BorderBox from './border-box'
6
import NavHierarchy from '../util/nav-hierarchy'
7
8
const getActiveProps = className => props => {
@@ -88,14 +87,24 @@ function topLevelItems(items, path) {
87
: null
88
89
return (
91
- <BorderBox key={item.title} borderWidth={0} borderRadius={0} borderTopWidth={1} py={3} px={4} role="listitem">
90
+ <Box
91
+ borderStyle="solid"
92
+ borderColor="border.default"
93
+ key={item.title}
94
+ borderWidth={0}
95
+ borderRadius={0}
96
+ borderTopWidth={1}
97
+ py={3}
98
+ px={4}
99
+ role="listitem"
100
+ >
101
<Box display="flex" flexDirection="column">
102
<TopLevelLink to={item.url} key={item.title}>
103
{item.title}
104
</TopLevelLink>
105
{secondLevelItems(children, path)}
106
</Box>
98
- </BorderBox>
107
+ </Box>
108
)
109
})}
110
</>
@@ -156,14 +165,22 @@ function NavItems({location, repositoryUrl}) {
165
return (
166
<>
167
{topLevelItems(items, path)}
159
- <BorderBox borderWidth={0} borderTopWidth={1} borderRadius={0} py={5} px={4}>
168
+ <Box
169
+ borderStyle="solid"
170
+ borderColor="border.default"
171
+ borderWidth={0}
172
+ borderTopWidth={1}
173
+ borderRadius={0}
174
+ py={5}
175
+ px={4}
176
+ >
177
<Link href={repositoryUrl} sx={{color: 'inherit'}}>
178
<Box display="flex" justifyContent="space-between" alignItems="center" color="gray.5">
179
GitHub
180
<StyledOcticon icon={LinkExternalIcon} color="gray.5" />
181
</Box>
182
</Link>
166
- </BorderBox>
183
+ </Box>
184
</>
185
)
186
}
theme/src/components/page-footer.js
+10
-3
@@ -2,12 +2,19 @@ import React from 'react'
2
import {Box, StyledOcticon, Link} from '@primer/react'
3
import {PencilIcon} from '@primer/octicons-react'
4
import Contributors from './contributors'
5
-import BorderBox from './border-box'
5
6
function PageFooter({editUrl, contributors = {}}) {
7
const {logins = [], latestCommit} = contributors
8
return editUrl || logins.length ? (
10
- <BorderBox borderWidth={0} borderTopWidth={1} mt={8} py={5}>
9
+ <Box
10
+ borderStyle="solid"
11
+ borderColor="border.default"
12
+ borderRadius={2}
13
+ borderWidth={0}
14
+ borderTopWidth={1}
15
+ mt={8}
16
+ py={5}
17
+ >
18
<Box display="grid" gridGap={4}>
19
{editUrl != null ? (
20
<Link href={editUrl}>
@@ -17,7 +24,7 @@ function PageFooter({editUrl, contributors = {}}) {
24
) : null}
25
{logins.length ? <Contributors logins={logins} latestCommit={latestCommit} /> : null}
26
</Box>
20
- </BorderBox>
27
+ </Box>
28
) : null
29
}
30
theme/src/components/search.js
+13
-3
@@ -2,7 +2,6 @@ import React from 'react'
2
import {Box} from '@primer/react'
3
import DarkTextInput from './dark-text-input'
4
import SearchResults from './search-results'
5
-import BorderBox from './border-box'
5
import useSiteMetadata from '../hooks/use-site-metadata'
6
7
function Search(props) {
@@ -27,9 +26,20 @@ function Search(props) {
26
})}
27
>
28
{isOpen ? (
30
- <BorderBox minWidth={300} maxHeight="70vh" py={1} boxShadow="medium" bg="white" style={{overflow: 'auto'}}>
29
+ <Box
30
+ borderWidth={1}
31
+ borderStyle="solid"
32
+ borderColor="border.default"
33
+ borderRadius={2}
34
+ minWidth={300}
35
+ maxHeight="70vh"
36
+ py={1}
37
+ boxShadow="medium"
38
+ bg="white"
39
+ style={{overflow: 'auto'}}
40
+ >
41
<SearchResults {...{results, getItemProps, highlightedIndex}} />
32
- </BorderBox>
42
+ </Box>
43
) : null}
44
</Box>
45
</Box>
theme/src/components/sidebar.js
+10
-3
@@ -2,7 +2,6 @@ import {Box} from '@primer/react'
2
import React from 'react'
3
import {HEADER_HEIGHT} from './header'
4
import NavItems from './nav-items'
5
-import BorderBox from './border-box'
5
import navItems from '../nav.yml'
6
7
function Sidebar({location, repositoryUrl}) {
@@ -16,11 +15,19 @@ function Sidebar({location, repositoryUrl}) {
15
bg="gray.0"
16
role="navigation"
17
>
19
- <BorderBox borderWidth={0} borderRightWidth={1} borderRadius={0} height="100%" style={{overflow: 'auto'}}>
18
+ <Box
19
+ borderStyle="solid"
20
+ borderColor="border.default"
21
+ borderWidth={0}
22
+ borderRightWidth={1}
23
+ borderRadius={0}
24
+ height="100%"
25
+ style={{overflow: 'auto'}}
26
+ >
27
<Box display="flex" flexDirection="column" role="list">
28
<NavItems location={location} items={navItems} repositoryUrl={repositoryUrl} />
29
</Box>
23
- </BorderBox>
30
+ </Box>
31
</Box>
32
)
33
}
theme/src/hooks/use-search.js
+2
@@ -114,6 +114,8 @@ function useSearch() {
114
}
115
}
116
break
117
+ default:
118
+ break
119
}
120
return changes
121
},
theme/src/layout/default.js
+9
-3
@@ -7,7 +7,6 @@ import PageFooter from '../components/page-footer'
7
import Sidebar from '../components/sidebar'
8
import TableOfContents from '../components/table-of-contents'
9
import VariantSelect from '../components/variant-select'
10
-import BorderBox from '../components/border-box'
10
import * as Slugger from '../hooks/use-slugger'
11
import NavHierarchy from '../util/nav-hierarchy'
12
@@ -40,14 +39,21 @@ function Layout({children, pageContext, location}) {
39
role="region"
40
>
41
<Box css={{gridArea: 'heading'}}>
43
- <BorderBox borderWidth={0} borderBottomWidth={1} borderRadius={0} pb={2}>
42
+ <Box
43
+ borderStyle="solid"
44
+ borderColor="border.default"
45
+ borderWidth={0}
46
+ borderBottomWidth={1}
47
+ borderRadius={0}
48
+ pb={2}
49
+ >
50
<Box>
51
<Box>
52
<Heading as="h1">{title}</Heading>
53
{description}
54
</Box>
55
</Box>
50
- </BorderBox>
56
+ </Box>
57
{variantRoot != null ? (
58
<Box css={{'margin-top': '25px'}}>
59
<VariantSelect