vaadin/flow-and-components-documentation

Document VerticalLayout and HorizontalLayout

mvysny opened this issue · 2 comments

mvysny commented

There is no dedicated chapter to the layouting topics in the "Framework" tab. Try searching for VerticalLayout at https://vaadin.com/docs/v14 - nothing relevant is found.

The new layouting page should answer the following questions:

it would be good to have documented exactly and precisely what is it that V14 VerticalLayout brings and CSS flexbox doesn't have. I can see support for margins, padding, spacing; I can see ":before" and other elements that look like hacks on top of CSS flexbox, and I do not understand the purpose. (edited)

Is V14 VL a pure CSS flexbox? No: there's FlexLayout. Is it slot-based? No. Then what is it? When should I use it? Why were those hacks necessary? Why should I not use FlexLayout always? What is it that V14 VL adds on top of CSS flexbox? It's not "it just adds Java API" since there are those ":before" things.

How does it differ to Vaadin 8 VL/HL (no slots, CSS flexbox - explain thoroughly)?

VL/HL and FlexLayout are all flexbox-based layouts. I completely agree that it's confusing to have both VL, HL and FlexLayout and I would actually be curious to hear from others why that happened.
They are all pure flexbox layouts, with the addition of spacing support in HL & VL, which flexbox does not have, and which pure css-based layout systems implement in exactly the same way as HL & VL do. It's kind of hacky, but it's what the standard gives us at the moment.

mvysny commented

Explain why it's good to have VL/HL in the first place:

Back in the days, Vaadin only had an OrderedLayout class with a separate configuration parameter to choose between vertical and horizontal mode, leading to quite some boilerplate. 12 years ago, that class was split up into the VerticalLayout and HorizontalLayout classes that many of us have grown up with.
When doing Vaadin 10, we wanted to carry over the spirit of those two classes even though it wasn't practical to replicate the exact behaviour of the old implementations. At the same time, it seemed to make sense to also have a low-level component that would be true to raw flexbox rather than the slightly more opinionated VL and HL components, and this is FlexLayout. The idea is thus to have VL and HL as high-level components for general use, and then FL as a low-level thing that you can fall back to if want to get closer to the metal.