Dialog: Full screen & Bottom sheet support

[maximedegreve]

Closes

• https://github.com/github/primer/issues/2414
• https://github.com/github/primer/issues/2413

Note: I've chosen not to tackle the issues mentioned here to avoid causing any disruptive changes.

Changelog

New

1️⃣ action-sheet dialog

We've implemented a range slider to easily adjust the size of the dialog using only a keyboard, enhancing accessibility. We've used a similar approach for our SplitPageLayout resizer. I've also implemented reduced-motion support.

Screen.Recording.2023-12-12.at.17.14.30.mov

keyboard.mov

2️⃣ full-screen dialog

This is quite simple, as it closely resembles the existing dialog behavior, with the only difference being that it's full-screen.

Screen.Recording.2023-12-12.at.17.15.47.mov

Changed

• Storybook features always display dialogs in an open state so that snapshots can effectively capture any changes.
• Removed the ability to change props in features for simplicity and consistency with other components
• In the example called 'WithCustomRenderers', I've placed the header, content, and footer components inside the 'WithCustomRenderers' component. This change improves readability, especially when highlighting the code.

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: db63923

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

[mperrotti]

I played around with this and I think I have a way forward (or at least a workaround) to resolve your Jest issues. Maybe we can pair? Ideally with another PRC engineer present 😅

[mperrotti]

Suggested change

	exportdefaultReact.forwardRef<HTMLDivElement,PropsWithChildren<DialogBottomSheetProps>>((props,forwardedRef)=>{
	exportdefaultReact.forwardRef<HTMLDialogElement,PropsWithChildren<DialogBottomSheetProps>>((props,forwardedRef)=>{

[maximedegreve]

Actually I had to revert this again because the role is defined through the role prop.

[mperrotti]

It's looking good! Just one little thing we might to address: we don't delay calling onClose when clicking the "x" or keying Esc

Kapture.2024-01-23.at.19.07.57.mp4

If this is intentional, don't worry about it.

[mperrotti]

If this merges before #4048, I mighjt update my PR to move these tests into the same test file.

[maximedegreve]

Yeah that was intentionally because I thought you aren't swiping it away.

[mperrotti]

Looking good. Since this is such a big PR, it might be nice to get a review from somebody who's "officially" and engineer before merging. Not required though 🙂