From 9be1ec52b36623a5e25ba710baed650ee65edd62 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Fri, 1 Sep 2023 11:38:42 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(react)=20make=20the=20checkboxes?=
 =?UTF-8?q?=20column=20the=20smallest?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

QA feedbacks told us that the checkbox column was too wide, this update
makes it the smallest possible.
---
 .changeset/cool-dingos-invent.md               |  5 +++++
 .../react/src/components/DataGrid/index.scss   |  5 +++++
 .../react/src/components/DataGrid/index.tsx    | 18 ++++++++++++++----
 3 files changed, 24 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/cool-dingos-invent.md

diff --git a/.changeset/cool-dingos-invent.md b/.changeset/cool-dingos-invent.md
new file mode 100644
index 0000000..4a5fd50
--- /dev/null
+++ b/.changeset/cool-dingos-invent.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+make the DataGrid checkboxes column the smallest possible
diff --git a/packages/react/src/components/DataGrid/index.scss b/packages/react/src/components/DataGrid/index.scss
index 3996e79..0890694 100644
--- a/packages/react/src/components/DataGrid/index.scss
+++ b/packages/react/src/components/DataGrid/index.scss
@@ -117,6 +117,11 @@
       background-color: var(--c--theme--colors--greyscale-000);
     }
 
+    .c__datagrid__row__cell--select, .c__datagrid__header--select {
+      width: 0;
+      padding-right: 0;
+    }
+
   }
 
 }
diff --git a/packages/react/src/components/DataGrid/index.tsx b/packages/react/src/components/DataGrid/index.tsx
index e5613a0..932470a 100644
--- a/packages/react/src/components/DataGrid/index.tsx
+++ b/packages/react/src/components/DataGrid/index.tsx
@@ -165,7 +165,14 @@ export const DataGrid = <T extends Row>({
                     <tr key={headerGroup.id}>
                       {headerGroup.headers.map((header) => {
                         return (
-                          <th key={header.id} colSpan={header.colSpan}>
+                          <th
+                            key={header.id}
+                            colSpan={header.colSpan}
+                            className={classNames({
+                              "c__datagrid__header--select":
+                                header.id === "select",
+                            })}
+                          >
                             {header.isPlaceholder ? null : (
                               <div
                                 className={classNames(
@@ -198,9 +205,10 @@ export const DataGrid = <T extends Row>({
                                     arrow_drop_down
                                   </span>
                                 )}
-                                {!header.column.getIsSorted() && (
-                                  <span className="c__datagrid__header__icon-placeholder" />
-                                )}
+                                {header.id !== "select" &&
+                                  !header.column.getIsSorted() && (
+                                    <span className="c__datagrid__header__icon-placeholder" />
+                                  )}
                               </div>
                             )}
                           </th>
@@ -227,6 +235,8 @@ export const DataGrid = <T extends Row>({
                             "c__datagrid__row__cell--highlight": highlight,
                             "c__datagrid__row__cell--actions":
                               cell.column.id === "actions",
+                            "c__datagrid__row__cell--select":
+                              cell.column.id === "select",
                           })}
                         >
                           {flexRender(