Skip to content

Commit cc79c6c

Browse files
mattcosta7mattcosta7
authored
Merge branch 'main' into button-type-check
2 parents 45d5ec3 + e03b5e4 commit cc79c6c

29 files changed

+1290
-1091
lines changed

‎.changeset/brave-melons-leave.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: Add aria-atomic attribute to live region

‎.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/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/popular-taxis-yawn.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: Improve performance when rendering lots of items

‎.changeset/tender-turtles-serve.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: Add support for a skeleton state with the TreeView.SubTree `count` prop

‎.changeset/tough-lobsters-greet.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: Add `TreeView.ErrorDialog` component

‎.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/TreeView.mdx‎

Lines changed: 63 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ description: A hierarchical list of items where nested items can be expanded and
1111

1212
```jsx live drafts
1313
<Box sx={{maxWidth: 400}}>
14-
<nav aria-label="File navigation">
15-
<TreeView aria-label="File navigation">
14+
<nav aria-label="Files">
15+
<TreeView aria-label="Files">
1616
<TreeView.Item>
1717
<TreeView.LeadingVisual>
1818
<TreeView.DirectoryIcon />
@@ -57,8 +57,8 @@ description: A hierarchical list of items where nested items can be expanded and
5757

5858
```jsx live drafts
5959
<Box sx={{maxWidth: 400}}>
60-
<nav aria-label="File navigation">
61-
<TreeView aria-label="File navigation">
60+
<nav aria-label="Files">
61+
<TreeView aria-label="Files">
6262
<TreeView.LinkItem href="#">
6363
<TreeView.LeadingVisual>
6464
<TreeView.DirectoryIcon />
@@ -113,8 +113,8 @@ function ControlledTreeView() {
113113
return (
114114
<Box sx={{display: 'grid', gap: 2, maxWidth: 400}}>
115115
<Button onClick={() => setExpanded(!expanded)}>{expanded ? 'Collapse' : 'Expand'}</Button>
116-
<nav aria-label="File navigation">
117-
<TreeView aria-label="File navigation">
116+
<nav aria-label="Files">
117+
<TreeView aria-label="Files">
118118
<TreeView.Item expanded={expanded} onExpandedChange={setExpanded}>
119119
src
120120
<TreeView.SubTree>
@@ -139,8 +139,8 @@ To render stateful visuals, pass a render function to `TreeView.LeadingVisual` o
139139

140140
```jsx live drafts
141141
<Box sx={{maxWidth: 400}}>
142-
<nav aria-label="File navigation">
143-
<TreeView aria-label="File navigation">
142+
<nav aria-label="Files">
143+
<TreeView aria-label="Files">
144144
<TreeView.Item>
145145
<TreeView.LeadingVisual>
146146
{({isExpanded}) => (isExpanded ? <FileDirectoryOpenFillIcon /> : <FileDirectoryFillIcon />)}
@@ -162,8 +162,8 @@ Since stateful directory icons are a common use case for TreeView, we provide a
162162

163163
```jsx live drafts
164164
<Box sx={{maxWidth: 400}}>
165-
<nav aria-label="File navigation">
166-
<TreeView aria-label="File navigation">
165+
<nav aria-label="Files">
166+
<TreeView aria-label="Files">
167167
<TreeView.Item>
168168
<TreeView.LeadingVisual>
169169
<TreeView.DirectoryIcon />
@@ -272,6 +272,42 @@ See [Storybook](https://primer.style/react/storybook?path=/story/components-tree
272272
{/* <PropsTableSxRow /> */}
273273
</PropsTable>
274274

275+
### TreeView.LeadingVisual
276+
277+
<PropsTable>
278+
<PropsTableRow
279+
name="children"
280+
type={`| React.ReactNode
281+
| (props: {isExpanded: boolean}) => React.ReactNode`}
282+
/>
283+
<PropsTableRow
284+
name="label"
285+
type="string"
286+
description="Provide an accessible label for the leading visual. This is not necessary for decorative visuals"
287+
/>
288+
{/* <PropsTableSxRow /> */}
289+
</PropsTable>
290+
291+
### TreeView.TrailingVisual
292+
293+
<PropsTable>
294+
<PropsTableRow
295+
name="children"
296+
type={`| React.ReactNode
297+
| (props: {isExpanded: boolean}) => React.ReactNode`}
298+
/>
299+
<PropsTableRow
300+
name="label"
301+
type="string"
302+
description="Provide an accessible label for the trailing visual. This is not necessary for decorative visuals"
303+
/>
304+
{/* <PropsTableSxRow /> */}
305+
</PropsTable>
306+
307+
### TreeView.DirectoryIcon
308+
309+
<PropsTable>{/* <PropsTableSxRow /> */}</PropsTable>
310+
275311
### TreeView.SubTree
276312

277313
<PropsTable>
@@ -307,45 +343,38 @@ See [Storybook](https://primer.style/react/storybook?path=/story/components-tree
307343
</>
308344
}
309345
/>
310-
{/* <PropsTableSxRow /> */}
311-
</PropsTable>
312-
313-
### TreeView.LeadingVisual
314-
315-
<PropsTable>
316346
<PropsTableRow
317-
name="children"
318-
type={`| React.ReactNode
319-
| (props: {isExpanded: boolean}) => React.ReactNode`}
347+
name="count"
348+
type="number"
349+
description="The number of items expected to be in the subtree. When in the loading state, the subtree will render a skeleton loading placeholder with the specified count of items"
320350
/>
321-
<PropsTableRow
322-
name="label"
323-
type="string"
324-
description="Provide an accessible label for the leading visual. This is not necessary for decorative visuals"
325-
/>
326-
{/* <PropsTableSxRow /> */}
351+
<PropsTableSxRow />
327352
</PropsTable>
328353

329-
### TreeView.TrailingVisual
354+
### TreeView.ErrorDialog
330355

331356
<PropsTable>
332357
<PropsTableRow
333358
name="children"
334-
type={`| React.ReactNode
335-
| (props: {isExpanded: boolean}) => React.ReactNode`}
359+
type="React.ReactNode"
360+
required
361+
description="The content of the dialog. This is usually a message explaining the error."
336362
/>
337363
<PropsTableRow
338-
name="label"
364+
name="title"
339365
type="string"
340-
description="Provide an accessible label for the trailing visual. This is not necessary for decorative visuals"
366+
defaultValue="'Error'"
367+
description="The title of the dialog. This is usually a short description of the error."
368+
/>
369+
<PropsTableRow
370+
name="onRetry"
371+
type="() => void"
372+
description="Event handler called when the user clicks the retry button."
341373
/>
374+
<PropsTableRow name="onDismiss" type="() => void" description="Event handler called when the dialog is dismissed." />
342375
{/* <PropsTableSxRow /> */}
343376
</PropsTable>
344377

345-
### TreeView.DirectoryIcon
346-
347-
<PropsTable>{/* <PropsTableSxRow /> */}</PropsTable>
348-
349378
## Status
350379

351380
<ComponentChecklist

0 commit comments

Comments
 (0)