Add overlay props to Autocomplete.Overlay (#1967)

* Add overlay props to Autocomplete.Overlay

* Improve documentation

* Create ten-apes-smell.md

Author: pksjce

.changeset/ten-apes-smell.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add overlay props to Autocomplete.Overlay

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

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(
     {

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>