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
+ +
+ ) +} +``` 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)? diff --git a/docs/content/getting-started.md b/docs/content/getting-started.md index 031b8c23ff8..add788ac2ff 100644 --- a/docs/content/getting-started.md +++ b/docs/content/getting-started.md @@ -79,11 +79,27 @@ This will apply the same `color`, `font-family`, and `line-height` styles to the ## Theming -Components are styled using Primer's [theme](https://github.com/primer/components/blob/main/src/theme-preval.js) by default, but you can provide your own theme by using [styled-component's](https://styled-components.com/) ``. 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' const theme = { ... } const App = (props) => { 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/src/Avatar.tsx b/src/Avatar.tsx index e5abd12db90..a5db2b1f763 100644 --- a/src/Avatar.tsx +++ b/src/Avatar.tsx @@ -1,7 +1,6 @@ import styled from 'styled-components' import {COMMON, get, SystemCommonProps} from './constants' import sx, {SxProp} from './sx' -import theme from './theme' import {ComponentProps} from './utils/types' type StyledAvatarProps = { @@ -32,7 +31,6 @@ const Avatar = styled.img.attrs(props => ({ ` Avatar.defaultProps = { - theme, size: 20, alt: '', square: false diff --git a/src/AvatarPair.tsx b/src/AvatarPair.tsx index 5cf362d4b32..de402a58259 100644 --- a/src/AvatarPair.tsx +++ b/src/AvatarPair.tsx @@ -3,7 +3,6 @@ import styled from 'styled-components' import Avatar from './Avatar' import {get} from './constants' import {Relative, RelativeProps} from './Position' -import theme from './theme' const ChildAvatar = styled(Avatar)` position: absolute; @@ -29,6 +28,4 @@ const AvatarPair = ({children, ...rest}: AvatarPairProps) => { // styled() changes this AvatarPair.displayName = 'AvatarPair' -AvatarPair.defaultProps = {theme} - export default AvatarPair diff --git a/src/AvatarStack.tsx b/src/AvatarStack.tsx index c97ff1fce75..e2768db6d5b 100644 --- a/src/AvatarStack.tsx +++ b/src/AvatarStack.tsx @@ -4,7 +4,6 @@ import styled from 'styled-components' import {COMMON, get, SystemCommonProps} from './constants' import {Absolute} from './Position' import sx, {SxProp} from './sx' -import theme from './theme' import {ComponentProps} from './utils/types' type StyledAvatarStackWrapperProps = { @@ -159,8 +158,4 @@ const AvatarStack = ({children, alignRight, ...rest}: AvatarStackProps) => { ) } -AvatarStack.defaultProps = { - theme -} - export default AvatarStack 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..a4aac3173ba 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>((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..59e209722b4 100644 --- a/src/Caret.tsx +++ b/src/Caret.tsx @@ -1,6 +1,6 @@ import React from 'react' +import {ThemeContext} from 'styled-components' import {style} from 'styled-system' -import theme from './theme' type Location = | 'top' @@ -56,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] @@ -123,8 +126,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..e268dcf9f4e 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..fe94027d348 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` @@ -157,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 @@ -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..21c9c2e6263 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'] @@ -12,9 +11,15 @@ export type PointerBoxProps = { function PointerBox(props: PointerBoxProps) { // 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 + } return ( {children} @@ -23,6 +28,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 da670ad38be..baeee0da80a 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 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() } }) }) 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') diff --git a/src/__tests__/SelectMenu.tsx b/src/__tests__/SelectMenu.tsx index 72cf5390473..9c33cf00fd1 100644 --- a/src/__tests__/SelectMenu.tsx +++ b/src/__tests__/SelectMenu.tsx @@ -91,10 +91,6 @@ describe('SelectMenu', () => { cleanup() }) - 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/__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); +} +
- } - 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 49b67ba9469..a5d29a19caf 100644 --- a/src/utils/testing.tsx +++ b/src/utils/testing.tsx @@ -22,7 +22,6 @@ declare global { namespace jest { interface Matchers { toImplementSxBehavior: () => boolean - toSetDefaultTheme: () => boolean toSetExports: (exports: Record) => boolean } } @@ -39,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 } /** @@ -75,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 } @@ -227,10 +224,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() }) 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"