Merge branch 'main' into jclem/remove-duplicate-dep

Author: colebemis

.changeset/bright-timers-jog.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Adds responsive behavior to SegmentedControl's `fullWidth` prop.

.changeset/hip-buses-eat.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Change `createSlots` to use layout effects when registering slots

.changeset/old-experts-applaud.md

@@ -0,0 +1,7 @@
+---
+'@primer/react': patch
+---
+
+- Fixes `role` and keyboard behavior for SegmentedControl.
+- Fixes a bug where icon-only SegmentedControl buttons did not fill the parent width when the `fullWidth` prop was set
+- Fixes a bug where click handlers were not passed correctly when the responsive variant was set to `'hideLabels'`

.changeset/wicked-otters-warn.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Overlay documentation fixes

docs/content/Overlay.mdx

@@ -72,23 +72,13 @@ See the W3C accessibility recommendations for modals [here](https://www.w3.org/T
 
 ## Positioning
 
-`Overlay` renders its `children` within a div positioned absolutely within a portal within the default portal root. The overlay will not update its positioning if the portal root's positioning changes (e.g., if the portal root is statically positioned after some DOM element that dynamically resizes). You may consider [customizing the portal or specifying a different portal root](/Portal#customizing-the-portal-root) to achieve different positioning behavior.
+`Overlay` renders its `children` within a div positioned absolutely within a portal within the default portal root. The overlay will not update its positioning if the portal root's positioning changes (e.g., if the portal root is statically positioned after some DOM element that dynamically resizes). You may consider using the [AnchoredOverlay](/AnchoredOverlay) component or [customizing the portal root](/Portal#customizing-the-portal-root) to achieve different positioning behavior.
 
 ## Props
 
 ### Overlay
 
 <PropsTable>
-  <PropsTableRow
-    required
-    name="anchorRef"
-    type="React.RefObject<HTMLElement>"
-    description={
-      <>
-        Element the <InlineCode>Overlay</InlineCode> should be anchored to.
-      </>
-    }
-  />
   <PropsTableRow
     required
     name="returnFocusRef"
@@ -182,6 +172,23 @@ See the W3C accessibility recommendations for modals [here](https://www.w3.org/T
       </>
     }
   />
+  <PropsTableRow
+    name="maxHeight"
+    type={`| 'xsmall'
+| 'small'
+| 'medium'
+| 'large'
+| 'xlarge'`}
+    description={
+      <>
+        Sets the maximum height of the <InlineCode>Overlay</InlineCode>, pick from our set list of heights.
+        <InlineCode>xsmall</InlineCode> corresponds to <InlineCode>192px</InlineCode>, <InlineCode>small</InlineCode> corresponds
+        to <InlineCode>256px</InlineCode>, <InlineCode>medium</InlineCode> corresponds to <InlineCode>320px</InlineCode>,{' '}
+        <InlineCode>large</InlineCode> corresponds to <InlineCode>432px</InlineCode>, <InlineCode>xlarge</InlineCode> corresponds
+        to <InlineCode>600px</InlineCode>.
+      </>
+    }
+  />
   <PropsTableRow
     name="visibility"
     type={`| 'visible' 

docs/content/SegmentedControl.mdx

@@ -151,7 +151,16 @@ description: Use a segmented control to let users select an option from a short
   <PropsTableRow name="aria-label" type="string" />
   <PropsTableRow name="aria-labelledby" type="string" />
   <PropsTableRow name="aria-describedby" type="string" />
-  <PropsTableRow name="fullWidth" type="boolean" description="Whether the control fills the width of its parent" />
+  <PropsTableRow
+    name="fullWidth"
+    type={`| boolean
+| {
+  narrow?: boolean
+  regular?: boolean
+  wide?: boolean
+}`}
+    description="Whether the control fills the width of its parent"
+  />
   <PropsTableRow name="loading" type="boolean" description="Whether the selected segment is being calculated" />
   <PropsTableRow
     name="onChange"
@@ -161,10 +170,12 @@ description: Use a segmented control to let users select an option from a short
   />
   <PropsTableRow
     name="variant"
-    type="'default' | {
-      narrow?: 'hideLabels' | 'dropdown' | 'default'
-      regular?: 'hideLabels' | 'dropdown' | 'default'
-    }"
+    type={`| 'default'
+| {
+  narrow?: 'hideLabels' | 'dropdown' | 'default'
+  regular?: 'hideLabels' | 'dropdown' | 'default'
+  wide?: 'hideLabels' | 'dropdown' | 'default'
+}`}
     defaultValue="'default'"
     description="Configure alternative ways to render the control when it gets rendered in tight spaces"
   />

docs/content/drafts/UnderlineNav2.mdx

@@ -0,0 +1,85 @@
+---
+title: UnderlineNav v2
+status: Draft
+description: Use an underlined nav to allow tab like navigation with overflow behaviour in your UI.
+---
+
+## Examples
+
+### Simple
+
+```jsx live drafts
+<UnderlineNav label="simple nav">
+  <UnderlineNav.Link selected>Item 1</UnderlineNav.Link>
+  <UnderlineNav.Link>Item 2</UnderlineNav.Link>
+  <UnderlineNav.Link>Item 3</UnderlineNav.Link>
+</UnderlineNav>
+```
+
+### With icons
+
+```jsx live drafts
+<UnderlineNav label="simple nav with icons">
+  <UnderlineNav.Link selected leadingIcon={EyeIcon}>
+    Item 1
+  </UnderlineNav.Link>
+  <UnderlineNav.Link>Item 2</UnderlineNav.Link>
+</UnderlineNav>
+```
+
+## Props
+
+### UnderlineNav
+
+<PropsTable>
+  <PropsTableRow name="aria-label" type="string" />
+  <PropsTableRow name="aria-labelledby" type="string" />
+  <PropsTableRow name="aria-describedby" type="string" />
+  <PropsTableRow
+    name="overflow"
+    type="'auto' | 'menu' | 'scroll'"
+    description="Controls the type of overflow behaviour in smaller screens"
+  />
+  <PropsTableRow name="align" type="right | left" description="The alignment of the nav links" />
+  <PropsTableRow
+    name="afterSelect"
+    type="(event) => void"
+    description="The handler that gets called when a nav link child is selected"
+  />
+  <PropsTableSxRow />
+</PropsTable>
+
+### UnderlineNav.Link
+
+<PropsTable>
+  <PropsTableRow name="leadingIcon" type="Component" description="The leading icon comes before item label" />
+  <PropsTableRow name="selected" type="boolean" description="Whether the link is selected" />
+  <PropsTableRow
+    name="onSelect"
+    type="(event) => void"
+    description="The handler that gets called when a nav link is selected"
+  />
+  <PropsTableRow name="as" type="string | Component" description="What kind of component needs to be rendered" />
+  <PropsTableSxRow />
+</PropsTable>
+
+## Status
+
+<ComponentChecklist
+  items={{
+    propsDocumented: true,
+    noUnnecessaryDeps: false,
+    adaptsToThemes: false,
+    adaptsToScreenSizes: false,
+    fullTestCoverage: false,
+    usedInProduction: false,
+    usageExamplesDocumented: false,
+    hasStorybookStories: false,
+    designReviewed: false,
+    a11yReviewed: false,
+    stableApi: false,
+    addressedApiFeedback: false,
+    hasDesignGuidelines: false,
+    hasFigmaComponent: false
+  }}
+/>

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -38,6 +38,8 @@
       url: /ActionList
     - title: ActionMenu
       url: /ActionMenu
+    - title: AnchoredOverlay
+      url: /AnchoredOverlay
     - title: Autocomplete
       url: /Autocomplete
     - title: Avatar

src/SegmentedControl/SegmentedControl.test.tsx

@@ -9,7 +9,7 @@ import {SegmentedControl} from '.' // TODO: update import when we move this to t
 import theme from '../theme'
 import {BaseStyles, SSRProvider, ThemeProvider} from '..'
 import {act} from 'react-test-renderer'
-import {viewportRanges} from '../hooks/useMatchMedia'
+import {viewportRanges} from '../hooks/useResponsiveValue'
 
 const segmentData = [
   {label: 'Preview', id: 'preview', iconLabel: 'EyeIcon', icon: () => <EyeIcon aria-label="EyeIcon" />},
@@ -197,55 +197,6 @@ describe('SegmentedControl', () => {
     expect(handleClick).toHaveBeenCalled()
   })
 
-  it('focuses the selected button first', async () => {
-    const user = userEvent.setup()
-    const {getByRole} = render(
-      <>
-        <button>Before</button>
-        <SegmentedControl aria-label="File view">
-          {segmentData.map(({label, id}, index) => (
-            <SegmentedControl.Button selected={index === 1} key={label} id={id}>
-              {label}
-            </SegmentedControl.Button>
-          ))}
-        </SegmentedControl>
-      </>
-    )
-    const initialFocusButtonNode = getByRole('button', {name: segmentData[1].label})
-
-    expect(document.activeElement?.id).not.toEqual(initialFocusButtonNode.id)
-
-    await user.tab() // focus the button before the segmented control
-    await user.tab() // move focus into the segmented control
-
-    expect(document.activeElement?.id).toEqual(initialFocusButtonNode.id)
-  })
-
-  it('focuses the previous button when keying ArrowLeft, and the next button when keying ArrowRight', () => {
-    const {getByRole} = render(
-      <SegmentedControl aria-label="File view">
-        {segmentData.map(({label, id}, index) => (
-          <SegmentedControl.Button selected={index === 1} key={label} id={id}>
-            {label}
-          </SegmentedControl.Button>
-        ))}
-      </SegmentedControl>
-    )
-    const initialFocusButtonNode = getByRole('button', {name: segmentData[1].label})
-    const nextFocusButtonNode = getByRole('button', {name: segmentData[0].label})
-
-    expect(document.activeElement?.id).not.toEqual(nextFocusButtonNode.id)
-
-    fireEvent.focus(initialFocusButtonNode)
-    fireEvent.keyDown(initialFocusButtonNode, {key: 'ArrowLeft'})
-
-    expect(document.activeElement?.id).toEqual(nextFocusButtonNode.id)
-
-    fireEvent.keyDown(initialFocusButtonNode, {key: 'ArrowRight'})
-
-    expect(document.activeElement?.id).toEqual(initialFocusButtonNode.id)
-  })
-
   it('calls onChange with index of clicked segment button when using the dropdown variant', async () => {
     act(() => {
       matchMedia.useMediaQuery(viewportRanges.narrow)