feat: Message Highlight and Mention components (#1050)

RocketChat · May 18, 2023 · 6c38740 · 6c38740
1 parent 8558795
commit 6c38740
Show file tree

Hide file tree

Showing 7 changed files with 202 additions and 5 deletions.
diff --git a/packages/fuselage/src/Theme.ts b/packages/fuselage/src/Theme.ts
@@ -210,6 +210,7 @@ export const statusColors = {
 type StatusColors = keyof typeof statusColors;
 
 export const badgeBackgroundColors = {
+  'badge-background-level-0': neutral.n400.theme('badge-background-level-0'),
   'badge-background-level-1': neutral.n600.theme('badge-background-level-1'),
   'badge-background-level-2': primary.p550.theme('badge-background-level-2'),
   'badge-background-level-3': service1[500].theme('badge-background-level-3'),

diff --git a/packages/fuselage/src/components/Message/MessageHighlight.tsx b/packages/fuselage/src/components/Message/MessageHighlight.tsx
@@ -0,0 +1,38 @@
+import type { ElementType } from 'react';
+import React from 'react';
+
+import { prependClassName } from '../../helpers/prependClassName';
+
+export type MessageHighlightProps = {
+  is?: ElementType;
+  clickable?: boolean;
+  variant?: 'critical' | 'relevant' | 'other';
+  className?: string;
+  children: any;
+  title?: string;
+};
+
+function MessageHighlight({
+  is: Tag = 'span',
+  variant = 'other',
+  className,
+  clickable,
+  ...props
+}: MessageHighlightProps) {
+  const modifiers = [variant, clickable && 'clickable']
+    .filter(Boolean)
+    .map((modifier) => `rcx-message__highlight--${modifier}`)
+    .join(' ');
+
+  return (
+    <Tag
+      className={prependClassName(
+        className,
+        `rcx-box rcx-box--full rcx-message__highlight ${modifiers}`
+      )}
+      {...props}
+    />
+  );
+}
+
+export default MessageHighlight;
diff --git a/packages/fuselage/src/components/Message/MessageMention.tsx b/packages/fuselage/src/components/Message/MessageMention.tsx
@@ -0,0 +1,25 @@
+import type { ComponentProps } from 'react';
+import React from 'react';
+
+import MessageHighlight from './MessageHighlight';
+
+type MessageMentionProps = {
+  tag?: '#' | '@';
+  innerClassName?: string;
+} & ComponentProps<typeof MessageHighlight>;
+
+function MessageMention({
+  tag,
+  className = '',
+  innerClassName,
+  ...props
+}: MessageMentionProps) {
+  return (
+    <span className={`${className} rcx-message__mention`}>
+      {tag}
+      <MessageHighlight className={innerClassName} {...props} />
+    </span>
+  );
+}
+
+export default MessageMention;
diff --git a/packages/fuselage/src/components/Message/Messages.stories.tsx b/packages/fuselage/src/components/Message/Messages.stories.tsx
@@ -42,12 +42,43 @@ export const Default: ComponentStory<typeof Message> = () => (
           <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
+          Ut enim ad minim veniam,{' '}
+          <Message.Mention clickable tag='#' variant='other'>
+            channel
+          </Message.Mention>{' '}
+          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+          commodo consequat a duis aute irure dolor in{' '}
+          <Message.Mention clickable tag='@' variant='critical'>
+            Haylie George
+          </Message.Mention>{' '}
+          <Message.Mention clickable tag='@' variant='critical'>
+            Haylie George
+          </Message.Mention>{' '}
+          <Message.Mention clickable tag='@' variant='critical'>
+            Haylie George
+          </Message.Mention>{' '}
+          <Message.Mention clickable tag='@' variant='critical'>
+            Haylie George
+          </Message.Mention>{' '}
+          <Message.Mention clickable tag='@' variant='critical'>
+            Haylie George
+          </Message.Mention>{' '}
+          commodo consequat a duis aute irure dolor in reprehenderit in
+          voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+          Consectetur adipiscing 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...
+          pariatur. Consectetur adipiscing{' '}
+          <Message.Highlight variant='critical'>
+            highlighted text
+          </Message.Highlight>{' '}
+          <Message.Mention clickable tag='@' variant='relevant'>
+            all
+          </Message.Mention>{' '}
+          elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          <Message.Mention clickable tag='@' variant='other'>
+            Gabriel.Henriques
+          </Message.Mention>{' '}
+          aliqua. Ut enim ad minim veniam...
         </Message.Body>
         <MessageReactions>
           <MessageReactions.Reaction mine counter={1} />

diff --git a/packages/fuselage/src/components/Message/Messages.styles.scss b/packages/fuselage/src/components/Message/Messages.styles.scss
@@ -52,6 +52,33 @@ $message-background-color-highlight: functions.theme(
 
 $message-link-color: functions.theme('message-link-color', colors.font(info));
 
+$message-highlight-colors-critical-color: theme(
+  'message-highlight-colors-critical-color',
+  colors.font(pure-white)
+);
+$message-highlight-colors-background-critical-color: theme(
+  'message-highlight-colors-background-critical-color',
+  colors.badge('level-4')
+);
+
+$message-highlight-colors-relevant-color: theme(
+  'message-highlight-colors-relevant-color',
+  colors.font(pure-white)
+);
+$message-highlight-colors-background-relevant-color: theme(
+  'message-highlight-colors-background-relevant-color',
+  colors.badge('level-3')
+);
+
+$message-highlight-colors-other-color: theme(
+  'message-highlight-colors-other-color',
+  colors.font(info)
+);
+$message-highlight-colors-background-other-color: theme(
+  'message-highlight-colors-background-other-color',
+  colors.badge('level-0')
+);
+
 .rcx-message {
   @include mixins.container();
   position: relative;
@@ -287,4 +314,72 @@ $message-link-color: functions.theme('message-link-color', colors.font(info));
       @include size.square(lengths.size(44));
     }
   }
+
+  &__mention {
+    white-space: nowrap;
+    word-break: keep-all;
+  }
+
+  &__highlight {
+    position: relative;
+
+    z-index: 1;
+
+    display: inline-block;
+
+    padding-inline-start: lengths.padding(2);
+
+    white-space: nowrap;
+
+    word-break: keep-all;
+
+    font-weight: 500;
+
+    &--clickable {
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    &::before {
+      position: absolute;
+
+      z-index: -1;
+
+      width: calc(100% + lengths.padding(2));
+      height: 18px;
+
+      content: '';
+
+      transform: translateY(lengths.margin(2)) translateX(lengths.margin(-2));
+
+      border-radius: theme(
+        'message-highlight-border-radius',
+        lengths.border-radius(medium)
+      );
+    }
+
+    &--critical {
+      &::before {
+        background-color: $message-highlight-colors-background-critical-color;
+      }
+      color: $message-highlight-colors-critical-color;
+    }
+
+    &--relevant {
+      &::before {
+        background-color: $message-highlight-colors-background-relevant-color;
+      }
+      color: $message-highlight-colors-relevant-color;
+    }
+
+    &--other {
+      &::before {
+        background-color: $message-highlight-colors-background-other-color;
+      }
+      color: $message-highlight-colors-other-color;
+    }
+  }
 }
diff --git a/packages/fuselage/src/components/Message/index.tsx b/packages/fuselage/src/components/Message/index.tsx
@@ -5,7 +5,9 @@ import { MessageContainer } from './MessageContainer';
 import { MessageContainerFixed } from './MessageContainerFixed';
 import { MessageDivider } from './MessageDivider';
 import { MessageHeader } from './MessageHeader';
+import MessageHighlight from './MessageHighlight';
 import { MessageLeftContainer } from './MessageLeftContainer';
+import MessageMention from './MessageMention';
 import MessageMetrics from './MessageMetrics';
 import { MessageName } from './MessageName';
 import { MessageNameContainer } from './MessageNameContainer';
@@ -36,6 +38,8 @@ export * from './MessageRoles';
 export * from './MessageTimestamp';
 export * from './MessageUsername';
 export * from './MessageEmoji';
+export * from './MessageHighlight';
+export * from './MessageMention';
 
 export default Object.assign(Message, {
   Metrics: MessageMetrics,
@@ -53,4 +57,6 @@ export default Object.assign(Message, {
   Roles: MessageRoles,
   Role: MessageRole,
   Divider: MessageDivider,
+  Highlight: MessageHighlight,
+  Mention: MessageMention,
 });
diff --git a/packages/fuselage/src/styles/colors.scss b/packages/fuselage/src/styles/colors.scss
@@ -196,6 +196,7 @@ $-strokes: (
 }
 
 $-badge-backgrounds: (
+  level-0: neutral(400),
   level-1: neutral(600),
   level-2: primary(550),
   level-3: service-1(500),