Re-implement Modal component using HTMLDialogElement (#461)

[bedrich-schindler]

Closes #461, closes #537.

[bedrich-schindler]

Update CSS properties in README.md.

Done ✅

[adamkudrna]

Nice job! 👏🏻 Even with the decision of not having the closed Modal in the DOM. 👍

I just think we cannot remove the click-on-backdrop-to-close functionality.

[adamkudrna]

when opening modal

Currently, closing of Modal is not animated because the component is simply removed from the DOM.

@mbohal Do we also want animated closing? That would mean delayed removal from the DOM.

[bedrich-schindler]

I would like to add one thing. Closing animation is hard to impelement. We do not have close handler, we have closeButtonRef. I tried to implement it somehow today but without success. So it is up to our decision whether we want to spend some time on it or not.

[mbohal]

After a fruitless afternoon I concur with @bedrich-schindler that:

Closing animation is hard to implement.

However, this change is not BC in terms of usage, so I think we should merge it as is.

We can add hide animation int he future. This will very likely change the API though…

[mbohal]

On video call agreed that for the time being we will only support opening animation.

[adamkudrna]

I'd expect more deletions than additions. 😞 Can we get rid of some more features custom code in our focus management? Or anywhere else?

[bedrich-schindler]

PR updated:

* Introduced allowCloseOnBackdropClick and allowCloseOnEscapeKey prop, both set to true by default. It allows end-user to configure modal in such way that he/she can prevent closing by clicking on backdrop or pressing Escape key.
* Improved blocking of firing click events on primary and close button as there were missing conditions checking whether the button is disabled (it was there for a long time)

• The biggest problem was with propagation of events, Enter was mistakenly closing dialog in unwanted cases. I can talk about it on Monday if you wish.

While I introduces allowCloseOnBackdropClick and allowCloseOnEscapeKey, I am thinking about allowProceedOnEnterKey (or something like that) to disable Enter functionality which can be unwanted in some scenarios.

[bedrich-schindler]

Just for info, tests need to be updated in #545 as new test environment is necessary.

[adamkudrna]

I have a note regarding forms inside dialog, otherwise OK for me.

[adamkudrna]

I checked the "Launch modal as form" example and found out there is no <form> element in it. Is it purposely? Maybe we didn't want the <form> there before switching to <dialog> but it would add more semantic meaning (and maybe functionality) now.

There is the method="dialog" form attribute (or formmethod="dialog" for buttons) if we find it useful.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#usage_notes

[bedrich-schindler]

Can @adamkudrna or anybody else help me with this?

I returned to this to complete the pull request but suddenly, I have all the texts inside of Modal in white even though there is no change in the code. master is OK. Does anybody know why? I do not want to rebased it until this is resolved.