Skip to content

Commit 73bf4a4

Browse files
ivans-nettoclaude
ivans-netto
and
claude
authored
feat(fuselage): Render message mentions as plain text instead of pills (#2155)
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
1 parent 2957447 commit 73bf4a4

5 files changed

Lines changed: 112 additions & 79 deletions

File tree

‎.changeset/mention-layout-unification.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@rocket.chat/fuselage': minor
3+
---
4+
5+
feat(fuselage): Render message mentions as plain text instead of pills

‎packages/fuselage/src/components/Message/Messages.stories.tsx‎

Lines changed: 91 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -140,43 +140,34 @@ export const Default: Story = {
140140
</MessageHeader>
141141
<MessageBody>
142142
Ut enim ad minim veniam,{' '}
143-
<MessageHighlight clickable variant='other'>
143+
<MessageHighlight clickable variant='link'>
144144
channel
145145
</MessageHighlight>{' '}
146146
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
147147
commodo consequat a duis aute irure dolor in{' '}
148148
<MessageHighlight clickable variant='critical'>
149149
Haylie George
150150
</MessageHighlight>{' '}
151-
<MessageHighlight clickable variant='critical'>
152-
Haylie George
153-
</MessageHighlight>{' '}
154-
<MessageHighlight clickable variant='critical'>
155-
Haylie George
156-
</MessageHighlight>{' '}
157-
<MessageHighlight clickable variant='critical'>
158-
Haylie George
159-
</MessageHighlight>{' '}
160-
<MessageHighlight clickable variant='critical'>
161-
Haylie George
162-
</MessageHighlight>{' '}
163151
commodo consequat a duis aute irure dolor in reprehenderit in
164152
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
165153
Consectetur adipiscing commodo consequat a duis aute irure dolor in
166154
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
167155
pariatur. Consectetur adipiscing{' '}
168156
<MessageHighlight variant='critical'>
169-
highlighted text
170-
</MessageHighlight>
157+
highlighted word
158+
</MessageHighlight>{' '}
171159
touching text.{' '}
172160
<MessageHighlight clickable variant='relevant'>
173161
all
162+
</MessageHighlight>{' '}
163+
<MessageHighlight clickable variant='relevant'>
164+
here
174165
</MessageHighlight>
175-
. elit, sed do eiusmod tempor incididunt
166+
. elit, sed do eiusmod tempor incididunt{' '}
176167
<MessageHighlight clickable variant='link'>
177168
Room Name
178-
</MessageHighlight>
179-
ut labore et dolore magna
169+
</MessageHighlight>{' '}
170+
ut labore et dolore magna{' '}
180171
<MessageHighlight clickable variant='other'>
181172
Gabriel.Henriques
182173
</MessageHighlight>
@@ -201,6 +192,88 @@ export const Default: Story = {
201192
),
202193
};
203194

195+
export const WithMentions: Story = {
196+
parameters: {
197+
docs: {
198+
description: {
199+
story:
200+
'The same message with its mentions rendered without and with the ' +
201+
'`@`/`#` symbols, which is what the mention symbol setting toggles. ' +
202+
'Mentions are plain text in a distinct color, so they read as part ' +
203+
'of the sentence instead of interrupting it.',
204+
},
205+
},
206+
},
207+
render: () => (
208+
<Box>
209+
<Message>
210+
<MessageLeftContainer>
211+
<Avatar url={avatarUrl} size={'x36'} />
212+
</MessageLeftContainer>
213+
<MessageContainer>
214+
<MessageHeader>
215+
<MessageNameContainer>
216+
<MessageName>Haylie George</MessageName>{' '}
217+
<MessageUsername>@haylie.george</MessageUsername>
218+
</MessageNameContainer>
219+
<MessageTimestamp>12:00 PM</MessageTimestamp>
220+
</MessageHeader>
221+
<MessageBody>
222+
<MessageHighlight clickable variant='other'>
223+
gabriel.henriques
224+
</MessageHighlight>
225+
, I moved the release checklist to{' '}
226+
<MessageHighlight clickable variant='link'>
227+
release-planning
228+
</MessageHighlight>{' '}
229+
—{' '}
230+
<MessageHighlight clickable variant='relevant'>
231+
here
232+
</MessageHighlight>{' '}
233+
please review it before the handoff to{' '}
234+
<MessageHighlight clickable variant='critical'>
235+
haylie.george
236+
</MessageHighlight>
237+
.
238+
</MessageBody>
239+
</MessageContainer>
240+
</Message>
241+
<Message>
242+
<MessageLeftContainer>
243+
<Avatar url={avatarUrl} size={'x36'} />
244+
</MessageLeftContainer>
245+
<MessageContainer>
246+
<MessageHeader>
247+
<MessageNameContainer>
248+
<MessageName>Haylie George</MessageName>{' '}
249+
<MessageUsername>@haylie.george</MessageUsername>
250+
</MessageNameContainer>
251+
<MessageTimestamp>12:01 PM</MessageTimestamp>
252+
</MessageHeader>
253+
<MessageBody>
254+
<MessageHighlight clickable variant='other'>
255+
@gabriel.henriques
256+
</MessageHighlight>
257+
, I moved the release checklist to{' '}
258+
<MessageHighlight clickable variant='link'>
259+
#release-planning
260+
</MessageHighlight>{' '}
261+
—{' '}
262+
<MessageHighlight clickable variant='relevant'>
263+
@here
264+
</MessageHighlight>{' '}
265+
please review it before the handoff to{' '}
266+
<MessageHighlight clickable variant='critical'>
267+
@haylie.george
268+
</MessageHighlight>
269+
.
270+
</MessageBody>
271+
</MessageContainer>
272+
</Message>
273+
</Box>
274+
),
275+
};
276+
204277
export const WithClickableAuthorName: Story = {
205278
render: () => (
206279
<Box>

‎packages/fuselage/src/components/Message/Messages.styles.scss‎

Lines changed: 16 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
@use '../../styles/colors.scss';
22
@use '../../styles/functions.scss' as *;
33
@use '../../styles/lengths.scss';
4+
@use '../../styles/mixins/shadows.scss';
45
@use '../../styles/mixins/size.scss';
6+
@use '../../styles/mixins/states.scss';
57
@use '../../styles/mixins/templates.scss';
68
@use '../../styles/typography.scss' as *;
79
@use './MessageDivider/MessageDivider.styles.scss';
@@ -45,44 +47,26 @@ $message-background-color-highlight: theme(
4547

4648
$message-highlight-colors-critical-color: theme(
4749
'message-highlight-colors-critical-color',
48-
colors.font(pure-white)
49-
);
50-
$message-highlight-colors-background-critical-color: theme(
51-
'message-highlight-colors-background-critical-color',
52-
colors.badge('level-4')
50+
colors.status-font(on-danger)
5351
);
5452

5553
$message-highlight-colors-relevant-color: theme(
5654
'message-highlight-colors-relevant-color',
57-
colors.font(pure-white)
58-
);
59-
$message-highlight-colors-background-relevant-color: theme(
60-
'message-highlight-colors-background-relevant-color',
61-
colors.badge('level-3')
55+
colors.status-font(on-service-1)
6256
);
6357

6458
$message-highlight-colors-other-color: theme(
6559
'message-highlight-colors-other-color',
66-
colors.font(default)
60+
colors.status-font(on-warning)
6761
);
6862

69-
$message-highlight-colors-other-link-color: theme(
70-
'message-highlight-colors-other-color',
71-
colors.font(info)
72-
);
73-
74-
$message-highlight-colors-background-other-color: theme(
75-
'message-highlight-colors-background-other-color',
76-
colors.badge('level-0')
63+
$message-highlight-colors-link-color: theme(
64+
'message-highlight-colors-link-color',
65+
colors.status-font(on-info)
7766
);
7867

7968
$message-block-width-fixed: theme('message-block-width-fixed', 368px);
8069

81-
$message-highlight-border-radius: theme(
82-
'message-highlight-border-radius',
83-
lengths.border-radius(medium)
84-
);
85-
8670
%rcx-margins-header {
8771
margin-inline: lengths.margin(2);
8872
}
@@ -412,13 +396,7 @@ $message-highlight-border-radius: theme(
412396
}
413397

414398
&__highlight {
415-
position: relative;
416-
417-
z-index: 1;
418-
419-
display: inline-block;
420-
421-
padding-inline: lengths.padding(2);
399+
display: inline;
422400

423401
white-space: nowrap;
424402

@@ -434,50 +412,27 @@ $message-highlight-border-radius: theme(
434412
}
435413
}
436414

437-
&::before {
438-
position: absolute;
439-
440-
z-index: -1;
441-
442-
width: 100%;
443-
height: 18px;
444-
445-
content: '';
446-
447-
transform: translateY(lengths.margin(1)) translateX(lengths.margin(-2));
448-
449-
border-radius: $message-highlight-border-radius;
450-
}
451-
452415
&--critical {
453-
&::before {
454-
background-color: $message-highlight-colors-background-critical-color;
455-
}
456416
color: $message-highlight-colors-critical-color;
457417
}
458418

459419
&--relevant {
460-
&::before {
461-
background-color: $message-highlight-colors-background-relevant-color;
462-
}
463420
color: $message-highlight-colors-relevant-color;
464421
}
465422

466-
&--other,
467423
&--link {
468-
&::before {
469-
background-color: $message-highlight-colors-background-other-color;
470-
}
471-
}
472-
473-
&--link {
474-
color: $message-highlight-colors-other-link-color;
424+
color: $message-highlight-colors-link-color;
475425
}
476426

477427
&--other {
478428
color: $message-highlight-colors-other-color;
479429
}
480430

481-
@include templates.focus-state;
431+
@include states.on-focus-visible {
432+
border-radius: lengths.border-radius(medium);
433+
outline: lengths.border-width('default') solid colors.stroke(highlight);
434+
435+
@include shadows.use-focus-shadow(colors.stroke(extra-light-highlight));
436+
}
482437
}
483438
}

‎packages/fuselage/test/snapshots/message-message--default-desktop.png‎

-7.1 KB
Loading

‎packages/fuselage/test/snapshots/message-message--with-mentions-desktop.png‎

45.9 KB
Loading

0 commit comments

Comments
 (0)