Dialog Component

[keithamus]

This is the initial implementation of the Primer::Alpha::Dialog component.

This takes some of the code we already have in github/github from Primer::Experimental::Dialog, however I've dropped some properties for it to avoid pulling in configurations which we may want to later remove - to avoid breaking changes. So for example this doesn't implement helpers around <include-fragment> (those helpers cause unnecessary coupling between the two components, and can be abstracted away into different helpers), nor does this support forms (we need to more carefully consider the interplay between dialogs and forms, especially with regard to how native <dialog> will play a role here).

This takes the modal-dialog web component in its entirety from github/github. While this is a re-implementation of native <dialog>, and it probably makes sense to simply implement <dialog> instead, unfortunately we've noticed some areas where <dialog> isn't quite suitable: the support is only there in newer browsers, and some browsers have buggy implementations, and we need some time to look over the polyfill to make sure it handles what we want and the trade-offs are worth it. While we haven't had time to assess this yet, the <modal-dialog> component is ready to go, and I believe a later refactor from <modal-dialog> to <dialog> should be possible without any breaking changes.

Another area we should look into as a follow-up to this initial implementation is how we can leverage the overlay component (#1143) to simplify some areas of the dialog work.

[changeset-bot]

🦋 Changeset detected

Latest commit: 7ad9af3

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

This PR includes changesets to release 1 package

Name	Type
@primer/view-components	Patch

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

[vdepizzol]

Sidenote: I've been wondering whether we should normalize Primer custom elements with a primer prefix. In this case, we don't use the term "modal" to refer to dialogs except in this custom component due to the hyphen requirement. Another example is the tool-tip element.

Maybe primer-dialog, primer-tooltip, primer-split-page-layout, etc?

Related: ADR on spelling of component names

[owenniblock]

We also presumably need to use a different name because we'll be running the Experimental modal-dialog still until we've worked out how we're handling all of the bits of functionality that were added to that version. I like primer-dialog.

[khiga8]

👋 I'm not sure familiar with the state of dialog is currently but wanted to bring this audit comment from @jscholes to your attention in case it hasn't been surfaced yet.

[langermank]

👋 Documenting some tips for rolling this out to dotcom (replacing Experimental::Dialog)

Experimental param	Alpha param	note
footer_content_align	deprecated	remove param and do visual check
header_variant	deprecated	remove param and do visual check
motion	deprecated	this has a default value now
description	subtitle	name change

The height and width params are combined into a new size option. I'll try and map out how these swaps might look, but visual testing is likely required.

width	new size
:small	:small
:medium	:small
:large	:medium
:xlarge	:large
:xxlarge	:xlarge

The size param handles height and width. If there's a case where an Experimental::Dialog has a width of :large and a height set to anything above :large, set the size to medium_portrait.

For Dialogs wrapped in <form> tags, work with @keithamus on how to structure the Alpha Dialog.