Update description list component

[tonge495]

Hi all,

Hope you are doing well!

I have run into a few scenarios recently for various projects where I had to use the description list component (see screenshots below):

Just wondering, is there an opportunity for the Paste team to update the component moving forward so that it also accommodates for a horizontal layout? The vertical layout has not always worked for every use case and in some cases, it is helpful to have a horizontal layout.

cc: @HartiganHM

[serifluous]

Hey @tonge495 ! Can you share what the intended design you're proposing is? Are you looking to have your team build what you've shared in the screenshot, or something else?

[serifluous]

Sure, could you sign up for office hours? https://docs.google.com/spreadsheets/d/10vD91zdwr9hjgDOV3HSGnoC0LgvYw-thmn3X_kvW0xk/edit#gid=664218049

I'm not seeing a horizontally-aligned description list in the One Admin design you shared, so I think I might still be misunderstanding.

[serifluous]

Sorry, I think I know where I was getting confused. Is this what you were looking for? https://codesandbox.io/s/youthful-volhard-fvmm9z?file=/src/index.tsx

[tonge495]

Yes that's right! Did you have any thoughts around potentially offering this for the Description List component?

[serifluous]

It's doable with the component right now by wrapping the DescriptionListSets with the horizontal Stack component like I shared in the codesandbox.

Or by using Grid if you wanted to align all the Description Lists you have on a page into uniform columns (which we'd recommend): https://paste.twilio.design/components/grid

We likely won't directly build a horizontal variant into Description List since it's a little more straightforward to do with Stack or Grid. It could be something we add to our Figma library, though, if that's what you're looking for, especially since it's part of our Object Details pattern: https://paste.twilio.design/patterns/object-details

[tonge495]

Got it thank you for the resources!

That would be great if you are able to add it to the Figma library eventually, especially since I think we may be using it again in the future. If the code is not going to be updated, would it be possible to include what you shared on the Paste documentation (https://paste.twilio.design/components/description-list)?

[serifluous]

Yep, ticketed the work to add it to Figma here: https://issues.corp.twilio.com/browse/DSYS-2871

Description List also hasn't gone through a peer review yet, so there are definitely improvements overall we could make to the docs. We'll take it into account when we get to the peer review. Thanks!

[tonge495]

Awesome, much appreciated!

Also, sorry if I wasn't super clear in my initial responses, remote communications can be a little confusing sometimes.  😅 Glad we were able to get things squared away though!

[serifluous]

No worries! Remote communication is definitely tough. I got a little confusing on my end for sure and was conflating Description List & Description List Set.