diff --git a/.changeset/gentle-birds-cough.md b/.changeset/gentle-birds-cough.md new file mode 100644 index 00000000000..eb8a88f75eb --- /dev/null +++ b/.changeset/gentle-birds-cough.md @@ -0,0 +1,5 @@ +--- +'@primer/components': major +--- + +Popover no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal. diff --git a/docs/content/Popover.md b/docs/content/Popover.md index 83d04b36717..0d5ac8ce9ae 100644 --- a/docs/content/Popover.md +++ b/docs/content/Popover.md @@ -105,26 +105,17 @@ function CaretSelector(props) { render() ``` -## System props - - - -System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. - - - -ProgressBar components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. - ## Component props ### Popover -| Name | Type | Default | Description | -| :------- | :------ | :-----: | :----------------------------------------------------------------------------- | -| as | String | 'div' | Sets the HTML tag for the component. | -| caret | String | 'top' | Controls the position of the caret. See below for the list of caret positions. | -| open | Boolean | false | Controls the visibility of the popover. | -| relative | Boolean | false | Set to true to render the popover using relative positioning. | +| Name | Type | Default | Description | +| :------- | :---------------- | :-----: | :----------------------------------------------------------------------------- | +| as | String | 'div' | Sets the HTML tag for the component. | +| caret | String | 'top' | Controls the position of the caret. See below for the list of caret positions. | +| open | Boolean | false | Controls the visibility of the popover. | +| relative | Boolean | false | Set to true to render the popover using relative positioning. | +| sx | SystemStyleObject | {} | Style to be applied to the component | #### Caret Positions @@ -132,6 +123,7 @@ The `caret` prop can be one of the following values: `top`, `bottom`, `left`, `r ### Popover.Content -| Name | Type | Default | Description | -| :--- | :----- | :-----: | :----------------------------------- | -| as | String | 'div' | Sets the HTML tag for the component. | +| Name | Type | Default | Description | +| :--- | :---------------- | :-----: | :----------------------------------- | +| as | String | 'div' | Sets the HTML tag for the component. | +| sx | SystemStyleObject | {} | Style to be applied to the component | diff --git a/src/Popover.tsx b/src/Popover.tsx index cee1b78cf0c..a2d98dbf7f8 100644 --- a/src/Popover.tsx +++ b/src/Popover.tsx @@ -1,7 +1,6 @@ import classnames from 'classnames' import styled from 'styled-components' -import Box from './Box' -import {COMMON, get, LAYOUT, POSITION, SystemCommonProps, SystemLayoutProps, SystemPositionProps} from './constants' +import {get} from './constants' import sx, {SxProp} from './sx' import {ComponentProps} from './utils/types' @@ -23,10 +22,7 @@ type StyledPopoverProps = { caret?: CaretPosition relative?: boolean open?: boolean -} & SystemCommonProps & - SystemLayoutProps & - SystemPositionProps & - SxProp +} & SxProp const Popover = styled.div.attrs(({className, caret}) => { return { @@ -36,14 +32,10 @@ const Popover = styled.div.attrs(({className, caret}) => { position: ${props => (props.relative ? 'relative' : 'absolute')}; z-index: 100; display: ${props => (props.open ? 'block' : 'none')}; - - ${COMMON}; - ${LAYOUT}; - ${POSITION}; ${sx}; ` -const PopoverContent = styled(Box)` +const PopoverContent = styled.div` border: 1px solid ${get('colors.border.default')}; border-radius: ${get('radii.2')}; position: relative; @@ -53,9 +45,6 @@ const PopoverContent = styled(Box)` padding: ${get('space.4')}; background-color: ${get('colors.canvas.overlay')}; - ${COMMON}; - ${LAYOUT}; - // Carets &::before, &::after { diff --git a/src/__tests__/Popover.types.test.tsx b/src/__tests__/Popover.types.test.tsx new file mode 100644 index 00000000000..da739e146e8 --- /dev/null +++ b/src/__tests__/Popover.types.test.tsx @@ -0,0 +1,17 @@ +import React from 'react' +import Popover from '../Popover' + +export function shouldAcceptCallWithNoProps() { + return +} + +export function shouldNotAcceptSystemProps() { + return ( + <> + {/* @ts-expect-error system props should not be accepted */} + + {/* @ts-expect-error system props should not be accepted */} + + + ) +}