[RFC] Using "fitted" for spacing concerns

[levithomason]

This RFC was raised in regard to the Icon's xSpacing prop, see #22.

Proposals

1. Use start and end for all APIs that have left/right needs.
2. Borrow the concept of fitted from Semantic UI React.

Reasoning

start/end

1. There is CSS precedence to consider. before/after are used exclusively in CSS pseudo elements where additional content is inject before/after some existing content. Start/end are used in many CSS properties (alignments, grids, flexbox, etc) to specify a physical location of an element.

2. The <Layout /> currently uses start and end terminology to avoid the RTL issue with left and right names. Introducing before/after would introduce conflicting terms for the same ideas. We should normalize the naming. This would make our API more consistent and more predictable.

3. The terms start/end can be applied to more cases than before/after.

fitted

1. We want to strive to use natural language in our APIs. This allows them to have room for flexibility, while leaving implementation out. It also makes the API more portable between developers, designers, and management. It is closer to the way we talk about UIs, making it easier to use and internalize.

2. The prop fitted loosely describes the appearance or format of a component. This leaves us free to adjust any CSS values necessary for the component to appear fitted. Fitted might mean different things in the context of different components. An icon does not achieve "fitted" in the same way a menu item would.

Precedence

This concept is used in many SUIR components. It has useful precedence and vetting there. It sometimes affects padding, sometimes margin, sometimes it is applied to one side, or to both sides of an axis. The important thing is that there is only one high-level natural language term required, "fitted", to support all of these cases.

A few examples:

Icon

Menu

Vertical Menu

Divider