fix: chatMessage/chatBubble hug contents (#2693)

* fix(chat-log): chatMessage/chatBubble hug contents * fix(avatar): add flexShrink 0 to avatar * chore: reword changeset;
twilio-labs · Oct 4, 2022 · 114e80d · 114e80d
1 parent dc48592
commit 114e80d
Show file tree

Hide file tree

Showing 13 changed files with 103 additions and 64 deletions.
diff --git a/.changeset/gold-apples-own.md b/.changeset/gold-apples-own.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/avatar': patch
+'@twilio-paste/core': patch
+---
+
+[Avatar] add flexShrink 0 so it stays the correct size in a flex layout
diff --git a/.changeset/stupid-feet-press.md 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 ChatBubble to the width of the message
diff --git a/packages/paste-core/components/avatar/__tests__/__snapshots__/avatar.test.tsx.snap b/packages/paste-core/components/avatar/__tests__/__snapshots__/avatar.test.tsx.snap
@@ -6,6 +6,9 @@ exports[`Avatar image should render responsive css with an image 1`] = `
   box-sizing: border-box;
   overflow: hidden;
   text-align: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
   width: sizeIcon30;
   height: sizeIcon30;
   background-color: colorBackgroundUser;
@@ -69,6 +72,9 @@ exports[`Avatar intials should render responsive css 1`] = `
   box-sizing: border-box;
   overflow: hidden;
   text-align: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
   width: sizeIcon10;
   height: sizeIcon10;
   background-color: colorBackgroundUser;

diff --git a/packages/paste-core/components/avatar/src/index.tsx b/packages/paste-core/components/avatar/src/index.tsx
@@ -90,6 +90,7 @@ const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
         element={element}
         overflow="hidden"
         textAlign="center"
+        flexShrink={0}
         ref={ref}
         size={size}
         {...colorVariants[color]}

diff --git 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
@@ -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,6 +30,7 @@ export const ChatBubble = React.forwardRef<HTMLDivElement, ChatBubbleProps>(
 
     return (
       <Box
+        display="inline-block"
         fontSize="fontSize30"
         lineHeight="lineHeight20"
         borderRadius="borderRadius30"

diff --git a/packages/paste-core/components/chat-log/src/ChatMessage.tsx b/packages/paste-core/components/chat-log/src/ChatMessage.tsx
@@ -34,6 +34,8 @@ export const ChatMessage = React.forwardRef<HTMLDivElement, ChatMessageProps>(
           as="li"
           listStyleType="none"
           marginBottom="space80"
+          display="flex"
+          flexDirection="column"
           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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>