Bug - Callout component in both Figma and production

[mikaelaSmithTwilio]

I have noticed throughout production that our callout components are all formatting themselves strangely. This wasn't an issue previously, but when I updated my components in Figma, a lot of my callout boxes updated to format themselves incorrectly in the same way as production.

I tried hitting reset changes, but that did not resolve the issue either. If I drag out an entirely new instance, that one is formatted correctly. Is there an update that was done that may have caused this both in Figma and in the coded components?

Looking in paste confirms that they should be formatted horizontally and not vertically.
Link to file showing screenshots & component examples

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

---

Sorry, I don't know how to help with that.

I did do a search though, 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:

• Weird behavior with Callout (updated: 09/15/2023, similarity score: 85%)
• "Paste Components" library linked in one Figma file is bugging out (updated: 06/01/2022, similarity score: 85%)
• Inconsistency of the font size for Callout component in Figma vs Paste site (updated: 09/21/2022, similarity score: 85%)

[dosubot[bot]]

Yes, there was an update in version 4.2.1 of the Paste design system that changed the layout of the Callout component to align elements horizontally, reducing the vertical space used. This update could be causing the formatting issues you're experiencing in both Figma and production ^[1]. Additionally, the Callout component was updated with a dismissible variant and greater visual contrast from the Alert component, which might also contribute to the formatting changes ^[2].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[serifluous]

Hey @mikaelaSmithTwilio ! We recently reverted a layout change we made. In prod and in Figma now, the icon should appear on the same row as the column header.

1. For prod, I'm assuming your screenshots are from Console. If so, can you check in production again that the issue is still there? The latest Paste upgrade just went into Console yesterday. I'm seeing the correct Callout layout here in Segment workspace settings in Console, for example:

2. For Figma, can you share the link to your Figma file where the component's not updating? Might be something buggy with Figma. If you renamed the component locally, sometimes it doesn't pull in changes.

[mikaelaSmithTwilio]

Let me reach out to my engineers and double check this. I took these screenshots in prod this morning, but it might be something on my end.

I think the naming bug is my problem in Figma. New instances of the component appear to be working as expected.

[serifluous]

Hey @mikaelaSmithTwilio ! Were you able to check if everything's looking ok in prod?

[mikaelaSmithTwilio]

Hey! I was. I apologize for not getting back to you, but we are good to go. It looks like the update you rolled out fixed it. :D Thank you so much!