Trigger onClose when Dialog backdrop is clicked

[joshblack]

Note

This is a re-open of #4565 which was reverted as part of the last release

Relates to https://github.com/github/primer/issues/2531
Relates to https://github.com/github/repos/issues/9248
Alternative to https://github.com/github/primer/issues/1838

I'd like to allow the v2 Dialog to be closed by clicking on the backdrop overlay. This is currently not supported, though the v1 Dialog and PVC dialog support this behavior.

Based on the usage guidelines, there are some unique cases where clicking the backdrop should not close the dialog. By passing in a new backdrop gesture, there is an escape hatch for these unique cases to ignore backdrop events on a case-by-case basis.

Changelog

New

Dialog and ConfirmationDialog can now be closed by clicking on the backdrop round the dialog. This will cause onClose to be called with a new 'backdrop' gesture.

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]

🦋 Changeset detected

Latest commit: 9c35602

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]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	89.46 KB (+0.02% 🔺)
packages/react/dist/browser.umd.js	89.73 KB (-0.07% 🔽)

[joshblack]

wanted to bump you @keithamus when you have a sec 👀 For context, this was the PR for closing when the backdrop is clicked. You had proposed an alternate way for this but I'm not sure what that would look like. If you have a sec, or want to pair, would appreciate it a ton

[keithamus]

The web platform will provide closedby=any (whatwg/html#10157) as the value for closing via a click outside the dialog, and the onclose handler isn't told how the element is closed as there's not a strong use case for being able to differentiate. AIUI the monolith doesn't use the onclose hint that Primer provides and I'm hesitant to extend it especially if it means we're unable to move to the web platform native features which often are more accessible than we could possibly provide (for example allowing for operating system gestures to close the dialog too).

[theinterned]

This looks great to me!

I can certainly see @keithamus argument for staying within the API of the web platform, and honestly I can't think of a reason I'd distinguish between a close button, esc key, and a background click. I could potentially see the need for cancel vs confirm type actions. I suspect in web platform terms the event target could be used to make these distinctions? The same could be done in the react world right?

Still it seems like the removal of "gestures" would be a breaking API change and need not hold up this PR?

[keithamus]

This LGTM

[dwilsonactual]

should this reference to clicking the backdrop be removed since that information isn't actually communicated?