Allow CSS anchor positioning in SelectPanel settings#8026
Conversation
🦋 Changeset detectedLatest commit: 1246c97 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
github-actions
Bot
added
the
integration-tests: recommended
TylerJDev
added
the
Canary Release
There was a problem hiding this comment.
Pull request overview
This PR exposes cssAnchorPositioningSettings on SelectPanel and forwards it to the underlying AnchoredOverlay, while still forcing CSS anchor positioning to be disabled for the modal variant (which is manually positioned). This enables consumers to adjust native CSS anchor positioning behavior to avoid browser-specific issues (notably in Firefox).
Changes:
- Add
cssAnchorPositioningSettingstoSelectPanelProps(picked fromAnchoredOverlayProps). - Forward
cssAnchorPositioningSettingsintoAnchoredOverlay, merging it with a modal-safedisableoverride. - Add a changeset documenting the new API surface.
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/SelectPanel/SelectPanel.tsx | Adds a passthrough prop and forwards CSS anchor positioning settings to the underlying overlay with modal-safe disabling. |
| .changeset/select-panel-css-anchor-positioning-settings.md | Declares the consumer-facing release note for the new SelectPanel prop. |
Copilot's findings
- Files reviewed: 2/2 changed files
- Comments generated: 3
| export type SelectPanelProps = SelectPanelBaseProps & | ||
| Omit<FilteredActionListProps, 'selectionVariant' | 'variant' | 'message'> & | ||
| Pick<AnchoredOverlayProps, 'open' | 'height' | 'width' | 'align' | 'displayInViewport'> & | ||
| Pick< | ||
| AnchoredOverlayProps, | ||
| 'open' | 'height' | 'width' | 'align' | 'displayInViewport' | 'cssAnchorPositioningSettings' | ||
| > & |
There was a problem hiding this comment.
agreed, does this need to be added to the .docs.json file?
There was a problem hiding this comment.
@francinelucca I'm curious what you think - I was thinking of omitting it from the docs as this is something that we don't want consumers to utilize unless they specifically need it to resolve an issue. It's in a grey area between a private and public prop 🤔
| // Other cssAnchorPositioningSettings (e.g. fallbackStrategy) may be passed in and are forwarded here | ||
| cssAnchorPositioningSettings={{ | ||
| ...cssAnchorPositioningSettings, | ||
| disable: variant === 'modal' || cssAnchorPositioningSettings?.disable, | ||
| }} |
| export type SelectPanelProps = SelectPanelBaseProps & | ||
| Omit<FilteredActionListProps, 'selectionVariant' | 'variant' | 'message'> & | ||
| Pick<AnchoredOverlayProps, 'open' | 'height' | 'width' | 'align' | 'displayInViewport'> & | ||
| Pick< | ||
| AnchoredOverlayProps, | ||
| 'open' | 'height' | 'width' | 'align' | 'displayInViewport' | 'cssAnchorPositioningSettings' | ||
| > & |
There was a problem hiding this comment.
agreed, does this need to be added to the .docs.json file?
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
|
Integration test results from github/github-ui PR:
CI check runs linting, type checking, and unit tests. Check the workflow logs for specific failures. Need help? If you believe this failure is unrelated to your changes, please reach out to the Primer team for assistance. |
Part of github/primer#6750
Changelog
SelectPanelRollout strategy
Testing & Reviewing
SelectPanelsettings no longer trigger the disappearing dropdown behavior when hovered.Merge checklist