feat: Update Modal component

[jordanarldt]

• Update Modal component to make trigger not required, and add a header/title to the modal with a close button.

[vercel]

@jordanarldt is attempting to deploy a commit to the Makeswift Team on Vercel.

A member of the Team first needs to authorize it.

[jamesqquick]

@jordanarldt Is there a benefit to adding this functionality directly to the modal vs someone being able to use our form components within the content of a basic modal? This feels like a lot to add and maintain when it's something that already has existing primitives that can be used to accomplish the same thing?

Was this a specific decision in Catalyst?

[jordanarldt]

@jordanarldt Is there a benefit to adding this functionality directly to the modal vs someone being able to use our form components within the content of a basic modal? This feels like a lot to add and maintain when it's something that already has existing primitives that can be used to accomplish the same thing?

Was this a specific decision in Catalyst?

@jamesqquick I would say there's benefit for sure in terms of UX/DevX. This was a specific decision I made when in Catalyst while working with the Modal component because it felt quite lacking for what we needed.

I thought about it like this - in real world scenarios, 99% of Modals will have a title, a close button at the top right, and action buttons at the bottom, so I thought it made the most sense to provide those out of the box for those that want them, but also make sure it's not a requirement if someone wants complete control over the modal.

If I want to make a modal with the content entirely made out of form primitives or whatever else I want, I can. BUT, if my modal only needs to be a simple form input with some buttons, I can also use the builtin form and buttons props for that 😄 It's just generally a better experience in my opinion, and still much less complex than the radix-ui Dialog component. I discussed this a bit with @hunterbecton before going this route as well.

Essentially, while working with the original VIBES component - as a developer - all I could think about is how much nicer it would be if the Modal component had something out of the box to offer like this, so I felt it was a good idea to implement it, as I'm sure other developers consuming VIBES would feel the same way.

[hunterbecton]

I like the updates to the modal primitive! I agree a close button, title, etc should be supported in the primitive. However, I'm hesitant that the Modal should support form logic because I think the idea of it being a primitive is lost. I would expect that the developer would need to create a form and then use it as a child inside a Modal.

[jordanarldt]

I like the updates to the modal primitive! I agree a close button, title, etc should be supported in the primitive. However, I'm hesitant that the Modal should support form logic because I think the idea of it being a primitive is lost. I would expect that the developer would need to create a form and then use it as a child inside a Modal.

@hunterbecton I can understand that! The only problem is that if we have built-in modal buttons, they still can't be used if you are using a form in the modal if we don't add built-in form support.

The reason being is that if I do something like this:

          <Modal
            buttons={[
              {
                type: 'submit',
                label: 'Submit',
              },
            ]}
          >
            <form>
              Some form
            </form>
          </Modal>

The code would end up like this:

<Modal>
  <form>...</form>
  <button type="submit">...</button>
</Modal>

The modal buttons will be a sibling to the children and won't be attached to the form at all, so you'd still end up needing to make your own buttons in the modal content instead, unless we added some complex logic to inject the buttons into the children and add them there, but I don't like that idea.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
vibes	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 20, 2025 5:42pm