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]>
primer · Dec 18, 2024 · b07f806 · b07f806
1 parent bd568fd
commit b07f806
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 3 deletions.
diff --git a/.changeset/eight-donuts-enjoy.md b/.changeset/eight-donuts-enjoy.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert Autocomplete to CSS modules behind feature flag
diff --git a/packages/react/src/Autocomplete/AutocompleteOverlay.module.css b/packages/react/src/Autocomplete/AutocompleteOverlay.module.css
@@ -0,0 +1,3 @@
+.Overlay {
+  overflow: auto;
+}
diff --git a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx b/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}