feat(fuselage): Update message metric styles and add Avatar row (#1417)

Co-authored-by: dougfabris <[email protected]>
RocketChat · Aug 2, 2024 · b8441ee · b8441ee
1 parent ad92257
commit b8441ee
Show file tree

Hide file tree

Showing 13 changed files with 381 additions and 31 deletions.
diff --git a/.changeset/two-doors-clean.md b/.changeset/two-doors-clean.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": minor
+---
+
+Updated message metric styles and added Avatar row
diff --git a/packages/fuselage/src/components/Badge/Badge.tsx b/packages/fuselage/src/components/Badge/Badge.tsx
@@ -1,4 +1,4 @@
-import type { ElementType } from 'react';
+import type { ElementType, HTMLAttributes } from 'react';
 
 import { prependClassName } from '../../helpers/prependClassName';
 
@@ -10,7 +10,7 @@ export type BadgeProps = {
   className?: string;
   children?: any;
   title?: any;
-};
+} & HTMLAttributes<HTMLSpanElement>;
 
 export function Badge({
   is: Tag = 'span',

diff --git a/packages/fuselage/src/components/Message/MessageBlock.tsx b/packages/fuselage/src/components/Message/MessageBlock.tsx
@@ -1,19 +1,22 @@
-import type { ComponentProps } from 'react';
+import type { ComponentProps, Ref } from 'react';
+import { forwardRef } from 'react';
 
 import Box from '../Box';
 
 type MessageBlockProps = {
   fixedWidth?: boolean;
 } & ComponentProps<typeof Box>;
 
-export const MessageBlock = ({
-  className: _className,
-  fixedWidth,
-  ...props
-}: MessageBlockProps) => (
-  <Box
-    rcx-message-block
-    rcx-message-block--width-fixed={fixedWidth}
-    {...props}
-  />
+export const MessageBlock = forwardRef(
+  (
+    { className: _className, fixedWidth, ...props }: MessageBlockProps,
+    ref: Ref<HTMLDivElement>
+  ) => (
+    <Box
+      rcx-message-block
+      rcx-message-block--width-fixed={fixedWidth}
+      ref={ref}
+      {...props}
+    />
+  )
 );
diff --git a/packages/fuselage/src/components/Message/MessageMetrics/MessageMetrics.stories.tsx b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetrics.stories.tsx
@@ -1,5 +1,4 @@
 import { action } from '@storybook/addon-actions';
-import { Title, Primary } from '@storybook/addon-docs';
 import type { ComponentMeta } from '@storybook/react';
 
 import {
@@ -9,22 +8,19 @@ import {
   MessageMetricsFollowing,
   MessageMetricsItemIcon,
   MessageMetricsItemLabel,
+  MessageMetricsItemAvatarRowContent,
+  MessageMetricsItemAvatarRow,
 } from '.';
+import { Avatar } from '../../Avatar';
+import { Badge } from '../../Badge';
 import { BasicMessageTemplate } from '../helpers';
 
+const imgUrl =
+  'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z';
+
 export default {
   title: 'Message/MessageMetrics',
   component: MessageMetrics,
-  parameters: {
-    docs: {
-      page: () => (
-        <>
-          <Title />
-          <Primary />
-        </>
-      ),
-    },
-  },
 } as ComponentMeta<typeof MessageMetrics>;
 
 const metrics = (
@@ -44,7 +40,48 @@ const metrics = (
   </MessageMetrics>
 );
 
+const metricsThread = (
+  <MessageMetrics>
+    <MessageMetricsReply
+      onClick={action('click view thread')}
+      overflow='visible'
+    >
+      View thread
+    </MessageMetricsReply>
+    <MessageMetricsItem>
+      <MessageMetricsFollowing
+        title={'Following'}
+        name={'bell'}
+        onClick={action('click follow thread')}
+        badge={<Badge small variant={'danger'} />}
+      />
+    </MessageMetricsItem>
+    <MessageMetricsItem title={'Participants'}>
+      <MessageMetricsItemAvatarRow>
+        <MessageMetricsItemAvatarRowContent>
+          <Avatar alt='gazzolia' size='x16' url={imgUrl} />
+        </MessageMetricsItemAvatarRowContent>
+        <MessageMetricsItemAvatarRowContent>
+          <Avatar alt='gazzolia' size='x16' url={imgUrl} />
+        </MessageMetricsItemAvatarRowContent>
+      </MessageMetricsItemAvatarRow>
+      <MessageMetricsItemLabel>+ 3 followers</MessageMetricsItemLabel>
+    </MessageMetricsItem>
+    <MessageMetricsItem title={'Last message: 12th July, 2024'}>
+      <MessageMetricsItemIcon name='thread' />
+      <MessageMetricsItemLabel>
+        5 messages, 12th July, 2024
+      </MessageMetricsItemLabel>
+    </MessageMetricsItem>
+  </MessageMetrics>
+);
+
 export const Default = BasicMessageTemplate.bind({});
+export const ThreadMetrics = BasicMessageTemplate.bind({});
+
 Default.args = {
   metrics,
 };
+ThreadMetrics.args = {
+  metrics: metricsThread,
+};
diff --git a/packages/fuselage/src/components/Message/MessageMetrics/MessageMetrics.styles.scss b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetrics.styles.scss
@@ -34,5 +34,24 @@
     &-label {
       margin-inline-start: lengths.margin(4);
     }
+
+    &__follow-badge {
+      position: absolute;
+      top: 0;
+      right: 0;
+
+      transform: translate(40%, -40%);
+    }
+  }
+
+  &__avatar-row {
+    display: flex;
+    flex-direction: row;
+
+    margin-inline: lengths.margin(-2);
+
+    &__content {
+      margin-inline: lengths.margin(2);
+    }
   }
 }
diff --git a/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsFollowing.tsx b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsFollowing.tsx
@@ -1,12 +1,26 @@
-import type { ComponentProps } from 'react';
+import type { ComponentProps, ReactElement } from 'react';
 
 import { IconButton } from '../../Button';
 
 type MessageMetricsFollowingProps = {
   name: 'bell' | 'bell-off';
+  badge?: ReactElement;
 } & Omit<ComponentProps<typeof IconButton>, 'icon'>;
 
 export const MessageMetricsFollowing = ({
   name,
+  badge,
   ...props
-}: MessageMetricsFollowingProps) => <IconButton {...props} small icon={name} />;
+}: MessageMetricsFollowingProps) => (
+  <IconButton
+    position='relative'
+    overflow='visible'
+    {...props}
+    small
+    icon={name}
+  >
+    {badge && (
+      <div className='rcx-message-metrics__item__follow-badge'>{badge}</div>
+    )}
+  </IconButton>
+);
diff --git a/.../fuselage/src/components/Message/MessageMetrics/MessageMetricsItem/MessageMetricsItem.tsx b/.../fuselage/src/components/Message/MessageMetrics/MessageMetricsItem/MessageMetricsItem.tsx
@@ -1,7 +1,15 @@
 import type { HTMLAttributes } from 'react';
 
+import { prependClassName } from '../../../../helpers/prependClassName';
+
 type MessageMetricsItemProps = HTMLAttributes<HTMLDivElement>;
 
-export const MessageMetricsItem = (props: MessageMetricsItemProps) => (
-  <div className='rcx-message-metrics__item' {...props} />
+export const MessageMetricsItem = ({
+  className,
+  ...props
+}: MessageMetricsItemProps) => (
+  <div
+    className={prependClassName(className, 'rcx-message-metrics__item')}
+    {...props}
+  />
 );
diff --git a/.../src/components/Message/MessageMetrics/MessageMetricsItem/MessageMetricsItemAvatarRow.tsx b/.../src/components/Message/MessageMetrics/MessageMetricsItem/MessageMetricsItemAvatarRow.tsx
@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'react';
+
+import { prependClassName } from '../../../../helpers/prependClassName';
+
+type MessageMetricsItemProps = HTMLAttributes<HTMLDivElement>;
+
+export const MessageMetricsItemAvatarRow = ({
+  className,
+  ...props
+}: MessageMetricsItemProps) => (
+  <div
+    className={prependClassName(className, 'rcx-message-metrics__avatar-row')}
+    {...props}
+  />
+);
diff --git a/...mponents/Message/MessageMetrics/MessageMetricsItem/MessageMetricsItemAvatarRowContent.tsx b/...mponents/Message/MessageMetrics/MessageMetricsItem/MessageMetricsItemAvatarRowContent.tsx
@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'react';
+
+import { prependClassName } from '../../../../helpers/prependClassName';
+
+type MessageMetricsItemProps = HTMLAttributes<HTMLDivElement>;
+
+export const MessageMetricsItemAvatarRowContent = ({
+  className,
+  ...props
+}: MessageMetricsItemProps) => (
+  <div
+    className={prependClassName(
+      className,
+      'rcx-message-metrics__avatar-row__content'
+    )}
+    {...props}
+  />
+);
diff --git a/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsItem/index.ts b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsItem/index.ts
@@ -1,4 +1,6 @@
 import { MessageMetricsItem } from './MessageMetricsItem';
+import { MessageMetricsItemAvatarRow } from './MessageMetricsItemAvatarRow';
+import { MessageMetricsItemAvatarRowContent } from './MessageMetricsItemAvatarRowContent';
 import { MessageMetricsItemIcon } from './MessageMetricsItemIcon';
 import { MessageMetricsItemLabel } from './MessageMetricsItemLabel';
 
@@ -13,4 +15,10 @@ export default Object.assign(MessageMetricsItem, {
   Label: MessageMetricsItemLabel,
 });
 
-export { MessageMetricsItem, MessageMetricsItemIcon, MessageMetricsItemLabel };
+export {
+  MessageMetricsItem,
+  MessageMetricsItemIcon,
+  MessageMetricsItemLabel,
+  MessageMetricsItemAvatarRowContent,
+  MessageMetricsItemAvatarRow,
+};
diff --git a/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsReply.tsx b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsReply.tsx
@@ -7,6 +7,6 @@ type MessageMetricsReplyProps = ComponentProps<typeof Button>;
 
 export const MessageMetricsReply = (props: MessageMetricsReplyProps) => (
   <MessageMetricsItem>
-    <Button {...props} small primary />
+    <Button primary {...props} small />
   </MessageMetricsItem>
 );