From 2584262751de5553ee9c6e69b6263e28c1d0feff Mon Sep 17 00:00:00 2001
From: shleewhite <leewhite128@gmail.com>
Date: Mon, 26 Sep 2022 16:37:50 -0700
Subject: [PATCH] fix(chat-log): chatMessage/chatBubble hug contents

---
 .changeset/stupid-feet-press.md               |  6 +++
 .../__tests__/ChatMessageMeta.spec.tsx        | 38 +++++++++----------
 .../components/chat-log/src/ChatBubble.tsx    |  8 ++--
 .../components/chat-log/src/ChatLog.tsx       |  2 +-
 .../components/chat-log/src/ChatMessage.tsx   | 10 +++--
 .../chat-log/src/ChatMessageMeta.tsx          |  6 +--
 .../chat-log/src/ChatMessageMetaItem.tsx      |  1 -
 .../components/ChatMessageMeta.stories.tsx    | 37 +++++++++++++++++-
 .../chat-log/stories/index.stories.tsx        | 18 ++++-----
 .../src/component-examples/ChatLogExamples.ts | 22 ++++-------
 .../src/pages/components/chat-log/index.mdx   | 17 +++++----
 11 files changed, 95 insertions(+), 70 deletions(-)
 create mode 100644 .changeset/stupid-feet-press.md

diff --git a/.changeset/stupid-feet-press.md b/.changeset/stupid-feet-press.md
new file mode 100644
index 0000000000..0693737528
--- /dev/null
+++ b/.changeset/stupid-feet-press.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/chat-log': patch
+'@twilio-paste/core': patch
+---
+
+[Chat Message] hug the width of the ChatMessage to the width of the message
diff --git a/packages/paste-core/components/chat-log/__tests__/ChatMessageMeta.spec.tsx b/packages/paste-core/components/chat-log/__tests__/ChatMessageMeta.spec.tsx
index 55c8548bc0..7a52c81d3f 100644
--- a/packages/paste-core/components/chat-log/__tests__/ChatMessageMeta.spec.tsx
+++ b/packages/paste-core/components/chat-log/__tests__/ChatMessageMeta.spec.tsx
@@ -71,32 +71,28 @@ describe('ChatMessageMeta', () => {
     expect(screen.getByTestId('test-meta')).toHaveAttribute('aria-label', 'said by Gibby Radki at 5:04pm');
   });
 
-  it('should have justifyContent flex-end if there is one child', () => {
+  it('should have justifyContent flex-start it is inbound and flex-end if it is outbound', () => {
     render(
-      <ChatMessage variant="inbound">
-        <ChatMessageMeta data-testid="test-meta" aria-label="sent at 5:04pm">
-          <ChatMessageMetaItem>5:04pm</ChatMessageMetaItem>
-        </ChatMessageMeta>
-      </ChatMessage>
-    );
-    expect(screen.getByTestId('test-meta')).toHaveStyleRule('justify-content', 'flex-end');
-  });
-
-  it('should have justifyContent space-between if there is more than one child', () => {
-    render(
-      <ChatMessage variant="inbound">
-        <ChatMessageMeta data-testid="test-meta" aria-label="said by Gibby Radki at 5:04pm">
-          <ChatMessageMetaItem>Gibby Radki</ChatMessageMetaItem>
-          <ChatMessageMetaItem>5:04pm</ChatMessageMetaItem>
-        </ChatMessageMeta>
-      </ChatMessage>
+      <>
+        <ChatMessage variant="inbound">
+          <ChatMessageMeta data-testid="in-test-meta" aria-label="sent at 5:04pm">
+            <ChatMessageMetaItem>5:04pm</ChatMessageMetaItem>
+          </ChatMessageMeta>
+        </ChatMessage>
+        <ChatMessage variant="outbound">
+          <ChatMessageMeta data-testid="out-test-meta" aria-label="sent at 5:04pm">
+            <ChatMessageMetaItem>5:04pm</ChatMessageMetaItem>
+          </ChatMessageMeta>
+        </ChatMessage>
+      </>
     );
-    expect(screen.getByTestId('test-meta')).toHaveStyleRule('justify-content', 'space-between');
+    expect(screen.getByTestId('in-test-meta')).toHaveStyleRule('justify-content', 'flex-start');
+    expect(screen.getByTestId('out-test-meta')).toHaveStyleRule('justify-content', 'flex-end');
   });
 
-  it('should have textAlign right if there is one child', () => {
+  it('should have textAlign right if it is outbound', () => {
     render(
-      <ChatMessage variant="inbound">
+      <ChatMessage variant="outbound">
         <ChatMessageMeta data-testid="test-meta" aria-label="sent at 5:04pm">
           <ChatMessageMetaItem>5:04pm</ChatMessageMetaItem>
         </ChatMessageMeta>
diff --git a/packages/paste-core/components/chat-log/src/ChatBubble.tsx b/packages/paste-core/components/chat-log/src/ChatBubble.tsx
index aa55d2ba01..bddba00c43 100644
--- a/packages/paste-core/components/chat-log/src/ChatBubble.tsx
+++ b/packages/paste-core/components/chat-log/src/ChatBubble.tsx
@@ -12,15 +12,15 @@ export interface ChatBubbleProps {
 }
 
 const bubbleVariantStyles: {
-  [key in MessageVariants]: {
-    backgroundColor: BoxStyleProps['backgroundColor'];
-  };
+  [key in MessageVariants]: BoxStyleProps;
 } = {
   inbound: {
     backgroundColor: 'colorBackground',
+    alignSelf: 'flex-start',
   },
   outbound: {
     backgroundColor: 'colorBackgroundPrimaryWeakest',
+    alignSelf: 'flex-end',
   },
 };
 
@@ -30,12 +30,12 @@ export const ChatBubble = React.forwardRef<HTMLDivElement, ChatBubbleProps>(
 
     return (
       <Box
+        display="inline-block"
         fontSize="fontSize30"
         lineHeight="lineHeight20"
         borderRadius="borderRadius30"
         paddingY="space30"
         paddingX="space40"
-        marginBottom="space30"
         element={element}
         ref={ref}
         variant={variant}
diff --git a/packages/paste-core/components/chat-log/src/ChatLog.tsx b/packages/paste-core/components/chat-log/src/ChatLog.tsx
index d76e46aab9..06f266513f 100644
--- a/packages/paste-core/components/chat-log/src/ChatLog.tsx
+++ b/packages/paste-core/components/chat-log/src/ChatLog.tsx
@@ -11,7 +11,7 @@ export interface ChatLogProps {
 const ChatLog = React.forwardRef<HTMLDivElement, ChatLogProps>(({children, element = 'CHAT_LOG', ...props}, ref) => {
   return (
     <Box role="log" padding="space70" element={element} ref={ref} {...safelySpreadBoxProps(props)}>
-      <Box as="ul" margin="space0" padding="space0">
+      <Box as="ul" margin="space0" padding="space0" display="flex" flexDirection="column">
         {children}
       </Box>
     </Box>
diff --git a/packages/paste-core/components/chat-log/src/ChatMessage.tsx b/packages/paste-core/components/chat-log/src/ChatMessage.tsx
index 7e9e643543..49855081bb 100644
--- a/packages/paste-core/components/chat-log/src/ChatMessage.tsx
+++ b/packages/paste-core/components/chat-log/src/ChatMessage.tsx
@@ -13,16 +13,15 @@ export interface ChatMessageProps {
 }
 
 const messageVariantStyles: {
-  [key in MessageVariants]: {
-    marginLeft?: BoxStyleProps['marginLeft'];
-    marginRight?: BoxStyleProps['marginRight'];
-  };
+  [key in MessageVariants]: BoxStyleProps;
 } = {
   inbound: {
     marginRight: 'space70',
+    alignSelf: 'flex-start',
   },
   outbound: {
     marginLeft: 'space70',
+    alignSelf: 'flex-end',
   },
 };
 
@@ -34,6 +33,9 @@ export const ChatMessage = React.forwardRef<HTMLDivElement, ChatMessageProps>(
           as="li"
           listStyleType="none"
           marginBottom="space80"
+          display="flex"
+          flexDirection="column"
+          rowGap="space30"
           ref={ref}
           element={element}
           variant={variant}
diff --git a/packages/paste-core/components/chat-log/src/ChatMessageMeta.tsx b/packages/paste-core/components/chat-log/src/ChatMessageMeta.tsx
index 01f61c2650..d5a2d8b475 100644
--- a/packages/paste-core/components/chat-log/src/ChatMessageMeta.tsx
+++ b/packages/paste-core/components/chat-log/src/ChatMessageMeta.tsx
@@ -15,15 +15,13 @@ export const ChatMessageMeta = React.forwardRef<HTMLDivElement, ChatMessageMetaP
   ({children, element = 'CHAT_MESSAGE_META', ...props}, ref) => {
     const variant = React.useContext(MessageVariantContext);
 
-    const hasMultipleChildren = React.Children.count(children) > 1;
-
     return (
       <Box
         ref={ref}
         element={element}
         display="flex"
-        justifyContent={hasMultipleChildren ? 'space-between' : 'flex-end'}
-        textAlign={!hasMultipleChildren ? 'right' : undefined}
+        justifyContent={variant === 'inbound' ? 'flex-start' : 'flex-end'}
+        textAlign={variant === 'outbound' ? 'right' : 'left'}
         alignItems="center"
         variant={variant}
         columnGap="space40"
diff --git a/packages/paste-core/components/chat-log/src/ChatMessageMetaItem.tsx b/packages/paste-core/components/chat-log/src/ChatMessageMetaItem.tsx
index a7c96d3c8e..e2c957fecc 100644
--- a/packages/paste-core/components/chat-log/src/ChatMessageMetaItem.tsx
+++ b/packages/paste-core/components/chat-log/src/ChatMessageMetaItem.tsx
@@ -19,7 +19,6 @@ export const ChatMessageMetaItem = React.forwardRef<HTMLDivElement, ChatMessageM
       color="colorTextWeak"
       lineHeight="lineHeight20"
       fontSize="fontSize20"
-      _last={{textAlign: 'right'}}
       {...safelySpreadBoxProps(props)}
     >
       {children}
diff --git a/packages/paste-core/components/chat-log/stories/components/ChatMessageMeta.stories.tsx b/packages/paste-core/components/chat-log/stories/components/ChatMessageMeta.stories.tsx
index 7a3c74d27b..773141fbb9 100644
--- a/packages/paste-core/components/chat-log/stories/components/ChatMessageMeta.stories.tsx
+++ b/packages/paste-core/components/chat-log/stories/components/ChatMessageMeta.stories.tsx
@@ -17,9 +17,8 @@ export const InboundMessageWithMeta: Story = () => (
       <ChatMessageMeta aria-label="said by Gibby Radki 4 minutes ago">
         <ChatMessageMetaItem>
           <Avatar name="Gibby Radki" size="sizeIcon20" />
-          Gibby Radki
+          Gibby Radki ・ 4 minutes ago
         </ChatMessageMetaItem>
-        <ChatMessageMetaItem>4 minutes ago</ChatMessageMetaItem>
       </ChatMessageMeta>
     </ChatMessage>
   </ChatLog>
@@ -40,3 +39,37 @@ export const OutboundMessageWithMeta: Story = () => (
     </ChatMessage>
   </ChatLog>
 );
+
+export const MessageWithLongMeta: Story = () => (
+  <ChatLog>
+    <ChatMessage variant="inbound">
+      <ChatBubble>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </ChatBubble>
+      <ChatMessageMeta
+        aria-label="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Ut
+          enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+      >
+        <ChatMessageMetaItem>
+          <Avatar name="Gibby Radki" size="sizeIcon20" />
+          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Ut
+          enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        </ChatMessageMetaItem>
+      </ChatMessageMeta>
+    </ChatMessage>
+    <ChatMessage variant="outbound">
+      <ChatBubble>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </ChatBubble>
+      <ChatMessageMeta
+        aria-label="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Ut
+          enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+      >
+        <ChatMessageMetaItem>
+          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Ut
+          enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        </ChatMessageMetaItem>
+      </ChatMessageMeta>
+    </ChatMessage>
+  </ChatLog>
+);
diff --git a/packages/paste-core/components/chat-log/stories/index.stories.tsx b/packages/paste-core/components/chat-log/stories/index.stories.tsx
index 39a191bf89..4112821e02 100644
--- a/packages/paste-core/components/chat-log/stories/index.stories.tsx
+++ b/packages/paste-core/components/chat-log/stories/index.stories.tsx
@@ -81,13 +81,12 @@ export const ScrollingChatLog: Story = () => {
           <ChatMessageMeta aria-label="said by Gibby Radki at 4:30pm">
             <ChatMessageMetaItem>
               <Avatar name="Gibby Radki" size="sizeIcon20" />
-              Gibby Radki
+              Gibby Radki ・ 4:30 PM
             </ChatMessageMetaItem>
-            <ChatMessageMetaItem>4:30 PM</ChatMessageMetaItem>
           </ChatMessageMeta>
         </ChatMessage>
         <ChatEvent>
-          <strong>Lauren Gardner, Lee White, Loreina Chew</strong> have joined the chat ・4:31 PM
+          <strong>Lauren Gardner, Lee White, Loreina Chew</strong> have joined the chat ・ 4:31 PM
         </ChatEvent>
         <ChatMessage variant="outbound">
           <ChatBubble>Nulla sit amet elit mauris.</ChatBubble>
@@ -112,8 +111,7 @@ export const ScrollingChatLog: Story = () => {
           </ChatBubble>
           <ChatBubble>Donec sit amet orci hendrerit, varius diam in, porttitor felis.</ChatBubble>
           <ChatMessageMeta aria-label="said by Gibby Radki at 5:04pm">
-            <ChatMessageMetaItem>Gibby Radki</ChatMessageMetaItem>
-            <ChatMessageMetaItem>5:04 PM</ChatMessageMetaItem>
+            <ChatMessageMetaItem>Gibby Radki ・ 5:04 PM</ChatMessageMetaItem>
           </ChatMessageMeta>
         </ChatMessage>
         <ChatMessage variant="outbound">
@@ -165,19 +163,18 @@ export const KitchenSink: Story = () => (
       </ChatMessageMeta>
     </ChatMessage>
     <ChatEvent>
-      <strong>Lauren Gardner</strong> has joined the chat ・4:26 PM
+      <strong>Lauren Gardner</strong> has joined the chat ・ 4:26 PM
     </ChatEvent>
     <ChatEvent>
-      <strong>Gibby Radki</strong> sent transfer request to <strong>Technical Support Team</strong> ・3:42 PM
+      <strong>Gibby Radki</strong> sent transfer request to <strong>Technical Support Team</strong> ・ 3:42 PM
     </ChatEvent>
     <ChatMessage variant="inbound">
       <ChatBubble>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</ChatBubble>
       <ChatMessageMeta aria-label="said by Gibby Radki at 4:30pm">
         <ChatMessageMetaItem>
           <Avatar name="Gibby Radki" size="sizeIcon20" />
-          Gibby Radki
+          Gibby Radki ・ 4:30 PM
         </ChatMessageMetaItem>
-        <ChatMessageMetaItem>4:30 PM</ChatMessageMetaItem>
       </ChatMessageMeta>
     </ChatMessage>
     <ChatMessage variant="outbound">
@@ -209,8 +206,7 @@ export const KitchenSink: Story = () => (
       </ChatBubble>
       <ChatBubble>Donec sit amet orci hendrerit, varius diam in, porttitor felis.</ChatBubble>
       <ChatMessageMeta aria-label="said by Gibby Radki at 5:04pm">
-        <ChatMessageMetaItem>Gibby Radki</ChatMessageMetaItem>
-        <ChatMessageMetaItem>5:04 PM</ChatMessageMetaItem>
+        <ChatMessageMetaItem>Gibby Radki ・ 5:04 PM</ChatMessageMetaItem>
       </ChatMessageMeta>
     </ChatMessage>
     <ChatMessage variant="outbound">
diff --git a/packages/paste-website/src/component-examples/ChatLogExamples.ts b/packages/paste-website/src/component-examples/ChatLogExamples.ts
index 32662c957c..932cfadda3 100644
--- a/packages/paste-website/src/component-examples/ChatLogExamples.ts
+++ b/packages/paste-website/src/component-examples/ChatLogExamples.ts
@@ -41,9 +41,8 @@ const MessageWithMeta = () => {
         <ChatMessageMeta aria-label="said by Gibby Radki 4 minutes ago">
           <ChatMessageMetaItem>
             <Avatar name="Gibby Radki" size="sizeIcon20" />
-            Gibby Radki
+            Gibby Radki ・ 4 minutes ago
           </ChatMessageMetaItem>
-          <ChatMessageMetaItem>4 minutes ago</ChatMessageMetaItem>
         </ChatMessageMeta>
       </ChatMessage>
     </ChatLog>
@@ -131,9 +130,8 @@ const ComplexMessage = () => {
         <ChatMessageMeta aria-label="said by Gibby Radki at 11:27 AM">
           <ChatMessageMetaItem>
             <Avatar name="Gibby Radki" size="sizeIcon20" />
-            Gibby Radki
+            Gibby Radki ・ 11:27 AM
           </ChatMessageMetaItem>
-          <ChatMessageMetaItem>11:27 AM</ChatMessageMetaItem>
         </ChatMessageMeta>
       </ChatMessage>
     </ChatLog>
@@ -177,7 +175,7 @@ const BasicChatEvent = () => {
   return (
     <ChatLog>
       <ChatEvent>
-        <strong>Gibby Radki</strong> has joined the chat・11:56 AM
+        <strong>Gibby Radki</strong> has joined the chat ・ 11:56 AM
       </ChatEvent>
     </ChatLog>
   );
@@ -194,7 +192,7 @@ const ChatStartedBookend = () => {
       <ChatBookend>
         <ChatBookendItem>Today</ChatBookendItem>
         <ChatBookendItem>
-          <strong>Chat Started</strong>・3:34pm
+          <strong>Chat Started</strong> ・ 3:34pm
         </ChatBookendItem>
       </ChatBookend>
     </ChatLog>
@@ -226,9 +224,8 @@ const SampleChat = () => {
           <ChatMessageMeta aria-label="said by Gibby Radki at 3:35 PM">
             <ChatMessageMetaItem>
               <Avatar name="Gibby Radki" size="sizeIcon20" />
-              Gibby Radki
+              Gibby Radki ・ 3:35 PM
             </ChatMessageMetaItem>
-            <ChatMessageMetaItem>3:35 PM</ChatMessageMetaItem>
           </ChatMessageMeta>
         </ChatMessage>
         <ChatMessage variant='outbound'>
@@ -252,9 +249,8 @@ const SampleChat = () => {
           <ChatMessageMeta aria-label="said by Gibby Radki at 3:37 PM">
             <ChatMessageMetaItem>
               <Avatar name="Gibby Radki" size="sizeIcon20" />
-              Gibby Radki
+              Gibby Radki ・ 3:37 PM
             </ChatMessageMetaItem>
-            <ChatMessageMetaItem>3:37 PM</ChatMessageMetaItem>
           </ChatMessageMeta>
         </ChatMessage>
         <ChatMessage variant='outbound'>
@@ -286,9 +282,8 @@ const SampleChat = () => {
           <ChatMessageMeta aria-label="said by Gibby Radki at 11:29 AM">
             <ChatMessageMetaItem>
               <Avatar name="Gibby Radki" size="sizeIcon20" />
-              Gibby Radki
+              Gibby Radki ・ 11:29 AM
             </ChatMessageMetaItem>
-            <ChatMessageMetaItem>11:29 AM</ChatMessageMetaItem>
           </ChatMessageMeta>
         </ChatMessage>
         <ChatMessage variant='inbound'>
@@ -298,9 +293,8 @@ const SampleChat = () => {
           <ChatMessageMeta aria-label="said by Gibby Radki at 11:36 AM">
             <ChatMessageMetaItem>
               <Avatar name="Gibby Radki" size="sizeIcon20" />
-              Gibby Radki
+              Gibby Radki ・ 11:36 AM
             </ChatMessageMetaItem>
-            <ChatMessageMetaItem>11:36 AM</ChatMessageMetaItem>
           </ChatMessageMeta>
         </ChatMessage>
         <ChatBookend>
diff --git a/packages/paste-website/src/pages/components/chat-log/index.mdx b/packages/paste-website/src/pages/components/chat-log/index.mdx
index a394722400..bec0dcf2a2 100644
--- a/packages/paste-website/src/pages/components/chat-log/index.mdx
+++ b/packages/paste-website/src/pages/components/chat-log/index.mdx
@@ -108,9 +108,8 @@ export const pageQuery = graphql`
     <ChatMessageMeta aria-label="said by Gibby Radki at 3:35 PM">
       <ChatMessageMetaItem>
         <Avatar name="Gibby Radki" size="sizeIcon20" />
-        Gibby Radki
+        Gibby Radki ・ 3:35 PM
       </ChatMessageMetaItem>
-      <ChatMessageMetaItem>3:35 PM</ChatMessageMetaItem>
     </ChatMessageMeta>
   </ChatMessage>
   <ChatMessage variant='outbound'>
@@ -345,8 +344,7 @@ export const Basic = () => {
       <ChatMessage variant="inbound">
         <ChatBubble>Ahoy!</ChatBubble>
         <ChatMessageMeta aria-label="said by Gibby Radki 4 minutes ago">
-          <ChatMessageMetaItem>Gibby Radki</ChatMessageMetaItem>
-          <ChatMessageMetaItem>4 minutes ago</ChatMessageMetaItem>
+          <ChatMessageMetaItem>Gibby Radki ・ 4 minutes ago</ChatMessageMetaItem>
         </ChatMessageMeta>
       </ChatMessage>
       <ChatMessage variant="outbound">
@@ -451,11 +449,14 @@ ChatAttachmentLink inherits the same props as [Anchor](/components/anchor) as we
 ### Figma
 
 <Callout variant="neutral" marginY="space70">
-  <CalloutHeading as="h4">Chat Log components are not in the Paste Component Library yet</CalloutHeading>
+  <CalloutHeading as="span">Figma usage guidelines coming soon</CalloutHeading>
   <CalloutText>
-    To find the Stage 1 components, see{' '}
-    <Anchor href="https://www.figma.com/file/cSdKlqoTbxoAUmnrYkfFWl/Conversations-UI-Kit?node-id=0%3A1" showExternal>
-      the Conversations UI Kit Figma file
+    You can find the Chat Log components in{' '}
+    <Anchor
+      href="https://www.figma.com/file/E6KUvMhioUmAgN0nwmReTM/Paste-Components?node-id=16157%3A123797"
+      showExternal
+    >
+      the Paste Components library
     </Anchor>
     .
   </CalloutText>