Removes styled system prop usage. (#301)

jfuchs · web-flow · commit ff74ecea1b37 · 2021-11-22T17:36:26.000-08:00
* Removes styled system prop usage.

* Changeset
diff --git a/.changeset/lemon-tomatoes-talk.md b/.changeset/lemon-tomatoes-talk.md
@@ -0,0 +1,5 @@
+---
+'@primer/gatsby-theme-doctocat': patch
+---
+
+Removed styled system prop usage on Primer React components.
diff --git a/theme/src/components/clipboard-copy.js b/theme/src/components/clipboard-copy.js
@@ -24,9 +24,9 @@ function ClipboardCopy({value}) {
       sx={{px: 2}}
     >
       {copied ? (
-        <StyledOcticon icon={CheckIcon} color="success.fg" />
+        <StyledOcticon icon={CheckIcon} sx={{color: 'success.fg'}} />
       ) : (
-        <StyledOcticon icon={CopyIcon} color="fg.muted" />
+        <StyledOcticon icon={CopyIcon} sx={{color: 'fg.muted'}} />
       )}
     </Button>
   )
diff --git a/theme/src/components/code.js b/theme/src/components/code.js
@@ -24,7 +24,7 @@ function Code({className, children, live, noinline}) {
         width: '100%'
       }}
     >
-      <Absolute top={0} right={0} p={2}>
+      <Absolute sx={{top: 0, right: 0, p: 2}}>
         <ClipboardCopy value={code} />
       </Absolute>
       <Highlight {...defaultProps} Prism={Prism} code={code} language={language} theme={githubTheme}>
diff --git a/theme/src/components/contributors.js b/theme/src/components/contributors.js
@@ -20,8 +20,7 @@ function Contributors({contributors}) {
           <Link
             key={contributor.login}
             href={`https://github.com/${contributor.login}`}
-            lineHeight="condensedUltra"
-            sx={{mr: 2}}
+            sx={{mr: 2, lineHeight: 'condensedUltra'}}
           >
             <Tooltip key={contributor.login} aria-label={contributor.login}>
               <Avatar src={`https://github.com/${contributor.login}.png?size=40`} alt={contributor.login} />
diff --git a/theme/src/components/do-dont.js b/theme/src/components/do-dont.js
@@ -26,7 +26,7 @@ function DoDontBase({children, title, icon: Icon, iconBg}) {
   return (
     <Box display="flex" flexDirection="column">
       <Box display="flex" alignSelf="start" flexDirection="row" alignItems="center" mb="2">
-        <StyledOcticon icon={Icon} color={iconBg} />
+        <StyledOcticon icon={Icon} sx={{color: iconBg}} />
         <Text fontWeight="bold" color="fg.default" ml={2}>
           {title}
         </Text>
diff --git a/theme/src/components/drawer.js b/theme/src/components/drawer.js
@@ -23,12 +23,8 @@ function Drawer({isOpen, onDismiss, children}) {
               animate={{opacity: 1}}
               exit={{opacity: 0}}
               transition={{type: 'tween'}}
-              top={0}
-              right={0}
-              bottom={0}
-              left={0}
-              bg="rgba(0, 0, 0, 0.5)"
               onClick={() => onDismiss()}
+              sx={{top: 0, right: 0, bottom: 0, left: 0, bg: 'rgba(0, 0, 0, 0.5)'}}
             />
 
             <Fixed
@@ -38,12 +34,8 @@ function Drawer({isOpen, onDismiss, children}) {
               animate={{x: 0}}
               exit={{x: '100%'}}
               transition={{type: 'tween', duration: 0.2}}
-              width={300}
-              top={0}
-              right={0}
-              bottom={0}
-              bg="gray.0"
               style={{zIndex: 1}}
+              sx={{width: 300, top: 0, right: 0, bottom: 0, bg: 'gray.0'}}
             >
               {children}
             </Fixed>
diff --git a/theme/src/components/hero-layout.js b/theme/src/components/hero-layout.js
@@ -15,10 +15,10 @@ function HeroLayout({children, pageContext}) {
   }
 
   return (
-    <Flex flexDirection="column" minHeight="100vh">
+    <Flex sx={{flexDirection: 'column', minHeight: '100vh'}}>
       <Head />
       <Header />
-      <Flex flex="1 1 auto" flexDirection="row">
+      <Flex sx={{flex: '1 1 auto', flexDirection: 'row'}}>
         <Box display={['none', null, null, 'block']}>
           <Sidebar />
         </Box>
diff --git a/theme/src/components/hero.js b/theme/src/components/hero.js
@@ -10,7 +10,7 @@ function Hero() {
     <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
       <Box bg="canvas.default" py={6}>
         <Container>
-          <Heading as="h1" color="accent.fg" fontSize={7} m={0}>
+          <Heading as="h1" sx={{color: 'accent.fg', fontSize: 7, m: 0}}>
             {title}
           </Heading>
           <Text as="p" m={0} color="fg.default" fontSize={4}>
diff --git a/theme/src/components/image-container.js b/theme/src/components/image-container.js
@@ -3,10 +3,8 @@ import React from 'react'
 
 function ImageContainer({children}) {
   return (
-    <BorderBox p={6} bg="gray.1">
-      <Flex justifyContent="center" sx={{img: {maxWidth: '100%'}}}>
-        {children}
-      </Flex>
+    <BorderBox sx={{p: 6, bg: 'gray.1'}}>
+      <Flex sx={{img: {maxWidth: '100%'}, justifyContent: 'center'}}>{children}</Flex>
     </BorderBox>
   )
 }
diff --git a/theme/src/components/layout.js b/theme/src/components/layout.js
@@ -26,10 +26,10 @@ function Layout({children, pageContext}) {
   }
 
   return (
-    <Flex flexDirection="column" minHeight="100vh">
+    <Flex sx={{flexDirection: 'column', minHeight: '100vh'}}>
       <Head title={title} description={description} />
       <Header />
-      <Flex flex="1 1 auto" flexDirection="row" css={{zIndex: 0}}>
+      <Flex css={{zIndex: 0}} sx={{flex: '1 1 auto', flexDirection: 'row'}}>
         <Box display={['none', null, null, 'block']}>
           <Sidebar />
         </Box>
@@ -45,12 +45,16 @@ function Layout({children, pageContext}) {
         >
           {pageContext.tableOfContents.items ? (
             <Position
-              sx={{width: 220, flex: '0 0 auto', marginLeft: 6}}
-              display={['none', null, 'block']}
+              sx={{
+                width: 220,
+                flex: '0 0 auto',
+                marginLeft: 6,
+                display: ['none', null, 'block'],
+                position: 'sticky',
+                top: HEADER_HEIGHT + 48,
+                maxHeight: `calc(100vh - ${HEADER_HEIGHT}px - 48px)`
+              }}
               css={{gridArea: 'table-of-contents', overflow: 'auto'}}
-              position="sticky"
-              top={HEADER_HEIGHT + 48}
-              maxHeight={`calc(100vh - ${HEADER_HEIGHT}px - 48px)`}
             >
               <Text display="inline-block" fontWeight="bold" mb={1}>
                 On this page
@@ -61,7 +65,7 @@ function Layout({children, pageContext}) {
           <Box width="100%" maxWidth="960px">
             <Box mb={4}>
               <Flex sx={{alignItems: 'center'}}>
-                <Heading as="h1" mr={2}>
+                <Heading as="h1" sx={{mr: 2}}>
                   {title}
                 </Heading>{' '}
                 {status ? <StatusLabel status={status} /> : null}
@@ -73,21 +77,25 @@ function Layout({children, pageContext}) {
               ) : null}
               {source || storybook ? (
                 <Grid
-                  py={2}
-                  gridGap={[1, null, 3]}
-                  gridAutoFlow={['row', null, 'column']}
-                  gridAutoColumns="max-content"
-                  gridAutoRows="max-content"
+                  sx={{
+                    py: 2,
+                    gridGap: [1, null, 3],
+                    gridAutoFlow: ['row', null, 'column'],
+                    gridAutoColumns: 'max-content',
+                    gridAutoRows: 'max-content'
+                  }}
                 >
                   {source ? <SourceLink href={source} /> : null}
                   {storybook ? <StorybookLink href={storybook} /> : null}
                 </Grid>
               ) : null}
             </Box>
             {pageContext.tableOfContents.items ? (
-              <BorderBox display={['block', null, 'none']} mb={5} borderColor="border.muted" bg="canvas.subtle">
+              <BorderBox
+                sx={{display: ['block', null, 'none'], mb: 5, borderColor: 'border.muted', bg: 'canvas.subtle'}}
+              >
                 <Box p={3}>
-                  <Flex flexDirection="row" justifyContent="space-between" alignItems="center">
+                  <Flex sx={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
                     <Text fontWeight="bold">On this page</Text>
                   </Flex>
                 </Box>
diff --git a/theme/src/components/live-code.js b/theme/src/components/live-code.js
@@ -40,7 +40,7 @@ function LiveCode({code, language, noinline}) {
   const handleChange = updatedLiveCode => setLiveCode(updatedLiveCode)
 
   return (
-    <Flex flexDirection="column" mb={3}>
+    <Flex sx={{flexDirection: 'column', mb: 3}}>
       <LiveProvider scope={scope} code={liveCode} transformCode={languageTransformers[language]} noInline={noinline}>
         <Flex
           sx={{
@@ -70,7 +70,7 @@ function LiveCode({code, language, noinline}) {
               borderColor: theme.colors.border.default
             }}
           />
-          <Absolute top={0} right={0} p={2}>
+          <Absolute sx={{top: 0, right: 0, p: 2}}>
             <ClipboardCopy value={liveCode} />
           </Absolute>
         </Relative>
diff --git a/theme/src/components/mobile-search.js b/theme/src/components/mobile-search.js
@@ -38,19 +38,14 @@ function MobileSearch({isOpen, onDismiss}) {
     <AnimatePresence>
       {isOpen ? (
         <FocusOn returnFocus={true} onEscapeKey={() => handleDismiss()}>
-          <Fixed top={0} left={0} right={0} bottom={0} zIndex={1}>
+          <Fixed sx={{top: 0, left: 0, right: 0, bottom: 0, zIndex: 1}}>
             <Absolute
               as={motion.div}
               initial={{opacity: 0}}
               animate={{opacity: 1}}
               exit={{opacity: 0}}
-              top={0}
-              left={0}
-              right={0}
-              bottom={0}
-              bg="primer.canvas.backdrop"
-              zIndex={-1}
               onClick={handleDismiss}
+              sx={{top: 0, left: 0, right: 0, bottom: 0, bg: 'primer.canvas.backdrop', zIndex: -1}}
             />
             <Downshift
               inputValue={query}
@@ -72,7 +67,7 @@ function MobileSearch({isOpen, onDismiss}) {
                     height: isMenuOpen ? '100%' : 'auto'
                   })}
                 >
-                  <Flex bg="canvas.default" color="fg.default" p={3} flex="0 0 auto">
+                  <Flex sx={{bg: 'canvas.default', color: 'fg.default', p: 3, flex: '0 0 auto'}}>
                     <motion.div
                       initial={{scaleX: 0.1}}
                       animate={{scaleX: 1}}
@@ -83,7 +78,7 @@ function MobileSearch({isOpen, onDismiss}) {
                       <TextInput
                         {...getInputProps({
                           placeholder: `Search`,
-                          width: '100%'
+                          sx: {width: '100%'}
                         })}
                       />
                     </motion.div>
diff --git a/theme/src/components/nav-drawer.js b/theme/src/components/nav-drawer.js
@@ -44,30 +44,32 @@ function NavDrawer({isOpen, onDismiss}) {
   return (
     <Drawer isOpen={isOpen} onDismiss={onDismiss}>
       <Flex
-        flexDirection="column"
-        height="100%"
-        bg="canvas.default"
         style={{overflow: 'auto', WebkitOverflowScrolling: 'touch'}}
+        sx={{flexDirection: 'column', height: '100%', bg: 'canvas.default'}}
       >
-        <Flex flexDirection="column" flex="0 0 auto" color="fg.default" bg="canvas.default">
-          <BorderBox borderWidth={0} borderRadius={0} borderBottomWidth={1} borderColor="border.muted">
-            <Flex py={3} pl={4} pr={3} alignItems="center" justifyContent="space-between">
-              <Link href="https://primer.style" fontFamily="mono" color="inherit">
+        <Flex sx={{flexDirection: 'column', flex: '0 0 auto', color: 'fg.default', bg: 'canvas.default'}}>
+          <BorderBox sx={{borderWidth: 0, borderRadius: 0, borderBottomWidth: 1, borderColor: 'border.muted'}}>
+            <Flex sx={{py: 3, pl: 4, pr: 3, alignItems: 'center', justifyContent: 'space-between'}}>
+              <Link href="https://primer.style" sx={{fontFamily: 'mono', color: 'inherit'}}>
                 Primer
               </Link>
               <Button aria-label="Close" onClick={onDismiss}>
                 <XIcon />
               </Button>
             </Flex>
           </BorderBox>
-          <Flex flexDirection="column">
+          <Flex sx={{flexDirection: 'column'}}>
             <PrimerNavItems items={primerNavItems} />
           </Flex>
         </Flex>
         {navItems.length > 0 ? (
           <ThemeProvider colorMode="day">
-            <Flex flexDirection="column" flex="1 0 auto" color="fg.default" bg="canvas.default">
-              <Link as={GatsbyLink} to="/" display="inline-block" color="inherit" fontFamily="mono" mx={4} my={4}>
+            <Flex sx={{flexDirection: 'column', flex: '1 0 auto', color: 'fg.default', bg: 'canvas.default'}}>
+              <Link
+                as={GatsbyLink}
+                to="/"
+                sx={{display: 'inline-block', color: 'inherit', fontFamily: 'mono', mx: 4, my: 4}}
+              >
                 {siteMetadata.title}
               </Link>
               <NavItems items={navItems} />
@@ -84,25 +86,21 @@ function PrimerNavItems({items}) {
     return (
       <BorderBox
         key={item.title}
-        borderWidth={0}
-        borderRadius={0}
-        borderTopWidth={index !== 0 ? 1 : 0}
-        borderColor="border.muted"
-        p={4}
+        sx={{borderWidth: 0, borderRadius: 0, borderTopWidth: index !== 0 ? 1 : 0, borderColor: 'border.muted', p: 4}}
       >
         {item.children ? (
           <Details key={index}>
             {({open, toggle}) => (
               <>
                 <summary onClick={toggle} style={{cursor: 'pointer'}}>
-                  <Flex alignItems="center" justifyContent="space-between">
+                  <Flex sx={{alignItems: 'center', justifyContent: 'space-between'}}>
                     <Text>{item.title}</Text>
                     {open ? <ChevronUpIcon /> : <ChevronDownIcon />}
                   </Flex>
                 </summary>
-                <Flex flexDirection="column" mt={2}>
+                <Flex sx={{flexDirection: 'column', mt: 2}}>
                   {item.children.map(child => (
-                    <Link key={child.title} href={child.url} py={1} mt={2} fontSize={1} color="inherit">
+                    <Link key={child.title} href={child.url} sx={{py: 1, mt: 2, fontSize: 1, color: 'inherit'}}>
                       {child.title}
                     </Link>
                   ))}
@@ -111,7 +109,7 @@ function PrimerNavItems({items}) {
             )}
           </Details>
         ) : (
-          <Link key={index} href={item.url} color="inherit" display="block">
+          <Link key={index} href={item.url} sx={{color: 'inherit', display: 'block'}}>
             {item.title}
           </Link>
         )}
diff --git a/theme/src/components/nav-dropdown.js b/theme/src/components/nav-dropdown.js
@@ -9,7 +9,7 @@ function NavDropdown({title, children}) {
     <Details {...getDetailsProps()}>
       <summary style={{cursor: 'pointer'}}>
         <Text>{title}</Text>
-        <StyledOcticon icon={TriangleDownIcon} ml={1} />
+        <StyledOcticon icon={TriangleDownIcon} sx={{ml: 1}} />
       </summary>
       <Box position="absolute">
         <Box
diff --git a/theme/src/components/nav-items.js b/theme/src/components/nav-items.js
@@ -38,7 +38,13 @@ function NavItems({items}) {
           p={4}
         >
           <Box display="flex" flexDirection="column">
-            <NavLink as={GatsbyLink} to={item.url} activeClassName="active" partiallyActive={true} color="inherit">
+            <NavLink
+              as={GatsbyLink}
+              to={item.url}
+              activeClassName="active"
+              partiallyActive={true}
+              sx={{color: 'inherit'}}
+            >
               {item.title}
             </NavLink>
             {item.children ? (
@@ -49,10 +55,12 @@ function NavItems({items}) {
                     as={GatsbyLink}
                     to={child.url}
                     activeClassName="active"
-                    display="block"
-                    py={1}
-                    mt={2}
-                    fontSize={1}
+                    sx={{
+                      display: 'block',
+                      py: 1,
+                      mt: 2,
+                      fontSize: 1
+                    }}
                   >
                     {child.title}
                   </NavLink>
@@ -64,10 +72,10 @@ function NavItems({items}) {
       ))}
       {repositoryUrl ? (
         <Box borderWidth={0} borderTopWidth={1} borderRadius={0} borderStyle="solid" borderColor="border.default" p={4}>
-          <Link href={repositoryUrl} color="inherit">
+          <Link href={repositoryUrl} sx={{color: 'inherit'}}>
             <Box display="flex" justifyContent="space-between" alignItems="center">
               GitHub
-              <StyledOcticon icon={LinkExternalIcon} color="fg.muted" />
+              <StyledOcticon icon={LinkExternalIcon} sx={{color: 'fg.muted'}} />
             </Box>
           </Link>
         </Box>
diff --git a/theme/src/components/page-footer.js b/theme/src/components/page-footer.js
@@ -5,11 +5,11 @@ import Contributors from './contributors'
 
 function PageFooter({editUrl, contributors}) {
   return editUrl || contributors.length > 0 ? (
-    <BorderBox borderWidth={0} borderTopWidth={1} borderRadius={0} mt={8} py={5}>
-      <Grid gridGap={4}>
+    <BorderBox sx={{borderWidth: 0, borderTopWidth: 1, borderRadius: 0, mt: 8, py: 5}}>
+      <Grid sx={{gridGap: 4}}>
         {editUrl ? (
           <Link href={editUrl}>
-            <StyledOcticon icon={PencilIcon} mr={2} />
+            <StyledOcticon icon={PencilIcon} sx={{mr: 2}} />
             Edit this page on GitHub
           </Link>
         ) : null}
diff --git a/theme/src/components/search.js b/theme/src/components/search.js
diff --git a/theme/src/components/sidebar.js b/theme/src/components/sidebar.js
diff --git a/theme/src/components/status-label.js b/theme/src/components/status-label.js

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@primer/gatsby-theme-doctocat': patch
 +---
++
 +Removed styled system prop usage on Primer React components.
Original file line number	Diff line number	Diff line change
`@@ -24,9 +24,9 @@ function ClipboardCopy({value}) {`
`24`	`24`	`sx={{px: 2}}`
`25`	`25`	`>`
`26`	`26`	`{copied ? (`
`27`		`- <StyledOcticon icon={CheckIcon} color="success.fg" />`
	`27`	`+ <StyledOcticon icon={CheckIcon} sx={{color: 'success.fg'}} />`
`28`	`28`	`) : (`
`29`		`- <StyledOcticon icon={CopyIcon} color="fg.muted" />`
	`29`	`+ <StyledOcticon icon={CopyIcon} sx={{color: 'fg.muted'}} />`
`30`	`30`	`)}`
`31`	`31`	`</Button>`
`32`	`32`	`)`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ function Code({className, children, live, noinline}) {`
`24`	`24`	`width: '100%'`
`25`	`25`	`}}`
`26`	`26`	`>`
`27`		`- <Absolute top={0} right={0} p={2}>`
	`27`	`+ <Absolute sx={{top: 0, right: 0, p: 2}}>`
`28`	`28`	`<ClipboardCopy value={code} />`
`29`	`29`	`</Absolute>`
`30`	`30`	`<Highlight {...defaultProps} Prism={Prism} code={code} language={language} theme={githubTheme}>`
Original file line number	Diff line number	Diff line change
`@@ -3,10 +3,8 @@ import React from 'react'`
`3`	`3`
`4`	`4`	`function ImageContainer({children}) {`
`5`	`5`	`return (`
`6`		`- <BorderBox p={6} bg="gray.1">`
`7`		`- <Flex justifyContent="center" sx={{img: {maxWidth: '100%'}}}>`
`8`		`- {children}`
`9`		`- </Flex>`
	`6`	`+ <BorderBox sx={{p: 6, bg: 'gray.1'}}>`
	`7`	`+ <Flex sx={{img: {maxWidth: '100%'}, justifyContent: 'center'}}>{children}</Flex>`
`10`	`8`	`</BorderBox>`
`11`	`9`	`)`
`12`	`10`	`}`