feat: support placeholder in text and FEEL text fields

Related to bpmn-io/bpmn-js-element-templates#92
bpmn-io · May 29, 2024 · 726ca37 · 726ca37
1 parent 1fd6406
commit 726ca37
Show file tree

Hide file tree

Showing 8 changed files with 116 additions and 3 deletions.
diff --git a/src/components/entries/FEEL/Feel.js b/src/components/entries/FEEL/Feel.js
@@ -46,6 +46,7 @@ function FeelTextfieldComponent(props) {
     hostLanguage,
     onInput,
     onError,
+    placeholder,
     feel,
     value = '',
     disabled = false,
@@ -244,6 +245,7 @@ function FeelTextfieldComponent(props) {
             onFeelToggle={ () => { handleFeelToggle(); setFocus(true); } }
             onLint={ handleLint }
             onPopupOpen={ handlePopupOpen }
+            placeholder={ placeholder }
             value={ feelOnlyValue }
             variables={ variables }
             ref={ editorRef }
@@ -274,7 +276,8 @@ const OptionalFeelInput = forwardRef((props, ref) => {
     onInput,
     value,
     onFocus,
-    onBlur
+    onBlur,
+    placeholder
   } = props;
 
   const inputRef = useRef();
@@ -311,6 +314,7 @@ const OptionalFeelInput = forwardRef((props, ref) => {
     onInput={ e => onInput(e.target.value) }
     onFocus={ onFocus }
     onBlur={ onBlur }
+    placeholder={ placeholder }
     value={ value || '' } />;
 });
 
@@ -375,7 +379,8 @@ const OptionalFeelTextArea = forwardRef((props, ref) => {
     onInput,
     value,
     onFocus,
-    onBlur
+    onBlur,
+    placeholder
   } = props;
 
   const inputRef = useRef();
@@ -406,6 +411,7 @@ const OptionalFeelTextArea = forwardRef((props, ref) => {
     onInput={ e => onInput(e.target.value) }
     onFocus={ onFocus }
     onBlur={ onBlur }
+    placeholder={ placeholder }
     value={ value || '' }
     data-gramm="false"
   />;
@@ -507,6 +513,7 @@ const OptionalFeelCheckbox = forwardRef((props, ref) => {
  * @param {Function} props.variables
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
+ * @param {string} [props.placeholder]
  * @param {string|import('preact').Component} props.tooltip
  */
 export default function FeelEntry(props) {
@@ -529,6 +536,7 @@ export default function FeelEntry(props) {
     variables,
     onFocus,
     onBlur,
+    placeholder,
     tooltip
   } = props;
 
@@ -588,6 +596,7 @@ export default function FeelEntry(props) {
         onError={ onError }
         onFocus={ onFocus }
         onBlur={ onBlur }
+        placeholder={ placeholder }
         example={ example }
         hostLanguage={ hostLanguage }
         singleLine={ singleLine }
@@ -647,6 +656,7 @@ export function FeelNumberEntry(props) {
  * @param {Function} props.variables
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
+ * @param {string} [props.placeholder]
  */
 export function FeelTextAreaEntry(props) {
   return <FeelEntry class="bio-properties-panel-feel-textarea" OptionalComponent={ OptionalFeelTextArea } { ...props } />;

diff --git a/src/components/entries/FEEL/FeelEditor.js b/src/components/entries/FEEL/FeelEditor.js
@@ -51,6 +51,7 @@ const CodeEditor = forwardRef((props, ref) => {
     onFeelToggle = noop,
     onLint = noop,
     onPopupOpen = noop,
+    placeholder,
     popupOpen,
     disabled,
     tooltipContainer,
@@ -95,6 +96,7 @@ const CodeEditor = forwardRef((props, ref) => {
       onChange: handleInput,
       onKeyDown: onKeyDown,
       onLint: onLint,
+      placeholder: placeholder,
       tooltipContainer: tooltipContainer,
       value: localValue,
       variables: variables,
@@ -137,6 +139,14 @@ const CodeEditor = forwardRef((props, ref) => {
     editor.setVariables(variables);
   }, [ variables ]);
 
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+
+    editor.setPlaceholder(placeholder);
+  }, [ placeholder ]);
+
   const handleClick = () => {
     ref.current.focus();
   };

diff --git a/src/components/entries/TextArea.js b/src/components/entries/TextArea.js
@@ -38,6 +38,7 @@ function TextArea(props) {
     onFocus,
     onBlur,
     autoResize,
+    placeholder,
     rows = autoResize ? 1 : 2,
     tooltip
   } = props;
@@ -90,6 +91,7 @@ function TextArea(props) {
         onInput={ handleInput }
         onFocus={ onFocus }
         onBlur={ onBlur }
+        placeholder={ placeholder }
         rows={ rows }
         value={ localValue }
         disabled={ disabled }
@@ -130,6 +132,7 @@ export default function TextAreaEntry(props) {
     validate,
     onFocus,
     onBlur,
+    placeholder,
     autoResize,
     tooltip
   } = props;
@@ -181,6 +184,7 @@ export default function TextAreaEntry(props) {
         debounce={ debounce }
         monospace={ monospace }
         disabled={ disabled }
+        placeholder={ placeholder }
         autoResize={ autoResize }
         tooltip={ tooltip }
         element={ element } />

diff --git a/src/components/entries/TextField.js b/src/components/entries/TextField.js
@@ -26,6 +26,7 @@ function Textfield(props) {
     onInput,
     onFocus,
     onBlur,
+    placeholder,
     value = '',
     tooltip
   } = props;
@@ -70,6 +71,7 @@ function Textfield(props) {
         onInput={ handleInput }
         onFocus={ onFocus }
         onBlur={ onBlur }
+        placeholder={ placeholder }
         value={ localValue } />
     </div>
   );
@@ -103,6 +105,7 @@ export default function TextfieldEntry(props) {
     validate,
     onFocus,
     onBlur,
+    placeholder,
     tooltip
   } = props;
 
@@ -150,6 +153,7 @@ export default function TextfieldEntry(props) {
         onInput={ onInput }
         onFocus={ onFocus }
         onBlur={ onBlur }
+        placeholder={ placeholder }
         value={ value }
         tooltip={ tooltip }
         element={ element } />

diff --git a/test/spec/components/Feel.spec.js b/test/spec/components/Feel.spec.js
@@ -64,6 +64,17 @@ describe('<FeelField>', function() {
     });
 
 
+    it('should render placeholder', function() {
+
+      // given
+      const result = createFeelField({ container, placeholder: 'foo' });
+
+      // then
+      const input = domQuery('[placeholder=foo]', result.container);
+      expect(input).to.exist;
+    });
+
+
     it('should update', function() {
 
       // given
@@ -1026,6 +1037,17 @@ describe('<FeelField>', function() {
     });
 
 
+    it('should render placeholder', function() {
+
+      // given
+      const result = createFeelTextArea({ container, placeholder: 'foo' });
+
+      // then
+      const input = domQuery('[placeholder=foo]', result.container);
+      expect(input).to.exist;
+    });
+
+
     // https://github.com/bpmn-io/bpmn-js-properties-panel/issues/810
     it('should be flagged with data-gramm="false"', function() {
 
@@ -1723,6 +1745,17 @@ describe('<FeelField>', function() {
     });
 
 
+    it('should render placeholder', function() {
+
+      // given
+      const result = createFeelField({ container, placeholder: 'foo', feel: 'required' });
+
+      // then
+      const input = domQuery('[role="textbox"]', result.container);
+      expect(input.textContent).to.eql('foo');
+    });
+
+
     it('should update', function() {
 
       // given

diff --git a/test/spec/components/FeelEditor.spec.js b/test/spec/components/FeelEditor.spec.js
@@ -155,6 +155,36 @@ describe('<FeelEditor>', function() {
     expect(ariaLabel).to.exist;
   });
 
+
+  it('should set placeholder', async function() {
+
+    // given
+    const placeholder = 'foo';
+
+    // when
+    render(<Wrapper placeholder={ placeholder } />, { container });
+
+    // then
+    const editor = domQuery('[role="textbox"]', container);
+
+    expect(editor.textContent).to.eql(placeholder);
+  });
+
+
+  it('should update placeholder when changed', async function() {
+
+    // given
+    const placeholder = 'foo';
+    const component = render(<Wrapper placeholder={ placeholder } />, { container });
+
+    // when
+    component.rerender(<Wrapper placeholder="bar" />);
+
+    // then
+    const editor = domQuery('[role="textbox"]', container);
+
+    expect(editor.textContent).to.eql('bar');
+  });
 });
 
 

diff --git a/test/spec/components/TextArea.spec.js b/test/spec/components/TextArea.spec.js
@@ -77,6 +77,16 @@ describe('<TextArea>', function() {
   });
 
 
+  it('should render placeholder', function() {
+
+    // given
+    const result = createTextArea({ container, placeholder: 'test' });
+
+    // then
+    expect(domQuery('[placeholder=test]', result.container)).to.exist;
+  });
+
+
   it('should update', function() {
 
     // given

diff --git a/test/spec/components/TextField.spec.js b/test/spec/components/TextField.spec.js
@@ -52,6 +52,16 @@ describe('<TextField>', function() {
   });
 
 
+  it('should render placeholder', function() {
+
+    // given
+    const result = createTextField({ container, placeholder: 'test' });
+
+    // then
+    expect(domQuery('[placeholder=test]', result.container)).to.exist;
+  });
+
+
   it('should update', function() {
 
     // given
@@ -467,7 +477,8 @@ function createTextField(options = {}, renderFn = render) {
     container,
     eventBus = new EventBus(),
     onShow = noop,
-    errors = {}
+    errors = {},
+    ...restProps
   } = options;
 
   const errorsContext = {
@@ -493,6 +504,7 @@ function createTextField(options = {}, renderFn = render) {
         <PropertiesPanelContext.Provider value={ propertiesPanelContext }>
           <DescriptionContext.Provider value={ descriptionContext }>
             <TextField
+              { ...restProps }
               element={ element }
               id={ id }
               label={ label }