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.

[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.