Allow modal background styling in html

[dbi1]

Hi @excid3,

thank you very much for writing the Tailwind Stimulus components, they are really, really helpful!

One small issue: I noticed that the modal background is somewhat "hardcoded" in the modal controller js.

Any chance you might be up for enhancing this minimally by adding an optional "data-modal-backdrop-class" data attribute that could take a set of tailwind classes, and, if present in the html, would overwrite the default backdrop styles in the js?

Thanks again!

[dbi1]

Actually, after playing around with it some more, not sure my suggestion is needed, as I can just use

data-modal-disable-backdrop="true",

and then add

data-action="click->modal#close"

in TailwindUI's own background overlay <div>.

On another topic: Any chance you might add the enter/leave transitions capabilities from the dropdown controller to the modal controller also?

Thanks again for this delightful set of helpers!

[excid3]

A default background HTML is provided if you don't specify one yourself. Just set that option if you want to define your own.👍

https://github.com/excid3/tailwindcss-stimulus-components/blob/master/src/modal.js#L40

I don't have time to add transitions to modals at the moment, but if someone's got the time, a PR would be welcome!

[mtomov]

Hi,

Adding a "transition" effect to a modal can be achieved rather easily by adding an animation class like anim-scale-in directly to the modal body. Example:

.hidden.animated.anim-scale-in.fixed.inset-0.overflow-y-auto.flex.items-center.justify-center data-modal-target="container" data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard" style="z-index: 9999;" role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-body"

(bit difficult to read as slim...)

And anim-scale-in is:

@keyframes scaleIn {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.anim-scale-in {
  animation-name: scaleIn;
  animation-duration: 0.15s;
  animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
}

---

On another note, I was playing with the transitions on dropdown, and they didn't really work well for me on "entering" just on "leaving", but it might be something off my end. When looking at the code, I think there's a few things that can be improved when compared to the implementation from this article:

https://dev.to/mmccall10/tailwind-enter-leave-transition-effects-with-stimulus-js-5hl7

and the corresponding js piece of code: https://github.com/mmccall10/el-transition

1. By extracting the enter / leave logic in an helper class like that, it'll be easier to reuse for all components
2. Code in the dropdown controller will be easier to read
3. The requestAnimationFrame is better than setTimeout, and the leave/enter timeout data parameters can be made obsolete

Maybe I can mention those thoughts in the discussion section.