feat(Autocomplete): Convert Box usage to CSS modules behind feature flag (#5451)

* 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

* initial commit

* remove unused snapshots

* remove file

* revert file

* format fix

* changeset

---------

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: Hussam Ghazzi <[email protected]>

Author: 3 people

.changeset/purple-pants-sit.md

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

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

@@ -0,0 +1,9 @@
+.SpinnerWrapper {
+  display: flex;
+  justify-content: center;
+  padding: var(--base-size-16);
+}
+
+.EmptyStateWrapper {
+  padding: var(--base-size-16);
+}

packages/react/src/Autocomplete/AutocompleteMenu.tsx

@@ -13,6 +13,9 @@ import type {IconProps} from '@primer/octicons-react'
 import {PlusIcon} from '@primer/octicons-react'
 import VisuallyHidden from '../_VisuallyHidden'
 import {isElement} from 'react-is'
+import {useFeatureFlag} from '../FeatureFlags'
+
+import classes from './AutocompleteMenu.module.css'
 
 type OnSelectedChange<T> = (item: T | T[]) => void
 export type AutocompleteMenuItem = MandateProps<ActionListItemProps, 'id'> & {
@@ -117,6 +120,8 @@ export type AutocompleteMenuInternalProps<T extends AutocompleteItemProps> = {
   ['aria-labelledby']: string
 }
 
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+
 function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMenuInternalProps<T>) {
   const autocompleteContext = useContext(AutocompleteContext)
   if (autocompleteContext === null) {
@@ -324,12 +329,20 @@ function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMe
     throw new Error('Autocomplete: selectionVariant "single" cannot be used with multiple selected items')
   }
 
+  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+
   return (
     <VisuallyHidden isVisible={showMenu}>
       {loading ? (
-        <Box p={3} display="flex" justifyContent="center">
-          <Spinner />
-        </Box>
+        enabled ? (
+          <Box className={classes.SpinnerWrapper}>
+            <Spinner />
+          </Box>
+        ) : (
+          <Box p={3} display="flex" justifyContent="center">
+            <Spinner />
+          </Box>
+        )
       ) : (
         <div ref={listContainerRef}>
           {allItemsToRender.length ? (
@@ -367,7 +380,11 @@ function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMe
               })}
             </ActionList>
           ) : emptyStateText !== false && emptyStateText !== null ? (
-            <Box p={3}>{emptyStateText}</Box>
+            enabled ? (
+              <Box className={classes.EmptyStateWrapper}>{emptyStateText}</Box>
+            ) : (
+              <Box p={3}>{emptyStateText}</Box>
+            )
           ) : null}
         </div>
       )}