fix(fuselage): Reaction list not wrapping (#843)

RocketChat · Sep 8, 2022 · 609bf2d · 609bf2d
1 parent 2957704
commit 609bf2d
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 4 deletions.
diff --git a/packages/fuselage/src/components/Message/MessageReactions/MessageReactions.styles.scss b/packages/fuselage/src/components/Message/MessageReactions/MessageReactions.styles.scss
@@ -7,12 +7,22 @@
 @use '../mixins.scss';
 
 .rcx-message-reactions {
+  &__container {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+
+    margin: lengths.margin(-2);
+  }
+
   &__reaction {
     @include button.kind-variant(buttons.$icon);
     @include typography.use-font-scale(c1);
     display: inline-flex;
     align-items: center;
 
+    margin: lengths.margin(2);
+
     padding: lengths.padding(2);
 
     cursor: pointer;

diff --git a/packages/fuselage/src/components/Message/MessageReactions/MessageReactions.tsx b/packages/fuselage/src/components/Message/MessageReactions/MessageReactions.tsx
@@ -1,13 +1,12 @@
-import type { ComponentProps } from 'react';
+import type { ReactNode } from 'react';
 import React from 'react';
 
-import { ButtonGroup } from '../..';
 import { MessageBlock } from '../MessageBlock';
 
-type MessageReactionsProps = ComponentProps<typeof ButtonGroup>;
+type MessageReactionsProps = { children: ReactNode };
 
 export const MessageReactions = (props: MessageReactionsProps) => (
   <MessageBlock className='rcx-message-reactions'>
-    <ButtonGroup {...{ small: true }} {...props} />
+    <div className='rcx-message-reactions__container' {...props} />
   </MessageBlock>
 );
diff --git a/packages/fuselage/src/components/Message/Messages.stories.tsx b/packages/fuselage/src/components/Message/Messages.stories.tsx
@@ -728,3 +728,47 @@ export const MessageWithMetrics: ComponentStory<typeof Message> = () => (
     </Message>
   </Box>
 );
+
+export const LotsOfReactions: ComponentStory<typeof Message> = () => (
+  <Box>
+    <MessageDivider>May, 24, 2020</MessageDivider>
+    <Message className='customclass' clickable>
+      <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.Roles>
+            <Message.Role>Admin</Message.Role>
+            <Message.Role>User</Message.Role>
+            <Message.Role>Owner</Message.Role>
+          </Message.Roles>
+          <Message.Timestamp>12:00 PM</Message.Timestamp>
+        </Message.Header>
+        <Message.Body>
+          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+          nisi ut aliquip ex ea commodo consequat a duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Consectetur adipiscing elit, sed do eiusmod tempor
+          incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+          veniam...
+        </Message.Body>
+        <MessageReactions>
+          {Array.from({ length: 100 }).map((_, index) => (
+            <MessageReactions.Reaction counter={index} mine={!(index % 3)} />
+          ))}
+          <MessageReactions.Action />
+        </MessageReactions>
+      </Message.Container>
+      <MessageToolbox.Wrapper>
+        <MessageToolbox>
+          <MessageToolbox.Item icon='quote' />
+          <MessageToolbox.Item icon='clock' />
+          <MessageToolbox.Item icon='thread' />
+        </MessageToolbox>
+      </MessageToolbox.Wrapper>
+    </Message>
+  </Box>
+);