feat: Add Carbon compatibility styles (#937)

* feat: Add Carbon compatibility styles * test: Add Carbon tests
bpmn-io · Dec 11, 2023 · fe17850 · fe17850
1 parent 7b99c9c
commit fe17850
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 4 deletions.
diff --git a/packages/form-js-carbon-styles/src/carbon-styles.scss b/packages/form-js-carbon-styles/src/carbon-styles.scss
@@ -492,8 +492,7 @@
     letter-spacing: var(--cds-label-01-letter-spacing);
   }
 
-  .fjs-form-field:not(.fjs-form-field-checkbox, .fjs-form-field-group)
-    .fjs-form-field-label:first-child {
+  .fjs-form-field:not(.fjs-form-field-checkbox, .fjs-form-field-group, .fjs-form-field-table) .fjs-form-field-label:first-child {
     margin: 0;
     margin-bottom: var(--cds-spacing-03);
   }
@@ -1216,3 +1215,101 @@
     border-color: var(--cds-border-subtle);
   }
 }
+
+// Table styles ////////////
+
+.fjs-container {
+  .fjs-form-field-table {
+    row-gap: var(--cds-spacing-04);
+  }
+
+  .fjs-form-field.fjs-form-field-table .fjs-form-field-label {
+    color: var(--cds-text-secondary);
+    font-size: var(--cds-label-02-font-size);
+    font-weight: var(--cds-label-02-font-weight);
+    line-height: var(--cds-label-02-line-height);
+    letter-spacing: var(--cds-label-02-letter-spacing);
+    margin-bottom: 0;
+  }
+
+  .fjs-table-th {
+    color: var(--cds-color-primary);
+    font-size: var(--cds-heading-compact-01-font-size);
+    font-weight: var(--cds-heading-compact-01-font-weight);
+    line-height: var(--cds-heading-compact-01-line-height);
+    letter-spacing: var(--cds-heading-compact-01-letter-spacing);
+
+    &:focus {
+      outline: 2px solid var(--cds-focus);
+      outline-offset: -2px;
+    }
+  }
+
+  .fjs-table-tr,
+  .fjs-table-nav {
+    block-size: rem(24px);
+  }
+
+  .fjs-table-td,
+  .fjs-table-th {
+    vertical-align: middle;
+  }
+
+  .fjs-table-middle-container.fjs-table-empty {
+    background-color: transparent;
+    color: var(--cds-text-secondary);
+    padding-left: var(--cds-spacing-05);
+    font-size: var(--cds-heading-compact-01-font-size);
+    font-weight: var(--cds-heading-compact-01-font-weight);
+    line-height: var(--cds-heading-compact-01-line-height);
+    letter-spacing: var(--cds-heading-compact-01-letter-spacing);
+  }
+
+  .fjs-table-middle-container {
+    border-radius: 0;
+    background-color: var(--cds-layer);
+  }
+
+  .fjs-table-body .fjs-table-tr:hover {
+    background-color: var(--cds-layer-hover);
+  }
+
+  .fjs-table-nav {
+    color: var(--cds-text-primary);
+    font-size: var(--cds-label-01-font-size);
+    font-weight: var(--cds-label-01-font-weight);
+    line-height: var(--cds-label-01-line-height);
+    letter-spacing: var(--cds-label-01-letter-spacing);
+  }
+
+  .fjs-table-nav-button {
+    color: var(--cds-text-primary);
+
+    &:disabled {
+      color: var(--cds-text-disabled);
+    }
+
+    &:focus {
+      outline: 2px solid var(--cds-focus);
+      outline-offset: -2px;
+    }
+  }
+
+  // To be removed when this issue is fixed upstream: https://github.com/carbon-design-system/carbon/issues/14597
+
+  .fjs-table-body .fjs-table-tr:not(:last-child) {
+    border-bottom: 1px solid var(--cds-border-subtle-02);
+  }
+
+  .fjs-table-middle-container {
+    border: 1px solid var(--cds-border-subtle-02);
+  }
+
+  .fjs-table-nav {
+    border-top: 1px solid var(--cds-border-subtle-02);
+  }
+
+  .fjs-table-nav-button {
+    border-left: 1px solid var(--cds-border-subtle-02);
+  }
+}
diff --git a/packages/form-js-carbon-styles/test/spec/carbon-styles.spec.js b/packages/form-js-carbon-styles/test/spec/carbon-styles.spec.js
@@ -177,7 +177,25 @@ describe('Carbon styles', function() {
       readonly_tags: [ 'tag1', 'tag2', 'tag3' ],
       readonly_checklist: [ 'option_1' ],
       readonly_radio: 'option_1',
-      language: 'english'
+      language: 'english',
+      tableSource: [
+        {
+          id: '1',
+          name: 'John Doe',
+          age: 30
+        },
+        {
+          id: '2',
+          name: 'Anna Bell',
+          age: 25
+
+        },
+        {
+          id: '3',
+          name: 'Nico Togin',
+          age: 40
+        }
+      ]
     };
 
     const result = createFormView({

diff --git a/packages/form-js-carbon-styles/test/spec/complex.json b/packages/form-js-carbon-styles/test/spec/complex.json
@@ -625,6 +625,27 @@
       "label": "submit",
       "type": "button",
       "id": "Field_1ydujqa"
+    },
+    {
+      "label": "A table",
+      "type": "table",
+      "rowCount": 10,
+      "id": "Field_0kx5fbn",
+      "dataSource": "=tableSource",
+      "columns": [
+        {
+          "key": "id",
+          "label": "ID"
+        },
+        {
+          "key": "name",
+          "label": "Name"
+        },
+        {
+          "key": "age",
+          "label": "Age"
+        }
+      ]
     }
   ],
   "type": "default",
@@ -636,4 +657,4 @@
     "version": "5.7.0-nightly.20230103"
   },
   "schemaVersion": 9
-}
+}