From ae1a22c6abd1e832adc26cb7a8d9353e070d5799 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 26 Feb 2021 18:01:21 -0800 Subject: [PATCH 01/18] Remove default theme tests --- src/__tests__/SelectMenu.tsx | 4 ---- src/utils/test-matchers.tsx | 22 +++------------------- src/utils/testing.tsx | 5 ----- 3 files changed, 3 insertions(+), 28 deletions(-) diff --git a/src/__tests__/SelectMenu.tsx b/src/__tests__/SelectMenu.tsx index 84774d58dc3..8eeb82c57b5 100644 --- a/src/__tests__/SelectMenu.tsx +++ b/src/__tests__/SelectMenu.tsx @@ -98,10 +98,6 @@ describe('SelectMenu', () => { expect(SelectMenu).toImplementSystemProps(COMMON) }) - it('has default theme', () => { - expect(SelectMenu).toSetDefaultTheme() - }) - it('does not allow the "as" prop on SelectMenu', () => { const component = mount() expect(component.find('details').length).toEqual(1) diff --git a/src/utils/test-matchers.tsx b/src/utils/test-matchers.tsx index a5326c66864..24ed2ae79d9 100644 --- a/src/utils/test-matchers.tsx +++ b/src/utils/test-matchers.tsx @@ -1,10 +1,9 @@ -import React from 'react' +import {Nullish} from '@testing-library/react' import 'jest-styled-components' import {styleSheetSerializer} from 'jest-styled-components/serializer' -import theme from '../theme' +import React from 'react' import {ReactTestRendererJSON, ReactTestRendererNode} from 'react-test-renderer' -import {getClasses, mount, getComputedStyles, render} from './testing' -import {Nullish} from '@testing-library/react' +import {getClasses, getComputedStyles, render} from './testing' expect.addSnapshotSerializer(styleSheetSerializer) @@ -92,21 +91,6 @@ expect.extend({ } }, - toSetDefaultTheme(Component) { - let comp - if (Component.type) { - comp = Component - } else { - comp = - } - const wrapper = mount(comp) - const pass = this.equals(wrapper.prop('theme'), theme) - return { - pass, - message: () => 'default theme is not set' - } - }, - toSetExports(mod, expectedExports) { if (!Object.keys(expectedExports).includes('default')) { return { diff --git a/src/utils/testing.tsx b/src/utils/testing.tsx index 6fc64bf4d55..e86cd546877 100644 --- a/src/utils/testing.tsx +++ b/src/utils/testing.tsx @@ -24,7 +24,6 @@ declare global { toImplementSystemProps: (systemProps: any) => boolean toImplementSxProp: () => boolean toImplementSxBehavior: () => boolean - toSetDefaultTheme: () => boolean toSetExports: (exports: Record) => boolean } } @@ -239,10 +238,6 @@ export function behavesAsComponent({Component, systemPropArray, toRender, option expect(Component.displayName).toMatch(COMPONENT_DISPLAY_NAME_REGEX) }) - it('sets the default theme', () => { - expect(getElement()).toSetDefaultTheme() - }) - it('renders consistently', () => { expect(render(getElement())).toMatchSnapshot() }) From 562459e890bdb18610db01949a3dfff89fcb11de Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 26 Feb 2021 18:01:55 -0800 Subject: [PATCH 02/18] Remove default theme from Avatar components --- src/Avatar.tsx | 5 +---- src/AvatarPair.tsx | 6 +----- src/AvatarStack.tsx | 11 +++-------- 3 files changed, 5 insertions(+), 17 deletions(-) diff --git a/src/Avatar.tsx b/src/Avatar.tsx index 9bef3c18750..a78650a4121 100644 --- a/src/Avatar.tsx +++ b/src/Avatar.tsx @@ -2,7 +2,6 @@ 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' type StyledAvatarProps = { @@ -33,7 +32,6 @@ const Avatar = styled.img.attrs(props => ({ ` Avatar.defaultProps = { - theme, size: 20, alt: '', square: false @@ -43,8 +41,7 @@ Avatar.propTypes = { ...COMMON.propTypes, size: PropTypes.number, square: PropTypes.bool, - ...sx.propTypes, - theme: PropTypes.object + ...sx.propTypes } export type AvatarProps = ComponentProps diff --git a/src/AvatarPair.tsx b/src/AvatarPair.tsx index 1ae30a264c5..c9efbf3d29e 100644 --- a/src/AvatarPair.tsx +++ b/src/AvatarPair.tsx @@ -1,10 +1,8 @@ -import PropTypes from 'prop-types' import React from 'react' import styled from 'styled-components' import Avatar from './Avatar' import {get} from './constants' import {Relative, RelativeProps} from './Position' -import theme from './theme' const ChildAvatar = styled(Avatar)` position: absolute; @@ -30,10 +28,8 @@ const AvatarPair = ({children, ...rest}: AvatarPairProps) => { // styled() changes this AvatarPair.displayName = 'AvatarPair' -AvatarPair.defaultProps = {theme} AvatarPair.propTypes = { - ...Relative.propTypes, - theme: PropTypes.object + ...Relative.propTypes } export default AvatarPair diff --git a/src/AvatarStack.tsx b/src/AvatarStack.tsx index 1529632314e..6b3edc5a978 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 sx, {SxProp} from './sx' -import {get, COMMON, SystemCommonProps} from './constants' -import theme from './theme' +import {COMMON, get, SystemCommonProps} from './constants' import {Absolute} from './Position' +import sx, {SxProp} from './sx' import {ComponentProps} from './utils/types' type StyledAvatarStackWrapperProps = { @@ -160,10 +159,6 @@ const AvatarStack = ({children, alignRight, ...rest}: AvatarStackProps) => { ) } -AvatarStack.defaultProps = { - theme -} - AvatarStack.propTypes = { ...COMMON.propTypes, alignRight: PropTypes.bool, From 1abd5aa1e0e57e6d8a5afa4a5a7e485d1e1fabdc Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 1 Mar 2021 13:14:25 -0800 Subject: [PATCH 03/18] Fix merge conflicts --- src/AvatarStack.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/AvatarStack.tsx b/src/AvatarStack.tsx index aa3f12fb590..e2768db6d5b 100644 --- a/src/AvatarStack.tsx +++ b/src/AvatarStack.tsx @@ -1,17 +1,9 @@ import classnames from 'classnames' -<<<<<<< HEAD -import PropTypes from 'prop-types' -======= ->>>>>>> origin/main import React from 'react' import styled from 'styled-components' import {COMMON, get, SystemCommonProps} from './constants' import {Absolute} from './Position' import sx, {SxProp} from './sx' -<<<<<<< HEAD -======= -import theme from './theme' ->>>>>>> origin/main import {ComponentProps} from './utils/types' type StyledAvatarStackWrapperProps = { From 5ac6c99fd89757e6a9cb1fa4da6ae22b9253defa Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 1 Mar 2021 13:43:07 -0800 Subject: [PATCH 04/18] Remove default theme prop from every component --- src/BaseStyles.tsx | 4 +--- src/BorderBox.tsx | 2 -- src/Box.tsx | 3 --- src/BranchName.tsx | 5 ----- src/Breadcrumb.tsx | 9 --------- src/Button/Button.tsx | 7 ++----- src/Button/ButtonBase.tsx | 2 -- src/Button/ButtonClose.tsx | 17 +++++++---------- src/Button/ButtonDanger.tsx | 7 +------ src/Button/ButtonGroup.tsx | 4 +--- src/Button/ButtonInvisible.tsx | 5 ----- src/Button/ButtonOutline.tsx | 5 ----- src/Button/ButtonPrimary.tsx | 5 ----- src/Button/ButtonTableList.tsx | 3 --- src/Caret.tsx | 4 +--- src/CircleBadge.tsx | 8 +------- src/CircleOcticon.tsx | 2 -- src/CounterLabel.tsx | 5 ----- src/Details.tsx | 5 ----- src/Dialog.tsx | 6 +----- src/Dropdown.tsx | 12 +++--------- src/FilterList.tsx | 6 ------ src/FilteredSearch.tsx | 5 ----- src/Flash.tsx | 2 -- src/Flex.tsx | 2 -- src/FormGroup.tsx | 7 ------- src/Grid.tsx | 2 -- src/Header.tsx | 7 ------- src/Label.tsx | 2 -- src/LabelGroup.tsx | 5 ----- src/Link.tsx | 5 ----- src/Pagehead.tsx | 3 --- src/Pagination/Pagination.tsx | 4 +--- src/PointerBox.tsx | 3 --- src/Popover.tsx | 8 +------- src/Position.tsx | 8 +------- src/ProgressBar.tsx | 5 +---- src/SelectMenu/SelectMenu.tsx | 2 -- src/SelectMenu/SelectMenuDivider.tsx | 3 --- src/SelectMenu/SelectMenuFilter.tsx | 4 ---- src/SelectMenu/SelectMenuFooter.tsx | 3 --- src/SelectMenu/SelectMenuHeader.tsx | 3 --- src/SelectMenu/SelectMenuItem.tsx | 2 -- src/SelectMenu/SelectMenuList.tsx | 2 -- src/SelectMenu/SelectMenuModal.tsx | 2 -- src/SelectMenu/SelectMenuTab.tsx | 5 ----- src/SelectMenu/SelectMenuTabPanel.tsx | 5 ----- src/SelectMenu/SelectMenuTabs.tsx | 3 --- src/SideNav.tsx | 3 --- src/StateLabel.tsx | 2 -- src/StyledOcticon.tsx | 2 -- src/SubNav.tsx | 5 ----- src/TabNav.tsx | 5 ----- src/Text.tsx | 5 ----- src/TextInput.tsx | 4 +--- src/Timeline.tsx | 7 ------- src/Tooltip.tsx | 4 +--- src/Truncate.tsx | 4 +--- src/UnderlineNav.tsx | 5 ----- 59 files changed, 25 insertions(+), 249 deletions(-) diff --git a/src/BaseStyles.tsx b/src/BaseStyles.tsx index 7813b02acf5..42d82f6a18c 100644 --- a/src/BaseStyles.tsx +++ b/src/BaseStyles.tsx @@ -2,7 +2,6 @@ import React from 'react' import styled, {createGlobalStyle} from 'styled-components' import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants' import useMouseIntent from './hooks/useMouseIntent' -import theme from './theme' import {ComponentProps} from './utils/types' const GlobalStyle = createGlobalStyle` @@ -47,8 +46,7 @@ function BaseStyles(props: BaseStylesProps) { BaseStyles.defaultProps = { color: 'text.primary', fontFamily: 'normal', - lineHeight: 'default', - theme + lineHeight: 'default' } export default BaseStyles diff --git a/src/BorderBox.tsx b/src/BorderBox.tsx index 4938b35572c..3890718cbfe 100644 --- a/src/BorderBox.tsx +++ b/src/BorderBox.tsx @@ -2,7 +2,6 @@ import styled from 'styled-components' import Box from './Box' import {BORDER, SystemBorderProps} from './constants' import sx from './sx' -import theme from './theme' import {ComponentProps} from './utils/types' const BorderBox = styled(Box)` @@ -11,7 +10,6 @@ const BorderBox = styled(Box)` ` BorderBox.defaultProps = { - theme, borderWidth: '1px', borderStyle: 'solid', borderColor: 'border.primary', diff --git a/src/Box.tsx b/src/Box.tsx index 63511b4d9a8..d5790f69ddd 100644 --- a/src/Box.tsx +++ b/src/Box.tsx @@ -1,7 +1,6 @@ import styled from 'styled-components' import {COMMON, FLEX, LAYOUT, SystemCommonProps, SystemFlexProps, SystemLayoutProps} from './constants' import sx, {SxProp} from './sx' -import theme from './theme' import {ComponentProps} from './utils/types' const Box = styled.div` @@ -11,7 +10,5 @@ const Box = styled.div export default Box diff --git a/src/BranchName.tsx b/src/BranchName.tsx index fe3ab558396..3f061fff3e3 100644 --- a/src/BranchName.tsx +++ b/src/BranchName.tsx @@ -1,7 +1,6 @@ import styled from 'styled-components' import {COMMON, get, SystemCommonProps} from './constants' import sx, {SxProp} from './sx' -import theme from './theme' import {ComponentProps} from './utils/types' const BranchName = styled.a` @@ -16,9 +15,5 @@ const BranchName = styled.a` ${sx}; ` -BranchName.defaultProps = { - theme -} - export type BranchNameProps = ComponentProps export default BranchName diff --git a/src/Breadcrumb.tsx b/src/Breadcrumb.tsx index 98b80f09e3a..826f1f10e3f 100644 --- a/src/Breadcrumb.tsx +++ b/src/Breadcrumb.tsx @@ -5,7 +5,6 @@ import styled from 'styled-components' import Box from './Box' import {COMMON, FLEX, get, SystemCommonProps, SystemFlexProps} from './constants' import sx, {SxProp} from './sx' -import theme from './theme' import {ComponentProps} from './utils/types' const SELECTED_CLASS = 'selected' @@ -79,16 +78,8 @@ const BreadcrumbItem = styled.a.attrs(props => ({ ${sx}; ` -Breadcrumb.defaultProps = { - theme -} - Breadcrumb.displayName = 'Breadcrumb' -BreadcrumbItem.defaultProps = { - theme -} - BreadcrumbItem.displayName = 'Breadcrumb.Item' export type BreadcrumbItemProps = ComponentProps diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx index 574f2c34406..0f3ff973122 100644 --- a/src/Button/Button.tsx +++ b/src/Button/Button.tsx @@ -1,9 +1,8 @@ import styled from 'styled-components' -import sx, {SxProp} from '../sx' import {get} from '../constants' -import theme from '../theme' -import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase' +import sx, {SxProp} from '../sx' import {ComponentProps} from '../utils/types' +import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase' const Button = styled(ButtonBase)` color: ${get('buttons.default.color.default')}; @@ -39,7 +38,5 @@ const Button = styled(ButtonBase)` ${sx}; ` -Button.defaultProps = {theme} - export type ButtonProps = ComponentProps export default Button diff --git a/src/Button/ButtonBase.tsx b/src/Button/ButtonBase.tsx index 45a999a558b..cf3ee633084 100644 --- a/src/Button/ButtonBase.tsx +++ b/src/Button/ButtonBase.tsx @@ -1,7 +1,6 @@ import styled from 'styled-components' import {compose, fontSize, FontSizeProps, variant} from 'styled-system' import {COMMON, LAYOUT, SystemCommonProps, SystemLayoutProps} from '../constants' -import theme from '../theme' import {ComponentProps} from '../utils/types' import buttonBaseStyles from './ButtonStyles' @@ -37,7 +36,6 @@ const ButtonBase = styled.button.attrs(({disabled, onClic ` ButtonBase.defaultProps = { - theme, variant: 'medium' } diff --git a/src/Button/ButtonClose.tsx b/src/Button/ButtonClose.tsx index 1b4dc8e85ec..f536291f531 100644 --- a/src/Button/ButtonClose.tsx +++ b/src/Button/ButtonClose.tsx @@ -3,7 +3,6 @@ import React, {forwardRef} from 'react' import styled from 'styled-components' import {COMMON, get, LAYOUT, SystemCommonProps, SystemLayoutProps} from '../constants' import sx, {SxProp} from '../sx' -import defaultTheme from '../theme' import {ComponentProps} from '../utils/types' type StyledButtonProps = SystemCommonProps & SystemLayoutProps & SxProp @@ -28,15 +27,13 @@ const StyledButton = styled.button` ${sx}; ` -const ButtonClose = forwardRef>( - ({theme = defaultTheme, ...props}, ref) => { - return ( - - - - ) - } -) +const ButtonClose = forwardRef>(({theme, ...props}, ref) => { + return ( + + + + ) +}) export type ButtonCloseProps = ComponentProps export default ButtonClose diff --git a/src/Button/ButtonDanger.tsx b/src/Button/ButtonDanger.tsx index ca78ae99fd2..fe866ffbbf0 100644 --- a/src/Button/ButtonDanger.tsx +++ b/src/Button/ButtonDanger.tsx @@ -1,9 +1,8 @@ import styled from 'styled-components' -import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase' import {get} from '../constants' -import theme from '../theme' import sx, {SxProp} from '../sx' import {ComponentProps} from '../utils/types' +import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase' const ButtonDanger = styled(ButtonBase)` color: ${get('buttons.danger.color.default')}; @@ -40,9 +39,5 @@ const ButtonDanger = styled(ButtonBase) export default ButtonDanger diff --git a/src/Button/ButtonGroup.tsx b/src/Button/ButtonGroup.tsx index 33fd8e7fda1..31fb38ce688 100644 --- a/src/Button/ButtonGroup.tsx +++ b/src/Button/ButtonGroup.tsx @@ -2,7 +2,6 @@ import styled from 'styled-components' import Box from '../Box' import {get} from '../constants' import sx from '../sx' -import theme from '../theme' import {ComponentProps} from '../utils/types' const ButtonGroup = styled(Box)` @@ -49,8 +48,7 @@ const ButtonGroup = styled(Box)` ` ButtonGroup.defaultProps = { - display: 'inline-block', - theme + display: 'inline-block' } export type ButtonGroupProps = ComponentProps diff --git a/src/Button/ButtonInvisible.tsx b/src/Button/ButtonInvisible.tsx index 75f53b67f0a..190f076dcb1 100644 --- a/src/Button/ButtonInvisible.tsx +++ b/src/Button/ButtonInvisible.tsx @@ -1,7 +1,6 @@ import styled from 'styled-components' import {get} from '../constants' import sx, {SxProp} from '../sx' -import theme from '../theme' import {ComponentProps} from '../utils/types' import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase' @@ -24,9 +23,5 @@ const ButtonInvisible = styled(ButtonBase) export default ButtonInvisible diff --git a/src/Button/ButtonOutline.tsx b/src/Button/ButtonOutline.tsx index eb58e5cb18b..9bc6074b11a 100644 --- a/src/Button/ButtonOutline.tsx +++ b/src/Button/ButtonOutline.tsx @@ -1,7 +1,6 @@ import styled from 'styled-components' import {get} from '../constants' import sx, {SxProp} from '../sx' -import theme from '../theme' import {ComponentProps} from '../utils/types' import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase' @@ -40,9 +39,5 @@ const ButtonOutline = styled(ButtonBase) export default ButtonOutline diff --git a/src/Button/ButtonPrimary.tsx b/src/Button/ButtonPrimary.tsx index d549bb053e0..5a28b9fc6a1 100644 --- a/src/Button/ButtonPrimary.tsx +++ b/src/Button/ButtonPrimary.tsx @@ -1,7 +1,6 @@ import styled from 'styled-components' import {get} from '../constants' import sx, {SxProp} from '../sx' -import theme from '../theme' import {ComponentProps} from '../utils/types' import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase' @@ -38,9 +37,5 @@ export const ButtonPrimary = styled(ButtonBase) export default ButtonPrimary diff --git a/src/Button/ButtonTableList.tsx b/src/Button/ButtonTableList.tsx index 8dfae8f87d5..83347769115 100644 --- a/src/Button/ButtonTableList.tsx +++ b/src/Button/ButtonTableList.tsx @@ -9,7 +9,6 @@ import { TYPOGRAPHY } from '../constants' import sx, {SxProp} from '../sx' -import theme from '../theme' import {ComponentProps} from '../utils/types' type StyledButtonTableListProps = SystemCommonProps & SystemTypographyProps & SystemLayoutProps & SxProp @@ -55,7 +54,5 @@ const ButtonTableList = styled.summary` ${sx}; ` -ButtonTableList.defaultProps = {theme} - export type ButtonTableListProps = ComponentProps export default ButtonTableList diff --git a/src/Caret.tsx b/src/Caret.tsx index 90055fc7808..28bbdff1f0f 100644 --- a/src/Caret.tsx +++ b/src/Caret.tsx @@ -1,6 +1,5 @@ import React from 'react' import {style} from 'styled-system' -import theme from './theme' type Location = | 'top' @@ -123,8 +122,7 @@ Caret.locations = [ Caret.defaultProps = { bg: 'bg.canvas', borderColor: 'border.primary', - borderWidth: 1, - theme + borderWidth: 1 } export default Caret diff --git a/src/CircleBadge.tsx b/src/CircleBadge.tsx index 2d90381d9d1..2a192f70906 100644 --- a/src/CircleBadge.tsx +++ b/src/CircleBadge.tsx @@ -2,7 +2,6 @@ import styled from 'styled-components' import {COMMON, get, SystemCommonProps} from './constants' import StyledOcticon from './StyledOcticon' import sx, {SxProp} from './sx' -import theme from './theme' import isNumeric from './utils/isNumeric' import {ComponentProps} from './utils/types' @@ -46,12 +45,7 @@ const CircleBadgeIcon = styled(StyledOcticon)` ` CircleBadge.defaultProps = { - inline: false, - theme -} - -CircleBadgeIcon.defaultProps = { - theme + inline: false } CircleBadgeIcon.displayName = 'CircleBadge.Icon' diff --git a/src/CircleOcticon.tsx b/src/CircleOcticon.tsx index 16d61b5141f..509d0665626 100644 --- a/src/CircleOcticon.tsx +++ b/src/CircleOcticon.tsx @@ -2,7 +2,6 @@ import {IconProps} from '@primer/octicons-react' import React from 'react' import BorderBox from './BorderBox' import Flex, {FlexProps} from './Flex' -import theme from './theme' export type CircleOcticonProps = { as?: React.ElementType @@ -23,7 +22,6 @@ function CircleOcticon(props: CircleOcticonProps) { } CircleOcticon.defaultProps = { - theme, ...Flex.defaultProps, size: 32 } diff --git a/src/CounterLabel.tsx b/src/CounterLabel.tsx index 7275f6f1351..51c2521d4b5 100644 --- a/src/CounterLabel.tsx +++ b/src/CounterLabel.tsx @@ -1,7 +1,6 @@ import styled from 'styled-components' import {COMMON, get, SystemCommonProps} from './constants' import sx, {SxProp} from './sx' -import theme from './theme' import {ComponentProps} from './utils/types' type StyledCounterLabelProps = { @@ -49,9 +48,5 @@ const CounterLabel = styled.span` ${sx}; ` -CounterLabel.defaultProps = { - theme -} - export type CounterLabelProps = ComponentProps export default CounterLabel diff --git a/src/Details.tsx b/src/Details.tsx index 4c36bc7a7fc..4367ab0dce0 100644 --- a/src/Details.tsx +++ b/src/Details.tsx @@ -1,7 +1,6 @@ import styled from 'styled-components' import {COMMON, SystemCommonProps} from './constants' import sx, {SxProp} from './sx' -import theme from './theme' import {ComponentProps} from './utils/types' type StyledDetailsProps = SystemCommonProps & SxProp @@ -20,9 +19,5 @@ const Details = styled.details` Details.displayName = 'Details' -Details.defaultProps = { - theme -} - export type DetailsProps = ComponentProps export default Details diff --git a/src/Dialog.tsx b/src/Dialog.tsx index 4b332ec009c..e9f94cb3d1f 100644 --- a/src/Dialog.tsx +++ b/src/Dialog.tsx @@ -6,7 +6,6 @@ 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 @@ -139,11 +138,8 @@ const Dialog = forwardRef( } ) -Dialog.defaultProps = {theme} - DialogHeader.defaultProps = { - backgroundColor: 'gray.1', - theme + backgroundColor: 'gray.1' } DialogHeader.displayName = 'Dialog.Header' diff --git a/src/Dropdown.tsx b/src/Dropdown.tsx index ea774f69be5..d4dccf91a57 100644 --- a/src/Dropdown.tsx +++ b/src/Dropdown.tsx @@ -6,7 +6,6 @@ import Details, {DetailsProps} from './Details' import getDirectionStyles from './DropdownStyles' import useDetails from './hooks/useDetails' import sx, {SxProp} from './sx' -import theme from './theme' import {ComponentProps} from './utils/types' const StyledDetails = styled(Details)` @@ -136,22 +135,17 @@ const DropdownItem = styled.li` ${sx}; ` -DropdownMenu.defaultProps = { - direction: 'sw', - theme -} +DropdownMenu.defaultProps = {direction: 'sw'} DropdownMenu.displayName = 'Dropdown.Menu' -DropdownItem.defaultProps = {theme} DropdownItem.displayName = 'Dropdown.Item' -DropdownButton.defaultProps = {theme, ...Button.defaultProps} +DropdownButton.defaultProps = {...Button.defaultProps} DropdownButton.displayName = 'Dropdown.Button' -DropdownCaret.defaultProps = {theme} DropdownCaret.displayName = 'Dropdown.Caret' -Dropdown.defaultProps = {theme, ...Details.defaultProps} +Dropdown.defaultProps = {...Details.defaultProps} export type DropdownCaretProps = ComponentProps export type DropdownMenuProps = ComponentProps diff --git a/src/FilterList.tsx b/src/FilterList.tsx index 97bf11c2619..9d651bffe7c 100644 --- a/src/FilterList.tsx +++ b/src/FilterList.tsx @@ -2,7 +2,6 @@ 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' const FilterListBase = styled.ul` @@ -73,15 +72,10 @@ function FilterListItem({children, count, ...rest}: React.PropsWithChildren` @@ -25,9 +24,5 @@ const FilteredSearch = styled.div` ${sx} ` -FilteredSearch.defaultProps = { - theme -} - export type FilteredSearchProps = ComponentProps export default FilteredSearch diff --git a/src/Flash.tsx b/src/Flash.tsx index 9f364d66b21..5ebffb3f374 100644 --- a/src/Flash.tsx +++ b/src/Flash.tsx @@ -2,7 +2,6 @@ import styled from 'styled-components' import {variant} from 'styled-system' import {COMMON, get, SystemCommonProps} from './constants' import sx, {SxProp} from './sx' -import theme from './theme' const variants = variant({ scale: 'flash' @@ -38,7 +37,6 @@ const Flash = styled.div< ` Flash.defaultProps = { - theme, variant: 'default' } diff --git a/src/Flex.tsx b/src/Flex.tsx index 7b888b95861..b026b8675f8 100644 --- a/src/Flex.tsx +++ b/src/Flex.tsx @@ -1,12 +1,10 @@ import styled from 'styled-components' import Box from './Box' -import theme from './theme' import {ComponentProps} from './utils/types' const Flex = styled(Box)`` Flex.defaultProps = { - theme, display: 'flex' } diff --git a/src/FormGroup.tsx b/src/FormGroup.tsx index 508e8558ffe..d9111fafc1c 100644 --- a/src/FormGroup.tsx +++ b/src/FormGroup.tsx @@ -1,7 +1,6 @@ import styled from 'styled-components' 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` @@ -11,8 +10,6 @@ const FormGroup = styled.div` ${sx}; ` -FormGroup.defaultProps = {theme} - const FormGroupLabel = styled.label` display: block; margin: 0 0 ${get('space.2')}; @@ -25,10 +22,6 @@ const FormGroupLabel = styled.label export type FormGroupLabelProps = ComponentProps export default Object.assign(FormGroup, {Label: FormGroupLabel}) diff --git a/src/Grid.tsx b/src/Grid.tsx index 3f4b5818717..04d7e2e0676 100644 --- a/src/Grid.tsx +++ b/src/Grid.tsx @@ -1,7 +1,6 @@ import styled from 'styled-components' import Box from './Box' import {GRID, SystemGridProps} from './constants' -import theme from './theme' import {ComponentProps} from './utils/types' const Grid = styled(Box)` @@ -9,7 +8,6 @@ const Grid = styled(Box)` ` Grid.defaultProps = { - theme, display: 'grid' } diff --git a/src/Header.tsx b/src/Header.tsx index 7996a46ab8b..5587c6627f5 100644 --- a/src/Header.tsx +++ b/src/Header.tsx @@ -2,7 +2,6 @@ import * as History from 'history' import styled, {css} from 'styled-components' import {BORDER, COMMON, get, SystemBorderProps, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants' import sx, {SxProp} from './sx' -import theme from './theme' import {ComponentProps} from './utils/types' type StyledHeaderItemProps = {full?: boolean} & SystemCommonProps & SxProp @@ -78,12 +77,6 @@ const HeaderLink = styled.a.attrs(({to}) => { HeaderLink.displayName = 'Header.Link' -Header.defaultProps = {theme} - -HeaderItem.defaultProps = {theme} - -HeaderLink.defaultProps = {theme} - export type HeaderProps = ComponentProps export type HeaderLinkProps = ComponentProps export type HeaderItemProps = ComponentProps diff --git a/src/Label.tsx b/src/Label.tsx index 88014acedce..fe55463ea90 100644 --- a/src/Label.tsx +++ b/src/Label.tsx @@ -2,7 +2,6 @@ import styled, {css} from 'styled-components' import {borderColor, BorderColorProps, variant} from 'styled-system' import {COMMON, get, SystemCommonProps} from './constants' import sx, {SxProp} from './sx' -import theme from './theme' import {ComponentProps} from './utils/types' const outlineStyles = css` @@ -68,7 +67,6 @@ const Label = styled.span< ` Label.defaultProps = { - theme, bg: 'gray.5', variant: 'medium' } diff --git a/src/LabelGroup.tsx b/src/LabelGroup.tsx index 513abaea71d..edaec3667cf 100644 --- a/src/LabelGroup.tsx +++ b/src/LabelGroup.tsx @@ -1,7 +1,6 @@ import styled from 'styled-components' import {COMMON, get, SystemCommonProps} from './constants' import sx, {SxProp} from './sx' -import theme from './theme' import {ComponentProps} from './utils/types' const LabelGroup = styled.span` @@ -15,9 +14,5 @@ const LabelGroup = styled.span` ${sx}; ` -LabelGroup.defaultProps = { - theme -} - export type LabelGroupProps = ComponentProps export default LabelGroup diff --git a/src/Link.tsx b/src/Link.tsx index 6c0c5016682..b46cc591bec 100644 --- a/src/Link.tsx +++ b/src/Link.tsx @@ -2,7 +2,6 @@ import styled from 'styled-components' import {system} from 'styled-system' import {COMMON, get, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants' import sx, {SxProp} from './sx' -import theme from './theme' import {ComponentProps} from './utils/types' type StyledLinkProps = { @@ -55,9 +54,5 @@ const Link = styled.a` ${sx}; ` -Link.defaultProps = { - theme -} - export type LinkProps = ComponentProps export default Link diff --git a/src/Pagehead.tsx b/src/Pagehead.tsx index 5134e10e69b..cdd6b1903fa 100644 --- a/src/Pagehead.tsx +++ b/src/Pagehead.tsx @@ -1,7 +1,6 @@ import styled from 'styled-components' import {COMMON, get, SystemCommonProps} from './constants' import sx, {SxProp} from './sx' -import theme from './theme' import {ComponentProps} from './utils/types' const Pagehead = styled.div` @@ -14,7 +13,5 @@ const Pagehead = styled.div` ${sx}; ` -Pagehead.defaultProps = {theme} - export type PageheadProps = ComponentProps export default Pagehead diff --git a/src/Pagination/Pagination.tsx b/src/Pagination/Pagination.tsx index d05a5dc5ea6..58437044d16 100644 --- a/src/Pagination/Pagination.tsx +++ b/src/Pagination/Pagination.tsx @@ -3,7 +3,6 @@ import styled from 'styled-components' import Box from '../Box' import {COMMON, get} from '../constants' import sx from '../sx' -import theme from '../theme' import {buildComponentData, buildPaginationModel} from './model' const Page = styled.a` @@ -208,8 +207,7 @@ Pagination.defaultProps = { marginPageCount: 1, onPageChange: noop, showPages: true, - surroundingPageCount: 2, - theme + surroundingPageCount: 2 } export default Pagination diff --git a/src/PointerBox.tsx b/src/PointerBox.tsx index 184d61c68be..f5b67f1697e 100644 --- a/src/PointerBox.tsx +++ b/src/PointerBox.tsx @@ -1,7 +1,6 @@ import React from 'react' import BorderBox, {BorderBoxProps} from './BorderBox' import Caret, {CaretProps} from './Caret' -import theme from './theme' export type PointerBoxProps = { caret?: CaretProps['location'] @@ -23,6 +22,4 @@ function PointerBox(props: PointerBoxProps) { ) } -PointerBox.defaultProps = {theme} - export default PointerBox diff --git a/src/Popover.tsx b/src/Popover.tsx index 347dfafa745..49240d33890 100644 --- a/src/Popover.tsx +++ b/src/Popover.tsx @@ -3,7 +3,6 @@ import styled from 'styled-components' import BorderBox from './BorderBox' import {COMMON, get, LAYOUT, POSITION, SystemCommonProps, SystemLayoutProps, SystemPositionProps} from './constants' import sx, {SxProp} from './sx' -import theme from './theme' import {ComponentProps} from './utils/types' type CaretPosition = @@ -225,12 +224,7 @@ const PopoverContent = styled(BorderBox)` ` Popover.defaultProps = { - caret: 'top', - theme -} - -PopoverContent.defaultProps = { - theme + caret: 'top' } PopoverContent.displayName = 'Popover.Content' diff --git a/src/Position.tsx b/src/Position.tsx index fed4a5df8a6..ce9eabeeae1 100644 --- a/src/Position.tsx +++ b/src/Position.tsx @@ -3,7 +3,6 @@ import styled from 'styled-components' import Box from './Box' import {POSITION, SystemPositionProps} from './constants' import sx from './sx' -import theme from './theme' import {ComponentProps} from './utils/types' type StyledPositionProps = {as?: React.ElementType} & SystemPositionProps @@ -13,8 +12,6 @@ const Position = styled(Box)` ${sx}; ` -Position.defaultProps = {theme} - export type PositionProps = ComponentProps export default Position @@ -23,25 +20,22 @@ export type AbsoluteProps = Omit export function Absolute(props: AbsoluteProps) { return } -Absolute.defaultProps = Position.defaultProps // Fixed export type FixedProps = Omit export function Fixed(props: AbsoluteProps) { return } -Fixed.defaultProps = Position.defaultProps // Relative export type RelativeProps = Omit export function Relative(props: RelativeProps) { return } -Relative.defaultProps = Position.defaultProps // Sticky export type StickyProps = Omit export function Sticky(props: StickyProps) { return } -Sticky.defaultProps = {...Position.defaultProps, top: 0, zIndex: 1} +Sticky.defaultProps = {top: 0, zIndex: 1} diff --git a/src/ProgressBar.tsx b/src/ProgressBar.tsx index 6ef4cb2f9ac..5a105c7c778 100644 --- a/src/ProgressBar.tsx +++ b/src/ProgressBar.tsx @@ -3,7 +3,6 @@ import styled from 'styled-components' import {width, WidthProps} from 'styled-system' import {COMMON, get, SystemCommonProps} from './constants' import sx, {SxProp} from './sx' -import theme from './theme' import {ComponentProps} from './utils/types' const Bar = styled.span<{progress?: string | number} & SystemCommonProps>` @@ -45,11 +44,9 @@ function ProgressBar({progress, bg, theme, ...rest}: ProgressBarProps) { ) } - ProgressBar.defaultProps = { bg: 'state.success', - barSize: 'default', - theme + barSize: 'default' } export default ProgressBar diff --git a/src/SelectMenu/SelectMenu.tsx b/src/SelectMenu/SelectMenu.tsx index 5e8b3772772..b9f0c4ffce7 100644 --- a/src/SelectMenu/SelectMenu.tsx +++ b/src/SelectMenu/SelectMenu.tsx @@ -2,7 +2,6 @@ import React, {useCallback, useEffect, useRef, useState} from 'react' import styled from 'styled-components' 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' @@ -98,7 +97,6 @@ const SelectMenu = React.forwardRef( SelectMenu.displayName = 'SelectMenu' -SelectMenu.defaultProps = {theme} export type SelectMenuProps = ComponentProps export type { SelectMenuDividerProps } from './SelectMenuDivider' diff --git a/src/SelectMenu/SelectMenuDivider.tsx b/src/SelectMenu/SelectMenuDivider.tsx index 9681054cdba..ef1d27509dc 100644 --- a/src/SelectMenu/SelectMenuDivider.tsx +++ b/src/SelectMenu/SelectMenuDivider.tsx @@ -1,5 +1,4 @@ import styled, {css} from 'styled-components' -import theme from '../theme' import {COMMON, get, SystemCommonProps} from '../constants' import sx, {SxProp} from '../sx' import {ComponentProps} from '../utils/types' @@ -20,8 +19,6 @@ const SelectMenuDivider = styled.div` ${sx}; ` -SelectMenuDivider.defaultProps = {theme} - SelectMenuDivider.displayName = 'SelectMenu.Divider' export type SelectMenuDividerProps = ComponentProps diff --git a/src/SelectMenu/SelectMenuFilter.tsx b/src/SelectMenu/SelectMenuFilter.tsx index f51268877bb..9258fadba7c 100644 --- a/src/SelectMenu/SelectMenuFilter.tsx +++ b/src/SelectMenu/SelectMenuFilter.tsx @@ -3,7 +3,6 @@ import styled from 'styled-components' import {COMMON, get, SystemCommonProps} from '../constants' import sx, {SxProp} from '../sx' import TextInput, {TextInputProps} from '../TextInput' -import theme from '../theme' import {ComponentProps} from '../utils/types' import {MenuContext} from './SelectMenuContext' @@ -46,9 +45,6 @@ const SelectMenuFilter = forwardRef diff --git a/src/SelectMenu/SelectMenuFooter.tsx b/src/SelectMenu/SelectMenuFooter.tsx index 93274a6a6d7..96ccb234ad3 100644 --- a/src/SelectMenu/SelectMenuFooter.tsx +++ b/src/SelectMenu/SelectMenuFooter.tsx @@ -1,6 +1,5 @@ import styled, {css} from 'styled-components' import {COMMON, get, SystemCommonProps} from '../constants' -import theme from '../theme' import sx, {SxProp} from '../sx' import {ComponentProps} from '../utils/types' @@ -23,8 +22,6 @@ const SelectMenuFooter = styled.footer` ${sx}; ` -SelectMenuFooter.defaultProps = {theme} - SelectMenuFooter.displayName = 'SelectMenu.Footer' export type SelectMenuFooterProps = ComponentProps diff --git a/src/SelectMenu/SelectMenuHeader.tsx b/src/SelectMenu/SelectMenuHeader.tsx index acf06815e00..4a7addcc778 100644 --- a/src/SelectMenu/SelectMenuHeader.tsx +++ b/src/SelectMenu/SelectMenuHeader.tsx @@ -2,7 +2,6 @@ import React from 'react' import styled from 'styled-components' 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 @@ -45,8 +44,6 @@ const SelectMenuHeader = ({children, theme, ...rest}: SelectMenuHeaderProps) => ) } -SelectMenuHeader.defaultProps = {theme} - SelectMenuHeader.displayName = 'SelectMenu.Header' export default SelectMenuHeader diff --git a/src/SelectMenu/SelectMenuItem.tsx b/src/SelectMenu/SelectMenuItem.tsx index a29b0cc3614..359ad53162e 100644 --- a/src/SelectMenu/SelectMenuItem.tsx +++ b/src/SelectMenu/SelectMenuItem.tsx @@ -4,7 +4,6 @@ import styled, {css} from 'styled-components' import {COMMON, get, SystemCommonProps} from '../constants' import StyledOcticon from '../StyledOcticon' import sx, {SxProp} from '../sx' -import theme from '../theme' import {ComponentProps} from '../utils/types' import {MenuContext} from './SelectMenuContext' @@ -130,7 +129,6 @@ const SelectMenuItem = forwardRef ) SelectMenuItem.defaultProps = { - theme, selected: false } diff --git a/src/SelectMenu/SelectMenuList.tsx b/src/SelectMenu/SelectMenuList.tsx index 680c23f07b5..87fab6aeb9e 100644 --- a/src/SelectMenu/SelectMenuList.tsx +++ b/src/SelectMenu/SelectMenuList.tsx @@ -1,7 +1,6 @@ import styled, {css} from 'styled-components' import {COMMON, get, SystemCommonProps} from '../constants' import sx, {SxProp} from '../sx' -import theme from '../theme' import {ComponentProps} from '../utils/types' const listStyles = css` @@ -36,7 +35,6 @@ const SelectMenuList = styled.div` ${COMMON} ${sx}; ` -SelectMenuList.defaultProps = {theme} SelectMenuList.displayName = 'SelectMenu.List' diff --git a/src/SelectMenu/SelectMenuModal.tsx b/src/SelectMenu/SelectMenuModal.tsx index 061a6d646bc..1e3bb59d7da 100644 --- a/src/SelectMenu/SelectMenuModal.tsx +++ b/src/SelectMenu/SelectMenuModal.tsx @@ -3,7 +3,6 @@ import styled, {css, keyframes} from 'styled-components' import {width, WidthProps} from 'styled-system' import {COMMON, get, SystemCommonProps} from '../constants' import sx, {SxProp} from '../sx' -import theme from '../theme' import {ComponentProps} from '../utils/types' type StyledModalProps = { @@ -113,7 +112,6 @@ const SelectMenuModal = React.forwardRef { ) } -SelectMenuTabs.defaultProps = {theme} - SelectMenuTabs.displayName = 'SelectMenu.Tabs' export default SelectMenuTabs diff --git a/src/SideNav.tsx b/src/SideNav.tsx index 7be979ce12c..cfc6548cef7 100644 --- a/src/SideNav.tsx +++ b/src/SideNav.tsx @@ -6,7 +6,6 @@ import BorderBox from './BorderBox' import {COMMON, get} from './constants' import Link from './Link' import sx from './sx' -import theme from './theme' import {ComponentProps} from './utils/types' type SideNavBaseProps = { @@ -153,12 +152,10 @@ const SideNavLink = styled(Link).attrs(props => { ` SideNav.defaultProps = { - theme, variant: 'normal' } SideNavLink.defaultProps = { - theme, variant: 'normal' } diff --git a/src/StateLabel.tsx b/src/StateLabel.tsx index 518036a01f4..76a1a9a37a7 100644 --- a/src/StateLabel.tsx +++ b/src/StateLabel.tsx @@ -5,7 +5,6 @@ import {variant} from 'styled-system' import {COMMON, get, SystemCommonProps} from './constants' import StyledOcticon from './StyledOcticon' import sx, {SxProp} from './sx' -import theme from './theme' import {ComponentProps} from './utils/types' const octiconMap = { @@ -60,7 +59,6 @@ function StateLabel({children, status, variant, ...rest}: StateLabelProps) { } StateLabel.defaultProps = { - theme, variant: 'normal' } diff --git a/src/StyledOcticon.tsx b/src/StyledOcticon.tsx index 4290a6deded..b543e7a73c8 100644 --- a/src/StyledOcticon.tsx +++ b/src/StyledOcticon.tsx @@ -3,7 +3,6 @@ import React from 'react' import styled from 'styled-components' import {COMMON, SystemCommonProps} from './constants' import sx, {SxProp} from './sx' -import theme from './theme' import {ComponentProps} from './utils/types' type OcticonProps = {icon: React.ElementType} & IconProps @@ -18,7 +17,6 @@ const StyledOcticon = styled(Octicon)` ` StyledOcticon.defaultProps = { - theme, size: 16 } diff --git a/src/SubNav.tsx b/src/SubNav.tsx index 1e4dfcb9d65..997dbd958ce 100644 --- a/src/SubNav.tsx +++ b/src/SubNav.tsx @@ -5,7 +5,6 @@ import styled from 'styled-components' import {COMMON, FLEX, get, SystemBorderProps, SystemCommonProps, SystemFlexProps} from './constants' import Flex, {FlexProps} from './Flex' import sx, {SxProp} from './sx' -import theme from './theme' import {ComponentProps} from './utils/types' const ITEM_CLASS = 'SubNav-item' @@ -121,10 +120,6 @@ const SubNavLink = styled.a.attrs(props => ({ ${sx}; ` -SubNav.defaultProps = {theme} - -SubNavLink.defaultProps = {theme} - SubNavLink.displayName = 'SubNav.Link' SubNavLinks.displayName = 'SubNav.Links' diff --git a/src/TabNav.tsx b/src/TabNav.tsx index 037fcd8a8c5..ae704acd85e 100644 --- a/src/TabNav.tsx +++ b/src/TabNav.tsx @@ -4,7 +4,6 @@ import React from 'react' import styled from 'styled-components' import {COMMON, get, SystemCommonProps, SystemTypographyProps} from './constants' import sx, {SxProp} from './sx' -import theme from './theme' import {ComponentProps} from './utils/types' const ITEM_CLASS = 'TabNav-item' @@ -71,10 +70,6 @@ const TabNavLink = styled.a.attrs(props => ({ ${sx}; ` -TabNav.defaultProps = {theme} - -TabNavLink.defaultProps = {theme} - TabNavLink.displayName = 'TabNav.Link' export type TabNavLinkProps = ComponentProps diff --git a/src/Text.tsx b/src/Text.tsx index f8e469d458d..cd2dcfbc6a8 100644 --- a/src/Text.tsx +++ b/src/Text.tsx @@ -1,7 +1,6 @@ import styled from 'styled-components' import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants' import sx, {SxProp} from './sx' -import theme from './theme' const Text = styled.span` ${TYPOGRAPHY}; @@ -9,9 +8,5 @@ const Text = styled.span` ${sx}; ` -Text.defaultProps = { - theme -} - export type TextProps = React.ComponentProps export default Text diff --git a/src/TextInput.tsx b/src/TextInput.tsx index 7f596785d03..716a8e4bc66 100644 --- a/src/TextInput.tsx +++ b/src/TextInput.tsx @@ -5,7 +5,6 @@ import styled, {css} from 'styled-components' import {maxWidth, MaxWidthProps, minWidth, MinWidthProps, variant, width, WidthProps} from 'styled-system' import {COMMON, get, SystemCommonProps} from './constants' import sx, {SxProp} from './sx' -import theme from './theme' import {ComponentProps} from './utils/types' const sizeVariants = variant({ @@ -128,7 +127,7 @@ type TextInputInternalProps = {icon?: React.ComponentType<{className?: string}>} // using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input const TextInput = React.forwardRef( - ({icon: IconComponent, contrast, className, block, disabled, sx, ...rest}, ref) => { + ({icon: IconComponent, contrast, className, block, disabled, theme, sx, ...rest}, ref) => { // this class is necessary to style FilterSearch, plz no touchy! const wrapperClasses = classnames(className, 'TextInput-wrapper') const wrapperProps = pick(rest) @@ -152,7 +151,6 @@ const TextInput = React.forwardRef( ) TextInput.defaultProps = { - theme, type: 'text' } diff --git a/src/Timeline.tsx b/src/Timeline.tsx index 652b1290fa6..66a9d5af719 100644 --- a/src/Timeline.tsx +++ b/src/Timeline.tsx @@ -6,7 +6,6 @@ import {COMMON, get} from './constants' import Flex, {FlexProps} from './Flex' import {Relative} from './Position' import sx from './sx' -import theme from './theme' import {ComponentProps} from './utils/types' const Timeline = styled(Flex)<{clipSidebar?: boolean}>` @@ -120,18 +119,12 @@ const TimelineBreak = styled(Relative)` ${sx}; ` -Timeline.defaultProps = {theme} - -TimelineItem.defaultProps = {theme} TimelineItem.displayName = 'Timeline.Item' -TimelineBadge.defaultProps = {theme} TimelineBadge.displayName = 'Timeline.Badge' -TimelineBody.defaultProps = {theme} TimelineBody.displayName = 'Timeline.Body' -TimelineBreak.defaultProps = {theme} TimelineBreak.displayName = 'Timeline.Break' export type TimelineProps = ComponentProps diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx index 5a8c8530f8a..e1693cd9325 100644 --- a/src/Tooltip.tsx +++ b/src/Tooltip.tsx @@ -3,7 +3,6 @@ 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' const TooltipBase = styled.span` @@ -256,10 +255,9 @@ function Tooltip({direction = 'n', children, className, text, noDelay, align, wr ) } + Tooltip.alignments = ['left', 'right'] Tooltip.directions = ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw'] -Tooltip.defaultProps = {theme} - export default Tooltip diff --git a/src/Truncate.tsx b/src/Truncate.tsx index d1f5d319b80..043956b1310 100644 --- a/src/Truncate.tsx +++ b/src/Truncate.tsx @@ -2,7 +2,6 @@ import styled from 'styled-components' import {maxWidth, MaxWidthProps} from 'styled-system' import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants' import sx, {SxProp} from './sx' -import theme from './theme' import {ComponentProps} from './utils/types' type StyledTruncateProps = { @@ -30,8 +29,7 @@ const Truncate = styled.div` Truncate.defaultProps = { expandable: false, inline: false, - maxWidth: 125, - theme + maxWidth: 125 } export type TruncateProps = ComponentProps diff --git a/src/UnderlineNav.tsx b/src/UnderlineNav.tsx index f59e7d622fb..851f079f4e2 100644 --- a/src/UnderlineNav.tsx +++ b/src/UnderlineNav.tsx @@ -4,7 +4,6 @@ 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' const ITEM_CLASS = 'UnderlineNav-item' @@ -104,10 +103,6 @@ const UnderlineNavLink = styled.a.attrs(props => ({ ${sx}; ` -UnderlineNav.defaultProps = {theme} - -UnderlineNavLink.defaultProps = {theme} - UnderlineNavLink.displayName = 'UnderlineNav.Link' export type UnderlineNavLinkProps = ComponentProps From 0613bdcead3d3473c056f808b5d68f7cb10e9186 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 1 Mar 2021 15:02:02 -0800 Subject: [PATCH 05/18] Update styled components --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index e9bcf5d2452..056b3dde877 100644 --- a/package.json +++ b/package.json @@ -123,7 +123,7 @@ "rollup-plugin-terser": "5.3.0", "rollup-plugin-visualizer": "4.0.4", "semver": "7.3.2", - "styled-components": "4.4.0", + "styled-components": "4.4.1", "typescript": "4.1.3" }, "peerDependencies": { diff --git a/yarn.lock b/yarn.lock index 9ca6485aea3..eae0fa430ca 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13648,10 +13648,10 @@ style-to-object@0.3.0, style-to-object@^0.3.0: dependencies: inline-style-parser "0.1.1" -styled-components@4.4.0: - version "4.4.0" - resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.4.0.tgz#4e381e2dab831d0e6ea431c2840a96323e84e21b" - integrity sha512-xQ6vTI/0zNjZ1BBDRxyjvBddrxhQ3DxjeCdaLM1lSn5FDnkTOQgRkmWvcUiTajqc5nJqKVl+7sUioMqktD0+Zw== +styled-components@4.4.1: + version "4.4.1" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.4.1.tgz#e0631e889f01db67df4de576fedaca463f05c2f2" + integrity sha512-RNqj14kYzw++6Sr38n7197xG33ipEOktGElty4I70IKzQF1jzaD1U4xQ+Ny/i03UUhHlC5NWEO+d8olRCDji6g== dependencies: "@babel/helper-module-imports" "^7.0.0" "@babel/traverse" "^7.0.0" From 05d3b761c4853c1b4b3cc34d26608ff04e04e966 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 1 Mar 2021 15:02:50 -0800 Subject: [PATCH 06/18] Update render function to use ThemeProvider --- src/utils/testing.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/utils/testing.tsx b/src/utils/testing.tsx index c446d587117..a5d29a19caf 100644 --- a/src/utils/testing.tsx +++ b/src/utils/testing.tsx @@ -38,8 +38,10 @@ declare global { * expect(render()).toEqual(render(
)) * ``` */ -export function render(component: React.ReactElement) { - return renderer.create(component).toJSON() as renderer.ReactTestRendererJSON +export function render(component: React.ReactElement, theme = defaultTheme) { + return renderer + .create({component}) + .toJSON() as renderer.ReactTestRendererJSON } /** @@ -74,10 +76,6 @@ export function rendersClass(node: React.ReactElement, klass: string): boolean { return renderClasses(node).includes(klass) } -export function renderWithTheme(node: React.ReactElement, theme = defaultTheme): renderer.ReactTestRendererJSON { - return render({node}) -} - export function px(value: number | string): string { return typeof value === 'number' ? `${value}px` : value } From 8be4ea46d2e025538fc3d579e0734648d1e614d6 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 1 Mar 2021 15:03:30 -0800 Subject: [PATCH 07/18] Get theme from context in PointerBox --- src/PointerBox.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/PointerBox.tsx b/src/PointerBox.tsx index f5b67f1697e..1a4d46d871b 100644 --- a/src/PointerBox.tsx +++ b/src/PointerBox.tsx @@ -1,4 +1,5 @@ import React from 'react' +import {ThemeContext} from 'styled-components' import BorderBox, {BorderBoxProps} from './BorderBox' import Caret, {CaretProps} from './Caret' @@ -10,10 +11,17 @@ export type PointerBoxProps = { } & BorderBoxProps function PointerBox(props: PointerBoxProps) { + const themeContext = React.useContext(ThemeContext) // don't destructure these, just grab them - const {bg, border, borderColor} = props + const {bg, border, borderColor, theme} = props const {caret, children, ...boxProps} = props - const caretProps = {bg, borderColor, borderWidth: border, location: caret} + const caretProps = { + bg, + borderColor, + borderWidth: border, + location: caret, + theme: theme ?? themeContext + } return ( {children} From 7c95cc8d74c715aa91dfc223b1e88bdfff4ca776 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 1 Mar 2021 15:04:07 -0800 Subject: [PATCH 08/18] Update Popover snapshot I'm not sure why this changed --- src/__tests__/__snapshots__/Popover.tsx.snap | 1948 +++++++++++++++++- 1 file changed, 1904 insertions(+), 44 deletions(-) diff --git a/src/__tests__/__snapshots__/Popover.tsx.snap b/src/__tests__/__snapshots__/Popover.tsx.snap index 5f0c0f97c5f..fda7fec2e59 100644 --- a/src/__tests__/__snapshots__/Popover.tsx.snap +++ b/src/__tests__/__snapshots__/Popover.tsx.snap @@ -615,6 +615,161 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = ` bottom: calc(16px + 1px); } +.c0.caret-pos--bottom .c3::before, +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--bottom-left .c3::before, +.c0.caret-pos--bottom .c3::after, +.c0.caret-pos--bottom-right .c3::after, +.c0.caret-pos--bottom-left .c3::after { + top: auto; + border-bottom-color: transparent; +} + +.c0.caret-pos--bottom .c3::before, +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--bottom-left .c3::before { + bottom: -16px; + border-top-color: #e1e4e8; +} + +.c0.caret-pos--bottom .c3::after, +.c0.caret-pos--bottom-right .c3::after, +.c0.caret-pos--bottom-left .c3::after { + bottom: -14px; + border-top-color: #ffffff; +} + +.c0.caret-pos--top-right .c3, +.c0.caret-pos--bottom-right .c3 { + right: -9px; + margin-right: 0; +} + +.c0.caret-pos--top-right .c3::before, +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--top-right .c3::after, +.c0.caret-pos--bottom-right .c3::after { + left: auto; + margin-left: 0; +} + +.c0.caret-pos--top-right .c3::before, +.c0.caret-pos--bottom-right .c3::before { + right: 20px; +} + +.c0.caret-pos--top-right .c3::after, +.c0.caret-pos--bottom-right .c3::after { + right: 21px; +} + +.c0.caret-pos--top-left .c3, +.c0.caret-pos--bottom-left .c3 { + left: -9px; + margin-left: 0; +} + +.c0.caret-pos--top-left .c3::before, +.c0.caret-pos--bottom-left .c3::before, +.c0.caret-pos--top-left .c3::after, +.c0.caret-pos--bottom-left .c3::after { + left: 24px; + margin-left: 0; +} + +.c0.caret-pos--top-left .c3::after, +.c0.caret-pos--bottom-left .c3::after { + left: calc(24px + 1px); +} + +.c0.caret-pos--right .c3::before, +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--left .c3::before, +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before, +.c0.caret-pos--right .c3::after, +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left .c3::after, +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { + top: 50%; + left: auto; + margin-left: 0; + border-bottom-color: transparent; +} + +.c0.caret-pos--right .c3::before, +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--left .c3::before, +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before { + margin-top: calc((8px + 1px) * -1); +} + +.c0.caret-pos--right .c3::after, +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left .c3::after, +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { + margin-top: -8px; +} + +.c0.caret-pos--right .c3::before, +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before { + right: -16px; + border-left-color: #e1e4e8; +} + +.c0.caret-pos--right .c3::after, +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after { + right: -14px; + border-left-color: #ffffff; +} + +.c0.caret-pos--left .c3::before, +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before { + left: -16px; + border-right-color: #e1e4e8; +} + +.c0.caret-pos--left .c3::after, +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { + left: -14px; + border-right-color: #ffffff; +} + +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--left-top .c3::after { + top: 24px; +} + +.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--left-bottom .c3::before, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left-bottom .c3::after { + top: auto; +} + +.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--left-bottom .c3::before { + bottom: 16px; +} + +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left-bottom .c3::after { + bottom: calc(16px + 1px); +} +
-
- Hello! -
-
-`; +.c0.caret-pos--bottom .c3::before, +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--bottom-left .c3::before, +.c0.caret-pos--bottom .c3::after, +.c0.caret-pos--bottom-right .c3::after, +.c0.caret-pos--bottom-left .c3::after { + top: auto; + border-bottom-color: transparent; +} -exports[`Popover renders correctly for a caret position of left-bottom 1`] = ` -.c1 { - position: absolute; - z-index: 100; - display: block; +.c0.caret-pos--bottom .c3::before, +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--bottom-left .c3::before { + bottom: -16px; + border-top-color: #e1e4e8; } -.c2 { - border-width: 1px; - border-style: solid; - border-color: #e1e4e8; +.c0.caret-pos--bottom .c3::after, +.c0.caret-pos--bottom-right .c3::after, +.c0.caret-pos--bottom-left .c3::after { + bottom: -14px; + border-top-color: #ffffff; +} + +.c0.caret-pos--top-right .c3, +.c0.caret-pos--bottom-right .c3 { + right: -9px; + margin-right: 0; +} + +.c0.caret-pos--top-right .c3::before, +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--top-right .c3::after, +.c0.caret-pos--bottom-right .c3::after { + left: auto; + margin-left: 0; +} + +.c0.caret-pos--top-right .c3::before, +.c0.caret-pos--bottom-right .c3::before { + right: 20px; +} + +.c0.caret-pos--top-right .c3::after, +.c0.caret-pos--bottom-right .c3::after { + right: 21px; +} + +.c0.caret-pos--top-left .c3, +.c0.caret-pos--bottom-left .c3 { + left: -9px; + margin-left: 0; +} + +.c0.caret-pos--top-left .c3::before, +.c0.caret-pos--bottom-left .c3::before, +.c0.caret-pos--top-left .c3::after, +.c0.caret-pos--bottom-left .c3::after { + left: 24px; + margin-left: 0; +} + +.c0.caret-pos--top-left .c3::after, +.c0.caret-pos--bottom-left .c3::after { + left: calc(24px + 1px); +} + +.c0.caret-pos--right .c3::before, +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--left .c3::before, +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before, +.c0.caret-pos--right .c3::after, +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left .c3::after, +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { + top: 50%; + left: auto; + margin-left: 0; + border-bottom-color: transparent; +} + +.c0.caret-pos--right .c3::before, +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--left .c3::before, +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before { + margin-top: calc((8px + 1px) * -1); +} + +.c0.caret-pos--right .c3::after, +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left .c3::after, +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { + margin-top: -8px; +} + +.c0.caret-pos--right .c3::before, +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before { + right: -16px; + border-left-color: #e1e4e8; +} + +.c0.caret-pos--right .c3::after, +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after { + right: -14px; + border-left-color: #ffffff; +} + +.c0.caret-pos--left .c3::before, +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before { + left: -16px; + border-right-color: #e1e4e8; +} + +.c0.caret-pos--left .c3::after, +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { + left: -14px; + border-right-color: #ffffff; +} + +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--left-top .c3::after { + top: 24px; +} + +.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--left-bottom .c3::before, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left-bottom .c3::after { + top: auto; +} + +.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--left-bottom .c3::before { + bottom: 16px; +} + +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left-bottom .c3::after { + bottom: calc(16px + 1px); +} + +
+
+ Hello! +
+
+`; + +exports[`Popover renders correctly for a caret position of left-bottom 1`] = ` +.c1 { + position: absolute; + z-index: 100; + display: block; +} + +.c2 { + border-width: 1px; + border-style: solid; + border-color: #e1e4e8; border-radius: 6px; position: relative; width: 232px; @@ -1451,6 +2071,161 @@ exports[`Popover renders correctly for a caret position of left-bottom 1`] = ` bottom: calc(16px + 1px); } +.c0.caret-pos--bottom .c3::before, +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--bottom-left .c3::before, +.c0.caret-pos--bottom .c3::after, +.c0.caret-pos--bottom-right .c3::after, +.c0.caret-pos--bottom-left .c3::after { + top: auto; + border-bottom-color: transparent; +} + +.c0.caret-pos--bottom .c3::before, +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--bottom-left .c3::before { + bottom: -16px; + border-top-color: #e1e4e8; +} + +.c0.caret-pos--bottom .c3::after, +.c0.caret-pos--bottom-right .c3::after, +.c0.caret-pos--bottom-left .c3::after { + bottom: -14px; + border-top-color: #ffffff; +} + +.c0.caret-pos--top-right .c3, +.c0.caret-pos--bottom-right .c3 { + right: -9px; + margin-right: 0; +} + +.c0.caret-pos--top-right .c3::before, +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--top-right .c3::after, +.c0.caret-pos--bottom-right .c3::after { + left: auto; + margin-left: 0; +} + +.c0.caret-pos--top-right .c3::before, +.c0.caret-pos--bottom-right .c3::before { + right: 20px; +} + +.c0.caret-pos--top-right .c3::after, +.c0.caret-pos--bottom-right .c3::after { + right: 21px; +} + +.c0.caret-pos--top-left .c3, +.c0.caret-pos--bottom-left .c3 { + left: -9px; + margin-left: 0; +} + +.c0.caret-pos--top-left .c3::before, +.c0.caret-pos--bottom-left .c3::before, +.c0.caret-pos--top-left .c3::after, +.c0.caret-pos--bottom-left .c3::after { + left: 24px; + margin-left: 0; +} + +.c0.caret-pos--top-left .c3::after, +.c0.caret-pos--bottom-left .c3::after { + left: calc(24px + 1px); +} + +.c0.caret-pos--right .c3::before, +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--left .c3::before, +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before, +.c0.caret-pos--right .c3::after, +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left .c3::after, +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { + top: 50%; + left: auto; + margin-left: 0; + border-bottom-color: transparent; +} + +.c0.caret-pos--right .c3::before, +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--left .c3::before, +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before { + margin-top: calc((8px + 1px) * -1); +} + +.c0.caret-pos--right .c3::after, +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left .c3::after, +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { + margin-top: -8px; +} + +.c0.caret-pos--right .c3::before, +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before { + right: -16px; + border-left-color: #e1e4e8; +} + +.c0.caret-pos--right .c3::after, +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after { + right: -14px; + border-left-color: #ffffff; +} + +.c0.caret-pos--left .c3::before, +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before { + left: -16px; + border-right-color: #e1e4e8; +} + +.c0.caret-pos--left .c3::after, +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { + left: -14px; + border-right-color: #ffffff; +} + +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--left-top .c3::after { + top: 24px; +} + +.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--left-bottom .c3::before, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left-bottom .c3::after { + top: auto; +} + +.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--left-bottom .c3::before { + bottom: 16px; +} + +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left-bottom .c3::after { + bottom: calc(16px + 1px); +} +
Date: Mon, 1 Mar 2021 15:09:44 -0800 Subject: [PATCH 09/18] Update docs --- contributor-docs/CONTRIBUTING.md | 20 +------------------- 1 file changed, 1 insertion(+), 19 deletions(-) diff --git a/contributor-docs/CONTRIBUTING.md b/contributor-docs/CONTRIBUTING.md index a792ae7fd9d..61d1ea9a6b5 100644 --- a/contributor-docs/CONTRIBUTING.md +++ b/contributor-docs/CONTRIBUTING.md @@ -6,7 +6,6 @@ 4. [Developing Components](#developing-components) - [Tools we use](#tools-we-use) - [Component patterns](#component-patterns) - - [Adding default theme](#adding-default-theme) - [Adding system props](#adding-system-props) - [Adding the sx prop](#adding-the-sx-prop) - [Linting](#linting) @@ -72,7 +71,7 @@ With a couple of exceptions, all components should be created with the `styled` Default values for system props can be set in `Component.defaultProps`. -⚠️ **Make sure to always set the default `theme` prop to our [theme](https://github.com/primer/components/blob/main/src/theme-preval.js)! This allows consumers of our components to access our theme values without a ThemeProvider.** +⚠️ **Do not set the default `theme` prop! This can sometimes override the theme provided by the ThemeProvider and cause unexpected theming issues.** Additionally, every component should support [the `sx` prop](https://primer.style/components/overriding-styles); remember to add `${sx}` to the style literal. @@ -80,7 +79,6 @@ Here's an example of a basic component written in the style of Primer Components ```jsx import {TYPOGRAPHY, COMMON} from './constants' -import theme from './theme' import sx from './sx const Component = styled.div` @@ -92,7 +90,6 @@ const Component = styled.div` ` Component.defaultProps = { - theme, // make sure to always set the default theme! m: 0, fontSize: 5, } @@ -100,20 +97,6 @@ Component.defaultProps = { export default Component ``` -### Adding default theme - -Each component needs access to our default Primer Theme, so that users of the component can access theme values easily in their consuming applications. - -To add the default theme to a component, import the theme and assign it to the component's defaultProps object: - -```jsx -import theme from './theme' - -Component.defaultProps = { - theme // make sure to always set the default theme! -} -``` - ### Adding system props Each component should have access to the appropriate system props. Every component has access to `COMMON`. For **most** components added, you'll only need to give the component to `COMMON`. If you are unsure, ping a DS team member on your PR. @@ -223,7 +206,6 @@ After opening a pull request, a member of the design systems team will add the a - If it's a new component, does the component make sense to add to Primer Components? (Ideally this is discussed before the pull request stage, please reach out to a DS member if you aren't sure if a component should be added to Primer Components!) - Does the component follow our [Primer Components code style](#component-patterns)? - Does the component use theme values for most CSS values? -- Does the component have access to the [default theme](#adding-default-theme)? - Does the component have the [correct system props implemented](#adding-system-props)? - Is the component API intuitive? - Does the component have the appropriate [type definitions in `index.d.ts`](#typescript-support)? From 3e3b6cc78d9e56590be0afc0b28df68af62853cc Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 1 Mar 2021 15:24:27 -0800 Subject: [PATCH 10/18] Update gettting started documentation --- docs/content/getting-started.md | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/docs/content/getting-started.md b/docs/content/getting-started.md index 031b8c23ff8..8b913f902ee 100644 --- a/docs/content/getting-started.md +++ b/docs/content/getting-started.md @@ -79,11 +79,28 @@ This will apply the same `color`, `font-family`, and `line-height` styles to the ## Theming -Components are styled using Primer's [theme](https://github.com/primer/components/blob/main/src/theme-preval.js) by default, but you can provide your own theme by using [styled-component's](https://styled-components.com/) ``. If you'd like to fully replace the Primer [theme](https://github.com/primer/components/blob/main/src/theme-preval.js) with your custom theme, pass your theme to the `` in the root of your application like so: +For Primer Components to render correcly, you must pass the Primer theme to a [styled-components](<(https://styled-components.com/)>) `` at the root of your application: ```jsx import {ThemeProvider} from 'styled-components' +import {theme} from '@primer/components' +const App = props => { + return ( +
+ +
your app here
+ +
+ ) +} +``` + +If you'd like to fully replace the Primer [theme](https://github.com/primer/components/blob/main/src/theme-preval.js) with your custom theme, pass your theme to the `` instead: + +```jsx +import {ThemeProvider} from 'styled-components' +import {theme} from '@primer/components' const theme = { ... } const App = (props) => { From 7ad64aa81270d4de155ab51774409a54e5cc964b Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 1 Mar 2021 15:33:52 -0800 Subject: [PATCH 11/18] Use theme context in Caret component --- src/Caret.tsx | 10 +++++++--- src/PointerBox.tsx | 4 +--- src/__tests__/Caret.tsx | 6 +++--- 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/Caret.tsx b/src/Caret.tsx index 28bbdff1f0f..59e209722b4 100644 --- a/src/Caret.tsx +++ b/src/Caret.tsx @@ -1,4 +1,5 @@ import React from 'react' +import {ThemeContext} from 'styled-components' import {style} from 'styled-system' type Location = @@ -55,12 +56,15 @@ export type CaretProps = { borderWidth?: string | number size?: number location?: Location + theme?: any } function Caret(props: CaretProps) { - const {bg} = getBg(props) - const {borderColor} = getBorderColor(props) - const {borderWidth} = getBorderWidth(props) + const theme = React.useContext(ThemeContext) + const propsWithTheme = {...props, theme: props.theme ?? theme} + const {bg} = getBg(propsWithTheme) + const {borderColor} = getBorderColor(propsWithTheme) + const {borderWidth} = getBorderWidth(propsWithTheme) const {size = 8, location = 'bottom'} = props const [edge, align] = getEdgeAlign(location) const perp = perpendicularEdge[edge] diff --git a/src/PointerBox.tsx b/src/PointerBox.tsx index 1a4d46d871b..21c9c2e6263 100644 --- a/src/PointerBox.tsx +++ b/src/PointerBox.tsx @@ -1,5 +1,4 @@ import React from 'react' -import {ThemeContext} from 'styled-components' import BorderBox, {BorderBoxProps} from './BorderBox' import Caret, {CaretProps} from './Caret' @@ -11,7 +10,6 @@ export type PointerBoxProps = { } & BorderBoxProps function PointerBox(props: PointerBoxProps) { - const themeContext = React.useContext(ThemeContext) // don't destructure these, just grab them const {bg, border, borderColor, theme} = props const {caret, children, ...boxProps} = props @@ -20,7 +18,7 @@ function PointerBox(props: PointerBoxProps) { borderColor, borderWidth: border, location: caret, - theme: theme ?? themeContext + theme } return ( diff --git a/src/__tests__/Caret.tsx b/src/__tests__/Caret.tsx index 3e36069d58f..feccd84bbf6 100644 --- a/src/__tests__/Caret.tsx +++ b/src/__tests__/Caret.tsx @@ -25,13 +25,13 @@ describe('Caret', () => { it('renders cardinal directions', () => { for (const location of ['top', 'right', 'bottom', 'left']) { - expect(render()).toMatchSnapshot() + expect(render()).toMatchSnapshot() } for (const location of ['top-left', 'top-right', 'bottom-left', 'bottom-right']) { - expect(render()).toMatchSnapshot() + expect(render()).toMatchSnapshot() } for (const location of ['left-top', 'left-bottom', 'right-top', 'right-bottom']) { - expect(render()).toMatchSnapshot() + expect(render()).toMatchSnapshot() } }) }) From 53471ca5253f433ca690a7550394471523518674 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 1 Mar 2021 15:33:58 -0800 Subject: [PATCH 12/18] Update Position tests --- src/__tests__/Position.tsx | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/src/__tests__/Position.tsx b/src/__tests__/Position.tsx index 94e23274be6..b20566ce4ea 100644 --- a/src/__tests__/Position.tsx +++ b/src/__tests__/Position.tsx @@ -30,10 +30,6 @@ describe('position components', () => { expect(render()).toHaveStyleRule('position', 'absolute') }) - it('cannot override position', () => { - expect(render()).toHaveStyleRule('position', 'absolute') - }) - it('can render other components with the as prop', () => { const result = render() expect(result).toHaveStyleRule('position', 'absolute') @@ -60,10 +56,6 @@ describe('position components', () => { expect(render()).toHaveStyleRule('position', 'fixed') }) - it('cannot override position', () => { - expect(render()).toHaveStyleRule('position', 'fixed') - }) - it('can render other components with the as prop', () => { const result = render() expect(result).toHaveStyleRule('position', 'fixed') @@ -86,10 +78,6 @@ describe('position components', () => { expect(render()).toHaveStyleRule('position', 'relative') }) - it('cannot override position', () => { - expect(render()).toHaveStyleRule('position', 'relative') - }) - it('can render other components with the as prop', () => { const result = render() expect(result).toHaveStyleRule('position', 'relative') @@ -112,10 +100,6 @@ describe('position components', () => { expect(render()).toHaveStyleRule('position', 'sticky') }) - it('cannot override position', () => { - expect(render()).toHaveStyleRule('position', 'sticky') - }) - it('can render other components with the as prop', () => { const result = render() expect(result).toHaveStyleRule('position', 'sticky') From c19c263203f1b1cf94bed5f5997529c4cb89274e Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 1 Mar 2021 15:42:42 -0800 Subject: [PATCH 13/18] Make theme prop optional --- src/Pagination/Pagination.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Pagination/Pagination.tsx b/src/Pagination/Pagination.tsx index 58437044d16..fe94027d348 100644 --- a/src/Pagination/Pagination.tsx +++ b/src/Pagination/Pagination.tsx @@ -156,7 +156,7 @@ const PaginationContainer = styled.nav` ` export type PaginationProps = { - theme: object + theme?: object pageCount: number currentPage: number onPageChange?: (e: React.MouseEvent, n: number) => void From beef075e0274396b77887adf0b912583fe564b3f Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 1 Mar 2021 15:46:39 -0800 Subject: [PATCH 14/18] Create tricky-humans-appear.md --- .changeset/tricky-humans-appear.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 .changeset/tricky-humans-appear.md diff --git a/.changeset/tricky-humans-appear.md b/.changeset/tricky-humans-appear.md new file mode 100644 index 00000000000..7a0b98052d8 --- /dev/null +++ b/.changeset/tricky-humans-appear.md @@ -0,0 +1,20 @@ +--- +"@primer/components": major +--- + +Components no longer have a default `theme` prop. To ensure components still render correctly, you'll need pass the Primer theme to a [styled-components](https://styled-components.com/) `` at the root of your application: + +```jsx +import {ThemeProvider} from 'styled-components' +import {theme} from '@primer/components' + +funciton App(props) { + return ( +
+ +
your app here
+ +
+ ) +} +``` From 6bd504729e65fb357c032c3c43e9833b0507a045 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 2 Mar 2021 19:35:19 -0800 Subject: [PATCH 15/18] Update ButtonClose Co-authored-by: emplums --- src/Button/ButtonClose.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Button/ButtonClose.tsx b/src/Button/ButtonClose.tsx index f536291f531..86827a892b4 100644 --- a/src/Button/ButtonClose.tsx +++ b/src/Button/ButtonClose.tsx @@ -27,9 +27,9 @@ const StyledButton = styled.button` ${sx}; ` -const ButtonClose = forwardRef>(({theme, ...props}, ref) => { +const ButtonClose = forwardRef>(props, ref) => { return ( - + ) From b56e48409529fb92abe773d4cc3aaa160428d1a7 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 2 Mar 2021 19:51:46 -0800 Subject: [PATCH 16/18] Update Dropdown default props --- src/Dropdown.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Dropdown.tsx b/src/Dropdown.tsx index d4dccf91a57..e268dcf9f4e 100644 --- a/src/Dropdown.tsx +++ b/src/Dropdown.tsx @@ -140,12 +140,12 @@ DropdownMenu.displayName = 'Dropdown.Menu' DropdownItem.displayName = 'Dropdown.Item' -DropdownButton.defaultProps = {...Button.defaultProps} +DropdownButton.defaultProps = Button.defaultProps DropdownButton.displayName = 'Dropdown.Button' DropdownCaret.displayName = 'Dropdown.Caret' -Dropdown.defaultProps = {...Details.defaultProps} +Dropdown.defaultProps = Details.defaultProps export type DropdownCaretProps = ComponentProps export type DropdownMenuProps = ComponentProps From 00837ace509b75683397e220e35cdb4fce6d06df Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 2 Mar 2021 20:00:08 -0800 Subject: [PATCH 17/18] Fix syntax errror --- src/Button/ButtonClose.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Button/ButtonClose.tsx b/src/Button/ButtonClose.tsx index 86827a892b4..a4aac3173ba 100644 --- a/src/Button/ButtonClose.tsx +++ b/src/Button/ButtonClose.tsx @@ -27,7 +27,7 @@ const StyledButton = styled.button` ${sx}; ` -const ButtonClose = forwardRef>(props, ref) => { +const ButtonClose = forwardRef>((props, ref) => { return ( From da668d4b57fd73f12d2dec81afa3a3f230277ebc Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Wed, 3 Mar 2021 07:01:23 -0800 Subject: [PATCH 18/18] Update docs --- docs/content/getting-started.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/content/getting-started.md b/docs/content/getting-started.md index 8b913f902ee..add788ac2ff 100644 --- a/docs/content/getting-started.md +++ b/docs/content/getting-started.md @@ -100,7 +100,6 @@ If you'd like to fully replace the Primer [theme](https://github.com/primer/comp ```jsx import {ThemeProvider} from 'styled-components' -import {theme} from '@primer/components' const theme = { ... } const App = (props) => {