Scrollable Popover

[hajohnston]

Hi Paste team!

I am currently exploring designs for updated Error Handling within Journeys (Segment). I'm looking to design a way to show a summary of Warnings/Errors/Issues within the canvas - I've included an exploration below. I'm hoping to provide an actionable link for the user to resolve a Warning/Error/Issue when applicable. I want to confirm that popovers can be scrollable? I am thinking in terms of scalability here, it could be likely a user will have 10 Warnings/Errors/Issues to review.

The alternative would be a side sheet or side panel, however I am concerned the interaction will feel quite weird when the user clicks on the action to resolve the Warning/Error/Issue and then the side sheet is covered with another side sheet. Please let me know any feedback you have.

I'm also including a screenshot from Salesforce documentation of Error popovers. I think this is a common pattern to use when designing for Error Handling. Thanks in advance for your help!

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

---

Hi there!

For your design exploration on showing a summary of Warnings/Errors/Issues within the Journeys canvas, using popovers can indeed be a scalable solution. Popovers in Paste can contain various kinds of content, including scrollable content, which makes them suitable for your use case where a user might have multiple issues to review. This aligns well with your requirement for scalability and the ability to provide actionable links for users to resolve each Warning/Error/Issue.

Here's an example snippet on how you might structure a scrollable Popover content:

import {PopoverContainer, PopoverButton, Popover} from '@twilio-paste/core/popover';
import {Box} from '@twilio-paste/core/box';
import {Text} from '@twilio-paste/core/text';

<PopoverContainer>
  <PopoverButton variant="primary">View Errors</PopoverButton>
  <Popover aria-label="Errors">
    <Box style={{maxHeight: '250px', overflowY: 'scroll'}}>
      {/* Iterate over your errors/warnings/issues here */}
      <Text as="p">Error 1</Text>
      <Text as="p">Error 2</Text>
      {/* ... */}
    </Box>
  </Popover>
</PopoverContainer>

For more detailed guidance and examples on implementing Popovers, you can refer to the Paste Popover documentation here: https://paste.twilio.design/components/popover/

Regarding your concern about using a side sheet or panel and the interaction potentially feeling awkward with multiple layers of side sheets, it's a valid consideration. If the primary goal is to offer a quick, inline way for users to review and act on errors without navigating away from their current context, popovers might indeed offer a more streamlined user experience. However, if the error resolution process is complex and requires more space or user interaction, transitioning to a side sheet for detailed error handling while keeping the main canvas visible could still be a viable approach.

Remember, the key is to balance the need for information density and actionability with maintaining a clean and non-overwhelming user interface. Testing with real users could provide valuable insights into which approach feels more intuitive and effective for your specific use case.

I hope this helps! If you have any more questions or need further assistance, feel free to ask.

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:

• Popup Summary View Idea (updated: 08/24/2022, similarity score: 88%)
• Popup Summary View Idea - Answer (updated: 08/24/2022, similarity score: 87%)
• Showing error previews in a table - Answer (updated: 08/30/2022, similarity score: 86%)

[nkrantz]

Hi @hajohnston - sorry for the delayed reply here! As PasteBot said, you can make your Popover content scrollable by wrapping the contents in a Box with a maxHeight and overflowY of "scroll".

If you'd like to style the scrollbar so that it's more aligned with existing components and not using the native scrollbar, feel free to copy our styles from any of our components with custom scrollbar styling, such as Side Panel.