Merge branch 'main' into revert-select-panel

Author: broccolinisoup

.changeset/clever-hotels-kneel.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Fixes the sx prop on the SegmentedControl buttons by properly merging the sx prop when cloning button children.

.changeset/large-trains-press.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Adds a `size` prop to the SegmentedControl component. Users can choose between 'medium' (default), and 'small'. More sizes can be added when/if we find we need them.

.changeset/neat-squids-cheat.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Adds support for arrow key navigation of a TreeView using `aria-activedescendant`

.changeset/tidy-beans-punch.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add a `current` prop to `TreeView.Item` and `TreeView.LinkItem`

.github/release_template.md

@@ -25,4 +25,8 @@ Please ensure these items are checked before merging.
 - [ ] No noticeable regressions have not been introduced as a result of changes in this release
 - [ ] Release notes accurately describe the changes made
 
+### 🚢 After merge
+
+- [ ] Add the preview deployment's link to releases as a way of permalinking to old version's docs. [Example](https://github.com/primer/react/releases/tag/v35.9.0)
+
 Please also leave any testing notes as a comment on this pull request. In particular, describing any issues encountered during your testing. This is helpful in providing historical context to maintainers.

docs/content/PageLayout.mdx

@@ -202,6 +202,39 @@ Add `offsetHeader` prop to specify the height of the custom sticky header along
 </Box>
 ```
 
+### With `NavList`
+
+`PageLayout.Pane` by itself does not specify or provide landmark roles. Using
+components that define their own landmark roles, such as [`NavList`](/NavList), will provide
+clear structure to the page that is not present by default in `PageLayout.Pane`.
+
+It's important to note that multiple landmark roles, such as multiple
+`<nav>` elements, should be uniquely labelled in order to clarify what the
+navigation container is used for.
+
+```jsx live
+<PageLayout>
+  <PageLayout.Header>
+    <Placeholder label="Header" height={64} />
+  </PageLayout.Header>
+  <PageLayout.Pane position="start" aria-label="Secondary navigation">
+    <NavList>
+      <NavList.Item href="/" aria-current="page">
+        Home
+      </NavList.Item>
+      <NavList.Item href="/about">About</NavList.Item>
+      <NavList.Item href="/contact">Contact</NavList.Item>
+    </NavList>
+  </PageLayout.Pane>
+  <PageLayout.Content>
+    <Placeholder label="Content" height={240} />
+  </PageLayout.Content>
+  <PageLayout.Footer>
+    <Placeholder label="Footer" height={64} />
+  </PageLayout.Footer>
+</PageLayout>
+```
+
 ### With `aria-label`
 
 Using `aria-label` along with `PageLayout.Header`, `PageLayout.Content`, or `PageLayout.Footer` creates a unique label for that landmark role that can make it easier to navigate between sections of content on a page.
@@ -262,6 +295,20 @@ Each component may be labeled through either `aria-label` or `aria-labelledby` i
 - [WCAG, ARIA11 Technique](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA11)
 - [MDN, Landmark roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/landmark_role)
 
+### `PageLayout.Pane`
+
+The `PageLayout.Pane` component does not provide a default landmark role as the
+content of this component may have different roles. When using this component,
+consider the type of content being rendered inside of `PageLayout.Pane` and if
+it requires a landmark role. Common landmark roles include:
+
+- [`aside`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside)
+- [`navigation`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside)
+
+Some components, such as `NavList` may already include a landmark role. In these
+situation, these components use an appropriate landmark role and no further
+action is needed when using `PageLayout.Pane`.
+
 ### Screen readers
 
 Most screen readers provide a mechanism through which you can navigate between landmarks on the page. Typically, this is done through a specific keyboard shortcut or through an option in a rotor.

docs/content/SegmentedControl.mdx

@@ -39,6 +39,16 @@ const Controlled = () => {
 render(Controlled)
 ```
 
+### Small
+
+```jsx live
+<SegmentedControl aria-label="File view" size="small">
+  <SegmentedControl.Button defaultSelected>Preview</SegmentedControl.Button>
+  <SegmentedControl.Button>Raw</SegmentedControl.Button>
+  <SegmentedControl.Button>Blame</SegmentedControl.Button>
+</SegmentedControl>
+```
+
 ### With icons and labels
 
 ```jsx live
@@ -210,6 +220,7 @@ render(Controlled)
     type="boolean"
     description="Whether the segment is selected. This is used for controlled SegmentedControls, and needs to be updated using the onChange handler on SegmentedControl."
   />
+  <PropsTableRow name="selected" type="'small' | 'medium'" description="The size of the buttons" />
   <PropsTableRow
     name="defaultSelected"
     type="boolean"

docs/content/TreeView.mdx

@@ -19,7 +19,9 @@ description: A hierarchical list of items where nested items can be expanded and
         <TreeView.Item>
           Button
           <TreeView.SubTree>
-            <TreeView.LinkItem href="#">Button.tsx</TreeView.LinkItem>
+            <TreeView.LinkItem href="#" current>
+              Button.tsx
+            </TreeView.LinkItem>
             <TreeView.LinkItem href="#">Button.test.tsx</TreeView.LinkItem>
           </TreeView.SubTree>
         </TreeView.Item>
@@ -46,7 +48,7 @@ description: A hierarchical list of items where nested items can be expanded and
       src
       <TreeView.SubTree>
         <TreeView.LinkItem href="#">Avatar.tsx</TreeView.LinkItem>
-        <TreeView.LinkItem href="#">
+        <TreeView.LinkItem href="#" current>
           Button
           <TreeView.SubTree>
             <TreeView.LinkItem href="#">Button.tsx</TreeView.LinkItem>
@@ -80,6 +82,13 @@ description: A hierarchical list of items where nested items can be expanded and
 
 <PropsTable>
   <PropsTableRow name="children" type="React.ReactNode" required />
+  <PropsTable
+    name="current"
+    type="boolean"
+    defaultValue="false"
+    description="Whether the item is the current item. No more than one item should be current at once."
+  />
+  <PropsTableRow name="defaultExpanded" type="boolean" description="Whether the item is expanded by default." />
   <PropsTableRow
     name="onSelect"
     type="(event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void"

package-lock.json

@@ -602,6 +602,7 @@ export const CustomStickyHeader: Story = args => (
   // a box to create a sticky top element that will be on the consumer side and outside of the PageLayout component
   <Box data-testid="story-window">
     <Box
+      as="header"
       data-testid="sticky-header"
       sx={{
         position: 'sticky',