Disclosure component with transparent background

[PabloFNK]

I have used today for the first time the Disclosure component and I see it has a white background that can't be overriden. Should we allow to override it at least to be transparent (or be transparent by default)?

I am using the Disclosure on a section in which the background is not white and it looks very weird to me.

Fake example:

[serifluous]

Hi @PabloFNK Can you share a screenshot of the full page where you're trying to use this Disclosure? (you can share in Slack if it's confidential)

You're right in that it is odd that the Disclosure Content doesn't have a background, while the Disclosure Heading does. We'll want to decide whether removing the white background from the Heading (which will be a visual breaking change) or adding a white background to the Content is the right call here.

[PabloFNK]

I hope you have access to this link: https://twilio.enterprise.slack.com/files/W011DGD6RPC/F01SUDXPAEP/screenshot_2021-03-30_at_16.29.23.png

[serifluous]

Doesn't work for me, unfortunately. Can you DM it to me (sali) or drop it in #help-design-system?

Thanks for sharing! We'll follow up soon with a decision.

[corinne-nagel]

Hey @PabloFNK , sorry for the late response on this one! I'm checking in with the team on a possible direction and will get back to you EOD.

[corinne-nagel]

Hey @PabloFNK ! I chatted with the team and we decided to add a fill to the content as well so that it is cohesive. So the Heading and Content will be color-background-body (which also translates well for other themes in the future). @gloriliale will be working on adding this to the component and will share an update when this is changed.

We also decided to not make the background transparent to ensure that wherever the disclosure is located (on a gray background, for example) that it has enough color contrast regardless of location. Hope this helps!

[SiTaggart]

👋🏼 @PabloFNK

A fix for this is about to go out in Paste Core v9.3.1. Should be in NPM any time this afternoon.