@indico-data/design-system 2.60.0 → 2.60.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.60.0",
+  "version": "2.60.2",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/table/styles/Table.scss

@@ -166,12 +166,3 @@
     }
   }
 }
-
-.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
-  ); // buttons have a visual illusion of having a gap, so we add padding to adjust the left side when the total results exist
-}

package/src/components/tanstackTable/TankstackTable.types.ts

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

package/src/components/tanstackTable/TanstackTable.stories.tsx

@@ -22,8 +22,18 @@ const meta: Meta = {
     enableRowSelection: true,
     showPagination: false,
     onClickRow: null,
+    isStriped: true,
   },
   argTypes: {
+    isStriped: {
+      description: 'Striped rows',
+      defaultValue: { summary: 'true' },
+      control: { type: 'boolean' },
+      table: {
+        category: 'Props',
+        type: { summary: 'boolean' },
+      },
+    },
     data: {
       description:
         'Array of data items. These are the items that will be displayed in the table cell.',
@@ -181,6 +191,50 @@ const meta: Meta = {
         type: { summary: 'string' },
       },
     },
+
+    onRowClick: {
+      description: 'Callback when a row is clicked.',
+      action: 'onRowClick',
+      control: false,
+      table: {
+        category: 'Callbacks',
+        type: { summary: '(row: Row<T>) => void' },
+      },
+    },
+    activeRows: {
+      description: 'Array of active rows.',
+      control: false,
+      table: {
+        category: 'Props',
+        type: { summary: 'string[]' },
+      },
+    },
+    onSelectAllChange: {
+      description: 'Callback when all rows are selected.',
+      action: 'onSelectAllChange',
+      control: false,
+      table: {
+        category: 'Callbacks',
+        type: { summary: '(isSelected: boolean) => void' },
+      },
+    },
+    onRowSelectionChange: {
+      description: 'Callback when a row is selected.',
+      action: 'onRowSelectionChange',
+      control: false,
+      table: {
+        category: 'Callbacks',
+        type: { summary: '(updater: Record<string, boolean>) => void' },
+      },
+    },
+    rowSelection: {
+      description: 'Row selection state.',
+      control: false,
+      table: {
+        category: 'Props',
+        type: { summary: 'Record<string, boolean>' },
+      },
+    },
   },
   decorators: [(Story) => <Story />],
 };

package/src/components/tanstackTable/TanstackTable.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 
-import { useReactTable, getCoreRowModel, ColumnDef } from '@tanstack/react-table';
+import { useReactTable, getCoreRowModel } from '@tanstack/react-table';
 import classNames from 'classnames';
 
 import { ActionBar } from './components/ActionBar';
@@ -11,7 +11,6 @@ import { Props } from './TankstackTable.types';
 import { useTanstackTable } from './useTanstackTable';
 import { TableHeader } from './components/TableHeader';
 import { TableBody } from './components/TableBody';
-import { columns } from './mock-data/table-configuration';
 
 export function TanstackTable<T extends object>({
   columns: defaultColumns,
@@ -32,6 +31,7 @@ export function TanstackTable<T extends object>({
   defaultPinnedColumns,
   onRowClick,
   activeRows = [],
+  isStriped = true,
   actionBarClassName,
   ...rest
 }: Props<T & { id: string }>) {
@@ -135,6 +135,7 @@ export function TanstackTable<T extends object>({
         <table
           className={classNames('tanstack-table', className, {
             'is-Loading': isLoading,
+            'is-striped': isStriped,
           })}
         >
           <thead className="tanstack-table__thead">

package/src/components/tanstackTable/components/ActionBar/ActionBar.scss

@@ -4,7 +4,7 @@
   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);
   &__container {
     display: flex;
     align-items: center;

package/src/components/tanstackTable/styles/_variables.scss

@@ -2,23 +2,29 @@
 
 :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-tanstack-table-background-color);
+  --pf-tanstack-table-pagination-font-color: var(--pf-tanstack-table-font-color);
 }
 
 // Dark Theme Specific Variables
 :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);
@@ -32,4 +38,5 @@
     0 8px 16px rgba(0, 0, 0, 0.3);
   --pf-tanstack-table-font-size: var(--pf-font-size-body2);
   --pf-tanstack-table-pagination-background-color: var(--pf-primary-color-700);
+  --pf-tanstack-table-pagination-font-color: var(--pf-tanstack-table-font-color);
 }

package/src/components/tanstackTable/styles/table.scss

@@ -64,6 +64,16 @@
   border-radius: var(--pf-rounded-lg);
   width: 100%;
 
+  &.is-striped {
+    .tanstack-table__tbody {
+      tr:nth-child(odd) {
+        td {
+          background-color: var(--pf-tanstack-table-stripe-color);
+        }
+      }
+    }
+  }
+
   .is-loading {
     border: var(--pf-border-thin) solid var(--pf-border-color);
     height: 350px;
@@ -92,7 +102,7 @@
 
     &__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;
@@ -135,14 +145,14 @@
 
       &.is-selected {
         td {
-          background: var(--pf-tanstack-table-checked-color);
+          background: var(--pf-tanstack-table-checked-color) !important;
         }
       }
 
       &.show-hover {
         &:hover {
           td {
-            background-color: var(--pf-tanstack-table-hover-color);
+            background-color: var(--pf-tanstack-table-hover-color) !important;
             cursor: pointer;
           }
         }
@@ -150,7 +160,7 @@
 
       &.is-clicked {
         td {
-          background-color: var(--pf-tanstack-table-clicked-color);
+          background-color: var(--pf-tanstack-table-clicked-color) !important;
         }
       }
     }
@@ -216,3 +226,13 @@
     }
   }
 }
+
+.table__pagination {
+  padding-bottom: var(--pf-padding-4);
+  padding-top: var(--pf-padding-4);
+  color: var(--pf-tanstack-table-pagination-font-color);
+  background-color: var(--pf-tanstack-table-pagination-background-color);
+  padding-left: var(
+    --pf-padding-4
+  ); // buttons have a visual illusion of having a gap, so we add padding to adjust the left side when the total results exist
+}