[Layout] Divider component

[aveline]

Should we consider adding a Divider component that would be built with Box?

• Right now we have a grouping of design opinions for borders in the form of border tokens. These tokens were ported over as is from our previous tokens and need some clean up, like the naming convention.
• At a system level, does it make sense to group design opinions in the form of tokens, or should groups of design opinions live in a component, like Divider?
• Creating a Divider component would allow for better html semantics by using the <hr /> element with Box
• If we create a Divider component, perhaps we can remove the shorthand border prop on Box which would simplify some limitations around border color defaults?

Related: App kit Divider discussion

[aveline]

@heyjoethomas I know you are thinking about token structure and names so curious about your thoughts

[heyjoethomas]

I think supporting both make the most sense.

I can absolutely see the need for a Divider component that could have a very limited prop set to maybe set color and orientation.

However, the only overlap between using Divider and a border is when someone is setting a border on a single side so don't think we could remove the border prop from Box. So I don't think the addition of Divider would change the need for border anywhere else in the system.

[aveline]

To clarify, I mean only removing the shorthand border prop that currently uses the shorthand border tokens which group border width, color and style together. One could still set border on box but would have to set width, color and style individually.

[laurkim]

I think support hr on Box and creating a Divider component would be a solid approach. I think allowing users to set border width/color/style individually also allows for more flexibility to our Box component, especially as we continue to have discussions about the naming conventions of our tokens overall.