Modal / Alert dialog specific use case

[Andrea-gli]

hi Team, I have a similar ask as this [thread](https://github.com/twilio-labs/paste/discussions/3599), but my issue is i wonder if it is possible to have width and height property exposed? or expose a size property like the Modal component we now have in Paste? I am asking because I am working on a ticket that is based on this design: https://www.figma.com/file/2EWYa385hDsuiVoROxeNuV/Milestone-4%3A-Cross-Product?type=design&node-id=3157-14709&mode=design&t=miepImG5lm0p7jwx-0

I have tried to use the alert dialog but it could be a little too narrow. any suggestions?

thanks!

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Wider modal width (updated: 04/07/2023, similarity score: 87%)
• Visual and accesibility for Sender Id management section - Answer (updated: 08/30/2022, similarity score: 86%)
• Various styling issues (updated: 01/23/2023, similarity score: 85%)

[dosubot[bot]]

Based on the discussions you've found and the Figma design you're working with, it seems you're looking to adjust the width and height properties of the Modal / Alert dialog from Twilio's Paste.

The Modal component in Paste accepts a size prop which can be used to adjust its size. The available size options are "default" and "wide". You can see this in action in the story examples like Default and Wide in the Modal component stories.

If the predefined size options do not meet your design requirements, you might need to extend or override styles using Twilio Paste's styling system or custom CSS. However, it's important to note that directly modifying the component's styles for dimensions might not be explicitly documented in Twilio Paste's official documentation, as the library encourages usage of its design tokens and predefined sizes for consistency across applications.

In the Wider modal width discussion, a solution was proposed for a similar issue where a table layout was used to achieve a wider modal width. This might be a useful reference for your case.

In the Customizable Modals discussion, the idea of "slot" components was explored to allow for custom content inside of components in Figma without having to detach. This might be another approach to consider if you're looking to customize the content inside the Modal / Alert dialog.

I hope this information helps you in implementing your design. If you have further questions or need more specific guidance, feel free to ask.

Sources

• Wider modal width
• Customizable Modals
• packages/paste-core/components/modal/stories/index.stories.tsx
• packages/paste-core/components/modal/src/Modal.tsx

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[serifluous]

Hey @Andrea-gli ! What doesn't work for you with the Modal component?

The Alert Dialog is meant to be used for more system confirmation and alert use cases, not for marketing.

[Andrea-gli]

hi @serifluous, we don't need the cancel button in the modal and don't want it dismissed on esc key either

[serifluous]

1. Does an account get automatically get created if they click the "Get started" button? Or if they finish the onboarding flow that comes after that?
2. How does a user exit out of the flow? We intentionally require a close/cancel/go back button in our Alert Dialogs and Modals because the default focused option should always be a safe option for users to return to their previous state. It's a bit of an anti-pattern otherwise to force users to continue (and potentially get an account automatically created).

It'll be worth it to continue discussing with @amyodea if the narrow width of the Alert Dialog worsens the experience in any way, and what a good default focused option should be.

[Andrea-gli]

hi @serifluous ,
please see my answers below:

1. they will need to finish the onboarding flow that comes after that.
2. we have decided to add a go back buttons

the Alert would be perfect if it weren't for its narrower width. however, i will talk to Amy and our PM, i suppose we can get by with the existing Alert dialog. just wanna explore the possibility of making the width configurable to make it more flexible if it is not a huge endeavor for future use cases. thank you!