@bpmn-io/properties-panel 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -6,6 +6,10 @@ All notable changes to [`@bpmn-io/properties-panel`](https://github.com/bpmn-io/
 
 ___Note:__ Yet to be released changes appear here._
 
+## 0.12.0
+
+* `FEAT`: allow addition of FEEL icon to TextFields and TextAreas ([#138](https://github.com/bpmn-io/properties-panel/pull/138))
+
 ## 0.11.0
 
 * `FEAT`: all group and entry components specified as `component` are actual components, not elements ([#134](https://github.com/bpmn-io/properties-panel/pull/134))

package/assets/properties-panel.css

@@ -875,3 +875,23 @@ textarea.bio-properties-panel-input {
 .bio-properties-panel-dropdown-button__menu-item--actionable:hover {
   background-color: var(--dropdown-item-hover-background-color);
 }
+
+.bio-properties-panel-feel-input {
+  position: relative;
+}
+
+.bio-properties-panel-feel-input input {
+  padding-right: 2em
+}
+
+.bio-properties-panel-feel-icon {
+  display: inline-block;
+  height: 16px;
+  vertical-align: text-bottom;
+  padding: 0 3px;
+}
+
+.bio-properties-panel-feel-icon svg {
+  width: 16px;
+  height: 16px;
+}

package/dist/index.esm.js

@@ -219,6 +219,49 @@ DeleteIcon.defaultProps = {
   height: "16"
 };
 
+var FeelRequiredIcon = function FeelRequiredIcon(props) {
+  return jsxs("svg", { ...props,
+    children: [jsx("path", {
+      d: "M5.8 7.06V5.95h4.307v1.11H5.8zm0 3.071v-1.11h4.307v1.11H5.8z",
+      fill: "#505562"
+    }), jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M8 3.268A4.732 4.732 0 1 0 12.732 8H14a6 6 0 1 1-6-6v1.268z",
+      fill: "#505562"
+    }), jsx("path", {
+      d: "m11.28 6.072-.832-.56 1.016-1.224L10 3.848l.312-.912 1.392.584L11.632 2h1.032l-.072 1.52 1.392-.584.312.912-1.464.44 1.008 1.224-.832.552-.864-1.296-.864 1.304z",
+      fill: "#505562"
+    })]
+  });
+};
+
+FeelRequiredIcon.defaultProps = {
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var FeelOptionalIcon = function FeelOptionalIcon(props) {
+  return jsxs("svg", { ...props,
+    children: [jsx("path", {
+      d: "M5.845 7.04V5.93h4.307v1.11H5.845zm0 3.07V9h4.307v1.11H5.845z",
+      fill: "#505562"
+    }), jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M3.286 8a4.714 4.714 0 1 0 9.428 0 4.714 4.714 0 0 0-9.428 0zM8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2z",
+      fill: "#505562"
+    })]
+  });
+};
+
+FeelOptionalIcon.defaultProps = {
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
 function Group(props) {
   const {
     element,
@@ -1327,12 +1370,27 @@ function prefixId$3(id) {
   return `bio-properties-panel-${id}`;
 }
 
+function FeelIcon(props) {
+  const {
+    label,
+    feel = false
+  } = props;
+  const feelRequiredLabel = ' must be a FEEL expression';
+  const feelOptionalLabel = ' can optionally be a FEEL expression';
+  return jsx("i", {
+    class: "bio-properties-panel-feel-icon",
+    title: label + (feel === 'required' ? feelRequiredLabel : feelOptionalLabel),
+    children: feel === 'required' ? jsx(FeelRequiredIcon, {}) : jsx(FeelOptionalIcon, {})
+  });
+}
+
 function TextArea(props) {
   const {
     id,
     label,
     rows = 2,
     debounce,
+    feel,
     onInput,
     value = '',
     disabled,
@@ -1345,10 +1403,13 @@ function TextArea(props) {
   }, [onInput, debounce]);
   return jsxs("div", {
     class: "bio-properties-panel-textarea",
-    children: [jsx("label", {
+    children: [jsxs("label", {
       for: prefixId$2(id),
       class: "bio-properties-panel-label",
-      children: label
+      children: [label, feel && jsx(FeelIcon, {
+        feel: feel,
+        label: label
+      })]
     }), jsx("textarea", {
       id: prefixId$2(id),
       name: id,
@@ -1384,6 +1445,7 @@ function TextAreaEntry(props) {
     id,
     description,
     debounce,
+    feel,
     label,
     getValue,
     setValue,
@@ -1403,6 +1465,7 @@ function TextAreaEntry(props) {
       rows: rows,
       debounce: debounce,
       monospace: monospace,
+      feel: feel,
       disabled: disabled
     }), jsx(Description, {
       forId: id,
@@ -1426,6 +1489,7 @@ function Textfield(props) {
     id,
     label,
     onInput,
+    feel = false,
     value = ''
   } = props;
   const handleInput = useMemo(() => {
@@ -1435,10 +1499,13 @@ function Textfield(props) {
   }, [onInput, debounce]);
   return jsxs("div", {
     class: "bio-properties-panel-textfield",
-    children: [jsx("label", {
+    children: [jsxs("label", {
       for: prefixId$1(id),
       class: "bio-properties-panel-label",
-      children: label
+      children: [label, feel && jsx(FeelIcon, {
+        feel: feel,
+        label: label
+      })]
     }), jsx("input", {
       id: prefixId$1(id),
       type: "text",
@@ -1475,6 +1542,7 @@ function TextfieldEntry(props) {
     description,
     debounce,
     disabled,
+    feel,
     label,
     getValue,
     setValue,
@@ -1516,7 +1584,8 @@ function TextfieldEntry(props) {
       value: value,
       onInput: handleChange,
       debounce: debounce,
-      disabled: disabled
+      disabled: disabled,
+      feel: feel
     }), jsx(Description, {
       forId: id,
       element: element,
@@ -1639,5 +1708,5 @@ var index = {
   debounceInput: ['factory', debounceInput]
 };
 
-export { ArrowIcon, CheckboxEntry, CollapsibleEntry, CreateIcon, index as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DropdownButton, Group, Header, HeaderButton, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, PropertiesPanel, SelectEntry, Simple as SimpleEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, isEdited$6 as isCheckboxEntryEdited, isEdited$5 as isNumberFieldEntryEdited, isEdited$4 as isSelectEntryEdited, isEdited$3 as isSimpleEntryEdited, isEdited$2 as isTextAreaEntryEdited, isEdited$1 as isTextFieldEntryEdited, isEdited as isToggleSwitchEntryEdited, useDescriptionContext, useKeyFactory, useLayoutState, usePrevious };
+export { ArrowIcon, CheckboxEntry, CollapsibleEntry, CreateIcon, index as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DropdownButton, FeelOptionalIcon, FeelRequiredIcon, Group, Header, HeaderButton, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, PropertiesPanel, SelectEntry, Simple as SimpleEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, isEdited$6 as isCheckboxEntryEdited, isEdited$5 as isNumberFieldEntryEdited, isEdited$4 as isSelectEntryEdited, isEdited$3 as isSimpleEntryEdited, isEdited$2 as isTextAreaEntryEdited, isEdited$1 as isTextFieldEntryEdited, isEdited as isToggleSwitchEntryEdited, useDescriptionContext, useKeyFactory, useLayoutState, usePrevious };
 //# sourceMappingURL=index.esm.js.map