@indico-data/design-system 2.29.2 → 2.30.1

package/package.json

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

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

@@ -1,11 +1,11 @@
-@import './variables.scss';
-
+@import 'variables.scss';
 .floatui-container {
   z-index: 99;
 }
 
 .floatui-content {
   border-radius: var(--pf-floatui-border-radius);
-  border: 1px solid var(--pf-floatui-border-color);
+  border: solid 1px;
+  border-color: var(--pf-floatui-border-color);
   background: var(--pf-floatui-background-color);
 }

package/src/components/forms/form/styles/Form.scss

@@ -1,3 +1,11 @@
 form {
   width: 100%;
 }
+:root [data-theme='light'],
+:root {
+  --pf-form-input-border-color: var(--pf-border-color);
+}
+
+:root [data-theme='dark'] {
+  --pf-form-input-border-color: var(--pf-border-color);
+}

package/src/components/forms/textarea/Textarea.tsx

@@ -41,6 +41,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       form,
       maxLength,
       autofocus,
+      defaultValue,
       ...rest
     },
     ref,
@@ -70,6 +71,8 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             aria-invalid={hasErrors ? true : undefined}
             aria-describedby={hasErrors || helpText ? `${name}-helper` : undefined}
             aria-required={isRequired}
+            value={value}
+            defaultValue={defaultValue}
             {...rest}
           />
         </div>

package/src/components/pill/Pill.stories.tsx

@@ -6,6 +6,15 @@ const meta: Meta = {
   title: 'Components/Pill',
   component: Pill,
   argTypes: {
+    className: {
+      control: false,
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'css class name',
+        },
+      },
+    },
     children: {
       control: 'text',
       description: 'The content displayed inside the pill',
@@ -16,7 +25,7 @@ const meta: Meta = {
         },
       },
     },
-    status: {
+    color: {
       control: {
         type: 'select',
         options: ['success', 'warning', 'error', 'info', 'neutral', 'primary', 'secondary'],

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