Announcement pattern

[char-mainewang]

Background

The Reverse ETL team is moving a feature from one page to another and I'm curious to know if we there's a pattern / component we use for these changes.

Feedback

We’re exploring using the alert component as we want it to be dismissible, but I'm not sure what the threshold for “high-priority or time-sensitive” is for us to use it?

Evergreen has this tour component that great at highlighting pieces of the UI, making the information more contextual, but i don’t think paste has an equivalent.

Figma file

Stage of design

Exploration

Research

No response

Relevant links

No response

Are you looking for visual design support?

• Yes

Additional Information

No response

[serifluous]

Hey @char-mainewang, you have a few options here!

1. One way to consider whether it's high-priority or time-sensitive is to think about what the risk is if a user doesn't see this information. Are they going to be blocked in some critical workflow if they miss it? If the risk isn't super obvious, you could use a Callout: https://paste.twilio.design/components/callout

The visual design of Paste Callouts and Alerts are pretty close now, so the main difference comes down to how screenreaders announce the text in the Alerts vs. Callouts. You can read more about that here: https://paste.twilio.design/components/alert#accessibility

2. If you feel like the Evergreen tour component is a better solution, you could use Popover and have it trigger on page load, though you'll need to add a button or something similar to the page to function as a trigger. Can you share a demo or explain how the Evergreen component works? I don't see it on the Evergreen doc site, but it might be something that's composable with Box and Popover.

[char-mainewang]

We chatted about using the interactive badge + popover during office hour, i'm exploring putting the badge on the tab where users can configure that setting, would this introduce any accessibility issues?

[SiTaggart]

Hi

Unfortunately, yes, you can't place interactive items inside another interactive element like a tab, as there is no way to navigate to them and sometimes no way to detect they are there.

Sorry

[libertycarlin]

Thank you for joining us at Office Hours @char-mainewang! Here is the link to the recording and password is in the help-design-system channel