@primer/components 32.1.1-rc.b4502a34 → 33.0.0-rc.b495ba4a

package/lib-esm/__tests__/Heading.test.js

@@ -4,6 +4,7 @@ import { render, behavesAsComponent, checkExports } from '../utils/testing';
 import { render as HTMLRender, cleanup } from '@testing-library/react';
 import { axe, toHaveNoViolations } from 'jest-axe';
 import 'babel-polyfill';
+import ThemeProvider from '../ThemeProvider';
 expect.extend(toHaveNoViolations);
 const theme = {
   breakpoints: ['400px', '640px', '960px', '1280px'],
@@ -46,54 +47,85 @@ describe('Heading', () => {
     cleanup();
   });
   it('respects fontWeight', () => {
-    expect(render( /*#__PURE__*/React.createElement(Heading, {
-      fontWeight: "bold",
+    expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
       theme: theme
-    }))).toHaveStyleRule('font-weight', theme.fontWeights.bold);
-    expect(render( /*#__PURE__*/React.createElement(Heading, {
-      fontWeight: "normal",
+    }, /*#__PURE__*/React.createElement(Heading, {
+      sx: {
+        fontWeight: 'bold'
+      }
+    })))).toHaveStyleRule('font-weight', theme.fontWeights.bold);
+    expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
       theme: theme
-    }))).toHaveStyleRule('font-weight', theme.fontWeights.normal);
-    expect(render( /*#__PURE__*/React.createElement(Heading, {
-      fontWeight: "semibold",
+    }, /*#__PURE__*/React.createElement(Heading, {
+      sx: {
+        fontWeight: 'normal'
+      }
+    })))).toHaveStyleRule('font-weight', theme.fontWeights.normal);
+    expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
       theme: theme
-    }))).toHaveStyleRule('font-weight', theme.fontWeights.semibold);
-    expect(render( /*#__PURE__*/React.createElement(Heading, {
-      fontWeight: "light",
+    }, /*#__PURE__*/React.createElement(Heading, {
+      sx: {
+        fontWeight: 'semibold'
+      }
+    })))).toHaveStyleRule('font-weight', theme.fontWeights.semibold);
+    expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
       theme: theme
-    }))).toHaveStyleRule('font-weight', theme.fontWeights.light);
+    }, /*#__PURE__*/React.createElement(Heading, {
+      sx: {
+        fontWeight: 'light'
+      }
+    })))).toHaveStyleRule('font-weight', theme.fontWeights.light);
   });
   it('respects lineHeight', () => {
-    expect(render( /*#__PURE__*/React.createElement(Heading, {
-      lineHeight: "normal",
+    expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
       theme: theme
-    }))).toHaveStyleRule('line-height', String(theme.lineHeights.normal));
-    expect(render( /*#__PURE__*/React.createElement(Heading, {
-      lineHeight: "condensed",
+    }, /*#__PURE__*/React.createElement(Heading, {
+      sx: {
+        lineHeight: 'normal'
+      }
+    })))).toHaveStyleRule('line-height', String(theme.lineHeights.normal));
+    expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
       theme: theme
-    }))).toHaveStyleRule('line-height', String(theme.lineHeights.condensed));
-    expect(render( /*#__PURE__*/React.createElement(Heading, {
-      lineHeight: "condensedUltra",
+    }, /*#__PURE__*/React.createElement(Heading, {
+      sx: {
+        lineHeight: 'condensed'
+      }
+    })))).toHaveStyleRule('line-height', String(theme.lineHeights.condensed));
+    expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
       theme: theme
-    }))).toHaveStyleRule('line-height', String(theme.lineHeights.condensedUltra));
+    }, /*#__PURE__*/React.createElement(Heading, {
+      sx: {
+        lineHeight: 'condensedUltra'
+      }
+    })))).toHaveStyleRule('line-height', String(theme.lineHeights.condensedUltra));
   });
   it('respects fontFamily="mono"', () => {
-    expect(render( /*#__PURE__*/React.createElement(Heading, {
-      fontFamily: "mono",
+    expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
       theme: theme
-    }))).toHaveStyleRule('font-family', theme.fonts.mono);
+    }, /*#__PURE__*/React.createElement(Heading, {
+      sx: {
+        fontFamily: 'mono'
+      }
+    })))).toHaveStyleRule('font-family', theme.fonts.mono);
   });
   it('renders fontSize', () => {
     for (const fontSize of theme.fontSizes) {
-      expect(render( /*#__PURE__*/React.createElement(Heading, {
-        fontSize: fontSize,
+      expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
         theme: theme
-      }))).toHaveStyleRule('font-size', `${fontSize}`);
+      }, /*#__PURE__*/React.createElement(Heading, {
+        sx: {
+          fontSize
+        }
+      })))).toHaveStyleRule('font-size', `${fontSize}`);
     }
   });
   it('respects the "fontStyle" prop', () => {
-    expect(render( /*#__PURE__*/React.createElement(Heading, {
-      fontStyle: "italic"
-    }))).toHaveStyleRule('font-style', 'italic');
+    expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/React.createElement(Heading, {
+      sx: {
+        fontStyle: 'italic'
+      }
+    })))).toHaveStyleRule('font-style', 'italic');
   });
 });

package/lib-esm/__tests__/Heading.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib-esm/__tests__/Heading.types.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Heading from '../Heading';
+export function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/React.createElement(Heading, null);
+}
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return /*#__PURE__*/React.createElement(Heading, {
+    backgroundColor: "thistle"
+  });
+}
+shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "32.1.1-rc.b4502a34",
+  "version": "33.0.0-rc.b495ba4a",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",

package/src/Avatar.tsx

@@ -1,5 +1,5 @@
 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'
 
@@ -12,8 +12,7 @@ type StyledAvatarProps = {
   src: string
   /** Provide alt text when the Avatar is used without the user's name next to it. */
   alt?: string
-} & SystemCommonProps &
-  SxProp
+} & SxProp
 
 function getBorderRadius({size, square}: StyledAvatarProps) {
   if (square) {
@@ -32,7 +31,6 @@ const Avatar = styled.img.attrs<StyledAvatarProps>(props => ({
   line-height: ${get('lineHeights.condensedUltra')};
   vertical-align: middle;
   border-radius: ${props => getBorderRadius(props)};
-  ${COMMON};
   ${sx}
 `
 

package/src/BranchName.tsx

@@ -1,9 +1,9 @@
 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 BranchName = styled.a<SystemCommonProps & SxProp>`
+const BranchName = styled.a<SxProp>`
   display: inline-block;
   padding: 2px 6px;
   font-size: ${get('fontSizes.0')};
@@ -11,7 +11,7 @@ const BranchName = styled.a<SystemCommonProps & SxProp>`
   color: ${get('colors.fg.muted')};
   background-color: ${get('colors.accent.subtle')};
   border-radius: ${get('radii.2')};
-  ${COMMON};
+
   ${sx};
 `
 

package/src/Details.tsx

@@ -1,11 +1,8 @@
 import styled from 'styled-components'
-import {COMMON, SystemCommonProps} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
-type StyledDetailsProps = SystemCommonProps & SxProp
-
-const Details = styled.details<StyledDetailsProps>`
+const Details = styled.details<SxProp>`
   & > summary {
     list-style: none;
   }
@@ -13,7 +10,6 @@ const Details = styled.details<StyledDetailsProps>`
     display: none;
   }
 
-  ${COMMON}
   ${sx};
 `
 

package/src/Heading.tsx

@@ -1,21 +1,14 @@
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
-import theme from './theme'
 import {ComponentProps} from './utils/types'
 
-const Heading = styled.h2<SystemTypographyProps & SystemCommonProps & SxProp>`
+const Heading = styled.h2<SxProp>`
   font-weight: ${get('fontWeights.bold')};
   font-size: ${get('fontSizes.5')};
   margin: 0;
-  ${TYPOGRAPHY};
-  ${COMMON};
   ${sx};
 `
 
-Heading.defaultProps = {
-  theme
-}
-
 export type HeadingProps = ComponentProps<typeof Heading>
 export default Heading

package/src/ProgressBar.tsx

@@ -1,13 +1,15 @@
 import React from 'react'
 import styled from 'styled-components'
 import {width, WidthProps} from 'styled-system'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
 
-const Bar = styled.span<{progress?: string | number} & SystemCommonProps>`
+type ProgressProp = {progress?: string | number}
+
+const Bar = styled.span<ProgressProp & SxProp>`
   width: ${props => (props.progress ? `${props.progress}%` : 0)};
-  ${COMMON}
+
+  ${sx};
 `
 
 const sizeMap = {
@@ -20,7 +22,6 @@ type StyledProgressContainerProps = {
   inline?: boolean
   barSize?: keyof typeof sizeMap
 } & WidthProps &
-  SystemCommonProps &
   SxProp
 
 const ProgressContainer = styled.span<StyledProgressContainerProps>`
@@ -29,17 +30,17 @@ const ProgressContainer = styled.span<StyledProgressContainerProps>`
   background-color: ${get('colors.border.default')};
   border-radius: ${get('radii.1')};
   height: ${props => sizeMap[props.barSize || 'default']};
-  ${COMMON}
+
   ${width}
   ${sx};
 `
 
-export type ProgressBarProps = ComponentProps<typeof ProgressContainer> & ComponentProps<typeof Bar>
+export type ProgressBarProps = {bg: string} & StyledProgressContainerProps & ProgressProp
 
-function ProgressBar({progress, bg, theme, ...rest}: ProgressBarProps) {
+function ProgressBar({progress, bg, ...rest}: ProgressBarProps) {
   return (
-    <ProgressContainer theme={theme} {...rest}>
-      <Bar progress={progress} bg={bg} theme={theme} />
+    <ProgressContainer {...rest}>
+      <Bar progress={progress} sx={{bg}} />
     </ProgressContainer>
   )
 }

package/src/Spinner.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import styled from 'styled-components'
-import {COMMON, SystemCommonProps} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
@@ -40,7 +39,7 @@ function Spinner({size: sizeKey = 'medium', ...props}: SpinnerInternalProps) {
   )
 }
 
-const StyledSpinner = styled(Spinner)<SystemCommonProps & SxProp>`
+const StyledSpinner = styled(Spinner)<SxProp>`
   @keyframes rotate-keyframes {
     100% {
       transform: rotate(360deg);
@@ -49,7 +48,6 @@ const StyledSpinner = styled(Spinner)<SystemCommonProps & SxProp>`
 
   animation: rotate-keyframes 1s linear infinite;
 
-  ${COMMON}
   ${sx}
 `
 

package/src/__tests__/Avatar.test.tsx

@@ -39,6 +39,6 @@ describe('Avatar', () => {
   })
 
   it('respects margin props', () => {
-    expect(render(<Avatar m={2} src="primer.png" alt="" />)).toHaveStyleRule('margin', px(theme.space[2]))
+    expect(render(<Avatar src="primer.png" alt="" sx={{m: 2}} />)).toHaveStyleRule('margin', px(theme.space[2]))
   })
 })

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

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

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

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

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

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

package/src/__tests__/Heading.test.tsx

@@ -4,6 +4,7 @@ import {render, behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender, cleanup} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import 'babel-polyfill'
+import ThemeProvider from '../ThemeProvider'
 expect.extend(toHaveNoViolations)
 
 const theme = {
@@ -48,44 +49,89 @@ describe('Heading', () => {
   })
 
   it('respects fontWeight', () => {
-    expect(render(<Heading fontWeight="bold" theme={theme} />)).toHaveStyleRule('font-weight', theme.fontWeights.bold)
-    expect(render(<Heading fontWeight="normal" theme={theme} />)).toHaveStyleRule(
-      'font-weight',
-      theme.fontWeights.normal
-    )
-    expect(render(<Heading fontWeight="semibold" theme={theme} />)).toHaveStyleRule(
-      'font-weight',
-      theme.fontWeights.semibold
-    )
-    expect(render(<Heading fontWeight="light" theme={theme} />)).toHaveStyleRule('font-weight', theme.fontWeights.light)
+    expect(
+      render(
+        <ThemeProvider theme={theme}>
+          <Heading sx={{fontWeight: 'bold'}} />
+        </ThemeProvider>
+      )
+    ).toHaveStyleRule('font-weight', theme.fontWeights.bold)
+    expect(
+      render(
+        <ThemeProvider theme={theme}>
+          <Heading sx={{fontWeight: 'normal'}} />
+        </ThemeProvider>
+      )
+    ).toHaveStyleRule('font-weight', theme.fontWeights.normal)
+    expect(
+      render(
+        <ThemeProvider theme={theme}>
+          <Heading sx={{fontWeight: 'semibold'}} />
+        </ThemeProvider>
+      )
+    ).toHaveStyleRule('font-weight', theme.fontWeights.semibold)
+    expect(
+      render(
+        <ThemeProvider theme={theme}>
+          <Heading sx={{fontWeight: 'light'}} />
+        </ThemeProvider>
+      )
+    ).toHaveStyleRule('font-weight', theme.fontWeights.light)
   })
 
   it('respects lineHeight', () => {
-    expect(render(<Heading lineHeight="normal" theme={theme} />)).toHaveStyleRule(
-      'line-height',
-      String(theme.lineHeights.normal)
-    )
-    expect(render(<Heading lineHeight="condensed" theme={theme} />)).toHaveStyleRule(
-      'line-height',
-      String(theme.lineHeights.condensed)
-    )
-    expect(render(<Heading lineHeight="condensedUltra" theme={theme} />)).toHaveStyleRule(
-      'line-height',
-      String(theme.lineHeights.condensedUltra)
-    )
+    expect(
+      render(
+        <ThemeProvider theme={theme}>
+          <Heading sx={{lineHeight: 'normal'}} />
+        </ThemeProvider>
+      )
+    ).toHaveStyleRule('line-height', String(theme.lineHeights.normal))
+    expect(
+      render(
+        <ThemeProvider theme={theme}>
+          <Heading sx={{lineHeight: 'condensed'}} />
+        </ThemeProvider>
+      )
+    ).toHaveStyleRule('line-height', String(theme.lineHeights.condensed))
+    expect(
+      render(
+        <ThemeProvider theme={theme}>
+          <Heading sx={{lineHeight: 'condensedUltra'}} />
+        </ThemeProvider>
+      )
+    ).toHaveStyleRule('line-height', String(theme.lineHeights.condensedUltra))
   })
 
   it('respects fontFamily="mono"', () => {
-    expect(render(<Heading fontFamily="mono" theme={theme} />)).toHaveStyleRule('font-family', theme.fonts.mono)
+    expect(
+      render(
+        <ThemeProvider theme={theme}>
+          <Heading sx={{fontFamily: 'mono'}} />
+        </ThemeProvider>
+      )
+    ).toHaveStyleRule('font-family', theme.fonts.mono)
   })
 
   it('renders fontSize', () => {
     for (const fontSize of theme.fontSizes) {
-      expect(render(<Heading fontSize={fontSize} theme={theme} />)).toHaveStyleRule('font-size', `${fontSize}`)
+      expect(
+        render(
+          <ThemeProvider theme={theme}>
+            <Heading sx={{fontSize}} />
+          </ThemeProvider>
+        )
+      ).toHaveStyleRule('font-size', `${fontSize}`)
     }
   })
 
   it('respects the "fontStyle" prop', () => {
-    expect(render(<Heading fontStyle="italic" />)).toHaveStyleRule('font-style', 'italic')
+    expect(
+      render(
+        <ThemeProvider theme={theme}>
+          <Heading sx={{fontStyle: 'italic'}} />
+        </ThemeProvider>
+      )
+    ).toHaveStyleRule('font-style', 'italic')
   })
 })

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

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