Merge branch 'main' into pk/storybook-playfn

.changeset/breezy-trainers-drop.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Updates SegmentedControl styles to use component primitives.

.changeset/empty-garlics-clean.md

@@ -0,0 +1,10 @@
+---
+"@primer/react": minor
+---
+
+Add a responsive `hidden` prop to `PageLayout.Header`, `PageLayout.Pane`, `PageLayout.Content`, and `PageLayout.Footer` that allows you to hide layout regions based on the viewport width. Example usage:
+
+```jsx
+// Hide pane on narrow viewports
+<PageLayout.Pane hidden={{narrow: true}}>...</PageLayout.Pane>
+```

.changeset/grumpy-rings-sit.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Updates styles for the Select component so that the focus outline is even all the way around.

.changeset/pretty-students-judge.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Adds support for a responsive 'variant' prop to the SegmentedControl component

docs/content/PageLayout.mdx

@@ -76,6 +76,25 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
 </PageLayout>
 ```
 
+### With pane hidden on narrow viewports
+
+```jsx live
+<PageLayout>
+  <PageLayout.Header>
+    <Placeholder label="Header" height={64} />
+  </PageLayout.Header>
+  <PageLayout.Content>
+    <Placeholder label="Content" height={240} />
+  </PageLayout.Content>
+  <PageLayout.Pane position="start" hidden={{narrow: true}}>
+    <Placeholder label="Pane" height={120} />
+  </PageLayout.Pane>
+  <PageLayout.Footer>
+    <Placeholder label="Footer" height={64} />
+  </PageLayout.Footer>
+</PageLayout>
+```
+
 ### With condensed spacing
 
 ```jsx live
@@ -112,8 +131,6 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
 
 ### PageLayout
 
-<!-- TODO: Responsive variants -->
-
 <PropsTable>
   <PropsTableRow
     name="containerWidth"
@@ -166,6 +183,17 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
 | 'filled'`}
     defaultValue="'inherit'"
   />
+  <PropsTableRow
+    name="hidden"
+    type={`| boolean
+| {
+  narrow?: boolean
+  regular?: boolean
+  wide?: boolean
+}`}
+    defaultValue="false"
+    description="Whether the header is hidden."
+  />
   <PropsTableSxRow />
 </PropsTable>
 
@@ -181,6 +209,17 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
     defaultValue="'full'"
     description="The maximum width of the content region."
   />
+  <PropsTableRow
+    name="hidden"
+    type={`| boolean
+| {
+  narrow?: boolean
+  regular?: boolean
+  wide?: boolean
+}`}
+    defaultValue="false"
+    description="Whether the content is hidden."
+  />
   <PropsTableSxRow />
 </PropsTable>
 
@@ -222,6 +261,17 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
 | 'filled'`}
     defaultValue="'inherit'"
   />
+  <PropsTableRow
+    name="hidden"
+    type={`| boolean
+| {
+  narrow?: boolean
+  regular?: boolean
+  wide?: boolean
+}`}
+    defaultValue="false"
+    description="Whether the pane is hidden."
+  />
   <PropsTableSxRow />
 </PropsTable>
 
@@ -242,6 +292,17 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
 | 'filled'`}
     defaultValue="'inherit'"
   />
+  <PropsTableRow
+    name="hidden"
+    type={`| boolean
+| {
+  narrow?: boolean
+  regular?: boolean
+  wide?: boolean
+}`}
+    defaultValue="false"
+    description="Whether the footer is hidden."
+  />
   <PropsTableSxRow />
 </PropsTable>
 

docs/content/SegmentedControl.mdx

@@ -43,7 +43,7 @@ description: Use a segmented control to let users select an option from a short
 ### With labels hidden on smaller viewports
 
 ```jsx live drafts
-<SegmentedControl aria-label="File view" variant={{narrow: 'hideLabels', regular: 'none'}}>
+<SegmentedControl aria-label="File view" variant={{narrow: 'hideLabels', regular: 'default'}}>
   <SegmentedControl.Button selected leadingIcon={EyeIcon}>
     Preview
   </SegmentedControl.Button>
@@ -55,7 +55,7 @@ description: Use a segmented control to let users select an option from a short
 ### Convert to a dropdown on smaller viewports
 
 ```jsx live drafts
-<SegmentedControl aria-label="File view" variant={{narrow: 'dropdown', regular: 'none'}}>
+<SegmentedControl aria-label="File view" variant={{narrow: 'dropdown', regular: 'default'}}>
   <SegmentedControl.Button selected leadingIcon={EyeIcon}>
     Preview
   </SegmentedControl.Button>
@@ -161,11 +161,11 @@ description: Use a segmented control to let users select an option from a short
   />
   <PropsTableRow
     name="variant"
-    type="{
-      narrow?: 'hideLabels' | 'dropdown',
-      regular?: 'hideLabels' | 'dropdown',
-      wide?: 'hideLabels' | 'dropdown'
+    type="'default' | {
+      narrow?: 'hideLabels' | 'dropdown' | 'default'
+      regular?: 'hideLabels' | 'dropdown' | 'default'
     }"
+    defaultValue="'default'"
     description="Configure alternative ways to render the control when it gets rendered in tight spaces"
   />
   <PropsTableSxRow />

package.json

@@ -81,7 +81,7 @@
   "dependencies": {
     "@primer/behaviors": "^1.1.1",
     "@primer/octicons-react": "^17.3.0",
-    "@primer/primitives": "7.8.4",
+    "@primer/primitives": "7.9.0",
     "@radix-ui/react-polymorphic": "^0.0.14",
     "@react-aria/ssr": "^3.1.0",
     "@styled-system/css": "^5.1.5",
@@ -167,7 +167,9 @@
     "husky": "7.0.4",
     "jest": "27.4.5",
     "jest-axe": "5.0.1",
+    "jest-matchmedia-mock": "1.1.0",
     "jest-styled-components": "6.3.4",
+    "jest-matchmedia-mock": "1.1.0",
     "jscodeshift": "0.13.0",
     "lint-staged": "12.1.2",
     "lodash.isempty": "4.4.0",

src/PageLayout/PageLayout.test.tsx

@@ -1,9 +1,21 @@
-import {render} from '@testing-library/react'
 import React from 'react'
+import {act, render} from '@testing-library/react'
+import MatchMediaMock from 'jest-matchmedia-mock'
 import {ThemeProvider} from '..'
+import {viewportRanges} from '../hooks/useResponsiveValue'
 import {PageLayout} from './PageLayout'
 
+let matchMedia: MatchMediaMock
+
 describe('PageLayout', () => {
+  beforeAll(() => {
+    matchMedia = new MatchMediaMock()
+  })
+
+  afterEach(() => {
+    matchMedia.clear()
+  })
+
   it('renders default layout', () => {
     const {container} = render(
       <ThemeProvider>
@@ -63,4 +75,44 @@ describe('PageLayout', () => {
     )
     expect(container).toMatchSnapshot()
   })
+
+  it('can hide pane when narrow', () => {
+    // Set narrow viewport
+    act(() => {
+      matchMedia.useMediaQuery(viewportRanges.narrow)
+    })
+
+    const {getByText} = render(
+      <ThemeProvider>
+        <PageLayout>
+          <PageLayout.Header>Header</PageLayout.Header>
+          <PageLayout.Content>Content</PageLayout.Content>
+          <PageLayout.Pane hidden={{narrow: true}}>Pane</PageLayout.Pane>
+          <PageLayout.Footer>Footer</PageLayout.Footer>
+        </PageLayout>
+      </ThemeProvider>
+    )
+
+    expect(getByText('Pane')).not.toBeVisible()
+  })
+
+  it('shows all subcomponents by default', () => {
+    // Set regular viewport
+    act(() => {
+      matchMedia.useMediaQuery(viewportRanges.regular)
+    })
+
+    const {getByText} = render(
+      <ThemeProvider>
+        <PageLayout>
+          <PageLayout.Header>Header</PageLayout.Header>
+          <PageLayout.Content>Content</PageLayout.Content>
+          <PageLayout.Pane hidden={{narrow: true}}>Pane</PageLayout.Pane>
+          <PageLayout.Footer>Footer</PageLayout.Footer>
+        </PageLayout>
+      </ThemeProvider>
+    )
+
+    expect(getByText('Pane')).toBeVisible()
+  })
 })