Overlay no longer accepts styled system props

Author: jfuchs

.changeset/lucky-zoos-smoke.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+Overlay 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/Overlay.mdx

@@ -65,16 +65,6 @@ const Demo = () => {
 render(<Demo />)
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-`Overlay` gets `COMMON` system props. Read the [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
 | Name                | Type                                                           |   Default   | Description                                                                                                                                                                                                                                                                                                                   |
@@ -92,3 +82,4 @@ System props are deprecated in all components except [Box](/Box). Please use the
 | top                 | `number`                                                       |      0      | Vertical position of the overlay, relative to its closest positioned ancestor (often its `Portal`).                                                                                                                                                                                                                           |
 | left                | `number`                                                       |      0      | Horizontal position of the overlay, relative to its closest positioned ancestor (often its `Portal`).                                                                                                                                                                                                                         |
 | portalContainerName | `string`                                                       | `undefined` | Optional. If defined, Overlays will be rendered in the named portal. See also `Portal`.                                                                                                                                                                                                                                       |
+| sx                  | SystemStyleObject                                              |     {}      | Style to be applied to the component                                                                                                                                                                                                                                                                                          |

src/Overlay.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 import React, {ReactElement, useEffect, useLayoutEffect, useRef} from 'react'
-import {get, COMMON, SystemPositionProps, SystemCommonProps} from './constants'
+import {get} from './constants'
 import {ComponentProps} from './utils/types'
 import {useOverlay, TouchOrMouseEvent} from './hooks'
 import Portal from './Portal'
@@ -51,7 +51,7 @@ function getSlideAnimationStartingVector(anchorSide?: AnchorSide): {x: number; y
   return {x: 0, y: 0}
 }
 
-const StyledOverlay = styled.div<StyledOverlayProps & SystemCommonProps & SxProp>`
+const StyledOverlay = styled.div<StyledOverlayProps & SxProp>`
   background-color: ${get('colors.canvas.overlay')};
   box-shadow: ${get('shadows.overlay.shadow')};
   position: absolute;
@@ -76,7 +76,6 @@ const StyledOverlay = styled.div<StyledOverlayProps & SystemCommonProps & SxProp
   :focus {
     outline: none;
   }
-  ${COMMON};
   ${sx};
 `
 export type OverlayProps = {
@@ -91,7 +90,7 @@ export type OverlayProps = {
   left: number
   portalContainerName?: string
   preventFocusOnOpen?: boolean
-} & Omit<ComponentProps<typeof StyledOverlay>, 'visibility' | keyof SystemPositionProps>
+} & ComponentProps<typeof StyledOverlay>
 
 /**
  * An `Overlay` is a flexible floating surface, used to display transient content such as menus,

src/__tests__/Overlay.types.test.tsx

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