Textarea, Text Input, Number Input, Select - Remove Old Padding

[larserbach]

We initially thought we would need to provide a padding token to prevent text overlapping in input fields.
This issue was reproducible by typing a long text in the input field that has input icon, the text and the icon would overlap.

Initially this was fixed by introducing the following token value:

This didn't fix the issue when we would, for example, have two icons inside the input field. We found a new approach which results in not needing this extra token anymore, by applying styles to the input field wrapper, instead on input field element directly.

We must refactor:

• Textarea
• Textinput
• Number input
• Select (also Design)

[larserbach]

Design is fixed with this PR: #329

[thrbnhrtmnn]

We looked at this issue in todays Merge-/Review-Session.

It seems, that the padding is currently applied differently than in the design. In the design we have padding inside the input. In the code it seems like the textfield has padding applied outside of the text "area".

Difference between design and code is, that in HTML we can not place an icon inside an input. Therefor we had to build a workarround.

It seems like the element that is called "Input field" in Design, should actually be a wrapper in HTML. Inside this wrapper, we have a input field (named "Placeholder" in design) and next to it we have the Icon.

After having a closer look, the tokens are currently applied to the input, but they should be applied to the wrapper. Also the icons should be part of the same wrapper as the input.

[thrbnhrtmnn]

We looked at the component in tuesdays merge/review session. Today it was merged so we moved it to done.