Remove default theme prop

.changeset/tricky-humans-appear.md

@@ -0,0 +1,20 @@
+---
+"@primer/components": major
+---
+
+Components no longer have a default `theme` prop. To ensure components still render correctly, you'll need pass the Primer theme to a [styled-components](https://styled-components.com/) `<ThemeProvider>` at the root of your application:
+
+```jsx
+import {ThemeProvider} from 'styled-components'
+import {theme} from '@primer/components'
+
+funciton App(props) {
+  return (
+    <div>
+      <ThemeProvider theme={theme}>
+        <div>your app here</div>
+      </ThemeProvider>
+    </div>
+  )
+}
+```

contributor-docs/CONTRIBUTING.md

@@ -6,7 +6,6 @@
 4. [Developing Components](#developing-components)
    - [Tools we use](#tools-we-use)
    - [Component patterns](#component-patterns)
-   - [Adding default theme](#adding-default-theme)
    - [Adding system props](#adding-system-props)
    - [Adding the sx prop](#adding-the-sx-prop)
    - [Linting](#linting)
@@ -72,15 +71,14 @@ With a couple of exceptions, all components should be created with the `styled`
 
 Default values for system props can be set in `Component.defaultProps`.
 
-⚠️ **Make sure to always set the default `theme` prop to our [theme](https://github.com/primer/components/blob/main/src/theme-preval.js)! This allows consumers of our components to access our theme values without a ThemeProvider.**
+⚠️ **Do not set the default `theme` prop! This can sometimes override the theme provided by the ThemeProvider and cause unexpected theming issues.**
 
 Additionally, every component should support [the `sx` prop](https://primer.style/components/overriding-styles); remember to add `${sx}` to the style literal.
 
 Here's an example of a basic component written in the style of Primer Components:
 
 ```jsx
 import {TYPOGRAPHY, COMMON} from './constants'
-import theme from './theme'
 import sx from './sx
 
 const Component = styled.div`
@@ -92,28 +90,13 @@ const Component = styled.div`
 `
 
 Component.defaultProps = {
-  theme, // make sure to always set the default theme!
   m: 0,
   fontSize: 5,
 }
 
 export default Component
 ```
 
-### Adding default theme
-
-Each component needs access to our default Primer Theme, so that users of the component can access theme values easily in their consuming applications.
-
-To add the default theme to a component, import the theme and assign it to the component's defaultProps object:
-
-```jsx
-import theme from './theme'
-
-Component.defaultProps = {
-  theme // make sure to always set the default theme!
-}
-```
-
 ### Adding system props
 
 Each component should have access to the appropriate system props. Every component has access to `COMMON`. For **most** components added, you'll only need to give the component to `COMMON`. If you are unsure, ping a DS team member on your PR.
@@ -223,7 +206,6 @@ After opening a pull request, a member of the design systems team will add the a
 - If it's a new component, does the component make sense to add to Primer Components? (Ideally this is discussed before the pull request stage, please reach out to a DS member if you aren't sure if a component should be added to Primer Components!)
 - Does the component follow our [Primer Components code style](#component-patterns)?
 - Does the component use theme values for most CSS values?
-- Does the component have access to the [default theme](#adding-default-theme)?
 - Does the component have the [correct system props implemented](#adding-system-props)?
 - Is the component API intuitive?
 - Does the component have the appropriate [type definitions in `index.d.ts`](#typescript-support)?

docs/content/getting-started.md

@@ -79,11 +79,28 @@ This will apply the same `color`, `font-family`, and `line-height` styles to the
 
 ## Theming
 
-Components are styled using Primer's [theme](https://github.com/primer/components/blob/main/src/theme-preval.js) by default, but you can provide your own theme by using [styled-component's](https://styled-components.com/) `<ThemeProvider>`. If you'd like to fully replace the Primer [theme](https://github.com/primer/components/blob/main/src/theme-preval.js) with your custom theme, pass your theme to the `<ThemeProvider>` in the root of your application like so:
+For Primer Components to render correcly, you must pass the Primer theme to a [styled-components](<(https://styled-components.com/)>) `<ThemeProvider>` at the root of your application:
 
 ```jsx
 import {ThemeProvider} from 'styled-components'
+import {theme} from '@primer/components'
 
+const App = props => {
+  return (
+    <div>
+      <ThemeProvider theme={theme}>
+        <div>your app here</div>
+      </ThemeProvider>
+    </div>
+  )
+}
+```
+
+If you'd like to fully replace the Primer [theme](https://github.com/primer/components/blob/main/src/theme-preval.js) with your custom theme, pass your theme to the `<ThemeProvider>` instead:
+
+```jsx
+import {ThemeProvider} from 'styled-components'
+import {theme} from '@primer/components'
 const theme = { ... }
 
 const App = (props) => {

package.json

@@ -123,7 +123,7 @@
     "rollup-plugin-terser": "5.3.0",
     "rollup-plugin-visualizer": "4.0.4",
     "semver": "7.3.2",
-    "styled-components": "4.4.0",
+    "styled-components": "4.4.1",
     "typescript": "4.1.3"
   },
   "peerDependencies": {

src/Avatar.tsx

@@ -1,7 +1,6 @@
 import styled from 'styled-components'
 import {COMMON, get, SystemCommonProps} from './constants'
 import sx, {SxProp} from './sx'
-import theme from './theme'
 import {ComponentProps} from './utils/types'
 
 type StyledAvatarProps = {
@@ -32,7 +31,6 @@ const Avatar = styled.img.attrs<StyledAvatarProps>(props => ({
 `
 
 Avatar.defaultProps = {
-  theme,
   size: 20,
   alt: '',
   square: false

src/AvatarPair.tsx

@@ -3,7 +3,6 @@ import styled from 'styled-components'
 import Avatar from './Avatar'
 import {get} from './constants'
 import {Relative, RelativeProps} from './Position'
-import theme from './theme'
 
 const ChildAvatar = styled(Avatar)`
   position: absolute;
@@ -29,6 +28,4 @@ const AvatarPair = ({children, ...rest}: AvatarPairProps) => {
 // styled() changes this
 AvatarPair.displayName = 'AvatarPair'
 
-AvatarPair.defaultProps = {theme}
-
 export default AvatarPair

src/AvatarStack.tsx

@@ -4,7 +4,6 @@ import styled from 'styled-components'
 import {COMMON, get, SystemCommonProps} from './constants'
 import {Absolute} from './Position'
 import sx, {SxProp} from './sx'
-import theme from './theme'
 import {ComponentProps} from './utils/types'
 
 type StyledAvatarStackWrapperProps = {
@@ -159,8 +158,4 @@ const AvatarStack = ({children, alignRight, ...rest}: AvatarStackProps) => {
   )
 }
 
-AvatarStack.defaultProps = {
-  theme
-}
-
 export default AvatarStack

src/BaseStyles.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import styled, {createGlobalStyle} from 'styled-components'
 import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
 import useMouseIntent from './hooks/useMouseIntent'
-import theme from './theme'
 import {ComponentProps} from './utils/types'
 
 const GlobalStyle = createGlobalStyle`
@@ -47,8 +46,7 @@ function BaseStyles(props: BaseStylesProps) {
 BaseStyles.defaultProps = {
   color: 'text.primary',
   fontFamily: 'normal',
-  lineHeight: 'default',
-  theme
+  lineHeight: 'default'
 }
 
 export default BaseStyles

src/BorderBox.tsx

@@ -2,7 +2,6 @@ import styled from 'styled-components'
 import Box from './Box'
 import {BORDER, SystemBorderProps} from './constants'
 import sx from './sx'
-import theme from './theme'
 import {ComponentProps} from './utils/types'
 
 const BorderBox = styled(Box)<SystemBorderProps>`
@@ -11,7 +10,6 @@ const BorderBox = styled(Box)<SystemBorderProps>`
 `
 
 BorderBox.defaultProps = {
-  theme,
   borderWidth: '1px',
   borderStyle: 'solid',
   borderColor: 'border.primary',

src/Box.tsx

@@ -1,7 +1,6 @@
 import styled from 'styled-components'
 import {COMMON, FLEX, LAYOUT, SystemCommonProps, SystemFlexProps, SystemLayoutProps} from './constants'
 import sx, {SxProp} from './sx'
-import theme from './theme'
 import {ComponentProps} from './utils/types'
 
 const Box = styled.div<SystemCommonProps & SystemFlexProps & SystemLayoutProps & SxProp>`
@@ -11,7 +10,5 @@ const Box = styled.div<SystemCommonProps & SystemFlexProps & SystemLayoutProps &
   ${sx};
 `
 
-Box.defaultProps = {theme}
-
 export type BoxProps = ComponentProps<typeof Box>
 export default Box

src/BranchName.tsx

@@ -1,7 +1,6 @@
 import styled from 'styled-components'
 import {COMMON, get, SystemCommonProps} from './constants'
 import sx, {SxProp} from './sx'
-import theme from './theme'
 import {ComponentProps} from './utils/types'
 
 const BranchName = styled.a<SystemCommonProps & SxProp>`
@@ -16,9 +15,5 @@ const BranchName = styled.a<SystemCommonProps & SxProp>`
   ${sx};
 `
 
-BranchName.defaultProps = {
-  theme
-}
-
 export type BranchNameProps = ComponentProps<typeof BranchName>
 export default BranchName

src/Breadcrumb.tsx

@@ -5,7 +5,6 @@ import styled from 'styled-components'
 import Box from './Box'
 import {COMMON, FLEX, get, SystemCommonProps, SystemFlexProps} from './constants'
 import sx, {SxProp} from './sx'
-import theme from './theme'
 import {ComponentProps} from './utils/types'
 
 const SELECTED_CLASS = 'selected'
@@ -79,16 +78,8 @@ const BreadcrumbItem = styled.a.attrs<StyledBreadcrumbItemProps>(props => ({
   ${sx};
 `
 
-Breadcrumb.defaultProps = {
-  theme
-}
-
 Breadcrumb.displayName = 'Breadcrumb'
 
-BreadcrumbItem.defaultProps = {
-  theme
-}
-
 BreadcrumbItem.displayName = 'Breadcrumb.Item'
 
 export type BreadcrumbItemProps = ComponentProps<typeof BreadcrumbItem>

src/Button/Button.tsx

@@ -1,9 +1,8 @@
 import styled from 'styled-components'
-import sx, {SxProp} from '../sx'
 import {get} from '../constants'
-import theme from '../theme'
-import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
+import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
+import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
 
 const Button = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
   color: ${get('buttons.default.color.default')};
@@ -39,7 +38,5 @@ const Button = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
   ${sx};
 `
 
-Button.defaultProps = {theme}
-
 export type ButtonProps = ComponentProps<typeof Button>
 export default Button

src/Button/ButtonBase.tsx

@@ -1,7 +1,6 @@
 import styled from 'styled-components'
 import {compose, fontSize, FontSizeProps, variant} from 'styled-system'
 import {COMMON, LAYOUT, SystemCommonProps, SystemLayoutProps} from '../constants'
-import theme from '../theme'
 import {ComponentProps} from '../utils/types'
 import buttonBaseStyles from './ButtonStyles'
 
@@ -37,7 +36,6 @@ const ButtonBase = styled.button.attrs<StyledButtonBaseProps>(({disabled, onClic
 `
 
 ButtonBase.defaultProps = {
-  theme,
   variant: 'medium'
 }
 

src/Button/ButtonClose.tsx

@@ -3,7 +3,6 @@ import React, {forwardRef} from 'react'
 import styled from 'styled-components'
 import {COMMON, get, LAYOUT, SystemCommonProps, SystemLayoutProps} from '../constants'
 import sx, {SxProp} from '../sx'
-import defaultTheme from '../theme'
 import {ComponentProps} from '../utils/types'
 
 type StyledButtonProps = SystemCommonProps & SystemLayoutProps & SxProp
@@ -28,15 +27,13 @@ const StyledButton = styled.button<StyledButtonProps>`
   ${sx};
 `
 
-const ButtonClose = forwardRef<HTMLButtonElement, ComponentProps<typeof StyledButton>>(
-  ({theme = defaultTheme, ...props}, ref) => {
-    return (
-      <StyledButton ref={ref} aria-label="Close" {...{theme, ...props}}>
-        <XIcon />
-      </StyledButton>
-    )
-  }
-)
+const ButtonClose = forwardRef<HTMLButtonElement, ComponentProps<typeof StyledButton>>((props, ref) => {
+  return (
+    <StyledButton ref={ref} aria-label="Close" {...props}>
+      <XIcon />
+    </StyledButton>
+  )
+})
 
 export type ButtonCloseProps = ComponentProps<typeof ButtonClose>
 export default ButtonClose

src/Button/ButtonDanger.tsx

@@ -1,9 +1,8 @@
 import styled from 'styled-components'
-import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
 import {get} from '../constants'
-import theme from '../theme'
 import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
+import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
 
 const ButtonDanger = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
   color: ${get('buttons.danger.color.default')};
@@ -40,9 +39,5 @@ const ButtonDanger = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & Sx
   ${sx};
 `
 
-ButtonDanger.defaultProps = {
-  theme
-}
-
 export type ButtonDangerProps = ComponentProps<typeof ButtonDanger>
 export default ButtonDanger

src/Button/ButtonGroup.tsx

@@ -2,7 +2,6 @@ import styled from 'styled-components'
 import Box from '../Box'
 import {get} from '../constants'
 import sx from '../sx'
-import theme from '../theme'
 import {ComponentProps} from '../utils/types'
 
 const ButtonGroup = styled(Box)`
@@ -49,8 +48,7 @@ const ButtonGroup = styled(Box)`
 `
 
 ButtonGroup.defaultProps = {
-  display: 'inline-block',
-  theme
+  display: 'inline-block'
 }
 
 export type ButtonGroupProps = ComponentProps<typeof ButtonGroup>

src/Button/ButtonInvisible.tsx

@@ -1,7 +1,6 @@
 import styled from 'styled-components'
 import {get} from '../constants'
 import sx, {SxProp} from '../sx'
-import theme from '../theme'
 import {ComponentProps} from '../utils/types'
 import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
 
@@ -24,9 +23,5 @@ const ButtonInvisible = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps &
   ${sx}
 `
 
-ButtonInvisible.defaultProps = {
-  theme
-}
-
 export type ButtonInvisibleProps = ComponentProps<typeof ButtonInvisible>
 export default ButtonInvisible