wip

package.json

@@ -28,6 +28,7 @@
     "start": "npm run start:pkg -- @bpmn-io/form-js",
     "start:viewer": "npm run start:pkg -- @bpmn-io/form-js-viewer",
     "start:viewer:stress": "cross-env SINGLE_START=stress npm run dev -- @bpmn-io/form-js-viewer",
+    "start:viewer:groups": "cross-env SINGLE_START=groups npm run dev -- @bpmn-io/form-js-viewer",
     "start:editor": "npm run start:pkg -- @bpmn-io/form-js-editor",
     "start:carbon": "cross-env SINGLE_START=carbon-form npm run dev -- @bpmn-io/form-js-carbon-styles",
     "start:playground": "npm run start:pkg -- @bpmn-io/form-js-playground",

packages/form-js-carbon-styles/src/carbon-styles.js

@@ -388,7 +388,7 @@ const LABEL_DESCRIPTION_ERROR_STYLES = css`
       letter-spacing: var(--cds-label-01-letter-spacing);
     }
 
-    .fjs-form-field:not(.fjs-form-field-checkbox)
+    .fjs-form-field:not(.fjs-form-field-checkbox, .fjs-form-field-group)
       .fjs-form-field-label:first-child {
       margin: 0;
       margin-bottom: var(--cds-spacing-03);

packages/form-js-editor/assets/form-js-editor-base.css

@@ -1,7 +1,7 @@
 .fjs-editor-container {
   --color-children-border: var(
     --cds-border-strong,
-    var(--cds-border-strong-01, var(--color-grey-225-10-75))
+    var(--cds-border-strong-01, var(----color-grey-225-10-95))
   );
   --color-children-selected-border: var(--cds-border-interactive, var(--color-blue-219-100-53));
   --color-children-selected-background: transparent;
@@ -240,7 +240,7 @@
 }
 
 .fjs-editor-container .fjs-children .fjs-children {
-  border: dotted 1px var(--color-children-border);
+  border: solid 1px var(--color-children-border);
   margin: 3px 0;
 }
 
@@ -258,12 +258,20 @@
 }
 
 .fjs-editor-container .fjs-children .fjs-element.fjs-outlined {
-  border-color: var(--color-borders-group);
+  outline: 1px solid var(--color-borders-group);
+  outline-offset: -2px;
 }
 
 .fjs-editor-container .fjs-children .fjs-element.fjs-editor-selected {
   border-color: var(--color-children-selected-border) !important;
   background-color: var(--color-children-selected-background);
+  outline: none;
+}
+
+.fjs-editor-container .fjs-children .fjs-element:hover,
+.fjs-editor-container .fjs-children .fjs-element:focus-within {
+  border-color: var(--color-children-hover-border);
+  outline: none;
 }
 
 .fjs-editor-container .fjs-layout-column:first-child > .fjs-element[data-field-type="group"] {
@@ -292,12 +300,6 @@
   margin-left: 0;
 }
 
-.fjs-editor-container .fjs-children .fjs-element:hover,
-.fjs-editor-container .fjs-children .fjs-element:focus-within {
-  border-color: var(--color-children-hover-border);
-  outline: none;
-}
-
 .fjs-editor-container .fjs-input:disabled,
 .fjs-editor-container .fjs-textarea:disabled,
 .fjs-editor-container .fjs-taglist-input:disabled,

packages/form-js-viewer/assets/form-js-base.css

@@ -337,7 +337,7 @@
 }
 
 .fjs-container .fjs-form-field-group.fjs-outlined {
-  outline: solid var(--color-borders-group) 2px;
+  outline: solid var(--color-borders-group) 1px;
 }
 
 .fjs-container .fjs-form-field-group label {

packages/form-js-viewer/package.json

@@ -22,6 +22,7 @@
     "all": "run-s test build",
     "build": "run-p bundle bundle:scss generate-types",
     "start": "SINGLE_START=basic npm run dev",
+    "start:groups": "SINGLE_START=groups npm run dev",
     "bundle": "rollup -c --failAfterWarnings --bundleConfigAsCjs",
     "bundle:scss": "sass --no-source-map --load-path=\"../../node_modules\" assets/index.scss dist/assets/form-js.css",
     "bundle:watch": "run-p bundle:watch-js bundle:watch-scss",

packages/form-js-viewer/test/spec/Form.spec.js

@@ -18,6 +18,7 @@ import hiddenFieldsConditionalSchema from './hidden-fields-conditional.json';
 import hiddenFieldsExpressionSchema from './hidden-fields-expression.json';
 import disabledSchema from './disabled.json';
 import schema from './form.json';
+import groupsSchema from './groups.json';
 import schemaNoIds from './form.json';
 import textSchema from './text.json';
 import textTemplateSchema from './text-template.json';
@@ -36,18 +37,20 @@ import customCSS from './custom/custom.css';
 insertCSS('custom.css', customCSS);
 
 const singleStartBasic = isSingleStart('basic');
+const singleStartGroups = isSingleStart('groups');
 const singleStartStress = isSingleStart('stress');
 const singleStartRows = isSingleStart('rows');
 const singleStartTheme = isSingleStart('theme');
 const singleStartNoTheme = isSingleStart('no-theme');
+
 const singleStart =
   singleStartBasic ||
+  singleStartGroups ||
   singleStartStress ||
   singleStartRows ||
   singleStartTheme ||
   singleStartNoTheme;
 
-
 describe('Form', function() {
 
   let container;
@@ -112,6 +115,23 @@ describe('Form', function() {
   });
 
 
+  (singleStartGroups ? it.only : it)('should render groups', async function() {
+
+    // given
+    const data = {};
+
+    // when
+    const form = await createForm({
+      container,
+      data,
+      schema: groupsSchema
+    });
+
+    // then
+    expect(form.get('formFieldRegistry').getAll()).to.have.length(4);
+  });
+
+
   (singleStartStress ? it.only : it)('should render stress test', async function() {
 
     const array = [ ...Array(4000).keys() ];