[EuiSteps] Add more flexibility/customizability

[mdefazio]

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

[anuragxxd]

I am working on this.

[cchaos]

Hey @git-anurag-hub , thanks for the interest in this one, but it's going to need more design thought on how best to handle these requests. I'd recommend grabbing from our list of good-first-issues.

[anuragxxd]

Okay np @cchaos

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[cchaos]

I'll keep this one open, but it's a more long-term goal.

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.