fix: display groups with no outline with a dashed outline in the editor

Closes #1084
bpmn-io · Mar 26, 2024 · 4b7eb7e · 4b7eb7e
1 parent 561e525
commit 4b7eb7e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/packages/form-js-editor/assets/form-js-editor-base.css b/packages/form-js-editor/assets/form-js-editor-base.css
@@ -263,14 +263,21 @@
   border-color: var(--color-borders-group);
 }
 
+.fjs-editor-container .fjs-children .fjs-element.fjs-dashed-outlined {
+  border-color: var(--color-borders-group);
+  border-style: dashed;
+}
+
 .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);
+  border-style: solid;
 }
 
 .fjs-editor-container .fjs-children .fjs-element:hover.fjs-editor-hovered,
 .fjs-editor-container .fjs-children .fjs-element:focus {
   border-color: var(--color-children-hover-border);
+  border-style: solid;
 }
 
 .fjs-editor-container .fjs-layout-column:first-child > .fjs-element[data-field-type="group"],

diff --git a/packages/form-js-editor/src/render/components/FormEditor.js b/packages/form-js-editor/src/render/components/FormEditor.js
@@ -172,8 +172,10 @@ function Element(props) {
       classes.push('fjs-editor-selected');
     }
 
-    if (showOutline) {
-      classes.push('fjs-outlined');
+    const grouplike = [ 'group', 'dynamiclist' ].includes(type);
+
+    if (grouplike) {
+      classes.push(showOutline ? 'fjs-outlined' : 'fjs-dashed-outlined');
     }
 
     if (hovered) {
@@ -182,7 +184,7 @@ function Element(props) {
 
     return classes.join(' ');
 
-  }, [ hovered, isSelected, props.class, showOutline ]);
+  }, [ hovered, isSelected, props.class, showOutline, type ]);
 
   const onRemove = (event) => {
     event.stopPropagation();