Overlay reflow [WIP]

[TylerJDev]

Context https://github.com/github/primer/issues/3377

Adds a prop that enables "reflow", making the Overlay responsive when the screen width reaches a breakpoint of 320px.

Example: Memex Nested Overlays Story

Draft note: The prop is added so that this doesn't affect implementations that utilize Overlay such as ActionMenu and others.

Changelog

New

Changed

Removed

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

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[bot]]

🦋 Changeset detected

Latest commit: 2f7a92c2a81435432e41f9b031fc029dba372d45

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[bot]]

:wave: 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[bot]]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	97.75 KB (+0.09% 🔺)
packages/react/dist/browser.umd.js	98.05 KB (+0.04% 🔺)

[primer-integration[bot]]

🟢 golden-jobs completed with status success.

[primer-integration[bot]]

:wave: Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/349029