feat(table)!: remove top-level sub-components (#1685)

* feat(table)!: remove top-level sub-components * refactor(table): rename props type decl
chanzuckerberg · Jul 19, 2023 · 742a530 · 742a530
1 parent bd47899
commit 742a530
Show file tree

Hide file tree

Showing 24 changed files with 373 additions and 448 deletions.
diff --git a/.storybook/components/Docs/Guildelines/CodeGuidelines.stories.mdx b/.storybook/components/Docs/Guildelines/CodeGuidelines.stories.mdx
@@ -299,7 +299,7 @@ You can continue to use the `Icon` components' `color` prop with JavaScript vari
 
 ## Tailwind utility classes <a name="tailwind-utility-classes"></a>
 
-EDS uses [tailwind utility classes](https://tailwindcss.com/docs/padding) (e.g. `mb-0` and `p-0`) inline in `*.stories.tsx` files to quickly add small styling tweaks, like spacing (e.g. `<TableCell className="p-0">`). This reduces the need for CSS module files made specifically for stories. Use the `!` modifier to override default component styles (e.g. `<TableCell className="!p-0">`).
+EDS uses [tailwind utility classes](https://tailwindcss.com/docs/padding) (e.g. `mb-0` and `p-0`) inline in `*.stories.tsx` files to quickly add small styling tweaks, like spacing (e.g. `<Table.Cell className="p-0">`). This reduces the need for CSS module files made specifically for stories. Use the `!` modifier to override default component styles (e.g. `<Table.Cell className="!p-0">`).
 
 Consider installing the VSCode extension [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) for autocomplete, linting, and hover previews.
 

diff --git a/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx b/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx
@@ -26,11 +26,6 @@ import {
   PageHeader,
   Panel,
   Table,
-  TableBody,
-  TableCell,
-  TableHeader,
-  TableHeaderCell,
-  TableRow,
   Text,
 } from '../../../src';
 
@@ -325,28 +320,28 @@ export const TableCard = ({
           {title}
         </Heading>
         <Table className={styles['table-card__table']} title={title}>
-          <TableHeader>
-            <TableRow variant="header">
+          <Table.Header>
+            <Table.Row variant="header">
               {tableColumns.map((item, index) => {
                 return (
-                  <TableHeaderCell
+                  <Table.HeaderCell
                     className={styles['table-card__table-header-cell']}
                     key={'table-header-cell-' + item.title}
                   >
                     {item.title}
-                  </TableHeaderCell>
+                  </Table.HeaderCell>
                 );
               })}
-            </TableRow>
-          </TableHeader>
-          <TableBody>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
             {tableRows.map((item) => {
               return (
-                <TableRow key={`table-row-${item.value1}`}>
-                  <TableHeaderCell variant="body">
+                <Table.Row key={`table-row-${item.value1}`}>
+                  <Table.HeaderCell variant="body">
                     {item.value1}
-                  </TableHeaderCell>
-                  <TableCell>
+                  </Table.HeaderCell>
+                  <Table.Cell>
                     <NumberIconList>
                       {item.projects.map((item, index) => {
                         return (
@@ -361,11 +356,11 @@ export const TableCard = ({
                         );
                       })}
                     </NumberIconList>
-                  </TableCell>
-                </TableRow>
+                  </Table.Cell>
+                </Table.Row>
               );
             })}
-          </TableBody>
+          </Table.Body>
         </Table>
       </CardBody>
       <CardFooter>

diff --git a/.storybook/recipes/TabularInputs.stories.tsx b/.storybook/recipes/TabularInputs.stories.tsx
@@ -1,15 +1,6 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableRow,
-  TableHeader,
-  TableHeaderCell,
-  InputField,
-  Label,
-} from '../../src/';
+import { Table, InputField, Label } from '../../src/';
 
 export default {
   title: 'Recipes/TabularInput',
@@ -22,32 +13,32 @@ type Args = React.ComponentProps<typeof Table>;
 export const Default: StoryObj<Args> = {
   render: (args) => (
     <Table {...args}>
-      <TableHeader>
-        <TableRow>
-          <TableHeaderCell>Label</TableHeaderCell>
-          <TableHeaderCell>Field</TableHeaderCell>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        <TableRow>
-          <TableCell className="flex items-center">
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell>Label</Table.HeaderCell>
+          <Table.HeaderCell>Field</Table.HeaderCell>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        <Table.Row>
+          <Table.Cell className="flex items-center">
             <Label
               className="flex items-center"
               htmlFor="field-1"
               id="input-1"
               text="Input One"
             />
-          </TableCell>
-          <TableCell>
+          </Table.Cell>
+          <Table.Cell>
             <InputField
               aria-label="redundant"
               aria-labelledby="input-1"
               id="field-1"
               placeholder="click the label to highlight field"
             />
-          </TableCell>
-        </TableRow>
-      </TableBody>
+          </Table.Cell>
+        </Table.Row>
+      </Table.Body>
     </Table>
   ),
 };
diff --git a/src/components/Table/Table.module.css b/src/components/Table/Table.module.css
@@ -9,3 +9,61 @@
   border-collapse: collapse;
   width: 100%;
 }
+
+/**
+ * Table Cell
+ * The `:where` pseudo class function allows easy overriding via className.
+ */
+:where(.table-cell) {
+  font: var(--eds-theme-typography-body-sm);
+
+  padding: var(--eds-size-2) var(--eds-size-1);
+}
+
+/**
+ * Table header cell
+ * The `:where` pseudo class function allows easy overriding via className.
+ */
+:where(.table-header-cell) {
+  font: var(--eds-theme-typography-label-sm);
+  padding: var(--eds-size-1) var(--eds-size-1);
+  text-align: left;
+}
+
+/**
+ * Table header cell within table body
+ *
+ * Adjusts the padding to match the table__cell padding for alignment.
+ */
+.table-header-cell--body {
+  padding: var(--eds-size-2) var(--eds-size-1);
+}
+
+/**
+ * Table header cell button
+ *
+ * On table header cells that are sortable, the content is wrapped by a <Button>.
+ */
+.table-header-cell__sort-button {
+  gap: var(--eds-size-half);
+  text-decoration: none;
+  font-weight: var(--eds-font-weight-bold);
+}
+
+/**
+ * Table row
+ */
+.table-row {
+  vertical-align: top;
+  border-bottom-width: var(--eds-theme-border-width);
+  border-bottom-style: solid;
+  border-bottom-color: var(--eds-theme-color-border-neutral-subtle);
+}
+
+/**
+ * Header variant 
+ * Has darker bottom border color for distinguishment.
+ */
+.table-row--header {
+  border-bottom-color: var(--eds-theme-color-border-neutral-default);
+}
diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
@@ -1,18 +1,19 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import React, { useState } from 'react';
 
-import { Table } from './Table';
-import TableBody from '../TableBody';
-import TableCell from '../TableCell';
-import TableHeader from '../TableHeader';
-import type { SortDirectionsType } from '../TableHeaderCell';
-import TableRow from '../TableRow';
+import { Table, type SortDirectionsType } from './Table';
 import styles from './Table.stories.module.css';
 
 export default {
   title: 'Components/Table',
   component: Table,
-  subcomponents: { TableBody, TableCell, TableHeader, TableRow },
+  subcomponents: {
+    'Table.Body': Table.Body,
+    'Table.Caption': Table.Caption,
+    'Table.Cell': Table.Cell,
+    'Table.Header': Table.Header,
+    'Table.Row': Table.Row,
+  },
   parameters: {
     badges: ['1.1'],
   },
@@ -331,14 +332,14 @@ const SortableExample = () => {
           <Table.HeaderCell>Not sortable</Table.HeaderCell>
         </Table.Row>
       </Table.Header>
-      <TableBody>
+      <Table.Body>
         {sortedValues.map(({ col1, col2 }) => (
           <Table.Row key={`row-${col1}-${col2}`}>
             <Table.Cell>{col1}</Table.Cell>
             <Table.Cell>{col2}</Table.Cell>
           </Table.Row>
         ))}
-      </TableBody>
+      </Table.Body>
     </Table>
   );
 };