In our recent refresh to Index Lifecycle Management, we have a need to present options in a vertical timeline-like format to indicate the life cycle of data. Our design includes a set of icons that tie together vertically with a line, beside a set of panels that house the various options for that step. I suppose semantically speaking, this is closer to EuiSteps, but visually we felt EuiComment got us closer to what we wanted.

So admittedly, I'm not sure which component this request should target. It seems EuiComment is closest. Below are the list of requirements/requests:

1. Ability to have the icon self-centering beside the header portion of the comment block. We have adjusted the height and it seems the icon aligns to the top of the comment block
2. Ability to choose the icon type (large, update,...) separate from the comment block styling (currently choosing update styles the corresponding block differently)
3. Ability to customize the margin size between blocks. (Seems better to do it in the component as the line connecting the icons would likely need to include this when calculating the height).

Image reference (from elastic/kibana#90291):

Annotated version:

Again, perhaps it makes more sense to expand on the EuiSteps component to allow for these options as that is more aligned to our use case. And we keep EuiComment more strict to a comment/activity feed.

If we use the EuiSteps component (unsure if the above requests would still be valid or solve themselves):

1. Ability to customize icon (and size perhaps?)
2. Ability to pass a set of elements instead of just a string to the title area
3. It seems combining the title and content into a wrapping panel might require some reworking of the rendered structure. So I'm open to tweaking the design to accommodate or finding a compromise if we feel this is the better component to use for our case.

And as a side note, the EuiComment component feels less like Amsterdam than other components (rather, the difference between v7 and Amsterdam is less noticeable—namely the use of borders around a panel/block).

Tagging for awareness: elastic/kibana#88671