feat(Autocomplete): Convert to CSS modules behind feature flag (#5453)

* test(AutoComplete): add e2e tests

* test(vrt): update snapshots

* fix(Autocomplete): wait for full render before e2e testing

* test(vrt): update snapshots

* fix dev storybook accessibility

* fix lint

* fix theme related a11y errors

* test(vrt): update snapshots

* ignore color-contrast rule

* add aria-label to dialog

* fix tests maybe?

* remove playground snaps

* test(vrt): update snapshots

* retry mask

* fix contrast failure

* try to disable flaky test

* test(vrt): update snapshots

* feat(Autocomplete): Convert to CSS modules behind feature flag

* remove rule

* fix vrt test

* format fix

* update assertion

* test(vrt): update snapshots

* disable aria rule

* add label

* format fix

---------

Co-authored-by: Marie Lucca <[email protected]>
Co-authored-by: francinelucca <[email protected]>
Co-authored-by: Marie Lucca <[email protected]>
Co-authored-by: Randall Krauskopf <[email protected]>
Co-authored-by: randall-krauskopf <[email protected]>
Co-authored-by: Katie Langerman <[email protected]>
Co-authored-by: langermank <[email protected]>
Co-authored-by: hussam-i-am <[email protected]>

Author: 4 people

.changeset/eight-donuts-enjoy.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert Autocomplete to CSS modules behind feature flag

packages/react/src/Autocomplete/AutocompleteOverlay.module.css

@@ -0,0 +1,3 @@
+.Overlay {
+  overflow: auto;
+}

packages/react/src/Autocomplete/AutocompleteOverlay.tsx

@@ -6,6 +6,9 @@ import type {ComponentProps} from '../utils/types'
 import {AutocompleteContext} from './AutocompleteContext'
 import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
 import VisuallyHidden from '../_VisuallyHidden'
+import {useFeatureFlag} from '../FeatureFlags'
+
+import classes from './AutocompleteOverlay.module.css'
 
 type AutocompleteOverlayInternalProps = {
   /**
@@ -47,6 +50,8 @@ function AutocompleteOverlay({
     setShowMenu(false)
   }, [setShowMenu])
 
+  const enabled = useFeatureFlag('primer_react_css_modules_team')
+
   if (typeof window === 'undefined') {
     return null
   }
@@ -60,9 +65,14 @@ function AutocompleteOverlay({
       ref={floatingElementRef as React.RefObject<HTMLDivElement>}
       top={position?.top}
       left={position?.left}
-      sx={{
-        overflow: 'auto',
-      }}
+      sx={
+        enabled
+          ? undefined
+          : {
+              overflow: 'auto',
+            }
+      }
+      className={enabled ? classes.Overlay : undefined}
       {...overlayProps}
     >
       {children}