feat: added support for className to <AnchoredOverlay> (#4741)

* feat: added support for className to <AnchoredOverlay> * feat: add support for className to <AnchoredOverlay> * add changeset --------- Co-authored-by: Prince Yadav <[email protected]> Co-authored-by: Armağan <[email protected]>
primer · Jul 23, 2024 · a9fab98 · a9fab98
1 parent 1c131f8
commit a9fab98
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/.changeset/sixty-trains-flow.md b/.changeset/sixty-trains-flow.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+AnchoredOverlay: Add 'className' prop to the component
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
@@ -79,6 +79,11 @@ interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'
    * Settings to apply to the Focus Zone on the internal `Overlay` component.
    */
   focusZoneSettings?: Partial<FocusZoneHookSettings>
+
+  /**
+   * Optional className to be added to the overlay component.
+   */
+  className?: string
 }
 
 export type AnchoredOverlayProps = AnchoredOverlayBaseProps &
@@ -106,6 +111,7 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
   align = 'start',
   alignmentOffset,
   anchorOffset,
+  className,
 }) => {
   const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
   const [overlayRef, updateOverlayRef] = useRenderForcingRef<HTMLDivElement>()
@@ -191,6 +197,7 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
           top={position?.top || 0}
           left={position?.left || 0}
           anchorSide={position?.anchorSide}
+          className={className}
           {...overlayProps}
         >
           {children}