New Callout Component

[ceyerkes]

Hey team! There's been concern with a few designers on our team about the new, extended Callout component taking up more vertical space than the old version. Is it possible to have the option to move the icon + header on the same line like it was previously?

cc: @char-mainewang & @kevinbtu

[serifluous]

Hey @ceyerkes @char-mainewang! Can you share a few examples of layouts where the increased vertical space is a concern?

[ceyerkes]

[serifluous]

Thanks for sharing! Since we've heard this feedback a few times (cc @dreamealist), we're going to update the layout. Here's the ticket in the backlog: https://twilio-productivity.atlassian.net/browse/DS-554

We originally changed the layout to differentiate Callout from Alert even more, and give some breathing room to the close button in the new dismissible variant of Callout. But it sounds like the tradeoff in vertical spacing might not be worth it.

Here's the new proposed layout: https://www.figma.com/design/aP2JnFO5Ds81mTY0iwLxPl/feat(Keyboard-Key)%3A-add-component?node-id=45188-676&t=RIaaitD36JNhEwa6-4 Let us know if this works, or if you have other feedback!

[ceyerkes]

I'll ask the team to provide feedback, but i think this is exactly what i was envisioning, thank you so much!

[char-mainewang]

just wanted to follow up with another example of where the new call out takes up significant vertical real-estate where it could block other content users may want to see

[char-mainewang]

@serifluous The new design proposals look fantastic! I especially liked the updated left stroke in the new callout component—it’s a clean and simple way to differentiate it from the alert component. I really appreciate your team’s promptness in getting this updated. <3

[serifluous]

Awesome, so great to hear! We'll keep y'all updated in this thread and #twilio-ux when the changes go out in code + Figma.

[robyn-bautista]

thanks for this response @serifluous, we were going to give the same feedback :) could you give a little more context on the direction of updating the UI to the latest version? on why we went with going with this treatment vs the previous alert treatment?

[serifluous]

Yep! You can read the discussion in #3862 that explains some of the history behind Alert and Callout, and why they should be visually distinct from each other.

As part of the explorations to make them more distinct from each other, we decided to keep Alert pretty compact, and Callout a little airier and take up more space with wider padding. But it looks like we went a little too much in that direction, so we're dialing it back a bit now from feedback from teams.

[serifluous]

Hey all! This change is now available in code and Figma.

[ssonajalg]

The way it hit quite a few of the Twilio Console UI-s => i would definitely argue that this was a bug, and a very visible one at that. I'll open a discussion with the Web platform to see if we could expedite updating the Console Paste version to get the callouts back to normal.

But I hope there's also some takeaways from this for the Paste team. this spent quite a bit of time of quite a few designers and frontend teams - so could we pretty please gather some more feedback and be a bit more conservative when designing such changes?

[serifluous]

Hey @ssonajalg , thanks so much for your feedback! We did go through a feedback loop with a small set of Console designers on this, and it unfortunately wasn't raised as an issue in that small group.

That's obviously not ideal, so we'll be much more thoughtful about changes like this in the future, especially when it affects the size and shape of components, and marking them as "design breaking changes" and getting feedback from a broader group. This is definitely a learning for us, and I'm glad you and other folks brought this up.