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

feat(fuselage): add message names wrapper and update system message #889

Merged
merged 7 commits into from
Nov 4, 2022
Merged

feat(fuselage): add message names wrapper and update system message #889

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9a0341b
refactor: message system timestamp
filipemarins Oct 31, 2022
0eb6fcd
refactor: add message system variation
filipemarins Nov 1, 2022
915adf8
feat: add message names wrapper
filipemarins Nov 1, 2022
f929492
chore: move example
filipemarins Nov 1, 2022
a655a27
refactor: rename component
filipemarins Nov 3, 2022
893b593
Merge branch 'develop' into tc-189
gabriellsh Nov 3, 2022
bd913da
chore: depends complete build to storybook
filipemarins Nov 3, 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
6 changes: 4 additions & 2 deletions packages/fuselage-ui-kit/src/stories/Message.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,10 @@ const createStory = (blocks: readonly UiKit.LayoutBlock[]) => {
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Name>Haylie George</Message.Name>
<Message.Username>@haylie.george</Message.Username>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.NameContainer>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
<Message.Role>Owner</Message.Role>
Expand Down
6 changes: 4 additions & 2 deletions ...s/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreview.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,10 @@ export default {
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Name>Haylie George</Message.Name>
<Message.Username>@haylie.george</Message.Username>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.NameContainer>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
<Message.Role>Owner</Message.Role>
Expand Down
11 changes: 11 additions & 0 deletions packages/fuselage/src/components/Message/MessageNameContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import type { AllHTMLAttributes } from 'react';
import React from 'react';

type MessageNameContainerProps = AllHTMLAttributes<HTMLSpanElement>;

export const MessageNameContainer = (props: MessageNameContainerProps) => (
<span
className='rcx-box rcx-box--full rcx-message-header__name-container'
{...props}
/>
);
6 changes: 4 additions & 2 deletions ...fuselage/src/components/Message/MessageStatusIndicator/MessageStatusIndicator.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,10 @@ export const Default = () => (
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Name>Haylie George</Message.Name>
<Message.Username>@haylie.george</Message.Username>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.NameContainer>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
<Message.Role>Owner</Message.Role>
Expand Down
58 changes: 53 additions & 5 deletions packages/fuselage/src/components/Message/MessageSystem/MessageSystem.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,12 @@ import {
MessageSystemName,
MessageSystemTimestamp,
} from '.';
import { MessageDivider, MessageSystemBlock } from '..';
import {
MessageDivider,
MessageNameContainer,
MessageSystemBlock,
MessageUsername,
} from '..';
import { Avatar, Box } from '../..';

export default {
Expand Down Expand Up @@ -41,7 +46,9 @@ export const Default = () => (
</MessageSystemLeftContainer>
<MessageSystemContainer>
<MessageSystemBlock>
<MessageSystemName>Haylie George</MessageSystemName>
<MessageNameContainer>
<MessageSystemName>Haylie George</MessageSystemName>
</MessageNameContainer>
<MessageSystemBody>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat a duis aute irure dolor in
Expand Down Expand Up @@ -74,7 +81,9 @@ export const Default = () => (
</MessageSystemLeftContainer>
<MessageSystemContainer>
<MessageSystemBlock>
<MessageSystemName>Haylie George</MessageSystemName>
<MessageNameContainer>
<MessageSystemName>Haylie George</MessageSystemName>
</MessageNameContainer>
<MessageSystemBody>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat a duis aute irure dolor in
Expand Down Expand Up @@ -106,7 +115,9 @@ export const Default = () => (
</MessageSystemLeftContainer>
<MessageSystemContainer>
<MessageSystemBlock>
<MessageSystemName>Haylie George</MessageSystemName>
<MessageNameContainer>
<MessageSystemName>Haylie George</MessageSystemName>
</MessageNameContainer>
<MessageSystemBody>
Reprehenderit ut aliquip ex ea commodo consequat a duis aute irure
dolor in in voluptate velit esse cillum dolore eu fugiat nulla
Expand All @@ -118,6 +129,41 @@ export const Default = () => (
</MessageSystemBlock>
</MessageSystemContainer>
</MessageSystem>
<MessageSystem>
<MessageSystemLeftContainer>
<Avatar
url='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
IyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAA
AAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAg
MREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6L
xqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVr
jbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRk
eX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef
6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkB
SuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlP
UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'
size='x18'
/>
</MessageSystemLeftContainer>
<MessageSystemContainer>
<MessageSystemBlock>
<MessageNameContainer>
<MessageSystemName>Haylie George</MessageSystemName>{' '}
<MessageUsername>@haylie.george</MessageUsername>
</MessageNameContainer>
<MessageSystemBody>
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...
</MessageSystemBody>
<MessageSystemTimestamp>12:00 PM</MessageSystemTimestamp>
</MessageSystemBlock>
</MessageSystemContainer>
</MessageSystem>
<MessageSystem isSelected>
<MessageSystemLeftContainer>
<Avatar
Expand All @@ -137,7 +183,9 @@ export const Default = () => (
</MessageSystemLeftContainer>
<MessageSystemContainer>
<MessageSystemBlock>
<MessageSystemName>Haylie George</MessageSystemName>
<MessageNameContainer>
<MessageSystemName>Haylie George</MessageSystemName>
</MessageNameContainer>
<MessageSystemBody>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat a duis aute irure dolor in
Expand Down
18 changes: 13 additions & 5 deletions packages/fuselage/src/components/Message/MessageSystem/MessageSystem.styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,23 +35,31 @@ $message-system-background-color-selected: functions.theme(
}

&__body {
@include typography.use-font-scale(c1);
@include typography.use-font-scale(p2);
@include typography.use-with-truncated-text();
margin-inline: lengths.margin(4);
margin-inline: lengths.margin(2);

color: colors.font(annotation);
}

&__name {
@include typography.use-font-scale(c2);
@include typography.use-font-scale(p2b);
@include typography.use-with-truncated-text();
flex-shrink: 0;

margin-inline: lengths.margin(4);

color: colors.font(default);
}

&__time {
@include typography.use-with-truncated-text();
@include typography.use-font-scale(p2);
flex-shrink: 0;

margin-inline: lengths.margin(2);

color: colors.font(annotation);
}

&__block {
display: flex;
flex-direction: row;
Expand Down
8 changes: 8 additions & 0 deletions packages/fuselage/src/components/Message/MessageSystem/MessageSystemTimestamp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import type { ReactNode } from 'react';
import React from 'react';

type MessageSystemTimestampProps = { children: ReactNode; title?: string };

export const MessageSystemTimestamp = (props: MessageSystemTimestampProps) => (
<span className='rcx-box rcx-box--full rcx-message-system__time' {...props} />
);
3 changes: 1 addition & 2 deletions packages/fuselage/src/components/Message/MessageSystem/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { MessageLeftContainer } from '../MessageLeftContainer';
import { MessageTimestamp } from '../MessageTimestamp';

export * from './MessageSystem';
export * from './MessageSystemBlock';
export * from './MessageSystemBody';
export * from './MessageSystemContainer';
export * from './MessageSystemName';
export * from './MessageSystemTimestamp';
export const MessageSystemLeftContainer = MessageLeftContainer;
export const MessageSystemTimestamp = MessageTimestamp;
66 changes: 44 additions & 22 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 @@ -30,8 +30,10 @@ export const Default: ComponentStory<typeof Message> = () => (
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Name>Haylie George</Message.Name>
<Message.Username>@haylie.george</Message.Username>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.NameContainer>
<Message.Roles>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
Expand Down Expand Up @@ -74,8 +76,10 @@ export const WithSequential = () => (
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Name>Haylie George</Message.Name>
<Message.Username>@haylie.george</Message.Username>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.NameContainer>
<Message.Roles>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
Expand Down Expand Up @@ -187,8 +191,10 @@ export const MessageWithThread = () => (
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Name>Haylie George</Message.Name>
<Message.Username>@haylie.george</Message.Username>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.NameContainer>
<Message.Roles>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
Expand Down Expand Up @@ -322,8 +328,10 @@ export const MessageSelected = () => {
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Name>Haylie George</Message.Name>
<Message.Username>@haylie.george</Message.Username>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.NameContainer>
<Message.Roles>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
Expand Down Expand Up @@ -360,8 +368,10 @@ export const MessageEditing = () => (
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Name>Haylie George</Message.Name>
<Message.Username>@haylie.george</Message.Username>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.NameContainer>
<Message.Roles>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
Expand Down Expand Up @@ -442,8 +452,10 @@ export const MessageUnorderedList = () => (
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Name>Haylie George</Message.Name>
<Message.Username>@haylie.george</Message.Username>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.NameContainer>
<Message.Roles>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
Expand Down Expand Up @@ -486,8 +498,10 @@ export const MessageOrderedList = () => (
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Name>Haylie George</Message.Name>
<Message.Username>@haylie.george</Message.Username>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.NameContainer>
<Message.Roles>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
Expand Down Expand Up @@ -530,8 +544,10 @@ export const MessageHighlighted = () => (
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Name>Haylie George</Message.Name>
<Message.Username>@haylie.george</Message.Username>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.NameContainer>
<Message.Roles>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
Expand Down Expand Up @@ -612,8 +628,10 @@ export const MessagePending = () => (
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Name>Haylie George</Message.Name>
<Message.Username>@haylie.george</Message.Username>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.NameContainer>
<Message.Roles>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
Expand Down Expand Up @@ -687,8 +705,10 @@ export const MessageWithMetrics: ComponentStory<typeof Message> = () => (
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Name>Haylie George</Message.Name>
<Message.Username>@haylie.george</Message.Username>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.NameContainer>
<Message.Roles>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
Expand Down Expand Up @@ -738,8 +758,10 @@ export const LotsOfReactions: ComponentStory<typeof Message> = () => (
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Name>Haylie George</Message.Name>
<Message.Username>@haylie.george</Message.Username>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.NameContainer>
<Message.Roles>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
Expand Down
21 changes: 7 additions & 14 deletions packages/fuselage/src/components/Message/Messages.styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,8 +133,13 @@ $message-background-color-highlight: functions.theme(
color: colors.font(annotation);
}

&__name {
&__name-container {
@extend %rcx-margins-header;

display: inline;
}

&__name {
@include typography.use-font-scale(h5);
@include typography.use-with-truncated-text();
flex-shrink: 1;
Expand All @@ -143,8 +148,7 @@ $message-background-color-highlight: functions.theme(
}

&__username {
@extend %rcx-margins-header;
@include typography.use-font-scale(p2m);
@include typography.use-font-scale(p2);
@include typography.use-with-truncated-text();
flex-shrink: 1;

Expand Down Expand Up @@ -236,17 +240,6 @@ $message-background-color-highlight: functions.theme(
}
}

&-paragraph {
margin: 0;
padding: 0;

&:empty::before {
display: inline-block;

content: '';
}
}

&__emoji {
display: inline-block;

Expand Down
Loading