@bpmn-io/form-js-editor 1.6.3 → 1.7.0-alpha.0

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

@@ -319,12 +319,18 @@
   height: 80px;
   width: calc(100% - 4rem);
   position: absolute;
+  container-type: size;
 }
 
-.fjs-editor-container .fjs-empty-component span {
+.fjs-editor-container .fjs-empty-component .fjs-empty-component-text {
   color: var(--cds-text-disabled, var(--color-grey-225-10-55));
 }
 
+@container (width < 100px) {
+  .fjs-empty-component-text {
+    display: none;
+  }
+}
 .fjs-editor-container .fjs-empty-editor {
   display: flex;
   align-items: center;
@@ -439,7 +445,7 @@
 .fjs-editor-container .fjs-repeat-render-footer {
   font-size: var(--font-size-label);
   background: var(--cds-field, var(--color-background-disabled));
-  color: var(--cds-text-disabled, var(--color-grey-225-10-45));
+  color: var(--color-text-light);
   padding: 3px;
   display: flex;
   align-items: center;
@@ -717,6 +723,14 @@
   transform: scale(1.3);
 }
 
+.fjs-properties-container .fjs-properties-panel .fjs-properties-panel-detached-description {
+  margin: 0px 12px 6px;
+}
+
+.fjs-properties-container .fjs-properties-panel .cm-editor {
+  max-height: 400px;
+}
+
 /**
  * Editor Form Fields
  */
@@ -738,6 +752,11 @@
   background: repeating-linear-gradient(45deg, #ffffff, #ffffff 10px, #f5f5f5 10px, #f5f5f5 20px);
 }
 
+.fjs-editor-container .fjs-form-field-html,
+.fjs-editor-container .fjs-form-field-text {
+  min-height: 30px;
+}
+
 .fjs-editor-container .fjs-form-field-separator hr {
   margin: 10px 2px;
 }
@@ -867,7 +886,8 @@
 /**
  * Theming
  */
-.bio-properties-panel {
+.bio-properties-panel,
+.djs-parent {
   --color-grey-225-10-15: hsl(225, 10%, 15%);
   --color-grey-225-10-35: hsl(225, 10%, 35%);
   --color-grey-225-10-55: hsl(225, 10%, 55%);
@@ -893,6 +913,9 @@
   --color-white: white;
   --color-black: black;
   --color-transparent: transparent;
+}
+
+.bio-properties-panel {
   --text-base-color: var(--color-grey-225-10-15);
   --text-error-color: var(--color-red-360-100-45);
   --link-color: var(--color-blue-205-100-50);
@@ -958,11 +981,6 @@
   --feel-open-popup-hover-color: hsla(219, 99%, 53%, 1);
   --feel-indicator-background-color: var(--color-grey-225-10-90);
   --feelers-select-color: var(--color-blue-205-100-85);
-  --tooltip-underline-color: var(--color-blue-219-99-53);
-  --tooltip-background-color: var(--color-grey-0-0-22);
-  --tooltip-link: var(--color-blue-218-100-74);
-  --tooltip-code-background-color: var(--color-grey-225-10-97);
-  --tooltip-code-border-color: var(--color-grey-225-10-85);
   --text-size-base: 14px;
   --text-size-small: 13px;
   --text-size-smallest: 12px;
@@ -1941,7 +1959,7 @@ textarea.bio-properties-panel-input {
 }
 
 .bio-properties-panel-feel-editor-container .bio-properties-panel-input {
-  resize: vertical;
+  resize: none;
   overflow: hidden;
   overflow-y: auto;
 }
@@ -1974,19 +1992,34 @@ textarea.bio-properties-panel-input {
   text-decoration-style: dotted;
   text-underline-offset: 2px;
   font: inherit;
+  display: flex;
+  justify-content: center;
+  width: fit-content;
 }
 
 .bio-properties-panel-tooltip {
+  --tooltip-underline-color: var(--color-blue-219-99-53);
+  --tooltip-background-color: var(--color-grey-0-0-22);
+  --tooltip-link: var(--color-blue-218-100-74);
+  --tooltip-code-background-color: var(--color-grey-225-10-97);
+  --tooltip-code-border-color: var(--color-grey-225-10-85);
   display: flex;
   color: var(--color-white, white);
   position: fixed;
   z-index: 1000;
-  padding-right: 6px;
   max-width: 300px;
   font-size: var(--text-size-small);
   font-family: var(--font-family);
 }
 
+.bio-properties-panel-tooltip.right {
+  padding-right: 6px;
+}
+
+.bio-properties-panel-tooltip.top {
+  flex-direction: column;
+}
+
 .bio-properties-panel-tooltip-content {
   background-color: var(--tooltip-background-color);
   padding: 16px;
@@ -2032,6 +2065,12 @@ textarea.bio-properties-panel-input {
   margin-top: 16px;
 }
 
+.bio-properties-panel-tooltip.top .bio-properties-panel-tooltip-arrow {
+  margin-top: -3px;
+  margin-left: calc(50% - 2.5px);
+  transform: rotate(90deg);
+}
+
 .bio-properties-panel-feelers-editor-container .bio-properties-panel-feelers-editor__open-popup-placeholder,
 .bio-properties-panel-feel-editor-container .bio-properties-panel-feel-editor__open-popup-placeholder {
   display: none;
@@ -2100,6 +2139,8 @@ textarea.bio-properties-panel-input {
 
 .bio-properties-panel-popup .bio-properties-panel-popup__body:not(:first-child) {
   padding-top: 0;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .bio-properties-panel-popup .bio-properties-panel-popup__header {
@@ -2184,6 +2225,10 @@ textarea.bio-properties-panel-input {
   min-width: 100%;
 }
 
+.bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container .cm-scroller {
+  overflow: auto !important;
+}
+
 .bio-properties-panel-feel-popup .bio-properties-panel-feelers-editor-container {
   width: 100%;
   display: flex;
@@ -2201,7 +2246,6 @@ textarea.bio-properties-panel-input {
   width: 100%;
   resize: none;
   padding: 0;
-  margin-left: -12px;
   overflow: hidden;
   overflow-y: auto;
 }
@@ -2213,19 +2257,18 @@ textarea.bio-properties-panel-input {
 .bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup,
 .bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup {
   position: absolute;
-  display: none;
+  top: 0;
   right: 0;
-  bottom: -1px;
+  line-height: 1;
+  padding: 2px 4px;
+  margin: 3px;
+  display: none;
   background: none;
   border: none;
   color: var(--feel-open-popup-color);
   cursor: pointer;
 }
 
-.bio-properties-panel-open-feel-popup svg {
-  background: var(--feel-open-popup-background-color);
-}
-
 .bio-properties-panel-feelers-editor-container:hover .bio-properties-panel-open-feel-popup,
 .bio-properties-panel-feel-container:hover .bio-properties-panel-open-feel-popup,
 .bio-properties-panel-feelers-editor-container:focus-within .bio-properties-panel-open-feel-popup,

package/dist/assets/properties-panel.css

@@ -1,7 +1,8 @@
 /**
  * Theming
  */
-.bio-properties-panel {
+ .bio-properties-panel,
+ .djs-parent {
   --color-grey-225-10-15: hsl(225, 10%, 15%);
   --color-grey-225-10-35: hsl(225, 10%, 35%);
   --color-grey-225-10-55: hsl(225, 10%, 55%);
@@ -26,11 +27,13 @@
   --color-red-360-100-45: hsl(360, 100%, 45%);
   --color-red-360-100-92: hsl(360, 100%, 92%);
   --color-red-360-100-97: hsl(360, 100%, 97%);
-
   --color-white: white;
   --color-black: black;
   --color-transparent: transparent;
 
+}
+
+.bio-properties-panel {
   --text-base-color: var(--color-grey-225-10-15);
   --text-error-color: var(--color-red-360-100-45);
   --link-color: var(--color-blue-205-100-50);
@@ -118,12 +121,6 @@
 
   --feelers-select-color:  var(--color-blue-205-100-85);
 
-  --tooltip-underline-color: var(--color-blue-219-99-53);
-  --tooltip-background-color: var(--color-grey-0-0-22);
-  --tooltip-link: var(--color-blue-218-100-74);
-  --tooltip-code-background-color: var(--color-grey-225-10-97);
-  --tooltip-code-border-color: var(--color-grey-225-10-85);
-  
   --text-size-base: 14px;
   --text-size-small: 13px;
   --text-size-smallest: 12px;
@@ -1116,7 +1113,7 @@ textarea.bio-properties-panel-input {
 }
 
 .bio-properties-panel-feel-editor-container .bio-properties-panel-input {
-  resize: vertical;
+  resize: none;
   overflow: hidden;
   overflow-y: auto;
 }
@@ -1149,19 +1146,35 @@ textarea.bio-properties-panel-input {
   text-decoration-style: dotted;
   text-underline-offset: 2px;
   font: inherit;
+  display: flex;
+  justify-content: center;
+  width: fit-content;
 }
 
 .bio-properties-panel-tooltip {
+  --tooltip-underline-color: var(--color-blue-219-99-53);
+  --tooltip-background-color: var(--color-grey-0-0-22);
+  --tooltip-link: var(--color-blue-218-100-74);
+  --tooltip-code-background-color: var(--color-grey-225-10-97);
+  --tooltip-code-border-color: var(--color-grey-225-10-85);
+
   display: flex;
   color: var(--color-white, white);
   position: fixed;
   z-index: 1000;
-  padding-right: 6px;
   max-width: 300px;
   font-size: var(--text-size-small);
   font-family: var(--font-family);
 }
 
+.bio-properties-panel-tooltip.right {
+  padding-right: 6px;
+}
+
+.bio-properties-panel-tooltip.top {
+  flex-direction: column;
+}
+
 .bio-properties-panel-tooltip-content {
   background-color: var(--tooltip-background-color);
   padding: 16px;
@@ -1207,6 +1220,12 @@ textarea.bio-properties-panel-input {
   margin-top: 16px;
 }
 
+.bio-properties-panel-tooltip.top .bio-properties-panel-tooltip-arrow {
+  margin-top: -3px;
+  margin-left: calc(50% - 2.5px);
+  transform: rotate(90deg);
+}
+
 .bio-properties-panel-feelers-editor-container .bio-properties-panel-feelers-editor__open-popup-placeholder,
 .bio-properties-panel-feel-editor-container .bio-properties-panel-feel-editor__open-popup-placeholder {
   display: none;
@@ -1277,6 +1296,8 @@ textarea.bio-properties-panel-input {
 
 .bio-properties-panel-popup .bio-properties-panel-popup__body:not(:first-child) {
   padding-top: 0;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .bio-properties-panel-popup .bio-properties-panel-popup__header {
@@ -1361,6 +1382,10 @@ textarea.bio-properties-panel-input {
   min-width: 100%;
 }
 
+.bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container .cm-scroller {
+  overflow: auto !important;
+}
+
 .bio-properties-panel-feel-popup .bio-properties-panel-feelers-editor-container {
   width: 100%;
   display: flex;
@@ -1378,7 +1403,6 @@ textarea.bio-properties-panel-input {
   width: 100%;
   resize: none;
   padding: 0;
-  margin-left: -12px;
   overflow: hidden;
   overflow-y: auto
 }
@@ -1390,19 +1414,18 @@ textarea.bio-properties-panel-input {
 .bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup,
 .bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup {
   position: absolute;
-  display: none;
+  top: 0;
   right: 0;
-  bottom: -1px;
+  line-height: 1;
+  padding: 2px 4px;
+  margin: 3px;
+  display: none;
   background: none;
   border: none;
   color: var(--feel-open-popup-color);
   cursor: pointer;
 }
 
-.bio-properties-panel-open-feel-popup svg {
-  background: var(--feel-open-popup-background-color);
-}
-
 .bio-properties-panel-feelers-editor-container:hover .bio-properties-panel-open-feel-popup,
 .bio-properties-panel-feel-container:hover .bio-properties-panel-open-feel-popup,
 .bio-properties-panel-feelers-editor-container:focus-within .bio-properties-panel-open-feel-popup,