feat(AnchoredOverlay): allow overlay to reflow

[francinelucca]

Closeshttps://github.com/github/primer/issues/3420

Adds support for the changes introduced in #5129 for AnchoredOverlay to allow overlay to reflow on small viewport sizes. Also modifies Overlay's reflow logic to always allow the overlay to reflow when the content of the overlay exceeds the size of the viewport, independently of which width is used. This guarantees accessibility in terms of WCAG 2.2 Success Criterion 1.4.10 Reflow (Level AA)

Changelog

New

• Adds new preventOverflow prop to AnchoredOverlay's *.docs.json file
• Ports over Overlay's preventOverflow prop to AnchoredOverlay

Changed

• Do not take width into consideration for Overlay's reflow (reflow at all sizes if enabled)
• Update js Docs to account for new reflow behavior
• Adds preventOverflow={false} to AnchoredOverlay's stories to allow reflow
• Modify AnchoredOverlay's stories that use hoverCard to set the min-width on the overlay instead of the hoverCard container (this helps with reflow)

Removed

• Removes outdated reflow-width test

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Go to playground and width AnchoredOverlay stories and resize the browser, notice the reflow on small viewports. Compare to production.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: 6202c7b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

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]

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	98.53 KB (+0.03% 🔺)
packages/react/dist/browser.umd.js	98.87 KB (-0.04% 🔽)

[primer-integration]

🟢 golden-jobs completed with status success.

[primer-integration]

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/349748

[francinelucca]

On by default, which means the overlay will NOT reflow unless preventOverflow={false} is explicitly set as a prop on the component. This is of course overriden by the primer_react_overlay_overflow FF introduced in https://github.com/primer/react/pull/5129/files#diff-228ff69d3a08b1a41b50995af899947232eb64943d74ffd7aefd6bdd80aac449R9

[TylerJDev]

LGTM! 🚀