fix: message metrics item icon size (#774)

Co-authored-by: gabriellsh <[email protected]>
RocketChat · Jul 15, 2022 · e1100e5 · e1100e5
1 parent de2ada3
commit e1100e5
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 2 deletions.
diff --git a/...elage/src/components/Message/MessageMetrics/MessageMetricsItem/MessageMetricsItemIcon.tsx b/...elage/src/components/Message/MessageMetrics/MessageMetricsItem/MessageMetricsItemIcon.tsx
@@ -1,11 +1,12 @@
+import type { ComponentProps } from 'react';
 import React from 'react';
 
 import { Icon } from '../../../..';
 
 type MessageMetricsItemIconProps = {
   name: 'thread' | 'user' | 'clock' | 'discussion';
-};
+} & Omit<ComponentProps<typeof Icon>, 'name'>;
 
 export const MessageMetricsItemIcon = (props: MessageMetricsItemIconProps) => (
-  <Icon {...{ size: 'x24' }} {...(props as any)} />
+  <Icon size='x20' {...props} />
 );
diff --git a/packages/fuselage/src/components/Message/Messages.stories.tsx b/packages/fuselage/src/components/Message/Messages.stories.tsx
@@ -5,6 +5,7 @@ import Message from '.';
 import { Box, Avatar } from '..';
 import { MessageDivider } from './MessageDivider';
 import { MessageEmoji } from './MessageEmoji';
+import MessageMetrics from './MessageMetrics';
 import MessageReactions from './MessageReactions';
 import MessageToolbox from './MessageToolbox';
 import ThreadMessage, { ThreadMessageEmoji } from './ThreadMessage';
@@ -659,3 +660,51 @@ export const MessagePending = () => (
     </Message>
   </Box>
 );
+export const MessageWithMetrics: ComponentStory<typeof Message> = () => (
+  <Box>
+    <MessageDivider>May, 24, 2020</MessageDivider>
+    <Message className='customclass'>
+      <Message.LeftContainer>
+        <Avatar url={avatarUrl} size={'x36'} />
+      </Message.LeftContainer>
+      <Message.Container>
+        <Message.Header>
+          <Message.Name>Haylie George</Message.Name>
+          <Message.Username>@haylie.george</Message.Username>
+          <Message.Role>Admin</Message.Role>
+          <Message.Role>User</Message.Role>
+          <Message.Role>Owner</Message.Role>
+          <Message.Timestamp>12:00 PM</Message.Timestamp>
+        </Message.Header>
+        <Message.Body>
+          Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
+        </Message.Body>
+        <Message.Block>
+          <MessageMetrics>
+            <MessageMetrics.Reply>Reply</MessageMetrics.Reply>
+            <MessageMetrics.Item>
+              <MessageMetrics.Item.Icon name='thread' />
+              <MessageMetrics.Item.Label>1</MessageMetrics.Item.Label>
+            </MessageMetrics.Item>
+            <MessageMetrics.Item>
+              <MessageMetrics.Item.Icon name='user' />
+              <MessageMetrics.Item.Label>2</MessageMetrics.Item.Label>
+            </MessageMetrics.Item>
+            <MessageMetrics.Item>
+              <MessageMetrics.Item.Icon name='clock' />
+              <MessageMetrics.Item.Label>12:30 PM</MessageMetrics.Item.Label>
+            </MessageMetrics.Item>
+            <MessageMetrics.Following name='bell' />
+          </MessageMetrics>
+        </Message.Block>
+      </Message.Container>
+      <MessageToolbox.Wrapper>
+        <MessageToolbox>
+          <MessageToolbox.Item icon='quote' />
+          <MessageToolbox.Item icon='clock' />
+          <MessageToolbox.Item icon='thread' />
+        </MessageToolbox>
+      </MessageToolbox.Wrapper>
+    </Message>
+  </Box>
+);