Line height on Input component is not set correctly

[morgoe]

Type: minor

Describe the bug The Input.lineHeight setting that applies to all input components is not being set on the actual <input> but rather on the wrapping div, which has no effect.

To Reproduce Steps to reproduce the behavior:

1. Change Input.lineHeight to something like '24px'
2. Find a text field (any textfield)
3. Inspect element and see that the line-height: 24px CSS is being applied to the div and not to the input element.

Expected behavior The line-height attribute should be applied to the actual <input> element.

Screenshots

If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Mac
• Browser: Chrome
• Version: 70

Additional context The reason this is a problem is because with the default font Source Sans Pro, the line-height of the input gets automatically set to 20px. But when I change the font to Roboto, the line-height gets automatically set to 18px. And because this is less than the height of the icon, the input field flickers and changes height when an icon appears.

[morgoe]

This looks to be happening on the TextInput component but not on the Phone Number component. Not sure about others.

[HarisSpahija]

This should be easy to fix, could you elaborate if any other components have the same issue?