From 8dcf7050d31eb564c97a4c68857f9733446bcc49 Mon Sep 17 00:00:00 2001
From: TheSisb <shadiisber@gmail.com>
Date: Tue, 25 May 2021 08:20:17 -1000
Subject: [PATCH] fix(disclosure): remove wrapping box around heading content

---
 .changeset/beige-icons-think.md               |  6 ++++
 .../disclosure/src/DisclosureHeading.tsx      |  4 +--
 .../disclosure/stories/index.stories.tsx      | 29 +++++++++++++++++++
 3 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/beige-icons-think.md

diff --git a/.changeset/beige-icons-think.md b/.changeset/beige-icons-think.md
new file mode 100644
index 0000000000..518e6dddbc
--- /dev/null
+++ b/.changeset/beige-icons-think.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/disclosure': patch
+'@twilio-paste/core': patch
+---
+
+DisclosureHeading now gracefully handles children and doesn't impose flex behavior. This makes it easier to pass MediaObjects and Truncate as children.
diff --git a/packages/paste-core/components/disclosure/src/DisclosureHeading.tsx b/packages/paste-core/components/disclosure/src/DisclosureHeading.tsx
index 4277537838..5f3ff5a465 100644
--- a/packages/paste-core/components/disclosure/src/DisclosureHeading.tsx
+++ b/packages/paste-core/components/disclosure/src/DisclosureHeading.tsx
@@ -66,9 +66,7 @@ const StyledDisclosureHeading = React.forwardRef<HTMLDivElement, StyledDisclosur
               size={IconSizeFromHeading[variant] || 'sizeIcon20'}
             />
           </Box>
-          <Box display="flex" flexGrow={1} minWidth="0px">
-            {children}
-          </Box>
+          {children}
         </Box>
       </Heading>
     );
diff --git a/packages/paste-core/components/disclosure/stories/index.stories.tsx b/packages/paste-core/components/disclosure/stories/index.stories.tsx
index b034a5fe3d..fc05af372b 100644
--- a/packages/paste-core/components/disclosure/stories/index.stories.tsx
+++ b/packages/paste-core/components/disclosure/stories/index.stories.tsx
@@ -3,6 +3,8 @@ import {Box} from '@twilio-paste/box';
 import {Stack} from '@twilio-paste/stack';
 import {Truncate} from '@twilio-paste/truncate';
 import {Paragraph} from '@twilio-paste/paragraph';
+import {ProductInternetOfThingsIcon} from '@twilio-paste/icons/esm/ProductInternetOfThingsIcon';
+import {MediaObject, MediaBody, MediaFigure} from '@twilio-paste/media-object';
 import {Disclosure, DisclosureContent, DisclosureHeading, useDisclosureState} from '../src';
 import type {DisclosureHeadingProps, DisclosureInitialState, DisclosureStateReturn, DisclosureVariants} from '../src';
 
@@ -178,6 +180,33 @@ TruncatedHeader.story = {
   name: 'Truncated Header',
 };
 
+export const MediaObjectHeading = (): React.ReactNode => {
+  return (
+    <Disclosure variant="contained">
+      <DisclosureHeading as="h2" variant="heading30">
+        <Box width="100%">
+          <MediaObject verticalAlign="center">
+            <MediaFigure spacing="space10">
+              <ProductInternetOfThingsIcon decorative={false} title="phone numbers" size="sizeIcon40" />
+            </MediaFigure>
+            <MediaBody as="div">
+              <Box display="flex" justifyContent="space-between" flexWrap="wrap">
+                <Box>Internet of Things</Box>
+                <Box>$808</Box>
+              </Box>
+            </MediaBody>
+          </MediaObject>
+        </Box>
+      </DisclosureHeading>
+      <DisclosureContent>It works!</DisclosureContent>
+    </Disclosure>
+  );
+};
+
+MediaObjectHeading.story = {
+  name: 'MediaObject in Heading',
+};
+
 export const ContainedHeadingVariant10 = (): React.ReactNode => {
   return <ExampleDisclosures headingVariant="heading10" variant="contained" />;
 };