Popover no longer accepts styled system props (#1570)

Author: jfuchs

.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.

docs/content/Popover.md

@@ -105,33 +105,25 @@ function CaretSelector(props) {
 render(<PopoverDemo />)
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-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
 
 The `caret` prop can be one of the following values: `top`, `bottom`, `left`, `right`, `bottom-left`, `bottom-right`, `top-left`, `top-right`, `left-bottom`, `left-top`, `right-bottom`, or `right-top`.
 
 ### 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 |

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<StyledPopoverProps>(({className, caret}) => {
   return {
@@ -36,14 +32,10 @@ const Popover = styled.div.attrs<StyledPopoverProps>(({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<SxProp>`
   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 {

src/__tests__/Popover.types.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import Popover from '../Popover'
+
+export function shouldAcceptCallWithNoProps() {
+  return <Popover />
+}
+
+export function shouldNotAcceptSystemProps() {
+  return (
+    <>
+      {/* @ts-expect-error system props should not be accepted */}
+      <Popover backgroundColor="palegreen" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Popover.Content backgroundColor="paleturquoise" />
+    </>
+  )
+}