EuiSteps unordered variant
JoseLuisGJ opened this issue · 6 comments
Describe the solution you'd like
I'd like to get a EuiSteps variant where the step number is not required nor displayed performing like a unordered list or unordered step. This approach will fit better with some guided steps that aims for letting users go back and forth between different steps on a less prescriptive proposal.
Describe alternatives you've considered
Alternatively the step prop should be optional and not having a default value to archive this result. But we should also manage the size of the circle somehow for getting a more balanced composition.
Desired timeline
During Jun 2024 ? It'll be used for 8.15 release
Additional context
- I see that the size of the step
numbercircle container is tight to thetitleSizeprop. Should we have a way for managing with more precision the size of this circle container as a part of this request? - The proposed designs are using a circle container of 12 x 12 pixels whereas the smallest
titleSize = xsis 24px x 24px - Should we just let use this unordered variant in
xsorxxssizes? For big sizes might end up with a none balanced composition. - I guess that icons should not be allowed within the circle content with this variant due to the container is 12 x 12 and the icons will be smaller than that minim size for icons.
Just making this connection here briefly. We had a proposal for a smaller sized step icons that we considered previously: #6850
That actually proposed "xxs" icons which would inherently be numberless.
This Figma design outlined the proposal: https://www.figma.com/design/RzfYLj2xmH9K7gQtbSKygn/branch/tWvdxSqgrul0pDPHy6oEC0/Elastic-UI?node-id=13460-357&t=7vQOdJNsYG8Gjkew-0
For simplicity, we could just introduce an "xxs" size which is inherently numberless. That would avoid the need to introduce an additional prop to toggle the numberless format or not (but not prevent us from adding it in the future to larger sizes)
Note that we should contact the fleet team about updating their code at x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/horizontal_page_steps.tsx after we've implemented this feature.
Issue for the fleet team:
elastic/kibana#184522
@JoseLuisGJ For this issue, we discussed only adding a new "xxs" option to steps, which would use a numberless format as detailed in this Figma file: https://www.figma.com/design/RzfYLj2xmH9K7gQtbSKygn/branch/tWvdxSqgrul0pDPHy6oEC0/Elastic-UI?node-id=13460-357&t=38gHxrIJyHjPqpgX-0
Would this be sufficient to address your needs?
Looks good to me. It will cover our needs so far and overall makes sense to get this special version with the smallest size we can mange. Thanks for addressing this.
@JoseLuisGJ We are planning to include this in next week's release. Will that give you enough time to work it into 8.15?
It will @JasonStoltz , thanks again.