Add height, width and overflow to Popover component

Author: pksjce

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

@@ -9,27 +9,16 @@ export default {
   component: Popover,
 } as Meta<typeof Popover>
 
-export const SxProps = () => (
-  <Popover
-    relative
-    open={true}
-    caret="top-right"
-    sx={{
-      left: '50%',
-      transform: 'translateX(-50%)',
-      mt: 2,
-      color: 'var(--bgColor-danger-muted)',
-    }}
-    style={{padding: '16px'}}
-  >
-    <Popover.Content
-      sx={{
-        minWidth: '260px',
-        width: '40%',
-      }}
-      style={{padding: '32px'}}
-    >
-      <Heading sx={{fontSize: 2}}>Popover heading</Heading>
+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>

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

@@ -14,13 +14,13 @@
 
 .PopoverContent {
   position: relative;
-  width: 232px;
   padding: var(--base-size-24);
   margin-right: auto;
   margin-left: auto;
   background-color: var(--overlay-bgColor);
   border: var(--borderWidth-thin) solid var(--borderColor-default);
   border-radius: var(--borderRadius-medium);
+  overflow: hidden;
 
   /* Carets */
   &::before,
@@ -205,4 +205,61 @@
       bottom: calc(var(--base-size-16) + 1px);
     }
   }
+
+  &:where([data-width-small]) {
+    width: 256px;
+  }
+  &:where([data-width-medium]) {
+    width: 320px;
+  }
+  &:where([data-width-large]) {
+    /* stylelint-disable-next-line primer/responsive-widths */
+    width: 480px;
+  }
+  &:where([data-width-xlarge]) {
+    /* stylelint-disable-next-line primer/responsive-widths */
+    width: 640px;
+  }
+  &:where([data-width-xxlarge]) {
+    /* stylelint-disable-next-line primer/responsive-widths */
+    width: 960px;
+  }
+  &:where([data-width-auto]) {
+    width: auto;
+  }
+  
+  &:where([data-height-xsmall]) {
+    height: 192px;
+  }
+  &:where([data-height-small]) {
+    height: 256px;
+  }
+  &:where([data-height-medium]) {
+    height: 320px;    
+  }
+  &:where([data-height-large]) {
+    height: 432px;
+  }
+  &:where([data-height-xlarge]) {
+    height: 600px;
+  }
+  &:where([data-height-fit-content]) {
+    height: fit-content;
+  }
+
+  &: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

@@ -1,6 +1,6 @@
 import type {Meta, StoryFn} from '@storybook/react-vite'
 import Heading from '../Heading'
-import Popover from './Popover'
+import Popover, {type PopoverProps, type PopoverContentProps} from './Popover'
 import Text from '../Text'
 import {Button} from '../Button'
 
@@ -11,18 +11,18 @@ 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: 2}}>
+      <Heading style={{fontSize: 2}}>Popover heading</Heading>
       <Text as="p">Message about popovers</Text>
       <Button>Got it!</Button>
     </Popover.Content>
   </Popover>
 )
 
-export const Playground: StoryFn<typeof Popover> = args => (
+export const Playground: StoryFn<PopoverProps & PopoverContentProps> = args => (
   <Popover {...args}>
-    <Popover.Content sx={{marginTop: 2}}>
-      <Heading sx={{fontSize: 2}}>Popover heading</Heading>
+    <Popover.Content style={{marginTop: 2}} width={args.width || 'small'} height={args.height} overflow={args.overflow}>
+      <Heading style={{fontSize: 2}}>Popover heading</Heading>
       <Text as="p">Message about popovers</Text>
       <Button>Got it!</Button>
     </Popover.Content>
@@ -33,6 +33,8 @@ Playground.args = {
   caret: 'top',
   open: true,
   relative: true,
+  width: 'auto',
+  height: 'auto',
 }
 
 Playground.argTypes = {
@@ -65,4 +67,22 @@ Playground.argTypes = {
       type: 'boolean',
     },
   },
+  width: {
+    control: {
+      type: 'radio',
+    },
+    options: ['small', 'medium', 'large', 'auto', 'xlarge'],
+  },
+  height: {
+    control: {
+      type: 'radio',
+    },
+    options: ['xsmall', 'small', 'medium', 'large', 'auto', 'xlarge', 'fit-content'],
+  },
+  overflow: {
+    control: {
+      type: 'radio',
+    },
+    options: ['auto', 'hidden', 'scroll', 'visible'],
+  },
 }

packages/react/src/Popover/Popover.tsx

@@ -54,11 +54,32 @@ const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(function Popover(
 })
 Popover.displayName = 'Popover'
 
-export type PopoverContentProps = {className?: string} & StyledPopoverProps & HTMLProps<HTMLDivElement>
+export type PopoverContentProps = {
+  className?: string
+  width?: 'small' | 'large' | 'medium' | 'auto' | 'xlarge'
+  height?: 'xsmall' | 'small' | 'large' | 'medium' | 'auto' | 'xlarge' | 'fit-content'
+  overflow?: 'auto' | 'hidden' | 'scroll' | 'visible'
+} & StyledPopoverProps &
+  HTMLProps<HTMLDivElement>
 
 const PopoverContentBaseComponent = toggleSxComponent('div') as React.ComponentType<PopoverContentProps>
-const PopoverContent: React.FC<React.PropsWithChildren<PopoverContentProps>> = ({className, ...props}) => {
-  return <PopoverContentBaseComponent {...props} className={clsx(className, classes.PopoverContent)} />
+const PopoverContent: React.FC<React.PropsWithChildren<PopoverContentProps>> = ({
+  className,
+  width = 'small',
+  height = 'fit-content',
+  ...props
+}) => {
+  return (
+    <PopoverContentBaseComponent
+      {...{
+        [`data-width-${width}`]: '',
+        [`data-height-${height}`]: '',
+        [`data-overflow-${props.overflow || 'auto'}`]: '',
+      }}
+      {...props}
+      className={clsx(className, classes.PopoverContent)}
+    />
+  )
 }
 
 PopoverContent.displayName = 'Popover.Content'