[Steps] Numberless horizontal steps

[dborodyansky]

We have found a need for nested and dynamically rearranging steps for data ingestion onboarding. When presenting nested steps it would be preferred to remove the numbers from the primary set to decrease the scale and compliment sub steps. Figma EUI component variants are produced and available here.

Design

Usage

Imagining this could become a titleSize prop if considered similar to vertical implementation.

<EuiStepsHorizontal titleSize="xs" steps={steps} />

Alternatively maybe something like a [numberless] prop could be considered for vertical and horizontal components, but there isn't an anticipated need for both.

Guidelines

To be used when reliance on numbers is absent and does not add value. When multiple sets of instructions are present on the screen and numbering becomes conflicting or requires additional logic.

Accessibility concerns

Looking for input. ARIA label, etc.

[cchaos]

Thanks @dborodyansky! I've checked through the Figma branch and approved. Also, in Figma, I updated the lower level Step component to contain sizes. This will likely be the approach necessary for updating the component.

@miukimiu Can you work with Dmitry to finalize the spec?

[miukimiu]

@dborodyansky and @cchaos,

I create a spec doc that can be found here: https://docs.google.com/document/d/1eOlsbT1RZXq1dIOFz0TUhbUkvI5vge1GSrKrT6ctTs0/edit?usp=sharing

This way we can discuss better what the props are going to be.

[JasonStoltz]

Hello 👋 . I just wanted to follow up on this thread and let you know that we did end up adding a smaller size option to the horizontal steps component. However, after some discussion, due to accessibility concerns with the numberless format, we opted to go for a smaller-sized version of horizontal steps, but still numbered. You can check it out here: #6850.