🎨(react) enhance datagrid component styles
update datagrid token and css files with new css variables introduce with the new tokens architectures
This commit is contained in:
Nathan Panchout
committed by
NathanVss
NathanVss
parent
59b362407d
commit
c3e39a46ac
@@ -2,14 +2,14 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: var(--c--theme--spacings--s);
|
||||
gap: var(--c--globals--spacings--s);
|
||||
position: relative;
|
||||
container-type: inline-size;
|
||||
|
||||
&--empty {
|
||||
min-height: 400px;
|
||||
background-color: var(--c--theme--colors--greyscale-000);
|
||||
border: 1px var(--c--theme--colors--greyscale-300) solid;
|
||||
background-color: var(--c--contextuals--background--surface--secondary);
|
||||
border: 1px var(--c--contextuals--border--semantic--neutral--tertiary) solid;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -21,31 +21,33 @@
|
||||
|
||||
> table {
|
||||
border-collapse: collapse;
|
||||
font-weight: var(--c--theme--font--weights--regular);
|
||||
font-weight: var(--c--globals--font--weights--regular);
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
|
||||
th, td {
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
padding: 0 var(--c--theme--spacings--s);
|
||||
padding: 0 var(--c--globals--spacings--s);
|
||||
white-space: nowrap;
|
||||
font-size: var(--c--theme--font--sizes--m);
|
||||
font-size: var(--c--globals--font--sizes--s);
|
||||
height: 3rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
th {
|
||||
color: var(--c--theme--colors--greyscale-800);
|
||||
font-weight: var(--c--theme--font--weights--bold);
|
||||
font-size: var(--c--theme--font--sizes--h5);
|
||||
color: var(--c--contextuals--content--semantic--neutral--primary);
|
||||
font-weight: var(--c--globals--font--weights--bold);
|
||||
font-size: var(--c--globals--font--sizes--h5);
|
||||
text-transform: uppercase;
|
||||
|
||||
.c__datagrid__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: var(--c--globals--font--sizes--xs) !important;
|
||||
|
||||
.material-icons {
|
||||
color: var(--c--theme--colors--greyscale-500);
|
||||
color: var(--c--contextuals--content--semantic--neutral--tertiary);
|
||||
}
|
||||
|
||||
&--sortable {
|
||||
@@ -60,18 +62,18 @@
|
||||
}
|
||||
|
||||
td {
|
||||
color: var(--c--theme--colors--greyscale-700);
|
||||
color: var(--c--contextuals--content--semantic--neutral--primary);
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
border: 1px var(--c--theme--colors--greyscale-300) solid;
|
||||
tbody tr, thead tr {
|
||||
border: 1px var(--c--contextuals--border--surface--primary) solid;
|
||||
}
|
||||
|
||||
.c__datagrid__row {
|
||||
&__cell {
|
||||
&--highlight {
|
||||
color: var(--c--theme--colors--greyscale-800);
|
||||
font-weight: var(--c--theme--font--weights--medium);
|
||||
color: var(--c--contextuals--content--semantic--neutral--primary);
|
||||
font-weight: var(--c--globals--font--weights--medium);
|
||||
}
|
||||
&--actions {
|
||||
display: flex;
|
||||
@@ -81,8 +83,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
background-color: var(--c--theme--colors--greyscale-000);
|
||||
tbody, thead {
|
||||
background-color: var(--c--contextuals--background--surface--secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -98,14 +100,20 @@
|
||||
&__background {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-color: var(--c--theme--colors--greyscale-100);
|
||||
background-color: var(--c--contextuals--background--semantic--neutral--tertiary);
|
||||
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 {
|
||||
0% { opacity: 0.5; }
|
||||
50% { opacity: 0.7; }
|
||||
100% { opacity: 0.5; }
|
||||
0% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -114,17 +122,14 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--c--theme--spacings--s);
|
||||
gap: var(--c--globals--spacings--s);
|
||||
|
||||
img {
|
||||
max-width: 400px;
|
||||
width: 80%;
|
||||
padding: 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -114,7 +114,7 @@ export const ClientSideWithoutPagination = () => {
|
||||
id: "actions",
|
||||
renderCell: () => (
|
||||
<Button
|
||||
color="tertiary-text"
|
||||
color="tertiary"
|
||||
size="small"
|
||||
icon={<span className="material-icons">delete</span>}
|
||||
/>
|
||||
@@ -254,7 +254,8 @@ export const FullServerSide = () => {
|
||||
id: "actions",
|
||||
renderCell: () => (
|
||||
<Button
|
||||
color="tertiary-text"
|
||||
variant="neutral"
|
||||
color="tertiary"
|
||||
size="small"
|
||||
icon={<span className="material-icons">delete</span>}
|
||||
/>
|
||||
@@ -327,7 +328,7 @@ export const WithColumnWidth = () => {
|
||||
size: 50,
|
||||
renderCell: () => (
|
||||
<Button
|
||||
color="tertiary-text"
|
||||
color="tertiary"
|
||||
size="small"
|
||||
icon={<span className="material-icons">delete</span>}
|
||||
/>
|
||||
|
||||
@@ -102,7 +102,7 @@ export const DataGrid = <T extends Row>({
|
||||
headlessColumns.forEach((column) => {
|
||||
if (column.enableSorting && !onSortModelChange) {
|
||||
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(
|
||||
() => paginationToPaginationState(pagination),
|
||||
[pagination],
|
||||
[pagination]
|
||||
);
|
||||
const headlessSorting = useMemo(
|
||||
() => sortModelToSortingState(sortModel),
|
||||
[sortModel],
|
||||
[sortModel]
|
||||
);
|
||||
|
||||
/**
|
||||
@@ -139,7 +139,7 @@ export const DataGrid = <T extends Row>({
|
||||
// a TS error.
|
||||
if (typeof newHeadlessSorting === "function") {
|
||||
onSortModelChange?.(
|
||||
sortingStateToSortModel(newHeadlessSorting(headlessSorting)),
|
||||
sortingStateToSortModel(newHeadlessSorting(headlessSorting))
|
||||
);
|
||||
}
|
||||
},
|
||||
@@ -171,7 +171,7 @@ export const DataGrid = <T extends Row>({
|
||||
const getContent = () => {
|
||||
if (showEmptyPlaceholder) {
|
||||
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 && (
|
||||
<img src={emptyImageUrl} alt={t("components.datagrid.empty_alt")} />
|
||||
)}
|
||||
@@ -221,7 +221,7 @@ export const DataGrid = <T extends Row>({
|
||||
{
|
||||
"c__datagrid__header--sortable":
|
||||
header.column.getCanSort(),
|
||||
},
|
||||
}
|
||||
)}
|
||||
{...(header.column.getCanSort()
|
||||
? {
|
||||
@@ -240,13 +240,13 @@ export const DataGrid = <T extends Row>({
|
||||
indeterminate={table.getIsSomeRowsSelected()}
|
||||
onChange={table.getToggleAllRowsSelectedHandler()}
|
||||
aria-label={t(
|
||||
"components.datagrid.rows_selection_aria",
|
||||
"components.datagrid.rows_selection_aria"
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext(),
|
||||
header.getContext()
|
||||
)
|
||||
)}
|
||||
{header.column.getIsSorted() === "asc" && (
|
||||
@@ -303,7 +303,7 @@ export const DataGrid = <T extends Row>({
|
||||
>
|
||||
{flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext(),
|
||||
cell.getContext()
|
||||
)}
|
||||
</td>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user