LEXI-64 Create ClayModal

[matuzalemsteles]

Animations

For the correct functioning of ClayModal with animations, it was necessary to add a timeout to create a delay and add the show class to theoverlay after it is put into dom, the same happens when showing the modal , must add a _isTransitioning variable to add theshow class to the modal. Can not add all at the same time when are injected into the dom, because display: block nullifies the transition.

show() {
  dom.addClasses(document.body, 'modal-open');
  this.visible = true;

  setTimeout(() => {
      this._isTransitioning = true;
      dom.addClasses(this._overlayElement, 'show');
   }, 5);

...

{let $attributes kind="attributes"}
    class="
    fade modal
    {if $_isTransitioning}
        {sp}show
    {/if}
    "

    {if $visible}
    style="display: block;"
    {/if}
...

Tests

To test when the modal is opened or closed, it was necessary to add timeout to wait for the animations to be made and reflected indom and thus to complete the test.

[carloslancha]

Just started reviewing :)

:octocat: Sent from GH.

[carloslancha]

Resent https://github.com/metal/metal-clay-components/pull/125