chore: remove sx from Overlay (#6865)

Author: francinelucca

.changeset/lazy-gifts-join.md

@@ -0,0 +1,6 @@
+---
+"@primer/react": major
+"@primer/styled-react": patch
+---
+
+chore: remove sx from Overlay

e2e/components/Overlay.test.ts

@@ -39,10 +39,6 @@ const stories = [
     title: 'Positioned Overlays',
     id: 'private-components-overlay-features--positioned-overlays',
   },
-  {
-    title: 'SX Props',
-    id: 'private-components-overlay-dev--sx-props',
-  },
 ] as const
 
 test.describe('Overlay ', () => {

packages/react/src/Overlay/Overlay.dev.stories.tsx

@@ -3,7 +3,6 @@ import type {Args, Meta} from '@storybook/react-vite'
 import Text from '../Text'
 import {Button, IconButton} from '../Button'
 import Overlay from './Overlay'
-import {useFocusTrap} from '../hooks/useFocusTrap'
 import {XIcon} from '@primer/octicons-react'
 import classes from './Overlay.dev.stories.module.css'
 
@@ -21,62 +20,6 @@ export default {
   },
 } as Meta<typeof Overlay>
 
-export const SxProps = (args: Args) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-  const confirmButtonRef = useRef<HTMLButtonElement>(null)
-  const anchorRef = useRef<HTMLDivElement>(null)
-  const closeOverlay = () => setIsOpen(false)
-  const containerRef = useRef<HTMLDivElement>(null)
-  useFocusTrap({
-    containerRef,
-    disabled: !isOpen,
-  })
-  return (
-    <div ref={anchorRef}>
-      <Button
-        ref={buttonRef}
-        onClick={() => {
-          setIsOpen(!isOpen)
-        }}
-      >
-        Open overlay
-      </Button>
-      {isOpen || args.open ? (
-        <Overlay
-          initialFocusRef={confirmButtonRef}
-          returnFocusRef={buttonRef}
-          ignoreClickRefs={[buttonRef]}
-          onEscape={closeOverlay}
-          onClickOutside={closeOverlay}
-          width="large"
-          anchorSide="inside-right"
-          role="dialog"
-          aria-modal="true"
-          aria-label="Sample overlay"
-          ref={containerRef}
-          sx={{
-            left: '50%',
-            mt: 2,
-            color: 'var(--bgColor-danger-muted)',
-          }}
-        >
-          <div className={classes.OverlayContent}>
-            <IconButton
-              aria-label="Close"
-              onClick={closeOverlay}
-              icon={XIcon}
-              variant="invisible"
-              className={classes.CloseButton}
-            />
-            <Text>Look! an overlay</Text>
-          </div>
-        </Overlay>
-      ) : null}
-    </div>
-  )
-}
-
 export const PreventFocusOnOpen = (args: Args) => {
   const [isOpen, setIsOpen] = useState(false)
   const openButtonRef = useRef<HTMLButtonElement>(null)

packages/react/src/Overlay/Overlay.docs.json

@@ -146,11 +146,6 @@
       "description": "",
       "defaultValue": ""
     },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
-    },
     {
       "name": "responsiveVariant",
       "type": "'fullscreen'",

packages/react/src/Overlay/Overlay.features.stories.tsx

@@ -186,7 +186,7 @@ export const OverlayOnTopOfOverlay = ({anchorSide, role, open}: Args) => {
               onEscape={closeSecondaryOverlay}
               onClickOutside={closeSecondaryOverlay}
               width="small"
-              sx={{top: '40px'}}
+              style={{top: '40px'}}
               anchorSide={anchorSide}
               role={role}
               aria-modal={role === 'dialog' ? 'true' : undefined}

packages/react/src/Overlay/Overlay.tsx

@@ -6,15 +6,13 @@ import type {AriaRole, Merge} from '../utils/types'
 import type {TouchOrMouseEvent} from '../hooks'
 import {useOverlay} from '../hooks'
 import Portal from '../Portal'
-import type {SxProp} from '../sx'
 import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
 import type {AnchorSide} from '@primer/behaviors'
 import {useTheme} from '../ThemeProvider'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {useFeatureFlag} from '../FeatureFlags'
 import classes from './Overlay.module.css'
 import {clsx} from 'clsx'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 type StyledOverlayProps = {
   width?: keyof typeof widthMap
@@ -24,7 +22,7 @@ type StyledOverlayProps = {
   visibility?: 'visible' | 'hidden'
   overflow?: 'auto' | 'hidden' | 'scroll' | 'visible'
   style?: React.CSSProperties
-} & SxProp
+}
 
 export const heightMap = {
   xsmall: '192px',
@@ -91,7 +89,7 @@ type OwnOverlayProps = Merge<StyledOverlayProps, BaseOverlayProps>
  * @param bottom Optional. Vertical bottom position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
  * @param position Optional. Sets how an element is positioned in a document. Defaults to `absolute` positioning.
  */
-export const BaseOverlay = React.forwardRef<HTMLDivElement, OwnOverlayProps>(
+export const BaseOverlay = React.forwardRef(
   (
     {
       visibility,
@@ -106,13 +104,13 @@ export const BaseOverlay = React.forwardRef<HTMLDivElement, OwnOverlayProps>(
       className,
       maxHeight,
       maxWidth,
+      as: Component = 'div',
       ...rest
     },
     forwardedRef,
   ): ReactElement => {
     return (
-      <BoxWithFallback
-        as="div"
+      <Component
         {...rest}
         ref={forwardedRef}
         style={

packages/styled-react/src/components/ActionMenu.tsx

@@ -0,0 +1,24 @@
+import {ActionMenu as PrimerActionMenu, type SxProp} from '@primer/react'
+import {sx} from '../sx'
+import styled from 'styled-components'
+import type {ComponentProps} from 'react'
+
+type ActionMenuOverlayProps = ComponentProps<typeof PrimerActionMenu.Overlay> & SxProp
+
+const ActionMenuOverlay: React.ComponentType<ActionMenuOverlayProps> = styled(PrimerActionMenu.Overlay).withConfig({
+  shouldForwardProp: prop => (prop as keyof ActionMenuOverlayProps) !== 'sx',
+})`
+  ${sx}
+`
+
+export const ActionMenu: typeof PrimerActionMenu & {
+  Button: typeof PrimerActionMenu.Button
+  Anchor: typeof PrimerActionMenu.Anchor
+  Overlay: typeof ActionMenuOverlay
+  Divider: typeof PrimerActionMenu.Divider
+} = Object.assign(PrimerActionMenu, {
+  Button: PrimerActionMenu.Button,
+  Anchor: PrimerActionMenu.Anchor,
+  Overlay: ActionMenuOverlay,
+  Divider: PrimerActionMenu.Divider,
+})

packages/styled-react/src/components/Autocomplete.tsx

@@ -0,0 +1,34 @@
+import {
+  Autocomplete as PrimerAutocomplete,
+  type AutocompleteOverlayProps as PrimerAutocompleteOverlayProps,
+} from '@primer/react'
+import {sx, type SxProp} from '../sx'
+import styled from 'styled-components'
+import type {ComponentProps} from 'react'
+
+export type AutocompleteOverlayProps = PrimerAutocompleteOverlayProps & SxProp
+
+const AutocompleteOverlay: React.ComponentType<AutocompleteOverlayProps> = styled(
+  PrimerAutocomplete.Overlay,
+).withConfig({
+  shouldForwardProp: prop => (prop as keyof AutocompleteOverlayProps) !== 'sx',
+})<AutocompleteOverlayProps>`
+  ${sx}
+`
+
+interface AutocompleteExport {
+  (props: ComponentProps<typeof PrimerAutocomplete>): React.ReactNode
+  Context: typeof PrimerAutocomplete.Context
+  Input: typeof PrimerAutocomplete.Input
+  Menu: typeof PrimerAutocomplete.Menu
+  Overlay: typeof AutocompleteOverlay
+}
+
+const Autocomplete: AutocompleteExport = Object.assign(PrimerAutocomplete, {
+  Context: PrimerAutocomplete.Context,
+  Input: PrimerAutocomplete.Input,
+  Menu: PrimerAutocomplete.Menu,
+  Overlay: AutocompleteOverlay,
+})
+
+export {Autocomplete}

packages/styled-react/src/components/Overlay.tsx

@@ -0,0 +1,14 @@
+import {Overlay as PrimerOverlay, type OverlayProps as PrimerOverlayProps, sx, type SxProp} from '@primer/react'
+import styled from 'styled-components'
+import {type ForwardRefComponent} from '../polymorphic'
+
+type OverlayProps = PrimerOverlayProps & SxProp
+
+const Overlay: ForwardRefComponent<'div', OverlayProps> = styled(PrimerOverlay).withConfig({
+  shouldForwardProp: prop => (prop as keyof OverlayProps) !== 'sx',
+})<OverlayProps>`
+  ${sx}
+`
+
+export {Overlay}
+export type {OverlayProps}

packages/styled-react/src/index.tsx

@@ -1,6 +1,4 @@
 export {ActionList} from '@primer/react'
-export {ActionMenu} from '@primer/react'
-export {Autocomplete} from '@primer/react'
 export {Avatar} from '@primer/react'
 export {Breadcrumbs} from '@primer/react'
 export {Box, type BoxProps} from './components/Box'
@@ -9,7 +7,6 @@ export {CheckboxGroup} from '@primer/react'
 export {Details} from '@primer/react'
 export {IconButton} from '@primer/react'
 export {Label} from '@primer/react'
-export {Overlay} from '@primer/react'
 export {ProgressBar} from '@primer/react'
 export {Select} from '@primer/react'
 export {Text} from '@primer/react'
@@ -28,6 +25,8 @@ export {themeGet} from '@primer/react'
 export {useColorSchemeVar} from '@primer/react'
 export {useTheme} from '@primer/react'
 
+export {ActionMenu} from './components/ActionMenu'
+export {Autocomplete, type AutocompleteOverlayProps} from './components/Autocomplete'
 export {Checkbox, type CheckboxProps} from './components/Checkbox'
 export {CircleBadge} from './components/CircleBadge'
 export {CounterLabel, type CounterLabelProps} from './components/CounterLabel'
@@ -39,6 +38,7 @@ export {Heading} from './components/Heading'
 export {Link, type LinkProps} from './components/Link'
 export {LinkButton, type LinkButtonProps} from './components/LinkButton'
 export {NavList, type NavListProps} from './components/NavList'
+export {Overlay} from './components/Overlay'
 export {PageLayout, type PageLayoutProps} from './components/PageLayout'
 export {
   PageHeader,