[Blocked: needs design] Add support for an announcement banner

[ryankeairns]

Is your feature request related to a problem? Please describe.
Not exactly. We have callouts but they tend to be used more semantically in terms of system state - information (blue), warning (yellow), and error (red).

What teams in Kibana are creating one-offs (see below) are more of a product announcement use case... to promote a new feature, for example.

Describe the solution you'd like
Either a new component or a special variant of EuiCallOut

Describe alternatives you've considered
At least a couple of bespoke alternatives exist in Kibana today:

Accent-colored callouts (Security team)

Green + illustration panel (Search team)

Another green panel (Platform for Serverless)

Desired timeline
Not urgent, but it would be nice to arrive at a common solution before additional alternatives spout up.

Additional context
🛑 I would consider this blocked until we have an agreed upon design

[JasonStoltz]

The EUI team is totally on board with adding this -- likely as a new component rather than a variant of the existing callout. We just need a designer to help us spec it out.

[ek-so]

@JasonStoltz why do you think it would be better as a new component?

[einatjacoby]

Let's try to test out the pink accent color to make sure users differentiate it from errors since pink and red are a little similar

[JasonStoltz]

@ek-so I actually don't know that I have an opinion here.

There's actually two things going on in this request:

1. Some sort of "Announcement" banner. (Seen above, in pink).

This could be a new component just to make it's usage more explicit, but I also don't have a strong opinion here.

It could even just be a pattern, though I think componentizing it makes it more likely to be adopted.

2. A small sized callout (Seen above, in the second screenshot)

This actually is in use today in a few places thoughout security. I think this would just become a new small-sized variant of the callout.

@MichaelMarcialis @kyrspl @ek-so We could use help from someone on the design team to help spec this out to make this actionable from the development side. We haven't created a net new component or variant for a while, but I believe in the past we've relied on a Google Docs "Spec" template for this.

NOTE: The following links are Elastic Internal
Specs folder: https://drive.google.com/drive/u/1/folders/1DvyiM6k7WZtNqJyXNMnbQQpOq-Ci5jQv
Spec template: https://docs.google.com/document/d/1flg4S4JhFWWyquckgzoYYRxU95dq9aSLhmcI7NKgFNM/edit?tab=t.0#heading=h.28o9qn4prlon

I think the starting point here is on the design side to kick-off a design spec and some Figma designs to figure out how we want these to look. The EUI developers can then work on adding the API details to the spec.

Bonnie from the Security team (I don't have her GH handle to ping her here) would be the person to coordinate with for details.

[JasonStoltz]

FYI, I presented this to the Patterns Working Group. Mostly just heard support for these.

One open question is what color would work best for the announcement banner. Would success work here? Maybe something other than pink, because it looks a bit like red at a glance?

[MichaelMarcialis]

@JasonStoltz: Sorry for missing the discussion in the pattern working group; I had a meeting that I needed to drop for.

If I'm remembering correctly from our meeting with @bfishel last week, next steps were that she was planning on getting in touch with the visual refresh team for details around accent color(s) in the Borealis theme and whether they could be used to represent "new" announcements in these callouts. We should probably wait for that discussion before prioritizing specs and design mockups.

Assuming there is some consensus around color usage, I think we can simply offer this as a color variant of the EUI callout component rather than making an entirely new component. From my perspective, I'm not seeing anything in these examples that would demand a new component (unless we've received new information since last week).

[JasonStoltz]

I think we can simply offer this as a color variant of the EUI callout component rather than making an entirely new component

True. Perhaps just a new color variant and an example in our docs.

[ek-so]

@JasonStoltz @MichaelMarcialis I totally agree that we can start by adding a pink version of callout which (in my opinion) might work fine when used cautiously do draw user attention to a very specific part of the page. I believe we also had a decision taken yesterday regarding pink color.

[ryankeairns]

Support for an illustration would also be helpful (see examples in description).
Today, I presume this entails people ditching callouts altogether and creating a bespoke panel.