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

primer · Dec 17, 2024 · f9b17ec · f9b17ec
1 parent 8e481ca
commit f9b17ec
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}