Eui: EuiSteps - Support custom badges

[stephmilovic]

I've been asked to implement the below design on the SIEM team for Case Management. I'd like to use the EuiSteps component combined with the EuiAvatar component to achieve this. However, I'll need to be able to have a custom badge instead of the numbered step. Can the EUI team please add support for JSX elements being passed as custom badges?

[myasonik]

Just throwing in something to consider: there are some a11y improvements I'd like to make the current EuiSteps component that would be slightly at odds with this request.

Currently, EuiSteps renders as a bunch of <div> tags. I'd like it to render as an <ol> with aria-current="step" set on the currently active step. (I should probably open a ticket for this but haven't done a deep dive into this to know if I'm missing anything.)

The problem with supporting both of those things however is that the aria-current="step" semantics don't jive with the threaded message list at all.

I'm not sure what the best way forward is but just wanted to throw this out there before any dev work started.

[snide]

Just out of curiosity @stephmilovic. Would you rather have some sort of EuiComment and EuiCommentList component instead? Just looking at the layout presented, I don't know that warping EuiSteps for this is worth it? Seems like it might be better as its own reusable thing?

What's your timeline? If we whipped up the design code quickly, would you maybe have time to handle the interface side of something like that?

[stephmilovic]

Yes @snide I think a EuiComment component would be better than extending steps. I need this for 7.7 so I've already started to program it out. I would be happy to contribute to the Eui repo once its done. I'm modeling it after EuiSteps, just started last night: https://github.com/stephmilovic/kibana/blob/case-siem-ui-v2/x-pack/legacy/plugins/siem/public/pages/case/components/user_action_tree/index.tsx

[cchaos]

@stephmilovic I agree with @snide that it seems forcing EuiStep into this configuration may not be the best path forward. And as I thought about it some more and looked at the screen you are trying to build, I think your solution can easily be created simply by using the EUI layout components.

I double-checked my thinking on that and came up with this simple solution https://codesandbox.io/s/working-eui-fo43n?fontsize=14&hidenavigation=1&theme=dark.

EuiStep also comes with some very specific and non-overridable accessibility concerns like text that is read by the screenreader to make sense of the detached numbering. This will mostly be non-sensical to screenreader users of your layout.

I also agree with @snide that this (a comment system) could be very useful to other plugins. We're currently working on a Markdown component (#1491) that could be used as part of the comments component.

[andreadelrio]

Just saw this on the Weekly Observability Design Update. Made me wonder if aside from EuiComment we want to consider adding support for custom badges in EuiSteps.

[jen-huang]

For the use case @andreadelrio described above, it would be great to allow EuiSteps to specify a type of identifier for ordering, similar to (or matching with) HTML <ol> type attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol#Attributes

cc @hbharding

[snide]

Closing this since the majority of the asks are now available with EuiComment. Following soon from @andreadelrio will be EuiCommentList as a higher order component, but whats out is usable if you're in a hurry.

https://elastic.github.io/eui/#/display/comment

[snide]

EuiCommentList is now available as well.

https://elastic.github.io/eui/#/display/comment-list