Customizable Modals

[ceyerkes]

Hi! Wondering if there are plans to add customization to modals, particularly the ability to adjust width, and add inputs:

Thanks!

[TheSisb]

Hi @ceyerkes,

Our Modal component has two standard sizing: default (608px wide) and wide (816px wide). We chose the default width to allow for an optimal reading length at 70-75 characters per line at default Paragraph size at 100% magnification. At viewports smaller than 608px, the Modal will fill the width of the viewport. We recommend the wide variant when you need to place a two-column Grid layout or video player in a modal. We currently don't have plans to add more width adjustments, but would like to learn more about your use-case and need.

Our Modal is able to accept any inputs in the ModalBody. Could you share some more context for what you're being blocked on in that regard please?

[ceyerkes]

That makes sense re: sizing.

I haven't had any luck dragging inputs into the modal, even after detaching:

[kate-porter]

Hey @ceyerkes! Super interesting that you've asked this, because we've recently been exploring some ways to make it easier to put custom content inside of components in Figma without having to detach. Components like Card, Modal, Popover, etc. are tricky, because you can really put anything you want inside of them, so they're really tough to componentize in Figma.

One idea we've been exploring are what we're calling "slot" components that we actually just shared with the committee. The idea is that the "slot" component is nested within a component like Modal, and it could be swapped out for a local component. That local component would have your custom content, like the inputs, checkboxes, and radio groups you shared in your example.

Check out my branch to see how we're thinking about it. I'd love to get your thoughts on this approach and if it makes sense to you based on your needs and workflow.

[ceyerkes]

@katieporter that makes sense, thanks! I'll take a look and give feedback, but that sounds like a solid solution.

[kate-porter]

Appreciate it! Definitely curious to hear your feedback. :)

[ceyerkes]

Suuuuper helpful to watch how these slot components can be used. I had trouble understanding the instructions initially, but I think a Loom vid will go a long way. Thanks @katieporter!