From b58f458d49974571e9343f3dce8fd42a27412739 Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Wed, 17 Jul 2024 10:07:29 -0300
Subject: [PATCH 1/4] feat: apply visual changes

---
 .../fuselage/src/components/Table/Table.stories.tsx  | 12 ++++++++----
 .../fuselage/src/components/Table/Table.styles.scss  |  6 +++---
 packages/fuselage/src/components/Table/Table.tsx     |  8 +-------
 .../Table/{ => TableSelection}/TableSelection.tsx    | 10 +++++-----
 .../{ => TableSelection}/TableSelectionButton.tsx    |  6 +++---
 .../TableSelection/TableSelectionButtonGroup.tsx     |  8 ++++++++
 .../src/components/Table/TableSelection/index.ts     |  3 +++
 packages/fuselage/src/components/Table/index.ts      |  1 -
 8 files changed, 31 insertions(+), 23 deletions(-)
 rename packages/fuselage/src/components/Table/{ => TableSelection}/TableSelection.tsx (78%)
 rename packages/fuselage/src/components/Table/{ => TableSelection}/TableSelectionButton.tsx (64%)
 create mode 100644 packages/fuselage/src/components/Table/TableSelection/TableSelectionButtonGroup.tsx
 create mode 100644 packages/fuselage/src/components/Table/TableSelection/index.ts

diff --git a/packages/fuselage/src/components/Table/Table.stories.tsx b/packages/fuselage/src/components/Table/Table.stories.tsx
index b38bea9fdd..acd5134ab6 100644
--- a/packages/fuselage/src/components/Table/Table.stories.tsx
+++ b/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>
   </>
 );
 
diff --git a/packages/fuselage/src/components/Table/Table.styles.scss b/packages/fuselage/src/components/Table/Table.styles.scss
index cefdd7a364..38134b1b8f 100644
--- a/packages/fuselage/src/components/Table/Table.styles.scss
+++ b/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 {
diff --git a/packages/fuselage/src/components/Table/Table.tsx b/packages/fuselage/src/components/Table/Table.tsx
index 11890d28f5..83564b91e8 100644
--- a/packages/fuselage/src/components/Table/Table.tsx
+++ b/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;
diff --git a/packages/fuselage/src/components/Table/TableSelection.tsx b/packages/fuselage/src/components/Table/TableSelection/TableSelection.tsx
similarity index 78%
rename from packages/fuselage/src/components/Table/TableSelection.tsx
rename to packages/fuselage/src/components/Table/TableSelection/TableSelection.tsx
index 365008bd4b..19ad95198c 100644
--- a/packages/fuselage/src/components/Table/TableSelection.tsx
+++ b/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 && (
diff --git a/packages/fuselage/src/components/Table/TableSelectionButton.tsx b/packages/fuselage/src/components/Table/TableSelection/TableSelectionButton.tsx
similarity index 64%
rename from packages/fuselage/src/components/Table/TableSelectionButton.tsx
rename to packages/fuselage/src/components/Table/TableSelection/TableSelectionButton.tsx
index 15183e8138..9661f41301 100644
--- a/packages/fuselage/src/components/Table/TableSelectionButton.tsx
+++ b/packages/fuselage/src/components/Table/TableSelection/TableSelectionButton.tsx
@@ -1,11 +1,11 @@
 import type { ComponentProps } from 'react';
 import React from 'react';
 
-import type Box from '../Box';
-import { Button } from '../Button';
+import type Box from '../../Box';
+import { Button } from '../../Button';
 
 type TableSelectionButtonProps = ComponentProps<typeof Box>;
 
 export const TableSelectionButton = (props: TableSelectionButtonProps) => (
-  <Button small primary flexShrink={0} {...props} />
+  <Button small flexShrink={0} {...props} />
 );
diff --git a/packages/fuselage/src/components/Table/TableSelection/TableSelectionButtonGroup.tsx b/packages/fuselage/src/components/Table/TableSelection/TableSelectionButtonGroup.tsx
new file mode 100644
index 0000000000..bcbd2f2be7
--- /dev/null
+++ b/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} />;
diff --git a/packages/fuselage/src/components/Table/TableSelection/index.ts b/packages/fuselage/src/components/Table/TableSelection/index.ts
new file mode 100644
index 0000000000..55c4502115
--- /dev/null
+++ b/packages/fuselage/src/components/Table/TableSelection/index.ts
@@ -0,0 +1,3 @@
+export * from './TableSelection';
+export * from './TableSelectionButton';
+export * from './TableSelectionButtonGroup';
diff --git a/packages/fuselage/src/components/Table/index.ts b/packages/fuselage/src/components/Table/index.ts
index 04b0f60f8f..e39cbeb7e9 100644
--- a/packages/fuselage/src/components/Table/index.ts
+++ b/packages/fuselage/src/components/Table/index.ts
@@ -5,4 +5,3 @@ export * from './TableFoot';
 export * from './TableHead';
 export * from './TableRow';
 export * from './TableSelection';
-export * from './TableSelectionButton';

From 77cd891c9df579c34612aab1e187dd5c95e7f25b Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Wed, 17 Jul 2024 10:08:03 -0300
Subject: [PATCH 2/4] chore: snapshot tests

---
 .../src/components/Table/Table.spec.tsx       |  84 +-
 .../Table/__snapshots__/Table.spec.tsx.snap   | 773 ++++++++++++++++++
 2 files changed, 796 insertions(+), 61 deletions(-)
 create mode 100644 packages/fuselage/src/components/Table/__snapshots__/Table.spec.tsx.snap

diff --git a/packages/fuselage/src/components/Table/Table.spec.tsx b/packages/fuselage/src/components/Table/Table.spec.tsx
index 873dc800f0..af45f2185a 100644
--- a/packages/fuselage/src/components/Table/Table.spec.tsx
+++ b/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();
+    }
+  );
 });
diff --git a/packages/fuselage/src/components/Table/__snapshots__/Table.spec.tsx.snap b/packages/fuselage/src/components/Table/__snapshots__/Table.spec.tsx.snap
new file mode 100644
index 0000000000..4f24bc97a1
--- /dev/null
+++ b/packages/fuselage/src/components/Table/__snapshots__/Table.spec.tsx.snap
@@ -0,0 +1,773 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[Table Rendering] renders Default without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-table__wrapper"
+    >
+      <table
+        class="rcx-box rcx-box--full rcx-table"
+      >
+        <thead
+          class="rcx-box rcx-box--full rcx-table__head"
+        >
+          <tr
+            class="rcx-box rcx-box--full rcx-table__row"
+          >
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell"
+            >
+              Dessert (100g serving)
+            </th>
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell--align-end rcx-table__cell"
+            >
+              Calories
+            </th>
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell--align-end rcx-table__cell"
+            >
+              Fat (g)
+            </th>
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell--align-end rcx-table__cell"
+            >
+              Carbs (g)
+            </th>
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell--align-end rcx-table__cell"
+            >
+              Protein (g)
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          class="rcx-box rcx-box--full rcx-table__body"
+        >
+          <tr
+            class="rcx-box rcx-box--full rcx-table__row--action rcx-table__row"
+          >
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell"
+              scope="row"
+            >
+              Frozen yoghurt
+            </th>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              159
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              6
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              24
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              4
+            </td>
+          </tr>
+          <tr
+            class="rcx-box rcx-box--full rcx-table__row"
+          >
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell"
+              scope="row"
+            >
+              Ice cream sandwich
+            </th>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              237
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              9
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              37
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              4.3
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`[Table Rendering] renders Fixed without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-table__wrapper"
+    >
+      <table
+        class="rcx-box rcx-box--full rcx-table--fixed rcx-table"
+      >
+        <thead
+          class="rcx-box rcx-box--full rcx-table__head"
+        >
+          <tr
+            class="rcx-box rcx-box--full rcx-table__row"
+          >
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell"
+            >
+              Dessert (100g serving)
+            </th>
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell--align-end rcx-table__cell"
+            >
+              Calories
+            </th>
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell--align-end rcx-table__cell"
+            >
+              Fat (g)
+            </th>
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell--align-end rcx-table__cell"
+            >
+              Carbs (g)
+            </th>
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell--align-end rcx-table__cell"
+            >
+              Protein (g)
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          class="rcx-box rcx-box--full rcx-table__body"
+        >
+          <tr
+            class="rcx-box rcx-box--full rcx-table__row"
+          >
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell"
+              scope="row"
+            >
+              Frozen yoghurt
+            </th>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              159
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              6
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              24
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              4
+            </td>
+          </tr>
+          <tr
+            class="rcx-box rcx-box--full rcx-table__row"
+          >
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell"
+              scope="row"
+            >
+              Ice cream sandwich
+            </th>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              237
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              9
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              37
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              4.3
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`[Table Rendering] renders Striped without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-table__wrapper"
+    >
+      <table
+        class="rcx-box rcx-box--full rcx-table--striped rcx-table--sticky rcx-table--fixed rcx-table"
+      >
+        <thead
+          class="rcx-box rcx-box--full rcx-table__head"
+        >
+          <tr
+            class="rcx-box rcx-box--full rcx-table__row"
+          >
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell"
+            >
+              Dessert (100g serving)
+            </th>
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell--align-end rcx-table__cell"
+            >
+              Calories
+            </th>
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell--align-end rcx-table__cell"
+            >
+              Fat (g)
+            </th>
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell--align-end rcx-table__cell"
+            >
+              Carbs (g)
+            </th>
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell--align-end rcx-table__cell"
+            >
+              Protein (g)
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          class="rcx-box rcx-box--full rcx-table__body"
+        >
+          <tr
+            class="rcx-box rcx-box--full rcx-table__row"
+          >
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell"
+              scope="row"
+            >
+              Frozen yoghurt
+            </th>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              159
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              6
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              24
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              4
+            </td>
+          </tr>
+          <tr
+            class="rcx-box rcx-box--full rcx-table__row"
+          >
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell"
+              scope="row"
+            >
+              Frozen yoghurt
+            </th>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              159
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              6
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              24
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              4
+            </td>
+          </tr>
+          <tr
+            class="rcx-box rcx-box--full rcx-table__row"
+          >
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell"
+              scope="row"
+            >
+              Frozen yoghurt
+            </th>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              159
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              6
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              24
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              4
+            </td>
+          </tr>
+          <tr
+            class="rcx-box rcx-box--full rcx-table__row"
+          >
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell"
+              scope="row"
+            >
+              Frozen yoghurt
+            </th>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              159
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              6
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              24
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              4
+            </td>
+          </tr>
+          <tr
+            class="rcx-box rcx-box--full rcx-table__row"
+          >
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell"
+              scope="row"
+            >
+              Ice cream sandwich
+            </th>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              237
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              9
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              37
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              4.3
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`[Table Rendering] renders WithSelection without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-table__wrapper"
+    >
+      <table
+        class="rcx-box rcx-box--full rcx-table"
+      >
+        <thead
+          class="rcx-box rcx-box--full rcx-table__head"
+        >
+          <tr
+            class="rcx-box rcx-box--full rcx-table__row"
+          >
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-check-box"
+              >
+                <input
+                  aria-label="select all"
+                  class="rcx-box rcx-box--full rcx-check-box__input"
+                  type="checkbox"
+                />
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-check-box__fake"
+                />
+              </label>
+            </th>
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell"
+            >
+              Dessert (100g serving)
+            </th>
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell--align-end rcx-table__cell"
+            >
+              Calories
+            </th>
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell--align-end rcx-table__cell"
+            >
+              Fat (g)
+            </th>
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell--align-end rcx-table__cell"
+            >
+              Carbs (g)
+            </th>
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell--align-end rcx-table__cell"
+            >
+              Protein (g)
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          class="rcx-box rcx-box--full rcx-table__body"
+        >
+          <tr
+            class="rcx-box rcx-box--full rcx-table__row--selected rcx-table__row"
+          >
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-check-box"
+              >
+                <input
+                  aria-label="select frozen yoghurt"
+                  checked=""
+                  class="rcx-box rcx-box--full rcx-check-box__input"
+                  type="checkbox"
+                />
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-check-box__fake"
+                />
+              </label>
+            </td>
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell"
+              scope="row"
+            >
+              Frozen yoghurt
+            </th>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              159
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              6
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              24
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              4
+            </td>
+          </tr>
+          <tr
+            class="rcx-box rcx-box--full rcx-table__row--selected rcx-table__row"
+          >
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-check-box"
+              >
+                <input
+                  aria-label="select frozen yoghurt"
+                  checked=""
+                  class="rcx-box rcx-box--full rcx-check-box__input"
+                  type="checkbox"
+                />
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-check-box__fake"
+                />
+              </label>
+            </td>
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell"
+              scope="row"
+            >
+              Frozen yoghurt
+            </th>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              159
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              6
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              24
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              4
+            </td>
+          </tr>
+          <tr
+            class="rcx-box rcx-box--full rcx-table__row"
+          >
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-check-box"
+              >
+                <input
+                  aria-label="select frozen yoghurt"
+                  class="rcx-box rcx-box--full rcx-check-box__input"
+                  type="checkbox"
+                />
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-check-box__fake"
+                />
+              </label>
+            </td>
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell"
+              scope="row"
+            >
+              Frozen yoghurt
+            </th>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              159
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              6
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              24
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              4
+            </td>
+          </tr>
+          <tr
+            class="rcx-box rcx-box--full rcx-table__row--selected rcx-table__row"
+          >
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-check-box"
+              >
+                <input
+                  aria-label="select frozen yoghurt"
+                  checked=""
+                  class="rcx-box rcx-box--full rcx-check-box__input"
+                  type="checkbox"
+                />
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-check-box__fake"
+                />
+              </label>
+            </td>
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell"
+              scope="row"
+            >
+              Frozen yoghurt
+            </th>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              159
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              6
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              24
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              4
+            </td>
+          </tr>
+          <tr
+            class="rcx-box rcx-box--full rcx-table__row--selected rcx-table__row"
+          >
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-check-box"
+              >
+                <input
+                  aria-label="select frozen yoghurt"
+                  checked=""
+                  class="rcx-box rcx-box--full rcx-check-box__input"
+                  type="checkbox"
+                />
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-check-box__fake"
+                />
+              </label>
+            </td>
+            <th
+              class="rcx-box rcx-box--full rcx-table__cell"
+              scope="row"
+            >
+              Frozen yoghurt
+            </th>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              159
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              6
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              24
+            </td>
+            <td
+              class="rcx-box rcx-box--full rcx-table__cell--align-end rcx-table__cell"
+            >
+              4
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div
+      class="rcx-box rcx-box--full rcx-table__selection rcx-css-1d4zbp6"
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-css-1vmb5x3"
+      >
+        5 Items selected
+      </div>
+      <div
+        class="rcx-box rcx-box--full rcx-css-1tmdf8e"
+      >
+        <div
+          class="rcx-button-group rcx-button-group--align-start rcx-css-x7bl3q"
+          role="group"
+        >
+          <button
+            class="rcx-box rcx-box--full rcx-button--small rcx-button  rcx-button-group__item rcx-css-1yzvz7u"
+            type="button"
+          >
+            <span
+              class="rcx-button--content"
+            >
+              Delete
+            </span>
+          </button>
+          <button
+            class="rcx-box rcx-box--full rcx-button--small rcx-button  rcx-button-group__item rcx-css-1yzvz7u"
+            type="button"
+          >
+            <span
+              class="rcx-button--content"
+            >
+              Cancel
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;

From 85992c73bdd50577bdfe55877a8d794c1e02da1b Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Wed, 17 Jul 2024 10:09:30 -0300
Subject: [PATCH 3/4] chore: changeset

---
 .changeset/clever-candles-shop.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/clever-candles-shop.md

diff --git a/.changeset/clever-candles-shop.md b/.changeset/clever-candles-shop.md
new file mode 100644
index 0000000000..8dfba14c6e
--- /dev/null
+++ b/.changeset/clever-candles-shop.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": minor
+---
+
+feat(fuselage): TableSelection visual improvements

From 2d166035e2c8b5ea259e72b2723d92820248e093 Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Wed, 17 Jul 2024 10:35:13 -0300
Subject: [PATCH 4/4] fix: types

---
 .../components/Table/TableSelection/TableSelectionButton.tsx   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/fuselage/src/components/Table/TableSelection/TableSelectionButton.tsx b/packages/fuselage/src/components/Table/TableSelection/TableSelectionButton.tsx
index 9661f41301..f449a53cd8 100644
--- a/packages/fuselage/src/components/Table/TableSelection/TableSelectionButton.tsx
+++ b/packages/fuselage/src/components/Table/TableSelection/TableSelectionButton.tsx
@@ -1,10 +1,9 @@
 import type { ComponentProps } from 'react';
 import React from 'react';
 
-import type Box from '../../Box';
 import { Button } from '../../Button';
 
-type TableSelectionButtonProps = ComponentProps<typeof Box>;
+type TableSelectionButtonProps = ComponentProps<typeof Button>;
 
 export const TableSelectionButton = (props: TableSelectionButtonProps) => (
   <Button small flexShrink={0} {...props} />