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 = (item: T | T[]) => void export type AutocompleteMenuItem = MandateProps & { @@ -117,6 +120,8 @@ export type AutocompleteMenuInternalProps = { ['aria-labelledby']: string } +const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team' + function AutocompleteMenu(props: AutocompleteMenuInternalProps) { const autocompleteContext = useContext(AutocompleteContext) if (autocompleteContext === null) { @@ -324,12 +329,20 @@ 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 ? ( @@ -367,7 +380,11 @@ function AutocompleteMenu(props: AutocompleteMe })} ) : emptyStateText !== false && emptyStateText !== null ? ( - {emptyStateText} + enabled ? ( + {emptyStateText} + ) : ( + {emptyStateText} + ) ) : null}
)}