"Info" call-out?

[jonathanconway]

I noticed we have a "warning" themed callout with red colouring.

Could we also have an "info" call-out, in a more "calming" colour (e.g. turquoise)?

A scenario for this has come up in Identity, specifically, when the user goes to update their details and we want to "call out" that the change will need to be verified:

[klepas]

@jonathanconway Sure. (:

This is easy to do, just low priority for us given the impending deadlines. Might add in my spare time later this week.

[jonathanconway]

Sure no rush 😁

[TrebBrennan]

FYI early design draft from GovAU/alpha I imagine we will end up heading towards this.
It seems to accommodate most validation types, @jonathanconway is there anything else we should consider?

[klepas]

@TrebBrennan I mentioned these to Alz yesterday, and I’m keen to work on these with her if we get the chance to. (:

[jonathanconway]

Hey Treb,

Thanks for including me here!

Would be great to do usability & accessibility testing with validation / form interactions as soon as possible.

It might also be good to see these mocked up within a complete form, just to have visual context and see how it sits along-side other components. For example, where will it sit in relation to the field label? (I assume below).

Don’t get me wrong, this looks excellent. Love the line that visually ties the message to the relevant field.

[klepas]

Tracked under DESIGN-218.

[klepas]

Just an update—

We’ve added this as part of 3 new ones to UI-Kit:

1. callout--info
2. callout--error
3. callout--success

These new ones were added in this PR: #449

The HTML for the example was added in #452

I note this since they’re actually missing from the design guide/documentation website (ticket for that work: AusDTO/dto-design-guide#119)

Closing this issue subsequently.