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

…889) * refactor: message system timestamp * refactor: add message system variation * feat: add message names wrapper * chore: move example * refactor: rename component * chore: depends complete build to storybook Co-authored-by: gabriellsh <[email protected]>
RocketChat · Nov 4, 2022 · 97dd401 · 97dd401
1 parent d6e7135
commit 97dd401
Show file tree

Hide file tree

Showing 17 changed files with 228 additions and 61 deletions.
diff --git a/packages/fuselage-ui-kit/src/stories/Message.stories.tsx b/packages/fuselage-ui-kit/src/stories/Message.stories.tsx
@@ -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>

diff --git a/...s/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreview.stories.tsx b/...s/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreview.stories.tsx
@@ -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>

diff --git a/packages/fuselage/src/components/Message/MessageNameContainer.tsx b/packages/fuselage/src/components/Message/MessageNameContainer.tsx
@@ -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}
+  />
+);
diff --git a/...fuselage/src/components/Message/MessageStatusIndicator/MessageStatusIndicator.stories.tsx b/...fuselage/src/components/Message/MessageStatusIndicator/MessageStatusIndicator.stories.tsx
@@ -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>

diff --git a/packages/fuselage/src/components/Message/MessageSystem/MessageSystem.stories.tsx b/packages/fuselage/src/components/Message/MessageSystem/MessageSystem.stories.tsx
@@ -8,7 +8,12 @@ import {
   MessageSystemName,
   MessageSystemTimestamp,
 } from '.';
-import { MessageDivider, MessageSystemBlock } from '..';
+import {
+  MessageDivider,
+  MessageNameContainer,
+  MessageSystemBlock,
+  MessageUsername,
+} from '..';
 import { Avatar, Box } from '../..';
 
 export default {
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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

diff --git a/packages/fuselage/src/components/Message/MessageSystem/MessageSystem.styles.scss b/packages/fuselage/src/components/Message/MessageSystem/MessageSystem.styles.scss
@@ -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;

diff --git a/packages/fuselage/src/components/Message/MessageSystem/MessageSystemTimestamp.tsx b/packages/fuselage/src/components/Message/MessageSystem/MessageSystemTimestamp.tsx
@@ -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} />
+);
diff --git a/packages/fuselage/src/components/Message/MessageSystem/index.tsx b/packages/fuselage/src/components/Message/MessageSystem/index.tsx
@@ -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;
diff --git a/packages/fuselage/src/components/Message/Messages.stories.tsx b/packages/fuselage/src/components/Message/Messages.stories.tsx
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>

diff --git a/packages/fuselage/src/components/Message/Messages.styles.scss b/packages/fuselage/src/components/Message/Messages.styles.scss
@@ -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;
@@ -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;
 
@@ -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;