[EuiDescriptionList] New gutterSize prop

[breehall]

Summary

Fixes #5834

Creates the gutterSize prop for EuiDescriptionList which is responsible for adjusting vertical spacing between Description List elements. gutterSize accepts the t-shirt sizes s and m (default) to add a top margin to Description List elements. When no gutterSize is provided, size m is used by default.

Small gutterSize

---

Medium gutterSize

Checklist

• Checked in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• Props have proper autodocs and playground toggles
• Added documentation
• Checked Code Sandbox works for any docs examples
• Added or updated jest and cypress 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_6175/

[kibanamachine]

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

[kibanamachine]

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

[thompsongl]

LGTM!
Just one suggestion

[cee-chen]

2 thoughts:

1. Should gutterSize also affect the left/right padding on type="column" align="center" description lists?
   

2. Should compressed DescriptionLists default to a gutterSize of s instead of m? If not / if we're OK with making people manually do compressed gutterSize="s", I think we should document gutterSize in the Centered and compressed section instead of creating a new section for it. It feels like it generally belongs in the concept of "further tailor[ing] the look of a description list" and does not need its own section.

PR otherwise looks great to me (esp tests!) CC @miukimiu for thoughts on the above

[breehall]

Should gutterSize also affect the left/right padding on type="column" align="center" description lists?

I don't believe so because the prop is intended to be for vertical spacing only, but may I ask why it should?

Should compressed DescriptionLists default to a gutterSize of s instead of m?

Possibly, but I think it would affect current iterations of DescriptionList. I think I'd be ok with allowing consumers to make that decision on their own instead of us making it for them. But I'll wait for Elizabet to chime in.

[kibanamachine]

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

[cee-chen]

I don't believe so because the prop is intended to be for vertical spacing only, but may I ask why it should?

That's not my personal intepretation of "gutter" - when I read "gutterSize", I would assume it applies the sizing to both horizontal and vertical gutters, not just vertical. That's how EuiFlexGroup works, for example. If we want to be extremely specific and only apply this change to vertical gutters, then we should name the prop accordingly, e.g. rowGutterSize.

I think I'd be ok with allowing consumers to make that decision on their own instead of us making it for them.

Same, but in that case, let's combine the Centered and compressed section/example with the new gutter example and name it something more generic Customizing appearance. It might also make sense to add toggles for all the props being demo'd in that section (compressed, align, and gutterSize).

[breehall]

Ok, gotcha. So as far as current take aways:

1. Update gutterSize prop name to be more specific (like `rowGutterSize)
2. Combine DescriptionList appearance modifiers into one example

[cee-chen]

I'd hang tight on 1. to see if @miukimiu thinks we're OK to apply the size change to the horizontal spacing as well as vertical, but you should be good to move ahead on 2.!

[breehall]

I updated the Centered & Compressed example to be Customizing Appearance. I've also added toggles for the align, compressed, and gutterSize props.

[kibanamachine]

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

[cee-chen]

🎉 🎉 Love the UX for the new docs!! I'll open a follow-up issue for @miukimiu to consider when she gets back about gutterSize and the horizontal gutter.