Implement Dialog Component about material-components-web

[amsheehan]

After discussing with the team, we are going to implement a dialog component without the use of the dialog element.

Part of this is because only one browser supports dialog, and it is still marked as experimental on MDN

That said, we will implement focus trapping and aria roles to keep it accessible.

This also means that once this story is finished we'll have a dialog component 👍

[traviskaufman]

@mikegleasonjr It's being worked on currently! See our "What's the core team up to?" section in CONTRIBUTING.md to find out about what we're currently working on! We try to be as transparent as possible about it 😄

[Garbee]

Here is a trick we can implement with dialog.... CSS Variables for adaptive width. The spec states that dialogs should be sized in units of 56px. Phones are like a 3 or 4 unit default and desktops like 8. So, we can set two root-level vars --mdc-dialog-unit-width: 56px; and --mdc-dialog-unit-count: 3. Media query for desktop to change the count, easy. Then for the dialog width we set it with width: calc(var(--mdc-dialog-unit-width) * var(--mdc-dialog-unit-count));. This will let developers do .app-dialog { --mdc-dialog-unit-count: 8; } for example to expand the width automatically by the proper number of units.

[mikegleasonjr]

Hi guys, loving how the library is going. I was about to pull a 3rd party dependency in my project for modals. I am not ready to go live and I can live with window.alert for now but my question is, is there any ETA on this? Is there a roadmap for components integration? Thanks guys!