From 1860737f9a1f44e72f46a996c714309c705996b9 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 22 Feb 2021 19:47:57 -0800 Subject: [PATCH 1/7] Remove propTypes --- docs/components/PropsList.js | 5 -- docs/components/constants.js | 19 +----- package.json | 1 - src/Avatar.tsx | 9 --- src/AvatarPair.tsx | 7 +-- src/AvatarStack.tsx | 13 +--- src/BaseStyles.tsx | 7 --- src/BorderBox.tsx | 8 --- src/Box.tsx | 9 --- src/BranchName.tsx | 8 --- src/Breadcrumb.tsx | 13 ---- src/Button/Button.tsx | 9 +-- src/Button/ButtonBase.tsx | 21 +------ src/Button/ButtonClose.tsx | 15 +---- src/Button/ButtonDanger.tsx | 5 -- src/Button/ButtonGroup.tsx | 9 +-- src/Button/ButtonInvisible.tsx | 10 +-- src/Button/ButtonOutline.tsx | 9 +-- src/Button/ButtonPrimary.tsx | 9 +-- src/Button/ButtonTableList.tsx | 21 ++----- src/Caret.tsx | 9 --- src/CircleBadge.tsx | 14 ----- src/CircleOcticon.tsx | 12 +--- src/CounterLabel.tsx | 9 --- src/Details.tsx | 9 +-- src/Dialog.tsx | 29 +++------ src/Dropdown.tsx | 28 +-------- src/FilterList.tsx | 21 +------ src/FilteredSearch.tsx | 9 +-- src/Flash.tsx | 11 +--- src/Flex.tsx | 4 -- src/FormGroup.tsx | 17 +---- src/Grid.tsx | 5 -- src/Header.tsx | 41 ++---------- src/Heading.tsx | 8 --- src/Label.tsx | 10 --- src/LabelGroup.tsx | 5 -- src/Link.tsx | 15 +---- src/Pagehead.tsx | 11 +--- src/Pagination/Pagination.tsx | 20 +----- src/PointerBox.tsx | 11 +--- src/Popover.tsx | 18 ------ src/Position.tsx | 16 +---- src/ProgressBar.tsx | 10 --- src/SelectMenu/SelectMenu.tsx | 47 ++++++-------- src/SelectMenu/SelectMenuDivider.tsx | 9 +-- src/SelectMenu/SelectMenuFilter.tsx | 16 ++--- src/SelectMenu/SelectMenuFooter.tsx | 9 +-- src/SelectMenu/SelectMenuHeader.tsx | 16 +---- src/SelectMenu/SelectMenuItem.tsx | 15 ++--- src/SelectMenu/SelectMenuList.tsx | 9 +-- src/SelectMenu/SelectMenuLoadingAnimation.tsx | 4 -- src/SelectMenu/SelectMenuModal.tsx | 15 +---- src/SelectMenu/SelectMenuTab.tsx | 17 ++--- src/SelectMenu/SelectMenuTabPanel.tsx | 13 +--- src/SelectMenu/SelectMenuTabs.tsx | 9 +-- src/SideNav.tsx | 28 ++------- src/StateLabel.tsx | 24 +++---- src/StyledOcticon.tsx | 14 +---- src/SubNav.tsx | 41 +++--------- src/TabNav.tsx | 33 +++------- src/Text.tsx | 8 --- src/TextInput.tsx | 21 ++----- src/Timeline.tsx | 62 ++----------------- src/Tooltip.tsx | 21 +------ src/Truncate.tsx | 12 ---- src/UnderlineNav.tsx | 29 +-------- src/constants.ts | 25 -------- src/sx.ts | 5 -- yarn.lock | 7 --- 70 files changed, 148 insertions(+), 910 deletions(-) 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 b74294eca2c..9960bd9e5ed 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,6 @@ "@primer/octicons-react": "^11.3.0", "@primer/primitives": "3.0.0", "@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 6940eef5e28..d9e56584860 100644 --- a/src/AvatarPair.tsx +++ b/src/AvatarPair.tsx @@ -1,8 +1,7 @@ import React from 'react' -import PropTypes from 'prop-types' import styled from 'styled-components' -import {Relative, RelativeProps} from './Position' import Avatar from './Avatar' +import {Relative, RelativeProps} from './Position' import theme from './theme' const ChildAvatar = styled(Avatar)` @@ -30,9 +29,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 12e96e6a78d..f327b53ec97 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 9e0fb178a1c..3debf8c2f15 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 da7acd56968..83183737b8d 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 4b1bca27b18..f2d3258a373 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 530d133d143..e5b52838244 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..474acf1ae55 100644 --- a/src/ProgressBar.tsx +++ b/src/ProgressBar.tsx @@ -53,14 +53,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 0759d76d203..12d893b3d13 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' @@ -73,27 +72,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 2fbc42ba1d0..0d9fa1cdcec 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({ @@ -149,17 +147,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 606f1a3a564..05e68e7bc8c 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' @@ -120,69 +119,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 e6219037e39..e71db1413b0 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 777bae8624a..87afc3d5269 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/constants.ts b/src/constants.ts index 0523e6efc25..ec4d609ea32 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -1,6 +1,4 @@ -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' @@ -22,11 +20,6 @@ export interface SystemCommonProps styledSystem.SpaceProps, styledSystem.DisplayProps {} -COMMON.propTypes = { - ...systemPropTypes.space, - ...systemPropTypes.color -} - // Typography props const whiteSpace = system({ @@ -42,50 +35,32 @@ 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 interface SystemBorderProps extends styledSystem.BorderProps, styledSystem.ShadowProps {} -BORDER.propTypes = { - ...systemPropTypes.border, - ...systemPropTypes.shadow -} - // Layout props export const LAYOUT: StyleFn = styledSystem.layout export type SystemLayoutProps = styledSystem.LayoutProps -LAYOUT.propTypes = systemPropTypes.layout - // Position props export const POSITION: StyleFn = styledSystem.position export type SystemPositionProps = styledSystem.PositionProps -POSITION.propTypes = systemPropTypes.position - // Flex props export const FLEX: StyleFn = styledSystem.flexbox export type SystemFlexProps = styledSystem.FlexboxProps -FLEX.propTypes = systemPropTypes.flexbox - // Grid props export const GRID: StyleFn = 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/yarn.lock b/yarn.lock index c42bbdc59ae..541f1e0f7d8 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" From 55131bc2d2c018178841d1e38a4684a687cb1e44 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 22 Feb 2021 19:55:40 -0800 Subject: [PATCH 2/7] Remove propTypes from stylefn type --- src/constants.ts | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/src/constants.ts b/src/constants.ts index ec4d609ea32..e40c8c1f63c 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -1,19 +1,14 @@ import {themeGet} from '@styled-system/theme-get' -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, @@ -29,7 +24,7 @@ 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' @@ -37,30 +32,30 @@ export interface SystemTypographyProps extends styledSystem.TypographyProps { // 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 {} // Layout props -export const LAYOUT: StyleFn = styledSystem.layout +export const LAYOUT = styledSystem.layout export type SystemLayoutProps = styledSystem.LayoutProps // Position props -export const POSITION: StyleFn = styledSystem.position +export const POSITION = styledSystem.position export type SystemPositionProps = styledSystem.PositionProps // Flex props -export const FLEX: StyleFn = styledSystem.flexbox +export const FLEX = styledSystem.flexbox export type SystemFlexProps = styledSystem.FlexboxProps // Grid props -export const GRID: StyleFn = styledSystem.grid +export const GRID = styledSystem.grid export type SystemGridProps = styledSystem.GridProps From c4b8cbb5f38d39d3aef6e14a2dd69aa73246002a Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 22 Feb 2021 19:55:51 -0800 Subject: [PATCH 3/7] Update ProgressBar imports --- src/ProgressBar.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/ProgressBar.tsx b/src/ProgressBar.tsx index 474acf1ae55..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' From 1a871a2ef477b8e42b4b23cafccb0b3b0ccb29bc Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 22 Feb 2021 19:56:35 -0800 Subject: [PATCH 4/7] Remove tests that check propTypes --- src/__tests__/SelectMenu.tsx | 7 ------- src/utils/testing.tsx | 10 ---------- 2 files changed, 17 deletions(-) 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/utils/testing.tsx b/src/utils/testing.tsx index 6fc64bf4d55..3ca77b8d74d 100644 --- a/src/utils/testing.tsx +++ b/src/utils/testing.tsx @@ -211,17 +211,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() }) From b9d9d2450c3f726fa0e6bc8cb43ba678df0c60ad Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Wed, 24 Feb 2021 08:59:25 -0800 Subject: [PATCH 5/7] Create polite-geese-smile.md --- .changeset/polite-geese-smile.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/polite-geese-smile.md 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 From ab302182d109b3bb09d6ab25c6bf8f5a778f10a6 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 1 Mar 2021 08:57:13 -0800 Subject: [PATCH 6/7] Update contributing docs --- contributor-docs/CONTRIBUTING.md | 132 ++++++++++++------------------- 1 file changed, 50 insertions(+), 82 deletions(-) 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 From 6438af300df90f08bfb0797d5e5f18ca4e8b1bd7 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 1 Mar 2021 09:02:57 -0800 Subject: [PATCH 7/7] Remove test matchers that check propTypes --- src/utils/test-matchers.tsx | 17 ----------------- src/utils/testing.tsx | 2 -- 2 files changed, 19 deletions(-) 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 3ca77b8d74d..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