docs(contained-list): add usage examples

[janhassel]

Contributes to #12330

Adds a "Usage Examples" story showcasing the flexibility of the "Contained List" component based on what @laurenmrice shared in #12330.

Changelog

New

• Add "Usage Examples" story to "Contained List"

[netlify]

✅ Deploy Preview for carbon-components-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	26663b8
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/6375fc52d90e7b0008d5d56c
😎 Deploy Preview	https://deploy-preview-12621--carbon-components-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	26663b8
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/6375fc52d2f2190008d40eb3
😎 Deploy Preview	https://deploy-preview-12621--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[laurenmrice]

Thanks Jan! This is looking great. ⭐️ Just a couple of comments:

• We are not going to support the Medium(40px) size, so we can take that one out.
• For the overflow menu hover states, can you make the hover state background go on top of the divider rules? This seems to be working right in the “With Actions” story https://deploy-preview-12621--carbon-components-react.netlify.app/?path=/story/components-containedlist--with-actions.
• For the usage example with the diagonal arrow/icon button in the header, instead could we just show a ghost icon button with an add icon? I know that this is a use case in the wild that people currently need so I would like to show that as another vetted example.

[janhassel]

@laurenmrice

We are not going to support the Medium(40px) size, so we can take that one out.

Could you fill me in on why the md would be skipped? I honestly think it'd be one of the most used sizes as it matches nearby input fields. Also from a consumer perspective if a component supports sm and lg it would catch me off guard when passing in md would not work as expected.

or the overflow menu hover states, can you make the hover state background go on top of the divider rules?

They are, actually. Just looked into it and the OverflowMenu button uses background-hover which has 12% opacity. The ghost button instead uses layer-hover which has 100% opacity. You can see the OverflowMenu button overlays the divider rules as they appear slightly darker.

For the usage example with the diagonal arrow/icon button in the header, instead could we just show a ghost icon button with an add icon?

Done ✅

[laurenmrice]

@janhassel

Medium 40px size:

• We were thinking about not adding the medium 40px size at this time because we have not seen a specific use case for it yet and thought the large 48px size would suffice as a middle ground between the small and extra large sizes. It would also be one less size to maintain in code and in various design tools. If you feel that people would benefit from also using this size we could add it.

Overflow menu button hover

• Oh okay, thanks for clarifying. I believe this is a bug in our own code and the overflow menu hover should be updated to use $layer-hover instead. I will make a separate issue for this problem. One of our devs can pick it up and the Contained list will inherit the changes eventually.

Thank you!

[tw15egan]

LGTM 👍 ✅

[janhassel]

@laurenmrice If it would be one end of the size spectrum I'd feel more comfortable dropping it but leaving out a size step would be a mistake imo. So yeah, I recommend offering the md/40px variant.

[laurenmrice]

Ok, let's add it! @janhassel

[janhassel]

Great! 👍

In this case I believe the PR is ready to be merged.
@tay1orjones

[laurenmrice]

Looks good to me! Thanks Jan. ✅