Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Autocomplete): Convert to CSS modules behind feature flag #5453

Merged
merged 37 commits into from
Dec 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
0a05161
test(AutoComplete): add e2e tests
francinelucca Dec 11, 2024
dcab809
test(vrt): update snapshots
francinelucca Dec 11, 2024
44f93b0
Merge branch 'main' into francinelucca/e2e-tests/autocomplete
francinelucca Dec 11, 2024
14b8035
Merge branch 'main' into francinelucca/e2e-tests/autocomplete
francinelucca Dec 12, 2024
328c4ac
Merge branch 'main' of github.com:primer/react into francinelucca/e2e…
francinelucca Dec 13, 2024
d886b2c
fix(Autocomplete): wait for full render before e2e testing
francinelucca Dec 13, 2024
a92ebf0
Merge branch 'main' into francinelucca/e2e-tests/autocomplete
francinelucca Dec 13, 2024
b48bd0a
test(vrt): update snapshots
francinelucca Dec 13, 2024
8797722
Merge branch 'main' into francinelucca/e2e-tests/autocomplete
randall-krauskopf Dec 16, 2024
06121c0
fix dev storybook accessibility
randall-krauskopf Dec 16, 2024
a9b653a
fix lint
randall-krauskopf Dec 16, 2024
3cf65ba
fix theme related a11y errors
randall-krauskopf Dec 16, 2024
e0aec57
test(vrt): update snapshots
randall-krauskopf Dec 16, 2024
1297e36
ignore color-contrast rule
randall-krauskopf Dec 16, 2024
184d90f
Merge branch 'francinelucca/e2e-tests/autocomplete' of https://github…
randall-krauskopf Dec 16, 2024
4251993
add aria-label to dialog
langermank Dec 16, 2024
165a1ba
fix tests maybe?
langermank Dec 16, 2024
563aafb
remove playground snaps
langermank Dec 16, 2024
18391a7
Merge branch 'main' into francinelucca/e2e-tests/autocomplete
langermank Dec 16, 2024
afb924f
test(vrt): update snapshots
langermank Dec 16, 2024
fd88234
retry mask
langermank Dec 16, 2024
ab50cc7
fix contrast failure
langermank Dec 17, 2024
481acc9
try to disable flaky test
langermank Dec 17, 2024
665b7e3
test(vrt): update snapshots
langermank Dec 17, 2024
f9b17ec
feat(Autocomplete): Convert to CSS modules behind feature flag
hussam-i-am Dec 17, 2024
8da03a6
Merge branch 'main' of https://github.com/primer/react into francinel…
hussam-i-am Dec 17, 2024
5c946ca
remove rule
hussam-i-am Dec 17, 2024
df522f1
fix vrt test
hussam-i-am Dec 17, 2024
87ee34e
format fix
hussam-i-am Dec 17, 2024
da224fb
update assertion
hussam-i-am Dec 17, 2024
1eacab3
test(vrt): update snapshots
hussam-i-am Dec 17, 2024
66bdec9
disable aria rule
hussam-i-am Dec 17, 2024
43ebdc1
add label
hussam-i-am Dec 17, 2024
a903c0d
Merge branch 'francinelucca/e2e-tests/autocomplete' of https://github…
hussam-i-am Dec 17, 2024
9a8b596
format fix
hussam-i-am Dec 17, 2024
ff6ab3d
Merge branch 'main' into hussam-i-am/css-modules-autocomplete
hussam-i-am Dec 17, 2024
5be57e9
Merge branch 'main' into hussam-i-am/css-modules-autocomplete
hussam-i-am Dec 17, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/eight-donuts-enjoy.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": minor
---

Convert Autocomplete to CSS modules behind feature flag
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.Overlay {
overflow: auto;
}
16 changes: 13 additions & 3 deletions packages/react/src/Autocomplete/AutocompleteOverlay.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
/**
Expand Down Expand Up @@ -47,6 +50,8 @@ function AutocompleteOverlay({
setShowMenu(false)
}, [setShowMenu])

const enabled = useFeatureFlag('primer_react_css_modules_team')

if (typeof window === 'undefined') {
return null
}
Expand All @@ -60,9 +65,14 @@ function AutocompleteOverlay({
ref={floatingElementRef as React.RefObject<HTMLDivElement>}
top={position?.top}
left={position?.left}
sx={{
overflow: 'auto',
}}
sx={
enabled
? undefined
: {
overflow: 'auto',
}
}
className={enabled ? classes.Overlay : undefined}
{...overlayProps}
>
{children}
Expand Down
Loading