Error state for side modals

[elangager3]

Hi! I'm looking for some guidance on how to handle errors within side modals. This is how I currently have it designed if a user attempts to save information in the side modal and something goes wrong and is unable to save:

Do we have any guidelines on this? Thank you!

[dosubot[bot]]

🤖

Hey there @elangager3! 🎉 I'm Dosu, a friendly bot here to lend a hand with bug squashing, fielding questions, and guiding you on your journey to becoming a contributor. While we wait for one of the human maintainers to chime in, I'm here to assist you. I noticed you're having some trouble with error states in side modals, so let me dive into that and I'll get back to you with some insights shortly!

[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.

---

If there are errors when a user attempts to save information in a Side Modal, you should follow these guidelines:

1. Use Help Text to show inline error messaging that informs users that they cannot continue. Provide guidance on next steps and how to remedy the situation.

2. If the Form lives within a Side Modal and has a form action to submit or save the information, we suggest closing the Modal on submit, then display a Toast that indicates the action was successful or experienced a system error.

3. Error messaging for required fields should explain how to resolve the error and not reiterate that the field is required. The required field indicator is sufficient.

4. Ideally, Help Text should have enough information to help users prevent errors. If Help Text is already on a form field, change it to variant="error" and add error copy before the original help text copy.

Here is an example of how you might implement the Help Text for an error state:

<HelpText variant="error">
  There was an issue saving your information. Please check the fields and try again.
</HelpText>

And here is how you might use a Toast to indicate a system error after closing the modal:

<Toast variant="error" onDismiss={() => {}}>
  There was an error saving your information.
</Toast>

Remember to ensure that the error messages are informative and guide the user on how to resolve the issue. For additional guidance on how to compose error messages, refer to the error state pattern.

I also did a search, 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:

• Unsaved changes alert modal pattern (updated: 10/16/2023, similarity score: 87%)
• Side Modal with success/error messaging (updated: 01/19/2023, similarity score: 86%)
• Side Modal with success/error messaging - Answer (updated: 01/19/2023, similarity score: 86%)

[dosubot[bot]]

🤖

Sure, I can provide some guidance on how to handle errors within side modals in Paste.

1. Using Help Text for inline error messaging: You can use the HelpText component to show inline error messaging. This can be done by setting the variant prop to "error" and providing the error message as children to the HelpText component. Here's an example:

<HelpText variant="error">This is an error message.</HelpText>

2. Managing form actions within a Side Modal: Form actions can be included within a page or page section. This helps keep the form elements left-aligned for better scannability of the content and its related actions. It's recommended not to prevent form submission by disabling the submit button. Instead, use error messages to explain what information is missing or incorrect. Here's an example:

<FormActions>
  <Button variant="primary" type="submit">Submit</Button>
  <Button variant="secondary" type="reset">Reset</Button>
</FormActions>

3. Composing error messages for required fields: Error messaging for required fields should explain how to resolve the error and not reiterate that the field is required. The required field indicator is sufficient. Here's an example:

<Label htmlFor={uidSeed('name')} required>Name</Label>
<Input id={uidSeed('name')} type="text" required />
<HelpText variant="error">Please enter your name.</HelpText>

4. Using a Toast to indicate a system error after closing the modal: If the Form lives within a Modal or Side Modal and has a form action to submit or save the information, it's suggested to close the Modal on submit, then display a Toast that indicates the action was successful or experienced a system error. Here's an example:

<Toast variant="error" onDismiss={() => {}}>
  There was a system error.
</Toast>

Remember to import the necessary components from Paste:

import {Form, FormActions, FormControl, HelpText, Label, Input, Button, Toast} from '@twilio-paste/core';

For the HelpText component, it has the following properties:

• element: This property overrides the default element name to apply unique styles with the Customization Provider. The default value is 'HELP_TEXT'.
• marginTop: This property sets the top margin on the div element. The default value is 'space30'.
• variant: This property sets the style variant of the help text. The default value is 'default'. The possible values are 'default', 'error', 'error_inverse', 'inverse', 'success', 'warning'.

The HelpText component does not have any specific methods. It is a functional component that accepts props and returns a JSX element. The component uses the React.forwardRef method to get a ref from its parent component, which can be used to access the underlying DOM element.

For more information, you can refer to the Form component documentation and the HelpText component source code.

Sources

• packages/paste-website/src/pages/components/form/index.mdx
• packages/paste-core/components/help-text/src/HelpText.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.

[nkrantz]

Hey @elangager3 - from the screenshot your design looks alright to me! Are there any specific questions you have about error messages within Side Modals? If you haven't already, be sure to take a look at our error state guidance.