Design 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).

Teams in Kibana are creating one-offs (see below) that 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
This could be the accent colored callout and/or built-in support for a background graphic.

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 sprout up.

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

from Kyriakos's comment below
@einatjacoby has put together a collection of components used to announce features/products. The end goal would be to document as a pattern.

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

[MichaelMarcialis]

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.

If the situation demands more robust content (such as the inclusion of an illustration), perhaps an EuiEmptyPrompt would be a more appropriate component (versus a bespoke panel). https://eui.elastic.co/#/display/empty-prompt

[kyrspl]

Here's some additional context

@einatjacoby has put together a collection of components used to announce features/products. The end goal would be to document as a pattern.

[einatjacoby]

thanks @kyrspl !
I only now became aware that this discussion is about announcements in general and not just the pink ones-
should the link to the pattern doc be in the original description of this issue? cc @ryankeairns

[kyrspl]

@simosilvestri, I noticed you're testing a few design proposals for the integrations page.

Is the banner (top right) a new addition? If yes, it would be worth to add it to the requirements list for the announcement banner the team is working on.

[simosilvestri]

@kyrspl This components has been recently added by the security team. It would be good to check the engagement on it or understand if it's a temporary "What's new" banner and when can we change it to a primary button?

[ryankeairns]

✅ The accent colored EuiCallOut has been merged.

As a follow up, we could make some changes to EuiEmptyPrompt to get close to the green designs seen in the description.
That said, the two green examples in the description are no longer in use.

If we proceed, I recommend exploring the following component changes:

1. Make the horizontal layout work without an image (change row-reverse)
2. Remove or decrease content block padding
3. Change max-inline-size of content block
4. Decrease or provide option for less padding in the footer

Note: the green examples above have right-aligned buttons, but that goes against our current button guidelines, so I have not proposed that change.

That gets us to something like...

Provide a pattern for adding background images:

• Use CSS for background image

Adding a background image is rather trivial with CSS. Below is an example taken from the Search Labs image above.
While this uses an EuiPanel, EuiCallOut literally produces a stylized EuiPanel under the hood.

...
  const backgroundImagePath = http.basePath.prepend(
    '/plugins/enterpriseSearch/assets/images/search_labs_banner_background.svg'
  );
  return (
    <EuiPanel
      hasBorder
      hasShadow
      color="accentSecondary"
      css={css`
        background-image: url(${backgroundImagePath});
        background-repeat: no-repeat;
        background-size: cover;
      `}
    >
...

[ryankeairns]

Note: the green examples above have right-aligned buttons, but that goes against our current button guidelines, so I have not proposed that change.
I stand corrected, it is visible at the very bottom of the Search > Overview page

• AccentSecondary callout + success buttons
  

Also stumbled upon the other green alternative though not in Cloud but Kibana: Security > Get started

• standard success callout; follows proposed pattern for image placement (see prev comment)
  

[ryankeairns]

Moving to the backlog to plan and work the second part (below). Also consider in conjunction with possible redesign of callouts https://github.com/elastic/platform-ux-team/issues/640

As a follow up, we could make some changes to EuiEmptyPrompt to get close to the green designs seen in the description.
That said, the two green examples in the description are no longer in use.

If we proceed, I recommend exploring the following component changes:

1. Make the horizontal layout work without an image (change row-reverse)
2. Remove or decrease content block padding
3. Change max-inline-size of content block
4. Decrease or provide option for less padding in the footer