Update Primer React to v38

package.json

@@ -30,7 +30,7 @@
     "@changesets/cli": "2.27.12",
     "@github/prettier-config": "^0.0.6",
     "@oddbird/popover-polyfill": "^0.5.2",
-    "@primer/react": "37.18.0",
+    "@primer/react": "38.0.0",
     "@primer/react-brand": "0.54.0",
     "@types/node": "20.19.4",
     "@typescript-eslint/parser": "8.29.0",

packages/site/package.json

@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@github/prettier-config": "^0.0.6",
-    "@primer/react": "37.11.2",
+    "@primer/react": "38.0.0",
     "@primer/react-brand": "0.54.0",
     "@types/node": "20.19.4"
   }

packages/theme/components/content/caption/Caption.module.css

@@ -0,0 +1,6 @@
+.Caption {
+  margin-top: var(--base-size-8);
+  margin-bottom: var(--base-size-12);
+  font-size: var(--brand-text-size-100);
+  color: var(--brand-color-text-default);
+}

packages/theme/components/content/caption/Caption.test.tsx

@@ -1,41 +1,39 @@
 import React from 'react'
 import {describe, it, expect} from 'vitest'
-import {renderWithPrimerThemeProviders} from '../../../test/utils'
+import {render} from '@testing-library/react'
 import {Caption} from './Caption'
 
 describe('Caption', () => {
   it('renders children correctly', () => {
-    const {getByText} = renderWithPrimerThemeProviders(<Caption>Test caption</Caption>)
+    const {getByText} = render(<Caption>Test caption</Caption>)
     const el = getByText('Test caption')
     expect(el).toBeInTheDocument()
   })
 
   it('renders as a span element', () => {
-    const {getByText} = renderWithPrimerThemeProviders(<Caption>Styled caption</Caption>)
+    const {getByText} = render(<Caption>Styled caption</Caption>)
     const el = getByText('Styled caption')
 
     // Check if it's rendered as a span
     expect(el.tagName).toBe('SPAN')
   })
 
   it('passes through additional props', () => {
-    const {getByTestId} = renderWithPrimerThemeProviders(
-      <Caption data-testid="custom-caption">Caption with props</Caption>,
-    )
+    const {getByTestId} = render(<Caption data-testid="custom-caption">Caption with props</Caption>)
     const el = getByTestId('custom-caption')
     expect(el).toBeInTheDocument()
     expect(el).toHaveTextContent('Caption with props')
   })
 
   it('handles empty children', () => {
-    const {getByText} = renderWithPrimerThemeProviders(<Caption></Caption>)
+    const {getByText} = render(<Caption></Caption>)
     // Should render an empty span element
     const el = getByText('', {selector: 'span'})
     expect(el).toBeInTheDocument()
   })
 
   it('handles multiple children', () => {
-    const {getByText} = renderWithPrimerThemeProviders(
+    const {getByText} = render(
       <Caption>
         First part <strong>bold part</strong> last part
       </Caption>,

packages/theme/components/content/caption/Caption.tsx

@@ -1,6 +1,11 @@
 import React, {PropsWithChildren} from 'react'
-import {Text} from '@primer/react'
+import styles from './Caption.module.css'
 
 export function Caption(props: PropsWithChildren) {
-  return <Text as="span" {...props} sx={{mt: 2, mb: 3, fontSize: 1, color: 'var(--brand-color-text-default)'}} />
+  const {children, ...rest} = props
+  return (
+    <span className={styles.Caption} {...rest}>
+      {children}
+    </span>
+  )
 }

packages/theme/components/content/dos-and-donts/DosAndDonts.module.css

@@ -39,6 +39,10 @@
   color: var(--base-color-scale-white-0);
 }
 
+.header {
+  color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+}
+
 .content {
   display: flex;
   flex-direction: column;
@@ -55,6 +59,6 @@
 
 .indentedContent {
   margin: 0;
-  border-left: 4px solid;
+  border-left: 4px solid var(--brand-color-border-default);
   padding-left: 1rem;
 }

packages/theme/components/content/dos-and-donts/DosAndDonts.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import {Box} from '@primer/react'
 import clsx from 'clsx'
 import styles from './DosAndDonts.module.css'
 
@@ -39,22 +38,11 @@ type DoDontBaseProps = {
 export function DoDontBase({children, title, indented, className, ...rest}: React.PropsWithChildren<DoDontBaseProps>) {
   return (
     <div className={clsx(`exclude-from-prose`, styles.doDontBase, className)} {...rest}>
-      <Box
-        className={styles.header}
-        sx={{
-          color: 'var(--fgColor-onEmphasis, var(--color-fg-on-emphasis))',
-        }}
-      >
+      <div className={styles.header}>
         <span className={styles.headerText}>{title}</span>
-      </Box>
+      </div>
       <div className={styles.content}>
-        {indented ? (
-          <blockquote className={styles.indentedContent} style={{borderLeftColor: 'var(--brand-color-border-default)'}}>
-            {children}
-          </blockquote>
-        ) : (
-          children
-        )}
+        {indented ? <blockquote className={styles.indentedContent}>{children}</blockquote> : children}
       </div>
     </div>
   )

packages/theme/components/layout/nav-drawer/Drawer.module.css

@@ -0,0 +1,19 @@
+.DrawerOverlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+}
+
+.DrawerPanel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 300px;
+  background: var(--brand-color-canvas-default, var(--color-canvas-default));
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+}
+

packages/theme/components/layout/nav-drawer/Drawer.tsx

@@ -1,7 +1,7 @@
 import React, {PropsWithChildren} from 'react'
-import {Box} from '@primer/react'
 import {AnimatePresence, motion} from 'framer-motion'
 import {FocusOn} from 'react-focus-on'
+import styles from './Drawer.module.css'
 
 type Drawer = {
   isOpen: boolean
@@ -22,29 +22,26 @@ export function Drawer({isOpen, onDismiss, children}: PropsWithChildren<Drawer>)
           tabIndex={0}
         >
           <FocusOn returnFocus={true} onEscapeKey={() => onDismiss()}>
-            <Box
+            <motion.div
               key="overlay"
-              as={motion.div}
+              className={styles.DrawerOverlay}
               initial={{opacity: 0}}
               animate={{opacity: 1}}
               exit={{opacity: 0}}
               transition={{type: 'tween'}}
               onClick={() => onDismiss()}
-              sx={{top: 0, right: 0, bottom: 0, left: 0, bg: 'rgba(0, 0, 0, 0.5)', position: 'fixed', zIndex: 1}}
             />
 
-            <Box
+            <motion.div
               key="drawer"
-              as={motion.div}
+              className={styles.DrawerPanel}
               initial={{x: '100%'}}
               animate={{x: 0}}
               exit={{x: '100%'}}
               transition={{type: 'tween', duration: 0.2}}
-              style={{zIndex: 1}}
-              sx={{width: 300, top: 0, right: 0, bottom: 0, bg: 'gray.0', position: 'fixed'}}
             >
               {children}
-            </Box>
+            </motion.div>
           </FocusOn>
         </div>
       ) : null}

packages/theme/components/layout/root-layout/Theme.module.css

@@ -0,0 +1,35 @@
+.StickyHeader {
+  position: sticky;
+  top: 0;
+  z-index: 99;
+}
+
+.ContentContainer {
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.BreadcrumbRoot,
+.BreadcrumbItem {
+  color: var(--brand-InlineLink-color-rest);
+}
+
+.BreadcrumbItem {
+  text-transform: capitalize;
+}
+
+.HeroImageWrapper {
+  padding-block-start: var(--base-size-16);
+  width: 100%;
+}
+
+
+.ActionsWrapper {
+  padding-block-start: var(--base-size-16);
+}
+
+
+.RelatedLinks {
+  padding-top: var(--base-size-20);
+}

packages/theme/components/layout/root-layout/Theme.tsx

@@ -4,13 +4,12 @@ import NextLink from 'next/link'
 import Head from 'next/head'
 import type {Folder, MdxFile, PageMapItem} from 'nextra'
 import {useFSRoute} from 'nextra/hooks'
-import {BaseStyles, Box as PRCBox, Breadcrumbs, PageLayout, ThemeProvider} from '@primer/react'
+import {BaseStyles, Breadcrumbs, PageLayout, ThemeProvider} from '@primer/react'
 import '@primer/primitives/dist/css/functional/themes/light.css'
 import '@primer/primitives/dist/css/functional/themes/dark.css'
 import {
   Animate,
   AnimationProvider,
-  Box,
   ButtonGroup,
   ThemeProvider as BrandThemeProvider,
   Button,
@@ -38,6 +37,7 @@ import {RelatedContentLinks} from '../related-content-links/RelatedContentLinks'
 import {getRelatedPages} from '../related-content-links/getRelatedPages'
 import {hasChildren} from '../../../helpers/hasChildren'
 import {Footer} from '../footer/Footer'
+import styles from './Theme.module.css'
 
 const repoSrcPath = process.env.NEXT_PUBLIC_REPO_SRC_PATH || ''
 const repoURL = process.env.NEXT_PUBLIC_REPO || ''
@@ -119,16 +119,10 @@ export function Theme({pageMap, children}: ThemeProps) {
             </Head>
 
             <ContentWrapper disableAnimations={disablePageAnimation}>
-              <PRCBox
-                sx={{
-                  position: 'sticky',
-                  top: 0,
-                  zIndex: 99,
-                }}
-              >
+              <div className={styles.StickyHeader}>
                 <SkipToMainContent href="#main">Skip to main content</SkipToMainContent>
                 <Header flatDocsDirectories={flatDocsDirectories} siteTitle={siteTitle} pageMap={pageMap} />
-              </PRCBox>
+              </div>
               <PageLayout rowGap="none" columnGap="none" padding="none" containerWidth="full">
                 <PageLayout.Pane
                   width="small"
@@ -145,20 +139,14 @@ export function Theme({pageMap, children}: ThemeProps) {
                 </PageLayout.Pane>
                 <PageLayout.Content padding="normal">
                   <div id="main">
-                    <PRCBox sx={!isHomePage && {maxWidth: 1200, width: '100%', margin: '0 auto'}}>
+                    <div style={!isHomePage ? {maxWidth: 1200, width: '100%', margin: '0 auto'} : undefined}>
                       <Stack direction="vertical" padding="none" gap="spacious">
                         {!isHomePage && (
                           <>
                             {activePath.length > 0 && (
-                              <Breadcrumbs>
+                              <Breadcrumbs className={styles.BreadcrumbRoot}>
                                 {(activeHeaderLink || siteTitle) && (
-                                  <Breadcrumbs.Item
-                                    as={NextLink}
-                                    href="/"
-                                    sx={{
-                                      color: 'var(--brand-InlineLink-color-rest)',
-                                    }}
-                                  >
+                                  <Breadcrumbs.Item as={NextLink} href="/">
                                     {activeHeaderLink ? activeHeaderLink.title : siteTitle}
                                   </Breadcrumbs.Item>
                                 )}
@@ -192,10 +180,7 @@ export function Theme({pageMap, children}: ThemeProps) {
                                         key={item.name}
                                         href={item.route}
                                         selected={isLastItem}
-                                        sx={{
-                                          textTransform: 'capitalize',
-                                          color: 'var(--brand-InlineLink-color-rest)',
-                                        }}
+                                        className={styles.BreadcrumbItem}
                                       >
                                         {itemTitle.replace(/-/g, ' ')}
                                       </Breadcrumbs.Item>
@@ -204,7 +189,7 @@ export function Theme({pageMap, children}: ThemeProps) {
                               </Breadcrumbs>
                             )}
 
-                            <Box>
+                            <div>
                               <Stack direction="vertical" padding="none" gap={12} alignItems="flex-start">
                                 {activeMetadata.title && (
                                   <Heading as="h1" size="3">
@@ -217,12 +202,12 @@ export function Theme({pageMap, children}: ThemeProps) {
                                   </Text>
                                 )}
                                 {activeMetadata.image && (
-                                  <Box paddingBlockStart={16} style={{width: '100%'}}>
+                                  <div className={styles.HeroImageWrapper}>
                                     <Hero.Image src={activeMetadata.image} alt={activeMetadata['image-alt']} />
-                                  </Box>
+                                  </div>
                                 )}
                                 {activeMetadata['action-1-text'] && (
-                                  <Box paddingBlockStart={16}>
+                                  <div className={styles.ActionsWrapper}>
                                     <ButtonGroup>
                                       <Button as="a" href={activeMetadata['action-1-link']}>
                                         {activeMetadata['action-1-text']}
@@ -233,10 +218,10 @@ export function Theme({pageMap, children}: ThemeProps) {
                                         </Button>
                                       )}
                                     </ButtonGroup>
-                                  </Box>
+                                  </div>
                                 )}
                               </Stack>
-                            </Box>
+                            </div>
                             {activeMetadata['show-tabs'] && <UnderlineNav tabData={filteredTabData} />}
                           </>
                         )}
@@ -248,16 +233,16 @@ export function Theme({pageMap, children}: ThemeProps) {
                               <>{children}</>
 
                               {relatedLinks.length > 0 && (
-                                <PRCBox sx={{pt: 5}}>
+                                <div className={styles.RelatedLinks}>
                                   <RelatedContentLinks links={relatedLinks} />
-                                </PRCBox>
+                                </div>
                               )}
                             </>
                           )}
                         </article>
                         <Footer filePath={filePath} repoURL={repoURL} repoSrcPath={repoSrcPath} />
                       </Stack>
-                    </PRCBox>
+                    </div>
                   </div>
                 </PageLayout.Content>
               </PageLayout>

packages/theme/components/layout/sidebar/Sidebar.module.css

@@ -19,6 +19,14 @@
   font-size: var(--brand-text-size-100);
 }
 
+.NavListGroup {
+  margin-bottom: var(--base-size-24);
+}
+
+.NavListItemCapitalize {
+  text-transform: capitalize;
+}
+
 .NavList__Container li a,
 .NavList__Container li button {
   font-size: var(--brand-text-size-200);