Skip to content

Commit ab30f14

Browse files
colebemiscolebemis
authored
Implement NavList component (part 1) (#2058)
* Create NavList component * Implement NavList subcomponents * Reset font weight of trailing visual * Export NavList from drafts * Update NavList docs * Update NavList.mdx * Add children to props type * Add NavList tests * Create breezy-cooks-destroy.md * Pass props to underlying nav element * Show divider between groups * Update snapshot
1 parent d43a825 commit ab30f14

File tree

8 files changed

+796
-197
lines changed

8 files changed

+796
-197
lines changed

‎.changeset/breezy-cooks-destroy.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/react": patch
3+
---
4+
5+
Add draft of `NavList` component

‎docs/content/NavList.mdx

Lines changed: 47 additions & 196 deletions
Original file line numberDiff line numberDiff line change
@@ -2,44 +2,30 @@
22
title: NavList
33
status: Draft
44
description: Use nav list to render a vertical list of navigation links.
5+
source: https://github.com/primer/react/tree/main/src/NavList
56
---
67

7-
<Note variant="warning">Not implemented yet</Note>
8-
9-
To render a horizontal list of navigation links, consider using [UnderlineNav](/UnderlineNav).
8+
```js
9+
import {NavList} from '@primer/react/drafts'
10+
```
1011

1112
## Examples
1213

1314
### Simple
1415

15-
```jsx
16+
```jsx live drafts
1617
<NavList>
1718
<NavList.Item href="/" aria-current="page">
18-
Dashboard
19+
Home
1920
</NavList.Item>
20-
<NavList.Item href="/pulls">Pull requests</NavList.Item>
21-
<NavList.Item href="/issues">Issues</NavList.Item>
21+
<NavList.Item href="/about">About</NavList.Item>
22+
<NavList.Item href="/contact">Contact</NavList.Item>
2223
</NavList>
2324
```
2425

25-
<details>
26-
<summary>Rendered HTML</summary>
27-
28-
```html
29-
<nav>
30-
<ul role="list">
31-
<li><a href="/" aria-current="page">Dashboard</a></li>
32-
<li><a href="/about">Pull requests</a></li>
33-
<li><a href="/contact">Issues</a></li>
34-
</ul>
35-
</nav>
36-
```
37-
38-
</details>
39-
4026
### With leading icons
4127

42-
```jsx
28+
```jsx live drafts
4329
<NavList>
4430
<NavList.Item href="/" aria-current="page">
4531
<NavList.LeadingVisual>
@@ -62,88 +48,34 @@ To render a horizontal list of navigation links, consider using [UnderlineNav](/
6248
</NavList>
6349
```
6450

65-
<details>
66-
<summary>Rendered HTML</summary>
67-
68-
```html
69-
<nav>
70-
<ul role="list">
71-
<li>
72-
<a href="/" aria-current="page">
73-
<span><svg aria-hidden="true">...</svg></span>
74-
<span>Dashboard</span>
75-
</a>
76-
</li>
77-
<li>
78-
<a href="/pulls">
79-
<span><svg aria-hidden="true">...</svg></span>
80-
<span>Pull requests</span>
81-
</a>
82-
</li>
83-
<li>
84-
<a href="/issues">
85-
<span><svg aria-hidden="true">...</svg></span>
86-
<span>Issues</span>
87-
</a>
88-
</li>
89-
</ul>
90-
</nav>
91-
```
92-
93-
</details>
94-
9551
### With other leading visuals
9652

97-
```jsx
53+
```jsx live drafts
9854
<NavList>
9955
<NavList.Item href="/general" aria-current="page">
100-
<NavList.LeadingVisual>#️⃣</NavList.LeadingVisual>
56+
<NavList.LeadingVisual>
57+
<span aria-hidden>#️⃣</span>
58+
</NavList.LeadingVisual>
10159
General
10260
</NavList.Item>
10361
<NavList.Item href="/q-a">
104-
<NavList.LeadingVisual>🙏</NavList.LeadingVisual>
62+
<NavList.LeadingVisual>
63+
<span aria-hidden>🙏</span>
64+
</NavList.LeadingVisual>
10565
Q&A
10666
</NavList.Item>
10767
<NavList.Item href="/show-and-tell">
108-
<NavList.LeadingVisual>🙌</NavList.LeadingVisual>
68+
<NavList.LeadingVisual>
69+
<span aria-hidden>🙌</span>
70+
</NavList.LeadingVisual>
10971
Show and tell
11072
</NavList.Item>
11173
</NavList>
11274
```
11375

114-
<details>
115-
<summary>Rendered HTML</summary>
116-
117-
```html
118-
<nav>
119-
<ul role="list">
120-
<li>
121-
<a href="/" aria-current="page">
122-
<span>#️⃣</span>
123-
<span>General</span>
124-
</a>
125-
</li>
126-
<li>
127-
<a href="/pulls">
128-
<span>🙏</span>
129-
<span>Q&A</span>
130-
</a>
131-
</li>
132-
<li>
133-
<a href="/issues">
134-
<span>🙌</span>
135-
<span>Show and tell</span>
136-
</a>
137-
</li>
138-
</ul>
139-
</nav>
140-
```
141-
142-
</details>
143-
14476
### With trailing visuals
14577

146-
```jsx
78+
```jsx live drafts
14779
<NavList>
14880
<NavList.Item href="/inbox" aria-current="page">
14981
Inbox
@@ -154,31 +86,13 @@ To render a horizontal list of navigation links, consider using [UnderlineNav](/
15486
</NavList>
15587
```
15688

157-
<details>
158-
<summary>Rendered HTML</summary>
159-
160-
```html
161-
<nav>
162-
<ul role="list">
163-
<li>
164-
<a href="/inbox" aria-current="page">
165-
<span>Inbox</span>
166-
<span>1,234</span>
167-
</a>
168-
</li>
169-
<li><a href="/saved">Saved</a></li>
170-
<li><a href="/done">Done</a></li>
171-
</ul>
172-
</nav>
173-
```
174-
175-
</details>
176-
17789
### With a heading
17890

179-
```jsx
91+
```jsx live drafts
18092
<>
181-
<h3 id="workflows-heading">Workflows</h3>
93+
<Heading as="h3" id="workflows-heading" sx={{fontSize: 2}}>
94+
Workflows
95+
</Heading>
18296
<NavList aria-labelledby="workflows-heading">
18397
<NavList.Item href="/" aria-current="page">
18498
All workflows
@@ -190,26 +104,9 @@ To render a horizontal list of navigation links, consider using [UnderlineNav](/
190104
</>
191105
```
192106

193-
<details>
194-
<summary>Rendered HTML</summary>
195-
196-
```html
197-
<h3 id="workflows-heading">Workflows</h3>
198-
<nav aria-labelledby="workflows-heading">
199-
<ul role="list">
200-
<li><a href="/" aria-current="page">All workflows</a></li>
201-
<li><a href="/ci">CI</a></li>
202-
<li><a href="/deploy">Deploy</a></li>
203-
<li><a href="/release">Release</a></li>
204-
</ul>
205-
</nav>
206-
```
207-
208-
</details>
209-
210107
### With aria-label
211108

212-
```jsx
109+
```jsx live drafts
213110
<NavList aria-label="Security">
214111
<NavList.Item href="/" aria-current="page">
215112
Overview
@@ -219,24 +116,9 @@ To render a horizontal list of navigation links, consider using [UnderlineNav](/
219116
</NavList>
220117
```
221118

222-
<details>
223-
<summary>Rendered HTML</summary>
224-
225-
```html
226-
<nav aria-label="Security">
227-
<ul role="list">
228-
<li><a href="/" aria-current="page">Overview</a></li>
229-
<li><a href="/policy">Security policy</a></li>
230-
<li><a href="/advisories">Security advisories</a></li>
231-
</ul>
232-
</nav>
233-
```
234-
235-
</details>
236-
237119
### With groups
238120

239-
```jsx
121+
```jsx live drafts
240122
<NavList>
241123
<NavList.Group title="Overview">
242124
<NavList.Item href="/getting-started" aria-current="page">
@@ -251,34 +133,10 @@ To render a horizontal list of navigation links, consider using [UnderlineNav](/
251133
</NavList>
252134
```
253135

254-
<details>
255-
<summary>Rendered HTML</summary>
256-
257-
```html
258-
<nav>
259-
<ul role="list">
260-
<li>
261-
<div role="presentation" id="generated-id-1">Overview</div>
262-
<ul role="list" aria-labelledby="generated-id-1">
263-
<li><a href="/getting-started" aria-current="page">Getting started</a></li>
264-
</ul>
265-
</li>
266-
<li>
267-
<div role="presentation" id="generated-id-2">Components</div>
268-
<ul role="list" aria-labelledby="generated-id-2">
269-
<li><a href="/Avatar">Avatar</a></li>
270-
<li><a href="/Button">Button</a></li>
271-
<li><a href="/Label">Label</a></li>
272-
</ul>
273-
</li>
274-
</ul>
275-
</nav>
276-
```
277-
278-
</details>
279-
280136
### With sub-items
281137

138+
<Note variant="danger">Not implemented yet</Note>
139+
282140
```jsx
283141
<NavList>
284142
<NavList.Item href="/branches">Branches</NavList.Item>
@@ -325,9 +183,11 @@ If a `NavList.Item` contains a `NavList.SubNav`, the `NavList.Item` will render
325183

326184
### With a divider
327185

328-
```jsx
186+
```jsx live drafts
329187
<NavList>
330-
<NavList.Item href="/">Dashboard</NavList.Item>
188+
<NavList.Item href="/" aria-current="page">
189+
Dashboard
190+
</NavList.Item>
331191
<NavList.Item href="/pulls">Pull requests</NavList.Item>
332192
<NavList.Item href="/issues">Issues</NavList.Item>
333193
<NavList.Divider />
@@ -336,26 +196,10 @@ If a `NavList.Item` contains a `NavList.SubNav`, the `NavList.Item` will render
336196
</NavList>
337197
```
338198

339-
<details>
340-
<summary>Rendered HTML</summary>
341-
342-
```html
343-
<nav>
344-
<ul role="list">
345-
<li><a href="/">Dashboard</a></li>
346-
<li><a href="/pulls">Pull requests</a></li>
347-
<li><a href="/issues">Issues</a></li>
348-
<div role="separator"></div>
349-
<li><a href="/marketplace">Marketplace</a></li>
350-
<li><a href="/explore">Explore</a></li>
351-
</ul>
352-
</nav>
353-
```
354-
355-
</details>
356-
357199
### With React Router
358200

201+
<Note variant="danger">Not implemented yet</Note>
202+
359203
```jsx
360204
import {Link, useMatch, useResolvedPath} from 'react-router-dom'
361205
import {NavList} from '@primer/react'
@@ -383,6 +227,8 @@ function App() {
383227

384228
### With Next.js
385229

230+
<Note variant="danger">Not implemented yet</Note>
231+
386232
```jsx
387233
import {useRouter} from 'next/router'
388234
import Link from 'next/link'
@@ -416,8 +262,13 @@ function App() {
416262
<PropsTable>
417263
<PropsTableRow name="aria-label" type="string" />
418264
<PropsTableRow name="aria-labelledby" type="string" />
419-
<PropsTableSxRow />
420-
<PropsTableRefRow refType="HTMLElement" />
265+
<PropsTableBasePropRows
266+
elementType="nav"
267+
refType="HTMLElement"
268+
passthroughPropsLink={
269+
<Link href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav#Attributes">MDN</Link>
270+
}
271+
/>
421272
</PropsTable>
422273

423274
### NavList.Item
@@ -506,10 +357,10 @@ function App() {
506357
<ComponentChecklist
507358
items={{
508359
propsDocumented: true,
509-
noUnnecessaryDeps: false,
510-
adaptsToThemes: false,
511-
adaptsToScreenSizes: false,
512-
fullTestCoverage: false,
360+
noUnnecessaryDeps: true,
361+
adaptsToThemes: true,
362+
adaptsToScreenSizes: true,
363+
fullTestCoverage: true,
513364
usedInProduction: false,
514365
usageExamplesDocumented: true,
515366
hasStorybookStories: false,

‎src/ActionList/Visuals.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,8 @@ export const TrailingVisual: React.FC<VisualProps> = ({sx = {}, ...props}) => {
6262
height: '20px', // match height of text row
6363
flexShrink: 0,
6464
color: getVariantStyles(variant, disabled).annotationColor,
65-
marginLeft: 2
65+
marginLeft: 2,
66+
fontWeight: 'initial'
6667
},
6768
sx as SxProp
6869
)}

0 commit comments

Comments
 (0)