diff --git a/.changeset/long-suns-type.md b/.changeset/long-suns-type.md new file mode 100644 index 00000000000..3e7243bbdc0 --- /dev/null +++ b/.changeset/long-suns-type.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Remove the CSS modules feature flag from the Autocomplete component. diff --git a/packages/react/src/Autocomplete/AutocompleteMenu.tsx b/packages/react/src/Autocomplete/AutocompleteMenu.tsx index 56a5c6d0026..0c3e198ce77 100644 --- a/packages/react/src/Autocomplete/AutocompleteMenu.tsx +++ b/packages/react/src/Autocomplete/AutocompleteMenu.tsx @@ -7,7 +7,6 @@ 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' @@ -15,7 +14,6 @@ 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 = { ['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(props: AutocompleteMe throw new Error('Autocomplete: selectionVariant "single" cannot be used with multiple selected items') } - const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) - return ( {loading ? ( - enabled ? ( - - - - ) : ( - - - - ) +
+ +
) : (
{allItemsToRender.length ? ( @@ -396,11 +384,7 @@ function AutocompleteMenu(props: AutocompleteMe })} ) : emptyStateText !== false && emptyStateText !== null ? ( - enabled ? ( - {emptyStateText} - ) : ( - {emptyStateText} - ) +
{emptyStateText}
) : null}
)} diff --git a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx index bacf8629002..a5fa17500c7 100644 --- a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx +++ b/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} top={position?.top} left={position?.left} - sx={ - enabled - ? undefined - : { - overflow: 'auto', - } - } - className={enabled ? classes.Overlay : undefined} + className={classes.Overlay} {...overlayProps} > {children} diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index f8396d6b20a..a1b03328328 100644 --- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -246,11 +246,7 @@ exports[`snapshots renders a custom empty state message 1`] = ` type="text" /> , - .c1 { - padding: 16px; -} - -.c0 { + .c0 { position: absolute; width: 1px; height: 1px; @@ -272,7 +268,7 @@ exports[`snapshots renders a custom empty state message 1`] = ` >
No results
@@ -527,19 +523,7 @@ exports[`snapshots renders a loading state 1`] = ` type="text" /> , - .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" >
, - .c1 { - padding: 16px; -} - -.c0 { + .c0 { position: absolute; width: 1px; height: 1px; @@ -4950,7 +4929,7 @@ exports[`snapshots renders with an input value 1`] = ` >
No selectable options