diff --git a/src/components/feedback/Popover.tsx b/src/components/feedback/Popover.tsx index 3bf5680e..99dd1304 100644 --- a/src/components/feedback/Popover.tsx +++ b/src/components/feedback/Popover.tsx @@ -260,9 +260,17 @@ function useOnClose( export type PopoverProps = { children?: ComponentChildren; - classes?: string | string[]; variant?: 'panel' | 'custom'; + /** + * Additional classes to be passed to the first child element of the popover, + * the one directly wrapping `children`. + */ + classes?: string | string[]; + + /** Additional classes to be passed to the outermost element */ + containerClasses?: string | string[]; + /** Ref for the popover element. */ elementRef?: RefObject; @@ -386,6 +394,7 @@ export default function Popover({ placement = 'below', arrow = false, classes, + containerClasses, variant = 'panel', onScroll, elementRef, @@ -429,6 +438,7 @@ export default function Popover({ 'right-0': align === 'right', 'min-w-full': true, }, + containerClasses, )} ref={downcastRef(popoverRef)} popover={asNativePopover && 'auto'} diff --git a/src/pattern-library/components/patterns/feedback/PopoverPage.tsx b/src/pattern-library/components/patterns/feedback/PopoverPage.tsx index e3aca020..e3129193 100644 --- a/src/pattern-library/components/patterns/feedback/PopoverPage.tsx +++ b/src/pattern-library/components/patterns/feedback/PopoverPage.tsx @@ -136,7 +136,22 @@ export default function PopoverPage() { - Additional CSS classes to pass to the popover. + Additional CSS classes to pass to the popover{"'"}s first child, + the one directly wrapping `children`. + + + string | string[] + + + undefined + + + + + + + Additional CSS classes to pass to the popover{"'"}s outermost + element. string | string[]