From 6ce1b54ee0f0407d1949b3c6375eff6f91cce8c0 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <32556167+jnm2377@users.noreply.github.com>
Date: Fri, 29 Oct 2021 14:00:37 -0500
Subject: [PATCH] fix(DataTable): fixes overflowing sort button and select
 column spacing (#9956)

* fix: add width to checkbox column

* feat: add select/sort story

* feat: add fix to styles package

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../data-table/_data-table-core.scss          |  1 +
 .../stories/DataTable-selection-story.js      | 42 +++++++++++++++++++
 .../components/data-table/_data-table.scss    |  1 +
 3 files changed, 44 insertions(+)

diff --git a/packages/components/src/components/data-table/_data-table-core.scss b/packages/components/src/components/data-table/_data-table-core.scss
index cb754fa0a593..ee5621a39ed3 100644
--- a/packages/components/src/components/data-table/_data-table-core.scss
+++ b/packages/components/src/components/data-table/_data-table-core.scss
@@ -345,6 +345,7 @@
 
   .#{$prefix}--data-table thead th.#{$prefix}--table-column-checkbox,
   .#{$prefix}--data-table tbody td.#{$prefix}--table-column-checkbox {
+    width: 2.5rem;
     // spacing between checkbox / chevron and next cell should be 8px / 0.5rem
     padding-right: rem(4px);
     padding-left: 1rem;
diff --git a/packages/react/src/components/DataTable/stories/DataTable-selection-story.js b/packages/react/src/components/DataTable/stories/DataTable-selection-story.js
index 849ea1687658..e24bee3404d2 100644
--- a/packages/react/src/components/DataTable/stories/DataTable-selection-story.js
+++ b/packages/react/src/components/DataTable/stories/DataTable-selection-story.js
@@ -124,3 +124,45 @@ export const WithRadioSelection = () => (
     )}
   </DataTable>
 );
+
+export const WithSelectionAndSorting = () => (
+  <DataTable rows={rows} headers={headers} isSortable>
+    {({
+      rows,
+      headers,
+      getHeaderProps,
+      getRowProps,
+      getSelectionProps,
+      getTableProps,
+      getTableContainerProps,
+    }) => (
+      <TableContainer
+        title="DataTable"
+        description="With selection"
+        {...getTableContainerProps()}>
+        <Table {...getTableProps()}>
+          <TableHead>
+            <TableRow>
+              <TableSelectAll {...getSelectionProps()} />
+              {headers.map((header, i) => (
+                <TableHeader key={i} {...getHeaderProps({ header })}>
+                  {header.header}
+                </TableHeader>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map((row, i) => (
+              <TableRow key={i} {...getRowProps({ row })}>
+                <TableSelectRow {...getSelectionProps({ row })} />
+                {row.cells.map((cell) => (
+                  <TableCell key={cell.id}>{cell.value}</TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    )}
+  </DataTable>
+);
diff --git a/packages/styles/scss/components/data-table/_data-table.scss b/packages/styles/scss/components/data-table/_data-table.scss
index 802a3a033888..be47444d01e6 100644
--- a/packages/styles/scss/components/data-table/_data-table.scss
+++ b/packages/styles/scss/components/data-table/_data-table.scss
@@ -341,6 +341,7 @@
 
   .#{$prefix}--data-table thead th.#{$prefix}--table-column-checkbox,
   .#{$prefix}--data-table tbody td.#{$prefix}--table-column-checkbox {
+    width: 2.5rem;
     // spacing between checkbox / chevron and next cell should be 8px / 0.5rem
     padding-right: rem(4px);
     padding-left: 1rem;