feat(fuselage): TableSelection visual improvements (#1409)

.changeset/clever-candles-shop.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": minor
+---
+
+feat(fuselage): TableSelection visual improvements

packages/fuselage/src/components/Table/Table.spec.tsx

@@ -3,67 +3,29 @@ import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 import React from 'react';
 
-import { Table, TableRow, TableHead, TableBody, TableCell, TableFoot } from '.';
 import * as stories from './Table.stories';
 
-const { Default, Selected } = composeStories(stories);
-
-describe('[Table Component]', () => {
-  it('renders Table without crashing', () => {
-    render(<Table />);
-  });
-
-  it('renders TableRow without crashing', () => {
-    render(<TableRow />, {
-      wrapper: ({ children }) => (
-        <table>
-          <tbody>{children}</tbody>
-        </table>
-      ),
-    });
-  });
-
-  it('renders TableHead without crashing', () => {
-    render(<TableHead />, {
-      wrapper: ({ children }) => <table>{children}</table>,
-    });
-  });
-
-  it('renders TableBody without crashing', () => {
-    render(<TableBody />, {
-      wrapper: ({ children }) => <table>{children}</table>,
-    });
-  });
-
-  it('renders TableFoot without crashing', () => {
-    render(<TableFoot />, {
-      wrapper: ({ children }) => <table>{children}</table>,
-    });
-  });
-
-  it('renders TableCell without crashing', () => {
-    render(<TableCell />, {
-      wrapper: ({ children }) => (
-        <table>
-          <tbody>
-            <tr>{children}</tr>
-          </tbody>
-        </table>
-      ),
-    });
-  });
-
-  it('should have no a11y violations on Default story', async () => {
-    const { container: defaultContainer } = render(<Default />);
-
-    const defaultResults = await axe(defaultContainer);
-    expect(defaultResults).toHaveNoViolations();
-  });
-
-  it('should have no a11y violations on Selected story', async () => {
-    const { container: selectedContainer } = render(<Selected />);
-
-    const selectedResults = await axe(selectedContainer);
-    expect(selectedResults).toHaveNoViolations();
-  });
+const testCases = Object.values(composeStories(stories)).map((Story) => [
+  Story.storyName || 'Story',
+  Story,
+]);
+
+describe('[Table Rendering]', () => {
+  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();
+    }
+  );
 });

packages/fuselage/src/components/Table/Table.stories.tsx

@@ -17,6 +17,7 @@ import {
   TableRow,
   TableCell,
   TableBody,
+  TableSelectionButtonGroup,
 } from './index';
 
 export default {
@@ -73,11 +74,8 @@ export const Default: ComponentStory<typeof Table> = () => (
   </>
 );
 
-export const Selected: ComponentStory<typeof Table> = () => (
+export const WithSelection: ComponentStory<typeof Table> = () => (
   <>
-    <TableSelection text='5 Items selected'>
-      <TableSelectionButton>Delete</TableSelectionButton>
-    </TableSelection>
     <Table>
       <TableHead>
         <TableRow>
@@ -154,6 +152,12 @@ export const Selected: ComponentStory<typeof Table> = () => (
         </TableRow>
       </TableBody>
     </Table>
+    <TableSelection text='5 Items selected'>
+      <TableSelectionButtonGroup>
+        <TableSelectionButton>Delete</TableSelectionButton>
+        <TableSelectionButton>Cancel</TableSelectionButton>
+      </TableSelectionButtonGroup>
+    </TableSelection>
   </>
 );
 

packages/fuselage/src/components/Table/Table.styles.scss

@@ -16,12 +16,12 @@
   }
 
   &__selection {
-    color: colors.status-font(on-info);
+    color: colors.font(titles-labels);
     border-radius: theme(
       'table-selected-border-radius',
-      lengths.border-radius(small)
+      lengths.border-radius(medium)
     );
-    background-color: colors.status-background(info);
+    background-color: colors.surface(neutral);
   }
 
   &__wrapper {

packages/fuselage/src/components/Table/Table.tsx

@@ -1,14 +1,8 @@
-import type { ComponentProps, CSSProperties } from 'react';
+import type { ComponentProps } from 'react';
 import React from 'react';
 
 import Box from '../Box';
 
-export const style: CSSProperties = {
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-};
-
 export type TableProps = ComponentProps<typeof Box> & {
   striped?: boolean;
   sticky?: boolean;

packages/fuselage/src/components/Table/TableSelection.tsx → packages/fuselage/src/components/Table/TableSelection/TableSelection.tsx

@@ -1,9 +1,8 @@
 import type { ComponentProps } from 'react';
 import React from 'react';
 
-import Box from '../Box';
-import Margins from '../Margins';
-import { style } from './Table';
+import Box from '../../Box';
+import Margins from '../../Margins';
 
 type TableSelectionProps = ComponentProps<typeof Box> & {
   text?: string;
@@ -19,10 +18,11 @@ export const TableSelection = ({
     display='flex'
     alignItems='center'
     justifyContent='space-between'
-    {...props}
     pi={24}
+    elevation='2'
+    {...props}
   >
-    <Box fontScale='p2m' mb={16} flexShrink={1} style={style}>
+    <Box fontScale='p2b' mb={16} flexShrink={1} withTruncatedText>
       {text}
     </Box>
     {children && (

packages/fuselage/src/components/Table/TableSelection/TableSelectionButton.tsx

@@ -0,0 +1,10 @@
+import type { ComponentProps } from 'react';
+import React from 'react';
+
+import { Button } from '../../Button';
+
+type TableSelectionButtonProps = ComponentProps<typeof Button>;
+
+export const TableSelectionButton = (props: TableSelectionButtonProps) => (
+  <Button small flexShrink={0} {...props} />
+);

packages/fuselage/src/components/Table/TableSelection/TableSelectionButtonGroup.tsx

@@ -0,0 +1,8 @@
+import type { ComponentProps } from 'react';
+import React from 'react';
+
+import { ButtonGroup } from '../../ButtonGroup';
+
+export const TableSelectionButtonGroup = (
+  props: ComponentProps<typeof ButtonGroup>
+) => <ButtonGroup {...props} />;

packages/fuselage/src/components/Table/TableSelection/index.ts

@@ -0,0 +1,3 @@
+export * from './TableSelection';
+export * from './TableSelectionButton';
+export * from './TableSelectionButtonGroup';