Add titleSize prop to EuiStep

[andreadelrio]

Summary

Add titleSize prop to EuiStep to allow for custom title sizes.

Fixes #3324

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in IE11 and Firefox
• Props have proper autodocs
• Added documentation examples
• Added or updated jest tests
  - [ ] Checked for breaking changes and labeled appropriately
  - [ ] Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3340/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3340/

[cchaos]

Great start @andreadelrio! I've removed the strikethrough on some PR checklist items that really should be checked/added since this changes the visuals. For instance, mobile should really be checked.

In the docs example you add, I'd write it like a guideline suggesting particular sizes are better than others.

Other things to consider:

1. Should we add this to the higher component EuiSteps as well so that when passing each step as an object they can change all at once?
2. Do all title sizes really work? Yes we should be flexible, but do some of them just not work? Like if the title is really small. Or when displaying it at the large title size.

[andreadelrio]

In the docs example you add, I'd write it like a guideline suggesting particular sizes are better than others.

@cchaos I actually haven't added an example but I will 🙂

Other things to consider:

1. Should we add this to the higher component EuiSteps as well so that when passing each step as an object they can change all at once?

This did cross my mind. I think it'd be useful but what to do if they set titleSize for both EuiSteps and EuiStep and they're different values. Would the value for EuiSteps override the one for EuiStep then?

2. Do all title sizes really work? Yes we should be flexible, but do some of them just not work? Like if the title is really small. Or when displaying it at the large title size.

I think we could exclude the largest and smallest sizes from the options. For all the other sizes, I would think consumers would adjust the size of the body accordingly.

This led me to another thought, would it make sense to add another size for steps (the circle + number)? I'm thinking of 1 more size. I'd look something like this

[cchaos]

what to do if they set titleSize for both EuiSteps and EuiStep and they're different values. Would the value for EuiSteps override the one for EuiStep then?

The lower level prop, the one on EuiStep would override the overall EuiSteps prop. Giving an example, I want all my steps to be of titleSize = m, however, I want just my last one to be size 'xxs' (for whatever reason). The easiest way to apply this is to apply size m to the whole list, but override the single step inside of the steps object.

This led me to another thought, would it make sense to add another size for steps (the circle + number)?

Would the EuiStep automatically resize the EuiStepNumber based on titleSize or would consumers have to pass that in manually?

[andreadelrio]

Would the EuiStep automatically resize the EuiStepNumber based on titleSize or would consumers have to pass that in manually?

@cchaos I think that for flexibility, consumers would pass it manually. Maybe they want smaller titles and smaller circles but maybe they just want smaller titles. In the use case we had, steps were inside a medium flyout so smaller steps would have been nice but I don't think that will always be the case.

[cchaos]

I think that for flexibility, consumers would pass it manually.

Hmmm, I think this is where flexibility and out-of-the-box good design will clash. I think it's ok for us to make a judgement call that says, "Hey, we are allowing you to change the title size, which allows you to place this at the prominence and hierarchical level that you need, but we're going to make some decisions around how that affects the overall sizing of the elements within."

I think your intuition of needing to adjust the step size with the smaller titles is correct and I would lean towards making it automatic. That way consumers don't also have to think about matching one-to-one since I don't see a very good used case for having mismatched numbers to titles.

[andreadelrio]

I think that for flexibility, consumers would pass it manually.

Hmmm, I think this is where flexibility and out-of-the-box good design will clash. I think it's ok for us to make a judgement call that says, "Hey, we are allowing you to change the title size, which allows you to place this at the prominence and hierarchical level that you need, but we're going to make some decisions around how that affects the overall sizing of the elements within."

I think your intuition of needing to adjust the step size with the smaller titles is correct and I would lean towards making it automatic. That way consumers don't also have to think about matching one-to-one since I don't see a very good used case for having mismatched numbers to titles.

@cchaos I think that finding the right balance between flexibility and good design can be tricky. I do see how it'd make sense for us to ensure good out-of-the-box design with smaller titles so I went in this direction: title sizes (xs, s - default and m). Title at size xs will autogenerate smaller steps circles. I added the example too. See:

Adjusted icons for status when title is xs too:

Note: there's a couple of TS doubts that came up that I'll try to clear up with @thompsongl tomorrow. Mainly I wanted to name the prop the same for EuiSteps and EuiStep but couldn't figure out how to do that here so went with parentTitleSize and titleSize instead.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3340/

[andreadelrio]

@cchaos I updated the example to get rid of any mention of parentTitleSize and I also reverted the issue that align-items: center; was causing

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3340/

[cchaos]

Awesome, so close! Just a few more comments, but really just nit-picky at this point.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3340/

[cchaos]

🎉 Fantastic! LGTM! I would just make sure to do a quick pass in IE, Firefox, and Safari to make sure they're still good as well.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3340/