Skip to content

Commit ba972b1

Browse files
author
Josep Martins
authored
Spacing and navigation fixes (#610)
1 parent 02eb6b3 commit ba972b1

File tree

3 files changed

+80
-73
lines changed

3 files changed

+80
-73
lines changed

‎.changeset/cool-balloons-begin.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@primer/gatsby-theme-doctocat': patch
3+
---
4+
5+
- Move the heading out of the sidebar Navigation. This fixes the extra divider on top of the navigation.
6+
- Remove extra space below the heading when there's no status or external links
7+
- Remove extra space when there's no Breadcrumbs

‎theme/src/components/layout.js

+70-70
Original file line numberDiff line numberDiff line change
@@ -107,77 +107,77 @@ function Layout({children, pageContext, path}) {
107107
) : null}
108108
<Box sx={{width: '100%', maxWidth: '960px'}}>
109109
<Box as="main" id="skip-nav" sx={{mb: 4}}>
110-
<Breadcrumbs sx={{mb: 4}}>
111-
{breadcrumbData.length > 1
112-
? breadcrumbData.map(item => (
113-
<Breadcrumbs.Item key={item.url} href={item.url} selected={path === item.url}>
114-
{item.title}
115-
</Breadcrumbs.Item>
116-
))
117-
: null}
118-
</Breadcrumbs>
119-
<Box sx={{alignItems: 'center', display: 'flex'}}>
120-
<Heading as="h1" sx={{fontSize: 7}}>
121-
{title}
122-
</Heading>
123-
</Box>
110+
{breadcrumbData.length > 1 ? (
111+
<Breadcrumbs sx={{mb: 4}}>
112+
{breadcrumbData.map(item => (
113+
<Breadcrumbs.Item key={item.url} href={item.url} selected={path === item.url}>
114+
{item.title}
115+
</Breadcrumbs.Item>
116+
))}
117+
</Breadcrumbs>
118+
) : null}
119+
<Heading as="h1" sx={{fontSize: 7}}>
120+
{title}
121+
</Heading>
124122
{description ? <Box sx={{fontSize: 3, mb: 3}}>{description}</Box> : null}
125-
<Box
126-
sx={{
127-
display: 'flex',
128-
flexWrap: 'wrap',
129-
columnGap: 3,
130-
mb: 7,
131-
mt: 2,
132-
rowGap: 3,
133-
alignItems: 'center',
134-
fontSize: 1
135-
}}
136-
>
137-
{status ? (
138-
<Box
139-
as={'ul'}
140-
sx={{
141-
display: 'flex',
142-
gap: 1,
143-
alignItems: 'center',
144-
m: 0,
145-
p: 0,
146-
paddingInline: 0,
147-
listStyle: 'none'
148-
}}
149-
>
150-
<li>
151-
<StatusLabel status={status} />
152-
</li>
153-
<li>
154-
<AccessibilityLabel a11yReviewed={a11yReviewed} />
155-
</li>
156-
</Box>
157-
) : null}
158-
{source || storybook || lookbook || figma || rails || react ? (
159-
<Box
160-
as={'ul'}
161-
sx={{
162-
display: 'flex',
163-
flexWrap: 'wrap',
164-
gap: 4,
165-
alignItems: 'center',
166-
m: 0,
167-
p: 0,
168-
paddingInline: 0,
169-
listStyle: 'none'
170-
}}
171-
>
172-
{source ? <SourceLink href={source} /> : null}
173-
{lookbook ? <LookbookLink href={lookbook} /> : null}
174-
{storybook ? <StorybookLink href={storybook} /> : null}
175-
{react ? <ReactLink href={react} /> : null}
176-
{rails ? <RailsLink href={rails} /> : null}
177-
{figma ? <FigmaLink href={figma} /> : null}
178-
</Box>
179-
) : null}
180-
</Box>
123+
{status || source || storybook || lookbook || figma || rails || react ? (
124+
<Box
125+
sx={{
126+
display: 'flex',
127+
flexWrap: 'wrap',
128+
columnGap: 3,
129+
mb: 7,
130+
mt: 2,
131+
rowGap: 3,
132+
alignItems: 'center',
133+
fontSize: 1
134+
}}
135+
>
136+
{status ? (
137+
<Box
138+
as={'ul'}
139+
sx={{
140+
display: 'flex',
141+
gap: 1,
142+
alignItems: 'center',
143+
m: 0,
144+
p: 0,
145+
paddingInline: 0,
146+
listStyle: 'none'
147+
}}
148+
>
149+
<li>
150+
<StatusLabel status={status} />
151+
</li>
152+
<li>
153+
<AccessibilityLabel a11yReviewed={a11yReviewed} />
154+
</li>
155+
</Box>
156+
) : null}
157+
{source || storybook || lookbook || figma || rails || react ? (
158+
<Box
159+
as={'ul'}
160+
sx={{
161+
display: 'flex',
162+
flexWrap: 'wrap',
163+
gap: 4,
164+
alignItems: 'center',
165+
m: 0,
166+
p: 0,
167+
paddingInline: 0,
168+
listStyle: 'none'
169+
}}
170+
>
171+
{source ? <SourceLink href={source} /> : null}
172+
{lookbook ? <LookbookLink href={lookbook} /> : null}
173+
{storybook ? <StorybookLink href={storybook} /> : null}
174+
{react ? <ReactLink href={react} /> : null}
175+
{rails ? <RailsLink href={rails} /> : null}
176+
{figma ? <FigmaLink href={figma} /> : null}
177+
</Box>
178+
) : null}
179+
</Box>
180+
) : null}
181181
</Box>
182182
{pageContext.tableOfContents.items ? (
183183
<Box

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,10 @@ function NavItem({href, children}) {
3131
function NavItems({items}) {
3232
return (
3333
<>
34+
<VisuallyHidden>
35+
<h3>Site navigation</h3>
36+
</VisuallyHidden>
3437
<NavList aria-label="Site">
35-
<VisuallyHidden>
36-
<h3>Site navigation</h3>
37-
</VisuallyHidden>
3838
{items.map(item => (
3939
<React.Fragment key={item.title}>
4040
{item.children ? (

0 commit comments

Comments
 (0)