@primer/components 31.2.1-rc.f73a0f8c → 32.0.1-rc.c4c2c50a

package/src/SelectMenu/SelectMenuTabs.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled, {css} from 'styled-components'
-import {COMMON, get, SystemCommonProps} from '../constants'
+import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
 
@@ -23,9 +23,8 @@ const tabWrapperStyles = css`
   }
 `
 
-const SelectMenuTabsBase = styled.div<SystemCommonProps & SxProp>`
+const SelectMenuTabsBase = styled.div<SxProp>`
   ${tabWrapperStyles}
-  ${COMMON}
   ${sx};
 `
 

package/src/SideNav.tsx

@@ -1,7 +1,7 @@
 // eslint-disable-next-line import/no-namespace
 import * as History from 'history'
 
-import {COMMON, get} from './constants'
+import {get} from './constants'
 import styled, {css} from 'styled-components'
 
 import Box from './Box'
@@ -9,37 +9,36 @@ import {ComponentProps} from './utils/types'
 import Link from './Link'
 import React from 'react'
 import classnames from 'classnames'
-import sx from './sx'
+import sx, {SxProp} from './sx'
 
 type SideNavBaseProps = {
   variant?: 'lightweight' | 'normal'
   bordered?: boolean
-} & ComponentProps<typeof Box>
+  className?: string
+  children?: React.ReactNode
+  'aria-label'?: string
+}
 
-function SideNavBase({variant, className, bordered, children, ...props}: SideNavBaseProps) {
+function SideNavBase({variant, className, bordered, children, 'aria-label': ariaLabel}: SideNavBaseProps) {
   const variantClassName = variant === 'lightweight' ? 'lightweight' : 'normal'
   const newClassName = classnames(className, `variant-${variantClassName}`)
 
-  if (!bordered) {
-    props = {...props, borderWidth: 0}
-  }
-
   return (
     <Box
-      borderWidth="1px"
+      borderWidth={bordered ? '1px' : 0}
       borderStyle="solid"
       borderColor="border.default"
       borderRadius={2}
       as="nav"
       className={newClassName}
-      {...props}
+      aria-label={ariaLabel}
     >
       {children}
     </Box>
   )
 }
 
-const SideNav = styled(SideNavBase)`
+const SideNav = styled(SideNavBase)<SxProp>`
   background-color: ${get('colors.canvas.subtle')};
 
   ${props =>
@@ -53,7 +52,6 @@ const SideNav = styled(SideNavBase)`
       }
     `}
 
-  ${COMMON};
   ${sx};
 `
 type StyledSideNavLinkProps = {
@@ -85,7 +83,7 @@ const SideNavLink = styled(Link).attrs<StyledSideNavLinkProps>(props => {
   } else {
     return {}
   }
-})<StyledSideNavLinkProps>`
+})<StyledSideNavLinkProps & SxProp>`
   position: relative;
   display: block;
   ${props =>

package/src/StateLabel.tsx

@@ -9,7 +9,7 @@ import {
 import React from 'react'
 import styled from 'styled-components'
 import {variant} from 'styled-system'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import StyledOcticon from './StyledOcticon'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
@@ -77,8 +77,7 @@ const sizeVariants = variant({
 type StyledStateLabelBaseProps = {
   variant?: 'small' | 'normal'
   status?: keyof typeof octiconMap
-} & SystemCommonProps &
-  SxProp
+} & SxProp
 
 const StateLabelBase = styled.span<StyledStateLabelBaseProps>`
   display: inline-flex;
@@ -90,7 +89,6 @@ const StateLabelBase = styled.span<StyledStateLabelBaseProps>`
   border-radius: ${get('radii.3')};
   ${colorVariants};
   ${sizeVariants};
-  ${COMMON};
   ${sx};
 `
 
@@ -101,7 +99,7 @@ function StateLabel({children, status, variant: variantProp, ...rest}: StateLabe
   return (
     <StateLabelBase {...rest} variant={variantProp} status={status}>
       {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
-      {status && <StyledOcticon mr={1} {...octiconProps} icon={octiconMap[status] || QuestionIcon} />}
+      {status && <StyledOcticon {...octiconProps} icon={octiconMap[status] || QuestionIcon} sx={{mr: 1}} />}
       {children}
     </StateLabelBase>
   )

package/src/StyledOcticon.tsx

@@ -1,7 +1,6 @@
 import {IconProps} from '@primer/octicons-react'
 import React from 'react'
 import styled from 'styled-components'
-import {COMMON, SystemCommonProps} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
@@ -11,8 +10,7 @@ function Octicon({icon: IconComponent, ...rest}: OcticonProps) {
   return <IconComponent {...rest} />
 }
 
-const StyledOcticon = styled(Octicon)<SystemCommonProps & SxProp>`
-  ${COMMON}
+const StyledOcticon = styled(Octicon)<SxProp>`
   ${sx}
 `
 

package/src/SubNav.tsx

@@ -3,15 +3,14 @@ import classnames from 'classnames'
 import * as History from 'history'
 import React from 'react'
 import styled from 'styled-components'
-import {COMMON, FLEX, get, SystemBorderProps, SystemCommonProps, SystemFlexProps} from './constants'
-import Box, {BoxProps} from './Box'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
 const ITEM_CLASS = 'SubNav-item'
 const SELECTED_CLASS = 'selected'
 
-const SubNavBase = styled.nav<SystemFlexProps & SystemCommonProps & SxProp>`
+const SubNavBase = styled.nav<SxProp>`
   display: flex;
   justify-content: space-between;
 
@@ -32,8 +31,6 @@ const SubNavBase = styled.nav<SystemFlexProps & SystemCommonProps & SxProp>`
     align-self: center;
   }
 
-  ${COMMON};
-  ${FLEX};
   ${sx};
 `
 
@@ -54,18 +51,17 @@ function SubNav({actions, className, children, label, ...rest}: SubNavProps) {
   )
 }
 
-export type SubNavLinksProps = BoxProps
+export type SubNavLinksProps = SxProp
 
-function SubNavLinks(props: SubNavLinksProps) {
-  return <Box display="flex" {...props} />
-}
+const SubNavLinks = styled.div<SubNavLinksProps>`
+  display: flex;
+  ${sx};
+`
 
 type StyledSubNavLinkProps = {
   to?: History.LocationDescriptor
   selected?: boolean
-} & SystemCommonProps &
-  SxProp &
-  SystemBorderProps
+} & SxProp
 
 const SubNavLink = styled.a.attrs<StyledSubNavLinkProps>(props => ({
   activeClassName: typeof props.to === 'string' ? 'selected' : '',
@@ -117,7 +113,6 @@ const SubNavLink = styled.a.attrs<StyledSubNavLinkProps>(props => ({
     }
   }
 
-  ${COMMON};
   ${sx};
 `
 

package/src/TabNav.tsx

@@ -3,17 +3,16 @@ import classnames from 'classnames'
 import * as History from 'history'
 import React from 'react'
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps, SystemTypographyProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
 const ITEM_CLASS = 'TabNav-item'
 const SELECTED_CLASS = 'selected'
 
-const TabNavBase = styled.div<SystemCommonProps & SxProp>`
+const TabNavBase = styled.div<SxProp>`
   margin-top: 0;
   border-bottom: 1px solid ${get('colors.border.default')};
-  ${COMMON}
   ${sx}
 `
 
@@ -36,9 +35,7 @@ function TabNav({children, 'aria-label': ariaLabel, ...rest}: TabNavProps) {
 type StyledTabNavLinkProps = {
   to?: History.LocationDescriptor
   selected?: boolean
-} & SystemCommonProps &
-  SxProp &
-  SystemTypographyProps
+} & SxProp
 
 const TabNavLink = styled.a.attrs<StyledTabNavLinkProps>(props => ({
   activeClassName: typeof props.to === 'string' ? 'selected' : '',
@@ -67,7 +64,6 @@ const TabNavLink = styled.a.attrs<StyledTabNavLinkProps>(props => ({
     background-color: ${get('colors.canvas.default')};
   }
 
-  ${COMMON};
   ${sx};
 `
 

package/src/Timeline.tsx

@@ -1,12 +1,12 @@
 import classnames from 'classnames'
 import React from 'react'
 import styled, {css} from 'styled-components'
-import Box, {BoxProps} from './Box'
-import {COMMON, get} from './constants'
-import sx from './sx'
+import {Box} from '.'
+import {get} from './constants'
+import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
-const Timeline = styled(Box)<{clipSidebar?: boolean}>`
+const Timeline = styled.div<{clipSidebar?: boolean} & SxProp>`
   display: flex;
   flex-direction: column;
   ${props =>
@@ -24,9 +24,9 @@ const Timeline = styled(Box)<{clipSidebar?: boolean}>`
   ${sx};
 `
 
-type StyledTimelineItemProps = {condensed?: boolean}
+type StyledTimelineItemProps = {condensed?: boolean} & SxProp
 
-const TimelineItem = styled(Box).attrs<StyledTimelineItemProps>(props => ({
+const TimelineItem = styled.div.attrs<StyledTimelineItemProps>(props => ({
   className: classnames('Timeline-Item', props.className)
 }))<StyledTimelineItemProps>`
   display: flex;
@@ -64,18 +64,17 @@ const TimelineItem = styled(Box).attrs<StyledTimelineItemProps>(props => ({
       }
     `}
 
-  ${COMMON};
   ${sx};
 `
 
-export type TimelineBadgeProps = BoxProps
+export type TimelineBadgeProps = {children?: React.ReactNode} & SxProp
 
 const TimelineBadge = (props: TimelineBadgeProps) => {
   return (
     <Box position="relative" zIndex={1}>
       <Box
         display="flex"
-        className={classnames(props.className, 'TimelineItem-Badge')}
+        className="TimelineItem-Badge"
         flexShrink={0}
         borderRadius="50%"
         borderWidth="2px"
@@ -90,7 +89,7 @@ const TimelineBadge = (props: TimelineBadgeProps) => {
         ml="-15px"
         alignItems="center"
         justifyContent="center"
-        {...props}
+        sx={props.sx}
       >
         {props.children}
       </Box>
@@ -98,7 +97,7 @@ const TimelineBadge = (props: TimelineBadgeProps) => {
   )
 }
 
-const TimelineBody = styled(Box)`
+const TimelineBody = styled.div<SxProp>`
   min-width: 0;
   max-width: 100%;
   margin-top: ${get('space.1')};
@@ -108,7 +107,7 @@ const TimelineBody = styled(Box)`
   ${sx};
 `
 
-const TimelineBreak = styled(Box)`
+const TimelineBreak = styled.div<SxProp>`
   position: relative
   z-index: 1;
   height: 24px;

package/src/Tooltip.tsx

@@ -1,11 +1,11 @@
 import classnames from 'classnames'
 import React from 'react'
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
-const TooltipBase = styled.span<SystemCommonProps & SxProp>`
+const TooltipBase = styled.span<SxProp>`
   position: relative;
 
   &::before {
@@ -229,7 +229,7 @@ const TooltipBase = styled.span<SystemCommonProps & SxProp>`
   &.tooltipped-align-left-2::before {
     left: 10px;
   }
-  ${COMMON};
+
   ${sx};
 `
 

package/src/Truncate.tsx

@@ -1,6 +1,5 @@
 import styled from 'styled-components'
 import {maxWidth, MaxWidthProps} from 'styled-system'
-import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
@@ -9,13 +8,9 @@ type StyledTruncateProps = {
   inline?: boolean
   expandable?: boolean
 } & MaxWidthProps &
-  SystemTypographyProps &
-  SystemCommonProps &
   SxProp
 
 const Truncate = styled.div<StyledTruncateProps>`
-  ${TYPOGRAPHY}
-  ${COMMON}
   display: ${props => (props.inline ? 'inline-block' : 'inherit')};
   overflow: hidden;
   text-overflow: ellipsis;

package/src/UnderlineNav.tsx

@@ -3,14 +3,14 @@ import classnames from 'classnames'
 import * as History from 'history'
 import React from 'react'
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
 const ITEM_CLASS = 'UnderlineNav-item'
 const SELECTED_CLASS = 'selected'
 
-const UnderlineNavBase = styled.nav`
+const UnderlineNavBase = styled.nav<SxProp>`
   display: flex;
   justify-content: space-between;
   border-bottom: 1px solid ${get('colors.border.muted')};
@@ -39,7 +39,6 @@ const UnderlineNavBase = styled.nav`
     align-self: center;
   }
 
-  ${COMMON};
   ${sx};
 `
 
@@ -63,8 +62,7 @@ function UnderlineNav({actions, className, align, children, full, label, theme,
 type StyledUnderlineNavLinkProps = {
   to?: History.LocationDescriptor
   selected?: boolean
-} & SystemCommonProps &
-  SxProp
+} & SxProp
 
 const UnderlineNavLink = styled.a.attrs<StyledUnderlineNavLinkProps>(props => ({
   activeClassName: typeof props.to === 'string' ? 'selected' : '',
@@ -100,7 +98,6 @@ const UnderlineNavLink = styled.a.attrs<StyledUnderlineNavLinkProps>(props => ({
     }
   }
 
-  ${COMMON};
   ${sx};
 `
 

package/src/__tests__/Breadcrumbs.test.tsx

@@ -7,7 +7,7 @@ import 'babel-polyfill'
 expect.extend(toHaveNoViolations)
 
 describe('Breadcrumbs', () => {
-  behavesAsComponent({Component: Breadcrumbs})
+  behavesAsComponent({Component: Breadcrumbs, options: {skipAs: true}})
 
   checkExports('Breadcrumbs', {
     default: Breadcrumbs,

package/src/__tests__/Breadcrumbs.types.test.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import Breadcrumbs from '../Breadcrumbs'
+
+export function shouldAcceptCallWithNoProps() {
+  return (
+    <>
+      <Breadcrumbs />
+      <Breadcrumbs.Item />
+    </>
+  )
+}
+
+export function shouldNotAcceptSystemProps() {
+  return (
+    <>
+      {/* @ts-expect-error system props should not be accepted */}
+      <Breadcrumbs backgroundColor="maroon" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Breadcrumbs.Item backgroundColor="fuchsia" />
+    </>
+  )
+}

package/src/__tests__/Button.test.tsx

@@ -48,7 +48,7 @@ describe('Button', () => {
   })
 
   it('respects width props', () => {
-    expect(render(<Button width={200} />)).toHaveStyleRule('width', '200px')
+    expect(render(<Button sx={{width: 200}} />)).toHaveStyleRule('width', '200px')
   })
 
   it('respects the "disabled" prop', () => {
@@ -63,7 +63,7 @@ describe('Button', () => {
   })
 
   it('respects the "fontSize" prop over the "variant" prop', () => {
-    expect(render(<Button variant="small" fontSize={20} />)).toHaveStyleRule('font-size', '20px')
+    expect(render(<Button variant="small" sx={{fontSize: 20}} />)).toHaveStyleRule('font-size', '20px')
   })
 })
 

package/src/__tests__/CircleBadge.types.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import CircleBadge from '../CircleBadge'
+
+export function shouldAcceptCallWithNoProps() {
+  return <CircleBadge />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <CircleBadge backgroundColor="thistle" />
+}

package/src/__tests__/CounterLabel.types.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import CounterLabel from '../CounterLabel'
+
+export function shouldAcceptCallWithNoProps() {
+  return <CounterLabel />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <CounterLabel backgroundColor="whitesmoke" />
+}

package/src/__tests__/Dialog.types.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import Dialog from '../Dialog'
+
+export function shouldAcceptCallWithNoProps() {
+  return <Dialog />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <Dialog backgroundColor="thistle" />
+}

package/src/__tests__/Dialog2.types.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import {Dialog} from '../Dialog/Dialog'
+
+export function shouldAcceptCallWithNoProps() {
+  return <Dialog onClose={() => null} />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <Dialog onClose={() => null} backgroundColor="tomato" />
+}

package/src/__tests__/Dropdown.types.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import Dropdown from '../Dropdown'
+
+export function shouldAcceptCallWithNoProps() {
+  return <Dropdown />
+}
+
+export function shouldNotAcceptSystemProps() {
+  return (
+    <>
+      {/* @ts-expect-error system props should not be accepted */}
+      <Dropdown.Caret backgroundColor="thistle" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Dropdown.Menu backgroundColor="thistle" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Dropdown.Item backgroundColor="thistle" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Dropdown.Button backgroundColor="thistle" />
+    </>
+  )
+}

package/src/__tests__/FilterList.types.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import FilterList from '../FilterList'
+
+export function shouldAcceptCallWithNoProps() {
+  return <FilterList />
+}
+
+export function shouldNotAcceptSystemProps() {
+  return (
+    <>
+      {/* @ts-expect-error system props should not be accepted */}
+      <FilterList backgroundColor="thistle" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <FilterList.Item backgroundColor="thistle" />
+    </>
+  )
+}

package/src/__tests__/FilteredSearch.types.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import FilteredSearch from '../FilteredSearch'
+
+export function shouldAcceptCallWithNoProps() {
+  return <FilteredSearch />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <FilteredSearch backgroundColor="rosybrown" />
+}

package/src/__tests__/Flash.types.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import Flash from '../Flash'
+
+export function shouldAcceptCallWithNoProps() {
+  return <Flash />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <Flash backgroundColor="thistle" />
+}

package/src/__tests__/FormGroup.types.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import FormGroup from '../FormGroup'
+
+export function shouldAcceptCallWithNoProps() {
+  return <FormGroup />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <FormGroup backgroundColor="thistle" />
+}

package/src/__tests__/Header.types.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import Header from '../Header'
+
+export function shouldAcceptCallWithNoProps() {
+  return <Header />
+}
+
+export function shouldNotAcceptSystemProps() {
+  return (
+    <>
+      {/* @ts-expect-error system props should not be accepted */}
+      <Header backgroundColor="saddlebrown" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Header.Item backgroundColor="salmon" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Header.Link backgroundColor="sandybrown" />
+    </>
+  )
+}

package/src/__tests__/Label.types.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import Label from '../Label'
+
+export function shouldAcceptCallWithNoProps() {
+  return <Label />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <Label backgroundColor="mintcream" />
+}

package/src/__tests__/LabelGroup.types.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import LabelGroup from '../LabelGroup'
+
+export function shouldAcceptCallWithNoProps() {
+  return <LabelGroup />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <LabelGroup backgroundColor="khaki" />
+}

package/src/__tests__/Link.test.tsx

@@ -28,9 +28,9 @@ describe('Link', () => {
     expect(render(<Link hoverColor="accent.fg" />)).toMatchSnapshot()
   })
 
-  it('respects the "fontStyle" prop', () => {
-    expect(render(<Link fontStyle="italic" />)).toHaveStyleRule('font-style', 'italic')
-    expect(render(<Link as="i" fontStyle="normal" />)).toHaveStyleRule('font-style', 'normal')
+  it('respects the "sx" prop', () => {
+    expect(render(<Link sx={{fontStyle: 'italic'}} />)).toHaveStyleRule('font-style', 'italic')
+    expect(render(<Link as="i" sx={{fontStyle: 'normal'}} />)).toHaveStyleRule('font-style', 'normal')
   })
 
   it('applies button styles when rendering a button element', () => {
@@ -41,7 +41,7 @@ describe('Link', () => {
     expect(render(<Link muted />)).toMatchSnapshot()
   })
 
-  it('respectes the "color" prop when "muted" prop is also passed', () => {
-    expect(render(<Link muted color="fg.onEmphasis" />)).toMatchSnapshot()
+  it('respectes the  "sx" prop when "muted" prop is also passed', () => {
+    expect(render(<Link muted sx={{color: 'fg.onEmphasis'}} />)).toMatchSnapshot()
   })
 })