Why there is a Steps component?

[fsmeier]

Heyhey,

Why there is a steps component? Couldnt this be easily done just by adding pure css? When using markdown I see an ul-list element used for a normal list and ol-element for an ordered list. No need of an extra component or do I overlook some use-cases here?

All the best,
Florian

[delucis]

The <Steps> component adds pure CSS and renders a normal ordered list! Check out the HTML output:

The reason for the component is to make it easy to apply this styling without having it apply to every ordered list on a site, which wouldn’t be appropriate as these styles are quite opinionated and prominent. For example, imagine you have a page and you write something like:

Here are the top 5 reasons people choose to use this tool:

1. It’s easier to use than X
2. Lightweight client-side code
3. Accessible UI
4. etc.

Applying the chunky step styles in this case would be very weird for a quick, to the point minimal list.

Instead <Steps> makes it easy to wrap any existing ordered list to attach those styles. (And as you see in the HTML output, it has no output of its own — it just applies a class to the <ol>.)