@bpmn-io/properties-panel 0.13.1 → 0.15.0-feelEditor.0

package/CHANGELOG.md

@@ -6,6 +6,16 @@ All notable changes to [`@bpmn-io/properties-panel`](https://github.com/bpmn-io/
 
 ___Note:__ Yet to be released changes appear here._
 
+## 0.14.0
+
+* `FEAT`: enable multiple and empty state ([#69](https://github.com/bpmn-io/properties-panel/issues/69))
+* `FEAT`: make group headers sticky ([#151](https://github.com/bpmn-io/properties-panel/pull/151))
+* `FIX`: fix outline on header buttons ([#148](https://github.com/bpmn-io/properties-panel/pull/148)) 
+
+## 0.13.2
+
+* `FIX`: remove unnecessary scroll padding ([#145](https://github.com/bpmn-io/properties-panel/pull/145))
+
 ## 0.13.1
 
 * `FIX`: add accessible title for documentation ref ([#144](https://github.com/bpmn-io/properties-panel/pull/144))

package/assets/properties-panel.css

@@ -12,6 +12,7 @@
   --color-grey-225-10-95: hsl(225, 10%, 95%);
   --color-grey-225-10-97: hsl(225, 10%, 97%);
 
+  --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-95: hsl(205, 100%, 95%);
@@ -36,7 +37,8 @@
   --description-code-border-color: var(--color-grey-225-10-85);
   --description-list-item-color: var(--color-grey-225-10-35);
 
-  --placeholder-color: var(--color-grey-225-10-75);
+  --placeholder-color: var(--color-grey-225-10-35);
+  --placeholder-background-color: var(--color-grey-225-10-95);
 
   --header-background-color: var(--color-grey-225-10-95);
   --header-icon-fill-color: var(--color-grey-225-10-15);
@@ -45,6 +47,9 @@
   --group-background-color: var(--color-white);
   --group-bottom-border-color: var(--color-grey-225-10-75);
 
+  --sticky-group-background-color: var(--color-grey-225-10-95);
+  --sticky-group-bottom-border-color: var(--color-grey-225-10-75);
+
   --add-entry-fill-color: var(--color-grey-225-10-35);
   --add-entry-hover-fill-color: var(--color-white);
   --add-entry-hover-background-color: var(--color-blue-205-100-50);
@@ -94,6 +99,10 @@
   --dropdown-item-hover-background-color: var(--color-grey-225-10-95);
   --dropdown-separator-background-color: var(--color-grey-225-10-75);
 
+  --svg-stroke-color: var(--color-grey-225-10-35);
+
+  --feel-indicator-background-color: var(--color-grey-225-10-90);
+
   --text-size-base: 14px;
   --text-size-small: 13px;
   --text-size-smallest: 12px;
@@ -128,11 +137,27 @@
   flex: 1;
 }
 
+/**
+ * Placeholder (empty, multi select, ...)
+ */
 .bio-properties-panel-placeholder {
-  padding: 10px;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: var(--placeholder-background-color);
+}
+
+.bio-properties-panel-placeholder-text {
   color: var(--placeholder-color);
   font-size: var(--text-size-base);
   text-align: center;
+  margin: 12px 48px;
 }
 
 /**
@@ -144,7 +169,6 @@
   align-items: center;
   font-size: var(--text-size-base);
   padding: 16px 10px;
-  margin-bottom: 2px;
   background-color: var(--header-background-color);
   border-bottom: 1px solid var(--header-bottom-border-color);
   width: 100%;
@@ -197,7 +221,6 @@
   overflow-y: auto;
   overflow-x: hidden;
   flex: 1;
-  padding-bottom: 70px;
 }
 
 /**
@@ -206,10 +229,10 @@
 .bio-properties-panel-group {
   background-color: var(--group-background-color);
   border-bottom: 1px solid var(--group-bottom-border-color);
+  position: relative;
 }
 
 .bio-properties-panel-group-header {
-  position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -217,6 +240,12 @@
   height: 32px;
   user-select: none;
   justify-content: space-between;
+  margin-bottom: -1px; /* avoid double borders */
+  position: relative;  /* browsers not supporting sticky */
+  position: -webkit-sticky;  /* for safari */
+  position: sticky;
+  top: 0;
+  z-index: 1;
 }
 
 .bio-properties-panel-group-header .bio-properties-panel-group-header-title {
@@ -230,6 +259,11 @@
   font-weight: 500;
 }
 
+.bio-properties-panel-group-header.sticky {
+  background-color: var(--sticky-group-background-color);
+  border-bottom: 1px solid var(--sticky-group-bottom-border-color);
+}
+
 .bio-properties-panel-group-header-buttons {
   display: flex;
 }
@@ -259,7 +293,6 @@
 
 .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry {
   margin-right: 69px;
-  padding-left: 6px;
 }
 
 .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry:hover {
@@ -269,7 +302,7 @@
 .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry-label {
   display: none;
   color: var(--add-entry-label-color);
-  padding: 4px 6px 3px 2px;
+  padding: 0 6px 0 2px;
 }
 
 .bio-properties-panel-group-header-button.bio-properties-panel-add-entry:hover {
@@ -418,12 +451,19 @@ textarea.bio-properties-panel-input,
   width: 100%;
 }
 
-.bio-properties-panel-input:focus {
+.bio-properties-panel-input:focus,
+.bio-properties-panel-input:focus-within {
   outline: none;
   background-color: var(--input-focus-background-color);
   border: 1px solid var(--input-focus-border-color);
 }
 
+.bio-properties-panel-textfield:focus-within,
+.bio-properties-panel-feel-entry:focus-within {
+  --input-background-color: var(--input-focus-background-color);
+  --input-border-color: var(--input-focus-border-color);
+}
+
 .bio-properties-panel-input:disabled {
   border-color: var(--input-disabled-border-color);
   background-color: var(--input-disabled-background-color);
@@ -893,10 +933,65 @@ textarea.bio-properties-panel-input {
   display: inline-block;
   height: 16px;
   vertical-align: text-bottom;
-  padding: 0 3px;
+  padding: 0;
+  margin: 0 3px;
+  justify-content: center;
+  align-items: center;
+  align-self: center;
+  border: none;
+  background: none;
+}
+
+.bio-properties-panel-feel-icon.optional {
+  cursor: pointer;
+}
+
+.bio-properties-panel-feel-icon.active {
+  color: var(--add-entry-hover-background-color);
+  --svg-stroke-color: var(--color-blue-205-100-35);
 }
 
 .bio-properties-panel-feel-icon svg {
   width: 16px;
   height: 16px;
+}
+
+.feel-editor-container {
+  position: relative;
+}
+
+.feel-editor-container.active {
+  font-family: var(--font-family-monospace);
+}
+
+.bio-properties-panel-feel-container {
+  position: relative;
+}
+
+.bio-properties-panel-feel-container .feel-editor-container>div {
+  position: static;
+  padding-left: 2.4em !important;
+  min-height: 28px;
+}
+
+.cm-scroller {
+  overflow-x: hidden !important;
+}
+
+.FeelToggle {
+  position: absolute;
+  height: 100%;
+  width: 2em;
+}
+
+.FeelToggle button {
+  position: absolute;
+  right: auto;
+  border: 1px solid var(--input-border-color);
+  background-color: var(--feel-indicator-background-color);
+  border-right: 0px;
+  border-radius: 2px 0 0 2px;
+  z-index: 100;
+  height: 100%;
+  width: 2em;
 }