@indico-data/design-system 2.47.3 → 2.48.0

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

@@ -12,7 +12,7 @@
 
 .table {
   border-radius: var(--pf-rounded);
-  border: var(--pf-border-sm) solid var(--pf-table-border-color);
+  background-color: var(--pf-table-background-color);
 
   &--full-height {
     height: 100%;
@@ -26,17 +26,39 @@
     color: var(--pf-table-font-color);
     border-radius: var(--pf-rounded) !important;
     border: var(--pf-border-sm) solid var(--pf-table-border-color);
+    height: 100%;
+
+    // Webkit scrollbar styles
+    &::-webkit-scrollbar {
+      width: var(--pf-size-2);
+      height: var(--pf-size-2);
+      cursor: pointer;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: var(--pf-table-background-color);
+      border-radius: var(--pf-rounded);
+      cursor: pointer;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var(--pf-table-border-color);
+      border-radius: var(--pf-rounded);
+      cursor: pointer;
+      &:hover {
+        background: var(--pf-primary-color);
+      }
+    }
+
+    // Firefox scrollbar styles
+    scrollbar-width: thin;
+    scrollbar-color: var(--pf-table-border-color) var(--pf-table-background-color);
   }
 
   & > *:nth-child(3) {
     margin-top: auto;
     background-color: transparent;
     border: none;
-
-    .rdt_Pagination {
-      background-color: transparent;
-      border: none;
-    }
   }
   .rdt_Table,
   .rdt_TableRow,
@@ -48,8 +70,7 @@
   .rdt_TableHead,
   .rdt_TableHeadRow,
   .rdt_TableBody,
-  .rdt_ExpanderRow,
-  .rdt_Pagination {
+  .rdt_ExpanderRow {
     background-color: var(--pf-table-background-color);
     color: var(--pf-table-font-color);
   }
@@ -68,7 +89,8 @@
 
   .rdt_TableHeader {
     border-radius: var(--pf-rounded) 0;
-    border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
+    border: var(--pf-border-sm) solid var(--pf-table-border-color);
+    border-bottom: none;
   }
 
   .rdt_TableHeadRow,
@@ -127,3 +149,12 @@
     }
   }
 }
+
+.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/table/styles/_variables.scss

@@ -27,4 +27,5 @@
   --pf-table-highlighted-color: var(--pf-primary-color);
   --pf-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.3);
   --pf-table-font-size: var(--pf-font-size-body2);
+  --pf-table-pagination-background-color: var(--pf-primary-color-700);
 }

package/src/components/table/types.ts

@@ -3,19 +3,19 @@ import {
   Direction as RDTDirection,
   Alignment as RDTAlignment,
   TableColumn as RDTTableColumn,
+  IDataTableProps,
 } from 'react-data-table-component';
 
 export type Direction = `${RDTDirection}`;
 export type Alignment = `${RDTAlignment}`;
 export type TableColumn<T> = RDTTableColumn<T>;
 
-export type TableProps<T> = Omit<
-  RDTTableProps<T>,
-  'disabled' | 'progressPending' | 'direction' | 'subHeaderAlign'
-> & {
+export interface TableProps<T>
+  extends Omit<IDataTableProps<T>, 'paginationComponent' | 'direction' | 'subHeaderAlign'> {
   isDisabled?: boolean;
   isLoading?: boolean;
   direction?: Direction;
-  subHeaderAlign?: Alignment;
+  subHeaderAlign?: 'left' | 'right' | 'center';
   isFullHeight?: boolean;
-};
+  totalEntriesText?: string;
+}

package/src/setup/setupIcons.ts

@@ -23,6 +23,8 @@ import {
   faQuestionCircle,
   faCopy,
   faXmark,
+  faChevronLeft,
+  faChevronRight,
 } from '@fortawesome/free-solid-svg-icons';
 import { indiconDefinitions } from '@/components/icons/indicons';
 
@@ -54,6 +56,8 @@ registerFontAwesomeIcons(
   faQuestionCircle,
   faCopy,
   faXmark,
+  faChevronLeft,
+  faChevronRight,
   // backwards compat, don't require registration of custom indicons
   // might want to consider doing so in the future
   ...indiconDefinitions,

package/src/styles/index.scss

@@ -23,6 +23,7 @@
 @import '../components/forms/date/datePicker/styles/DatePicker.scss';
 @import '../components/badge/styles/Badge.scss';
 @import '../components/modal/styles/Modal.scss';
+@import '../components/pagination/styles/Pagination.scss';
 
 @import '../components/pill/styles/Pill.scss';
 @import 'sheets'; // Port to an sheets component when we build it