elastic / elastic/eui

[EuiCallout] Button alignment and iconography concerns

Open
#9,822 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

**Requestor**

@MichaelMarcialis

**Problem Statement**

The updated components looks wonderful. Well done, all. There were just two concerns with the changes that I wanted to document here:

**Button positioning:** In a [recent Slack thread](https://elastic.slack.com/archives/C096R3YKG0K/p1784223637102869), @kyrspl mentioned desiring for the `wide` variant of the component to support buttons that are positioned at the bottom of the callout, below the text. This is not something that is currently supported, as button positioning is entirely determined by whether the `wide` prop is used or not. Personally, I like having both position options available, but I don't necessarily feel their usage should be tied to the callout width.

**Warning icon:** I also left [one small comment](https://www.figma.com/design/FHys7gLzyvD1gc9DrJM6D8?node-id=20772-4679#1813025636) in the Figma library regarding the two-color warning icon, and the potential it has for introducing inconsistency and/or redundancy in certain interfaces.

In my screenshot below, I'm showing the CPS button in the global header and part of the CPS popover that is revealed when interacting with the button. The button itself has a warning state to indicate issues like "no projects being searched". In this state, I change the button to a yellow color and swap icons for `warning`.

In this warning state, the subsequent popover includes a warning callout, explaining the issue. With the previous callout styles, I was able to omit the icon entirely, which I did to avoid showing the same icon both in the button and popover. With the new callout update, I'm no longer given the choice to omit the icon. Because of this, two of the same icon are being shown in close proximity (which isn't really desirable).

In addition to not being able to remove the callout icon, the `warning` icon within a callout is also styled differently than everywhere else this icon appears. It uses two colors (yellow and brown), which visually differentiates it from all other usages in Kibana currently. Are we worried about this inconsistency?

Image

**Proposed Solution**

**Button positioning:** I think the choice to have the buttons right positioned vs. bottom positioned needs to be a designer decision. For example, there are some cases where having the button right positioned in a narrow callout would be useful. And as @kyrspl said, there are likely scenarios where a designer would prefer a wide callout having bottom positioned buttons. Would it be possible to decouple the button position from the callout width?

**Warning icon:** Would it be possible to consider using a single color icon for warning and restore the ability to include or exclude an icon from the component?

**Use Case**

Definitely in the global header chrome CPS button. Likely elsewhere too.

**Value / Impact**

Gives designers the power to choose button positioned based on the circumstances. Reduces visual redundancy and inconsistency with other warning icon usages.

**Urgency**

Not urgent; nice to have.

**Do alternatives or workarounds exist?**

The only workaround I'm aware of would be inline styling.

Contributor guide

Open the contributing guide

Research direction

Start at EuiCallout, reviewing the existing wide-driven button positioning and warning-icon behavior described in the issue. Confirm the desired API and visual rules with maintainers; done means button placement can be chosen independently and warning icons can be omitted or use the agreed single-color treatment.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
design, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.