Skip to content

Commit 9b46f0b

Browse files
pksjcepksjce
authored
Merge branch 'main' into pk/storybook-playfn
2 parents ef7f7b1 + 62dbc98 commit 9b46f0b

30 files changed

+1364
-246
lines changed

‎.changeset/breezy-trainers-drop.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+
Updates SegmentedControl styles to use component primitives.

‎.changeset/empty-garlics-clean.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
"@primer/react": minor
3+
---
4+
5+
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:
6+
7+
```jsx
8+
// Hide pane on narrow viewports
9+
<PageLayout.Pane hidden={{narrow: true}}>...</PageLayout.Pane>
10+
```

‎.changeset/grumpy-rings-sit.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+
Updates styles for the Select component so that the focus outline is even all the way around.

‎.changeset/pretty-students-judge.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+
Adds support for a responsive 'variant' prop to the SegmentedControl component

‎docs/content/PageLayout.mdx‎

Lines changed: 63 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,25 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
7676
</PageLayout>
7777
```
7878

79+
### With pane hidden on narrow viewports
80+
81+
```jsx live
82+
<PageLayout>
83+
<PageLayout.Header>
84+
<Placeholder label="Header" height={64} />
85+
</PageLayout.Header>
86+
<PageLayout.Content>
87+
<Placeholder label="Content" height={240} />
88+
</PageLayout.Content>
89+
<PageLayout.Pane position="start" hidden={{narrow: true}}>
90+
<Placeholder label="Pane" height={120} />
91+
</PageLayout.Pane>
92+
<PageLayout.Footer>
93+
<Placeholder label="Footer" height={64} />
94+
</PageLayout.Footer>
95+
</PageLayout>
96+
```
97+
7998
### With condensed spacing
8099

81100
```jsx live
@@ -112,8 +131,6 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
112131

113132
### PageLayout
114133

115-
<!-- TODO: Responsive variants -->
116-
117134
<PropsTable>
118135
<PropsTableRow
119136
name="containerWidth"
@@ -166,6 +183,17 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
166183
| 'filled'`}
167184
defaultValue="'inherit'"
168185
/>
186+
<PropsTableRow
187+
name="hidden"
188+
type={`| boolean
189+
| {
190+
narrow?: boolean
191+
regular?: boolean
192+
wide?: boolean
193+
}`}
194+
defaultValue="false"
195+
description="Whether the header is hidden."
196+
/>
169197
<PropsTableSxRow />
170198
</PropsTable>
171199

@@ -181,6 +209,17 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
181209
defaultValue="'full'"
182210
description="The maximum width of the content region."
183211
/>
212+
<PropsTableRow
213+
name="hidden"
214+
type={`| boolean
215+
| {
216+
narrow?: boolean
217+
regular?: boolean
218+
wide?: boolean
219+
}`}
220+
defaultValue="false"
221+
description="Whether the content is hidden."
222+
/>
184223
<PropsTableSxRow />
185224
</PropsTable>
186225

@@ -222,6 +261,17 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
222261
| 'filled'`}
223262
defaultValue="'inherit'"
224263
/>
264+
<PropsTableRow
265+
name="hidden"
266+
type={`| boolean
267+
| {
268+
narrow?: boolean
269+
regular?: boolean
270+
wide?: boolean
271+
}`}
272+
defaultValue="false"
273+
description="Whether the pane is hidden."
274+
/>
225275
<PropsTableSxRow />
226276
</PropsTable>
227277

@@ -242,6 +292,17 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
242292
| 'filled'`}
243293
defaultValue="'inherit'"
244294
/>
295+
<PropsTableRow
296+
name="hidden"
297+
type={`| boolean
298+
| {
299+
narrow?: boolean
300+
regular?: boolean
301+
wide?: boolean
302+
}`}
303+
defaultValue="false"
304+
description="Whether the footer is hidden."
305+
/>
245306
<PropsTableSxRow />
246307
</PropsTable>
247308

‎docs/content/SegmentedControl.mdx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ description: Use a segmented control to let users select an option from a short
4343
### With labels hidden on smaller viewports
4444

4545
```jsx live drafts
46-
<SegmentedControl aria-label="File view" variant={{narrow: 'hideLabels', regular: 'none'}}>
46+
<SegmentedControl aria-label="File view" variant={{narrow: 'hideLabels', regular: 'default'}}>
4747
<SegmentedControl.Button selected leadingIcon={EyeIcon}>
4848
Preview
4949
</SegmentedControl.Button>
@@ -55,7 +55,7 @@ description: Use a segmented control to let users select an option from a short
5555
### Convert to a dropdown on smaller viewports
5656

5757
```jsx live drafts
58-
<SegmentedControl aria-label="File view" variant={{narrow: 'dropdown', regular: 'none'}}>
58+
<SegmentedControl aria-label="File view" variant={{narrow: 'dropdown', regular: 'default'}}>
5959
<SegmentedControl.Button selected leadingIcon={EyeIcon}>
6060
Preview
6161
</SegmentedControl.Button>
@@ -161,11 +161,11 @@ description: Use a segmented control to let users select an option from a short
161161
/>
162162
<PropsTableRow
163163
name="variant"
164-
type="{
165-
narrow?: 'hideLabels' | 'dropdown',
166-
regular?: 'hideLabels' | 'dropdown',
167-
wide?: 'hideLabels' | 'dropdown'
164+
type="'default' | {
165+
narrow?: 'hideLabels' | 'dropdown' | 'default'
166+
regular?: 'hideLabels' | 'dropdown' | 'default'
168167
}"
168+
defaultValue="'default'"
169169
description="Configure alternative ways to render the control when it gets rendered in tight spaces"
170170
/>
171171
<PropsTableSxRow />

‎package-lock.json‎

Lines changed: 29 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@
8181
"dependencies": {
8282
"@primer/behaviors": "^1.1.1",
8383
"@primer/octicons-react": "^17.3.0",
84-
"@primer/primitives": "7.8.4",
84+
"@primer/primitives": "7.9.0",
8585
"@radix-ui/react-polymorphic": "^0.0.14",
8686
"@react-aria/ssr": "^3.1.0",
8787
"@styled-system/css": "^5.1.5",
@@ -167,7 +167,9 @@
167167
"husky": "7.0.4",
168168
"jest": "27.4.5",
169169
"jest-axe": "5.0.1",
170+
"jest-matchmedia-mock": "1.1.0",
170171
"jest-styled-components": "6.3.4",
172+
"jest-matchmedia-mock": "1.1.0",
171173
"jscodeshift": "0.13.0",
172174
"lint-staged": "12.1.2",
173175
"lodash.isempty": "4.4.0",

‎src/PageLayout/PageLayout.test.tsx‎

Lines changed: 53 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,21 @@
1-
import {render} from '@testing-library/react'
21
import React from 'react'
2+
import {act, render} from '@testing-library/react'
3+
import MatchMediaMock from 'jest-matchmedia-mock'
34
import {ThemeProvider} from '..'
5+
import {viewportRanges} from '../hooks/useResponsiveValue'
46
import {PageLayout} from './PageLayout'
57

8+
let matchMedia: MatchMediaMock
9+
610
describe('PageLayout', () => {
11+
beforeAll(() => {
12+
matchMedia = new MatchMediaMock()
13+
})
14+
15+
afterEach(() => {
16+
matchMedia.clear()
17+
})
18+
719
it('renders default layout', () => {
820
const {container} = render(
921
<ThemeProvider>
@@ -63,4 +75,44 @@ describe('PageLayout', () => {
6375
)
6476
expect(container).toMatchSnapshot()
6577
})
78+
79+
it('can hide pane when narrow', () => {
80+
// Set narrow viewport
81+
act(() => {
82+
matchMedia.useMediaQuery(viewportRanges.narrow)
83+
})
84+
85+
const {getByText} = render(
86+
<ThemeProvider>
87+
<PageLayout>
88+
<PageLayout.Header>Header</PageLayout.Header>
89+
<PageLayout.Content>Content</PageLayout.Content>
90+
<PageLayout.Pane hidden={{narrow: true}}>Pane</PageLayout.Pane>
91+
<PageLayout.Footer>Footer</PageLayout.Footer>
92+
</PageLayout>
93+
</ThemeProvider>
94+
)
95+
96+
expect(getByText('Pane')).not.toBeVisible()
97+
})
98+
99+
it('shows all subcomponents by default', () => {
100+
// Set regular viewport
101+
act(() => {
102+
matchMedia.useMediaQuery(viewportRanges.regular)
103+
})
104+
105+
const {getByText} = render(
106+
<ThemeProvider>
107+
<PageLayout>
108+
<PageLayout.Header>Header</PageLayout.Header>
109+
<PageLayout.Content>Content</PageLayout.Content>
110+
<PageLayout.Pane hidden={{narrow: true}}>Pane</PageLayout.Pane>
111+
<PageLayout.Footer>Footer</PageLayout.Footer>
112+
</PageLayout>
113+
</ThemeProvider>
114+
)
115+
116+
expect(getByText('Pane')).toBeVisible()
117+
})
66118
})

0 commit comments

Comments
 (0)