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,25 +1,25 @@
 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(
+    const {getByTestId} = render(
       <Caption data-testid="custom-caption">Caption with props</Caption>,
     )
     const el = getByTestId('custom-caption')
@@ -28,14 +28,14 @@
   })
 
   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.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,14 +38,9 @@ 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} style={{color: 'var(--fgColor-onEmphasis, var(--color-fg-on-emphasis))'}}>
         <span className={styles.headerText}>{title}</span>
-      </Box>
+      </div>
       <div className={styles.content}>
         {indented ? (
           <blockquote className={styles.indentedContent} style={{borderLeftColor: 'var(--brand-color-border-default)'}}>

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,13 @@
 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,
@@ -119,16 +119,10 @@
             </Head>
 
             <ContentWrapper disableAnimations={disablePageAnimation}>
-              <PRCBox
-                sx={{
-                  position: 'sticky',
-                  top: 0,
-                  zIndex: 99,
-                }}
-              >
+              <div style={{position: 'sticky', top: 0, zIndex: 99}}>
                 <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,7 +139,7 @@
                 </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 && (
                           <>
@@ -155,9 +149,7 @@
                                   <Breadcrumbs.Item
                                     as={NextLink}
                                     href="/"
-                                    sx={{
-                                      color: 'var(--brand-InlineLink-color-rest)',
-                                    }}
+                                    style={{color: 'var(--brand-InlineLink-color-rest)'}}
                                   >
                                     {activeHeaderLink ? activeHeaderLink.title : siteTitle}
                                   </Breadcrumbs.Item>
@@ -166,8 +158,6 @@
                                   .filter((item, index, array) => {
                                     const nextItem = array[index + 1]
 
-                                    // Skip when current item is a folder followed by its index page
-                                    // or when it is an index page with a tabbed navigation
                                     return !(
                                       (index < array.length - 1 &&
                                         nextItem.name === 'index' &&
@@ -192,7 +182,7 @@
                                         key={item.name}
                                         href={item.route}
                                         selected={isLastItem}
-                                        sx={{
+                                        style={{
                                           textTransform: 'capitalize',
                                           color: 'var(--brand-InlineLink-color-rest)',
                                         }}
@@ -204,7 +194,7 @@
                               </Breadcrumbs>
                             )}
 
-                            <Box>
+                            <div>
                               <Stack direction="vertical" padding="none" gap={12} alignItems="flex-start">
                                 {activeMetadata.title && (
                                   <Heading as="h1" size="3">
@@ -217,12 +207,12 @@
                                   </Text>
                                 )}
                                 {activeMetadata.image && (
-                                  <Box paddingBlockStart={16} style={{width: '100%'}}>
+                                  <div style={{paddingBlockStart: 'var(--base-size-16)', width: '100%'}}>
                                     <Hero.Image src={activeMetadata.image} alt={activeMetadata['image-alt']} />
-                                  </Box>
+                                  </div>
                                 )}
                                 {activeMetadata['action-1-text'] && (
-                                  <Box paddingBlockStart={16}>
+                                  <div style={{paddingBlockStart: 'var(--base-size-16)'}}>
                                     <ButtonGroup>
                                       <Button as="a" href={activeMetadata['action-1-link']}>
                                         {activeMetadata['action-1-text']}
@@ -233,10 +223,10 @@
                                         </Button>
                                       )}
                                     </ButtonGroup>
-                                  </Box>
+                                  </div>
                                 )}
                               </Stack>
-                            </Box>
+                            </div>
                             {activeMetadata['show-tabs'] && <UnderlineNav tabData={filteredTabData} />}
                           </>
                         )}
@@ -248,16 +238,16 @@
                               <>{children}</>
 
                               {relatedLinks.length > 0 && (
-                                <PRCBox sx={{pt: 5}}>
+                                <div style={{paddingTop: 'var(--base-size-20)'}}>
                                   <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.tsx

@@ -77,7 +77,7 @@
           }
 
           return (
-            <NavList.Group title={subNavName} key={item.name} sx={{mb: 24}}>
+            <NavList.Group title={subNavName} key={item.name} style={{marginBottom: 'var(--base-size-24)'}}>
               <NavList.GroupHeading as="h3">
                 <NextLink href={item.route}>{subNavName}</NextLink>
               </NavList.GroupHeading>
@@ -142,7 +142,7 @@
                         as={NextLink}
                         key={landingPageItem.route}
                         href={landingPageItem.route}
-                        sx={{textTransform: 'capitalize'}}
+                         style={{textTransform: 'capitalize'}}
                         aria-current={isCurrentOrChild ? 'page' : undefined}
                         className={styles.NavListItem}
                       >
@@ -155,7 +155,7 @@
           )
         })}
         {sidebarLinks.length > 0 && (
-          <NavList.Group title="" sx={{mb: 24}}>
+          <NavList.Group title="" style={{marginBottom: 'var(--base-size-24)'}}>
             {sidebarLinks.map(link => {
               return (
                 <NavList.Item

packages/theme/package.json

@@ -27,7 +27,7 @@
   "dependencies": {
     "@next/mdx": "15.5.2",
     "@primer/octicons-react": "19.15.1",
-    "@primer/react": "^37.11.0",
+    "@primer/react": "^38.0.0",
     "@types/lodash.debounce": "^4.0.9",
     "framer-motion": "12.4.0",
     "lodash.debounce": "^4.0.8",