Skip to content

Commit 25b78c2

Browse files
joshblackjoshblack
authored
Merge branch 'main' into 2340-add-tmp-fix-for-tabnav
2 parents c2b56ff + 6a1a2bd commit 25b78c2

34 files changed

+778
-751
lines changed

‎.changeset/eleven-countries-hang.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 support for dynamic aria-expanded support on TreeView.Item

‎.changeset/many-windows-hope.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+
fixes types for Button

‎.changeset/olive-sloths-count.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+
TreeView: Fix scroll behavior when focus changes

‎.changeset/polite-dodos-behave.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react': minor
3+
---
4+
5+
UnderlineNav2: Add support and docs for react router configuration

‎.changeset/tough-peas-sort.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+
UnderlineNav2: Add string type to the `counter` prop and display loading counter for all

‎.changeset/witty-apples-think.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react': minor
3+
---
4+
5+
UnderlineNav2: Deprecate coarse input detection and its scroll behaviour

‎docs/content/drafts/UnderlineNav2.mdx‎

Lines changed: 79 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ import {UnderlineNav} from '@primer/react/drafts'
1717

1818
```jsx live drafts
1919
<UnderlineNav aria-label="Repository">
20-
<UnderlineNav.Item selected>Item 1</UnderlineNav.Item>
21-
<UnderlineNav.Item>Item 2</UnderlineNav.Item>
22-
<UnderlineNav.Item>Item 3</UnderlineNav.Item>
20+
<UnderlineNav.Item selected>Code</UnderlineNav.Item>
21+
<UnderlineNav.Item>Issues</UnderlineNav.Item>
22+
<UnderlineNav.Item>Pull Requests</UnderlineNav.Item>
2323
</UnderlineNav>
2424
```
2525

@@ -48,96 +48,99 @@ import {UnderlineNav} from '@primer/react/drafts'
4848

4949
### Overflow Behaviour
5050

51-
When overflow occurs, the component first hides icons if present to optimize for space and show as many items as possible. (Only for fine pointer devices)
52-
53-
#### Items Without Icons
54-
55-
```jsx live drafts
56-
<UnderlineNav aria-label="Repository">
57-
<UnderlineNav.Item selected icon={CodeIcon}>
58-
Code
59-
</UnderlineNav.Item>
60-
<UnderlineNav.Item icon={IssueOpenedIcon} counter={30}>
61-
Issues
62-
</UnderlineNav.Item>
63-
<UnderlineNav.Item icon={GitPullRequestIcon} counter={3}>
64-
Pull Requests
65-
</UnderlineNav.Item>
66-
<UnderlineNav.Item icon={CommentDiscussionIcon}>Discussions</UnderlineNav.Item>
67-
<UnderlineNav.Item icon={PlayIcon} counter={9}>
68-
Actions
69-
</UnderlineNav.Item>
70-
<UnderlineNav.Item icon={ProjectIcon} counter={7}>
71-
Projects
72-
</UnderlineNav.Item>
73-
<UnderlineNav.Item icon={ShieldLockIcon}>Security</UnderlineNav.Item>
74-
<UnderlineNav.Item icon={GraphIcon}>Insights</UnderlineNav.Item>
75-
<UnderlineNav.Item icon={GearIcon} counter={1}>
76-
Settings
77-
</UnderlineNav.Item>
78-
</UnderlineNav>
51+
Component first hides icons if they present to optimize for space and show as many items as possible. If there is still an overflow, it will display the items that don't fit in the `More` menu.
52+
53+
```javascript noinline live drafts
54+
const Navigation = () => {
55+
const items = [
56+
{navigation: 'Code', icon: CodeIcon},
57+
{navigation: 'Issues', icon: IssueOpenedIcon, counter: 120},
58+
{navigation: 'Pull Requests', icon: GitPullRequestIcon, counter: 13},
59+
{navigation: 'Discussions', icon: CommentDiscussionIcon, counter: 5},
60+
{navigation: 'Actions', icon: PlayIcon, counter: 4},
61+
{navigation: 'Projects', icon: ProjectIcon, counter: 9},
62+
{navigation: 'Insights', icon: GraphIcon},
63+
{navigation: 'Settings', icon: GearIcon, counter: 10},
64+
{navigation: 'Security', icon: ShieldLockIcon}
65+
]
66+
const [selectedIndex, setSelectedIndex] = React.useState(0)
67+
return (
68+
<Box sx={{width: 750, border: '1px solid', borderBottom: 0, borderColor: 'border.default'}}>
69+
<UnderlineNav aria-label="Repository">
70+
{items.map((item, index) => (
71+
<UnderlineNav.Item
72+
key={item.navigation}
73+
icon={item.icon}
74+
selected={index === selectedIndex}
75+
onSelect={e => {
76+
setSelectedIndex(index)
77+
e.preventDefault()
78+
}}
79+
counter={item.counter}
80+
>
81+
{item.navigation}
82+
</UnderlineNav.Item>
83+
))}
84+
</UnderlineNav>
85+
</Box>
86+
)
87+
}
88+
render(<Navigation />)
7989
```
8090

81-
#### Display `More` Menu
82-
83-
If there is still overflow, the component will behave depending on the pointer.
91+
### Loading State For Counters
8492

8593
```jsx live drafts
86-
<UnderlineNav aria-label="Repository">
87-
<UnderlineNav.Item selected icon={CodeIcon}>
94+
<UnderlineNav aria-label="Repository" loadingCounters={true}>
95+
<UnderlineNav.Item counter={4} selected>
8896
Code
8997
</UnderlineNav.Item>
90-
<UnderlineNav.Item icon={IssueOpenedIcon} counter={30}>
91-
Issues
92-
</UnderlineNav.Item>
93-
<UnderlineNav.Item icon={GitPullRequestIcon} counter={3}>
94-
Pull Requests
95-
</UnderlineNav.Item>
96-
<UnderlineNav.Item icon={CommentDiscussionIcon}>Discussions</UnderlineNav.Item>
97-
<UnderlineNav.Item icon={EyeIcon} counter={9}>
98-
Actions
99-
</UnderlineNav.Item>
100-
<UnderlineNav.Item icon={EyeIcon} counter={7}>
101-
Projects
102-
</UnderlineNav.Item>
103-
<UnderlineNav.Item icon={EyeIcon}>Security</UnderlineNav.Item>
104-
<UnderlineNav.Item icon={EyeIcon} counter={14}>
105-
Insights
106-
</UnderlineNav.Item>
107-
<UnderlineNav.Item icon={EyeIcon} counter={1}>
108-
Settings
109-
</UnderlineNav.Item>
110-
<UnderlineNav.Item icon={EyeIcon}>Wiki</UnderlineNav.Item>
98+
<UnderlineNav.Item counter={44}>Issues</UnderlineNav.Item>
99+
<UnderlineNav.Item>Pull Requests</UnderlineNav.Item>
111100
</UnderlineNav>
112101
```
113102

114-
### Loading state for counters
103+
### With React Router
115104

116-
```jsx live drafts
117-
<UnderlineNav aria-label="Repository" loadingCounters={true}>
118-
<UnderlineNav.Item counter={4} selected>
119-
Item 1
120-
</UnderlineNav.Item>
121-
<UnderlineNav.Item counter={44}>Item 2</UnderlineNav.Item>
122-
<UnderlineNav.Item>Item 3</UnderlineNav.Item>
123-
</UnderlineNav>
105+
```jsx
106+
import {Link} from 'react-router-dom'
107+
import {UnderlineNav} from '@primer/react/drafts'
108+
const Navigation = () => {
109+
return (
110+
<UnderlineNav aria-label="Repository">
111+
<UnderlineNav.Item as={Link} to="code" counter={4} selected>
112+
Code
113+
</UnderlineNav.Item>
114+
<UnderlineNav.Item counter={44} as={Link} to="issues">
115+
Issues
116+
</UnderlineNav.Item>
117+
<UnderlineNav.Item as={Link} to="pulls">
118+
Pull Requests
119+
</UnderlineNav.Item>
120+
</UnderlineNav>
121+
)
122+
}
124123
```
125124

126125
## Props
127126

128127
### UnderlineNav
129128

130129
<PropsTable>
130+
<PropsTableRow name="children" required type="UnderlineNav.Item[]" />
131131
<PropsTableRow
132132
name="aria-label"
133133
type="string"
134-
description="A unique name for the rendered 'nav' landmark. It will also be used to label the arrow buttons that control the scroll behaviour on coarse pointer devices. (I.e. 'Scroll ${aria-label} left/right')"
134+
description="A unique name for the rendered 'nav' landmark. It will also be used to label the arrow
135+
buttons that control the scroll behaviour on coarse pointer devices. (I.e.
136+
'Scroll ${aria-label} left/right')
137+
"
135138
/>
136139
<PropsTableRow
137140
name="loadingCounters"
138141
type="boolean"
139142
defaultValue="false"
140-
description="Whether all of the counters are in loading state"
143+
description="Whether the navigation items are in loading state. Component waits for all the counters to finish loading to prevent multiple layout shifts."
141144
/>
142145
<PropsTableRow
143146
name="afterSelect"
@@ -150,18 +153,23 @@ If there is still overflow, the component will behave depending on the pointer.
150153
### UnderlineNav.Item
151154

152155
<PropsTable>
156+
<PropsTableRow
157+
name="href"
158+
type="string"
159+
description="The URL that the item navigates to. 'href' is passed to the underlying '<a>' element. If 'as' is specified, the component may need different props and 'href' is ignored. (Required prop for the react router is 'to' for example)"
160+
/>
153161
<PropsTableRow name="icon" type="Component" description="The leading icon comes before item label" />
154162
<PropsTableRow name="selected" type="boolean" description="Whether the link is selected" />
155163
<PropsTableRow
156164
name="onSelect"
157165
type="(event) => void"
158-
description="The handler that gets called when a nav link is selected"
166+
description="The handler that gets called when a nav link is selected. For example, a manual route binding can be done here(I.e. 'navigate(href)' for the react router.)"
159167
/>
160168
<PropsTableRow
161169
name="as"
162-
type="string | Component"
170+
type="string | React.ElementType"
163171
defaultValue="a"
164-
description="What kind of component needs to be rendered"
172+
description="The underlying element to render — either a HTML element name or a React component."
165173
/>
166174
<PropsTableSxRow />
167175
</PropsTable>

‎docs/package-lock.json‎

Lines changed: 7 additions & 25 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"npm": ">=7"
1414
},
1515
"dependencies": {
16-
"@primer/gatsby-theme-doctocat": "^4.2.0",
16+
"@primer/gatsby-theme-doctocat": "^4.2.1",
1717
"@primer/octicons-react": "^17.7.0",
1818
"@primer/primitives": "4.1.0",
1919
"@styled-system/prop-types": "^5.1.0",

0 commit comments

Comments
 (0)