Merge pull request #1094 from primer/cb/remove-default-theme-prop

Remove default theme prop

Author: colebemis

.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,27 @@ 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'
 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