diff --git a/packages/form-js-viewer/src/render/components/form-fields/Button.js b/packages/form-js-viewer/src/render/components/form-fields/Button.js index 09d330a81..966c88f3c 100644 --- a/packages/form-js-viewer/src/render/components/form-fields/Button.js +++ b/packages/form-js-viewer/src/render/components/form-fields/Button.js @@ -1,4 +1,5 @@ import { formFieldClasses } from '../Util'; +import { useSingleLineTemplateEvaluation } from '../../hooks'; const type = 'button'; @@ -7,6 +8,8 @@ export function Button(props) { const { action = 'submit' } = field; + const evaluatedLabel = useSingleLineTemplateEvaluation(field.label || '', { debug: true }); + return (
); diff --git a/packages/form-js-viewer/test/spec/render/components/form-fields/Button.spec.js b/packages/form-js-viewer/test/spec/render/components/form-fields/Button.spec.js index 481f1774e..53f51c0e0 100644 --- a/packages/form-js-viewer/test/spec/render/components/form-fields/Button.spec.js +++ b/packages/form-js-viewer/test/spec/render/components/form-fields/Button.spec.js @@ -4,6 +4,8 @@ import { Button } from '../../../../../src/render/components/form-fields/Button' import { createFormContainer, expectNoViolations } from '../../../../TestHelper'; +import { MockFormContext } from '../helper'; + let container; describe('Button', function () { @@ -38,6 +40,44 @@ describe('Button', function () { expect(button.textContent).to.equal('Reset'); }); + it('should render with expression label', function () { + // when + const { container } = createButton({ + initialData: { + foo: '42 labels', + }, + field: { + ...defaultField, + label: '=foo', + }, + }); + + // then + const button = container.querySelector('button'); + + expect(button).to.exist; + expect(button.textContent).to.equal('42 labels'); + }); + + it('should render with templated label', function () { + // when + const { container } = createButton({ + initialData: { + foo: '42', + }, + field: { + ...defaultField, + label: 'My label {{foo}}', + }, + }); + + // then + const button = container.querySelector('button'); + + expect(button).to.exist; + expect(button.textContent).to.equal('My label 42'); + }); + it('should render with default type (submit)', function () { // when const { container } = createButton(); @@ -132,10 +172,18 @@ const defaultField = { type: 'button', }; -function createButton(options = {}) { - const { disabled, field = defaultField } = options; - - return render(