@indico-data/design-system 2.29.2 → 2.30.0

package/package.json

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

package/src/components/table/Table.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import DataTable, {
   Direction as RDTDirection,
   Alignment as RDTAlignment,
@@ -16,17 +17,23 @@ export const Table = <T,>(props: TableProps<T>) => {
     isDisabled,
     isLoading,
     subHeaderAlign = 'left',
+    className,
     ...rest
   } = props;
+
+  const combinedClassName = classNames(className, {
+    'table--striped': striped,
+  });
+
   return (
-    <div className="table-wrapper">
+    <div className="table">
       <DataTable
         responsive={responsive}
         direction={direction as RDTDirection}
         subHeaderAlign={subHeaderAlign as RDTAlignment}
         keyField={keyField}
         striped={striped}
-        className={`${striped ? 'pf__table--striped' : ''}`}
+        className={combinedClassName}
         disabled={isDisabled}
         noDataComponent={noDataComponent}
         progressPending={isLoading}

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

@@ -1,79 +1,95 @@
 @import 'variables.scss';
 
-:root,
-:root [data-theme='light'],
-:root [data-theme='dark'] {
-  .table-loading {
-    color: var(--pf-table-font-color);
-  }
-  .table-wrapper {
+.table-loading {
+  color: var(--pf-table-font-color);
+}
+
+.table {
+  background-color: var(--pf-table-background-color);
+  color: var(--pf-table-font-color);
+  border-radius: var(--pf-rounded);
+  border: 1px solid var(--pf-table-border-color);
+
+  .rdt_Table,
+  .rdt_TableRow,
+  .rdt_TableCol,
+  .rdt_TableCol_Sortable,
+  .rdt_TableCell,
+  .rdt_TableHeader,
+  .rdt_TableFooter,
+  .rdt_TableHead,
+  .rdt_TableHeadRow,
+  .rdt_TableBody,
+  .rdt_ExpanderRow,
+  .rdt_Pagination {
     background-color: var(--pf-table-background-color);
     color: var(--pf-table-font-color);
+  }
 
-    .rdt_Table,
-    .rdt_TableRow,
-    .rdt_TableCol,
-    .rdt_TableCol_Sortable,
-    .rdt_TableCell,
-    .rdt_TableHeader,
-    .rdt_TableFooter,
-    .rdt_TableHead,
-    .rdt_TableHeadRow,
-    .rdt_TableBody,
-    .rdt_ExpanderRow,
-    .rdt_Pagination {
-      background-color: var(--pf-table-background-color);
-      color: var(--pf-table-font-color);
+  button {
+    svg {
+      fill: var(--pf-table-font-color);
     }
-    button {
+
+    &:disabled {
       svg {
-        fill: var(--pf-table-font-color);
+        fill: var(--pf-table-disabled-color);
       }
+    }
+  }
 
-      &:disabled {
-        svg {
-          fill: var(--pf-gray-color-900);
-        }
-      }
+  .rdt_TableHeader {
+    border-radius: var(--pf-rounded) 0;
+    border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
+  }
+
+  .rdt_TableHeadRow,
+  .rdt_TableRow {
+    border-bottom: none !important;
+    & > :first-child {
+      padding-left: var(--pf-padding-4);
+      min-width: 60px;
+      justify-content: left;
     }
   }
 
-  .pf__table--striped {
-    .rdt_TableRow:nth-child(odd) {
+  .rdt_TableRow {
+    border-top: none;
+
+    &:hover {
       .rdt_TableCell {
-        background-color: var(--pf-table-stripe-color);
+        background-color: var(--pf-table-hover-color) !important;
       }
     }
-  }
-}
 
-:root [data-theme='light'] {
-  .table-wrapper {
-    .rdt_Table,
-    .rdt_TableRow,
-    .rdt_TableCol,
-    .rdt_TableCol_Sortable,
-    .rdt_TableCell,
-    .rdt_TableHeader,
-    .rdt_TableFooter,
-    .rdt_TableHead,
-    .rdt_TableHeadRow,
-    .rdt_TableBody,
-    .rdt_ExpanderRow,
-    .rdt_Pagination {
-      background-color: var(--pf-table-background-color);
-      color: var(--pf-table-font-color);
-    }
-    button {
-      svg {
-        fill: var(--pf-table-font-color);
+    &:first-child {
+      .rdt_TableCell {
+        border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
       }
+    }
 
-      &:disabled {
-        svg {
-          fill: var(--pf-gray-color-300);
-        }
+    &:last-child {
+      .rdt_TableCell {
+        border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
       }
     }
   }
+
+  .rdt_TableCell,
+  .rdt_TableCol {
+    font-size: var(--pf-font-size-base);
+
+    &:not(:first-child) {
+      border-left: var(--pf-border-sm) solid var(--pf-table-border-color);
+    }
+  }
+
+  .table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell {
+    background-color: var(--pf-table-stripe-color);
+  }
+
+  .rdt_Pagination {
+    border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
+    border-radius: 0 0 var(--pf-rounded) var(--pf-rounded);
+  }
 }

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

@@ -1,19 +1,19 @@
-// Common Variables
-:root,
-:root [data-theme='light'],
-:root [data-theme='dark'] {
-  --pf-table-font-color: var(--pf-gray-color);
-  --pf-table-stripe-color: var(--pf-gray-color-100);
-}
-
 // Light Theme Specific Variables
 :root [data-theme='light'] {
   --pf-table-background-color: var(--pf-white-color);
+  --pf-table-font-color: var(--pf-gray-color);
+  --pf-table-border-color: var(--pf-gray-color-200);
   --pf-table-stripe-color: var(--pf-gray-color-100);
+  --pf-table-hover-color: var(--pf-gray-color-200);
+  --pf-table-disabled-color: var(--pf-gray-color-300);
 }
 
 // Dark Theme Specific Variables
 :root [data-theme='dark'] {
   --pf-table-background-color: var(--pf-primary-color-700);
-  --pf-table-stripe-color: var(--pf-primary-color-400);
+  --pf-table-font-color: var(--pf-gray-color);
+  --pf-table-border-color: var(--pf-primary-color-300);
+  --pf-table-stripe-color: var(--pf-primary-color-600);
+  --pf-table-hover-color: var(--pf-primary-color-400);
+  --pf-table-disabled-color: var(--pf-gray-color-900);
 }