From d39faf6fa12ce4dbf9b9a5a9f399cf142369da2e Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Wed, 16 Mar 2022 20:28:13 +1100
Subject: [PATCH 1/3] Add overlay props to Autocomplete.Overlay

---
 src/Autocomplete/AutocompleteOverlay.tsx | 11 +++++++++--
 src/stories/Autocomplete.stories.tsx     |  7 +------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/Autocomplete/AutocompleteOverlay.tsx b/src/Autocomplete/AutocompleteOverlay.tsx
index fb318261d10..f1150b9256a 100644
--- a/src/Autocomplete/AutocompleteOverlay.tsx
+++ b/src/Autocomplete/AutocompleteOverlay.tsx
@@ -15,13 +15,20 @@ type AutocompleteOverlayInternalProps = {
    */
   overlayProps?: Partial<OverlayProps>
   children?: React.ReactNode
-} & Pick<React.AriaAttributes, 'aria-labelledby'> // TODO: consider making 'aria-labelledby' required
+} & Partial<OverlayProps> &
+  Pick<React.AriaAttributes, 'aria-labelledby'> // TODO: consider making 'aria-labelledby' required
 
-function AutocompleteOverlay({menuAnchorRef, overlayProps, children}: AutocompleteOverlayInternalProps) {
+function AutocompleteOverlay({
+  menuAnchorRef,
+  overlayProps: oldOverlayProps,
+  children,
+  ...newOverlayProps
+}: AutocompleteOverlayInternalProps) {
   const autocompleteContext = useContext(AutocompleteContext)
   if (autocompleteContext === null) {
     throw new Error('AutocompleteContext returned null values')
   }
+  const overlayProps = {...oldOverlayProps, ...newOverlayProps}
   const {inputRef, scrollContainerRef, selectedItemLength, setShowMenu, showMenu = false} = autocompleteContext
   const {floatingElementRef, position} = useAnchoredPosition(
     {
diff --git a/src/stories/Autocomplete.stories.tsx b/src/stories/Autocomplete.stories.tsx
index 0968cd9691c..62555212894 100644
--- a/src/stories/Autocomplete.stories.tsx
+++ b/src/stories/Autocomplete.stories.tsx
@@ -558,12 +558,7 @@ export const WithCustomOverlayProps = () => {
       </Text>
       <Autocomplete>
         <Autocomplete.Input id="autocompleteInput" />
-        <Autocomplete.Overlay
-          overlayProps={{
-            width: 'large',
-            height: 'xsmall'
-          }}
-        >
+        <Autocomplete.Overlay width="large" height="xsmall">
           <Autocomplete.Menu items={items} selectedItemIds={[]} aria-labelledby="autocompleteLabel" />
         </Autocomplete.Overlay>
       </Autocomplete>

From 85845579cc816e553f41916736f7655413657046 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Wed, 16 Mar 2022 20:34:10 +1100
Subject: [PATCH 2/3] Improve documentation

---
 docs/content/Autocomplete.mdx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/content/Autocomplete.mdx b/docs/content/Autocomplete.mdx
index 1a0454b74da..79837015178 100644
--- a/docs/content/Autocomplete.mdx
+++ b/docs/content/Autocomplete.mdx
@@ -23,7 +23,8 @@ The `Autocomplete.Input` should not be rendered without a `<label>` who's `htmlF
 
 ### Autocomplete.Overlay
 
-The `Autocomplete.Overlay` wraps the `Autocomplete.Menu` to display it in an [Overlay]() component.
+The `Autocomplete.Overlay` wraps the `Autocomplete.Menu` to display it in an [Overlay](./Overlay) component.
+This component takes the same props as the `Overlay` component.
 Most `Autocomplete` implementations will use the `Autocomplete.Overlay` component, but there could be special cases where the `Autocomplete.Menu` should be rendered directly after the `Autocomplete.Input` (for example: an `Autocomplete` that is already being rendered in an `Overlay`).
 
 ### Autocomplete.Menu

From 63272bbeaa199e01b38c2e0dd6b8add0f5164634 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Thu, 17 Mar 2022 15:11:09 +1100
Subject: [PATCH 3/3] Create ten-apes-smell.md

---
 .changeset/ten-apes-smell.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/ten-apes-smell.md

diff --git a/.changeset/ten-apes-smell.md b/.changeset/ten-apes-smell.md
new file mode 100644
index 00000000000..0485e9a3be5
--- /dev/null
+++ b/.changeset/ten-apes-smell.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add overlay props to Autocomplete.Overlay