feat(Table): add font size options (#2156)

Frontify · Jan 15, 2025 · 76b51be · 76b51be
1 parent 2736fe4
commit 76b51be
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 4 deletions.
diff --git a/.changeset/honest-peas-suffer.md b/.changeset/honest-peas-suffer.md
@@ -0,0 +1,5 @@
+---
+"@frontify/fondue-components": patch
+---
+
+feat(`Table`): add font size options
diff --git a/packages/components/src/components/Table/Table.stories.tsx b/packages/components/src/components/Table/Table.stories.tsx
@@ -179,6 +179,29 @@ export const Basic: Story = {
     ),
 };
 
+export const SmallText: Story = {
+    render: ({ ...args }) => (
+        <Table.Root {...args} fontSize="small">
+            <Table.Header>
+                <tr>
+                    <Table.HeaderCell width="100px">Name</Table.HeaderCell>
+                    <Table.HeaderCell>Role</Table.HeaderCell>
+                    <Table.HeaderCell>Last Seen</Table.HeaderCell>
+                </tr>
+            </Table.Header>
+            <Table.Body>
+                {TABLE_DATA.map((user) => (
+                    <Table.Row key={user.id}>
+                        <Table.RowCell>{user.name}</Table.RowCell>
+                        <Table.RowCell>{user.role}</Table.RowCell>
+                        <Table.RowCell>{user.lastSeen}</Table.RowCell>
+                    </Table.Row>
+                ))}
+            </Table.Body>
+        </Table.Root>
+    ),
+};
+
 export const AutoLayout: Story = {
     render: ({ ...args }) => (
         <Table.Root {...args}>

diff --git a/packages/components/src/components/Table/Table.tsx b/packages/components/src/components/Table/Table.tsx
@@ -24,6 +24,11 @@ type TableRootProps = {
      * @default 'auto'
      */
     layout?: 'auto' | 'fixed';
+    /**
+     * Font size of the table content
+     * @default 'small'
+     */
+    fontSize?: 'small' | 'medium';
     /**
      * Whether header should stick to the top when scrolling
      */
@@ -32,10 +37,17 @@ type TableRootProps = {
 } & CommonAriaAttrs;
 
 export const TableRoot = forwardRef<HTMLTableElement, TableRootProps>(
-    ({ layout = 'auto', sticky, children, ...props }, ref) => {
+    ({ layout = 'auto', fontSize = 'medium', sticky, children, ...props }, ref) => {
         return (
             <div onKeyDown={handleKeyDown} role="grid" tabIndex={-1}>
-                <table ref={ref} className={styles.table} data-layout={layout} data-sticky={sticky} {...props}>
+                <table
+                    ref={ref}
+                    className={styles.table}
+                    data-layout={layout}
+                    data-font-size={fontSize}
+                    data-sticky={sticky}
+                    {...props}
+                >
                     {children}
                 </table>
             </div>

diff --git a/packages/components/src/components/Table/__tests__/Table.ct.tsx b/packages/components/src/components/Table/__tests__/Table.ct.tsx
@@ -44,6 +44,36 @@ test('should handle table layout modes', async ({ mount }) => {
     await expect(component.locator('caption')).toHaveText('Table Caption');
 });
 
+test('should handle table font size small', async ({ mount }) => {
+    const component = await mount(
+        <Table.Root aria-label="Table">
+            <Table.Caption>Table Caption</Table.Caption>
+            <Table.Header>
+                <Table.Row>
+                    <Table.HeaderCell>Name</Table.HeaderCell>
+                </Table.Row>
+            </Table.Header>
+        </Table.Root>,
+    );
+
+    await expect(component.locator('table')).toHaveAttribute('data-font-size', 'medium');
+});
+
+test('should handle table font size medium', async ({ mount }) => {
+    const component = await mount(
+        <Table.Root fontSize="small" aria-label="Table">
+            <Table.Caption>Table Caption</Table.Caption>
+            <Table.Header>
+                <Table.Row>
+                    <Table.HeaderCell>Name</Table.HeaderCell>
+                </Table.Row>
+            </Table.Header>
+        </Table.Root>,
+    );
+
+    await expect(component.locator('table')).toHaveAttribute('data-font-size', 'small');
+});
+
 test('should handle ARIA attributes', async ({ mount }) => {
     const component = await mount(
         <Table.Root aria-label="Test Table" aria-describedby="table-desc">

diff --git a/packages/components/src/components/Table/styles/table.module.scss b/packages/components/src/components/Table/styles/table.module.scss
@@ -39,12 +39,22 @@
         }
     }
 
+    &[data-font-size='small'] {
+        font-size: var(--body-size-x-small);
+    }
+
+    &[data-font-size='medium'] {
+        font-size: var(--body-size-small);
+    }
+
     &[data-full-width='false'] {
         width: auto;
     }
+
     &[data-layout='fixed'] {
         table-layout: fixed;
     }
+
     &[data-layout='auto'] {
         table-layout: auto;
         [data-truncate='true'] {
@@ -153,8 +163,6 @@
     color: var(--text-color);
 
     font-weight: 400;
-    font-size: var(--body-size-x-small);
-
     line-height: sizeToken(4);
     padding: sizeToken(2);