Remove overflow property from popover

.changeset/twenty-baboons-pull.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Remove overflow property from popover (It has no usage)

e2e/components/IconButton.test.ts

@@ -45,6 +45,9 @@ const stories = [
     disableAnimations: true,
     async setup(page: Page) {
       await page.keyboard.press('Tab') // focus on icon button
+      await page.getByText('Bold').waitFor({
+        state: 'visible',
+      })
     },
   },
   {

e2e/components/Popover.test.ts

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

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

@@ -35,19 +35,3 @@ export const SxProps = () => (
     </Popover.Content>
   </Popover>
 )
-
-export const PopoverOverflow = () => (
-  <Popover relative open={true}>
-    <Popover.Content height={'small'}>
-      <Heading style={{fontSize: 2}}>Popover heading</Heading>
-      <Text as="p">Message about popovers</Text>
-      <Text as="p">Message about popovers</Text>
-      <Text as="p">Message about popovers</Text>
-      <Text as="p">Message about popovers</Text>
-      <Text as="p">Message about popovers</Text>
-      <Text as="p">Message about popovers</Text>
-      <Text as="p">Message about popovers</Text>
-      <Button>Got it!</Button>
-    </Popover.Content>
-  </Popover>
-)

packages/react/src/Popover/Popover.module.css

@@ -20,7 +20,6 @@
   background-color: var(--overlay-bgColor);
   border: var(--borderWidth-thin) solid var(--borderColor-default);
   border-radius: var(--borderRadius-medium);
-  overflow: hidden;
 
   /* Carets */
   &::before,
@@ -253,20 +252,4 @@
   &:where([data-height='auto']) {
     height: auto;
   }
-
-  &:where([data-overflow='auto']) {
-    overflow: auto;
-  }
-
-  &:where([data-overflow='hidden']) {
-    overflow: hidden;
-  }
-
-  &:where([data-overflow='scroll']) {
-    overflow: scroll;
-  }
-
-  &:where([data-overflow='visible']) {
-    overflow: visible;
-  }
 }

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

@@ -21,7 +21,7 @@ export const Default = () => (
 
 export const Playground: StoryFn<PopoverProps & PopoverContentProps> = args => (
   <Popover {...args}>
-    <Popover.Content sx={{marginTop: 2}} width={args.width || 'small'} height={args.height} overflow={args.overflow}>
+    <Popover.Content sx={{marginTop: 2}} width={args.width || 'small'} height={args.height}>
       <Heading sx={{fontSize: 2}}>Popover heading</Heading>
       <Text as="p">Message about popovers</Text>
       <Button>Got it!</Button>
@@ -79,10 +79,4 @@ Playground.argTypes = {
     },
     options: ['small', 'medium', 'large', 'auto', 'xlarge', 'fit-content'],
   },
-  overflow: {
-    control: {
-      type: 'radio',
-    },
-    options: ['auto', 'hidden', 'scroll', 'visible'],
-  },
 }

packages/react/src/Popover/Popover.tsx

@@ -57,22 +57,19 @@ export type PopoverContentProps = {
   as?: React.ElementType
   width?: 'xsmall' | 'small' | 'large' | 'medium' | 'auto' | 'xlarge'
   height?: 'small' | 'large' | 'medium' | 'auto' | 'xlarge' | 'fit-content'
-  overflow?: 'auto' | 'hidden' | 'scroll' | 'visible'
 } & StyledPopoverProps &
   HTMLProps<HTMLDivElement>
 
 const PopoverContent: React.FC<React.PropsWithChildren<PopoverContentProps>> = ({
   className,
   width = 'small',
   height = 'fit-content',
-  overflow = 'auto',
   ...props
 }) => {
   return (
     <BoxWithFallback
       data-width={width}
       data-height={height}
-      data-overflow={overflow}
       className={clsx(className, classes.PopoverContent)}
       {...props}
     />