diff --git a/packages/fuselage/src/components/Message/MessageReactions/MessageReactions.styles.scss b/packages/fuselage/src/components/Message/MessageReactions/MessageReactions.styles.scss index f05c3afd75..339f2fa877 100644 --- 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 index c06ccd04b8..a470550ca5 100644 --- 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; +type MessageReactionsProps = { children: ReactNode }; export const MessageReactions = (props: MessageReactionsProps) => ( - +
); diff --git a/packages/fuselage/src/components/Message/Messages.stories.tsx b/packages/fuselage/src/components/Message/Messages.stories.tsx index c04eac885a..8c9fbc1366 100644 --- 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 = () => ( ); + +export const LotsOfReactions: ComponentStory = () => ( + + May, 24, 2020 + + + + + + + Haylie George + @haylie.george + + Admin + User + Owner + + 12:00 PM + + + 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... + + + {Array.from({ length: 100 }).map((_, index) => ( + + ))} + + + + + + + + + + + + +);