From 794f934969058e4a6d36b25fcef9912b5f4ecc36 Mon Sep 17 00:00:00 2001 From: Valentin Serra Date: Thu, 31 Aug 2023 10:52:59 +0200 Subject: [PATCH] wip --- package.json | 1 + .../src/carbon-styles.js | 2 +- .../assets/form-js-editor-base.css | 20 +++++++++-------- .../form-js-viewer/assets/form-js-base.css | 2 +- packages/form-js-viewer/package.json | 1 + .../form-js-viewer/test/spec/Form.spec.js | 22 ++++++++++++++++++- 6 files changed, 36 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index cf9cc4ec2..7dea217e5 100644 --- a/package.json +++ b/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", diff --git a/packages/form-js-carbon-styles/src/carbon-styles.js b/packages/form-js-carbon-styles/src/carbon-styles.js index 4dffb2761..9fcc792b7 100644 --- a/packages/form-js-carbon-styles/src/carbon-styles.js +++ b/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); diff --git a/packages/form-js-editor/assets/form-js-editor-base.css b/packages/form-js-editor/assets/form-js-editor-base.css index b1cbc7c28..be942e5ec 100644 --- a/packages/form-js-editor/assets/form-js-editor-base.css +++ b/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, diff --git a/packages/form-js-viewer/assets/form-js-base.css b/packages/form-js-viewer/assets/form-js-base.css index d672eb1c3..a7faf0a86 100644 --- a/packages/form-js-viewer/assets/form-js-base.css +++ b/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 { diff --git a/packages/form-js-viewer/package.json b/packages/form-js-viewer/package.json index efd4ff35d..ecab1a980 100644 --- a/packages/form-js-viewer/package.json +++ b/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", diff --git a/packages/form-js-viewer/test/spec/Form.spec.js b/packages/form-js-viewer/test/spec/Form.spec.js index 796fcbf9b..994f1ed71 100644 --- a/packages/form-js-viewer/test/spec/Form.spec.js +++ b/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() ];