Remove the CSS modules feature flag from the Autocomplete component (#5793)

Author: jonrohan

.changeset/long-suns-type.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Remove the CSS modules feature flag from the Autocomplete component.

packages/react/src/Autocomplete/AutocompleteMenu.tsx

@@ -7,15 +7,13 @@ import type {ActionListItemProps} from '../ActionList'
 import {ActionList} from '../ActionList'
 import {useFocusZone} from '../hooks/useFocusZone'
 import type {ComponentProps, MandateProps} from '../utils/types'
-import Box from '../Box'
 import Spinner from '../Spinner'
 import {useId} from '../hooks/useId'
 import {AutocompleteContext} from './AutocompleteContext'
 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'
 
@@ -122,8 +120,6 @@ export type AutocompleteMenuInternalProps<T extends AutocompleteItemProps> = {
   ['aria-labelledby']: string
 }
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
-
 /**
  * Announces a message to screen readers at a slowed-down rate. This is useful when you want to announce don't want to
  * overwhelm the user with too many announcements in rapid succession.
@@ -345,20 +341,12 @@ 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 ? (
-        enabled ? (
-          <Box className={classes.SpinnerWrapper}>
-            <Spinner />
-          </Box>
-        ) : (
-          <Box p={3} display="flex" justifyContent="center">
-            <Spinner />
-          </Box>
-        )
+        <div className={classes.SpinnerWrapper}>
+          <Spinner />
+        </div>
       ) : (
         <div ref={listContainerRef}>
           {allItemsToRender.length ? (
@@ -396,11 +384,7 @@ function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMe
               })}
             </ActionList>
           ) : emptyStateText !== false && emptyStateText !== null ? (
-            enabled ? (
-              <Box className={classes.EmptyStateWrapper}>{emptyStateText}</Box>
-            ) : (
-              <Box p={3}>{emptyStateText}</Box>
-            )
+            <div className={classes.EmptyStateWrapper}>{emptyStateText}</div>
           ) : null}
         </div>
       )}

packages/react/src/Autocomplete/AutocompleteOverlay.tsx

@@ -6,7 +6,6 @@ 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'
 
@@ -50,8 +49,6 @@ function AutocompleteOverlay({
     setShowMenu(false)
   }, [setShowMenu])
 
-  const enabled = useFeatureFlag('primer_react_css_modules_ga')
-
   if (typeof window === 'undefined') {
     return null
   }
@@ -65,14 +62,7 @@ function AutocompleteOverlay({
       ref={floatingElementRef as React.RefObject<HTMLDivElement>}
       top={position?.top}
       left={position?.left}
-      sx={
-        enabled
-          ? undefined
-          : {
-              overflow: 'auto',
-            }
-      }
-      className={enabled ? classes.Overlay : undefined}
+      className={classes.Overlay}
       {...overlayProps}
     >
       {children}

packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap

@@ -246,11 +246,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
       type="text"
     />
   </span>,
-  .c1 {
-  padding: 16px;
-}
-
-.c0 {
+  .c0 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -272,7 +268,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
   >
     <div>
       <div
-        className="c1"
+        className="EmptyStateWrapper"
       >
         No results
       </div>
@@ -527,19 +523,7 @@ exports[`snapshots renders a loading state 1`] = `
       type="text"
     />
   </span>,
-  .c1 {
-  padding: 16px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c0 {
+  .c0 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -560,8 +544,7 @@ exports[`snapshots renders a loading state 1`] = `
     className="c0"
   >
     <div
-      className="c1"
-      display="flex"
+      className="SpinnerWrapper"
     >
       <span
         className="Box"
@@ -4916,11 +4899,7 @@ exports[`snapshots renders with an input value 1`] = `
       type="text"
     />
   </span>,
-  .c1 {
-  padding: 16px;
-}
-
-.c0 {
+  .c0 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -4950,7 +4929,7 @@ exports[`snapshots renders with an input value 1`] = `
   >
     <div>
       <div
-        className="c1"
+        className="EmptyStateWrapper"
       >
         No selectable options
       </div>