[Layout] Allowing outer layout properties on elements

[yurm04]

TL;DR

Should we add a display prop to some of our components so that they can set their outer layout?

Context

HTML elements have two display types: inner and outer. Inner display types set the layout of an element's children (ex. grid and flex). Our new foundational layout components seem to mostly deal with setting the component's children (ex. Inline, Grid, Tiles)

Outer display types set the layout of the element itself (ex. inline and block). Right now, we're not able to set the outer display type of our components. There are also precomposed display types that set the inner and outer properties together display: inline-flex. You can also use the syntax display: inline flex, but this is not well supported in all browsers just yet.

So, the question is: do we think we'll need or want to be able to set an element's outer display type directly?

Prototype

I prototyped allowing a display property on the Box components to set the display CSS property on this branch. I copied a list of all display values, but if we want to allow this prop then I think we can narrow this down only to the outer display types. This will mean that users will still need to use the new Layout components in most cases.

Something more like this:

export type Display =
  | 'block'
  | 'inline'
  | 'inline-block'
  | 'inline-flex'
  | 'inline-grid'

Background

I stumbled on this question while trying to rebuild the Tag components using our new layout components. The Tag components can render a few different ways: as a <span> with nested a or span children and an optional inline button child. Or it can return a button.

The Tag is currently styled using display: inline-flex, which sets both the outer and inner display type for the rendered element. Trying to recreate this solution using the Inline and Box components and span isn't working because we can't set the height of an inline element.

span rendered from Box

button rendered inside span

This led me down the rabbit hole of of inner and outer display types described above.

[aveline]

Some initial thoughts, perhaps we are missing a layout primitive that would handle this?

By adding display to Box, do we turn it into a component also used for layout? Currently my understanding is that Box is meant to be a low level way to access design tokens and design opinions.

[kyledurand]

Currently my understand is that Box is meant to be a low level way to access design tokens and design opinions.

I like this description of what Box is meant to be. I'm not sure we're missing a primitive but perhaps these could be props to on our layout components vs on Box itself. I could see Inline taking a prop that turns it into an inline-flex container, same with columns and inline-grid.

I'd like to make sure we have a definitive use case for adding this kind of feature to these components before going ahead with this though