Popover: Remove sx from component (#6754)

Co-authored-by: TylerJDev <[email protected]>

Author: TylerJDev

.changeset/busy-bananas-smash.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Update Popover to no longer support sx

e2e/components/Popover.test.ts

@@ -11,10 +11,6 @@ const stories = [
     title: 'Playground',
     id: 'components-popover--playground',
   },
-  {
-    title: 'SX Props',
-    id: 'components-popover-dev--sx-props',
-  },
 ] as const
 
 test.describe('Popover', () => {

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

@@ -11,8 +11,8 @@ export default {
 
 export const Default = () => (
   <Popover relative open={true} caret="top">
-    <Popover.Content sx={{marginTop: 2}}>
-      <Heading sx={{fontSize: 2}}>Popover heading</Heading>
+    <Popover.Content style={{marginTop: 'var(--base-size-8)'}}>
+      <Heading style={{fontSize: 'var(--text-title-size-small)'}}>Popover heading</Heading>
       <Text as="p">Message about popovers</Text>
       <Button>Got it!</Button>
     </Popover.Content>
@@ -21,8 +21,13 @@ export const Default = () => (
 
 export const Playground: StoryFn<PopoverProps & PopoverContentProps> = args => (
   <Popover {...args}>
-    <Popover.Content sx={{marginTop: 2}} width={args.width || 'small'} height={args.height}>
-      <Heading sx={{fontSize: 2}}>Popover heading</Heading>
+    <Popover.Content
+      style={{marginTop: 'var(--base-size-8)'}}
+      width={args.width || 'small'}
+      height={args.height}
+      overflow={args.overflow}
+    >
+      <Heading style={{fontSize: 'var(--text-title-size-small)'}}>Popover heading</Heading>
       <Text as="p">Message about popovers</Text>
       <Button>Got it!</Button>
     </Popover.Content>

packages/react/src/Popover/Popover.stories.tsx

@@ -1,9 +1,7 @@
 import {clsx} from 'clsx'
-import type {SxProp} from '../sx'
 import classes from './Popover.module.css'
 import type {HTMLProps} from 'react'
 import React from 'react'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 type CaretPosition =
   | 'top'
@@ -26,12 +24,11 @@ type StyledPopoverProps = {
   caret?: CaretPosition
   relative?: boolean
   open?: boolean
-} & SxProp
+}
 
 export type PopoverProps = {
   /** Class name for custom styling */
   className?: string
-  as?: React.ElementType
 } & StyledPopoverProps &
   HTMLProps<HTMLDivElement>
 
@@ -40,7 +37,7 @@ const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(function Popover(
   forwardRef,
 ) {
   return (
-    <BoxWithFallback
+    <div
       {...props}
       ref={forwardRef}
       data-open={open ? '' : undefined}
@@ -54,26 +51,18 @@ Popover.displayName = 'Popover'
 
 export type PopoverContentProps = {
   className?: string
-  as?: React.ElementType
   width?: 'xsmall' | 'small' | 'large' | 'medium' | 'auto' | 'xlarge'
   height?: 'small' | 'large' | 'medium' | 'auto' | 'xlarge' | 'fit-content'
-} & StyledPopoverProps &
-  HTMLProps<HTMLDivElement>
+  overflow?: 'auto' | 'hidden' | 'scroll' | 'visible'
+} & HTMLProps<HTMLDivElement>
 
 const PopoverContent: React.FC<React.PropsWithChildren<PopoverContentProps>> = ({
   className,
   width = 'small',
   height = 'fit-content',
   ...props
 }) => {
-  return (
-    <BoxWithFallback
-      data-width={width}
-      data-height={height}
-      className={clsx(className, classes.PopoverContent)}
-      {...props}
-    />
-  )
+  return <div data-width={width} data-height={height} className={clsx(className, classes.PopoverContent)} {...props} />
 }
 
 PopoverContent.displayName = 'Popover.Content'

packages/react/src/Popover/Popover.tsx

@@ -28,7 +28,6 @@ exports[`@primer/styled-react exports 1`] = `
   "Overlay",
   "PageHeader",
   "PageLayout",
-  "Popover",
   "ProgressBar",
   "RadioGroup",
   "RelativeTime",

packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -27,7 +27,6 @@ import {
   Overlay,
   PageHeader,
   PageLayout,
-  Popover,
   ProgressBar,
   RadioGroup,
   RelativeTime,
@@ -287,16 +286,6 @@ describe('@primer/react', () => {
     expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
   })
 
-  test('Popover supports `sx` prop', () => {
-    const {container} = render(<Popover data-testid="component" sx={{background: 'red'}} />)
-    expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
-  })
-
-  test('Popover.Content supports `sx` prop', () => {
-    const {container} = render(<Popover.Content data-testid="component" sx={{background: 'red'}} />)
-    expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
-  })
-
   test('ProgressBar supports `sx` prop', () => {
     const {container} = render(<ProgressBar data-testid="component" sx={{background: 'red'}} />)
     expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')

packages/styled-react/src/__tests__/primer-react.browser.test.tsx

@@ -132,7 +132,6 @@ export {
   Overlay,
   PageHeader,
   PageLayout,
-  Popover,
   ProgressBar,
   RadioGroup,
   RelativeTime,