feat(expressive-list-container): adds expressive list container component

[aledavila]

Closes #1083

This creates the ExpressiveListContainer which is seperate from the ExpressiveList due to differing uses and styles. This component allows a user to insert whatever they want into the component.

Changelog

New

• Added ExpressiveListContainer

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/carbon-design-system/gatsby-theme-carbon/5XxenRzarooZd1PieMq2ig2Z9DXt
✅ Preview: https://gatsby-theme-carbon-git-fork-aledav-7fc58f-carbon-design-system.vercel.app

[DianaStanciulescu]

making this a separate component makes perfect sense. the only tricky thing here is forcing the space between the rule and whatever comes after to stay at 24px, even if the actual component may have a larger or smaller top spacer.

[alisonjoseph]

I think I'm still confused on why these are separate components, but maybe I'm missing something. 😅

The spacing differences will need to be accounted for regardless, there is nothing stopping someone from just placing text in this component, or adding a child component to the other component. I know @aledavila is out this week, and then I'm out next week, so we won't be able to sync up on this until the new year.

Maybe the three of us can jump on a quick call after the holiday to talk through it. 😄

[DianaStanciulescu]

hi! based on our conversation:

• try to see if the top margin for the first child can be 24px, when the child is text, card, image, etc. (maybe try minus 24)
• the top margin for the rule is 48px
• the titles should left align to the rest of the text on the page - so 16px to the right

[sstrubberg]

@aledavila what's your plan with this PR knowing that we can't finish it until v11?

[alisonjoseph]

What is the blocker for v11? nested grid support? I think we could still merge, with a note that it won't support nested grids out of the box until v11. Someone who needed it could still write custom styles (like we've done on many sites) to get it to work in the meantime. Or they could use it without nested grids.

[aledavila]

@alisonjoseph yes that is true I guess we can merge it since the container does work. I'll make a note of its use

[alisonjoseph]

Is this ready to merge, or do we need additional examples added to the page? Possibly a note around nested grid support needing to get added custom, or wait for v11?

[aledavila]

@alisonjoseph Yea I’ll put the disclaimer for this real quick and it’s fine to merge. Do you think something along the lines of saying this doesn’t work with component that are built using the grid and requires additional custom styles for it ?

[alisonjoseph]

Something around nested grid support will be supported in v11, currently you will need to add custom styles to nest grids?

[alisonjoseph]

@aledavila status of this? Can we add that message and get this merged?

[aledavila]

@alisonjoseph yes ready for review. Please check if that message makes sense.

[alisonjoseph]

Message is perfect, I just updated it to use the inline notification instead. 😄

[aledavila]

@alisonjoseph oh that was a good idea. I'll cut a version release for all the updates this afternoon.