Overlay no longer accepts styled system props (#1567)

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,8 +1,8 @@
 import styled from 'styled-components'
 import React, {ReactElement, useEffect, useRef} from 'react'
-import {get, COMMON, SystemPositionProps, SystemCommonProps} from './constants'
-import {ComponentProps} from './utils/types'
 import useLayoutEffect from './utils/useIsomorphicLayoutEffect'
+import {get} from './constants'
+import {AriaRole, Merge} from './utils/types'
 import {useOverlay, TouchOrMouseEvent} from './hooks'
 import Portal from './Portal'
 import sx, {SxProp} from './sx'
@@ -16,7 +16,7 @@ type StyledOverlayProps = {
   maxHeight?: keyof Omit<typeof heightMap, 'auto' | 'initial'>
   visibility?: 'visible' | 'hidden'
   anchorSide?: AnchorSide
-}
+} & SxProp
 
 const heightMap = {
   xsmall: '192px',
@@ -52,7 +52,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>`
   background-color: ${get('colors.canvas.overlay')};
   box-shadow: ${get('shadows.overlay.shadow')};
   position: absolute;
@@ -77,22 +77,25 @@ const StyledOverlay = styled.div<StyledOverlayProps & SystemCommonProps & SxProp
   :focus {
     outline: none;
   }
-  ${COMMON};
   ${sx};
 `
-export type OverlayProps = {
+type BaseOverlayProps = {
   ignoreClickRefs?: React.RefObject<HTMLElement>[]
   initialFocusRef?: React.RefObject<HTMLElement>
   returnFocusRef: React.RefObject<HTMLElement>
   onClickOutside: (e: TouchOrMouseEvent) => void
   onEscape: (e: KeyboardEvent) => void
   visibility?: 'visible' | 'hidden'
-  [additionalKey: string]: unknown
-  top: number
-  left: number
+  'data-test-id'?: unknown
+  top?: number
+  left?: number
   portalContainerName?: string
   preventFocusOnOpen?: boolean
-} & Omit<ComponentProps<typeof StyledOverlay>, 'visibility' | keyof SystemPositionProps>
+  role?: AriaRole
+  children?: React.ReactNode
+}
+
+export type OverlayProps = Merge<StyledOverlayProps, BaseOverlayProps>
 
 /**
  * An `Overlay` is a flexible floating surface, used to display transient content such as menus,
@@ -180,7 +183,6 @@ const Overlay = React.forwardRef<HTMLDivElement, OverlayProps>(
             {
               top: `${top || 0}px`,
               left: `${left || 0}px`,
-              ...rest.style,
               '--styled-overlay-visibility': visibility
             } as React.CSSProperties
           }

src/__tests__/Overlay.types.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import Overlay from '../Overlay'
+
+export function shouldAcceptCallWithNoProps(ref: React.RefObject<HTMLElement>) {
+  return <Overlay returnFocusRef={ref} onClickOutside={() => null} onEscape={() => null} />
+}
+
+export function shouldNotAcceptSystemProps(ref: React.RefObject<HTMLElement>) {
+  return (
+    <Overlay
+      returnFocusRef={ref}
+      onClickOutside={() => null}
+      onEscape={() => null}
+      // @ts-expect-error system props should not be accepted
+      backgroundColor="olivedrab"
+    />
+  )
+}

src/stories/ActionMenu.stories.tsx

@@ -98,10 +98,7 @@ export function SimpleListStory(): JSX.Element {
           onAction={onAction}
           anchorContent="Menu"
           overlayProps={{
-            'data-test-id': 'some_test_id',
-            onMouseDown: (e: React.MouseEvent) =>
-              // eslint-disable-next-line no-console
-              console.log('onMouseDown in the internal Overlay can be useful for controlling event interactions', e)
+            'data-test-id': 'some_test_id'
           }}
           items={[
             {text: 'New file', trailingText: '⌘O', disabled: true, leadingVisual: ProjectIcon},