Skip to content

Commit

Permalink
Implement NavList.SubNav (#2064)
Browse files Browse the repository at this point in the history
* wip subnav

* Add active prop to ActionList.Item

* Handle nested current item

* Add simple storybook story

* Update snapshot

* Stub tests

* Use NavList in PageLayout story

* Add test case todo

* Fix sx typescript error

* Add NavList.Item test

* Add subnav tests

* Add support for as="button" to ActionList.Item

* Add nested subnav test

* Update docs

* Use spacing primitive

* Reset marginY for safari

* Document active prop

* Create strong-nails-sip.md

* Update snapshots
  • Loading branch information
colebemis authored May 16, 2022
1 parent 87b213d commit 62d90af
Show file tree
Hide file tree
Showing 13 changed files with 1,778 additions and 1,590 deletions.
5 changes: 5 additions & 0 deletions .changeset/strong-nails-sip.md
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
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
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

0 comments on commit 62d90af

Please sign in to comment.