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

The design-system guidelines tell that actions button must be aligned
on the right. To make this behavior effortless this feature adds a
special class to actions column to apply the correct css style in order
to achieve that.
---
 .changeset/tall-pandas-care.md                           | 5 +++++
 packages/react/src/components/DataGrid/index.mdx         | 6 ++++++
 packages/react/src/components/DataGrid/index.scss        | 5 +++++
 packages/react/src/components/DataGrid/index.stories.tsx | 4 ++--
 packages/react/src/components/DataGrid/index.tsx         | 2 ++
 5 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/tall-pandas-care.md

diff --git a/.changeset/tall-pandas-care.md b/.changeset/tall-pandas-care.md
new file mode 100644
index 0000000..fdfde2b
--- /dev/null
+++ b/.changeset/tall-pandas-care.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+add auto right alignment for the actions column in DataGrid
diff --git a/packages/react/src/components/DataGrid/index.mdx b/packages/react/src/components/DataGrid/index.mdx
index 247c441..931e7e2 100644
--- a/packages/react/src/components/DataGrid/index.mdx
+++ b/packages/react/src/components/DataGrid/index.mdx
@@ -163,6 +163,12 @@ The component automatically displays an empty state when there is no data to dis
   <Story id="components-datagrid--empty"/>
 </Canvas>
 
+## Actions alignment
+
+As you can see from examples above there's often a dedicated column for actions ( the right-most one ). Our recommendation
+is to align on the right the actions buttons, in order to make this easy and convenient we automatically align the right
+the cell contents of this column when you give it the `id` `actions`.
+
 ## Do's and don'ts
 
 ### Button
diff --git a/packages/react/src/components/DataGrid/index.scss b/packages/react/src/components/DataGrid/index.scss
index 0f0e384..3996e79 100644
--- a/packages/react/src/components/DataGrid/index.scss
+++ b/packages/react/src/components/DataGrid/index.scss
@@ -105,6 +105,11 @@
           color: var(--c--theme--colors--greyscale-800);
           font-weight: var(--c--theme--font--weights--medium);
         }
+        &--actions {
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+        }
       }
     }
 
diff --git a/packages/react/src/components/DataGrid/index.stories.tsx b/packages/react/src/components/DataGrid/index.stories.tsx
index 18e8c09..c51f86e 100644
--- a/packages/react/src/components/DataGrid/index.stories.tsx
+++ b/packages/react/src/components/DataGrid/index.stories.tsx
@@ -272,8 +272,8 @@ export const DataListOnly = () => {
           { field: "title" },
           { field: "date" },
           {
-            headerName: "action",
-            id: "action",
+            headerName: "actions",
+            id: "actions",
             renderCell: () => {
               return (
                 <Button size="small" color="secondary">
diff --git a/packages/react/src/components/DataGrid/index.tsx b/packages/react/src/components/DataGrid/index.tsx
index e1fa33c..e5613a0 100644
--- a/packages/react/src/components/DataGrid/index.tsx
+++ b/packages/react/src/components/DataGrid/index.tsx
@@ -225,6 +225,8 @@ export const DataGrid = <T extends Row>({
                           key={cell.id}
                           className={classNames({
                             "c__datagrid__row__cell--highlight": highlight,
+                            "c__datagrid__row__cell--actions":
+                              cell.column.id === "actions",
                           })}
                         >
                           {flexRender(