enhancement
major
minor
major
minor
minor
#29663
TL Views: a <form> no longer insets itself; a <fields> grid inside a form got the page inset twice
Problem
In a page-spanning <form> laid out as #29615 suggests — a <fields> grid for a header area above a <columns> layout of cards — the fields of the header area are indented 24 px further than the cards below them (TL Development app, ticket page, snapshot build 42, 1600x900). The page reads as two misaligned blocks.
Cause
FieldsElement.createControl renders its grid as a ReactFormLayoutControl, i.e. as a .tlFormLayout, and .tlFormLayout carries padding: var(--page-inset) ("a form owns its breathing room"). Nested in the form's own .tlFormLayout the inset is applied twice: once by the form, once by the grid. The form drops its inset only in the --flush (sole table) and --fill (hosts a filling region) variants; the cards of the columns (.tlPanel--card) bring their own reduced inset, so their edges and the header grid's edges disagree.
The form grid was the only layout of the view layer padding itself; the spacing model otherwise says: containers never pad, breathing room is explicit (<inset>).
Lösung
- A form grid (<form>, <fields>, and every control based on ReactFormLayoutControl, e.g. <config-form>, <config-editor>) is a plain layout and no longer pads itself. A <fields> grid nested in a form therefore lines up with the rest of the form's content.
- <form> and <fields> take the new option with-inset="true": the grid is then wrapped in an inset exactly like an <inset> element around it (page inset; inside a card panel the card's reduced inset). Default is false. (The name inset is not possible: it would clash with the <inset> content element.)
- The special cases that only existed to take the self-padding back are removed: the --flush variant with its sole-table / bare-panel heuristic (the bare panel state is gone) and the padding reset of the --fill variant. A form whose sole content is a frameless editable table fills its container through the fill contract instead (the frameless table panel sets fill), so the table still scrolls internally.
- Forms built in Java (I18N editor dialog, table column filter dialog incl. scripted filters) wrap their form body in an inset.
- All engine and demo views (.view.xml) were migrated: forms/grids directly in a panel body, tab, dialog, split pane or detail area get with-inset="true"; <config-form>/`<config-editor>` are wrapped in <inset>; forms around a sole editable table, forms spanning areas and grids inside an inset form stay without inset.
- Demo (tl-demo-react): Demos → "Page form with cards" shows a page form with a field header above columns of card panels; header fields and card borders share one left edge.
Migration
Forms in application views lose their automatic distance to the container border. Wherever a <form> or <fields> sits directly against a border (panel body, tab, dialog, split pane, detail area), add with-inset="true":
{{{#!xml <form input="obj" with-inset="true">
<field attribute="name"/>
</form> }}}
Elements without this option (<config-form>, <config-editor>) are wrapped in <inset>. Do not add the option where the form already sits inside an <inset>, is nested inside an inset form, or where its sole content is an editable table that should fill the area. Java code creating a ReactFormLayoutControl (e.g. via ReactFormBuilder) for a dialog body wraps it in a ReactInsetControl.