@indico-data/design-system 3.0.1 → 3.0.3

package/package.json

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

package/src/components/floatUI/styles/FloatUI.scss

@@ -4,6 +4,7 @@
 }
 
 .floatui-content {
+  border: solid var(--pf-border-thin) var(--pf-border-color-secondary);
   border-radius: var(--pf-floatui-border-radius);
   box-shadow: var(--pf-floatui-box-shadow);
   background: var(--pf-floatui-background-color);

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/pagination/Pagination.tsx

@@ -75,7 +75,7 @@ export const Pagination = ({
                 className={classNames('pagination__current-page-input', {
                   'has-error': hasError,
                 })}
-                value={inputValue}
+                value={totalPages === 0 ? '0' : inputValue}
                 name="currentPage"
                 label="Current Page"
                 hasHiddenLabel

package/src/components/pagination/__tests__/Pagination.test.tsx

@@ -88,4 +88,9 @@ describe('Pagination', () => {
     });
     expect(screen.getByTestId('pagination-current-page-input')).toHaveClass('has-error');
   });
+
+  it('displays 0 when the total pages is 0', () => {
+    render(<Pagination totalPages={0} currentPage={1} onChange={() => {}} />);
+    expect(screen.getByTestId('pagination-current-page-input')).toHaveValue('0');
+  });
 });

package/src/components/pill/styles/Pill.scss

@@ -1,80 +1,80 @@
 // Light Theme Specific Variables
 :root [data-theme='light'] {
-  --pf-pill-info-background-color: var(--pf-secondary-color-500);
+  --pf-pill-info-background-color: var(--pf-info-color-dark);
   --pf-pill-info-font-color: var(--pf-secondary-color-50);
-  --pf-pill-info-border-color: var(--pf-secondary-color-500);
+  --pf-pill-info-border-color: var(--pf-info-color-dark);
 
-  --pf-pill-error-background-color: var(--pf-red-color-450);
+  --pf-pill-error-background-color: var(--pf-error-color-dark);
   --pf-pill-error-font-color: var(--pf-red-color-50);
-  --pf-pill-error-border-color: var(--pf-red-color-450);
+  --pf-pill-error-border-color: var(--pf-error-color-dark);
 
-  --pf-pill-warning-background-color: var(--pf-yellow-color-450);
+  --pf-pill-warning-background-color: var(--pf-warning-color-dark);
   --pf-pill-warning-font-color: var(--pf-yellow-color-50);
-  --pf-pill-warning-border-color: var(--pf-yellow-color-450);
+  --pf-pill-warning-border-color: var(--pf-warning-color-dark);
 
   --pf-pill-neutral-background-color: var(--pf-gray-color-700);
   --pf-pill-neutral-font-color: var(--pf-gray-color-50);
   --pf-pill-neutral-border-color: var(--pf-gray-color-700);
 
-  --pf-pill-success-background-color: var(--pf-green-color-600);
+  --pf-pill-success-background-color: var(--pf-success-color-dark);
   --pf-pill-success-font-color: var(--pf-green-color-50);
-  --pf-pill-success-border-color: var(--pf-green-color-600);
+  --pf-pill-success-border-color: var(--pf-success-color-dark);
 
-  --pf-pill-purple-background-color: var(--pf-purple-color-450);
+  --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
   --pf-pill-purple-font-color: var(--pf-purple-color-50);
-  --pf-pill-purple-border-color: var(--pf-purple-color-450);
+  --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
 
-  --pf-pill-pending-background-color: var(--pf-pink-color-450);
+  --pf-pill-pending-background-color: var(--pf-pending-color-dark);
   --pf-pill-pending-font-color: var(--pf-pink-color-50);
-  --pf-pill-pending-border-color: var(--pf-pink-color-450);
+  --pf-pill-pending-border-color: var(--pf-pending-color-dark);
 
-  --pf-pill-orange-background-color: var(--pf-orange-color-450);
+  --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
   --pf-pill-orange-font-color: var(--pf-orange-color-50);
-  --pf-pill-orange-border-color: var(--pf-orange-color-450);
+  --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
 
-  --pf-pill-teal-background-color: var(--pf-teal-color-600);
+  --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
   --pf-pill-teal-font-color: var(--pf-teal-color-50);
-  --pf-pill-teal-border-color: var(--pf-teal-color-600);
+  --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
 }
 
 // Dark Theme Specific Variables
 :root [data-theme='dark'],
 :root {
-  --pf-pill-info-background-color: var(--pf-secondary-color-500);
+  --pf-pill-info-background-color: var(--pf-info-color-dark);
   --pf-pill-info-font-color: var(--pf-secondary-color-50);
-  --pf-pill-info-border-color: var(--pf-secondary-color-500);
+  --pf-pill-info-border-color: var(--pf-info-color-dark);
 
-  --pf-pill-error-background-color: var(--pf-red-color-450);
+  --pf-pill-error-background-color: var(--pf-error-color-dark);
   --pf-pill-error-font-color: var(--pf-red-color-50);
-  --pf-pill-error-border-color: var(--pf-red-color-450);
+  --pf-pill-error-border-color: var(--pf-error-color-dark);
 
-  --pf-pill-warning-background-color: var(--pf-yellow-color-450);
+  --pf-pill-warning-background-color: var(--pf-warning-color-dark);
   --pf-pill-warning-font-color: var(--pf-yellow-color-50);
-  --pf-pill-warning-border-color: var(--pf-yellow-color-450);
+  --pf-pill-warning-border-color: var(--pf-warning-color-dark);
 
   --pf-pill-neutral-background-color: var(--pf-gray-color-700);
   --pf-pill-neutral-font-color: var(--pf-gray-color-50);
   --pf-pill-neutral-border-color: var(--pf-gray-color-700);
 
-  --pf-pill-success-background-color: var(--pf-green-color-600);
+  --pf-pill-success-background-color: var(--pf-success-color-dark);
   --pf-pill-success-font-color: var(--pf-green-color-50);
-  --pf-pill-success-border-color: var(--pf-green-color-600);
+  --pf-pill-success-border-color: var(--pf-success-color-dark);
 
-  --pf-pill-purple-background-color: var(--pf-purple-color-450);
+  --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
   --pf-pill-purple-font-color: var(--pf-purple-color-50);
-  --pf-pill-purple-border-color: var(--pf-purple-color-450);
+  --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
 
-  --pf-pill-pending-background-color: var(--pf-pink-color-450);
-  --pf-pill-pipendingnk-font-color: var(--pf-pink-color-50);
-  --pf-pill-pending-border-color: var(--pf-pink-color-450);
+  --pf-pill-pending-background-color: var(--pf-pending-color-dark);
+  --pf-pill-pending-font-color: var(--pf-pink-color-50);
+  --pf-pill-pending-border-color: var(--pf-pending-color-dark);
 
-  --pf-pill-orange-background-color: var(--pf-orange-color-450);
+  --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
   --pf-pill-orange-font-color: var(--pf-orange-color-50);
-  --pf-pill-orange-border-color: var(--pf-orange-color-450);
+  --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
 
-  --pf-pill-teal-background-color: var(--pf-teal-color-600);
+  --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
   --pf-pill-teal-font-color: var(--pf-teal-color-50);
-  --pf-pill-teal-border-color: var(--pf-teal-color-600);
+  --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
 }
 
 .pill {

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,
           })}
         >

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;
@@ -210,24 +203,6 @@
     height: 100%;
     border: var(--pf-border-sm) solid var(--pf-border-color-primary);
 
-    @keyframes shimmer {
-      0% {
-        background-color: var(--pf-primary-color-700) 40;
-      }
-      50% {
-        background-color: var(--pf-primary-color-700);
-      }
-      100% {
-        background-color: var(--pf-primary-color-700) 40;
-      }
-    }
-
-    animation: none;
-
-    &.is-loading {
-      animation: shimmer 3s ease-in-out infinite;
-    }
-
     svg {
       margin: 0 auto;
       display: block;

package/src/components/tooltip/Tooltip.tsx

@@ -23,7 +23,6 @@ export const Tooltip = ({
 }: TooltipProps) => {
   return (
     <ReactTooltip
-      border="solid var(--pf-border-thin)var(--pf-border-color)"
       style={{
         backgroundColor: 'var(--pf-tooltip-background-color)',
         color: 'var(--pf-tooltip-font-color)',

package/src/styles/globals.scss

@@ -161,7 +161,7 @@ a,
 .react-tooltip {
   z-index: 5;
   background-color: var(--pf-tooltip-background-color);
-  border: var(--pf-border-sm) solid var(--pf-border-color-primary);
+  color: var(--pf-tooltip-font-color);
   opacity: 1 !important;
   text-wrap: wrap;
 }

package/src/styles/variables/themes/dark.scss

@@ -131,6 +131,7 @@
   --pf-yellow-color-400: #eaab3e;
   --pf-yellow-color-450: #dc9518;
   --pf-yellow-color-500: #ad791f;
+  --pf-yellow-color-550: #976f00;
   --pf-yellow-color-600: #825b17;
   --pf-yellow-color-700: #58421d;
   --pf-yellow-color-800: #32291b;
@@ -240,10 +241,24 @@
 
   // Utility Colors
   --pf-error-color: var(--pf-red-color-450);
+  --pf-error-color-dark: color-mix(in srgb, var(--pf-red-color-450) 75%, black);
+  --pf-error-color-light: color-mix(in srgb, var(--pf-red-color-450) 60%, white);
   --pf-success-color: var(--pf-green-color-500);
-  --pf-warning-color: var(--pf-yellow-color-400);
+  --pf-success-color-dark: color-mix(in srgb, var(--pf-green-color-500) 70%, black);
+  --pf-success-color-light: color-mix(in srgb, var(--pf-green-color-500) 60%, white);
+  --pf-warning-color: var(--pf-yellow-color-450);
+  --pf-warning-color-dark: color-mix(in srgb, var(--pf-yellow-color-450) 50%, black);
+  --pf-warning-color-light: color-mix(in srgb, var(--pf-yellow-color-50) 60%, white);
   --pf-neutral-color: var(--pf-gray-color-500);
+  --pf-neutral-color-dark: color-mix(in srgb, var(--pf-gray-color-500) 75%, black);
+  --pf-neutral-color-light: color-mix(in srgb, var(--pf-gray-color-500) 60%, white);
   --pf-info-color: var(--pf-secondary-color-450);
+  --pf-info-color-dark: color-mix(in srgb, var(--pf-secondary-color-450) 75%, black);
+  --pf-info-color-light: color-mix(in srgb, var(--pf-secondary-color-450) 60%, white);
   --pf-brand-color: var(--pf-brand-color-450);
-  --pf-pending-color: var(--pf-orange-color-400);
+  --pf-brand-color-dark: color-mix(in srgb, var(--pf-brand-color-450) 75%, black);
+  --pf-brand-color-light: color-mix(in srgb, var(--pf-brand-color-450) 60%, white);
+  --pf-pending-color: var(--pf-pink-color-450);
+  --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
+  --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
 }

package/src/styles/variables/themes/light.scss

@@ -130,6 +130,7 @@
   --pf-yellow-color-400: #eaab3e;
   --pf-yellow-color-450: #dc9518;
   --pf-yellow-color-500: #ad791f;
+  --pf-yellow-color-550: #976f00;
   --pf-yellow-color-600: #825b17;
   --pf-yellow-color-700: #58421d;
   --pf-yellow-color-800: #32291b;
@@ -238,10 +239,24 @@
 
   // Utility Colors
   --pf-error-color: var(--pf-red-color-450);
+  --pf-error-color-dark: color-mix(in srgb, var(--pf-red-color-450) 75%, black);
+  --pf-error-color-light: color-mix(in srgb, var(--pf-red-color-450) 60%, white);
   --pf-success-color: var(--pf-green-color-500);
-  --pf-warning-color: var(--pf-yellow-color-400);
+  --pf-success-color-dark: color-mix(in srgb, var(--pf-green-color-500) 70%, black);
+  --pf-success-color-light: color-mix(in srgb, var(--pf-green-color-500) 60%, white);
+  --pf-warning-color: var(--pf-yellow-color-450);
+  --pf-warning-color-dark: color-mix(in srgb, var(--pf-yellow-color-450) 50%, black);
+  --pf-warning-color-light: color-mix(in srgb, var(--pf-yellow-color-50) 60%, white);
   --pf-neutral-color: var(--pf-gray-color-500);
+  --pf-neutral-color-dark: color-mix(in srgb, var(--pf-gray-color-500) 75%, black);
+  --pf-neutral-color-light: color-mix(in srgb, var(--pf-gray-color-500) 60%, white);
   --pf-info-color: var(--pf-secondary-color-450);
+  --pf-info-color-dark: color-mix(in srgb, var(--pf-secondary-color-450) 75%, black);
+  --pf-info-color-light: color-mix(in srgb, var(--pf-secondary-color-450) 60%, white);
   --pf-brand-color: var(--pf-brand-color-450);
-  --pf-pending-color: var(--pf-orange-color-400);
+  --pf-brand-color-dark: color-mix(in srgb, var(--pf-brand-color-450) 75%, black);
+  --pf-brand-color-light: color-mix(in srgb, var(--pf-brand-color-450) 60%, white);
+  --pf-pending-color: var(--pf-pink-color-450);
+  --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
+  --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
 }

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;
-  }
-}