Issue with disclosure heading

[PoojMenon]

Wondering if there's a known issue with the disclosure headings?

https://paste.twilio.design/components/disclosure/#composition-notes

The alignment within the heading seems to be off.

[richbachman]

Hi @PoojMenon, thanks for catching this. It's probably an error in the example. We'll take a look and get it fixed.

[richbachman]

PR is up to fix this example: #1471

[andoyle]

Hey @richbachman I'm having a different issue with Disclosure headings (let me know if I should open another discussion).

I used to be able to use Flexbox within a Disclosure heading to separate information using space-between in Box on its own or within Mediabody.
Quick mock up using the prototype kit: https://wr7s7.sse.codesandbox.io/

I updated to the latest version of Paste lately on the prototype kit and Flex isn't working for me: https://6jzih.sse.codesandbox.io/usage

Is this the correct behavior now for Disclosure headings or is there an issue somewhere?

[andoyle]

Any suggestions to what I can try with my code to make it work for now? I've tried a few workarounds but nothing working for me.

I'm only working on a proof of concept at this stage to see if I can move this page over to Paste until we get some time to completely overhaul it.

[SiTaggart]

Sorry @andoyle, this has slipped through the cracks.

Let me circle with the team, but my gut is telling me we should put it back to the way it originally was so you don't need to do anything at all. I'll either get a fix out or a solution by the end of the day.

Thanks for being patient 🙏

[andoyle]

No worries 😄

[richbachman]

Hi @andoyle

Took a look at this more, and in order accommodate for all of the different types of elements that could be in a DisclosureHeading we feel its best to maintain the changes we made in our last fix. Unfortunately that means you'll need to make a small change in your codesandbox. You'll need to wrap the MediaObject in a Box with a 100% width. This allows the MediaObject to actually fill the entire space. Something like:

<Box width="100%">
    <MediaObject ... />
</Box>

I forked your codesandbox and added the fix: https://codesandbox.io/s/strange-flower-w9l9h?file=/pages/index.js

Apologize for the issue and the extra leg work required on this one.

[andoyle]

Ah, good auld Box, I should've known! That's working now. Thanks folks for looking into / helping me with this 👍