fix(disclosure): remove wrapping box around heading content (#1487)

twilio-labs · May 25, 2021 · 79a9dfb · 79a9dfb
1 parent 05dbbb9
commit 79a9dfb
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 3 deletions.
diff --git a/.changeset/beige-icons-think.md 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
@@ -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
@@ -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" />;
 };