feat(Autocomplete): Convert Box usage to CSS modules behind feature f…

…lag (#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]>
primer · Dec 19, 2024 · 59a1346 · 59a1346
1 parent e1808ec
commit 59a1346
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 4 deletions.
diff --git a/.changeset/purple-pants-sit.md 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
@@ -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
@@ -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>
       )}