Skip to content

Commit d1bb51d

Browse files
lukekarryslukekarrys
committed
fix: replace borderbox with box
1 parent f907dd2 commit d1bb51d

File tree

9 files changed

+72
-29
lines changed

9 files changed

+72
-29
lines changed

‎.eslintrc.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ module.exports = {
33
ignorePatterns: ['cli/', '.cache/', 'public/'],
44
extends: [
55
'react-app',
6-
'react-app/jest',
6+
// 'react-app/jest',
77
'eslint:recommended',
88
'plugin:react/recommended',
99
'plugin:github/react',

‎theme/src/components/border-box.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎theme/src/components/nav-drawer.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react'
22
import {Box, Link} from '@primer/react'
3-
import BorderBox from './border-box'
43
import {XIcon, ThreeBarsIcon} from '@primer/octicons-react'
54
import {Link as GatsbyLink} from 'gatsby'
65
import DarkButton from './dark-button'
@@ -44,7 +43,7 @@ function NavDrawer({location, repositoryUrl}) {
4443
style={{overflow: 'auto', WebkitOverflowScrolling: 'touch'}}
4544
>
4645
<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">
4847
<Box
4948
display="flex"
5049
py={3}
@@ -62,7 +61,7 @@ function NavDrawer({location, repositoryUrl}) {
6261
<XIcon />
6362
</DarkButton>
6463
</Box>
65-
</BorderBox>
64+
</Box>
6665
{navItems.length > 0 ? (
6766
<Box display="flex" flexDirection="column">
6867
<NavItems location={location} items={navItems} repositoryUrl={repositoryUrl} />
@@ -82,7 +81,8 @@ function NavDrawer({location, repositoryUrl}) {
8281

8382
function HeaderNavItems({items}) {
8483
return items.map((item, index) => (
85-
<BorderBox
84+
<Box
85+
borderStyle="solid"
8686
key={item.title}
8787
borderWidth={0}
8888
borderRadius={0}
@@ -93,7 +93,7 @@ function HeaderNavItems({items}) {
9393
<Link key={index} href={item.url} sx={{color: 'inherit', display: 'block'}}>
9494
{item.title}
9595
</Link>
96-
</BorderBox>
96+
</Box>
9797
))
9898
}
9999

‎theme/src/components/nav-items.js‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import {Link as GatsbyLink} from 'gatsby'
33
import {Box, StyledOcticon, Link, themeGet} from '@primer/react'
44
import {LinkExternalIcon} from '@primer/octicons-react'
55
import styled from 'styled-components'
6-
import BorderBox from './border-box'
76
import NavHierarchy from '../util/nav-hierarchy'
87

98
const getActiveProps = className => props => {
@@ -88,14 +87,24 @@ function topLevelItems(items, path) {
8887
: null
8988

9089
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+
>
92101
<Box display="flex" flexDirection="column">
93102
<TopLevelLink to={item.url} key={item.title}>
94103
{item.title}
95104
</TopLevelLink>
96105
{secondLevelItems(children, path)}
97106
</Box>
98-
</BorderBox>
107+
</Box>
99108
)
100109
})}
101110
</>
@@ -156,14 +165,22 @@ function NavItems({location, repositoryUrl}) {
156165
return (
157166
<>
158167
{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+
>
160177
<Link href={repositoryUrl} sx={{color: 'inherit'}}>
161178
<Box display="flex" justifyContent="space-between" alignItems="center" color="gray.5">
162179
GitHub
163180
<StyledOcticon icon={LinkExternalIcon} color="gray.5" />
164181
</Box>
165182
</Link>
166-
</BorderBox>
183+
</Box>
167184
</>
168185
)
169186
}

‎theme/src/components/page-footer.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,19 @@ import React from 'react'
22
import {Box, StyledOcticon, Link} from '@primer/react'
33
import {PencilIcon} from '@primer/octicons-react'
44
import Contributors from './contributors'
5-
import BorderBox from './border-box'
65

76
function PageFooter({editUrl, contributors = {}}) {
87
const {logins = [], latestCommit} = contributors
98
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+
>
1118
<Box display="grid" gridGap={4}>
1219
{editUrl != null ? (
1320
<Link href={editUrl}>
@@ -17,7 +24,7 @@ function PageFooter({editUrl, contributors = {}}) {
1724
) : null}
1825
{logins.length ? <Contributors logins={logins} latestCommit={latestCommit} /> : null}
1926
</Box>
20-
</BorderBox>
27+
</Box>
2128
) : null
2229
}
2330

‎theme/src/components/search.js‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from 'react'
22
import {Box} from '@primer/react'
33
import DarkTextInput from './dark-text-input'
44
import SearchResults from './search-results'
5-
import BorderBox from './border-box'
65
import useSiteMetadata from '../hooks/use-site-metadata'
76

87
function Search(props) {
@@ -27,9 +26,20 @@ function Search(props) {
2726
})}
2827
>
2928
{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+
>
3141
<SearchResults {...{results, getItemProps, highlightedIndex}} />
32-
</BorderBox>
42+
</Box>
3343
) : null}
3444
</Box>
3545
</Box>

‎theme/src/components/sidebar.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import {Box} from '@primer/react'
22
import React from 'react'
33
import {HEADER_HEIGHT} from './header'
44
import NavItems from './nav-items'
5-
import BorderBox from './border-box'
65
import navItems from '../nav.yml'
76

87
function Sidebar({location, repositoryUrl}) {
@@ -16,11 +15,19 @@ function Sidebar({location, repositoryUrl}) {
1615
bg="gray.0"
1716
role="navigation"
1817
>
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+
>
2027
<Box display="flex" flexDirection="column" role="list">
2128
<NavItems location={location} items={navItems} repositoryUrl={repositoryUrl} />
2229
</Box>
23-
</BorderBox>
30+
</Box>
2431
</Box>
2532
)
2633
}

‎theme/src/hooks/use-search.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,8 @@ function useSearch() {
114114
}
115115
}
116116
break
117+
default:
118+
break
117119
}
118120
return changes
119121
},

‎theme/src/layout/default.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import PageFooter from '../components/page-footer'
77
import Sidebar from '../components/sidebar'
88
import TableOfContents from '../components/table-of-contents'
99
import VariantSelect from '../components/variant-select'
10-
import BorderBox from '../components/border-box'
1110
import * as Slugger from '../hooks/use-slugger'
1211
import NavHierarchy from '../util/nav-hierarchy'
1312

@@ -40,14 +39,21 @@ function Layout({children, pageContext, location}) {
4039
role="region"
4140
>
4241
<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+
>
4450
<Box>
4551
<Box>
4652
<Heading as="h1">{title}</Heading>
4753
{description}
4854
</Box>
4955
</Box>
50-
</BorderBox>
56+
</Box>
5157
{variantRoot != null ? (
5258
<Box css={{'margin-top': '25px'}}>
5359
<VariantSelect

0 commit comments

Comments
 (0)