Input and Group refactor

[xdrdak]

The time is almost upon us for yet another set of breaking changes.

Nothing is final yet, but we sort of wanna communicate what's in store for the next major release.

So, what's up with this?

Deprecation and rework of the Group component

The infamous group component will receive a massive overhaul.

We plan on removing the component, because as it stands, Group does surprisingly too many things.

So, what's it gonna be replaced by?

InputGroup

InputGroup will be a new component that specifically designed to collapse Buttons/Inputs/Addons together.

This aims to replace the most common usage of group.

Usage will be as follows:

// Old
<Group noSpacing>
  <Button>Some Action</Button>
  <Input placeholder="some placeholder"/>
</Group>
// New
<InputGroup>
  <Button>Some Action</Button>
  <Input placeholder="some placeholder"/>
</InputGroup>

It is also worth nothing that the new InputGroup component will no longer recursively mess around with border radii and will
only affect the direct child for a given component. It will also ONLY affect the above listed components.

ListGroup

ListGroup will only take care of automatically wrapping components with a custom built <li> component
and automatically add spacing between each component.

You may toggle horizontal or vertical spacing.

// Old
<Group>
  <Button>Some Action</Button>
  <Input placeholder="some placeholder"/>
</Group>

<Group type="vertical">
  <Button>Some Action</Button>
  <Input placeholder="some placeholder"/>
</Group>

// New
<ListGroup>
  <Button>Some Action</Button>
  <Input placeholder="some placeholder"/>
</ListGroup>

<ListGroup type="vertical">
  <Button>Some Action</Button>
  <Input placeholder="some placeholder"/>
</ListGroup>

No more Z index shenanigans

Yes, Group has this super bizarre z-index magic going on.

This will be removed entirely.

We'll probably add a zIndex prop instead for all your z-index shenanigans.

FormFields is actually happening

The original issue ticket was opened on Jan 3rd 2018. We now have the technology to take care of this issue!

Joking aside, FormFields is a particularly scary change because it will involve some major overhaul of a few primitive components, namely:

• Checkbox
• Radio
• Inputs (and its type variants)

These components will have a dramatically different (see, more streamlined API) that matches their regular vanilla HTML counterparts.

To add labels, error messages and the likes to these components, we can choose to wrap them inside the FormField component.

[glambert]

This is also a good alternative for the Button component, using a render prop for the container element (HTML element like button, a or even a React element like Link):

https://blog.andrewbran.ch/polymorphic-react-components/#an-alternative-approach

---

Moving this to issue I extracted for Button simplification in #34

[glambert]

Closed by #2