Additional helpers to cds-layout

[astorije]

This comes from a conversation with @ashleyryan.

At CloudHealth we use Clarity Core, and try to use the default components/styles/Clarity utils as much as we can. One aspect of it is we try to very strictly stick to cds-layout. There are 2 things we have not been able to do with cds-layout and were hoping Clarity could add (or update) helpers for these:

• Vertical centering: While align:vertical-center and align:vertical-stretch help in that regard, there is no way to tell an element to take the height of its container. It feels as though align:vertical-stretch should do just that but in practice we need to add style={{ height: '100%' }} in most cases

• Stretching a container: align:vertical-stretch stretches children of a given container as well, instead of only the container. So in cases where we needed to do so (for example to only stretch one child), we have to use style={{ flexGrow: '1' }} instead of cds-layout.

• Another helpful addition would be a way to make a container scrollable using cds-layout. I appreciate how cds-text="body truncate" helps not having to remember the proper set of CSS declarations needed to make truncation work, and I would love an equivalent helper for scrollable content.

@ashleyryan as we discussed, feel free to add info, edit my post, or ask for clarification if needed!