@indico-data/design-system 3.0.2 → 3.0.4

package/package.json

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

package/src/components/forms/checkbox/Checkbox.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 
 export interface CheckboxProps {
   ref?: React.LegacyRef<HTMLInputElement>;
@@ -10,16 +11,20 @@ export interface CheckboxProps {
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   isDisabled?: boolean;
   defaultChecked?: boolean;
+  className?: string;
 }
 
 export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
-  ({ id, label, name, value, onChange, isDisabled, isChecked = false, ...rest }, ref) => {
+  (
+    { id, label, name, value, onChange, isDisabled, isChecked = false, className, ...rest },
+    ref,
+  ) => {
     return (
       <div className="form-control">
         <div className="checkbox-wrapper">
           <input
             data-testid={`form-checkbox-input-${name}`}
-            className="checkbox-input"
+            className={classNames('checkbox-input', className)}
             type="checkbox"
             id={id}
             name={name}

package/src/components/forms/input/Input.tsx

@@ -56,6 +56,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     const inputClasses = classNames(
       'input',
       {
+        'is-clearable': isClearable,
         error: hasErrors,
         'input--has-icon': iconName,
       },

package/src/components/forms/input/styles/Input.scss

@@ -27,4 +27,7 @@
     color: var(--pf-form-input-color);
     cursor: pointer;
   }
+  .is-clearable {
+    padding-right: var(--pf-padding-6);
+  }
 }

package/src/components/pagination/Pagination.tsx

@@ -64,7 +64,7 @@ export const Pagination = ({
                 variant="link"
                 onClick={handlePreviousPage}
                 iconLeft="chevron-left"
-                isDisabled={isPreviousButtonDisabled}
+                isDisabled={isPreviousButtonDisabled || totalPages === 0}
               />
             </div>
           </Col>
@@ -106,7 +106,7 @@ export const Pagination = ({
                 variant="link"
                 onClick={handleNextPage}
                 iconLeft="chevron-right"
-                isDisabled={isNextButtonDisabled}
+                isDisabled={isNextButtonDisabled || totalPages === 0}
               />
             </div>
           </Col>

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

@@ -35,6 +35,7 @@ export type Props<T extends object> = {
   clearFilters?: () => void;
   hasFilters?: boolean;
   isLoading?: boolean;
+  isLoadingMessage?: string;
   defaultPinnedColumns?: string[];
   onClickRow?: ((row: Row<T>) => void) | null;
   onRowClick?: (row: T) => void;

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

@@ -19,6 +19,7 @@ const meta: Meta = {
     clearFilters: () => {},
     hasFilters: false,
     isLoading: false,
+    isLoadingMessage: 'Table is loading...',
     enableRowSelection: true,
     showPagination: false,
     onClickRow: null,
@@ -130,6 +131,15 @@ const meta: Meta = {
         defaultValue: { summary: 'false' },
       },
     },
+    isLoadingMessage: {
+      description: 'Message to display when the table is loading.',
+      control: { type: 'text' },
+      table: {
+        category: 'Props',
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Table is loading...' },
+      },
+    },
     defaultPinnedColumns: {
       description: 'Columns that are pinned by default.',
       control: false,

package/src/components/tanstackTable/TanstackTable.tsx

@@ -16,6 +16,7 @@ import { Props } from './TankstackTable.types';
 import { useTanstackTable } from './useTanstackTable';
 import { TableHeader } from './components/TableHeader';
 import { TableBody } from './components/TableBody';
+import { TableLoading } from './components/TableLoading/TableLoading';
 
 export function TanstackTable<T extends object>({
   columns: defaultColumns,
@@ -33,6 +34,7 @@ export function TanstackTable<T extends object>({
   hasFilters,
   showPagination = true,
   isLoading = false,
+  isLoadingMessage = 'Table is loading...',
   defaultPinnedColumns,
   onRowClick,
   activeRows = [],
@@ -129,12 +131,14 @@ export function TanstackTable<T extends object>({
       );
     }
 
+    if (isLoading) {
+      return <TableLoading columns={columns} message={isLoadingMessage} />;
+    }
+
     return (
       <TableBody<T & { id: string }>
         table={table}
         onRowClick={onRowClick}
-        isLoading={isLoading}
-        columnsLength={columns.length}
         activeRows={activeRows}
       />
     );
@@ -145,7 +149,6 @@ export function TanstackTable<T extends object>({
       <div className="tanstack-table__container">
         <table
           className={classNames('tanstack-table', className, {
-            'is-Loading': isLoading,
             'is-striped': isStriped,
           })}
         >
@@ -165,7 +168,11 @@ export function TanstackTable<T extends object>({
           rowCount={rowCount}
           onChangePage={onChangePage}
           rowsPerPage={rowsPerPage}
-          totalEntriesText={totalEntriesText ?? `${totalRowsOnPage} of ${rowCount} entries`}
+          totalEntriesText={
+            totalEntriesText ?? rowCount === 1
+              ? '1 entry'
+              : `${totalRowsOnPage} of ${rowCount} entries`
+          }
         />
       ) : null}
     </div>

package/src/components/tanstackTable/components/NoResults/NoResults.scss

@@ -11,10 +11,10 @@
   &__text {
     font-size: var(--pf-line-height-md);
     font-weight: var(--pf-font-weight-medium);
-    color: var(--pf-primary-color-50);
+    color: var(--pf-tanstack-table-font-color);
 
     span {
-      color: var(--pf-white-color);
+      color: var(--pf-tanstack-table-font-color);
       cursor: pointer;
       &:hover {
         text-decoration: underline;

package/src/components/tanstackTable/components/TableBody/TableBody.tsx

@@ -1,25 +1,14 @@
 import { flexRender, Table } from '@tanstack/react-table';
-import { Row } from '@tanstack/react-table';
 import classNames from 'classnames';
 import { getTdStyles } from '../../helpers';
-import { CirclePulse } from '@/components/loading-indicators/CirclePulse';
-import { Dispatch, SetStateAction } from 'react';
 
 export type Props<T> = {
   table: Table<T>;
   onRowClick?: ((row: T & { id: string }) => void) | null | undefined;
-  isLoading: boolean;
-  columnsLength: number;
   activeRows: string[];
 };
 
-export const TableBody = <T,>({
-  table,
-  onRowClick,
-  isLoading,
-  columnsLength,
-  activeRows,
-}: Props<T>) => {
+export const TableBody = <T,>({ table, onRowClick, activeRows }: Props<T>) => {
   return (
     <>
       {table.getRowModel().rows.map((row) => (
@@ -60,19 +49,6 @@ export const TableBody = <T,>({
           })}
         </tr>
       ))}
-      {isLoading && (
-        <tr className="tanstack-table__tbody__tr">
-          <td
-            className={classNames('tanstack-table__centered-row', {
-              'is-loading': isLoading,
-            })}
-            colSpan={columnsLength}
-          >
-            <h2 className="mb-12">Table is loading...</h2>
-            <CirclePulse data-testid="loading-indicator" />
-          </td>
-        </tr>
-      )}
     </>
   );
 };

package/src/components/tanstackTable/components/TableLoading/TableLoading.tsx

@@ -0,0 +1,18 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { CirclePulse } from '../../../loading-indicators/CirclePulse';
+
+export type Props<T> = {
+  columns: ColumnDef<T>[];
+  message?: string;
+};
+
+export const TableLoading = <T,>({ columns, message }: Props<T>) => {
+  return (
+    <tr className="tanstack-table__tbody__tr ">
+      <td className="tanstack-table__centered-row pa-6" colSpan={columns.length}>
+        <h2 className="my-12">{message}</h2>
+        <CirclePulse data-testid="loading-indicator" className="mb-14" />
+      </td>
+    </tr>
+  );
+};

package/src/components/tanstackTable/mock-data/table-configuration.tsx

@@ -32,7 +32,7 @@ const PinHeaderColumns = ({
 };
 
 const CheckboxContainer = styled.div`
-  padding: 14px;
+  height: 28px;
 `;
 
 export const columns = [
@@ -51,7 +51,7 @@ export const columns = [
       },
     },
     header: ({ table }) => (
-      <CheckboxContainer>
+      <CheckboxContainer className="pl-3 pt-2">
         <Checkbox
           data-testid="select-all-checkbox"
           name="select-all"
@@ -70,12 +70,11 @@ export const columns = [
         />
       </CheckboxContainer>
     ),
-    cell: (
-      { row }, // todo - look at
-    ) => (
-      <CheckboxContainer>
+    cell: ({ row }) => (
+      <div className="pb-3">
         <Checkbox
           name="select"
+          className="mb-2"
           id={row.id}
           label=""
           aria-label={`checkbox-${row.id}`}
@@ -83,7 +82,7 @@ export const columns = [
           isDisabled={!row.getCanSelect()}
           onChange={row.getToggleSelectedHandler()}
         />
-      </CheckboxContainer>
+      </div>
     ),
   },
   {

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

@@ -1,5 +1,4 @@
 @import './_variables.scss';
-@import './test.scss';
 
 @import '../components/ActionBar/ActionBar.scss';
 @import '../components/NoResults/NoResults.scss';
@@ -82,12 +81,6 @@
     }
   }
 
-  .is-loading {
-    border: var(--pf-border-thin) solid var(--pf-border-color-primary);
-    height: 350px;
-    width: 100%;
-  }
-
   &__thead {
     position: sticky;
     top: 0;

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

@@ -1,19 +0,0 @@
-.tanstack-table__action-bar-test {
-  left: 20% !important;
-}
-
-.tanstack-table__action-bar-docs {
-  bottom: unset !important;
-  top: 50% !important;
-  transform: translate(-50%, -50%) !important;
-}
-
-.tanstack-table__column {
-  &.is-pinned {
-    opacity: 1;
-  }
-
-  &.is-not-pinned {
-    opacity: 0.3;
-  }
-}