[TextField]: add a compact property that reduce height

[MichaelMure]

• PR has tests / docs demo, and is linted.
• Commit and PR titles begin with [ComponentName], and are in imperative form: "[Component] Fix leaky abstraction".
• Description explains the issue / use-case resolved, and auto-closes the related issue(s) (http://tr.im/vFqem).

This PR add a compact option to the TextField to optionally reduce the height. Does that make sense ?

Disclaimer:

[oliviertassinari]

Hey, thanks for that PR. I think that we know have enough feedback to change the height behaviour of the TextField introduced in #6566 by @kybarg. I don't think that we should expose a compact option, at first, I thought it was referring to the dense modifier of the specification. Also, I don't think that we need a new demo component. That's creating noise.

What do you about the following?

• We use a consistent top and bottom spacing between the floating text and non-floating text mode.
• We remove the bottom margin of 8px right under the ink bar.
• We remove the top margin
• We add an optional margin boolean property false by default to add 8px margin-bottom and 16px margin-top a bit like the polymer element:

cc @jgoux, @MichaelMure as you raised that issue too.

[jgoux]

I'm all for this change. 👍

I'm not even sure if adding a margin property is required.
I think this concern should be in a parent component, or maybe defining these margins in a "form" object in the theme so users can use "standard" values.

[MichaelMure]

If you don't mind, I'll watch and learn.

[oliviertassinari]

@MichaelMure Sounds good.

I'm closing for #7113.