fix(media-object): add min-width to body

When content in the media object body is very long, the content will
breakout of it's container if you don't set min-width:0 on the flex
child.

Also update the snapshots

packages/paste-core/layout/media-object/__tests__/__snapshots__/index.spec.tsx.snap

@@ -17,10 +17,10 @@ exports[`MediaBody should render 1`] = `
 
 .emotion-0 {
   box-sizing: border-box;
-  min-width: 0;
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
+  min-width: 0;
 }
 
 <div
@@ -51,10 +51,10 @@ exports[`MediaBody should render as any HTML element 1`] = `
 
 .emotion-0 {
   box-sizing: border-box;
-  min-width: 0;
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
+  min-width: 0;
 }
 
 <div
@@ -85,7 +85,6 @@ exports[`MediaFigure should render 1`] = `
 
 .emotion-0 {
   box-sizing: border-box;
-  min-width: 0;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -125,7 +124,6 @@ exports[`MediaFigure should render as any HTML element 1`] = `
 
 .emotion-0 {
   box-sizing: border-box;
-  min-width: 0;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -165,7 +163,6 @@ exports[`MediaFigure should render with spacing on the left for end alignment 1`
 
 .emotion-0 {
   box-sizing: border-box;
-  min-width: 0;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -205,7 +202,6 @@ exports[`MediaFigure should render with spacing on the right for default alignme
 
 .emotion-0 {
   box-sizing: border-box;
-  min-width: 0;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -245,7 +241,6 @@ exports[`MediaObject should render 1`] = `
 
 .emotion-0 {
   box-sizing: border-box;
-  min-width: 0;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -285,7 +280,6 @@ exports[`MediaObject should render as another HTML element 1`] = `
 
 .emotion-0 {
   box-sizing: border-box;
-  min-width: 0;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -325,7 +319,6 @@ exports[`MediaObject should render bottom margin 1`] = `
 
 .emotion-0 {
   box-sizing: border-box;
-  min-width: 0;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -366,7 +359,6 @@ exports[`MediaObject should render top margin 1`] = `
 
 .emotion-0 {
   box-sizing: border-box;
-  min-width: 0;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -407,7 +399,6 @@ exports[`MediaObject should render with center aligned children 1`] = `
 
 .emotion-0 {
   box-sizing: border-box;
-  min-width: 0;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;

packages/paste-core/layout/media-object/src/index.tsx

@@ -69,7 +69,7 @@ export type MediaBodyProps = Pick<BoxProps, 'as'>;
 
 const MediaBody: React.FC<MediaBodyProps> = ({as = 'span', children}) => {
   return (
-    <Box as={as} flex={1}>
+    <Box as={as} flex={1} minWidth="size0">
       {children}
     </Box>
   );

packages/paste-core/layout/media-object/stories/index.stories.tsx

@@ -3,6 +3,7 @@ import {storiesOf} from '@storybook/react';
 import {withKnobs, select, text} from '@storybook/addon-knobs';
 import {Text} from '@twilio-paste/text';
 import {Box} from '@twilio-paste/box';
+import {Truncate} from '@twilio-paste/truncate';
 import {DefaultTheme, ThemeShape} from '@twilio-paste/theme';
 import {MediaObject, MediaFigure, MediaBody} from '../src';
 
@@ -62,4 +63,24 @@ storiesOf('Layout|Media Object', module)
         </MediaFigure>
       </MediaObject>
     );
+  })
+  .add('Constrained width', () => {
+    return (
+      <Box width="size60">
+        <MediaObject as="div" verticalAlign="center">
+          <MediaFigure as="div" spacing="space100">
+            <Box backgroundColor="colorBackgroundSuccess" size="size20" />
+          </MediaFigure>
+          <MediaBody as="div">
+            <Text as="p">Some media Object body text</Text>
+            <Text as="p">
+              <Truncate>http://www.extremelylongurlthatmightbreakthelayout.com</Truncate>
+            </Text>
+          </MediaBody>
+          <MediaFigure as="div" align="end" spacing="space70">
+            <Box backgroundColor="colorBackgroundSuccess" height="size10" minWidth="size10" />
+          </MediaFigure>
+        </MediaObject>
+      </Box>
+    );
   });