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}
  />