@primer/components 31.2.1-rc.7fa29a87 → 32.0.0-rc.7200a6a6

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()
   })
 })

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

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

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

@@ -0,0 +1,18 @@
+import React from 'react'
+import Overlay from '../Overlay'
+
+export function shouldAcceptCallWithNoProps(ref: React.RefObject<HTMLElement>) {
+  return <Overlay returnFocusRef={ref} onClickOutside={() => null} onEscape={() => null} />
+}
+
+export function shouldNotAcceptSystemProps(ref: React.RefObject<HTMLElement>) {
+  return (
+    <Overlay
+      returnFocusRef={ref}
+      onClickOutside={() => null}
+      onEscape={() => null}
+      // @ts-expect-error system props should not be accepted
+      backgroundColor="olivedrab"
+    />
+  )
+}

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

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

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

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

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

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

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

@@ -0,0 +1,37 @@
+import React from 'react'
+import SelectMenu from '../SelectMenu'
+
+export function shouldAcceptCallWithNoProps() {
+  return <SelectMenu />
+}
+
+export function shouldNotAcceptSystemProps() {
+  return (
+    <>
+      {/* @ts-expect-error system props should not be accepted */}
+      <SelectMenu backgroundColor="lightgray" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <SelectMenu.List backgroundColor="lightgreen" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <SelectMenu.Divider backgroundColor="lightgrey" />
+      {/* This will not error for now, but once TextInputProps is fixed, a ts-expect-error can be added */}
+      <SelectMenu.Filter backgroundColor="lightpink" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <SelectMenu.Footer backgroundColor="lightsalmon" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <SelectMenu.Item backgroundColor="lightseagreen" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <SelectMenu.Modal backgroundColor="lightskyblue" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <SelectMenu.Tabs backgroundColor="lightslategray" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <SelectMenu.Tab backgroundColor="lightslategrey" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <SelectMenu.TabPanel backgroundColor="lightsteelblue" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <SelectMenu.Header backgroundColor="lightyellow" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <SelectMenu.LoadingAnimation backgroundColor="lightcyan" />
+    </>
+  )
+}

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

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

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

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

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

@@ -0,0 +1,12 @@
+import {MoonIcon} from '@primer/octicons-react'
+import React from 'react'
+import StyledOcticon from '../StyledOcticon'
+
+export function shouldAcceptCallWithNoProps() {
+  return <StyledOcticon icon={MoonIcon} />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <StyledOcticon backgroundColor="wheat" />
+}

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

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

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

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

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

@@ -0,0 +1,31 @@
+import React from 'react'
+import Timeline from '../Timeline'
+
+export function shouldAcceptCallWithNoProps() {
+  return (
+    <>
+      <Timeline />
+      <Timeline.Item />
+      <Timeline.Badge />
+      <Timeline.Body />
+      <Timeline.Break />
+    </>
+  )
+}
+
+export function shouldNotAcceptSystemProps() {
+  return (
+    <>
+      {/* @ts-expect-error system props should not be accepted */}
+      <Timeline backgroundColor="red" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Timeline.Item backgroundColor="orange" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Timeline.Badge backgroundColor="yellow" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Timeline.Body backgroundColor="green" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Timeline.Break backgroundColor="blue" />
+    </>
+  )
+}

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

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