feat: add layout improvements behind feature flag

[sissbruecker]

Adds the following improvements to vaadin-horizontal-layout and vaadin-vertical-layout:

• When using setFullWidth, setFullHeight or setFullSize on a layout child, users typically expect those to take up the remaining space in the layout, rather than the full size of the layout. In that case automatically apply flex: 1 to allow them to grow and shrink as necessary.
• Nested layouts that are supposed to take up the remaining space may not shrink because the size of their contents is larger than the remaining space in the layout. So specifically for other layout components, also apply min-width: 0 to allow them to shrink below the size of their contents.

The improvements are behind a feature flag as they may alter existing layouts, so for now we allow users to try them out.

Part of vaadin/flow-components#6998

[sissbruecker]

The initial plan was to have a style rule apply to all children, and set flex to the value of a custom CSS property which would have some default value. HasSize.setFullWidth and others would then have set the custom property to 1.

However, applying the rule to all children resulted in overwriting defaults that a component might have defined in their shadow root styles (e.g. grid, virtual list). So we went with this approach, which also makes the solution a bit less cluttered as it doesn't require changes in Flow.

[vursen]

Would it be less intrusive to override setFullWidth to set flex: 1 instead? I'm concerned that this behavior may not add much value for web component developers and could instead cause confusion, as it makes width behave differently depending on where it's defined.

(My concern is based on the assumption that this feature will become the default in the future)

[sissbruecker]

We want to scope this change to children of the horizontal and vertical layout components. I'm not sure how we would accomplish this with setFullWidth, apart from the CSS custom property solution that we discarded?

[sissbruecker]

We decided to change the approach to target users using HasSize specifically. As such, we don't target styles like width: 100% / height: 100% anymore. Instead, HasSize will add data attributes to the element that the layout components can target for applying additional styles. I've updated the PR accordingly.

[sissbruecker]

Similarly, changing the min size on all children is not desirable. For example, for grid we explicitly added a min-height in the shadow root styles, which should not be overridden by the layout. Other components have an explicit min size as well. As the problem with children not being able to shrink due to their content mostly involves nested layouts we chose to limit this to these two components for now.

[vursen]

Would it be less intrusive to override setFullWidth to set flex: 1 instead? I'm concerned that this behavior may not add much value for web component developers and could instead cause confusion, as it makes width behave differently depending on where it's defined.

(My concern is based on the assumption that this feature will become the default in the future)

[sonarqubecloud]

Quality Gate passed

Issues
4 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud