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 */}
+
+ >
+ )
+}