From f4432ac0e30c338f5c93cf2c94091c9378a13722 Mon Sep 17 00:00:00 2001
From: Jacob Wallraff <thyeggman@github.com>
Date: Thu, 19 Oct 2023 14:26:12 -0700
Subject: [PATCH 1/5] Veritcally align cell contents

---
 src/DataTable/Table.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/DataTable/Table.tsx b/src/DataTable/Table.tsx
index 87256788526..c057aa07cc9 100644
--- a/src/DataTable/Table.tsx
+++ b/src/DataTable/Table.tsx
@@ -66,6 +66,7 @@ const StyledTable = styled.table<React.ComponentPropsWithoutRef<'table'>>`
   .TableHeader,
   .TableCell {
     text-align: start;
+    vertical-align: middle;
     border-bottom: 1px solid ${get('colors.border.default')};
   }
 
@@ -160,6 +161,7 @@ const StyledTable = styled.table<React.ComponentPropsWithoutRef<'table'>>`
 
   /* TableCell */
   .TableCell[scope='row'] {
+    vertical-align: middle;
     color: ${get('colors.fg.default')};
     font-weight: 600;
   }

From c3127185e53e1775dad2331e1d98bea1c8add4e8 Mon Sep 17 00:00:00 2001
From: Jacob Wallraff <thyeggman@github.com>
Date: Thu, 19 Oct 2023 14:47:56 -0700
Subject: [PATCH 2/5] Add test

---
 src/DataTable/Table.tsx                |  7 +------
 src/DataTable/__tests__/Table.test.tsx | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/DataTable/Table.tsx b/src/DataTable/Table.tsx
index c057aa07cc9..c7fcfba7b69 100644
--- a/src/DataTable/Table.tsx
+++ b/src/DataTable/Table.tsx
@@ -68,6 +68,7 @@ const StyledTable = styled.table<React.ComponentPropsWithoutRef<'table'>>`
     text-align: start;
     vertical-align: middle;
     border-bottom: 1px solid ${get('colors.border.default')};
+    padding: var(--table-cell-padding);
   }
 
   .TableHeader[data-cell-align='end'],
@@ -103,12 +104,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
diff --git a/src/DataTable/__tests__/Table.test.tsx b/src/DataTable/__tests__/Table.test.tsx
index 9e91eef925a..47c8e6d56f4 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('vertical-align: middle')
+    })
   })
 
   describe('Table.Skeleton', () => {

From e3b80915286eb33f2c9dbdedf4bc2ce370de70ac Mon Sep 17 00:00:00 2001
From: Jacob Wallraff <thyeggman@github.com>
Date: Thu, 19 Oct 2023 16:30:00 -0700
Subject: [PATCH 3/5] Change styles and add display: flex

---
 src/DataTable/Table.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/DataTable/Table.tsx b/src/DataTable/Table.tsx
index c7fcfba7b69..e5c709ad61a 100644
--- a/src/DataTable/Table.tsx
+++ b/src/DataTable/Table.tsx
@@ -66,7 +66,8 @@ const StyledTable = styled.table<React.ComponentPropsWithoutRef<'table'>>`
   .TableHeader,
   .TableCell {
     text-align: start;
-    vertical-align: middle;
+    display: flex;
+    align-items: center;
     border-bottom: 1px solid ${get('colors.border.default')};
     padding: var(--table-cell-padding);
   }
@@ -156,7 +157,8 @@ const StyledTable = styled.table<React.ComponentPropsWithoutRef<'table'>>`
 
   /* TableCell */
   .TableCell[scope='row'] {
-    vertical-align: middle;
+    align-items: center;
+    display: flex;
     color: ${get('colors.fg.default')};
     font-weight: 600;
   }

From 223b9dc2fb58537548e1a6c80227c9ff828b71a8 Mon Sep 17 00:00:00 2001
From: Jacob Wallraff <thyeggman@github.com>
Date: Thu, 19 Oct 2023 16:30:51 -0700
Subject: [PATCH 4/5] Fix test

---
 src/DataTable/__tests__/Table.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/DataTable/__tests__/Table.test.tsx b/src/DataTable/__tests__/Table.test.tsx
index 47c8e6d56f4..b5d45929b4b 100644
--- a/src/DataTable/__tests__/Table.test.tsx
+++ b/src/DataTable/__tests__/Table.test.tsx
@@ -246,7 +246,7 @@ describe('Table', () => {
           </Table.Body>
         </Table>,
       )
-      expect(screen.getByRole('cell')).toHaveStyle('vertical-align: middle')
+      expect(screen.getByRole('cell')).toHaveStyle('align-items: center')
     })
   })
 

From f000f7285cf046ba2b03b622ae2dba28048c0e1a Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Tue, 31 Oct 2023 12:51:29 -0500
Subject: [PATCH 5/5] Create popular-cougars-look.md

---
 .changeset/popular-cougars-look.md | 5 +++++
 1 file changed, 5 insertions(+)
 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`