From b07f8063371073551741356f0523d7b8ae733322 Mon Sep 17 00:00:00 2001 From: Hussam Ghazzi Date: Tue, 17 Dec 2024 22:35:39 -0500 Subject: [PATCH] feat(Autocomplete): Convert to CSS modules behind feature flag (#5453) * 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 * add aria-label to dialog * fix tests maybe? * remove playground snaps * test(vrt): update snapshots * retry mask * fix contrast failure * try to disable flaky test * test(vrt): update snapshots * feat(Autocomplete): Convert to CSS modules behind feature flag * remove rule * fix vrt test * format fix * update assertion * test(vrt): update snapshots * disable aria rule * add label * format fix --------- Co-authored-by: Marie Lucca Co-authored-by: francinelucca Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Co-authored-by: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com> Co-authored-by: randall-krauskopf Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com> Co-authored-by: langermank Co-authored-by: hussam-i-am --- .changeset/eight-donuts-enjoy.md | 5 +++++ .../Autocomplete/AutocompleteOverlay.module.css | 3 +++ .../src/Autocomplete/AutocompleteOverlay.tsx | 16 +++++++++++++--- 3 files changed, 21 insertions(+), 3 deletions(-) create mode 100644 .changeset/eight-donuts-enjoy.md create mode 100644 packages/react/src/Autocomplete/AutocompleteOverlay.module.css 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}