Skip to content

feat: Add new Popover utility component #641

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

Merged
merged 1 commit into from
Jul 30, 2025
Merged

Conversation

kurtdoherty
Copy link
Contributor

@kurtdoherty kurtdoherty commented Jul 30, 2025

Context

  • The existing Menu component is partially complete, but has a number of issues related to it (focus outline of items is clipped, menu item prop interface incomplete, inadequate positioning w.r.t anchor, reliant on div container which interferes with the layout of the trigger and more)
  • We need to deliver a more solid foundation for Menu's while also supporting the updated Menu design requirements.
  • To do this, we'll deprecate the existing Menu and implement a new one. This will allow consumers (including other Elements components) to gradually migrate to the new version.
  • Previous work in this series:

This PR

  • Adds new Popover component. This will for the foundation of the new Menu component (and later, the Tooltip).
Screenshot 2025-07-30 at 3 55 25 pm Screenshot 2025-07-30 at 3 55 33 pm Screenshot 2025-07-30 at 3 55 40 pm Screenshot 2025-07-30 at 3 55 45 pm Screenshot 2025-07-30 at 3 55 54 pm

@rpt-uk-github
Copy link

rpt-uk-github commented Jul 30, 2025

🎉 Snyk checks have passed. No issues have been found so far.

security/snyk check is complete. No issues have been found. (View Details)

license/snyk check is complete. No issues have been found. (View Details)

code/snyk check is complete. No issues have been found. (View Details)

Copy link

codacy-production bot commented Jul 30, 2025

Coverage summary from Codacy

See diff coverage on Codacy

Coverage variation Diff coverage
Report missing for d0c14141 100.00%
Coverage variation details
Coverable lines Covered lines Coverage
Common ancestor commit (d0c1414) Report Missing Report Missing Report Missing
Head commit (707aacc) 7993 7269 90.94%

Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: <coverage of head commit> - <coverage of common ancestor commit>

Diff coverage details
Coverable lines Covered lines Diff coverage
Pull request (#641) 119 119 100.00%

Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: <covered lines added or modified>/<coverable lines added or modified> * 100%

See your quality gate settings    Change summary preferences

Footnotes

  1. Codacy didn't receive coverage data for the commit, or there was an error processing the received data. Check your integration for errors and validate that your coverage setup is correct.

@kurtdoherty kurtdoherty force-pushed the feat-new-menu-part-3 branch from ca4de72 to 7205f2f Compare July 30, 2025 05:48
@kurtdoherty kurtdoherty force-pushed the feat-new-menu-part-3 branch from 7205f2f to 707aacc Compare July 30, 2025 05:56
@@ -3,5 +3,5 @@
* @returns true if CSS anchor positioning is supported, false otherwise
*/
export function isCSSAnchorPositioningSupported() {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note: small scout to use a more standard approach to CSS feature detection. The original method used here was take from the polyfill's examples.

popovertarget: string
popovertargetaction: 'hide' | 'show' | 'toggle'
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note: as the JS Doc highlights below, this is a (temporary) function that will help consumers avoid the use of @ts-expect-error (or worse, @ts-ignore) every time they wire up a trigger with a popover-based component.

})

useLayoutEffect(function polyfillCSSAnchorPositioning() {
if (styleRef.current) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note: applyCSSAnchorPositioningPolyfill will conditionally apply the polyfill, so there's no need to check for support here.

@kurtdoherty kurtdoherty marked this pull request as ready for review July 30, 2025 06:00
@kurtdoherty kurtdoherty merged commit e14337a into main Jul 30, 2025
6 checks passed
@kurtdoherty kurtdoherty deleted the feat-new-menu-part-3 branch July 30, 2025 06:04
This was referenced Jul 30, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants