search

N00nDay / stwui

Opinionated yet customizable Svelte-TailwindCSS component library
stwui.vercel.app
MIT License
447 stars 21 forks source link

Docs mention `Modal.Content.Actions` which actually doesn't exist #184

Closed jerefrer closed 10 months ago

jerefrer commented 10 months ago

Link to the Page

https://stwui.vercel.app/modal

Describe the Issue (screenshots encouraged!)

Hi there,

Thanks for all your great work, most of components I'm using just work so that's a big help.

However I wanted to have a basic modal with some action buttons in the footer but when I put the buttons in the Modal.Content.Footer then the padding is all wrong because the height is fixed to h-16:

image

So first, why fix the height? Why not have it be dynamic?

Then I saw in the docs that there is a Modal.Content.Actions slot. Wonderful I thought, that must be exactly what I'm looking for. Except that it doesn't actually exist :)

What's your view on this?

Should Modal.Content.Actions be added? I believe it should be, and that all buttons should be aligned to the right of the footer by default, since it seems to be standard pretty much everywhere.

Or should I use Modal.Content.Footer? If so how could I have it be the proper height without hacking my way through CSS?

Thanks for reading :)

N00nDay commented 10 months ago

There is an error in the docs. Modal and Card are similar components style wise so this was carried over from the Card component but doesn't actually exist in the Modal. I will have this removed in the next update.

As for the styling of the Modal.Content.Footer, I see how the static height can cause conflicts depending on the elements injected into the footer slot. I will need to dig a solution further. The reason for the h-16 class is to determine full height of the Modal so it is contained within the window and only the Modal.Content.Body is scrollable, leaving the footer always exposed and accessible.

Off the top of my head I would have to allow the Modal to flow off the screen in order to leave the Modal.Content.Footer height dynamic. Just my initial thoughts, but I will think a little more on this.