fix(fuselage): MessageSystem time fontScale (#1280)

RocketChat · Feb 5, 2024 · 8b8d43b · 8b8d43b
1 parent dec9be9
commit 8b8d43b
Show file tree

Hide file tree

Showing 5 changed files with 366 additions and 32 deletions.
diff --git a/.changeset/dirty-brooms-double.md b/.changeset/dirty-brooms-double.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": patch
+---
+
+fix(fuselage): MessageSystem time fontScale
diff --git a/packages/fuselage/src/components/Message/MessageSystem/MessageSystem.spec.tsx b/packages/fuselage/src/components/Message/MessageSystem/MessageSystem.spec.tsx
@@ -1,34 +1,29 @@
+import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 
-import {
-  MessageSystem,
-  MessageSystemLeftContainer,
-  MessageSystemContainer,
-  MessageSystemBlock,
-  MessageSystemName,
-  MessageSystemBody,
-  MessageSystemTimestamp,
-} from '.';
+import * as stories from './MessageSystem.stories';
 
-it('renders without crashing', () => {
-  render(
-    <MessageSystem>
-      <MessageSystemLeftContainer />
-      <MessageSystemContainer>
-        <MessageSystemBlock>
-          <MessageSystemName>Haylie George</MessageSystemName>
-          <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>
-  );
-});
+const testCases = Object.values(composeStories(stories)).map((Story) => [
+  Story.storyName || 'Story',
+  Story,
+]);
+
+test.each(testCases)(
+  `renders %s without crashing`,
+  async (_storyname, Story) => {
+    const tree = render(<Story />);
+    expect(tree.baseElement).toMatchSnapshot();
+  }
+);
+
+test.each(testCases)(
+  '%s should have no a11y violations',
+  async (_storyname, Story) => {
+    const { container } = render(<Story />);
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  }
+);
diff --git a/packages/fuselage/src/components/Message/MessageSystem/MessageSystem.stories.tsx b/packages/fuselage/src/components/Message/MessageSystem/MessageSystem.stories.tsx
@@ -1,3 +1,4 @@
+import type { ComponentStory } from '@storybook/react';
 import React from 'react';
 
 import {
@@ -24,12 +25,13 @@ export default {
   },
 };
 
-export const Default = () => (
+export const Default: ComponentStory<typeof MessageSystem> = () => (
   <Box overflow='hidden'>
     <MessageDivider>May, 24, 2020</MessageDivider>
     <MessageSystem>
       <MessageSystemLeftContainer>
         <Avatar
+          alt=''
           url='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
                 4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
                 IyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAA
@@ -65,6 +67,7 @@ export const Default = () => (
     <MessageSystem>
       <MessageSystemLeftContainer>
         <Avatar
+          alt=''
           url='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
                 4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
                 IyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAA
@@ -99,6 +102,7 @@ export const Default = () => (
     <MessageSystem>
       <MessageSystemLeftContainer>
         <Avatar
+          alt=''
           url='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
                 4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
                 IyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAA
@@ -132,6 +136,7 @@ export const Default = () => (
     <MessageSystem>
       <MessageSystemLeftContainer>
         <Avatar
+          alt=''
           url='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
                 4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
                 IyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAA
@@ -167,6 +172,7 @@ export const Default = () => (
     <MessageSystem isSelected>
       <MessageSystemLeftContainer>
         <Avatar
+          alt=''
           url='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
                 4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
                 IyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAA

diff --git a/packages/fuselage/src/components/Message/MessageSystem/MessageSystem.styles.scss b/packages/fuselage/src/components/Message/MessageSystem/MessageSystem.styles.scss
@@ -54,7 +54,7 @@ $message-system-background-color-selected: functions.theme(
 
   &__time {
     @include typography.use-with-truncated-text();
-    @include typography.use-font-scale(p2);
+    @include typography.use-font-scale(c1);
     flex-shrink: 0;
 
     margin-inline: lengths.margin(2);