Flex CBM: Tooltip with error help text

[Porlin]

Hi There,

As part of the Conversations Based Messaging initiative, we are displaying Delivery status on messages. When a message is sent from Agent to Customer and the customer does not receive the message we are surfacing that error (Message failed or Message undelivered) in the UI.

We have some concepts here that I shared with the Flex design team and @loreina in Crit pod today.

Option 1 is a Message Failed error state with a blue Retry button.

Option 2 is Message failed with a blue tooltip.

I have not seen a red error state with a tooltip used. Is there a red tooltip available? Are we able to have a Tooltip with error help text?

[loreina]

Hi @Porlin,

Just spoke with the team and we'd recommend going with Option 1 as Message failed is an error and should use error help text.

To create an error Tooltip, since Anchor is default to blue, you'd have to use the destructive variant Button to put a Tooltip on a red icon. However, we're not sure here that the Tooltip trigger needs to be a destructive action. Those are reserved for controls that do an irrecoverable action, while this seems like with the Retry, that this is in fact a recoverable action. I suggest thinking about if the Tooltip text would provide the user with useful information that saying the error text doesn't already cover.

Another option to think about is to let the user click Retry a few times and if it keeps failing, to add some text like "Why won’t my message send?" with context on what might be wrong.

Hope this helps, let us know if you have any other questions!

[Porlin]

Hi @loreina , great suggestions here. Thanks for looking into this for me. Will make the recommended updates to Option 1.

[Porlin]

Hey @loreina for the failed state of the message bubble I have looked at a 60% opacity for light and dark theme flex and a dashed border version. Are we able to have an opacity colour if it's accessible? What would be the recommendation to add this as a use case for Chat bubbles?

Light theme - 60% opacity example

Dark theme - 60% opacity example

Light theme - Dashed border example

Dark theme - Dashed border example

[loreina]

Hey @Porlin, we wouldn't recommend using opacities and are actually rolling out some changes in the coming weeks to remove use of opacities in Default and Dark theme. Opacities get tricky because they wouldn't work with theming and we can't run contrast checks on them. It also makes it difficult to provide recommendations on accessible text/background pairings since some pairings might be accessible but not others.

We're also rolling out a change to darken the background body of Dark theme, which might run the risk of the 2nd screenshot you shared to be inaccessible, because it will darken the chat bubble along with it.

The dashed border example you have here would work well, or exploring using another design token for the background in the first example. Let me know if you have any questions!

[Porlin]

Thanks @loreina we have decided to go with the dashed line versions. Thanks for your help on this.

[serifluous]

Hey @Porlin ! Jumping in a little late, but I realized that @waijeeho may have worked on similar error handling & messaging in Frontline. Not sure if you've reached out to her yet for insight, too.

[Porlin]

Hey @serifluous Thanks for letting me know. Will check in with Wai-Jee.