Popover Guidance

[jess-watson]

Hi team, I'm utilizing the popover component to incorporate generative AI into Segment's audience builder. This is my first time using the popover component so I'd like to make sure I'm adhering to Paste's guidelines. Here is the Figma file.

My questions:

• I read in another thread that we can have the popover open by default as long as it can be triggered by a button, is that correct?
• If the user clicks outside of the popover does it close by default, or does the user have to click the close/cancel button?
• Since the field within the popover isn't necessary for the user to complete, I have not made the field required, however, I'm wondering if it should be required for error validation so that if a user clicks the popover CTA but has not filled out the field, we can show an error.
• Does the popover close after the user clicks the CTA/submits the form or does it remain open until the user clicks the close/cancel button?
• Is there any additional feedback you have on this approach?

I've heard that you're working on a gen AI toolkit – I'd love to eventually utilize your recommended patterns for generative AI features.

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

---

Hello! I'm glad to hear you're using the Popover component for your project. Let's go through your questions:

• According to the Paste guidelines, a Popover must be triggered by an explicit user action, such as clicking a button. It doesn't explicitly state that a Popover can be open by default, but it does need to be triggered by a user action.

• Yes, if a user clicks outside of the Popover, it will close by default. This is one of the ways a user can dismiss the Popover.

• The guidelines suggest that information in a Popover should never be essential to task completion. Therefore, it's not necessary to make the field required. However, if you want to implement error validation, that's up to your discretion and the specific needs of your project.

• The documentation doesn't explicitly state what happens after a user clicks the CTA/submits the form. However, it does mention that a Popover remains actively open until a user dismisses it in one of the ways listed, which includes pressing the close "x" button, pressing a "Cancel" button, clicking outside of the Popover, or performing another action that closes the Popover.

• As for additional feedback, it's important to remember that Popovers are meant for displaying supplemental or contextual interactive content over your UI. They should not block the user from interacting with the rest of the page. Also, remember to follow the accessibility guidelines, such as including at least one focusable element (usually the close button) and labeling the Popover.

I hope this helps! As for the gen AI toolkit, I'm afraid I don't have any information on that at the moment.

---

Here are some similar discussions:

• Popover component: Thoughts and advice (updated: 2023-02-02T20:09:58Z, similarity score: 0.86)
• Debugger 2.0 / Modal vs Popover / Filter button / Overall interaction feedback (updated: 2023-02-02T16:28:02Z, similarity score: 0.85)
• Provisionally Approved accessibility and component questions - Answer (updated: 2023-07-21T14:38:41Z, similarity score: 0.85)

[serifluous]

(PasteBot got so close!!)

1. Yep, Popover can open by default. It just still needs the button trigger to exist on the page. You can see similar behavior on some of our Storybook examples: https://paste-storybook.twilio.design/?path=/story/components-popover--default
2. PasteBot's correct on this point.
3. PasteBot is...actually pretty generically correct here. The required indicator is completely presentational, so it's still on your team to handle form validation. Without the indicator, you can still error the form if people click the CTA but haven't filled out the form. Adding the required indicator to the field when it's in a popover might send the wrong message that people have to configure their audience in this way.
4. PasteBot's correct on this point. Clicking the CTA doesn't have to close the popover, but it can.

On additional feedback: Did you try other ways of expanding this section out besides the popover, especially in a way that doesn't cover the preview panel, or is that panel not really necessary to the flow of someone wanting to use this AI feature to configure an audience?

And thanks for the interest in our AI UI kit! We'll send out some requests for AI use cases across the design teams in the coming weeks, so look out for that.

[jess-watson]

Yay PasteBot!
Thanks for your additional guidance. The preview panel isn't necessary to someone using the AI feature, but it is an important part of creating an audience overall. The user would need to build the audience and then click a button to trigger the preview panel, so the panel just has an empty state until the user takes that action.
I explored using a sidesheet instead of a popover, which still covers the preview panel. I gravitated towards the popover because it can be open by default and feels more natural in a full screen wizard flow versus a sidesheet on top of a wizard.
With that being said, this is just the first iteration of this feature. Our plan is to release this and understand users' expectations. If this is a feature we want to continue supporting and iterating on, there's an opportunity improve where this lives in the audience creation flow and how users might conversationally tweak the prompt in the future (so a popover may work now but likely won't be a long term solution).

[serifluous]

Awesome, thanks for all the context! Excited to see where this feature goes.