[form-layout] Item label should not define a top margin

[heruan]

Labels of form items set a margin-top: var(--lumo-space-m) on themselves. Items should not care about that, since they don't know what might be around them. I understand this is intended to create a gap between items, but then the first item in the form will have a useless top margin.

In my opinion, the layout element should care about spacing its own items, not the items themselves.

[cdir]

I absolutely agree that the components should not bring an extra spacing. However, with Vaadin 14 and 22 I see a padding-top instead of margin-top at the moment.

:host([has-label]) {
    padding-top: var(--lumo-space-m);
}

Or do we talk about another margin?

It is a problem especially if you want to combine components with and without label in one layout. If the layout sets its own gap (which I prefer) the components with label have too much space, without gap the components without label stick to the one above.

[jouni]

Or do we talk about another margin?

No, it’s the same thing. It was initially margin-top, but changed to padding-top in some version, because that worked more consistently with all the nested components structures we have.

And I agree. I want us to remove the internal spacing from field components and buttons.

[cdir]

I think it would be best if the padding could be set by its own variable. The default could stay at --lumo-space-m.

--padding-top-has-label: var(--lumo-space-m);
:host([has-label]) {
    padding-top: var(--padding-top-has-label);
}

So it would remain compatible for existing products and we would have a simple and predefined way to remove the padding.

For a major release I could also imagine setting the default to 0 to make it easier for future developers to get started.