Merge branch 'main' into button-type-check

primer · Oct 25, 2022 · cc79c6c · cc79c6c
2 parents 45d5ec3 + e03b5e4
commit cc79c6c
Show file tree

Hide file tree

Showing 29 changed files with 1,290 additions and 1,091 deletions.
diff --git a/.changeset/brave-melons-leave.md b/.changeset/brave-melons-leave.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+TreeView: Add aria-atomic attribute to live region
diff --git a/.changeset/eleven-countries-hang.md b/.changeset/eleven-countries-hang.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Add support for dynamic aria-expanded support on TreeView.Item
diff --git a/.changeset/olive-sloths-count.md b/.changeset/olive-sloths-count.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+TreeView: Fix scroll behavior when focus changes
diff --git a/.changeset/polite-dodos-behave.md b/.changeset/polite-dodos-behave.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+UnderlineNav2: Add support and docs for react router configuration
diff --git a/.changeset/popular-taxis-yawn.md b/.changeset/popular-taxis-yawn.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+TreeView: Improve performance when rendering lots of items
diff --git a/.changeset/tender-turtles-serve.md b/.changeset/tender-turtles-serve.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+TreeView: Add support for a skeleton state with the TreeView.SubTree `count` prop
diff --git a/.changeset/tough-lobsters-greet.md b/.changeset/tough-lobsters-greet.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+TreeView: Add `TreeView.ErrorDialog` component
diff --git a/.changeset/tough-peas-sort.md b/.changeset/tough-peas-sort.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+UnderlineNav2: Add string type to the `counter` prop and display loading counter for all
diff --git a/.changeset/witty-apples-think.md b/.changeset/witty-apples-think.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+UnderlineNav2: Deprecate coarse input detection and its scroll behaviour
diff --git a/docs/content/TreeView.mdx b/docs/content/TreeView.mdx
@@ -11,8 +11,8 @@ description: A hierarchical list of items where nested items can be expanded and
 
 ```jsx live drafts
 <Box sx={{maxWidth: 400}}>
-  <nav aria-label="File navigation">
-    <TreeView aria-label="File navigation">
+  <nav aria-label="Files">
+    <TreeView aria-label="Files">
       <TreeView.Item>
         <TreeView.LeadingVisual>
           <TreeView.DirectoryIcon />
@@ -57,8 +57,8 @@ description: A hierarchical list of items where nested items can be expanded and
 
 ```jsx live drafts
 <Box sx={{maxWidth: 400}}>
-  <nav aria-label="File navigation">
-    <TreeView aria-label="File navigation">
+  <nav aria-label="Files">
+    <TreeView aria-label="Files">
       <TreeView.LinkItem href="#">
         <TreeView.LeadingVisual>
           <TreeView.DirectoryIcon />
@@ -113,8 +113,8 @@ function ControlledTreeView() {
   return (
     <Box sx={{display: 'grid', gap: 2, maxWidth: 400}}>
       <Button onClick={() => setExpanded(!expanded)}>{expanded ? 'Collapse' : 'Expand'}</Button>
-      <nav aria-label="File navigation">
-        <TreeView aria-label="File navigation">
+      <nav aria-label="Files">
+        <TreeView aria-label="Files">
           <TreeView.Item expanded={expanded} onExpandedChange={setExpanded}>
             src
             <TreeView.SubTree>
@@ -139,8 +139,8 @@ To render stateful visuals, pass a render function to `TreeView.LeadingVisual` o
 
 ```jsx live drafts
 <Box sx={{maxWidth: 400}}>
-  <nav aria-label="File navigation">
-    <TreeView aria-label="File navigation">
+  <nav aria-label="Files">
+    <TreeView aria-label="Files">
       <TreeView.Item>
         <TreeView.LeadingVisual>
           {({isExpanded}) => (isExpanded ? <FileDirectoryOpenFillIcon /> : <FileDirectoryFillIcon />)}
@@ -162,8 +162,8 @@ Since stateful directory icons are a common use case for TreeView, we provide a
 
 ```jsx live drafts
 <Box sx={{maxWidth: 400}}>
-  <nav aria-label="File navigation">
-    <TreeView aria-label="File navigation">
+  <nav aria-label="Files">
+    <TreeView aria-label="Files">
       <TreeView.Item>
         <TreeView.LeadingVisual>
           <TreeView.DirectoryIcon />
@@ -272,6 +272,42 @@ See [Storybook](https://primer.style/react/storybook?path=/story/components-tree
   {/* <PropsTableSxRow /> */}
 </PropsTable>
 
+### TreeView.LeadingVisual
+
+<PropsTable>
+  <PropsTableRow
+    name="children"
+    type={`| React.ReactNode
+| (props: {isExpanded: boolean}) => React.ReactNode`}
+  />
+  <PropsTableRow
+    name="label"
+    type="string"
+    description="Provide an accessible label for the leading visual. This is not necessary for decorative visuals"
+  />
+  {/* <PropsTableSxRow /> */}
+</PropsTable>
+
+### TreeView.TrailingVisual
+
+<PropsTable>
+  <PropsTableRow
+    name="children"
+    type={`| React.ReactNode
+| (props: {isExpanded: boolean}) => React.ReactNode`}
+  />
+  <PropsTableRow
+    name="label"
+    type="string"
+    description="Provide an accessible label for the trailing visual. This is not necessary for decorative visuals"
+  />
+  {/* <PropsTableSxRow /> */}
+</PropsTable>
+
+### TreeView.DirectoryIcon
+
+<PropsTable>{/* <PropsTableSxRow /> */}</PropsTable>
+
 ### TreeView.SubTree
 
 <PropsTable>
@@ -307,45 +343,38 @@ See [Storybook](https://primer.style/react/storybook?path=/story/components-tree
       </>
     }
   />
-  {/* <PropsTableSxRow /> */}
-</PropsTable>
-
-### TreeView.LeadingVisual
-
-<PropsTable>
   <PropsTableRow
-    name="children"
-    type={`| React.ReactNode
-| (props: {isExpanded: boolean}) => React.ReactNode`}
+    name="count"
+    type="number"
+    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"
   />
-  <PropsTableRow
-    name="label"
-    type="string"
-    description="Provide an accessible label for the leading visual. This is not necessary for decorative visuals"
-  />
-  {/* <PropsTableSxRow /> */}
+  <PropsTableSxRow />
 </PropsTable>
 
-### TreeView.TrailingVisual
+### TreeView.ErrorDialog
 
 <PropsTable>
   <PropsTableRow
     name="children"
-    type={`| React.ReactNode
-| (props: {isExpanded: boolean}) => React.ReactNode`}
+    type="React.ReactNode"
+    required
+    description="The content of the dialog. This is usually a message explaining the error."
   />
   <PropsTableRow
-    name="label"
+    name="title"
     type="string"
-    description="Provide an accessible label for the trailing visual. This is not necessary for decorative visuals"
+    defaultValue="'Error'"
+    description="The title of the dialog. This is usually a short description of the error."
+  />
+  <PropsTableRow
+    name="onRetry"
+    type="() => void"
+    description="Event handler called when the user clicks the retry button."
   />
+  <PropsTableRow name="onDismiss" type="() => void" description="Event handler called when the dialog is dismissed." />
   {/* <PropsTableSxRow /> */}
 </PropsTable>
 
-### TreeView.DirectoryIcon
-
-<PropsTable>{/* <PropsTableSxRow /> */}</PropsTable>
-
 ## Status
 
 <ComponentChecklist