Use styled system array props

primer · Nov 10, 2022 · 1a5e9d3 · 1a5e9d3
1 parent ca19a99
commit 1a5e9d3
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/src/PageHeader/PageHeader.stories.tsx b/src/PageHeader/PageHeader.stories.tsx
@@ -1,10 +1,8 @@
 import React from 'react'
 import {Meta, Story} from '@storybook/react'
-import {Button, IconButton, Breadcrumbs} from '..'
+import {Box, Button, IconButton, Breadcrumbs} from '..'
 import {EyeClosedIcon, SearchIcon, TriangleDownIcon} from '@primer/octicons-react'
 
-//import {Box, BranchName, Heading, Link, StateLabel, TabNav, Text} from '..'
-
 import {PageHeader} from './PageHeader'
 
 const meta: Meta = {
@@ -24,7 +22,12 @@ const Template: Story = args => (
     </PageHeader.ContextNav>
     <PageHeader.TitleArea>Branches</PageHeader.TitleArea>
     <PageHeader.Actions>
-      <Button variant="primary">New Branch</Button>
+      <Box sx={{display: ['none', 'inline']}}>
+        <Button variant="primary">New Branch</Button>
+      </Box>
+      <Box sx={{display: ['inline', 'none']}}>
+        <Button variant="primary">New</Button>
+      </Box>
       <IconButton aria-label="Search" icon={SearchIcon} />
     </PageHeader.Actions>
   </PageHeader>

diff --git a/src/PageHeader/PageHeader.tsx b/src/PageHeader/PageHeader.tsx
@@ -61,7 +61,7 @@ const ContextNav: React.FC<React.PropsWithChildren<ContextNavProps>> = ({
     flexShrink: 1,
     minWidth: 1 // Hack to prevent overflowing content from pushing the pane region to the next line
   }
-  return <Box sx={merge(contentNavStyles, sx)}>{children}</Box>
+  return <Box sx={merge<BetterSystemStyleObject>(contentNavStyles, sx)}>{children}</Box>
 }
 const ParentLink: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({children, sx = {}}) => {
   return <Box sx={sx}>{children}</Box>