Spacing size API

[rolfsmeds]

Describe your motivation

Vaadin layouts only provide boolean on/off API for item spacing, but you often need to specify different spacing sizes, for which there is no API.

The Lumo styles for Horizontal and VerticalLayout do actually implement 5 theme variants for different spacing sizes, but there is no Flow API for them.

Describe the solution you'd like

Instead of simply providing a LayoutVariant API, we can be more flexible and provide a full-fledged sizing API for spacing:

• Introduce new setter overloads:

  • setSpacing(String)
  • setSpacing(float, Unit)
  • setSpacing(Spacing.XL)
    • Spacing enum can be in ThemableLayout or a new HasSpacing interface (if we want to use it in other components)
    • Each item in Spacing will map to a custom property set as the spacing value, so e.g. setSpacing(Spacing.XL) will be an alias for setSpacing("var(--vaadin-spacing-xl")
    • These custom properties will (for now) be defined in the HorizontalLayout and VerticalLayout WCs' raw (non-Lumo) stylesheets, with rem-based default values.
    • Lumo and Material can in their own stylesheets define their own values for them.

• Each new setter will simply set the provided value to the gap property using inline styles.

  • Open question: should they also set the spacing theme attrib?
    • If they do, should the size-setters set a custom property that's used internally, instead of setting the gap property directly?

• The existing setSpacing(boolean) setter will remain as-is, i.e. it will set the spacing theme attribute, which is implemented in the raw WC stylesheets to use the medium spacing size.

  • If both boolean and size-overload are used, the size provided will override the one set with the theme attribute.
  • setSpacing(false) removes the inline gap and/or spacing theme attrib.

• The existing spacing-s..spacing-xl theme attributes will be refactored to use the new custom properties. They will not be used by the Flow API in any way, but remain as client-side convenience APIs.

• Introduce new getter:

  • String getSpacing()
    • This means that the enums will return e.g. "var(--lumo-spacing-xl)"

Describe alternatives you've considered

No response

Additional context

• Similar APIs could be provided for margin and padding as well.
• Similar APIs could be provided for other container components as well.

[rolfsmeds]

Open questions:

• Is a custom css property the best approach for setting the gap size? Should it be a component property instead?