feat: allow passing custom element to field options

[sissbruecker]

#1876 added a number of common properties to the field options, however for a lot of other customizations you still need to implement a custom renderer function. To make customizations a bit easier this adds a new element prop to the field options that allows passing a pre-rendered React element. The element is then automatically bound to the form and other field option props are added to it.

This is easier to use than the renderer as you don't need to figure out the function signature and it results in simpler code. For most use-cases this should be able to replace the renderer function.

The downside is that there would be two options doing similar things, and that you need to make sure you pass an element of a field that actually works with the property type. Maybe renderer could accept both an element or a function, but I felt a second prop would make sense here.

Some examples follow.

Render a TextArea instead of a TextField

<AutoForm
  fieldOptions={{
    description: {
      element: <TextArea />
    }
  }}
/>

Show a clear button

<AutoForm
  fieldOptions={{
    firstName: {
      element: <TextField clearButtonVisible />
    }
  }}
/>

Show a prefix

<AutoForm
  fieldOptions={{
    amount: {
      element: <NumberField><span slot="prefix">€</slot></NumberField>
    }
  }}
/>

Fixes #1732

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (b7cd8a9) 95.26% compared to head (87bd4bc) 95.27%.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1880   +/-   ##
=======================================
  Coverage   95.26%   95.27%           
=======================================
  Files          52       52           
  Lines        3445     3449    +4     
  Branches      501      503    +2     
=======================================
+ Hits         3282     3286    +4     
  Misses        136      136           
  Partials       27       27           

Flag	Coverage Δ
unittests	95.27% <100.00%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[krissvaa]

I would add a test where both renderer and element properties are present to verify that only the renderer is shown.
Otherwise LGTM

[krissvaa]

Why are you not using populatePersonForm function?

Suggested change

	const result = await FormController.init(
	user,
	render(
	<AutoForm
	service={personService()}
	model={PersonModel}
	disabled
	fieldOptions={{
	lastName: {
	renderer: ({ field }) => <TextArea key={field.name} {...field} />,
	},
	}}
	/>,
	).container,
	);
	const result = await populatePersonForm(
	1,
	{ lastName: { renderer: ({ field }) => <TextArea key={field.name} {...field} /> } },
	undefined,
	true,
	);

[sissbruecker]

Thanks, updated the tests and added one for checking that the renderer is used over the element.

[taefi]

Based on the internal discussion over the usage of cloneElement, LGTM.

[sonarcloud]

Quality Gate failed

Failed conditions

15.9% Duplication on New Code (required ≤ 3%)

See analysis details on SonarCloud

[vaadin-bot]

This ticket/PR has been released with Hilla 24.4.0.alpha1 and is also targeting the upcoming stable 24.4.0 version.