Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(fuselage): Reaction list not wrapping #843

Merged
merged 3 commits into from
Sep 8, 2022
Merged

fix(fuselage): Reaction list not wrapping #843

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5a2cc79
Fix reactions wrap and styles
gabriellsh Sep 6, 2022
1bf26b5
Merge branch 'develop' into fix/messageReactions
dougfabris Sep 6, 2022
7fa875d
Merge branches 'fix/messageReactions' and 'develop' of github.com:Roc…
tassoevan Sep 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions packages/fuselage/src/components/Message/MessageReactions/MessageReactions.styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
7 changes: 3 additions & 4 deletions packages/fuselage/src/components/Message/MessageReactions/MessageReactions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
44 changes: 44 additions & 0 deletions packages/fuselage/src/components/Message/Messages.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);