Slot-based horizontal alignment in HorizontalLayout

[rolfsmeds]

trafficstars

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

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