diff --git a/.changeset/polite-geese-smile.md b/.changeset/polite-geese-smile.md
new file mode 100644
index 00000000000..3f9f384e0f2
--- /dev/null
+++ b/.changeset/polite-geese-smile.md
@@ -0,0 +1,5 @@
+---
+"@primer/components": major
+---
+
+Remove propTypes in favor of TypeScript types
diff --git a/contributor-docs/CONTRIBUTING.md b/contributor-docs/CONTRIBUTING.md
index d97567cf42a..a792ae7fd9d 100644
--- a/contributor-docs/CONTRIBUTING.md
+++ b/contributor-docs/CONTRIBUTING.md
@@ -2,28 +2,28 @@
1. [Roadmap](#roadmap)
2. [Before Getting Started](#before-getting-started)
-2. [Discussing non-public features or products](#discussing-non-public-features-or-products)
-2. [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)
- * [Testing](#testing)
- * [TypeScript support](#typescript-support)
- * [Additional resources](#additional-resources)
-3. [Writing documentation](#writing-documentation)
-4. [Creating a pull request](#creating-a-pull-request)
- * [What to expect after opening a pull request](#what-to-expect-after-opening-a-pull-request)
- * [What we look for in reviews](#what-we-look-for-in-reviews)
-5. [Deploying & publishing](#deploying-and-publishing)
- * [Deploying](#deploying)
- * [Path aliasing](#path-aliasing)
- * [Publishing](#publishing)
-6. [Troubleshooting](#troubleshooting)
-7. [Glossary](#glossary)
- * [System Props](#system-props)
+3. [Discussing non-public features or products](#discussing-non-public-features-or-products)
+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)
+ - [Testing](#testing)
+ - [TypeScript support](#typescript-support)
+ - [Additional resources](#additional-resources)
+5. [Writing documentation](#writing-documentation)
+6. [Creating a pull request](#creating-a-pull-request)
+ - [What to expect after opening a pull request](#what-to-expect-after-opening-a-pull-request)
+ - [What we look for in reviews](#what-we-look-for-in-reviews)
+7. [Deploying & publishing](#deploying-and-publishing)
+ - [Deploying](#deploying)
+ - [Path aliasing](#path-aliasing)
+ - [Publishing](#publishing)
+8. [Troubleshooting](#troubleshooting)
+9. [Glossary](#glossary)
+ - [System Props](#system-props)
## Roadmap
@@ -43,7 +43,6 @@ A common question asked about Primer Components is how to know what should be ad
As this is a public repo, please be careful not to include details or screenshots from unreleased GitHub products or features. In most cases, a good bug report, feature request, or pull request should be able to describe the work without including business logic or feature details, but if you must discuss context relating to an unreleased feature, please open an issue in the private [Design Systems repo](https://github.com/github/design-systems/issues/new/choose) and link to it in your issue or pull request.
-
## Developing components
We primarily use our documentation site as a workspace to develop new components or make changes to existing components (stay tuned for a better development environment coming soon!).
@@ -73,11 +72,9 @@ With a couple of exceptions, all components should be created with the `styled`
Default values for system props can be set in `Component.defaultProps`.
-Prop Types from system props such as `COMMON` or `TYPOGRAPHY` as well as styled-system functions can be spread in the component's prop types declaration (see example below). These need to go *after* any built-in styles that you want to be overridable.
-
- ⚠️ **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.**
+⚠️ **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.**
-Additionally, every component should support [the `sx` prop](https://primer.style/components/overriding-styles); remember to add `${sx}` to the style literal and `...sx.propTypes` to the component's `propTypes`.
+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:
@@ -100,12 +97,6 @@ Component.defaultProps = {
fontSize: 5,
}
-Component.propTypes = {
- ...COMMON.propTypes,
- ...TYPOGRAPHY.propTypes,
- ...sx.propTypes
-}
-
export default Component
```
@@ -119,9 +110,8 @@ To add the default theme to a component, import the theme and assign it to the c
import theme from './theme'
Component.defaultProps = {
- theme, // make sure to always set the default theme!
+ theme // make sure to always set the default theme!
}
-
```
### Adding system props
@@ -130,12 +120,12 @@ Each component should have access to the appropriate system props. Every compone
Categories of system props are exported from `src/constants.js`:
-* `COMMON` includes color and spacing (margin and padding) props
-* `TYPOGRAPHY` includes font family, font weight, and line-height props
-* `POSITION` includes positioning props
-* `FLEX` includes flexbox props
-* `BORDER` includes border and box-shadow props
-* `GRID` includes grid props
+- `COMMON` includes color and spacing (margin and padding) props
+- `TYPOGRAPHY` includes font family, font weight, and line-height props
+- `POSITION` includes positioning props
+- `FLEX` includes flexbox props
+- `BORDER` includes border and box-shadow props
+- `GRID` includes grid props
To give the component access to a group of system props, import the system prop function from `./constants` and include the system prop function in your styled-component like so:
@@ -146,21 +136,15 @@ const Component = styled.div`
// additional styles here
${COMMON};
`
-
-// don't forget to also add it to your prop type declaration!
-
-Component.propTypes = {
- ...COMMON.propTypes
-}
```
-Remember that the system prop function inside your style declaration needs to go *after* any built-in styles you want to be overridable.
+Remember that the system prop function inside your style declaration needs to go _after_ any built-in styles you want to be overridable.
### Adding the `sx` prop
Each component should provide access to a prop called `sx` that allows for setting theme-aware ad-hoc styles. See the [overriding styles](https://primer.style/components/overriding-styles) doc for more information on using the prop.
-Adding the `sx` prop is similar to adding system props; import the default export from the `sx` module, add it to your style definition, and add the appropriate prop types. **The `sx` prop should go at the *very end* of your style definition.**
+Adding the `sx` prop is similar to adding system props; import the default export from the `sx` module, add it to your style definition, and add the appropriate prop types. **The `sx` prop should go at the _very end_ of your style definition.**
```jsx
import {COMMON} from './constants'
@@ -171,13 +155,6 @@ const Component = styled.div`
${COMMON};
${sx};
`
-
-// don't forget to also add it to your prop type declaration!
-
-Component.propTypes = {
- ...COMMON.propTypes,
- ...sx.propTypes
-}
```
### Linting
@@ -221,11 +198,11 @@ Whenever adding new components or modifying the props of an existing component,
### Additional resources
-* [Primer Components Philosophy](https://primer.style/components/philosophy)
-* [Primer Components Core Concepts](https://primer.style/components/core-concepts)
-* [Primer Components System Props](https://primer.style/components/system-props)
-* [Styled Components docs](https://styled-components.com/)
-* [Styled System docs](https://styled-system.com/)
+- [Primer Components Philosophy](https://primer.style/components/philosophy)
+- [Primer Components Core Concepts](https://primer.style/components/core-concepts)
+- [Primer Components System Props](https://primer.style/components/system-props)
+- [Styled Components docs](https://styled-components.com/)
+- [Styled System docs](https://styled-system.com/)
## Writing documentation
@@ -243,16 +220,16 @@ After opening a pull request, a member of the design systems team will add the a
### What we look for in reviews
-* 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)?
-* Is the component documented accurately?
-* Does the component have appropriate tests?
-* Does the pull request increase the bundle size significantly?
+- 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)?
+- Is the component documented accurately?
+- Does the component have appropriate tests?
+- Does the pull request increase the bundle size significantly?
If everything looks great, the design systems team member will approve the pull request and merge when appropriate. Minor and patch changes are released frequently, and we try to bundle up breaking changes and avoid shipping major versions too often. If your pull request is time-sensitive, please let a design systems team member know. You do not need to worry about merging pull requests on your own, we'll take care of that for you :)
@@ -286,7 +263,7 @@ We use [changesets](https://github.com/atlassian/changesets) to managing version
**`yarn start` fails with an error like `gatsby: command not found`**
-Make sure to run `yarn` from inside the `docs/` subfolder *as well as* the root folder.
+Make sure to run `yarn` from inside the `docs/` subfolder _as well as_ the root folder.
** `yarn start` fails with a different error**
@@ -306,19 +283,10 @@ const SpaceDiv = styled.div`
`
```
-System props come with `propTypes` that can be mixed into your own with ES6 [spread syntax]:
-
-```jsx
-SpaceDiv.propTypes = {
- stellar: PropTypes.bool,
- ...space.propTypes
-}
-```
-
[classnames]: https://www.npmjs.com/package/classnames
[spread syntax]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
[styled-system]: https://styled-system.com
[table]: https://jxnblk.com/styled-system/table
[npx]: https://www.npmjs.com/package/npx
-[Now]: https://zeit.co/now
+[now]: https://zeit.co/now
[primer.style]: https://primer.style
diff --git a/docs/components/PropsList.js b/docs/components/PropsList.js
index 68687333c95..dff6cef8a35 100644
--- a/docs/components/PropsList.js
+++ b/docs/components/PropsList.js
@@ -1,10 +1,5 @@
import React from 'react'
-import PropTypes from 'prop-types'
const PropsList = ({systemProps}) =>
{systemProps.propNames.join(', ')}
-PropsList.propTypes = {
- systemProps: PropTypes.arrayOf(PropTypes.string)
-}
-
export default PropsList
diff --git a/docs/components/constants.js b/docs/components/constants.js
index 40736645a1a..841739689ed 100644
--- a/docs/components/constants.js
+++ b/docs/components/constants.js
@@ -1,8 +1,7 @@
-import * as styledSystem from 'styled-system'
-import PropTypes from 'prop-types'
+import {theme} from '@primer/components'
import systemPropTypes from '@styled-system/prop-types'
import themeGet from '@styled-system/theme-get'
-import {theme} from '@primer/components'
+import * as styledSystem from 'styled-system'
const {get: getKey, compose, system} = styledSystem
@@ -17,21 +16,9 @@ const whiteSpace = system({
export const TYPOGRAPHY = compose(styledSystem.typography, whiteSpace)
-TYPOGRAPHY.propTypes = {
- ...systemPropTypes.typography,
- whiteSpace: PropTypes.oneOf(['normal', 'nowrap', 'pre-wrap', 'pre', 'pre-line'])
-}
-
export const COMMON = compose(styledSystem.space, styledSystem.color, styledSystem.display)
-COMMON.propTypes = {
- ...systemPropTypes.space,
- ...systemPropTypes.color
-}
+
export const BORDER = compose(styledSystem.border, styledSystem.shadow)
-BORDER.propTypes = {
- ...systemPropTypes.border,
- ...systemPropTypes.shadow
-}
// these are 1:1 with styled-system's API now,
// so you could consider dropping the abstraction
diff --git a/package.json b/package.json
index 691953fc352..e9bcf5d2452 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,6 @@
"@primer/octicons-react": "^11.3.0",
"@primer/primitives": "0.0.0-20211167520",
"@styled-system/css": "5.1.5",
- "@styled-system/prop-types": "5.1.2",
"@styled-system/props": "5.1.4",
"@styled-system/theme-get": "5.1.2",
"@types/history": "4.7.8",
diff --git a/src/Avatar.tsx b/src/Avatar.tsx
index 9bef3c18750..e5abd12db90 100644
--- a/src/Avatar.tsx
+++ b/src/Avatar.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
import styled from 'styled-components'
import {COMMON, get, SystemCommonProps} from './constants'
import sx, {SxProp} from './sx'
@@ -39,13 +38,5 @@ Avatar.defaultProps = {
square: false
}
-Avatar.propTypes = {
- ...COMMON.propTypes,
- size: PropTypes.number,
- square: PropTypes.bool,
- ...sx.propTypes,
- theme: PropTypes.object
-}
-
export type AvatarProps = ComponentProps
export default Avatar
diff --git a/src/AvatarPair.tsx b/src/AvatarPair.tsx
index 1ae30a264c5..5cf362d4b32 100644
--- a/src/AvatarPair.tsx
+++ b/src/AvatarPair.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
import React from 'react'
import styled from 'styled-components'
import Avatar from './Avatar'
@@ -31,9 +30,5 @@ const AvatarPair = ({children, ...rest}: AvatarPairProps) => {
AvatarPair.displayName = 'AvatarPair'
AvatarPair.defaultProps = {theme}
-AvatarPair.propTypes = {
- ...Relative.propTypes,
- theme: PropTypes.object
-}
export default AvatarPair
diff --git a/src/AvatarStack.tsx b/src/AvatarStack.tsx
index 1529632314e..c97ff1fce75 100644
--- a/src/AvatarStack.tsx
+++ b/src/AvatarStack.tsx
@@ -1,11 +1,10 @@
-import React from 'react'
import classnames from 'classnames'
-import PropTypes from 'prop-types'
+import React from 'react'
import styled from 'styled-components'
+import {COMMON, get, SystemCommonProps} from './constants'
+import {Absolute} from './Position'
import sx, {SxProp} from './sx'
-import {get, COMMON, SystemCommonProps} from './constants'
import theme from './theme'
-import {Absolute} from './Position'
import {ComponentProps} from './utils/types'
type StyledAvatarStackWrapperProps = {
@@ -164,10 +163,4 @@ AvatarStack.defaultProps = {
theme
}
-AvatarStack.propTypes = {
- ...COMMON.propTypes,
- alignRight: PropTypes.bool,
- ...sx.propTypes
-}
-
export default AvatarStack
diff --git a/src/BaseStyles.tsx b/src/BaseStyles.tsx
index 600ae282d44..7813b02acf5 100644
--- a/src/BaseStyles.tsx
+++ b/src/BaseStyles.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
import React from 'react'
import styled, {createGlobalStyle} from 'styled-components'
import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
@@ -52,10 +51,4 @@ BaseStyles.defaultProps = {
theme
}
-BaseStyles.propTypes = {
- ...TYPOGRAPHY.propTypes,
- ...COMMON.propTypes,
- theme: PropTypes.object
-}
-
export default BaseStyles
diff --git a/src/BorderBox.tsx b/src/BorderBox.tsx
index 9de672aed3d..4938b35572c 100644
--- a/src/BorderBox.tsx
+++ b/src/BorderBox.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
import styled from 'styled-components'
import Box from './Box'
import {BORDER, SystemBorderProps} from './constants'
@@ -19,12 +18,5 @@ BorderBox.defaultProps = {
borderRadius: 2
}
-BorderBox.propTypes = {
- ...Box.propTypes,
- ...BORDER.propTypes,
- ...sx.propTypes,
- theme: PropTypes.object
-}
-
export type BorderBoxProps = ComponentProps
export default BorderBox
diff --git a/src/Box.tsx b/src/Box.tsx
index 328ccde56e7..63511b4d9a8 100644
--- a/src/Box.tsx
+++ b/src/Box.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
import styled from 'styled-components'
import {COMMON, FLEX, LAYOUT, SystemCommonProps, SystemFlexProps, SystemLayoutProps} from './constants'
import sx, {SxProp} from './sx'
@@ -14,13 +13,5 @@ const Box = styled.div
export default Box
diff --git a/src/BranchName.tsx b/src/BranchName.tsx
index de574659f67..fe3ab558396 100644
--- a/src/BranchName.tsx
+++ b/src/BranchName.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
import styled from 'styled-components'
import {COMMON, get, SystemCommonProps} from './constants'
import sx, {SxProp} from './sx'
@@ -21,12 +20,5 @@ BranchName.defaultProps = {
theme
}
-BranchName.propTypes = {
- href: PropTypes.string,
- ...COMMON.propTypes,
- ...sx.propTypes,
- theme: PropTypes.object
-}
-
export type BranchNameProps = ComponentProps
export default BranchName
diff --git a/src/Breadcrumb.tsx b/src/Breadcrumb.tsx
index 0edbf8a80e2..98b80f09e3a 100644
--- a/src/Breadcrumb.tsx
+++ b/src/Breadcrumb.tsx
@@ -1,6 +1,5 @@
import classnames from 'classnames'
import * as History from 'history'
-import PropTypes from 'prop-types'
import React from 'react'
import styled from 'styled-components'
import Box from './Box'
@@ -84,24 +83,12 @@ Breadcrumb.defaultProps = {
theme
}
-Breadcrumb.propTypes = {
- ...COMMON.propTypes,
- ...sx.propTypes
-}
-
Breadcrumb.displayName = 'Breadcrumb'
BreadcrumbItem.defaultProps = {
theme
}
-BreadcrumbItem.propTypes = {
- href: PropTypes.string,
- selected: PropTypes.bool,
- ...sx.propTypes,
- ...COMMON.propTypes
-}
-
BreadcrumbItem.displayName = 'Breadcrumb.Item'
export type BreadcrumbItemProps = ComponentProps
diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
index 62ab4a6d625..574f2c34406 100644
--- a/src/Button/Button.tsx
+++ b/src/Button/Button.tsx
@@ -39,14 +39,7 @@ const Button = styled(ButtonBase)`
${sx};
`
-Button.defaultProps = {
- theme
-}
-
-Button.propTypes = {
- ...ButtonBase.propTypes,
- ...sx.propTypes
-}
+Button.defaultProps = {theme}
export type ButtonProps = ComponentProps
export default Button
diff --git a/src/Button/ButtonBase.tsx b/src/Button/ButtonBase.tsx
index 39326217ed6..45a999a558b 100644
--- a/src/Button/ButtonBase.tsx
+++ b/src/Button/ButtonBase.tsx
@@ -1,13 +1,9 @@
-import {WeakValidationMap} from 'react'
-import PropTypes from 'prop-types'
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 buttonBaseStyles from './ButtonStyles'
-import {compose, variant, fontSize} from 'styled-system'
import {ComponentProps} from '../utils/types'
-import systemPropTypes from '@styled-system/prop-types'
-import {FontSizeProps} from 'styled-system'
+import buttonBaseStyles from './ButtonStyles'
export const buttonSystemProps = compose(fontSize, COMMON, LAYOUT)
export type ButtonSystemProps = FontSizeProps & SystemCommonProps & SystemLayoutProps
@@ -45,18 +41,5 @@ ButtonBase.defaultProps = {
variant: 'medium'
}
-const propTypes: WeakValidationMap = {
- as: PropTypes.oneOfType([PropTypes.oneOf(['button', 'a', 'summary', 'input']), PropTypes.elementType]),
- children: PropTypes.node,
- disabled: PropTypes.bool,
- fontSize: systemPropTypes.typography.fontSize,
- onClick: PropTypes.func,
- theme: PropTypes.object,
- variant: PropTypes.oneOf(['small', 'medium', 'large']),
- ...COMMON.propTypes,
- ...LAYOUT.propTypes
-}
-ButtonBase.propTypes = propTypes
-
export type ButtonBaseProps = ComponentProps
export default ButtonBase
diff --git a/src/Button/ButtonClose.tsx b/src/Button/ButtonClose.tsx
index 3c3ab26255b..1b4dc8e85ec 100644
--- a/src/Button/ButtonClose.tsx
+++ b/src/Button/ButtonClose.tsx
@@ -1,10 +1,9 @@
-import {COMMON, LAYOUT, get, SystemLayoutProps, SystemCommonProps} from '../constants'
-import defaultTheme from '../theme'
-import sx, {SxProp} from '../sx'
import {XIcon} from '@primer/octicons-react'
-import PropTypes from 'prop-types'
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
@@ -39,13 +38,5 @@ const ButtonClose = forwardRef
export default ButtonClose
diff --git a/src/Button/ButtonDanger.tsx b/src/Button/ButtonDanger.tsx
index 74486b28f14..ca78ae99fd2 100644
--- a/src/Button/ButtonDanger.tsx
+++ b/src/Button/ButtonDanger.tsx
@@ -44,10 +44,5 @@ ButtonDanger.defaultProps = {
theme
}
-ButtonDanger.propTypes = {
- ...ButtonBase.propTypes,
- ...sx.propTypes
-}
-
export type ButtonDangerProps = ComponentProps
export default ButtonDanger
diff --git a/src/Button/ButtonGroup.tsx b/src/Button/ButtonGroup.tsx
index 981092390e4..33fd8e7fda1 100644
--- a/src/Button/ButtonGroup.tsx
+++ b/src/Button/ButtonGroup.tsx
@@ -1,8 +1,8 @@
import styled from 'styled-components'
-import {get} from '../constants'
import Box from '../Box'
-import theme from '../theme'
+import {get} from '../constants'
import sx from '../sx'
+import theme from '../theme'
import {ComponentProps} from '../utils/types'
const ButtonGroup = styled(Box)`
@@ -53,10 +53,5 @@ ButtonGroup.defaultProps = {
theme
}
-ButtonGroup.propTypes = {
- ...Box.propTypes,
- ...sx.propTypes
-}
-
export type ButtonGroupProps = ComponentProps
export default ButtonGroup
diff --git a/src/Button/ButtonInvisible.tsx b/src/Button/ButtonInvisible.tsx
index b8cfa93b308..75f53b67f0a 100644
--- a/src/Button/ButtonInvisible.tsx
+++ b/src/Button/ButtonInvisible.tsx
@@ -1,9 +1,9 @@
import styled from 'styled-components'
-import sx, {SxProp} from '../sx'
import {get} from '../constants'
+import sx, {SxProp} from '../sx'
import theme from '../theme'
-import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
import {ComponentProps} from '../utils/types'
+import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
const ButtonInvisible = styled(ButtonBase)`
color: ${get('colors.blue.5')};
@@ -20,7 +20,6 @@ const ButtonInvisible = styled(ButtonBase)
export default ButtonInvisible
diff --git a/src/Button/ButtonOutline.tsx b/src/Button/ButtonOutline.tsx
index 98fdb4a16d3..eb58e5cb18b 100644
--- a/src/Button/ButtonOutline.tsx
+++ b/src/Button/ButtonOutline.tsx
@@ -1,9 +1,9 @@
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 theme from '../theme'
import {ComponentProps} from '../utils/types'
+import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
const ButtonOutline = styled(ButtonBase)`
color: ${get('buttons.outline.color.default')};
@@ -44,10 +44,5 @@ ButtonOutline.defaultProps = {
theme
}
-ButtonOutline.propTypes = {
- ...ButtonBase.propTypes,
- ...sx.propTypes
-}
-
export type ButtonOutlineProps = ComponentProps
export default ButtonOutline
diff --git a/src/Button/ButtonPrimary.tsx b/src/Button/ButtonPrimary.tsx
index cd815c9a9ec..d549bb053e0 100644
--- a/src/Button/ButtonPrimary.tsx
+++ b/src/Button/ButtonPrimary.tsx
@@ -1,9 +1,9 @@
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 theme from '../theme'
import {ComponentProps} from '../utils/types'
+import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
export const ButtonPrimary = styled(ButtonBase)`
color: ${get('buttons.primary.color.default')};
@@ -42,10 +42,5 @@ ButtonPrimary.defaultProps = {
theme
}
-ButtonPrimary.propTypes = {
- ...ButtonBase.propTypes,
- ...sx.propTypes
-}
-
export type ButtonPrimaryProps = ComponentProps
export default ButtonPrimary
diff --git a/src/Button/ButtonTableList.tsx b/src/Button/ButtonTableList.tsx
index 7f8019d0586..8dfae8f87d5 100644
--- a/src/Button/ButtonTableList.tsx
+++ b/src/Button/ButtonTableList.tsx
@@ -1,16 +1,15 @@
import styled from 'styled-components'
-import PropTypes from 'prop-types'
import {
COMMON,
- LAYOUT,
- TYPOGRAPHY,
get,
+ LAYOUT,
SystemCommonProps,
SystemLayoutProps,
- SystemTypographyProps
+ SystemTypographyProps,
+ TYPOGRAPHY
} from '../constants'
-import theme from '../theme'
import sx, {SxProp} from '../sx'
+import theme from '../theme'
import {ComponentProps} from '../utils/types'
type StyledButtonTableListProps = SystemCommonProps & SystemTypographyProps & SystemLayoutProps & SxProp
@@ -56,17 +55,7 @@ const ButtonTableList = styled.summary`
${sx};
`
-ButtonTableList.defaultProps = {
- theme
-}
-
-ButtonTableList.propTypes = {
- theme: PropTypes.object,
- ...sx.propTypes,
- ...COMMON.propTypes,
- ...TYPOGRAPHY.propTypes,
- ...LAYOUT.propTypes
-}
+ButtonTableList.defaultProps = {theme}
export type ButtonTableListProps = ComponentProps
export default ButtonTableList
diff --git a/src/Caret.tsx b/src/Caret.tsx
index f768895b86c..f3328fb9a47 100644
--- a/src/Caret.tsx
+++ b/src/Caret.tsx
@@ -1,5 +1,4 @@
import React from 'react'
-import PropTypes from 'prop-types'
import {style} from 'styled-system'
import theme from './theme'
@@ -128,12 +127,4 @@ Caret.defaultProps = {
theme
}
-Caret.propTypes = {
- bg: PropTypes.string,
- borderColor: PropTypes.string,
- borderWidth: PropTypes.number,
- size: PropTypes.number,
- location: PropTypes.oneOf(Caret.locations)
-}
-
export default Caret
diff --git a/src/CircleBadge.tsx b/src/CircleBadge.tsx
index b97d7248adb..e1a99d9c7f3 100644
--- a/src/CircleBadge.tsx
+++ b/src/CircleBadge.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
import styled from 'styled-components'
import {COMMON, get, SystemCommonProps} from './constants'
import StyledOcticon from './StyledOcticon'
@@ -51,23 +50,10 @@ CircleBadge.defaultProps = {
theme
}
-CircleBadge.propTypes = {
- inline: PropTypes.bool,
- size: PropTypes.number,
- theme: PropTypes.object,
- variant: PropTypes.oneOf(['small', 'medium', 'large']),
- ...COMMON.propTypes,
- ...sx.propTypes
-}
-
CircleBadgeIcon.defaultProps = {
theme
}
-CircleBadgeIcon.propTypes = {
- ...StyledOcticon.propTypes
-}
-
CircleBadgeIcon.displayName = 'CircleBadge.Icon'
export type CircleBadgeProps = ComponentProps
diff --git a/src/CircleOcticon.tsx b/src/CircleOcticon.tsx
index b6d017dd139..16d61b5141f 100644
--- a/src/CircleOcticon.tsx
+++ b/src/CircleOcticon.tsx
@@ -1,9 +1,8 @@
+import {IconProps} from '@primer/octicons-react'
import React from 'react'
-import PropTypes from 'prop-types'
+import BorderBox from './BorderBox'
import Flex, {FlexProps} from './Flex'
import theme from './theme'
-import BorderBox from './BorderBox'
-import {IconProps} from '@primer/octicons-react'
export type CircleOcticonProps = {
as?: React.ElementType
@@ -29,11 +28,4 @@ CircleOcticon.defaultProps = {
size: 32
}
-CircleOcticon.propTypes = {
- ...Flex.propTypes,
- icon: PropTypes.elementType.isRequired,
- size: PropTypes.number,
- theme: PropTypes.object
-}
-
export default CircleOcticon
diff --git a/src/CounterLabel.tsx b/src/CounterLabel.tsx
index d424e512a57..7275f6f1351 100644
--- a/src/CounterLabel.tsx
+++ b/src/CounterLabel.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
import styled from 'styled-components'
import {COMMON, get, SystemCommonProps} from './constants'
import sx, {SxProp} from './sx'
@@ -54,13 +53,5 @@ CounterLabel.defaultProps = {
theme
}
-CounterLabel.propTypes = {
- children: PropTypes.node,
- scheme: PropTypes.oneOf(['gray', 'gray-light']),
- theme: PropTypes.object,
- ...COMMON.propTypes,
- ...sx.propTypes
-}
-
export type CounterLabelProps = ComponentProps
export default CounterLabel
diff --git a/src/Details.tsx b/src/Details.tsx
index 37ad3c8db86..4c36bc7a7fc 100644
--- a/src/Details.tsx
+++ b/src/Details.tsx
@@ -1,8 +1,8 @@
import styled from 'styled-components'
-import theme from './theme'
import {COMMON, SystemCommonProps} from './constants'
-import {ComponentProps} from './utils/types'
import sx, {SxProp} from './sx'
+import theme from './theme'
+import {ComponentProps} from './utils/types'
type StyledDetailsProps = SystemCommonProps & SxProp
@@ -24,10 +24,5 @@ Details.defaultProps = {
theme
}
-Details.propTypes = {
- ...COMMON.propTypes,
- ...sx.propTypes
-}
-
export type DetailsProps = ComponentProps
export default Details
diff --git a/src/Dialog.tsx b/src/Dialog.tsx
index d1f80653cc4..4b332ec009c 100644
--- a/src/Dialog.tsx
+++ b/src/Dialog.tsx
@@ -1,14 +1,13 @@
-import React, {useRef, forwardRef} from 'react'
-import PropTypes from 'prop-types'
+import React, {forwardRef, useRef} from 'react'
import styled from 'styled-components'
-import {COMMON, LAYOUT, SystemCommonProps, SystemLayoutProps, get} from './constants'
-import {ComponentProps} from './utils/types'
-import theme from './theme'
-import sx, {SxProp} from './sx'
-import Text from './Text'
-import Flex from './Flex'
import ButtonClose from './Button/ButtonClose'
+import {COMMON, get, LAYOUT, SystemCommonProps, SystemLayoutProps} from './constants'
+import Flex from './Flex'
import useDialog from './hooks/useDialog'
+import sx, {SxProp} from './sx'
+import Text from './Text'
+import theme from './theme'
+import {ComponentProps} from './utils/types'
const noop = () => null
@@ -142,25 +141,11 @@ const Dialog = forwardRef(
Dialog.defaultProps = {theme}
-Dialog.propTypes = {
- ...COMMON.propTypes,
- ...LAYOUT.propTypes,
- isOpen: PropTypes.bool.isRequired,
- narrow: PropTypes.bool,
- onDismiss: PropTypes.func.isRequired,
- ...sx.propTypes,
- wide: PropTypes.bool
-}
-
DialogHeader.defaultProps = {
backgroundColor: 'gray.1',
theme
}
-DialogHeader.propTypes = {
- ...Flex.propTypes
-}
-
DialogHeader.displayName = 'Dialog.Header'
Dialog.displayName = 'Dialog'
diff --git a/src/Dropdown.tsx b/src/Dropdown.tsx
index 5709b4d2b9d..ea774f69be5 100644
--- a/src/Dropdown.tsx
+++ b/src/Dropdown.tsx
@@ -1,13 +1,12 @@
import React from 'react'
-import PropTypes from 'prop-types'
import styled from 'styled-components'
import Button, {ButtonProps} from './Button'
-import Details, {DetailsProps} from './Details'
-import useDetails from './hooks/useDetails'
import {COMMON, get, SystemCommonProps} from './constants'
+import Details, {DetailsProps} from './Details'
import getDirectionStyles from './DropdownStyles'
-import theme from './theme'
+import useDetails from './hooks/useDetails'
import sx, {SxProp} from './sx'
+import theme from './theme'
import {ComponentProps} from './utils/types'
const StyledDetails = styled(Details)`
@@ -137,12 +136,6 @@ const DropdownItem = styled.li`
${sx};
`
-DropdownMenu.propTypes = {
- direction: PropTypes.oneOf(['ne', 'e', 'se', 's', 'sw', 'w']),
- ...COMMON.propTypes,
- ...sx.propTypes
-}
-
DropdownMenu.defaultProps = {
direction: 'sw',
theme
@@ -150,30 +143,15 @@ DropdownMenu.defaultProps = {
DropdownMenu.displayName = 'Dropdown.Menu'
DropdownItem.defaultProps = {theme}
-DropdownItem.propTypes = {
- ...COMMON.propTypes,
- ...sx.propTypes
-}
DropdownItem.displayName = 'Dropdown.Item'
DropdownButton.defaultProps = {theme, ...Button.defaultProps}
-DropdownButton.propTypes = {
- ...Button.propTypes
-}
DropdownButton.displayName = 'Dropdown.Button'
DropdownCaret.defaultProps = {theme}
-DropdownCaret.propTypes = {
- ...COMMON.propTypes,
- ...sx.propTypes
-}
DropdownCaret.displayName = 'Dropdown.Caret'
Dropdown.defaultProps = {theme, ...Details.defaultProps}
-Dropdown.propTypes = {
- ...Details.propTypes,
- ...COMMON.propTypes
-}
export type DropdownCaretProps = ComponentProps
export type DropdownMenuProps = ComponentProps
diff --git a/src/FilterList.tsx b/src/FilterList.tsx
index b77824f7f5a..97bf11c2619 100644
--- a/src/FilterList.tsx
+++ b/src/FilterList.tsx
@@ -1,9 +1,8 @@
import React from 'react'
-import PropTypes from 'prop-types'
import styled from 'styled-components'
import {COMMON, get, SystemCommonProps} from './constants'
-import theme from './theme'
import sx, {SxProp} from './sx'
+import theme from './theme'
import {ComponentProps} from './utils/types'
const FilterListBase = styled.ul`
@@ -79,28 +78,10 @@ FilterList.defaultProps = {
p: 0
}
-FilterList.propTypes = {
- children: PropTypes.node,
- small: PropTypes.bool,
- ...COMMON.propTypes,
- ...sx.propTypes
-}
-
FilterListItem.defaultProps = {
theme
}
-FilterListItem.propTypes = {
- as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
- children: PropTypes.node,
- className: PropTypes.string,
- count: PropTypes.number,
- selected: PropTypes.bool,
- theme: PropTypes.object,
- ...COMMON.propTypes,
- ...sx.propTypes
-}
-
FilterListItem.displayName = 'FilterList.Item'
export default Object.assign(FilterList, {Item: FilterListItem})
diff --git a/src/FilteredSearch.tsx b/src/FilteredSearch.tsx
index a8b568767a2..b6086f539b9 100644
--- a/src/FilteredSearch.tsx
+++ b/src/FilteredSearch.tsx
@@ -1,9 +1,8 @@
-import PropTypes from 'prop-types'
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'
-import sx, {SxProp} from './sx'
const FilteredSearch = styled.div`
${COMMON};
@@ -30,11 +29,5 @@ FilteredSearch.defaultProps = {
theme
}
-FilteredSearch.propTypes = {
- ...COMMON.propTypes,
- theme: PropTypes.object,
- ...sx.propTypes
-}
-
export type FilteredSearchProps = ComponentProps
export default FilteredSearch
diff --git a/src/Flash.tsx b/src/Flash.tsx
index da4c15d7428..9f364d66b21 100644
--- a/src/Flash.tsx
+++ b/src/Flash.tsx
@@ -1,9 +1,8 @@
-import PropTypes from 'prop-types'
import styled from 'styled-components'
import {variant} from 'styled-system'
import {COMMON, get, SystemCommonProps} from './constants'
-import theme from './theme'
import sx, {SxProp} from './sx'
+import theme from './theme'
const variants = variant({
scale: 'flash'
@@ -43,12 +42,4 @@ Flash.defaultProps = {
variant: 'default'
}
-Flash.propTypes = {
- children: PropTypes.node,
- full: PropTypes.bool,
- variant: PropTypes.oneOf(['default', 'warning', 'success', 'danger']),
- ...COMMON.propTypes,
- ...sx.propTypes
-}
-
export default Flash
diff --git a/src/Flex.tsx b/src/Flex.tsx
index ce69f2e303b..7b888b95861 100644
--- a/src/Flex.tsx
+++ b/src/Flex.tsx
@@ -10,9 +10,5 @@ Flex.defaultProps = {
display: 'flex'
}
-Flex.propTypes = {
- ...Box.propTypes
-}
-
export type FlexProps = ComponentProps
export default Flex
diff --git a/src/FormGroup.tsx b/src/FormGroup.tsx
index 85050fe6719..508e8558ffe 100644
--- a/src/FormGroup.tsx
+++ b/src/FormGroup.tsx
@@ -1,8 +1,7 @@
-import PropTypes from 'prop-types'
import styled from 'styled-components'
-import {COMMON, get, TYPOGRAPHY, SystemCommonProps, SystemTypographyProps} from './constants'
-import theme from './theme'
+import {COMMON, get, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
import sx, {SxProp} from './sx'
+import theme from './theme'
import {ComponentProps} from './utils/types'
const FormGroup = styled.div`
@@ -14,12 +13,6 @@ const FormGroup = styled.div`
FormGroup.defaultProps = {theme}
-FormGroup.propTypes = {
- children: PropTypes.node,
- ...COMMON.propTypes,
- ...sx.propTypes
-}
-
const FormGroupLabel = styled.label`
display: block;
margin: 0 0 ${get('space.2')};
@@ -36,12 +29,6 @@ FormGroupLabel.defaultProps = {
theme
}
-FormGroupLabel.propTypes = {
- ...TYPOGRAPHY.propTypes,
- ...COMMON.propTypes,
- ...sx.propTypes
-}
-
export type FormGroupProps = ComponentProps
export type FormGroupLabelProps = ComponentProps
export default Object.assign(FormGroup, {Label: FormGroupLabel})
diff --git a/src/Grid.tsx b/src/Grid.tsx
index 349c3a57711..3f4b5818717 100644
--- a/src/Grid.tsx
+++ b/src/Grid.tsx
@@ -13,10 +13,5 @@ Grid.defaultProps = {
display: 'grid'
}
-Grid.propTypes = {
- ...Box.propTypes,
- ...GRID.propTypes
-}
-
export type GridProps = ComponentProps
export default Grid
diff --git a/src/Header.tsx b/src/Header.tsx
index 669eb2cbc36..7996a46ab8b 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -1,10 +1,9 @@
+import * as History from 'history'
import styled, {css} from 'styled-components'
-import PropTypes from 'prop-types'
+import {BORDER, COMMON, get, SystemBorderProps, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
+import sx, {SxProp} from './sx'
import theme from './theme'
-import {BORDER, COMMON, get, SystemCommonProps, SystemTypographyProps, SystemBorderProps, TYPOGRAPHY} from './constants'
import {ComponentProps} from './utils/types'
-import sx, {SxProp} from './sx'
-import * as History from 'history'
type StyledHeaderItemProps = {full?: boolean} & SystemCommonProps & SxProp
type StyledHeaderProps = SystemBorderProps & SystemCommonProps & SxProp
@@ -79,39 +78,11 @@ const HeaderLink = styled.a.attrs(({to}) => {
HeaderLink.displayName = 'Header.Link'
-Header.propTypes = {
- ...sx.propTypes,
- ...COMMON.propTypes,
- ...BORDER.propTypes
-}
-
-Header.defaultProps = {
- theme
-}
-
-HeaderItem.propTypes = {
- full: PropTypes.bool,
- ...COMMON.propTypes,
- ...BORDER.propTypes,
- ...sx.propTypes
-}
-
-HeaderItem.defaultProps = {
- theme
-}
+Header.defaultProps = {theme}
-HeaderLink.propTypes = {
- href: PropTypes.string,
- theme: PropTypes.object,
- ...COMMON.propTypes,
- ...BORDER.propTypes,
- ...TYPOGRAPHY.propTypes,
- ...sx.propTypes
-}
+HeaderItem.defaultProps = {theme}
-HeaderLink.defaultProps = {
- theme
-}
+HeaderLink.defaultProps = {theme}
export type HeaderProps = ComponentProps
export type HeaderLinkProps = ComponentProps
diff --git a/src/Heading.tsx b/src/Heading.tsx
index 51857fc4463..e63f3a7b4ba 100644
--- a/src/Heading.tsx
+++ b/src/Heading.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
import styled from 'styled-components'
import {COMMON, get, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
import sx, {SxProp} from './sx'
@@ -18,12 +17,5 @@ Heading.defaultProps = {
theme
}
-Heading.propTypes = {
- ...COMMON.propTypes,
- ...sx.propTypes,
- theme: PropTypes.object,
- ...TYPOGRAPHY.propTypes
-}
-
export type HeadingProps = ComponentProps
export default Heading
diff --git a/src/Label.tsx b/src/Label.tsx
index cf742035210..88014acedce 100644
--- a/src/Label.tsx
+++ b/src/Label.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
import styled, {css} from 'styled-components'
import {borderColor, BorderColorProps, variant} from 'styled-system'
import {COMMON, get, SystemCommonProps} from './constants'
@@ -74,14 +73,5 @@ Label.defaultProps = {
variant: 'medium'
}
-Label.propTypes = {
- dropshadow: PropTypes.bool,
- outline: PropTypes.bool,
- theme: PropTypes.object,
- variant: PropTypes.oneOf(['small', 'medium', 'large', 'xl']),
- ...COMMON.propTypes,
- ...sx.propTypes
-}
-
export type LabelProps = ComponentProps
export default Label
diff --git a/src/LabelGroup.tsx b/src/LabelGroup.tsx
index 365e35f44a2..513abaea71d 100644
--- a/src/LabelGroup.tsx
+++ b/src/LabelGroup.tsx
@@ -19,10 +19,5 @@ LabelGroup.defaultProps = {
theme
}
-LabelGroup.propTypes = {
- ...COMMON.propTypes,
- ...sx.propTypes
-}
-
export type LabelGroupProps = ComponentProps
export default LabelGroup
diff --git a/src/Link.tsx b/src/Link.tsx
index d5b2a3e63e7..6c0c5016682 100644
--- a/src/Link.tsx
+++ b/src/Link.tsx
@@ -1,8 +1,6 @@
-import React from 'react'
-import PropTypes from 'prop-types'
import styled from 'styled-components'
import {system} from 'styled-system'
-import {COMMON, TYPOGRAPHY, get, SystemCommonProps, SystemTypographyProps} from './constants'
+import {COMMON, get, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
import sx, {SxProp} from './sx'
import theme from './theme'
import {ComponentProps} from './utils/types'
@@ -61,16 +59,5 @@ Link.defaultProps = {
theme
}
-Link.propTypes = {
- hoverColor: PropTypes.string,
- href: PropTypes.string,
- muted: PropTypes.bool,
- theme: PropTypes.object,
- underline: PropTypes.bool,
- ...TYPOGRAPHY.propTypes,
- ...COMMON.propTypes,
- ...sx.propTypes
-}
-
export type LinkProps = ComponentProps
export default Link
diff --git a/src/Pagehead.tsx b/src/Pagehead.tsx
index f8c599e7787..69a7a4f1132 100644
--- a/src/Pagehead.tsx
+++ b/src/Pagehead.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
import styled from 'styled-components'
import {COMMON, get, SystemCommonProps} from './constants'
import sx, {SxProp} from './sx'
@@ -15,15 +14,7 @@ const Pagehead = styled.div`
${sx};
`
-Pagehead.defaultProps = {
- theme
-}
-
-Pagehead.propTypes = {
- children: PropTypes.node,
- ...COMMON.propTypes,
- ...sx.propTypes
-}
+Pagehead.defaultProps = {theme}
export type PageheadProps = ComponentProps
export default Pagehead
diff --git a/src/Pagination/Pagination.tsx b/src/Pagination/Pagination.tsx
index 6dfb738af27..d05a5dc5ea6 100644
--- a/src/Pagination/Pagination.tsx
+++ b/src/Pagination/Pagination.tsx
@@ -1,12 +1,10 @@
import React from 'react'
-import PropTypes from 'prop-types'
import styled from 'styled-components'
+import Box from '../Box'
+import {COMMON, get} from '../constants'
import sx from '../sx'
-import {get, COMMON} from '../constants'
-import {ComponentProps} from '../utils/types'
import theme from '../theme'
-import Box from '../Box'
-import {buildPaginationModel, buildComponentData} from './model'
+import {buildComponentData, buildPaginationModel} from './model'
const Page = styled.a`
display: inline-block;
@@ -205,18 +203,6 @@ function defaultHrefBuilder(pageNum: number) {
function noop() {}
-Pagination.propTypes = {
- currentPage: PropTypes.number.isRequired,
- hrefBuilder: PropTypes.func,
- marginPageCount: PropTypes.number,
- onPageChange: PropTypes.func,
- pageCount: PropTypes.number.isRequired,
- showPages: PropTypes.bool,
- surroundingPageCount: PropTypes.number,
- ...COMMON.propTypes,
- ...sx.propTypes
-}
-
Pagination.defaultProps = {
hrefBuilder: defaultHrefBuilder,
marginPageCount: 1,
diff --git a/src/PointerBox.tsx b/src/PointerBox.tsx
index 83b06764331..184d61c68be 100644
--- a/src/PointerBox.tsx
+++ b/src/PointerBox.tsx
@@ -1,5 +1,4 @@
import React from 'react'
-import PropTypes from 'prop-types'
import BorderBox, {BorderBoxProps} from './BorderBox'
import Caret, {CaretProps} from './Caret'
import theme from './theme'
@@ -24,14 +23,6 @@ function PointerBox(props: PointerBoxProps) {
)
}
-PointerBox.defaultProps = {
- theme
-}
-
-PointerBox.propTypes = {
- ...BorderBox.propTypes,
- caret: Caret.propTypes.location,
- theme: PropTypes.object
-}
+PointerBox.defaultProps = {theme}
export default PointerBox
diff --git a/src/Popover.tsx b/src/Popover.tsx
index c84ff8584b0..d0f23bfe869 100644
--- a/src/Popover.tsx
+++ b/src/Popover.tsx
@@ -1,5 +1,4 @@
import classnames from 'classnames'
-import PropTypes from 'prop-types'
import styled from 'styled-components'
import BorderBox from './BorderBox'
import {COMMON, get, LAYOUT, POSITION, SystemCommonProps, SystemLayoutProps, SystemPositionProps} from './constants'
@@ -230,27 +229,10 @@ Popover.defaultProps = {
theme
}
-Popover.propTypes = {
- caret: PropTypes.any,
- open: PropTypes.bool,
- relative: PropTypes.bool,
- theme: PropTypes.object,
- ...COMMON.propTypes,
- ...LAYOUT.propTypes,
- ...POSITION.propTypes,
- ...sx.propTypes
-}
-
PopoverContent.defaultProps = {
theme
}
-PopoverContent.propTypes = {
- theme: PropTypes.object,
- ...BorderBox.propTypes,
- ...sx.propTypes
-}
-
PopoverContent.displayName = 'Popover.Content'
export type PopoverProps = ComponentProps
diff --git a/src/Position.tsx b/src/Position.tsx
index 0763b59d06e..fed4a5df8a6 100644
--- a/src/Position.tsx
+++ b/src/Position.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
import React from 'react'
import styled from 'styled-components'
import Box from './Box'
@@ -14,16 +13,7 @@ const Position = styled(Box)`
${sx};
`
-Position.defaultProps = {
- theme
-}
-
-Position.propTypes = {
- ...Box.propTypes,
- ...POSITION.propTypes,
- theme: PropTypes.object,
- ...sx.propTypes
-}
+Position.defaultProps = {theme}
export type PositionProps = ComponentProps
export default Position
@@ -34,7 +24,6 @@ export function Absolute(props: AbsoluteProps) {
return
}
Absolute.defaultProps = Position.defaultProps
-Absolute.propTypes = Position.propTypes
// Fixed
export type FixedProps = Omit
@@ -42,7 +31,6 @@ export function Fixed(props: AbsoluteProps) {
return
}
Fixed.defaultProps = Position.defaultProps
-Fixed.propTypes = Position.propTypes
// Relative
export type RelativeProps = Omit
@@ -50,7 +38,6 @@ export function Relative(props: RelativeProps) {
return
}
Relative.defaultProps = Position.defaultProps
-Relative.propTypes = Position.propTypes
// Sticky
export type StickyProps = Omit
@@ -58,4 +45,3 @@ export function Sticky(props: StickyProps) {
return
}
Sticky.defaultProps = {...Position.defaultProps, top: 0, zIndex: 1}
-Sticky.propTypes = Position.propTypes
diff --git a/src/ProgressBar.tsx b/src/ProgressBar.tsx
index ea0a01d5993..1448a4ed5bb 100644
--- a/src/ProgressBar.tsx
+++ b/src/ProgressBar.tsx
@@ -1,5 +1,3 @@
-import systemPropTypes from '@styled-system/prop-types'
-import PropTypes from 'prop-types'
import React from 'react'
import styled from 'styled-components'
import {width, WidthProps} from 'styled-system'
@@ -53,14 +51,4 @@ ProgressBar.defaultProps = {
theme
}
-ProgressBar.propTypes = {
- ...COMMON.propTypes,
- barSize: PropTypes.oneOf(['small', 'default', 'large']),
- inline: PropTypes.bool,
- progress: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- ...sx.propTypes,
- theme: PropTypes.object,
- width: systemPropTypes.layout.width
-}
-
export default ProgressBar
diff --git a/src/SelectMenu/SelectMenu.tsx b/src/SelectMenu/SelectMenu.tsx
index ac2b847761f..5e8b3772772 100644
--- a/src/SelectMenu/SelectMenu.tsx
+++ b/src/SelectMenu/SelectMenu.tsx
@@ -1,23 +1,22 @@
-import React, {useRef, useState, useCallback, useEffect} from 'react'
+import React, {useCallback, useEffect, useRef, useState} from 'react'
import styled from 'styled-components'
-import PropTypes from 'prop-types'
-import sx, {SxProp} from '../sx'
import {COMMON, SystemCommonProps} from '../constants'
+import sx, {SxProp} from '../sx'
import theme from '../theme'
+import {ComponentProps} from '../utils/types'
+import useKeyboardNav from './hooks/useKeyboardNav'
import {MenuContext} from './SelectMenuContext'
import SelectMenuDivider from './SelectMenuDivider'
import SelectMenuFilter from './SelectMenuFilter'
import SelectMenuFooter from './SelectMenuFooter'
+import SelectMenuHeader from './SelectMenuHeader'
import SelectMenuItem from './SelectMenuItem'
import SelectMenuList from './SelectMenuList'
+import SelectMenuLoadingAnimation from './SelectMenuLoadingAnimation'
import SelectMenuModal from './SelectMenuModal'
-import SelectMenuTabs from './SelectMenuTabs'
-import SelectMenuHeader from './SelectMenuHeader'
import SelectMenuTab from './SelectMenuTab'
import SelectMenuTabPanel from './SelectMenuTabPanel'
-import SelectMenuLoadingAnimation from './SelectMenuLoadingAnimation'
-import useKeyboardNav from './hooks/useKeyboardNav'
-import {ComponentProps} from '../utils/types'
+import SelectMenuTabs from './SelectMenuTabs'
const wrapperStyles = `
// Remove marker added by the display: list-item browser default
@@ -99,28 +98,20 @@ const SelectMenu = React.forwardRef(
SelectMenu.displayName = 'SelectMenu'
-SelectMenu.defaultProps = {
- theme
-}
-
-SelectMenu.propTypes = {
- initialTab: PropTypes.string,
- ...COMMON.propTypes,
- ...sx.propTypes
-}
+SelectMenu.defaultProps = {theme}
export type SelectMenuProps = ComponentProps
-export type {SelectMenuDividerProps} from './SelectMenuDivider'
-export type {SelectMenuFilterProps} from './SelectMenuFilter'
-export type {SelectMenuFooterProps} from './SelectMenuFooter'
-export type {SelectMenuItemProps} from './SelectMenuItem'
-export type {SelectMenuListProps} from './SelectMenuList'
-export type {SelectMenuModalProps} from './SelectMenuModal'
-export type {SelectMenuTabsProps} from './SelectMenuTabs'
-export type {SelectMenuHeaderProps} from './SelectMenuHeader'
-export type {SelectMenuTabProps} from './SelectMenuTab'
-export type {SelectMenuTabPanelProps} from './SelectMenuTabPanel'
-export type {SelectMenuLoadingAnimationProps} from './SelectMenuLoadingAnimation'
+export type { SelectMenuDividerProps } from './SelectMenuDivider'
+export type { SelectMenuFilterProps } from './SelectMenuFilter'
+export type { SelectMenuFooterProps } from './SelectMenuFooter'
+export type { SelectMenuHeaderProps } from './SelectMenuHeader'
+export type { SelectMenuItemProps } from './SelectMenuItem'
+export type { SelectMenuListProps } from './SelectMenuList'
+export type { SelectMenuLoadingAnimationProps } from './SelectMenuLoadingAnimation'
+export type { SelectMenuModalProps } from './SelectMenuModal'
+export type { SelectMenuTabProps } from './SelectMenuTab'
+export type { SelectMenuTabPanelProps } from './SelectMenuTabPanel'
+export type { SelectMenuTabsProps } from './SelectMenuTabs'
export default Object.assign(SelectMenu, {
MenuContext: MenuContext,
List: SelectMenuList,
diff --git a/src/SelectMenu/SelectMenuDivider.tsx b/src/SelectMenu/SelectMenuDivider.tsx
index f6c3676a424..9681054cdba 100644
--- a/src/SelectMenu/SelectMenuDivider.tsx
+++ b/src/SelectMenu/SelectMenuDivider.tsx
@@ -20,14 +20,7 @@ const SelectMenuDivider = styled.div`
${sx};
`
-SelectMenuDivider.defaultProps = {
- theme
-}
-
-SelectMenuDivider.propTypes = {
- ...COMMON.propTypes,
- ...sx.propTypes
-}
+SelectMenuDivider.defaultProps = {theme}
SelectMenuDivider.displayName = 'SelectMenu.Divider'
diff --git a/src/SelectMenu/SelectMenuFilter.tsx b/src/SelectMenu/SelectMenuFilter.tsx
index f471577535e..f51268877bb 100644
--- a/src/SelectMenu/SelectMenuFilter.tsx
+++ b/src/SelectMenu/SelectMenuFilter.tsx
@@ -1,12 +1,11 @@
-import React, {useRef, useContext, forwardRef, useEffect} from 'react'
+import React, {forwardRef, useContext, useEffect, useRef} from 'react'
import styled from 'styled-components'
-import PropTypes from 'prop-types'
import {COMMON, get, SystemCommonProps} from '../constants'
-import theme from '../theme'
-import TextInput, {TextInputProps} from '../TextInput'
-import {MenuContext} from './SelectMenuContext'
import sx, {SxProp} from '../sx'
+import TextInput, {TextInputProps} from '../TextInput'
+import theme from '../theme'
import {ComponentProps} from '../utils/types'
+import {MenuContext} from './SelectMenuContext'
const StyledForm = styled.form`
padding: ${get('space.3')};
@@ -50,13 +49,6 @@ const SelectMenuFilter = forwardRef
diff --git a/src/SelectMenu/SelectMenuFooter.tsx b/src/SelectMenu/SelectMenuFooter.tsx
index b01d737bda6..93274a6a6d7 100644
--- a/src/SelectMenu/SelectMenuFooter.tsx
+++ b/src/SelectMenu/SelectMenuFooter.tsx
@@ -23,14 +23,7 @@ const SelectMenuFooter = styled.footer`
${sx};
`
-SelectMenuFooter.defaultProps = {
- theme
-}
-
-SelectMenuFooter.propTypes = {
- ...COMMON.propTypes,
- ...sx.propTypes
-}
+SelectMenuFooter.defaultProps = {theme}
SelectMenuFooter.displayName = 'SelectMenu.Footer'
diff --git a/src/SelectMenu/SelectMenuHeader.tsx b/src/SelectMenu/SelectMenuHeader.tsx
index 06ad93f9673..acf06815e00 100644
--- a/src/SelectMenu/SelectMenuHeader.tsx
+++ b/src/SelectMenu/SelectMenuHeader.tsx
@@ -1,9 +1,8 @@
import React from 'react'
import styled from 'styled-components'
-import PropTypes from 'prop-types'
-import {get, COMMON, TYPOGRAPHY, SystemCommonProps, SystemTypographyProps} from '../constants'
-import theme from '../theme'
+import {COMMON, get, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from '../constants'
import sx, {SxProp} from '../sx'
+import theme from '../theme'
import {ComponentProps} from '../utils/types'
// SelectMenu.Header is intentionally not exported, it's an internal component used in
@@ -46,16 +45,7 @@ const SelectMenuHeader = ({children, theme, ...rest}: SelectMenuHeaderProps) =>
)
}
-SelectMenuHeader.defaultProps = {
- theme
-}
-
-SelectMenuHeader.propTypes = {
- theme: PropTypes.object,
- ...COMMON.propTypes,
- ...TYPOGRAPHY.propTypes,
- ...sx.propTypes
-}
+SelectMenuHeader.defaultProps = {theme}
SelectMenuHeader.displayName = 'SelectMenu.Header'
diff --git a/src/SelectMenu/SelectMenuItem.tsx b/src/SelectMenu/SelectMenuItem.tsx
index 15d49a5adb0..a29b0cc3614 100644
--- a/src/SelectMenu/SelectMenuItem.tsx
+++ b/src/SelectMenu/SelectMenuItem.tsx
@@ -1,13 +1,12 @@
-import React, {useContext, useRef, forwardRef} from 'react'
-import PropTypes from 'prop-types'
-import styled, {css} from 'styled-components'
import {CheckIcon} from '@primer/octicons-react'
-import {MenuContext} from './SelectMenuContext'
+import React, {forwardRef, useContext, useRef} from 'react'
+import styled, {css} from 'styled-components'
import {COMMON, get, SystemCommonProps} from '../constants'
import StyledOcticon from '../StyledOcticon'
-import theme from '../theme'
import sx, {SxProp} from '../sx'
+import theme from '../theme'
import {ComponentProps} from '../utils/types'
+import {MenuContext} from './SelectMenuContext'
export const listItemStyles = css`
display: flex;
@@ -135,12 +134,6 @@ SelectMenuItem.defaultProps = {
selected: false
}
-SelectMenuItem.propTypes = {
- selected: PropTypes.bool,
- ...COMMON.propTypes,
- ...sx.propTypes
-}
-
SelectMenuItem.displayName = 'SelectMenu.Item'
export type SelectMenuItemProps = ComponentProps
diff --git a/src/SelectMenu/SelectMenuList.tsx b/src/SelectMenu/SelectMenuList.tsx
index 73ca318a598..680c23f07b5 100644
--- a/src/SelectMenu/SelectMenuList.tsx
+++ b/src/SelectMenu/SelectMenuList.tsx
@@ -36,14 +36,7 @@ const SelectMenuList = styled.div`
${COMMON}
${sx};
`
-SelectMenuList.defaultProps = {
- theme
-}
-
-SelectMenuList.propTypes = {
- ...COMMON.propTypes,
- ...sx.propTypes
-}
+SelectMenuList.defaultProps = {theme}
SelectMenuList.displayName = 'SelectMenu.List'
diff --git a/src/SelectMenu/SelectMenuLoadingAnimation.tsx b/src/SelectMenu/SelectMenuLoadingAnimation.tsx
index 374790fd103..254944dcfc3 100644
--- a/src/SelectMenu/SelectMenuLoadingAnimation.tsx
+++ b/src/SelectMenu/SelectMenuLoadingAnimation.tsx
@@ -38,8 +38,4 @@ const SelectMenuLoadingAnimation = (props: SelectMenuLoadingAnimationProps) => {
)
}
-SelectMenuLoadingAnimation.propTypes = {
- ...COMMON.propTypes
-}
-
export default SelectMenuLoadingAnimation
diff --git a/src/SelectMenu/SelectMenuModal.tsx b/src/SelectMenu/SelectMenuModal.tsx
index 1460476d87f..061a6d646bc 100644
--- a/src/SelectMenu/SelectMenuModal.tsx
+++ b/src/SelectMenu/SelectMenuModal.tsx
@@ -1,10 +1,9 @@
import React from 'react'
-import PropTypes from 'prop-types'
-import styled, {keyframes, css} from 'styled-components'
-import {COMMON, get, SystemCommonProps} from '../constants'
+import styled, {css, keyframes} from 'styled-components'
import {width, WidthProps} from 'styled-system'
-import theme from '../theme'
+import {COMMON, get, SystemCommonProps} from '../constants'
import sx, {SxProp} from '../sx'
+import theme from '../theme'
import {ComponentProps} from '../utils/types'
type StyledModalProps = {
@@ -118,14 +117,6 @@ SelectMenuModal.defaultProps = {
width: '300px'
}
-SelectMenuModal.propTypes = {
- align: PropTypes.oneOf(['left', 'right']),
- theme: PropTypes.object,
- width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- ...COMMON.propTypes,
- ...sx.propTypes
-}
-
SelectMenuModal.displayName = 'SelectMenu.Modal'
export type SelectMenuModalProps = ComponentProps
diff --git a/src/SelectMenu/SelectMenuTab.tsx b/src/SelectMenu/SelectMenuTab.tsx
index 2f21fcb329b..259e9b2a1c5 100644
--- a/src/SelectMenu/SelectMenuTab.tsx
+++ b/src/SelectMenu/SelectMenuTab.tsx
@@ -1,12 +1,11 @@
-import React, {useContext, useEffect} from 'react'
import classnames from 'classnames'
-import PropTypes from 'prop-types'
+import React, {useContext, useEffect} from 'react'
import styled, {css} from 'styled-components'
-import {MenuContext} from './SelectMenuContext'
-import {get, COMMON, SystemCommonProps} from '../constants'
-import theme from '../theme'
+import {COMMON, get, SystemCommonProps} from '../constants'
import sx, {SxProp} from '../sx'
+import theme from '../theme'
import {ComponentProps} from '../utils/types'
+import {MenuContext} from './SelectMenuContext'
const tabStyles = css`
flex: 1;
@@ -90,14 +89,6 @@ SelectMenuTab.defaultProps = {
theme
}
-SelectMenuTab.propTypes = {
- index: PropTypes.number,
- onClick: PropTypes.func,
- tabName: PropTypes.string,
- ...COMMON.propTypes,
- ...sx.propTypes
-}
-
SelectMenuTab.displayName = 'SelectMenu.Tab'
export default SelectMenuTab
diff --git a/src/SelectMenu/SelectMenuTabPanel.tsx b/src/SelectMenu/SelectMenuTabPanel.tsx
index 91132809e22..cf44b4875b1 100644
--- a/src/SelectMenu/SelectMenuTabPanel.tsx
+++ b/src/SelectMenu/SelectMenuTabPanel.tsx
@@ -1,12 +1,11 @@
import React, {useContext} from 'react'
-import PropTypes from 'prop-types'
import styled from 'styled-components'
-import {MenuContext} from './SelectMenuContext'
-import SelectMenuList from './SelectMenuList'
-import theme from '../theme'
import {COMMON, get, SystemCommonProps} from '../constants'
import sx, {SxProp} from '../sx'
+import theme from '../theme'
import {ComponentProps} from '../utils/types'
+import {MenuContext} from './SelectMenuContext'
+import SelectMenuList from './SelectMenuList'
const TabPanelBase = styled.div`
border-top: ${get('borderWidths.1')} solid ${get('colors.border.gray')};
@@ -31,12 +30,6 @@ TabPanel.defaultProps = {
theme
}
-TabPanel.propTypes = {
- tabName: PropTypes.string,
- ...COMMON.propTypes,
- ...sx.propTypes
-}
-
TabPanel.displayName = 'SelectMenu.TabPanel'
export default TabPanel
diff --git a/src/SelectMenu/SelectMenuTabs.tsx b/src/SelectMenu/SelectMenuTabs.tsx
index b116ea96c95..2962fc0e1c6 100644
--- a/src/SelectMenu/SelectMenuTabs.tsx
+++ b/src/SelectMenu/SelectMenuTabs.tsx
@@ -40,14 +40,7 @@ const SelectMenuTabs = ({children, ...rest}: SelectMenuTabsProps) => {
)
}
-SelectMenuTabs.defaultProps = {
- theme
-}
-
-SelectMenuTabs.propTypes = {
- ...COMMON.propTypes,
- ...sx.propTypes
-}
+SelectMenuTabs.defaultProps = {theme}
SelectMenuTabs.displayName = 'SelectMenu.Tabs'
diff --git a/src/SideNav.tsx b/src/SideNav.tsx
index c67e741c1e6..7be979ce12c 100644
--- a/src/SideNav.tsx
+++ b/src/SideNav.tsx
@@ -1,14 +1,13 @@
+import classnames from 'classnames'
+import * as History from 'history'
import React from 'react'
-import PropTypes from 'prop-types'
import styled, {css} from 'styled-components'
-import classnames from 'classnames'
-import {COMMON, get, SystemCommonProps, SystemTypographyProps} from './constants'
-import Link from './Link'
import BorderBox from './BorderBox'
-import {ComponentProps} from './utils/types'
+import {COMMON, get} from './constants'
+import Link from './Link'
+import sx from './sx'
import theme from './theme'
-import sx, {SxProp} from './sx'
-import * as History from 'history'
+import {ComponentProps} from './utils/types'
type SideNavBaseProps = {
variant?: 'lightweight' | 'normal'
@@ -158,26 +157,11 @@ SideNav.defaultProps = {
variant: 'normal'
}
-SideNav.propTypes = {
- bordered: PropTypes.bool,
- children: PropTypes.node,
- theme: PropTypes.object,
- variant: PropTypes.oneOf(['normal', 'lightweight']),
- ...BorderBox.propTypes
-}
-
SideNavLink.defaultProps = {
theme,
variant: 'normal'
}
-SideNavLink.propTypes = {
- selected: PropTypes.bool,
- theme: PropTypes.object,
- variant: PropTypes.oneOf(['normal', 'full']),
- ...Link.propTypes
-}
-
SideNavLink.displayName = 'SideNav.Link'
export type SideNavProps = ComponentProps
diff --git a/src/StateLabel.tsx b/src/StateLabel.tsx
index ce234916feb..518036a01f4 100644
--- a/src/StateLabel.tsx
+++ b/src/StateLabel.tsx
@@ -1,13 +1,12 @@
-import { GitMergeIcon, GitPullRequestIcon, IssueClosedIcon, IssueOpenedIcon, QuestionIcon } from '@primer/octicons-react'
-import PropTypes from 'prop-types'
+import {GitMergeIcon, GitPullRequestIcon, IssueClosedIcon, IssueOpenedIcon, QuestionIcon} from '@primer/octicons-react'
import React from 'react'
import styled from 'styled-components'
-import { variant } from 'styled-system'
-import { COMMON, get, SystemCommonProps } from './constants'
+import {variant} from 'styled-system'
+import {COMMON, get, SystemCommonProps} from './constants'
import StyledOcticon from './StyledOcticon'
-import sx, { SxProp } from './sx'
+import sx, {SxProp} from './sx'
import theme from './theme'
-import { ComponentProps } from './utils/types'
+import {ComponentProps} from './utils/types'
const octiconMap = {
issueOpened: IssueOpenedIcon,
@@ -29,7 +28,10 @@ const sizeVariants = variant({
})
type StyledStateLabelBaseProps = {
- variant?: 'small' | 'normal'; status?: keyof typeof octiconMap} & SystemCommonProps & SxProp
+ variant?: 'small' | 'normal'
+ status?: keyof typeof octiconMap
+} & SystemCommonProps &
+ SxProp
const StateLabelBase = styled.span`
display: inline-flex;
@@ -62,12 +64,4 @@ StateLabel.defaultProps = {
variant: 'normal'
}
-StateLabel.propTypes = {
- status: PropTypes.oneOf(['issueOpened', 'pullOpened', 'issueClosed', 'pullClosed', 'pullMerged', 'draft']).isRequired,
- theme: PropTypes.object,
- variant: PropTypes.oneOf(['small', 'normal']),
- ...COMMON.propTypes,
- ...sx.propTypes
-}
-
export default StateLabel
diff --git a/src/StyledOcticon.tsx b/src/StyledOcticon.tsx
index 36a4a2bd518..4290a6deded 100644
--- a/src/StyledOcticon.tsx
+++ b/src/StyledOcticon.tsx
@@ -1,10 +1,9 @@
+import {IconProps} from '@primer/octicons-react'
import React from 'react'
-import PropTypes from 'prop-types'
import styled from 'styled-components'
import {COMMON, SystemCommonProps} from './constants'
-import theme from './theme'
import sx, {SxProp} from './sx'
-import {IconProps} from '@primer/octicons-react'
+import theme from './theme'
import {ComponentProps} from './utils/types'
type OcticonProps = {icon: React.ElementType} & IconProps
@@ -23,14 +22,5 @@ StyledOcticon.defaultProps = {
size: 16
}
-StyledOcticon.propTypes = {
- ...COMMON.propTypes,
- ...sx.propTypes,
- icon: PropTypes.any.isRequired,
- size: PropTypes.any,
- theme: PropTypes.object,
- verticalAlign: PropTypes.oneOf(['middle', 'text-bottom', 'text-top', 'top'])
-}
-
export type StyledOcticonProps = ComponentProps
export default StyledOcticon
diff --git a/src/SubNav.tsx b/src/SubNav.tsx
index fbe10ca575a..1e4dfcb9d65 100644
--- a/src/SubNav.tsx
+++ b/src/SubNav.tsx
@@ -1,13 +1,12 @@
-import React from 'react'
-import PropTypes from 'prop-types'
import classnames from 'classnames'
+import * as History from 'history'
+import React from 'react'
import styled from 'styled-components'
-import {COMMON, FLEX, get, SystemFlexProps, SystemCommonProps, SystemBorderProps} from './constants'
-import {ComponentProps} from './utils/types'
-import theme from './theme'
+import {COMMON, FLEX, get, SystemBorderProps, SystemCommonProps, SystemFlexProps} from './constants'
import Flex, {FlexProps} from './Flex'
import sx, {SxProp} from './sx'
-import * as History from 'history'
+import theme from './theme'
+import {ComponentProps} from './utils/types'
const ITEM_CLASS = 'SubNav-item'
const SELECTED_CLASS = 'selected'
@@ -122,38 +121,12 @@ const SubNavLink = styled.a.attrs(props => ({
${sx};
`
-SubNav.defaultProps = {
- theme
-}
-
-SubNav.propTypes = {
- actions: PropTypes.node,
- align: PropTypes.oneOf(['right']),
- children: PropTypes.node,
- full: PropTypes.bool,
- label: PropTypes.string,
- theme: PropTypes.object,
- ...COMMON.propTypes,
- ...sx.propTypes
-}
-
-SubNavLink.defaultProps = {
- theme
-}
+SubNav.defaultProps = {theme}
-SubNavLink.propTypes = {
- href: PropTypes.string,
- selected: PropTypes.bool,
- ...COMMON.propTypes,
- ...sx.propTypes
-}
+SubNavLink.defaultProps = {theme}
SubNavLink.displayName = 'SubNav.Link'
-SubNavLinks.propTypes = {
- ...Flex.propTypes
-}
-
SubNavLinks.displayName = 'SubNav.Links'
export type SubNavLinkProps = ComponentProps
diff --git a/src/TabNav.tsx b/src/TabNav.tsx
index fd93a9f41cc..037fcd8a8c5 100644
--- a/src/TabNav.tsx
+++ b/src/TabNav.tsx
@@ -1,12 +1,11 @@
-import React from 'react'
-import PropTypes from 'prop-types'
import classnames from 'classnames'
+import * as History from 'history'
+import React from 'react'
import styled from 'styled-components'
-import {COMMON, SystemCommonProps, SystemTypographyProps, get} from './constants'
-import {ComponentProps} from './utils/types'
-import theme from './theme'
+import {COMMON, get, SystemCommonProps, SystemTypographyProps} from './constants'
import sx, {SxProp} from './sx'
-import * as History from 'history'
+import theme from './theme'
+import {ComponentProps} from './utils/types'
const ITEM_CLASS = 'TabNav-item'
const SELECTED_CLASS = 'selected'
@@ -72,27 +71,9 @@ const TabNavLink = styled.a.attrs(props => ({
${sx};
`
-TabNav.defaultProps = {
- theme
-}
-
-TabNav.propTypes = {
- children: PropTypes.node,
- theme: PropTypes.object,
- ...COMMON.propTypes,
- ...sx.propTypes
-}
+TabNav.defaultProps = {theme}
-TabNavLink.defaultProps = {
- theme
-}
-
-TabNavLink.propTypes = {
- href: PropTypes.string,
- selected: PropTypes.bool,
- ...COMMON.propTypes,
- ...sx.propTypes
-}
+TabNavLink.defaultProps = {theme}
TabNavLink.displayName = 'TabNav.Link'
diff --git a/src/Text.tsx b/src/Text.tsx
index fad64d7ca81..f8e469d458d 100644
--- a/src/Text.tsx
+++ b/src/Text.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
import styled from 'styled-components'
import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
import sx, {SxProp} from './sx'
@@ -14,12 +13,5 @@ Text.defaultProps = {
theme
}
-Text.propTypes = {
- ...TYPOGRAPHY.propTypes,
- ...COMMON.propTypes,
- ...sx.propTypes,
- theme: PropTypes.object
-}
-
export type TextProps = React.ComponentProps
export default Text
diff --git a/src/TextInput.tsx b/src/TextInput.tsx
index 32ed790aafb..7f596785d03 100644
--- a/src/TextInput.tsx
+++ b/src/TextInput.tsx
@@ -1,13 +1,11 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import systemPropTypes from '@styled-system/prop-types'
import {omit, pick} from '@styled-system/props'
+import classnames from 'classnames'
+import React from 'react'
import styled, {css} from 'styled-components'
-import {variant, width, minWidth, maxWidth, MaxWidthProps, WidthProps, MinWidthProps} from 'styled-system'
+import {maxWidth, MaxWidthProps, minWidth, MinWidthProps, variant, width, WidthProps} from 'styled-system'
import {COMMON, get, SystemCommonProps} from './constants'
-import theme from './theme'
import sx, {SxProp} from './sx'
+import theme from './theme'
import {ComponentProps} from './utils/types'
const sizeVariants = variant({
@@ -158,17 +156,6 @@ TextInput.defaultProps = {
type: 'text'
}
-TextInput.propTypes = {
- block: PropTypes.bool,
- icon: PropTypes.any,
- maxWidth: systemPropTypes.layout.maxWidth,
- minWidth: systemPropTypes.layout.minWidth,
- variant: PropTypes.oneOf(['small', 'large']),
- ...COMMON.propTypes,
- ...sx.propTypes,
- width: systemPropTypes.layout.width
-}
-
TextInput.displayName = 'TextInput'
export type TextInputProps = ComponentProps
diff --git a/src/Timeline.tsx b/src/Timeline.tsx
index 2b0ed2910ea..652b1290fa6 100644
--- a/src/Timeline.tsx
+++ b/src/Timeline.tsx
@@ -1,5 +1,4 @@
import classnames from 'classnames'
-import PropTypes from 'prop-types'
import React from 'react'
import styled, {css} from 'styled-components'
import Box from './Box'
@@ -121,69 +120,18 @@ const TimelineBreak = styled(Relative)`
${sx};
`
-Timeline.defaultProps = {
- theme
-}
-
-Timeline.propTypes = {
- children: PropTypes.node,
- clipSidebar: PropTypes.bool,
- theme: PropTypes.object,
- ...Flex.propTypes,
- ...sx.propTypes
-}
-
-TimelineItem.defaultProps = {
- theme
-}
-
-TimelineItem.propTypes = {
- children: PropTypes.node,
- condensed: PropTypes.bool,
- theme: PropTypes.object,
- ...Flex.propTypes,
- ...sx.propTypes
-}
+Timeline.defaultProps = {theme}
+TimelineItem.defaultProps = {theme}
TimelineItem.displayName = 'Timeline.Item'
-TimelineBadge.defaultProps = {
- theme
-}
-
-TimelineBadge.propTypes = {
- children: PropTypes.node,
- theme: PropTypes.object,
- ...Flex.propTypes,
- ...sx.propTypes
-}
-
+TimelineBadge.defaultProps = {theme}
TimelineBadge.displayName = 'Timeline.Badge'
-TimelineBody.defaultProps = {
- theme
-}
-
-TimelineBody.propTypes = {
- children: PropTypes.node,
- theme: PropTypes.object,
- ...Box.propTypes,
- ...sx.propTypes
-}
-
+TimelineBody.defaultProps = {theme}
TimelineBody.displayName = 'Timeline.Body'
-TimelineBreak.defaultProps = {
- theme
-}
-
-TimelineBreak.propTypes = {
- children: PropTypes.node,
- theme: PropTypes.object,
- ...Box.propTypes,
- ...sx.propTypes
-}
-
+TimelineBreak.defaultProps = {theme}
TimelineBreak.displayName = 'Timeline.Break'
export type TimelineProps = ComponentProps
diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx
index 3e0299a3c99..5a8c8530f8a 100644
--- a/src/Tooltip.tsx
+++ b/src/Tooltip.tsx
@@ -1,10 +1,9 @@
-import React from 'react'
-import PropTypes from 'prop-types'
import classnames from 'classnames'
+import React from 'react'
import styled from 'styled-components'
import {COMMON, get, SystemCommonProps} from './constants'
-import theme from './theme'
import sx, {SxProp} from './sx'
+import theme from './theme'
import {ComponentProps} from './utils/types'
const TooltipBase = styled.span`
@@ -261,20 +260,6 @@ Tooltip.alignments = ['left', 'right']
Tooltip.directions = ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw']
-Tooltip.defaultProps = {
- theme
-}
-
-Tooltip.propTypes = {
- align: PropTypes.oneOf(Tooltip.alignments),
- children: PropTypes.node,
- direction: PropTypes.oneOf(Tooltip.directions),
- noDelay: PropTypes.bool,
- text: PropTypes.string,
- theme: PropTypes.object,
- wrap: PropTypes.bool,
- ...COMMON.propTypes,
- ...sx.propTypes
-}
+Tooltip.defaultProps = {theme}
export default Tooltip
diff --git a/src/Truncate.tsx b/src/Truncate.tsx
index db07b254373..d1f5d319b80 100644
--- a/src/Truncate.tsx
+++ b/src/Truncate.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
import styled from 'styled-components'
import {maxWidth, MaxWidthProps} from 'styled-system'
import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
@@ -35,16 +34,5 @@ Truncate.defaultProps = {
theme
}
-Truncate.propTypes = {
- ...TYPOGRAPHY.propTypes,
- ...COMMON.propTypes,
- expandable: PropTypes.bool,
- inline: PropTypes.bool,
- ...sx.propTypes,
- maxWidth: PropTypes.number,
- theme: PropTypes.object,
- title: PropTypes.string.isRequired
-}
-
export type TruncateProps = ComponentProps
export default Truncate
diff --git a/src/UnderlineNav.tsx b/src/UnderlineNav.tsx
index 574fb3038fa..f59e7d622fb 100644
--- a/src/UnderlineNav.tsx
+++ b/src/UnderlineNav.tsx
@@ -1,12 +1,11 @@
import classnames from 'classnames'
-import PropTypes from 'prop-types'
+import * as History from 'history'
import React from 'react'
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'
-import * as History from 'history'
const ITEM_CLASS = 'UnderlineNav-item'
const SELECTED_CLASS = 'selected'
@@ -105,31 +104,9 @@ const UnderlineNavLink = styled.a.attrs(props => ({
${sx};
`
-UnderlineNav.defaultProps = {
- theme
-}
-
-UnderlineNav.propTypes = {
- actions: PropTypes.node,
- align: PropTypes.oneOf(['right']),
- children: PropTypes.node,
- full: PropTypes.bool,
- label: PropTypes.string,
- theme: PropTypes.object,
- ...COMMON.propTypes,
- ...sx.propTypes
-}
-
-UnderlineNavLink.defaultProps = {
- theme
-}
+UnderlineNav.defaultProps = {theme}
-UnderlineNavLink.propTypes = {
- href: PropTypes.string,
- selected: PropTypes.bool,
- ...COMMON.propTypes,
- ...sx.propTypes
-}
+UnderlineNavLink.defaultProps = {theme}
UnderlineNavLink.displayName = 'UnderlineNav.Link'
diff --git a/src/__tests__/SelectMenu.tsx b/src/__tests__/SelectMenu.tsx
index 84774d58dc3..72cf5390473 100644
--- a/src/__tests__/SelectMenu.tsx
+++ b/src/__tests__/SelectMenu.tsx
@@ -79,10 +79,6 @@ describe('SelectMenu', () => {
SelectMenu.TabPanel,
SelectMenu.Header
]) {
- it('implements the sx prop', () => {
- expect(Comp).toImplementSxProp()
- })
-
it('sets a valid displayName', () => {
expect(Comp.displayName).toMatch(COMPONENT_DISPLAY_NAME_REGEX)
})
@@ -94,9 +90,6 @@ describe('SelectMenu', () => {
expect(results).toHaveNoViolations()
cleanup()
})
- it('implements system props', () => {
- expect(SelectMenu).toImplementSystemProps(COMMON)
- })
it('has default theme', () => {
expect(SelectMenu).toSetDefaultTheme()
diff --git a/src/constants.ts b/src/constants.ts
index 0523e6efc25..e40c8c1f63c 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,32 +1,20 @@
-import systemPropTypes from '@styled-system/prop-types'
import {themeGet} from '@styled-system/theme-get'
-import PropTypes from 'prop-types'
-import React from 'react'
import * as styledSystem from 'styled-system'
import theme from './theme'
-interface StyleFn extends styledSystem.styleFn {
- propTypes?: React.WeakValidationMap
-}
-
const {get: getKey, compose, system} = styledSystem
export const get = (key: string) => themeGet(key, getKey(theme, key))
// Common props
-export const COMMON: StyleFn = compose(styledSystem.space, styledSystem.color, styledSystem.display)
+export const COMMON = compose(styledSystem.space, styledSystem.color, styledSystem.display)
export interface SystemCommonProps
extends styledSystem.ColorProps,
styledSystem.SpaceProps,
styledSystem.DisplayProps {}
-COMMON.propTypes = {
- ...systemPropTypes.space,
- ...systemPropTypes.color
-}
-
// Typography props
const whiteSpace = system({
@@ -36,56 +24,38 @@ const whiteSpace = system({
}
})
-export const TYPOGRAPHY: StyleFn = compose(styledSystem.typography, whiteSpace)
+export const TYPOGRAPHY = compose(styledSystem.typography, whiteSpace)
export interface SystemTypographyProps extends styledSystem.TypographyProps {
whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line'
}
-TYPOGRAPHY.propTypes = {
- ...systemPropTypes.typography,
- whiteSpace: PropTypes.oneOf(['normal', 'nowrap', 'pre-wrap', 'pre', 'pre-line'])
-}
-
// Border props
-export const BORDER: StyleFn = compose(styledSystem.border, styledSystem.shadow)
+export const BORDER = compose(styledSystem.border, styledSystem.shadow)
export interface SystemBorderProps extends styledSystem.BorderProps, styledSystem.ShadowProps {}
-BORDER.propTypes = {
- ...systemPropTypes.border,
- ...systemPropTypes.shadow
-}
-
// Layout props
-export const LAYOUT: StyleFn = styledSystem.layout
+export const LAYOUT = styledSystem.layout
export type SystemLayoutProps = styledSystem.LayoutProps
-LAYOUT.propTypes = systemPropTypes.layout
-
// Position props
-export const POSITION: StyleFn = styledSystem.position
+export const POSITION = styledSystem.position
export type SystemPositionProps = styledSystem.PositionProps
-POSITION.propTypes = systemPropTypes.position
-
// Flex props
-export const FLEX: StyleFn = styledSystem.flexbox
+export const FLEX = styledSystem.flexbox
export type SystemFlexProps = styledSystem.FlexboxProps
-FLEX.propTypes = systemPropTypes.flexbox
-
// Grid props
-export const GRID: StyleFn = styledSystem.grid
+export const GRID = styledSystem.grid
export type SystemGridProps = styledSystem.GridProps
-
-GRID.propTypes = systemPropTypes.grid
diff --git a/src/sx.ts b/src/sx.ts
index 29f646e907c..fdd88509dff 100644
--- a/src/sx.ts
+++ b/src/sx.ts
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
import css, {SystemStyleObject} from '@styled-system/css'
export interface SxProp {
@@ -7,8 +6,4 @@ export interface SxProp {
const sx = (props: SxProp) => css(props.sx)
-sx.propTypes = {
- sx: PropTypes.object,
-}
-
export default sx
diff --git a/src/utils/test-matchers.tsx b/src/utils/test-matchers.tsx
index a5326c66864..595c7c44758 100644
--- a/src/utils/test-matchers.tsx
+++ b/src/utils/test-matchers.tsx
@@ -45,23 +45,6 @@ expect.extend({
}
},
- toImplementSystemProps(Component, propNames) {
- const propKeys = new Set(Object.keys(Component.propTypes))
- const expectedPropKeys = Object.keys(propNames.propTypes)
- const missing = expectedPropKeys.filter(key => !propKeys.has(key)).filter(key => !ALIAS_PROP_TYPES.includes(key))
- return {
- pass: missing.length === 0,
- message: () => `Missing prop${missing.length === 1 ? '' : 's'}: ${stringify(missing)}`
- }
- },
-
- toImplementSxProp(Component) {
- return {
- pass: !!Component.propTypes.sx,
- message: () => 'Missing sx propTypes'
- }
- },
-
toImplementSxBehavior(element) {
const mediaKey = '@media (max-width:123px)'
const sxPropValue = {
diff --git a/src/utils/testing.tsx b/src/utils/testing.tsx
index 6fc64bf4d55..49b67ba9469 100644
--- a/src/utils/testing.tsx
+++ b/src/utils/testing.tsx
@@ -21,8 +21,6 @@ declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace jest {
interface Matchers {
- toImplementSystemProps: (systemProps: any) => boolean
- toImplementSxProp: () => boolean
toImplementSxBehavior: () => boolean
toSetDefaultTheme: () => boolean
toSetExports: (exports: Record) => boolean
@@ -211,17 +209,7 @@ export function behavesAsComponent({Component, systemPropArray, toRender, option
const getElement = () => (toRender ? toRender() : )
- it('implements system props', () => {
- for (const systemProps of systemPropArray) {
- expect(Component).toImplementSystemProps(systemProps)
- }
- })
-
if (!options.skipSx) {
- it('implements the sx prop', () => {
- expect(Component).toImplementSxProp()
- })
-
it('implements sx prop behavior', () => {
expect(getElement()).toImplementSxBehavior()
})
diff --git a/yarn.lock b/yarn.lock
index b7a6d851ae3..9ca6485aea3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2494,13 +2494,6 @@
dependencies:
"@styled-system/core" "^5.1.2"
-"@styled-system/prop-types@5.1.2":
- version "5.1.2"
- resolved "https://registry.yarnpkg.com/@styled-system/prop-types/-/prop-types-5.1.2.tgz#252898644aa277fcdb1bb916c3b354c78b78155a"
- integrity sha512-q2hnuZrOjZdCRYvSoMF5VIDRfpqPHDSgqajoMH0iy7BszPAkZZcIC7L4PzJTIcGSBrB9OJTBitWo9s7N60tgtA==
- dependencies:
- prop-types "^15.7.2"
-
"@styled-system/props@5.1.4":
version "5.1.4"
resolved "https://registry.yarnpkg.com/@styled-system/props/-/props-5.1.4.tgz#a0b76bb3be64cb152db3db33a031f33a43977bab"