Skip to content

Commit 9b0d2be

Browse files
wiinciEbonsignori
wiinci
and
Ebonsignori
authored
Update docs to use Primer React 37 (#57265)
Co-authored-by: Evan Bonsignori <[email protected]>
1 parent 2c3fdf1 commit 9b0d2be

34 files changed

+432
-1216
lines changed

‎next.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ const { data } = frontmatter(fs.readFileSync(homepage, 'utf8'))
1515
const productIds = data.children
1616

1717
export default {
18+
// Transpile @primer/react so Next's webpack can process its CSS and other assets
19+
// This ensures CSS in node_modules/@primer/react is handled by the app's loaders.
20+
transpilePackages: ['@primer/react'],
1821
// speed up production `next build` by ignoring typechecking during that step of build.
1922
// type-checking still occurs in the Dockerfile build
2023
typescript: {

‎package-lock.json‎

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

‎package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@
166166
"@primer/live-region-element": "^0.7.2",
167167
"@primer/octicons": "^19.15.5",
168168
"@primer/octicons-react": "^19.14.0",
169-
"@primer/react": "36.27.0",
169+
"@primer/react": "^37.31.0",
170170
"accept-language-parser": "^1.5.0",
171171
"ajv": "^8.17.1",
172172
"ajv-errors": "^3.0.0",
@@ -177,6 +177,7 @@
177177
"cheerio": "^1.0.0-rc.12",
178178
"cheerio-to-text": "0.2.4",
179179
"classnames": "^2.5.1",
180+
"clsx": "^2.1.1",
180181
"connect-timeout": "1.9.1",
181182
"cookie-parser": "^1.4.7",
182183
"cuss": "2.2.0",
@@ -219,8 +220,8 @@
219220
"ora": "^8.0.1",
220221
"parse5": "7.1.2",
221222
"quick-lru": "7.0.1",
222-
"react": "18.3.1",
223-
"react-dom": "18.3.1",
223+
"react": "^18.3.1",
224+
"react-dom": "^18.3.1",
224225
"react-markdown": "^10.1.0",
225226
"rehype-highlight": "^7.0.2",
226227
"rehype-raw": "^7.0.0",

‎src/fixtures/tests/playwright-rendering.spec.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -526,7 +526,7 @@ test.describe('test nav at different viewports', () => {
526526
// hamburger button for sidebar overlay is visible
527527
await expect(page.getByTestId('sidebar-hamburger')).toBeVisible()
528528
await page.getByTestId('sidebar-hamburger').click()
529-
await expect(page.getByTestId('sidebar-product-dialog')).toBeVisible()
529+
await expect(page.locator('[role="dialog"][class*="Header_dialog"]')).toBeVisible()
530530
})
531531

532532
test('medium viewports - 768-1011', async ({ page }) => {
@@ -555,7 +555,7 @@ test.describe('test nav at different viewports', () => {
555555
// hamburger button for sidebar overlay is visible
556556
await expect(page.getByTestId('sidebar-hamburger')).toBeVisible()
557557
await page.getByTestId('sidebar-hamburger').click()
558-
await expect(page.getByTestId('sidebar-product-dialog')).toBeVisible()
558+
await expect(page.locator('[role="dialog"][class*="Header_dialog"]')).toBeVisible()
559559
})
560560

561561
test('small viewports - 544-767', async ({ page }) => {
@@ -588,7 +588,7 @@ test.describe('test nav at different viewports', () => {
588588
// hamburger button for sidebar overlay is visible
589589
await expect(page.getByTestId('sidebar-hamburger')).toBeVisible()
590590
await page.getByTestId('sidebar-hamburger').click()
591-
await expect(page.getByTestId('sidebar-product-dialog')).toBeVisible()
591+
await expect(page.locator('[role="dialog"][class*="Header_dialog"]')).toBeVisible()
592592
})
593593

594594
test('x-small viewports - 0-544', async ({ page }) => {
@@ -627,7 +627,7 @@ test.describe('test nav at different viewports', () => {
627627
// hamburger button for sidebar overlay is visible
628628
await expect(page.getByTestId('sidebar-hamburger')).toBeVisible()
629629
await page.getByTestId('sidebar-hamburger').click()
630-
await expect(page.getByTestId('sidebar-product-dialog')).toBeVisible()
630+
await expect(page.locator('[role="dialog"][class*="Header_dialog"]')).toBeVisible()
631631
})
632632

633633
test('do a search when the viewport is x-small', async ({ page }) => {

‎src/fixtures/tests/sidebar.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ describe('sidebar', () => {
2424
const $: cheerio.Root = await getDOM('/get-started/start-your-journey/hello-world')
2525
expect(
2626
$(
27-
'[data-testid=sidebar] [data-testid=product-sidebar] a[aria-current="page"] div span',
27+
'[data-testid=sidebar] [data-testid=product-sidebar] a[aria-current="page"] span span',
2828
).text(),
2929
).toBe('Hello World')
3030
})
@@ -35,7 +35,7 @@ describe('sidebar', () => {
3535
// from its regular title.
3636
expect(
3737
$(
38-
'[data-testid=sidebar] [data-testid=product-sidebar] a[href*="/get-started/foo/bar"] div span',
38+
'[data-testid=sidebar] [data-testid=product-sidebar] a[href*="/get-started/foo/bar"] span span',
3939
).text(),
4040
).toBe('Bar')
4141
})

‎src/frame/components/page-header/Header.module.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import "@primer/css/support/variables/layout.scss";
22
@import "@primer/css/support/mixins/layout.scss";
3+
@import "src/frame/stylesheets/breakpoint-xxl.scss";
34

45
.header {
56
display: unset;
@@ -51,3 +52,13 @@
5152
visibility: visible !important;
5253
}
5354
}
55+
56+
.dialog {
57+
@include breakpoint-xxl {
58+
display: none;
59+
}
60+
61+
[class*="prc-Dialog-Body"] {
62+
padding: 0 !important;
63+
}
64+
}

‎src/frame/components/page-header/Header.tsx‎

Lines changed: 18 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import { useTranslation } from '@/languages/components/useTranslation'
1313
import { Breadcrumbs } from '@/frame/components/page-header/Breadcrumbs'
1414
import { VersionPicker } from '@/versions/components/VersionPicker'
1515
import { SidebarNav } from '@/frame/components/sidebar/SidebarNav'
16-
import { AllProductsLink } from '@/frame/components/sidebar/AllProductsLink'
1716
import { SearchBarButton } from '@/search/components/input/SearchBarButton'
1817
import { HeaderSearchAndWidgets } from './HeaderSearchAndWidgets'
1918
import { useInnerWindowWidth } from './hooks/useInnerWindowWidth'
@@ -34,8 +33,8 @@ export const Header = () => {
3433
const { params, updateParams } = useMultiQueryParams()
3534
const [scroll, setScroll] = useState(false)
3635
const [isSidebarOpen, setIsSidebarOpen] = useState(false)
37-
const openSidebar = useCallback(() => setIsSidebarOpen(true), [isSidebarOpen])
38-
const closeSidebar = useCallback(() => setIsSidebarOpen(false), [isSidebarOpen])
36+
const openSidebar = useCallback(() => setIsSidebarOpen(true), [])
37+
const closeSidebar = useCallback(() => setIsSidebarOpen(false), [])
3938
const isMounted = useRef(false)
4039
const menuButtonRef = useRef<HTMLButtonElement>(null)
4140
const { asPath } = useRouter()
@@ -204,45 +203,23 @@ export const Header = () => {
204203
onClick={openSidebar}
205204
ref={returnFocusRef}
206205
/>
207-
<Dialog
208-
returnFocusRef={returnFocusRef}
209-
isOpen={isSidebarOpen}
210-
onDismiss={closeSidebar}
211-
aria-labelledby="menu-title"
212-
sx={{
213-
position: 'fixed',
214-
top: '0',
215-
left: '0',
216-
marginTop: '0',
217-
maxHeight: '100vh',
218-
width: 'auto !important',
219-
transform: 'none',
220-
borderRadius: '0',
221-
borderRight:
222-
'1px solid var(--borderColor-default, var(--color-border-default))',
223-
}}
224-
>
225-
<Dialog.Header
226-
style={{ paddingTop: '0px', background: 'none' }}
227-
id="sidebar-overlay-header"
228-
sx={{ display: 'block' }}
206+
{isSidebarOpen && (
207+
<Dialog
208+
returnFocusRef={returnFocusRef}
209+
onClose={closeSidebar}
210+
className={cx(styles.dialog, 'd-xxl-none')}
211+
position="left"
212+
title={
213+
error === '404' || !currentProduct || isSearchResultsPage
214+
? null
215+
: currentProductName || currentProduct.name
216+
}
217+
subtitle={isRestPage && <ApiVersionPicker />}
218+
width="medium"
229219
>
230-
<AllProductsLink />
231-
{error === '404' || !currentProduct || isSearchResultsPage ? null : (
232-
<h2 className="mt-3">
233-
<Link
234-
data-testid="sidebar-product-dialog"
235-
href={currentProduct.href}
236-
className="d-block pl-1 mb-2 h3 color-fg-default no-underline"
237-
>
238-
{currentProductName || currentProduct.name}
239-
</Link>
240-
</h2>
241-
)}
242-
{isRestPage && <ApiVersionPicker />}
243-
</Dialog.Header>
244-
<SidebarNav variant="overlay" />
245-
</Dialog>
220+
<SidebarNav variant="overlay" />
221+
</Dialog>
222+
)}
246223
</div>
247224
)}
248225
<div className="mr-auto width-full" data-search="breadcrumbs">

‎src/frame/components/sidebar/SidebarNav.tsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,9 @@ export const SidebarNav = ({ variant = 'full' }: Props) => {
3333
<div
3434
data-container="nav"
3535
className={cx(variant === 'full' ? 'position-sticky d-none border-right d-xxl-block' : '')}
36-
style={{ width: 326, height: 'calc(100vh - 65px)', top: '65px' }}
36+
style={
37+
variant === 'full' ? { width: 326, height: 'calc(100vh - 65px)', top: '65px' } : undefined
38+
}
3739
>
3840
<nav
3941
aria-labelledby="allproducts-menu"
@@ -62,10 +64,16 @@ export const SidebarNav = ({ variant = 'full' }: Props) => {
6264
)}
6365
<div
6466
className={cx(
65-
variant === 'overlay' ? 'd-xxl-none' : 'border-right d-none d-xxl-block',
66-
'bg-primary overflow-y-auto flex-shrink-0',
67+
variant === 'overlay'
68+
? 'width-full d-xxl-none'
69+
: 'border-right d-none d-xxl-block overflow-y-auto',
70+
'bg-primary flex-shrink-0',
6771
)}
68-
style={{ width: 326, height: 'calc(100vh - 175px)', paddingBottom: sidebarPaddingBottom }}
72+
style={
73+
variant === 'overlay'
74+
? { paddingBottom: sidebarPaddingBottom }
75+
: { width: 326, height: 'calc(100vh - 175px)', paddingBottom: sidebarPaddingBottom }
76+
}
6977
role="region"
7078
aria-label="Page navigation content"
7179
>

‎src/frame/stylesheets/dialog-overrides.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@import "breakpoint-xxl.scss";
2+
3+
#__primerPortalRoot__ [class*="prc-Dialog-Backdrop"] {
4+
/* Make sure the dialog backdrop is hidden on large screens */
5+
display: flex;
6+
visibility: visible;
7+
8+
@include breakpoint-xxl {
9+
display: none !important;
10+
visibility: hidden !important;
11+
}
12+
}

‎src/frame/stylesheets/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
@import "headings.scss";
1212
@import "scroll-top.scss";
1313
@import "utilities.scss";
14+
@import "dialog-overrides.scss";
1415

1516
@import "src/content-render/stylesheets/index.scss";
1617
@import "src/links/stylesheets/hover-card.scss";

0 commit comments

Comments
 (0)