feat: add description list element styling

[ashleyryan]

PR Checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)
• If applicable, have a visual design approval

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• clarity.design website / infrastructure changes
• Other... Please describe:

What is the current behavior?

What is the new behavior?

Adds support for cds-list on a dl element, as well as layout styling with dl/dd/dt

Does this PR introduce a breaking change?

• Yes
• No

Other information

This is still in draft, but I wanted to get some early feedback.

A couple of open questions:

• Should this be part of the existing list files/css?
• If it should remain separate, should it use a different attribute than cds-list?

Screenshot:

[astorije]

Clarity, what about a default gap (md? sm? which do you prefer?) between dt+dd pairs? It seems like a decent thing to have by default, and then <dl cds-list="unstyled"> would remove both the gap and the font-weight on the dt

[astorije]

• Should this be part of the existing list files/css?

I think they should be combined, ul/ol/dl kinda belong with each other IMO and I think using cds-list makes sense here.

[mathisscott]

The thing about a horizontal layout is that I would expect it to be like the horizontal layout of forms. Such that the dt and the dd would be left and right, instead of stacked on top of one another.

The trick is (as we've seen with forms) setting it such that they all share a common width for the left (key).

Maybe @coryrylan would have some ideas on how this could be accomplished with a custom property or two. Maybe a shared --horizontal-dd-width that can be set? I'm not sure.

I'm also happy to ditch the horizontal definition list for now too. It's possible that we could add it later if needed.

[ashleyryan]

When I spoke with Scott about it the other day on slack, the horizontal was basically extra credit. Not my call, but I don't think it's necessary to support the horizontal layout you describe - also because it would probably break down if someone had more than one dd or dt next to each other.

[ashleyryan]

Updated screenshot:

[mathisscott]

@colinreedmiller
Does this meet expectations UX-wise? The dl definition list largely follows the specification for forms. We are punting on the horizontal layout of having the dt and dd appear on the same line. Maybe the team can revisit that in the near future to lock down responsive behaviors, etc.?

[colinreedmiller]

@colinreedmiller
Does this meet expectations UX-wise? The dl definition list largely follows the specification for forms. We are punting on the horizontal layout of having the dt and dd appear on the same line. Maybe the team can revisit that in the near future to lock down responsive behaviors, etc.?

I agree with waiting on horizontal, if it is needed we will hear about it and can address adding it based on requirements - seems like an odd case offhand. Same line for dt and dd is not the sort of thing I'd recommend anyway simply because of usability / harder to scan and read. What I see in vertical with space and layouts is good.