Add containerClasses prop to Popover

Author: acelaya

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<HTMLElement>;
 
@@ -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'}

src/pattern-library/components/patterns/feedback/PopoverPage.tsx

@@ -136,7 +136,22 @@ export default function PopoverPage() {
           <Library.SectionL3 title="classes">
             <Library.Info>
               <Library.InfoItem label="description">
-                Additional CSS classes to pass to the popover.
+                Additional CSS classes to pass to the popover{"'"}s first child,
+                the one directly wrapping `children`.
+              </Library.InfoItem>
+              <Library.InfoItem label="type">
+                <code>string | string[]</code>
+              </Library.InfoItem>
+              <Library.InfoItem label="default">
+                <code>undefined</code>
+              </Library.InfoItem>
+            </Library.Info>
+          </Library.SectionL3>
+          <Library.SectionL3 title="containerClasses">
+            <Library.Info>
+              <Library.InfoItem label="description">
+                Additional CSS classes to pass to the popover{"'"}s outermost
+                element.
               </Library.InfoItem>
               <Library.InfoItem label="type">
                 <code>string | string[]</code>