fix(styles): use correct border for table headers with row headings (#…

…1308)
dequelabs · Jan 2, 2024 · b991497 · b991497
1 parent bdf1413
commit b991497
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 5 deletions.
diff --git a/docs/pages/components/Table.mdx b/docs/pages/components/Table.mdx
@@ -27,7 +27,9 @@ import {
 } from '@deque/cauldron-react'
 ```
 
-## Default
+## Examples
+
+### Default
 
 ```jsx example
 <Table>
@@ -101,7 +103,7 @@ import {
 </Table>
 ```
 
-## Bordered
+### Bordered
 
 ```jsx example
 <Table variant="border">
@@ -137,7 +139,7 @@ import {
 </Table>
 ```
 
-## Bordered with Footer
+### Bordered with Footer
 
 ```jsx example
 <Table variant="border">
@@ -180,7 +182,7 @@ import {
 </Table>
 ```
 
-## Sortable
+### Sortable
 
 export const tableData = [
   {
@@ -268,6 +270,70 @@ function SortableTableExample() {
   As a best practice, when a table has sorted columns an author should indicate which column is currently sorted by setting the sort direction for the active sorted column.
 </Note>
 
+### With Row Headings
+
+```jsx example
+<Table>
+  <TableBody>
+    <TableRow>
+      <TableHeader scope="row">City</TableHeader>
+      <TableCell>Budapest</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableHeader scope="row">Country</TableHeader>
+      <TableCell>Hungary</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableHeader scope="row">Planet</TableHeader>
+      <TableCell>Earth</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+### With Row and Column Headings
+
+```jsx example
+<Table>
+  <TableHead>
+    <TableRow>
+      <TableCell />
+      <TableHeader scope="col">Monday</TableHeader>
+      <TableHeader scope="col">Tuesday</TableHeader>
+      <TableHeader scope="col">Wednesday</TableHeader>
+      <TableHeader scope="col">Thursday</TableHeader>
+      <TableHeader scope="col">Friday</TableHeader>
+    </TableRow>
+  </TableHead>
+  <TableBody>
+    <TableRow>
+      <TableHeader scope="row">Ends with Day</TableHeader>
+      <TableCell>Yes</TableCell>
+      <TableCell>Yes</TableCell>
+      <TableCell>Yes</TableCell>
+      <TableCell>Yes</TableCell>
+      <TableCell>Yes</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableHeader scope="row">Middle of Week</TableHeader>
+      <TableCell>No</TableCell>
+      <TableCell>No</TableCell>
+      <TableCell>Yes</TableCell>
+      <TableCell>No</TableCell>
+      <TableCell>No</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableHeader scope="row">Next to Weekend</TableHeader>
+      <TableCell>Yes</TableCell>
+      <TableCell>No</TableCell>
+      <TableCell>No</TableCell>
+      <TableCell>No</TableCell>
+      <TableCell>Yes</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
 ## Props
 
 ### Table

diff --git a/packages/styles/table.css b/packages/styles/table.css
@@ -39,7 +39,16 @@
   background: var(--table-header-background-color);
   font-weight: var(--font-weight-medium);
   color: var(--table-header-text-color);
-  border-bottom: 3px solid var(--table-row-border-color);
+  border-bottom: 2px solid var(--table-row-border-color);
+}
+
+.TableBody .TableHeader {
+  border-bottom-width: 1px;
+  border-right: 2px solid var(--table-row-border-color);
+}
+
+.TableBody .TableRow:last-child .TableHeader {
+  border-bottom: none;
 }
 
 .TableHeader[aria-sort] {
@@ -124,6 +133,11 @@
   border-bottom: 2px solid var(--gray-40);
 }
 
+.Table--border .TableBody .TableHeader {
+  border-bottom-width: 1px;
+  border-right: 2px solid var(--table-row-border-color);
+}
+
 .cauldron--theme-dark .Table--border,
 .cauldron--theme-dark .Table--border .TableHeader,
 .cauldron--theme-dark .Table--border .TableFooter,