diff --git a/.changeset/eight-donuts-enjoy.md b/.changeset/eight-donuts-enjoy.md new file mode 100644 index 00000000000..7191eef2084 --- /dev/null +++ b/.changeset/eight-donuts-enjoy.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Convert Autocomplete to CSS modules behind feature flag diff --git a/packages/react/src/Autocomplete/AutocompleteOverlay.module.css b/packages/react/src/Autocomplete/AutocompleteOverlay.module.css new file mode 100644 index 00000000000..67d9578c7c1 --- /dev/null +++ b/packages/react/src/Autocomplete/AutocompleteOverlay.module.css @@ -0,0 +1,3 @@ +.Overlay { + overflow: auto; +} diff --git a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx index 95d5e479c80..aadfca3468f 100644 --- a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx +++ b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx @@ -6,6 +6,9 @@ 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' type AutocompleteOverlayInternalProps = { /** @@ -47,6 +50,8 @@ function AutocompleteOverlay({ setShowMenu(false) }, [setShowMenu]) + const enabled = useFeatureFlag('primer_react_css_modules_team') + if (typeof window === 'undefined') { return null } @@ -60,9 +65,14 @@ function AutocompleteOverlay({ ref={floatingElementRef as React.RefObject} top={position?.top} left={position?.left} - sx={{ - overflow: 'auto', - }} + sx={ + enabled + ? undefined + : { + overflow: 'auto', + } + } + className={enabled ? classes.Overlay : undefined} {...overlayProps} > {children}