studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄(react) make the checkboxes column the smallest

Browse Source 
QA feedbacks told us that the checkbox column was too wide, this update
makes it the smallest possible.
This commit is contained in:
Nathan Vasse
2023-09-01 11:38:42 +02:00
committed by NathanVss
parent cf299d9e2b
commit 9be1ec52b3
3 changed files with 24 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/cool-dingos-invent.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@openfun/cunningham-react": minor
---
make the DataGrid checkboxes column the smallest possible

5
packages/react/src/components/DataGrid/index.scss
View File

@@ -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;
}
}
}

18
packages/react/src/components/DataGrid/index.tsx
View File

@@ -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(