@bpmn-io/form-js-editor 1.3.3 → 1.4.1

package/dist/assets/form-js-editor.css

@@ -55,12 +55,17 @@
     var(--cds-layer-01, var(--color-white))
   );
   --color-palette-field-border: var(
-    --cds-border-strong,
-    var(--cds-border-strong-01, var(--color-grey-225-10-80))
+    --cds-border-subtle,
+    var(--cds-border-subtle-01, var(--color-grey-225-10-93))
   );
+  --color-palette-field-focus: var(--cds-border-interactive, var(--color-blue-205-100-45));
   --color-palette-field-hover-background: var(--cds-background-hover, var(--color-grey-225-10-90));
+  --color-palette-field-hover-border: var(
+    --cds-border-strong,
+    var(--cds-border-strong-01, var(--color-grey-225-10-55))
+  );
   --cursor-palette-field: grab;
-  --palette-width: 250px;
+  --palette-width: 246px;
 }
 
 .fjs-properties-container {
@@ -189,6 +194,17 @@
   display: none;
 }
 
+.fjs-no-json-lint .cm-activeLine,
+.fjs-no-json-lint .cm-activeLineGutter {
+  background: none;
+}
+
+.fjs-no-json-lint .cm-placeholder {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--cds-text-placeholder, var(--color-grey-225-10-35));
+}
+
 .fjs-editor-container .fjs-form-editor {
   display: flex;
   flex: 1;
@@ -514,8 +530,7 @@
   display: flex;
   flex-direction: row;
   padding: 4px;
-  margin: 15px;
-  margin-top: 12px;
+  margin: 12px;
   color: var(--color-palette-search);
   border: 1px solid var(--color-palette-search-border);
   background-color: var(--color-palette-search-background);
@@ -570,56 +585,72 @@
 }
 
 .fjs-palette-container .fjs-palette-entries {
-  height: 100%;
+  display: flex;
+  flex-direction: column;
   overflow-x: hidden;
   overflow-y: auto;
+  gap: 20px;
+  padding-bottom: 20px;
 }
 
 .fjs-palette-container .fjs-palette-group {
-  padding: 5px 15px;
-  padding-right: 0px;
+  display: flex;
+  flex-direction: column;
+  width: 212px;
+  margin: auto;
 }
 
 .fjs-palette-container .fjs-palette-group-title {
   font-size: 14px;
   font-weight: 500;
+  margin-bottom: 4px;
   color: var(--color-palette-group-title);
   user-select: none;
 }
 
 .fjs-palette-container .fjs-palette-fields {
-  height: 100%;
   display: flex;
   flex-wrap: wrap;
-  gap: 3%;
+  gap: 10px;
 }
 
 .fjs-palette-field {
-  height: 68px;
-  margin: 5px 0;
+  height: 64px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   font-size: 11px;
+  align-items: center;
+  border: none;
+  font-family: inherit;
   user-select: none;
   color: var(--color-palette-field);
-  background: var(--color-palette-field-background);
+  background-color: var(--color-palette-field-background);
+  outline: solid 1px var(--color-palette-field-border);
+  outline-offset: 0px;
+  transition: all ease-in-out 0.05s;
 }
 
 .fjs-palette-container .fjs-palette-field {
-  width: 68px;
+  width: 64px;
+}
+
+.fjs-palette-container .fjs-palette-field:focus {
+  outline: solid 1px var(--color-palette-field-focus);
 }
 
-.fjs-palette-field .fjs-palette-field-icon {
+.fjs-palette-field .fjs-palette-field-icon,
+.fjs-palette-field .fjs-field-icon-image {
   margin: 0 auto;
 }
 
 .fjs-palette-field .fjs-palette-field-text {
   text-align: center;
+  width: inherit;
 }
 
 .fjs-palette-container .fjs-palette-field:hover {
-  background-color: var(--color-palette-field-hover-background);
+  outline: solid 1px var(--color-palette-field-hover-border);
   cursor: var(--cursor-palette-field);
 }
 
@@ -676,6 +707,10 @@
   background: repeating-linear-gradient(45deg, #ffffff, #ffffff 10px, #f5f5f5 10px, #f5f5f5 20px);
 }
 
+.fjs-editor-container .fjs-form-field-separator hr {
+  margin: 10px 2px;
+}
+
 /**
  * Custom Dragula Styles
  */
@@ -1334,7 +1369,8 @@ textarea.bio-properties-panel-input {
   resize: vertical;
 }
 
-.bio-properties-panel-entry.has-error .bio-properties-panel-input {
+.bio-properties-panel-entry.has-error .bio-properties-panel-input,
+.bio-properties-panel-entry.has-error .bio-properties-panel-feel-editor__open-popup-placeholder {
   border-color: var(--input-error-border-color);
   background-color: var(--input-error-background-color);
 }
@@ -1940,6 +1976,10 @@ textarea.bio-properties-panel-input {
   border-radius: 3px;
 }
 
+.bio-properties-panel-tooltip-content pre code {
+  border: none;
+}
+
 .bio-properties-panel-tooltip p:first-child {
   margin-top: 0;
 }
@@ -2023,6 +2063,8 @@ textarea.bio-properties-panel-input {
 .bio-properties-panel-popup .bio-properties-panel-popup__footer {
   padding: 12px;
   display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .bio-properties-panel-popup .bio-properties-panel-popup__body:not(:first-child) {
@@ -2030,11 +2072,12 @@ textarea.bio-properties-panel-input {
 }
 
 .bio-properties-panel-popup .bio-properties-panel-popup__header {
+  --popup-header-line-height: 16px;
   background-color: var(--popup-header-background-color);
   margin: 0;
   font-size: 12px;
   font-weight: 400;
-  line-height: 16px;
+  line-height: var(--popup-header-line-height);
   text-align: left;
   color: var(--popup-title-color);
 }
@@ -2062,7 +2105,7 @@ textarea.bio-properties-panel-input {
   text-transform: capitalize;
 }
 
-.bio-properties-panel-popup .bio-properties-panel-popup__header svg {
+.bio-properties-panel-popup .bio-properties-panel-popup__header .bio-properties-panel-popup__drag-handle svg {
   margin-left: -4px;
 }
 
@@ -2093,6 +2136,18 @@ textarea.bio-properties-panel-input {
   width: 100%;
 }
 
+.bio-properties-panel-feel-popup__title-link {
+  margin-left: auto;
+  display: flex;
+}
+
+.bio-properties-panel-feel-popup__title-link svg {
+  width: var(--popup-header-line-height);
+  height: var(--popup-header-line-height);
+  fill: currentColor;
+  margin: 0 0.5em;
+}
+
 .bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container {
   display: flex;
   min-width: 100%;

package/dist/assets/properties-panel.css

@@ -564,7 +564,8 @@ textarea.bio-properties-panel-input {
   resize: vertical;
 }
 
-.bio-properties-panel-entry.has-error .bio-properties-panel-input {
+.bio-properties-panel-entry.has-error .bio-properties-panel-input,
+.bio-properties-panel-entry.has-error .bio-properties-panel-feel-editor__open-popup-placeholder {
   border-color: var(--input-error-border-color);
   background-color: var(--input-error-background-color);
 }
@@ -1181,6 +1182,10 @@ textarea.bio-properties-panel-input {
   border-radius: 3px;
 }
 
+.bio-properties-panel-tooltip-content pre code {
+  border: none;
+}
+
 .bio-properties-panel-tooltip p:first-child {
   margin-top: 0;
 }
@@ -1266,6 +1271,8 @@ textarea.bio-properties-panel-input {
 .bio-properties-panel-popup .bio-properties-panel-popup__footer {
   padding: 12px;
   display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .bio-properties-panel-popup .bio-properties-panel-popup__body:not(:first-child) {
@@ -1273,11 +1280,12 @@ textarea.bio-properties-panel-input {
 }
 
 .bio-properties-panel-popup .bio-properties-panel-popup__header {
+  --popup-header-line-height: 16px;
   background-color: var(--popup-header-background-color);
   margin: 0;
   font-size: 12px;
   font-weight: 400;
-  line-height: 16px;
+  line-height: var(--popup-header-line-height);
   text-align: left;
   color: var(--popup-title-color);
 }
@@ -1305,7 +1313,7 @@ textarea.bio-properties-panel-input {
   text-transform: capitalize;
 }
 
-.bio-properties-panel-popup .bio-properties-panel-popup__header svg {
+.bio-properties-panel-popup .bio-properties-panel-popup__header .bio-properties-panel-popup__drag-handle svg {
   margin-left: -4px;
 }
 
@@ -1336,6 +1344,18 @@ textarea.bio-properties-panel-input {
   width: 100%;
 }
 
+.bio-properties-panel-feel-popup__title-link {
+  margin-left: auto; 
+  display: flex;
+}
+
+.bio-properties-panel-feel-popup__title-link svg {
+  width: var(--popup-header-line-height);
+  height: var(--popup-header-line-height);
+  fill: currentColor;
+  margin: 0 0.5em;
+}
+
 .bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container {
   display: flex;
   min-width: 100%;