feat: Add horizontal and vertical alignment options to Row

[VincentSmedinga]

Rows can now align their items horizontally and vertically.

This is useful for:

• right-aligning a single item, e.g. <Row align="end"><Avatar /></Row>
• a link at the far end of a heading, e.g. <Row align="between"><Heading /><Link /></Row>
• ‘between’ can also be used for ‘previous’ and ‘next‘ buttons if we want them like that
• vertically aligning differently sized texts: <Row alignVertical="baseline"><Heading /><Paragraph /></Row>

After merging, I’ll do the same for Column.

This touches on an important API choice: Row has alignment and vertical alignment, Column has alignment and horizontal alignment. For both, the regular alignment works in their main direction. Physical directions is conceptually easier to understand than separating ‘justification’ and ‘alignment’ as the flexbox spec does. For CSS, that is the better API. For our DSL, horizontal and vertical is. We translate between them for the best of both worlds.

Horizontal alignment uses ‘start’ and ‘end’ as labels for the extremes; vertical uses ‘top’ and ‘bottom’. Again, these words are easy to guess (as soon as people are used to use ‘start’ instead of ‘left’, that is).

[RubenSibon]

I'm not sure that I agree with the rational to differ from how CSS handles alignment versus justification. Why not use justify instead of align if that is what web developers already are used to? And why not educate the users to think in terms of start and end for the "vertical" axis and locale agnostic directionality as Aram suggested?

[VincentSmedinga]

I'm not sure that I agree with the rational to differ from how CSS handles alignment versus justification. Why not use justify instead of align if that is what web developers already are used to? And why not educate the users to think in terms of start and end for the "vertical" axis and locale agnostic directionality as Aram suggested?

I understand. See my replies to those comments. I want to be inclusive for designers and other roles in digital product development. Design systems are multidisciplinary. We as front-end devs are the ones structuring the design for everyonw, but the names we choose are not just for ourselves but the entire team. We feedback our iteration on modeling and naming to designers in order to reach common understanding. Development will always have some “oh that’s too technical, I don’t understand and don’t want to try” about it, and most things we do are best left behind our curtains, but I believe the shared concepts in the design should be easily shared, through common language.

[dlnr]

The rest seems fine. I do wonder how we would deal with elements that use align-self, but if they do they are not added by us.