@bpmn-io/form-js-editor 1.1.0 → 1.3.0-alpha.0

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

@@ -1,8 +1,4 @@
 .fjs-editor-container {
-  --color-children-border: var(
-    --cds-border-strong,
-    var(--cds-border-strong-01, var(--color-grey-225-10-75))
-  );
   --color-children-selected-border: var(--cds-border-interactive, var(--color-blue-219-100-53));
   --color-children-selected-background: transparent;
   --color-children-hover-border: var(--cds-border-interactive, var(--color-blue-219-100-53-05));
@@ -188,6 +184,11 @@
   display: flex;
 }
 
+.fjs-no-json-lint .cm-lint-marker,
+.fjs-no-json-lint .cm-lintPoint-error {
+  display: none;
+}
+
 .fjs-editor-container .fjs-form-editor {
   display: flex;
   flex: 1;
@@ -218,29 +219,63 @@
 }
 
 .fjs-editor-container .fjs-children .fjs-children {
-  border: dashed 2px var(--color-children-border);
+  margin: 3px 0;
 }
 
 .fjs-editor-container .fjs-children .fjs-element {
   position: relative;
   border: solid 2px transparent;
+  outline: none;
+}
+
+.fjs-editor-container .fjs-form > .fjs-element {
+  border: none;
 }
 
 .fjs-editor-container .fjs-form-field:not(.fjs-powered-by) {
   margin: 1px 6px;
 }
 
+.fjs-editor-container .fjs-children .fjs-element.fjs-outlined {
+  border-color: var(--color-borders-group);
+}
+
 .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);
 }
 
-.fjs-editor-container .fjs-children .fjs-element:hover,
-.fjs-editor-container .fjs-children .fjs-element:focus-within {
+.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);
+}
+
+.fjs-editor-container .fjs-layout-column:first-child > .fjs-element[data-field-type=group] {
+  margin-left: -6px;
+}
+
+.fjs-editor-container .fjs-layout-column:last-child > .fjs-element[data-field-type=group] {
+  margin-right: -6px;
+}
+
+.fjs-editor-container .fjs-form-field-group,
+.fjs-editor-container .fjs-form-field-group .fjs-form-field-group .fjs-form-field-group {
+  margin: 1px 6px;
+  padding: 0px;
+}
+
+.fjs-editor-container .fjs-form-field-group.fjs-outlined {
   outline: none;
 }
 
+.fjs-editor-container .fjs-form-field-group .cds--grid {
+  padding: 0 2rem;
+}
+
+.fjs-editor-container .fjs-form-field-group > label {
+  margin-top: 6px;
+}
+
 .fjs-editor-container .fjs-input:disabled,
 .fjs-editor-container .fjs-textarea:disabled,
 .fjs-editor-container .fjs-taglist-input:disabled,
@@ -269,6 +304,10 @@
   height: 100%;
 }
 
+.fjs-cursor-grabbing .fjs-editor-container .fjs-empty-editor {
+  display: none;
+}
+
 .fjs-editor-container .fjs-empty-editor .fjs-empty-editor-card {
   display: flex;
   flex-direction: column;
@@ -309,12 +348,12 @@
 }
 
 .fjs-editor-container .fjs-row-dragger:hover svg,
-.fjs-editor-container .fjs-drag-row-move:hover .fjs-row-dragger svg {
+.fjs-editor-container .fjs-drag-row-move:hover > .fjs-row-dragger svg {
   visibility: visible;
 }
 
 .fjs-editor-container .fjs-drag-move {
-  padding-left: 3px;
+  padding: 0 3px;
 }
 
 .fjs-editor-container .fjs-field-resize-handle {
@@ -354,7 +393,7 @@
   display: none;
 }
 
-.fjs-editor-container .fjs-children .fjs-editor-selected .fjs-field-resize-handle {
+.fjs-editor-container .fjs-children .fjs-editor-selected > .fjs-field-resize-handle {
   visibility: visible;
 }
 
@@ -772,10 +811,14 @@
   --color-grey-225-10-90: hsl(225, 10%, 90%);
   --color-grey-225-10-95: hsl(225, 10%, 95%);
   --color-grey-225-10-97: hsl(225, 10%, 97%);
+  --color-grey-0-0-22: hsl(0, 0%, 22%);
   --color-blue-205-100-35: hsl(205, 100%, 35%);
   --color-blue-205-100-45: hsl(205, 100%, 45%);
   --color-blue-205-100-50: hsl(205, 100%, 50%);
+  --color-blue-205-100-85: hsl(205, 100%, 85%);
   --color-blue-205-100-95: hsl(205, 100%, 95%);
+  --color-blue-219-99-53: hsl(219, 99%, 53%);
+  --color-blue-218-100-74: hsl(218, 100%, 74%);
   --color-green-150-86-44: hsl(150, 86%, 44%);
   --color-red-360-100-40: hsl(360, 100%, 40%);
   --color-red-360-100-45: hsl(360, 100%, 45%);
@@ -809,6 +852,7 @@
   --arrow-fill-color: var(--color-grey-225-10-35);
   --arrow-hover-background-color: var(--color-grey-225-10-95);
   --dot-color: var(--color-grey-225-10-35);
+  --dot-color-error: var(--color-red-360-100-45);
   --list-badge-color: var(--color-white);
   --list-badge-background-color: var(--color-grey-225-10-35);
   --input-background-color: var(--color-grey-225-10-97);
@@ -843,7 +887,16 @@
   --feel-hover-background-color: var(--color-grey-225-10-97);
   --feel-active-background-color: transparent;
   --feel-required-color: var(--color-grey-225-10-55);
+  --feel-open-popup-color: hsla(0, 0%, 32%, 1);
+  --feel-open-popup-background-color: var(--color-white);
+  --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;
@@ -1088,6 +1141,10 @@
   background-color: var(--dot-color);
 }
 
+.bio-properties-panel-dot--error {
+  --dot-color: var(--dot-color-error);
+}
+
 /**
  * Lists
  */
@@ -1115,6 +1172,10 @@
   background-color: var(--list-badge-background-color);
 }
 
+.bio-properties-panel-list-badge--error {
+  --list-badge-background-color: var(--dot-color-error);
+}
+
 /**
  * Basic entries
  */
@@ -1803,6 +1864,11 @@ textarea.bio-properties-panel-input {
   background-color: transparent;
 }
 
+/* @Note(pinussilvestrus): mitigate low contrast - https://github.com/bpmn-io/cm-theme/issues/4 */
+.bio-properties-panel-feelers-editor .cm-content ::selection {
+  background: var(--feelers-select-color, hsl(205, 100%, 85%));
+}
+
 .bio-properties-panel-feelers-editor .cm-editor.cm-focused {
   background-color: transparent;
 }
@@ -1835,3 +1901,292 @@ textarea.bio-properties-panel-input {
 .bio-properties-panel-feel-toggle-switch .bio-properties-panel-feel-entry:not(.feel-active) .bio-properties-panel-feel-container {
   margin-left: auto;
 }
+
+.bio-properties-panel-tooltip-wrapper {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-underline-offset: 2px;
+  font: inherit;
+}
+
+.bio-properties-panel-tooltip {
+  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-content {
+  background-color: var(--tooltip-background-color);
+  padding: 16px;
+  border-radius: 2px;
+  font-weight: 400;
+  white-space: pre-wrap;
+}
+
+.bio-properties-panel-tooltip-content code,
+.bio-properties-panel-tooltip-content pre {
+  color: var(--description-color);
+  font-family: var(--font-family);
+  font-size: var(--text-size-small);
+  line-height: var(--line-height-condensed);
+  padding: 0 2px;
+  background-color: var(--tooltip-code-background-color);
+  border: 1px solid var(--tooltip-code-border-color);
+  border-radius: 3px;
+}
+
+.bio-properties-panel-tooltip p:first-child {
+  margin-top: 0;
+}
+
+.bio-properties-panel-tooltip p:last-child {
+  margin-bottom: 0;
+}
+
+.bio-properties-panel-tooltip-content a {
+  color: var(--tooltip-link);
+}
+
+.bio-properties-panel-tooltip .bio-properties-panel-tooltip-arrow {
+  width: 0;
+  height: 0;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 5px solid var(--tooltip-background-color);
+  margin-top: 16px;
+}
+
+.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;
+  justify-content: center;
+  flex-direction: column;
+  color: hsla(0, 0%, 9%, 0.25);
+  padding: 3px 6px 2px;
+  border: 1px solid var(--input-border-color);
+  border-radius: 2px;
+  background-color: var(--input-background-color);
+  font-size: var(--text-size-base);
+  font-family: inherit;
+  width: 100%;
+  min-height: 100%;
+}
+
+.bio-properties-panel-feelers-editor-container.popupOpen .bio-properties-panel-input,
+.bio-properties-panel-feel-editor-container.popupOpen .bio-properties-panel-input {
+  display: none;
+}
+
+.bio-properties-panel-feelers-editor-container.popupOpen .bio-properties-panel-feelers-editor__open-popup-placeholder,
+.bio-properties-panel-feel-editor-container.popupOpen .bio-properties-panel-feel-editor__open-popup-placeholder {
+  display: flex;
+}
+
+.bio-properties-panel-popup {
+  --popup-background-color: hsla(0, 0%, 96%, 1);
+  --popup-header-background-color: white;
+  --popup-font-color: hsla(0, 0%, 0%, 1);
+  --popup-title-color: hsla(0, 0%, 0%, 1);
+  --feel-popup-close-background-color: hsla(219, 99%, 53%, 1);
+  --feel-popup-gutters-background-color: hsla(0, 0%, 90%, 1);
+  position: absolute;
+  display: flex;
+  flex: auto;
+  flex-direction: column;
+  font-family: IBM Plex Sans, sans-serif;
+  padding: 0;
+  z-index: 1001;
+  box-shadow: 0px 2px 6px 0px hsla(0, 0%, 0%, 0.3);
+  background-color: var(--popup-background-color);
+  color: var(--popup-font-color);
+  height: auto;
+  width: auto;
+  overflow: hidden;
+  font-size: 14px;
+}
+
+.bio-properties-panel-popup h1,
+.bio-properties-panel-popup h2,
+.bio-properties-panel-popup h3,
+.bio-properties-panel-popup h4 {
+  font-weight: 500;
+  font-size: inherit;
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__header,
+.bio-properties-panel-popup .bio-properties-panel-popup__body,
+.bio-properties-panel-popup .bio-properties-panel-popup__footer {
+  padding: 12px;
+  display: flex;
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__body:not(:first-child) {
+  padding-top: 0;
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__header {
+  background-color: var(--popup-header-background-color);
+  margin: 0;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  text-align: left;
+  color: var(--popup-title-color);
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__header.draggable {
+  cursor: grab;
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__drag-handle {
+  display: flex;
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__drag-preview {
+  width: 1px;
+  height: 1px;
+  position: absolute;
+  top: 0;
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__title {
+  margin-left: 8px;
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__title::first-letter {
+  text-transform: capitalize;
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__header svg {
+  margin-left: -4px;
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__body {
+  font-size: inherit;
+  height: 100%;
+  display: flex;
+  overflow: auto;
+  padding-bottom: 0;
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__footer {
+  position: absolute;
+  bottom: 0;
+  right: 8px;
+}
+
+.bio-properties-panel-feel-popup {
+  min-height: 400px;
+  width: fit-content;
+}
+
+.bio-properties-panel-feel-popup .bio-properties-panel-feel-popup__body {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container {
+  display: flex;
+  min-width: 100%;
+}
+
+.bio-properties-panel-feel-popup .bio-properties-panel-feelers-editor-container {
+  width: 100%;
+  display: flex;
+}
+
+.bio-properties-panel-feel-popup .bio-properties-panel-feelers-editor-container .bio-properties-panel-feelers-editor {
+  display: flex;
+}
+
+.bio-properties-panel-feel-popup .bio-properties-panel-feelers-editor-container .bio-properties-panel-feelers-editor .cm-editor {
+  width: 100%;
+}
+
+.bio-properties-panel-feel-popup .bio-properties-panel-input {
+  width: 100%;
+  resize: none;
+  padding: 0;
+  margin-left: -12px;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.bio-properties-panel-feel-popup .bio-properties-panel-open-feel-popup {
+  display: none !important;
+}
+
+.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;
+  right: 0;
+  bottom: -1px;
+  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,
+.bio-properties-panel-feel-container:focus-within .bio-properties-panel-open-feel-popup {
+  display: block;
+}
+
+.bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup {
+  bottom: 0;
+}
+
+.bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup:hover,
+.bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup:hover {
+  color: var(--feel-open-popup-hover-color);
+}
+
+.bio-properties-panel-feel-popup .bio-properties-panel-popup__footer .bio-properties-panel-feel-popup__close-btn {
+  background: var(--feel-popup-close-background-color);
+  width: 66px;
+  font-weight: 400;
+  font-size: 14px;
+  font-family: inherit;
+  color: white;
+  border: none;
+  height: 32px;
+  cursor: pointer;
+}
+
+.bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container .cm-editor {
+  width: 100%;
+  height: 100%;
+}
+
+.bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container .cm-editor .cm-content {
+  padding-left: 4px;
+}
+
+.bio-properties-panel-feel-popup .cm-gutters {
+  background-color: var(--feel-popup-gutters-background-color);
+  border: none;
+  padding: 0;
+}
+
+.bio-properties-panel-feel-popup .cm-gutter {
+  min-width: 32px;
+}
+
+.bio-properties-panel-feel-popup .cm-gutters .cm-lineNumbers .cm-gutterElement {
+  text-align: center;
+}