From 59a1346b54581170b70ae60ad673eeec085c379f Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com>
Date: Thu, 19 Dec 2024 10:16:20 -0600
Subject: [PATCH] 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 <francinelucca@github.com>
Co-authored-by: francinelucca <francinelucca@users.noreply.github.com>
Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com>
Co-authored-by: randall-krauskopf <randall-krauskopf@users.noreply.github.com>
Co-authored-by: Hussam Ghazzi <hussam-i-am@github.com>
---
 .changeset/purple-pants-sit.md                |  5 ++++
 .../Autocomplete/AutocompleteMenu.module.css  |  9 +++++++
 .../src/Autocomplete/AutocompleteMenu.tsx     | 25 ++++++++++++++++---
 3 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/purple-pants-sit.md
 create mode 100644 packages/react/src/Autocomplete/AutocompleteMenu.module.css

diff --git a/.changeset/purple-pants-sit.md b/.changeset/purple-pants-sit.md
new file mode 100644
index 00000000000..018e71162c8
--- /dev/null
+++ b/.changeset/purple-pants-sit.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert Box usage in Autocomplete to CSS modules behind feature flag
diff --git a/packages/react/src/Autocomplete/AutocompleteMenu.module.css b/packages/react/src/Autocomplete/AutocompleteMenu.module.css
new file mode 100644
index 00000000000..5806e54c560
--- /dev/null
+++ b/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);
+}
diff --git a/packages/react/src/Autocomplete/AutocompleteMenu.tsx b/packages/react/src/Autocomplete/AutocompleteMenu.tsx
index cb09cdacc2c..dc348b14345 100644
--- a/packages/react/src/Autocomplete/AutocompleteMenu.tsx
+++ b/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>
       )}