feat(TextField): allow addition of FEEL icon

related to bpmn-io/bpmn-js-properties-panel#599

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;
+}

src/components/entries/TextField.js

@@ -11,6 +11,32 @@ import classnames from 'classnames';
 import {
   usePrevious
 } from '../../hooks';
+import { FeelOptionalIcon, FeelRequiredIcon } from '../icons';
+
+
+function FeelIcon(props) {
+
+  const {
+    label,
+    feel = false,
+  } = props;
+
+  const feelRequiredLabel = ' must be a FEEL expression';
+  const feelOptionalLabel = ' can optionally be a FEEL expression';
+
+  return (
+    <i
+      class="bio-properties-panel-feel-icon"
+      title={
+        label + (
+          feel === 'required' ? feelRequiredLabel : feelOptionalLabel
+        )
+      }
+    >
+      {feel === 'required' ? <FeelRequiredIcon /> : <FeelOptionalIcon />}
+    </i>
+  );
+}
 
 
 function Textfield(props) {
@@ -21,6 +47,7 @@ function Textfield(props) {
     id,
     label,
     onInput,
+    feel = false,
     value = ''
   } = props;
 
@@ -30,7 +57,10 @@ function Textfield(props) {
 
   return (
     <div class="bio-properties-panel-textfield">
-      <label for={ prefixId(id) } class="bio-properties-panel-label">{ label }</label>
+      <label for={ prefixId(id) } class="bio-properties-panel-label">
+        { label }
+        {feel && <FeelIcon feel={ feel } label={ label } />}
+      </label>
       <input
         id={ prefixId(id) }
         type="text"
@@ -66,6 +96,7 @@ export default function TextfieldEntry(props) {
     description,
     debounce,
     disabled,
+    feel,
     label,
     getValue,
     setValue,
@@ -107,7 +138,7 @@ export default function TextfieldEntry(props) {
       'bio-properties-panel-entry',
       error ? 'has-error' : '')
     } data-entry-id={ id }>
-      <Textfield id={ id } label={ label } value={ value } onInput={ handleChange } debounce={ debounce } disabled={ disabled } />
+      <Textfield id={ id } label={ label } value={ value } onInput={ handleChange } debounce={ debounce } disabled={ disabled } feel={ feel } />
       <Description forId={ id } element={ element } value={ description } />
       { error && <div class="bio-properties-panel-error">{ error }</div> }
     </div>

src/components/icons/index.js

@@ -1,3 +1,5 @@
 export { default as ArrowIcon } from './Arrow.svg';
 export { default as CreateIcon } from './Create.svg';
-export { default as DeleteIcon } from './Delete.svg';
+export { default as DeleteIcon } from './Delete.svg';
+export { default as FeelRequiredIcon } from './FeelRequired.svg';
+export { default as FeelOptionalIcon } from './FeelOptional.svg';

test/spec/components/TextField.spec.js

@@ -336,6 +336,57 @@ describe('<TextField>', function() {
   });
 
 
+  describe('feel', function() {
+
+    it('should render without feel icon', function() {
+
+      // given
+      const result = createTextField({
+        container,
+        id: 'noFeelTextField'
+      });
+
+      // then
+      const icon = domQuery('[data-entry-id="noFeelTextField"] .bio-properties-panel-feel-icon',
+        result.container);
+      expect(icon).not.to.exist;
+    });
+
+
+    it('should render optional feel icon', function() {
+
+      // given
+      const result = createTextField({
+        container,
+        id: 'requiredFeelTextField',
+        feel: 'optional'
+      });
+
+      // then
+      const icon = domQuery('[data-entry-id="requiredFeelTextField"] .bio-properties-panel-feel-icon',
+        result.container);
+      expect(icon).to.exist;
+    });
+
+
+    it('should render required feel icon', function() {
+
+      // given
+      const result = createTextField({
+        container,
+        id: 'requiredFeelTextField',
+        feel: 'required'
+      });
+
+      // then
+      const icon = domQuery('[data-entry-id="requiredFeelTextField"] .bio-properties-panel-feel-icon',
+        result.container);
+      expect(icon).to.exist;
+    });
+
+  });
+
+
   describe('a11y', function() {
 
     it('should have no violations', async function() {
@@ -364,6 +415,7 @@ function createTextField(options = {}) {
     description,
     debounce = fn => fn,
     disabled,
+    feel,
     label,
     getValue = noop,
     setValue = noop,
@@ -389,7 +441,8 @@ function createTextField(options = {}) {
         getValue={ getValue }
         setValue={ setValue }
         debounce={ debounce }
-        validate={ validate } />
+        validate={ validate }
+        feel={ feel } />
     </DescriptionContext.Provider>,
     {
       container