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

🎨(react) enhance datagrid component styles

Browse Source 
update datagrid token and css files with new css variables introduce
with the new tokens architectures
This commit is contained in:
Nathan Panchout
2025-08-22 10:12:15 +02:00
committed by NathanVss
parent 59b362407d
commit c3e39a46ac
3 changed files with 46 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
packages/react/src/components/DataGrid/_index.scss
View File

@@ -2,14 +2,14 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
gap: var(--c--theme--spacings--s); gap: var(--c--globals--spacings--s);
position: relative; position: relative;
container-type: inline-size; container-type: inline-size;
&--empty { &--empty {
min-height: 400px; min-height: 400px;
background-color: var(--c--theme--colors--greyscale-000); background-color: var(--c--contextuals--background--surface--secondary);
border: 1px var(--c--theme--colors--greyscale-300) solid; border: 1px var(--c--contextuals--border--semantic--neutral--tertiary) solid;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -21,31 +21,33 @@
> table { > table {
border-collapse: collapse; border-collapse: collapse;
font-weight: var(--c--theme--font--weights--regular); font-weight: var(--c--globals--font--weights--regular);
width: 100%; width: 100%;
table-layout: fixed; table-layout: fixed;
th, td { th,
td {
text-align: left; text-align: left;
padding: 0 var(--c--theme--spacings--s); padding: 0 var(--c--globals--spacings--s);
white-space: nowrap; white-space: nowrap;
font-size: var(--c--theme--font--sizes--m); font-size: var(--c--globals--font--sizes--s);
height: 3rem; height: 3rem;
overflow: hidden; overflow: hidden;
} }
th { th {
color: var(--c--theme--colors--greyscale-800); color: var(--c--contextuals--content--semantic--neutral--primary);
font-weight: var(--c--theme--font--weights--bold); font-weight: var(--c--globals--font--weights--bold);
font-size: var(--c--theme--font--sizes--h5); font-size: var(--c--globals--font--sizes--h5);
text-transform: uppercase; text-transform: uppercase;
.c__datagrid__header { .c__datagrid__header {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: var(--c--globals--font--sizes--xs) !important;
.material-icons { .material-icons {
color: var(--c--theme--colors--greyscale-500); color: var(--c--contextuals--content--semantic--neutral--tertiary);
} }
&--sortable { &--sortable {
@@ -60,18 +62,18 @@
} }
td { td {
color: var(--c--theme--colors--greyscale-700); color: var(--c--contextuals--content--semantic--neutral--primary);
} }
tbody tr { tbody tr, thead tr {
border: 1px var(--c--theme--colors--greyscale-300) solid; border: 1px var(--c--contextuals--border--surface--primary) solid;
} }
.c__datagrid__row { .c__datagrid__row {
&__cell { &__cell {
&--highlight { &--highlight {
color: var(--c--theme--colors--greyscale-800); color: var(--c--contextuals--content--semantic--neutral--primary);
font-weight: var(--c--theme--font--weights--medium); font-weight: var(--c--globals--font--weights--medium);
} }
&--actions { &--actions {
display: flex; display: flex;
@@ -81,8 +83,8 @@
} }
} }
tbody { tbody, thead {
background-color: var(--c--theme--colors--greyscale-000); background-color: var(--c--contextuals--background--surface--secondary);
} }
} }
} }
@@ -98,14 +100,20 @@
&__background { &__background {
position: absolute; position: absolute;
inset: 0; inset: 0;
background-color: var(--c--theme--colors--greyscale-100); background-color: var(--c--contextuals--background--semantic--neutral--tertiary);
opacity: 0.5; opacity: 0.5;
animation: pulse 1s infinite var(--c--theme--transitions--ease-out); animation: pulse 1s infinite var(--c--globals--transitions--ease-out);
@keyframes pulse { @keyframes pulse {
0% { opacity: 0.5; } 0% {
50% { opacity: 0.7; } opacity: 0.5;
100% { opacity: 0.5; } }
50% {
opacity: 0.7;
}
100% {
opacity: 0.5;
}
} }
} }
} }
@@ -114,17 +122,14 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: var(--c--theme--spacings--s); gap: var(--c--globals--spacings--s);
img { img {
max-width: 400px; max-width: 400px;
width: 80%; width: 80%;
padding: 0.625rem; padding: 0.625rem;
border-radius: 0.625rem; border-radius: 0.625rem;
border: 1px var(--c--theme--colors--greyscale-300) solid; border: 1px var(--c--contextuals--border--semantic--neutral--tertiary) solid;
} }
} }
} }

7
packages/react/src/components/DataGrid/index.stories.tsx
View File

@@ -114,7 +114,7 @@ export const ClientSideWithoutPagination = () => {
id: "actions", id: "actions",
renderCell: () => ( renderCell: () => (
<Button <Button
color="tertiary-text" color="tertiary"
size="small" size="small"
icon={<span className="material-icons">delete</span>} icon={<span className="material-icons">delete</span>}
/> />
@@ -254,7 +254,8 @@ export const FullServerSide = () => {
id: "actions", id: "actions",
renderCell: () => ( renderCell: () => (
<Button <Button
color="tertiary-text" variant="neutral"
color="tertiary"
size="small" size="small"
icon={<span className="material-icons">delete</span>} icon={<span className="material-icons">delete</span>}
/> />
@@ -327,7 +328,7 @@ export const WithColumnWidth = () => {
size: 50, size: 50,
renderCell: () => ( renderCell: () => (
<Button <Button
color="tertiary-text" color="tertiary"
size="small" size="small"
icon={<span className="material-icons">delete</span>} icon={<span className="material-icons">delete</span>}
/> />

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

@@ -102,7 +102,7 @@ export const DataGrid = <T extends Row>({
headlessColumns.forEach((column) => { headlessColumns.forEach((column) => {
if (column.enableSorting && !onSortModelChange) { if (column.enableSorting && !onSortModelChange) {
console.warn( console.warn(
"You are using a column with sorting enabled, but you are not providing an `onSortModelChange` handler. The sorting will not work as expected.", "You are using a column with sorting enabled, but you are not providing an `onSortModelChange` handler. The sorting will not work as expected."
); );
} }
}); });
@@ -112,11 +112,11 @@ export const DataGrid = <T extends Row>({
*/ */
const paginationState = useMemo( const paginationState = useMemo(
() => paginationToPaginationState(pagination), () => paginationToPaginationState(pagination),
[pagination], [pagination]
); );
const headlessSorting = useMemo( const headlessSorting = useMemo(
() => sortModelToSortingState(sortModel), () => sortModelToSortingState(sortModel),
[sortModel], [sortModel]
); );
/** /**
@@ -139,7 +139,7 @@ export const DataGrid = <T extends Row>({
// a TS error. // a TS error.
if (typeof newHeadlessSorting === "function") { if (typeof newHeadlessSorting === "function") {
onSortModelChange?.( onSortModelChange?.(
sortingStateToSortModel(newHeadlessSorting(headlessSorting)), sortingStateToSortModel(newHeadlessSorting(headlessSorting))
); );
} }
}, },
@@ -171,7 +171,7 @@ export const DataGrid = <T extends Row>({
const getContent = () => { const getContent = () => {
if (showEmptyPlaceholder) { if (showEmptyPlaceholder) {
return ( return (
<div className="c__datagrid__empty-placeholder fs-h3 clr-greyscale-900 fw-bold"> <div className="c__datagrid__empty-placeholder fs-h3 fw-bold">
{!hideEmptyPlaceholderImage && ( {!hideEmptyPlaceholderImage && (
<img src={emptyImageUrl} alt={t("components.datagrid.empty_alt")} /> <img src={emptyImageUrl} alt={t("components.datagrid.empty_alt")} />
)} )}
@@ -221,7 +221,7 @@ export const DataGrid = <T extends Row>({
{ {
"c__datagrid__header--sortable": "c__datagrid__header--sortable":
header.column.getCanSort(), header.column.getCanSort(),
}, }
)} )}
{...(header.column.getCanSort() {...(header.column.getCanSort()
? { ? {
@@ -240,13 +240,13 @@ export const DataGrid = <T extends Row>({
indeterminate={table.getIsSomeRowsSelected()} indeterminate={table.getIsSomeRowsSelected()}
onChange={table.getToggleAllRowsSelectedHandler()} onChange={table.getToggleAllRowsSelectedHandler()}
aria-label={t( aria-label={t(
"components.datagrid.rows_selection_aria", "components.datagrid.rows_selection_aria"
)} )}
/> />
) : ( ) : (
flexRender( flexRender(
header.column.columnDef.header, header.column.columnDef.header,
header.getContext(), header.getContext()
) )
)} )}
{header.column.getIsSorted() === "asc" && ( {header.column.getIsSorted() === "asc" && (
@@ -303,7 +303,7 @@ export const DataGrid = <T extends Row>({
> >
{flexRender( {flexRender(
cell.column.columnDef.cell, cell.column.columnDef.cell,
cell.getContext(), cell.getContext()
)} )}
</td> </td>
); );