fix(theme): update usage for v36 of @primer/react

primer · Nov 9, 2023 · 98de4aa · 98de4aa
1 parent 7d596ad
commit 98de4aa
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 10 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -5,9 +5,9 @@
   "license": "MIT",
   "scripts": {
     "clean": "gatsby clean",
-    "develop": "gatsby develop -H 0.0.0.0",
-    "build": "gatsby build --prefix-paths",
-    "build:preview": "gatsby build"
+    "develop": "NODE_OPTIONS='--openssl-legacy-provider --no-experimental-fetch' gatsby develop -H 0.0.0.0",
+    "build": "NODE_OPTIONS='--openssl-legacy-provider --no-experimental-fetch' gatsby build --prefix-paths",
+    "build:preview": "NODE_OPTIONS='--openssl-legacy-provider --no-experimental-fetch' gatsby build"
   },
   "dependencies": {
     "@primer/gatsby-theme-doctocat": "*",

diff --git a/theme/src/components/header.js b/theme/src/components/header.js
@@ -46,7 +46,7 @@ function Header({isSearchEnabled, path}) {
                 lineHeight: 'condensedUltra',
               }}
             >
-              <Octicon icon={MarkGithubIcon} size="24px" />
+              <Octicon icon={MarkGithubIcon} size={24} />
             </Link>
             {siteMetadata.header.title ? (
               <Link
@@ -148,15 +148,16 @@ function PrimerNavItems({siteMetadata, items, path, pathPrefix}) {
       </VisuallyHidden>
       <UnderlineNav aria-label="Main navigation" sx={{border: 'none'}}>
         {items.map((item, index) => {
+          const current = item.url === siteMetadata.header.url + (pathPrefix || '') + (path || '')
           return (
-            <UnderlineNav.Link
+            <UnderlineNav.Item
               key={index}
               href={item.url}
-              selected={item.url === siteMetadata.header.url + (pathPrefix || '') + (path || '')}
+              aria-current={current ? true : undefined}
               sx={{fontSize: 2, lineHeight: 'condensed'}}
             >
               {item.title}
-            </UnderlineNav.Link>
+            </UnderlineNav.Item>
           )
         })}
       </UnderlineNav>

diff --git a/theme/src/components/live-code.js b/theme/src/components/live-code.js
@@ -1,4 +1,4 @@
-import {Box, Text} from '@primer/react'
+import {Box, Text, useTheme} from '@primer/react'
 import htmlReactParser from 'html-react-parser'
 import githubTheme from '../github'
 import React, {useState} from 'react'
@@ -71,7 +71,7 @@ function LineHighlighter({enabled, range, children}) {
 }
 
 function LiveCode({code, language, highlight, noinline, metastring}) {
-  const theme = React.useContext(ThemeContext)
+  const {theme} = useTheme()
   const [liveCode, setLiveCode] = useState(code)
   const [pristine, setPristine] = useState(true)
   const handleChange = updatedLiveCode => {

diff --git a/theme/src/components/wrap-root-element.js b/theme/src/components/wrap-root-element.js
@@ -38,7 +38,7 @@ const components = {
   h5: H5,
   h6: H6,
   ul: List,
-  ol: List.withComponent('ol'),
+  ol: props => <List as="ol" {...props} />,
   dl: DescriptionList,
 
   // Custom components