From 4ea8bcf74719947854f28d55210269e0d4431ebb Mon Sep 17 00:00:00 2001
From: Jacob Wallraff <thyeggman@github.com>
Date: Tue, 31 Oct 2023 11:01:23 -0700
Subject: [PATCH] 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 <joshblack@github.com>
---
 .changeset/popular-cougars-look.md     |  5 +++++
 src/DataTable/Table.tsx                | 11 +++++------
 src/DataTable/__tests__/Table.test.tsx | 18 ++++++++++++++++++
 3 files changed, 28 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/popular-cougars-look.md

diff --git a/.changeset/popular-cougars-look.md b/.changeset/popular-cougars-look.md
new file mode 100644
index 00000000000..702c1b2a60a
--- /dev/null
+++ 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
index 87256788526..e5c709ad61a 100644
--- 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
index 9e91eef925a..b5d45929b4b 100644
--- 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', () => {