Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implement NavList.SubNav #2064

Merged
merged 23 commits into from
May 16, 2022
Merged

Implement NavList.SubNav #2064

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
73c3d4a
wip subnav
colebemis May 11, 2022
9c52b23
Add active prop to ActionList.Item
colebemis May 11, 2022
3cc54c0
Handle nested current item
colebemis May 11, 2022
16fadd9
Add simple storybook story
colebemis May 11, 2022
b665d8e
Update snapshot
colebemis May 11, 2022
9a73ce6
Stub tests
colebemis May 11, 2022
ebe51da
Merge branch 'main' into navlist-subnav
colebemis May 11, 2022
2e2c402
Use NavList in PageLayout story
colebemis May 11, 2022
d87e11d
Merge branch 'navlist-subnav' of github.com:primer/react into navlist…
colebemis May 11, 2022
1b98388
Add test case todo
colebemis May 11, 2022
98fc033
Fix sx typescript error
colebemis May 12, 2022
6ac4ca4
Add NavList.Item test
colebemis May 12, 2022
8ba60e8
Add subnav tests
colebemis May 12, 2022
9c19fde
Add support for as="button" to ActionList.Item
colebemis May 12, 2022
9dd1e79
Add nested subnav test
colebemis May 12, 2022
8fc40e6
Update docs
colebemis May 12, 2022
293fe76
Use spacing primitive
colebemis May 12, 2022
64c7697
Reset marginY for safari
colebemis May 12, 2022
30786fb
Document active prop
colebemis May 12, 2022
9f33f21
Create strong-nails-sip.md
colebemis May 12, 2022
5c4fb66
Merge branch 'main' into navlist-subnav
colebemis May 12, 2022
8e5dd1b
Update snapshots
colebemis May 12, 2022
f92e1f0
Merge branch 'navlist-subnav' of github.com:primer/react into navlist…
colebemis May 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/strong-nails-sip.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": patch
---

Add support for sub-items in draft implementation of NavList
12 changes: 12 additions & 0 deletions docs/content/ActionList.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,6 +297,12 @@ render(<SelectFields />)
defaultValue="false"
description="Indicate whether the item is selected. Only applies to items that can be selected."
/>
<PropsTableRow
name="active"
type="boolean"
defaultValue="false"
description="Indicate whether the item is active. There should never be more than one active item."
/>
<PropsTableRow
name="disabled"
type="boolean"
Expand Down Expand Up @@ -325,6 +331,12 @@ render(<SelectFields />)
required
type="React.ReactNode | ActionList.LeadingVisual | ActionList.Description | ActionList.TrailingVisual"
/>
<PropsTableRow
name="active"
type="boolean"
defaultValue="false"
description="Indicate whether the item is active. There should never be more than one active item."
/>
<PropsTableBasePropRows
elementType="a"
isPolymorphic
Expand Down
32 changes: 4 additions & 28 deletions docs/content/NavList.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,16 +135,16 @@ import {NavList} from '@primer/react/drafts'

### With sub-items

<Note variant="danger">Not implemented yet</Note>

```jsx
```jsx live drafts
<NavList>
<NavList.Item href="/branches">Branches</NavList.Item>
<NavList.Item href="/tags">Tags</NavList.Item>
<NavList.Item>
Actions
<NavList.SubNav>
<NavList.Item href="/actions">General</NavList.Item>
<NavList.Item href="/actions" aria-current="page">
General
</NavList.Item>
<NavList.Item href="/actions/runners">Runners</NavList.Item>
</NavList.SubNav>
</NavList.Item>
Expand All @@ -157,30 +157,6 @@ If a `NavList.Item` contains a `NavList.SubNav`, the `NavList.Item` will render

</Note>

<details>
<summary>Rendered HTML</summary>

```html
<nav>
<ul role="list">
<li><a href="/branches">Branches</a></li>
<li><a href="/tags">Tags</a></li>
<li>
<button id="generated-id-1" aria-expanded="false" aria-controls="generated-id-2">
<span>Actions</span>
<span><svg aria-hidden="true">...</svg></span>
</button>
<ul role="list" id="generated-id-2" aria-labelledby="generated-id-1">
<li><a href="/actions">General</a></li>
<li><a href="/actions/runners">Runners</a></li>
</ul>
</li>
</ul>
</nav>
```

</details>

### With a divider

```jsx live drafts
Expand Down
Loading