@indico-data/design-system 2.30.1 → 2.31.0

package/lib/index.css

@@ -907,6 +907,7 @@ a:hover, .link:hover {
   margin: 1em 0;
 }
 
+:root,
 :root [data-theme=light] {
   --pf-table-background-color: var(--pf-white-color);
   --pf-table-font-color: var(--pf-gray-color);
@@ -914,6 +915,10 @@ a:hover, .link:hover {
   --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);
+  --pf-table-checked-color: var(--pf-secondary-color-100);
+  --pf-table-highlighted-color: var(--pf-gray-color-200);
+  --pf-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.2);
+  --pf-table-font-size: var(--pf-font-size-body2);
 }
 
 :root [data-theme=dark] {
@@ -923,6 +928,9 @@ a:hover, .link:hover {
   --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);
+  --pf-table-checked-color: var(--pf-secondary-color-900);
+  --pf-table-highlighted-color: var(--pf-primary-color-400);
+  --pf-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.3);
 }
 
 .table-loading {
@@ -934,6 +942,9 @@ a:hover, .link:hover {
   color: var(--pf-table-font-color);
   border-radius: var(--pf-rounded);
   border: 1px solid var(--pf-table-border-color);
+  /* Striped: alternating background */
+  /* Checked: Precedence over striped */
+  /* Highlighted: Precedence over checked */
 }
 .table .rdt_Table,
 .table .rdt_TableRow,
@@ -979,12 +990,9 @@ a:hover, .link:hover {
 .table .rdt_TableRow:first-child .rdt_TableCell {
   border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
 }
-.table .rdt_TableRow:last-child .rdt_TableCell {
-  border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
-}
 .table .rdt_TableCell,
 .table .rdt_TableCol {
-  font-size: var(--pf-font-size-base);
+  font-size: var(--pf-table-font-size);
 }
 .table .rdt_TableCell:not(:first-child),
 .table .rdt_TableCol:not(:first-child) {
@@ -993,6 +1001,19 @@ a:hover, .link:hover {
 .table .table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell {
   background-color: var(--pf-table-stripe-color);
 }
+.table .checked .rdt_TableCell {
+  background-color: var(--pf-table-checked-color) !important;
+}
+.table .highlighted {
+  box-shadow: var(--pf-table-highlighted-box-shadow);
+  transform: translateY(-2px);
+  z-index: 1;
+  border-bottom: var(--pf-border-md) solid var(--pf-table-highlighted-color);
+}
+.table .highlighted .rdt_TableCell {
+  border-top: var(--pf-border-md) solid var(--pf-table-highlighted-color);
+  background-color: var(--pf-table-highlighted-color) !important;
+}
 .table .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/lib/index.esm.css

@@ -907,6 +907,7 @@ a:hover, .link:hover {
   margin: 1em 0;
 }
 
+:root,
 :root [data-theme=light] {
   --pf-table-background-color: var(--pf-white-color);
   --pf-table-font-color: var(--pf-gray-color);
@@ -914,6 +915,10 @@ a:hover, .link:hover {
   --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);
+  --pf-table-checked-color: var(--pf-secondary-color-100);
+  --pf-table-highlighted-color: var(--pf-gray-color-200);
+  --pf-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.2);
+  --pf-table-font-size: var(--pf-font-size-body2);
 }
 
 :root [data-theme=dark] {
@@ -923,6 +928,9 @@ a:hover, .link:hover {
   --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);
+  --pf-table-checked-color: var(--pf-secondary-color-900);
+  --pf-table-highlighted-color: var(--pf-primary-color-400);
+  --pf-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.3);
 }
 
 .table-loading {
@@ -934,6 +942,9 @@ a:hover, .link:hover {
   color: var(--pf-table-font-color);
   border-radius: var(--pf-rounded);
   border: 1px solid var(--pf-table-border-color);
+  /* Striped: alternating background */
+  /* Checked: Precedence over striped */
+  /* Highlighted: Precedence over checked */
 }
 .table .rdt_Table,
 .table .rdt_TableRow,
@@ -979,12 +990,9 @@ a:hover, .link:hover {
 .table .rdt_TableRow:first-child .rdt_TableCell {
   border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
 }
-.table .rdt_TableRow:last-child .rdt_TableCell {
-  border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
-}
 .table .rdt_TableCell,
 .table .rdt_TableCol {
-  font-size: var(--pf-font-size-base);
+  font-size: var(--pf-table-font-size);
 }
 .table .rdt_TableCell:not(:first-child),
 .table .rdt_TableCol:not(:first-child) {
@@ -993,6 +1001,19 @@ a:hover, .link:hover {
 .table .table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell {
   background-color: var(--pf-table-stripe-color);
 }
+.table .checked .rdt_TableCell {
+  background-color: var(--pf-table-checked-color) !important;
+}
+.table .highlighted {
+  box-shadow: var(--pf-table-highlighted-box-shadow);
+  transform: translateY(-2px);
+  z-index: 1;
+  border-bottom: var(--pf-border-md) solid var(--pf-table-highlighted-color);
+}
+.table .highlighted .rdt_TableCell {
+  border-top: var(--pf-border-md) solid var(--pf-table-highlighted-color);
+  background-color: var(--pf-table-highlighted-color) !important;
+}
 .table .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/package.json

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

package/src/components/table/Table.mdx

@@ -7,9 +7,38 @@ import * as TableStories from './Table.stories';
 
 This component facilitates the rapid creation of responsive and paginated tables. This component was created using the React [Data Table Component](https://react-data-table-component.netlify.app/?path=/docs/api-props--docs) library as a base. You can read more on additional props not listed in this documentation at [this link](https://react-data-table-component.netlify.app/?path=/docs/api-props--docs).
 
-<Canvas
-  of={TableStories.Default}
-/>
-
+<Canvas of={TableStories.Default} />
 
 <Controls of={TableStories.Default} />
+
+## Conditional Row Styles
+
+The `conditionalRowStyles` prop allows you to apply custom styles to specific rows based on a condition. In the Permafrost design system, if you apply the `checked` or `highlighted` classes to a row via the `conditionalRowStyles` prop, the table will automatically pick up predefined styles for those rows.
+
+- **`checked`**: This class is used to indicate rows that have been selected. When applied, the row will inherit the styles defined in the Permafrost design system.
+
+- **`highlighted`**: This class is used to visually emphasize specific rows. When applied, the row will inherit styles defined in the design system, making the row stand out with distinct border and background colors.
+
+### Example Usage
+
+Here's an example of how to use the `conditionalRowStyles` prop to apply the `checked` and `highlighted` classes:
+
+```jsx
+const conditionalRowStyles = [
+  {
+    when: (row) => row.isSelected,
+    classNames: ['checked'],
+  },
+  {
+    when: (row) => row.isImportant,
+    classNames: ['highlighted'],
+  },
+];
+
+<DataTable
+  title="Sample Table"
+  columns={columns}
+  data={data}
+  conditionalRowStyles={conditionalRowStyles}
+/>;
+```

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

@@ -67,27 +67,40 @@
         border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
       }
     }
-
-    &: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);
+    font-size: var(--pf-table-font-size);
 
     &:not(:first-child) {
       border-left: var(--pf-border-sm) solid var(--pf-table-border-color);
     }
   }
 
+  /* Striped: alternating background */
   .table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell {
     background-color: var(--pf-table-stripe-color);
   }
 
+  /* Checked: Precedence over striped */
+  .checked .rdt_TableCell {
+    background-color: var(--pf-table-checked-color) !important;
+  }
+
+  /* Highlighted: Precedence over checked */
+  .highlighted {
+    box-shadow: var(--pf-table-highlighted-box-shadow);
+    transform: translateY(-2px);
+    z-index: 1;
+    border-bottom: var(--pf-border-md) solid var(--pf-table-highlighted-color);
+
+    .rdt_TableCell {
+      border-top: var(--pf-border-md) solid var(--pf-table-highlighted-color);
+      background-color: var(--pf-table-highlighted-color) !important;
+    }
+  }
+
   .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,4 +1,5 @@
 // Light Theme Specific Variables
+:root,
 :root [data-theme='light'] {
   --pf-table-background-color: var(--pf-white-color);
   --pf-table-font-color: var(--pf-gray-color);
@@ -6,6 +7,10 @@
   --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);
+  --pf-table-checked-color: var(--pf-secondary-color-100);
+  --pf-table-highlighted-color: var(--pf-gray-color-200);
+  --pf-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.2);
+  --pf-table-font-size: var(--pf-font-size-body2);
 }
 
 // Dark Theme Specific Variables
@@ -16,4 +21,7 @@
   --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);
+  --pf-table-checked-color: var(--pf-secondary-color-900);
+  --pf-table-highlighted-color: var(--pf-primary-color-400);
+  --pf-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.3);
 }