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.

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
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
refactor: rename component
filipemarins committed Nov 3, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit a655a27c4b74a7eec135116fe27263fb52353f81
4 changes: 2 additions & 2 deletions packages/fuselage-ui-kit/src/stories/Message.stories.tsx
Original file line number Diff line number Diff line change
@@ -41,10 +41,10 @@ const createStory = (blocks: readonly UiKit.LayoutBlock[]) => {
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Names>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.Names>
</Message.NameContainer>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
<Message.Role>Owner</Message.Role>
Original file line number Diff line number Diff line change
@@ -38,10 +38,10 @@ export default {
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Names>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.Names>
</Message.NameContainer>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
<Message.Role>Owner</Message.Role>
11 changes: 11 additions & 0 deletions packages/fuselage/src/components/Message/MessageNameContainer.tsx
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}
/>
);
11 changes: 0 additions & 11 deletions packages/fuselage/src/components/Message/MessageNames.tsx

This file was deleted.

Original file line number Diff line number Diff line change
@@ -38,10 +38,10 @@ export const Default = () => (
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Names>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.Names>
</Message.NameContainer>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
<Message.Role>Owner</Message.Role>
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ import {
} from '.';
import {
MessageDivider,
MessageNames,
MessageNameContainer,
MessageSystemBlock,
MessageUsername,
} from '..';
@@ -46,9 +46,9 @@ export const Default = () => (
</MessageSystemLeftContainer>
<MessageSystemContainer>
<MessageSystemBlock>
<MessageNames>
<MessageNameContainer>
<MessageSystemName>Haylie George</MessageSystemName>
</MessageNames>
</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
@@ -81,9 +81,9 @@ export const Default = () => (
</MessageSystemLeftContainer>
<MessageSystemContainer>
<MessageSystemBlock>
<MessageNames>
<MessageNameContainer>
<MessageSystemName>Haylie George</MessageSystemName>
</MessageNames>
</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
@@ -115,9 +115,9 @@ export const Default = () => (
</MessageSystemLeftContainer>
<MessageSystemContainer>
<MessageSystemBlock>
<MessageNames>
<MessageNameContainer>
<MessageSystemName>Haylie George</MessageSystemName>
</MessageNames>
</MessageNameContainer>
<MessageSystemBody>
Reprehenderit ut aliquip ex ea commodo consequat a duis aute irure
dolor in in voluptate velit esse cillum dolore eu fugiat nulla
@@ -148,10 +148,10 @@ export const Default = () => (
</MessageSystemLeftContainer>
<MessageSystemContainer>
<MessageSystemBlock>
<MessageNames>
<MessageNameContainer>
<MessageSystemName>Haylie George</MessageSystemName>{' '}
<MessageUsername>@haylie.george</MessageUsername>
</MessageNames>
</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
@@ -183,9 +183,9 @@ export const Default = () => (
</MessageSystemLeftContainer>
<MessageSystemContainer>
<MessageSystemBlock>
<MessageNames>
<MessageNameContainer>
<MessageSystemName>Haylie George</MessageSystemName>
</MessageNames>
</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
44 changes: 22 additions & 22 deletions packages/fuselage/src/components/Message/Messages.stories.tsx
Original file line number Diff line number Diff line change
@@ -30,10 +30,10 @@ export const Default: ComponentStory<typeof Message> = () => (
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Names>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.Names>
</Message.NameContainer>
<Message.Roles>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
@@ -76,10 +76,10 @@ export const WithSequential = () => (
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Names>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.Names>
</Message.NameContainer>
<Message.Roles>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
@@ -191,10 +191,10 @@ export const MessageWithThread = () => (
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Names>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.Names>
</Message.NameContainer>
<Message.Roles>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
@@ -328,10 +328,10 @@ export const MessageSelected = () => {
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Names>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.Names>
</Message.NameContainer>
<Message.Roles>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
@@ -368,10 +368,10 @@ export const MessageEditing = () => (
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Names>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.Names>
</Message.NameContainer>
<Message.Roles>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
@@ -452,10 +452,10 @@ export const MessageUnorderedList = () => (
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Names>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.Names>
</Message.NameContainer>
<Message.Roles>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
@@ -498,10 +498,10 @@ export const MessageOrderedList = () => (
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Names>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.Names>
</Message.NameContainer>
<Message.Roles>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
@@ -544,10 +544,10 @@ export const MessageHighlighted = () => (
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Names>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.Names>
</Message.NameContainer>
<Message.Roles>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
@@ -628,10 +628,10 @@ export const MessagePending = () => (
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Names>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.Names>
</Message.NameContainer>
<Message.Roles>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
@@ -705,10 +705,10 @@ export const MessageWithMetrics: ComponentStory<typeof Message> = () => (
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Names>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.Names>
</Message.NameContainer>
<Message.Roles>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
@@ -758,10 +758,10 @@ export const LotsOfReactions: ComponentStory<typeof Message> = () => (
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Names>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.Names>
</Message.NameContainer>
<Message.Roles>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
Original file line number Diff line number Diff line change
@@ -133,7 +133,7 @@ $message-background-color-highlight: functions.theme(
color: colors.font(annotation);
}

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

display: inline;
6 changes: 3 additions & 3 deletions packages/fuselage/src/components/Message/index.tsx
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@ import { MessageHeader } from './MessageHeader';
import { MessageLeftContainer } from './MessageLeftContainer';
import MessageMetrics from './MessageMetrics';
import { MessageName } from './MessageName';
import { MessageNames } from './MessageNames';
import { MessageNameContainer } from './MessageNameContainer';
import { MessageRole } from './MessageRole';
import { MessageRoles } from './MessageRoles';
import { MessageTimestamp } from './MessageTimestamp';
@@ -28,7 +28,7 @@ export * from './MessageBody';
export * from './MessageContainer';
export * from './MessageContainerFixed';
export * from './MessageHeader';
export * from './MessageNames';
export * from './MessageNameContainer';
export * from './MessageLeftContainer';
export * from './MessageName';
export * from './MessageRole';
@@ -47,7 +47,7 @@ export default Object.assign(Message, {
Body: MessageBody,
Block: MessageBlock,
Timestamp: MessageTimestamp,
Names: MessageNames,
NameContainer: MessageNameContainer,
Name: MessageName,
Username: MessageUsername,
Roles: MessageRoles,
Original file line number Diff line number Diff line change
@@ -24,10 +24,10 @@ const MessageSurface = ({ blocks, onDragEnd }: DraggableListProps) => (
</Message.LeftContainer>
<Message.Container>
<Message.Header>
<Message.Names>
<Message.NameContainer>
<Message.Name>Haylie George</Message.Name>{' '}
<Message.Username>@haylie.george</Message.Username>
</Message.Names>
</Message.NameContainer>
<Message.Role>Admin</Message.Role>
<Message.Role>User</Message.Role>
<Message.Role>Owner</Message.Role>