Add Box, Flex, and Stack

[alanbsmith]

🚀 Feature Proposal

We should add spacing / layout components to canvas-kit. We can start with the following:

• Box - a low-level primitive component
• Flex - a low-level layout component for building layouts with Flexbox
• Stack / HStack / VStack - higher-level abstractions for building layouts with Flexbox

Motivation

This is an important part of developing a component hierarchy that will enable us to make canvas-kit more flexible and extensible.

Other links:

• More reading on Box
• More reading on Flex

Example

Here's a proof of concept for Box, Flex, and Stack

[mathalete]

Hi @alanbsmith I get the truncation is an example - but note that the overflow:ellipsis pattern that uses the title attribute isn't accessible to touch, dictation or keyboard users.

I do think a primitive for headings would be helpful as reusable components will appear in different contexts, at different levels in the document heading structure. It should therefore be allowed to change the heading level of the component’s main heading via a level primitive / prop.

The aria-level property can be used to change the perceived level for AT (assistive tech).

Note that aria-level only works on heading elements (<h1> — <h6>) or elements with role="heading".

It is recommended the default prop value is 2, since most components will start at that level.

This would obviously be used as a workaround when heading levels are proving challenging to refactor.

<!-- component code -->
<h2 aria-level="{this.props.level}"></h2>

<!-- instance -->
<MyComponent level="3" />

<!-- how a screen reader perceives the MyComponent heading -->
<h3>Component name / main component heading text</h3>

[alanbsmith]

Thanks for the feedback, @mathalete! I made this issue as a quick note, but we should talk about it more. 😀 There are a lot of situations where truncation is being used (or will potentially be used), and I’d like to have a11y guarantees and guidelines all in one spot. That’ll make it easier for everyone to get it right on the first pass.