Slot-based horizontal alignment in HorizontalLayout

[rolfsmeds]

Description

An intuitive model for horizontally aligning elements in a HorizontalLayout, based on separate slots for left, center and right aligned elements.

Acceptance criteria

• API should use writing-direction-agnostic names for RTL support: start, center, end
• Implemented as two new slots (in addition to the current one): center and end
• Flow API:
  • HorizontalAlignment with values START, CENTER, END
  • add(HorizontalAlignment alignment, Component... components)
  • Omitting the alignment parameter uses the default (start) slot
  • setHorizontalAlignment(HorizontalAlignment alignment, Component... components)
  • Component indexes should follow start -> center -> end order, so that index-based APIs work intuitively
  • JustifyContentMode doesn't work together with center and end slots. This needs to be mentioned in the javadoc.
  • getComponentCount() etc will return total component count regardless of alignment slots.
• WC & React API is based on setting slot attribute on elements

Examples

HorizontalLayout hl = new HorizontalLayout();
hl.add(HorizontalAlignment.CENTER, new Span("C1"), new Span("C2");
hl.add(HorizontalAlignment.START, new Span("S1"), new Span("S2");
hl.add(HorizontalAlignment.END, new Span("E1"), new Span("E2");

equivalent to

<vaadin-horizontal-layout>
  <span slot="center">C1</span>
  <span slot="center">C2</span>
  <span>S1</span>
  <span>S2</span>
  <span slot="end">E1</span>
  <span slot="end">E2</span>
</vaadin-horizontal-layout>

The above will render as
[S1 S2 C1 C2 E1 E2]

hl.getIndexAt(3) => C2 (note that this is despite C2 being added before S1 and S2)

hl.addComponentAtIndex(3, C3) =>
[S1 S2 C1 C2 C3 E1 E2]

General criteria

• APIs reviewed

• Design

• Performance

• UX/DX tests in Alpha

• Documentation:

• How to test?

• Limitations:

Security

• Security implications have been taken into account (elaborate or link to product security requirement specification if there are implications)