Refactor Dialog component

[emplums]

This PR refactors the Dialog component

• Removes the @reach/dialog dependency which doesn't currently support React 17 and was bloating our bundle size.
• All tests pass before adding new ones
• Adds additional tests using testing-library/react
• Adds four new props:
  • narrow and wide for easy setting of default widths
  • initialFocusRef to allow users to focus an item other than the close button when the Dialog is opened
  • returnFocusRef to return focus to the proper element when Dialog is closed
• Adds ref forwarding
• Conforms to WAI-ARIA best practices for modals: https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal

Reduces our bundle size by about 19% (23% gzipped)! 🎉 🎉 🎉

Technically there are no breaking changes in this PR, but we are adding a new returnFocusRef that is used to ensure that focus is restored to the proper place when the Dialog is closed. This wasn't working before, so upgrading PRC to a release with these changes won't break anything, but going forward we'd like users to include a returnFocusRef. This prop won't be required (to accommodate applications that want to manage focus when the Dialog closes themselves) but highly recommended if you aren't managing focus yourself.

Closes #930

Merge checklist

• Added or updated TypeScript definitions (index.d.ts) if necessary
• Added/updated tests
• Added/updated documentation
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/primer/primer-components/ka7rqpq3w
✅ Preview: https://primer-components-git-modal.primer.now.sh

[colebemis]

Loving this new direction! ❤️

I haven't finished reviewing all the code yet but looks like focus trapping isn't quite working. Clicking inside the dialog then tabbing leads to this:

Kapture.2021-01-05.at.14.27.06.mp4

[emplums]

@colebemis nice catch, I added a negative tab index to the modal container and that seems to have fixed it 🙌

[colebemis]

🚀

[colebemis]

Just curious, where'd these focus styles come from?

[emplums]

Hmm good question - I copied over the focus box shadow used in the close button in toasts, but those are on a dark background in light mode, which is why its grey. I would probably be better to used the primary box-shadow-focus here instead: https://github.com/primer/css/blob/master/src/support/variables/misc.scss#L23

[emplums]

The official Primer .button-close doesn't include a focus outline, but it probably should, so I'm going to use the default shadow here