Vertically align cell contents in DataTable (#3843)

* Veritcally align cell contents * Add test * Change styles and add display: flex * Fix test * Create popular-cougars-look.md --------- Co-authored-by: Josh Black <[email protected]>
primer · Oct 31, 2023 · 4ea8bcf · 4ea8bcf
1 parent 82a4e30
commit 4ea8bcf
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/.changeset/popular-cougars-look.md b/.changeset/popular-cougars-look.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Vertically align cell contents in `DataTable`
diff --git a/src/DataTable/Table.tsx b/src/DataTable/Table.tsx
@@ -66,7 +66,10 @@ const StyledTable = styled.table<React.ComponentPropsWithoutRef<'table'>>`
   .TableHeader,
   .TableCell {
     text-align: start;
+    display: flex;
+    align-items: center;
     border-bottom: 1px solid ${get('colors.border.default')};
+    padding: var(--table-cell-padding);
   }
 
   .TableHeader[data-cell-align='end'],
@@ -102,12 +105,6 @@ const StyledTable = styled.table<React.ComponentPropsWithoutRef<'table'>>`
     border-bottom-right-radius: var(--table-border-radius);
   }
 
-  /* TableHeader, TableCell */
-  .TableCell,
-  .TableHeader {
-    padding: var(--table-cell-padding);
-  }
-
   /**
    * Offset padding to make sure type aligns regardless of cell padding
    * selection
@@ -160,6 +157,8 @@ const StyledTable = styled.table<React.ComponentPropsWithoutRef<'table'>>`
 
   /* TableCell */
   .TableCell[scope='row'] {
+    align-items: center;
+    display: flex;
     color: ${get('colors.fg.default')};
     font-weight: 600;
   }

diff --git a/src/DataTable/__tests__/Table.test.tsx b/src/DataTable/__tests__/Table.test.tsx
@@ -230,6 +230,24 @@ describe('Table', () => {
       )
       expect(screen.getByRole('rowheader', {name: 'Cell'})).toBeInTheDocument()
     })
+
+    it('should vertically align cell contents', () => {
+      render(
+        <Table>
+          <Table.Head>
+            <Table.Row>
+              <Table.Header>Column</Table.Header>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>Cell</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>,
+      )
+      expect(screen.getByRole('cell')).toHaveStyle('align-items: center')
+    })
   })
 
   describe('Table.Skeleton', () => {