@indico-data/design-system 2.60.0 → 2.60.1

package/lib/components/tanstackTable/TankstackTable.types.d.ts

@@ -18,6 +18,7 @@ export type WithoutPaginationProps = {
 export type PaginationProps = WithPaginationProps | WithoutPaginationProps;
 export type Props<T extends object> = {
     data: T[];
+    isStriped?: boolean;
     columns: ColumnDef<T & {
         id: string;
     }>[];

package/lib/components/tanstackTable/TanstackTable.d.ts

@@ -1,4 +1,4 @@
 import { Props } from './TankstackTable.types';
-export declare function TanstackTable<T extends object>({ columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage, onChangePage, totalEntriesText, TableActions, error, enableRowSelection, clearFilters, hasFilters, showPagination, isLoading, defaultPinnedColumns, onRowClick, activeRows, actionBarClassName, ...rest }: Props<T & {
+export declare function TanstackTable<T extends object>({ columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage, onChangePage, totalEntriesText, TableActions, error, enableRowSelection, clearFilters, hasFilters, showPagination, isLoading, defaultPinnedColumns, onRowClick, activeRows, isStriped, actionBarClassName, ...rest }: Props<T & {
     id: string;
 }>): import("react/jsx-runtime").JSX.Element;

package/lib/index.css

@@ -1045,13 +1045,6 @@ a:hover,
   background-color: var(--pf-table-highlighted-color) !important;
 }
 
-.table__pagination {
-  padding-bottom: var(--pf-padding-4);
-  padding-top: var(--pf-padding-4);
-  background-color: var(--pf-table-pagination-background-color);
-  padding-left: var(--pf-padding-4);
-}
-
 .input {
   padding: 10px;
 }
@@ -2121,22 +2114,25 @@ form {
 
 :root [data-theme=light] {
   --pf-tanstack-table-background-color: var(--pf-white-color);
-  --pf-tanstack-table-font-color: var(--pf-gray-color);
-  --pf-tanstack-table-border-color: var(--pf-gray-color-200);
-  --pf-tanstack-table-stripe-color: var(--pf-gray-color-100);
-  --pf-tanstack-table-hover-color: var(--pf-gray-color-200);
+  --pf-tanstack-table-header-background-color: var(--pf-gray-color-900);
+  --pf-tanstack-table-font-color: var(--pf-gray-color-300);
+  --pf-tanstack-table-border-color: var(--pf-gray-color-700);
+  --pf-tanstack-table-stripe-color: var(--pf-gray-color-950);
+  --pf-tanstack-table-hover-color: var(--pf-secondary-color-900);
   --pf-tanstack-table-disabled-color: var(--pf-gray-color-300);
-  --pf-tanstack-table-checked-color: var(--pf-secondary-color-950);
-  --pf-tanstack-table-clicked-color: var(--pf-secondary-color-100);
-  --pf-tanstack-table-highlighted-color: var(--pf-gray-color-200);
-  --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
-    0 8px 16px rgba(0, 0, 0, 0.2);
+  --pf-tanstack-table-checked-color: var(--pf-gray-color-900);
+  --pf-tanstack-table-clicked-color: var(--pf-gray-color-800);
+  --pf-tanstack-table-highlighted-color: var(--pf-gray-color-700);
+  --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
+    0 4px 8px rgba(0, 0, 0, 0.1);
   --pf-tanstack-table-font-size: var(--pf-font-size-body2);
+  --pf-tanstack-table-pagination-background-color: var(--pf-gray-color-900);
 }
 
 :root [data-theme=dark],
 :root {
   --pf-tanstack-table-background-color: var(--pf-primary-color-800);
+  --pf-tanstack-table-header-background-color: var(--pf-primary-color-800);
   --pf-tanstack-table-font-color: var(--pf-white-color);
   --pf-tanstack-table-border-color: var(--pf-tertiary-color-800);
   --pf-tanstack-table-stripe-color: var(--pf-primary-color-700);
@@ -2175,7 +2171,7 @@ form {
   left: 50%;
   transform: translateX(-50%);
   z-index: 90;
-  box-shadow: 3px 1px 15px 0 rgba(0, 0, 0, 0.85);
+  box-shadow: 3px 1px 15px 0 rgba(0, 0, 0, 0.45);
 }
 .tanstack-table__action-bar__container {
   display: flex;
@@ -2269,6 +2265,9 @@ form {
   border-radius: var(--pf-rounded-lg);
   width: 100%;
 }
+.tanstack-table.is-striped .tanstack-table__tbody tr:nth-child(odd) td {
+  background-color: var(--pf-tanstack-table-stripe-color);
+}
 .tanstack-table .is-loading {
   border: var(--pf-border-thin) solid var(--pf-border-color);
   height: 350px;
@@ -2289,7 +2288,7 @@ form {
 }
 .tanstack-table__thead__th {
   color: var(--pf-tanstack-table-font-color);
-  background: var(--pf-tanstack-table-background-color);
+  background: var(--pf-tanstack-table-header-background-color);
   font-size: var(--pf-tanstack-table-font-size);
   font-weight: var(--pf-font-weight-medium);
   box-sizing: border-box;
@@ -2323,14 +2322,14 @@ form {
   border-right: none;
 }
 .tanstack-table__tbody__tr.is-selected td {
-  background: var(--pf-tanstack-table-checked-color);
+  background: var(--pf-tanstack-table-checked-color) !important;
 }
 .tanstack-table__tbody__tr.show-hover:hover td {
-  background-color: var(--pf-tanstack-table-hover-color);
+  background-color: var(--pf-tanstack-table-hover-color) !important;
   cursor: pointer;
 }
 .tanstack-table__tbody__tr.is-clicked td {
-  background-color: var(--pf-tanstack-table-clicked-color);
+  background-color: var(--pf-tanstack-table-clicked-color) !important;
 }
 .tanstack-table__tbody__td {
   font-size: var(--pf-font-size-base);
@@ -2381,6 +2380,13 @@ form {
   display: block;
 }
 
+.table__pagination {
+  padding-bottom: var(--pf-padding-4);
+  padding-top: var(--pf-padding-4);
+  background-color: var(--pf-tanstack-table-pagination-background-color);
+  padding-left: var(--pf-padding-4);
+}
+
 :root [data-theme=light] {
   --pf-pill-primary-background-color: var(--pf-primary-color);
   --pf-pill-primary-font-color: var(--pf-white-color);

package/lib/index.d.ts

@@ -551,6 +551,7 @@ type WithoutPaginationProps = {
 type PaginationProps$1 = WithPaginationProps | WithoutPaginationProps;
 type Props<T extends object> = {
     data: T[];
+    isStriped?: boolean;
     columns: ColumnDef<T & {
         id: string;
     }>[];
@@ -577,7 +578,7 @@ type Props<T extends object> = {
     onSelectAllChange?: (isSelected: boolean) => void;
 } & PaginationProps$1;
 
-declare function TanstackTable<T extends object>({ columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage, onChangePage, totalEntriesText, TableActions, error, enableRowSelection, clearFilters, hasFilters, showPagination, isLoading, defaultPinnedColumns, onRowClick, activeRows, actionBarClassName, ...rest }: Props<T & {
+declare function TanstackTable<T extends object>({ columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage, onChangePage, totalEntriesText, TableActions, error, enableRowSelection, clearFilters, hasFilters, showPagination, isLoading, defaultPinnedColumns, onRowClick, activeRows, isStriped, actionBarClassName, ...rest }: Props<T & {
     id: string;
 }>): react_jsx_runtime.JSX.Element;
 

package/lib/index.esm.css

@@ -1045,13 +1045,6 @@ a:hover,
   background-color: var(--pf-table-highlighted-color) !important;
 }
 
-.table__pagination {
-  padding-bottom: var(--pf-padding-4);
-  padding-top: var(--pf-padding-4);
-  background-color: var(--pf-table-pagination-background-color);
-  padding-left: var(--pf-padding-4);
-}
-
 .input {
   padding: 10px;
 }
@@ -2121,22 +2114,25 @@ form {
 
 :root [data-theme=light] {
   --pf-tanstack-table-background-color: var(--pf-white-color);
-  --pf-tanstack-table-font-color: var(--pf-gray-color);
-  --pf-tanstack-table-border-color: var(--pf-gray-color-200);
-  --pf-tanstack-table-stripe-color: var(--pf-gray-color-100);
-  --pf-tanstack-table-hover-color: var(--pf-gray-color-200);
+  --pf-tanstack-table-header-background-color: var(--pf-gray-color-900);
+  --pf-tanstack-table-font-color: var(--pf-gray-color-300);
+  --pf-tanstack-table-border-color: var(--pf-gray-color-700);
+  --pf-tanstack-table-stripe-color: var(--pf-gray-color-950);
+  --pf-tanstack-table-hover-color: var(--pf-secondary-color-900);
   --pf-tanstack-table-disabled-color: var(--pf-gray-color-300);
-  --pf-tanstack-table-checked-color: var(--pf-secondary-color-950);
-  --pf-tanstack-table-clicked-color: var(--pf-secondary-color-100);
-  --pf-tanstack-table-highlighted-color: var(--pf-gray-color-200);
-  --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
-    0 8px 16px rgba(0, 0, 0, 0.2);
+  --pf-tanstack-table-checked-color: var(--pf-gray-color-900);
+  --pf-tanstack-table-clicked-color: var(--pf-gray-color-800);
+  --pf-tanstack-table-highlighted-color: var(--pf-gray-color-700);
+  --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
+    0 4px 8px rgba(0, 0, 0, 0.1);
   --pf-tanstack-table-font-size: var(--pf-font-size-body2);
+  --pf-tanstack-table-pagination-background-color: var(--pf-gray-color-900);
 }
 
 :root [data-theme=dark],
 :root {
   --pf-tanstack-table-background-color: var(--pf-primary-color-800);
+  --pf-tanstack-table-header-background-color: var(--pf-primary-color-800);
   --pf-tanstack-table-font-color: var(--pf-white-color);
   --pf-tanstack-table-border-color: var(--pf-tertiary-color-800);
   --pf-tanstack-table-stripe-color: var(--pf-primary-color-700);
@@ -2175,7 +2171,7 @@ form {
   left: 50%;
   transform: translateX(-50%);
   z-index: 90;
-  box-shadow: 3px 1px 15px 0 rgba(0, 0, 0, 0.85);
+  box-shadow: 3px 1px 15px 0 rgba(0, 0, 0, 0.45);
 }
 .tanstack-table__action-bar__container {
   display: flex;
@@ -2269,6 +2265,9 @@ form {
   border-radius: var(--pf-rounded-lg);
   width: 100%;
 }
+.tanstack-table.is-striped .tanstack-table__tbody tr:nth-child(odd) td {
+  background-color: var(--pf-tanstack-table-stripe-color);
+}
 .tanstack-table .is-loading {
   border: var(--pf-border-thin) solid var(--pf-border-color);
   height: 350px;
@@ -2289,7 +2288,7 @@ form {
 }
 .tanstack-table__thead__th {
   color: var(--pf-tanstack-table-font-color);
-  background: var(--pf-tanstack-table-background-color);
+  background: var(--pf-tanstack-table-header-background-color);
   font-size: var(--pf-tanstack-table-font-size);
   font-weight: var(--pf-font-weight-medium);
   box-sizing: border-box;
@@ -2323,14 +2322,14 @@ form {
   border-right: none;
 }
 .tanstack-table__tbody__tr.is-selected td {
-  background: var(--pf-tanstack-table-checked-color);
+  background: var(--pf-tanstack-table-checked-color) !important;
 }
 .tanstack-table__tbody__tr.show-hover:hover td {
-  background-color: var(--pf-tanstack-table-hover-color);
+  background-color: var(--pf-tanstack-table-hover-color) !important;
   cursor: pointer;
 }
 .tanstack-table__tbody__tr.is-clicked td {
-  background-color: var(--pf-tanstack-table-clicked-color);
+  background-color: var(--pf-tanstack-table-clicked-color) !important;
 }
 .tanstack-table__tbody__td {
   font-size: var(--pf-font-size-base);
@@ -2381,6 +2380,13 @@ form {
   display: block;
 }
 
+.table__pagination {
+  padding-bottom: var(--pf-padding-4);
+  padding-top: var(--pf-padding-4);
+  background-color: var(--pf-tanstack-table-pagination-background-color);
+  padding-left: var(--pf-padding-4);
+}
+
 :root [data-theme=light] {
   --pf-pill-primary-background-color: var(--pf-primary-color);
   --pf-pill-primary-font-color: var(--pf-white-color);

package/lib/index.esm.js

@@ -41312,7 +41312,7 @@ const TableBody = ({ table, onRowClick, isLoading, columnsLength, activeRows, })
 };
 
 function TanstackTable(_a) {
-    var { columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage = 1000, onChangePage, totalEntriesText, TableActions, error, enableRowSelection = true, clearFilters, hasFilters, showPagination = true, isLoading = false, defaultPinnedColumns, onRowClick, activeRows = [], actionBarClassName } = _a, rest = __rest(_a, ["columns", "data", "className", "currentPage", "rowCount", "rowsPerPage", "onChangePage", "totalEntriesText", "TableActions", "error", "enableRowSelection", "clearFilters", "hasFilters", "showPagination", "isLoading", "defaultPinnedColumns", "onRowClick", "activeRows", "actionBarClassName"]);
+    var { columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage = 1000, onChangePage, totalEntriesText, TableActions, error, enableRowSelection = true, clearFilters, hasFilters, showPagination = true, isLoading = false, defaultPinnedColumns, onRowClick, activeRows = [], isStriped = true, actionBarClassName } = _a, rest = __rest(_a, ["columns", "data", "className", "currentPage", "rowCount", "rowsPerPage", "onChangePage", "totalEntriesText", "TableActions", "error", "enableRowSelection", "clearFilters", "hasFilters", "showPagination", "isLoading", "defaultPinnedColumns", "onRowClick", "activeRows", "isStriped", "actionBarClassName"]);
     const { columns, defaultData, windowWidth, rowSelection, // This refers to the checkboxes.
     setRowSelection, formattedColumns, setFormattedColumns, } = useTanstackTable({
         defaultColumns,
@@ -41356,6 +41356,7 @@ function TanstackTable(_a) {
     };
     return (jsxs("div", { className: "tanstack-table__outer-container", children: [jsxs("div", { className: "tanstack-table__container", children: [jsxs("table", { className: classNames('tanstack-table', className, {
                             'is-Loading': isLoading,
+                            'is-striped': isStriped,
                         }), children: [jsx("thead", { className: "tanstack-table__thead", children: jsx(TableHeader, { table: table, ref: thRefs }) }), jsx("tbody", { className: "tanstack-table__tbody", children: renderBody() })] }), hasSelectedRows && (jsx(ActionBar, { table: table, TableActions: TableActions, className: actionBarClassName }))] }), shouldRenderPagination ? (jsx(TablePagination, { currentPage: currentPage, rowCount: rowCount, onChangePage: onChangePage, rowsPerPage: rowsPerPage, totalEntriesText: totalEntriesText !== null && totalEntriesText !== void 0 ? totalEntriesText : `${totalRowsOnPage} of ${rowCount} entries` })) : null] }));
 }