Update Primer React to v38 (#72)

Author: danielguillan

package-lock.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",

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/site/package.json

@@ -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.module.css

@@ -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.test.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/caption/Caption.tsx

@@ -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.module.css

@@ -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/content/dos-and-donts/DosAndDonts.tsx

@@ -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.module.css

@@ -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}