Skip to content

Commit ce6273b

Browse files
dougfabrisdougfabris
authored
fix(fuselage): Message roles size (#788)
1 parent b9df1e8 commit ce6273b

File tree

3 files changed

+52
-36
lines changed

3 files changed

+52
-36
lines changed

‎packages/fuselage/src/components/Message/MessageRole.tsx

+1-5
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,5 @@ type MessageRoleProps = {
88
};
99

1010
export const MessageRole = (props: MessageRoleProps) => (
11-
<Tag
12-
className='rcx-box rcx-box--full rcx-message-header__role'
13-
{...props}
14-
small
15-
/>
11+
<Tag className='rcx-box rcx-box--full rcx-message-header__role' {...props} />
1612
);

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

+50-30
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,11 @@ export const Default: ComponentStory<typeof Message> = () => (
3232
<Message.Header>
3333
<Message.Name>Haylie George</Message.Name>
3434
<Message.Username>@haylie.george</Message.Username>
35-
<Message.Role>Admin</Message.Role>
36-
<Message.Role>User</Message.Role>
37-
<Message.Role>Owner</Message.Role>
35+
<Message.Roles>
36+
<Message.Role>Admin</Message.Role>
37+
<Message.Role>User</Message.Role>
38+
<Message.Role>Owner</Message.Role>
39+
</Message.Roles>
3840
<Message.Timestamp>12:00 PM</Message.Timestamp>
3941
</Message.Header>
4042
<Message.Body>
@@ -74,9 +76,11 @@ export const WithSequential = () => (
7476
<Message.Header>
7577
<Message.Name>Haylie George</Message.Name>
7678
<Message.Username>@haylie.george</Message.Username>
77-
<Message.Role>Admin</Message.Role>
78-
<Message.Role>User</Message.Role>
79-
<Message.Role>Owner</Message.Role>
79+
<Message.Roles>
80+
<Message.Role>Admin</Message.Role>
81+
<Message.Role>User</Message.Role>
82+
<Message.Role>Owner</Message.Role>
83+
</Message.Roles>
8084
<Message.Timestamp>12:00 PM</Message.Timestamp>
8185
</Message.Header>
8286
<Message.Body>
@@ -185,9 +189,11 @@ export const MessageWithThread = () => (
185189
<Message.Header>
186190
<Message.Name>Haylie George</Message.Name>
187191
<Message.Username>@haylie.george</Message.Username>
188-
<Message.Role>Admin</Message.Role>
189-
<Message.Role>User</Message.Role>
190-
<Message.Role>Owner</Message.Role>
192+
<Message.Roles>
193+
<Message.Role>Admin</Message.Role>
194+
<Message.Role>User</Message.Role>
195+
<Message.Role>Owner</Message.Role>
196+
</Message.Roles>
191197
<Message.Timestamp>12:00 PM</Message.Timestamp>
192198
</Message.Header>
193199
<Message.Body>
@@ -318,9 +324,11 @@ export const MessageSelected = () => {
318324
<Message.Header>
319325
<Message.Name>Haylie George</Message.Name>
320326
<Message.Username>@haylie.george</Message.Username>
321-
<Message.Role>Admin</Message.Role>
322-
<Message.Role>User</Message.Role>
323-
<Message.Role>Owner</Message.Role>
327+
<Message.Roles>
328+
<Message.Role>Admin</Message.Role>
329+
<Message.Role>User</Message.Role>
330+
<Message.Role>Owner</Message.Role>
331+
</Message.Roles>
324332
<Message.Timestamp>12:00 PM</Message.Timestamp>
325333
</Message.Header>
326334
<Message.Body>
@@ -354,9 +362,11 @@ export const MessageEditing = () => (
354362
<Message.Header>
355363
<Message.Name>Haylie George</Message.Name>
356364
<Message.Username>@haylie.george</Message.Username>
357-
<Message.Role>Admin</Message.Role>
358-
<Message.Role>User</Message.Role>
359-
<Message.Role>Owner</Message.Role>
365+
<Message.Roles>
366+
<Message.Role>Admin</Message.Role>
367+
<Message.Role>User</Message.Role>
368+
<Message.Role>Owner</Message.Role>
369+
</Message.Roles>
360370
<Message.Timestamp>12:00 PM</Message.Timestamp>
361371
</Message.Header>
362372
<Message.Body>
@@ -434,9 +444,11 @@ export const MessageUnorderedList = () => (
434444
<Message.Header>
435445
<Message.Name>Haylie George</Message.Name>
436446
<Message.Username>@haylie.george</Message.Username>
437-
<Message.Role>Admin</Message.Role>
438-
<Message.Role>User</Message.Role>
439-
<Message.Role>Owner</Message.Role>
447+
<Message.Roles>
448+
<Message.Role>Admin</Message.Role>
449+
<Message.Role>User</Message.Role>
450+
<Message.Role>Owner</Message.Role>
451+
</Message.Roles>
440452
<Message.Timestamp>12:00 PM</Message.Timestamp>
441453
</Message.Header>
442454
<Message.Body>
@@ -476,9 +488,11 @@ export const MessageOrderedList = () => (
476488
<Message.Header>
477489
<Message.Name>Haylie George</Message.Name>
478490
<Message.Username>@haylie.george</Message.Username>
479-
<Message.Role>Admin</Message.Role>
480-
<Message.Role>User</Message.Role>
481-
<Message.Role>Owner</Message.Role>
491+
<Message.Roles>
492+
<Message.Role>Admin</Message.Role>
493+
<Message.Role>User</Message.Role>
494+
<Message.Role>Owner</Message.Role>
495+
</Message.Roles>
482496
<Message.Timestamp>12:00 PM</Message.Timestamp>
483497
</Message.Header>
484498
<Message.Body>
@@ -518,9 +532,11 @@ export const MessageHighlighted = () => (
518532
<Message.Header>
519533
<Message.Name>Haylie George</Message.Name>
520534
<Message.Username>@haylie.george</Message.Username>
521-
<Message.Role>Admin</Message.Role>
522-
<Message.Role>User</Message.Role>
523-
<Message.Role>Owner</Message.Role>
535+
<Message.Roles>
536+
<Message.Role>Admin</Message.Role>
537+
<Message.Role>User</Message.Role>
538+
<Message.Role>Owner</Message.Role>
539+
</Message.Roles>
524540
<Message.Timestamp>12:00 PM</Message.Timestamp>
525541
</Message.Header>
526542
<Message.Body>
@@ -598,9 +614,11 @@ export const MessagePending = () => (
598614
<Message.Header>
599615
<Message.Name>Haylie George</Message.Name>
600616
<Message.Username>@haylie.george</Message.Username>
601-
<Message.Role>Admin</Message.Role>
602-
<Message.Role>User</Message.Role>
603-
<Message.Role>Owner</Message.Role>
617+
<Message.Roles>
618+
<Message.Role>Admin</Message.Role>
619+
<Message.Role>User</Message.Role>
620+
<Message.Role>Owner</Message.Role>
621+
</Message.Roles>
604622
<Message.Timestamp>12:00 PM</Message.Timestamp>
605623
</Message.Header>
606624
<Message.Body>
@@ -671,9 +689,11 @@ export const MessageWithMetrics: ComponentStory<typeof Message> = () => (
671689
<Message.Header>
672690
<Message.Name>Haylie George</Message.Name>
673691
<Message.Username>@haylie.george</Message.Username>
674-
<Message.Role>Admin</Message.Role>
675-
<Message.Role>User</Message.Role>
676-
<Message.Role>Owner</Message.Role>
692+
<Message.Roles>
693+
<Message.Role>Admin</Message.Role>
694+
<Message.Role>User</Message.Role>
695+
<Message.Role>Owner</Message.Role>
696+
</Message.Roles>
677697
<Message.Timestamp>12:00 PM</Message.Timestamp>
678698
</Message.Header>
679699
<Message.Body>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ $message-background-color-highlight: functions.theme(
114114
@include typography.use-with-truncated-text();
115115
display: flex;
116116
flex-direction: row;
117-
align-items: baseline;
117+
align-items: center;
118118
flex-grow: 1;
119119
flex-shrink: 1;
120120

0 commit comments

Comments
 (0)