Optimize Text Input

[wueestd]

https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components?node-id=7775%3A33876&t=zTAKJLbklgpXEsSf-1

[wueestd]

UX Tasks:

• [x] validation state
• [x] do we need a extra small variant?

[gfellerph]

Placeholders There is no placeholder in the floating label implementation when the focus is on the field

Design:

Mismatching height variants	Height	Design	Implementation
72px	✔	✔
54.4px	❌	✔
48px	✔	❌
46.4px	❌	✔
35.5px	❌	✔

I suggest sticking with the design.

Error message We should discuss moving the exclamation mark to the message.

Changes described in #807.

[gfellerph]

Dev:

• [ ] Show placeholder when label is floated and input is empty

[wueestd]

ready for second review @gfellerph https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components?node-id=7775%3A33876&t=zTAKJLbklgpXEsSf-1

[gfellerph]

I created a dev ticket and updated the figma status for this component to done.

[wueestd]

• [x] Sufix adaption in figma

[gfellerph]

• [x] create tickets for suffix/postfix

[gfellerph]

@wueestd would you like to visualize cases for prefix and suffix on the right? While it is implemented, it would maybe be good for overview when somebody visits the component page and can see all the different variants of this component.

[gfellerph]

• [ ] Suffix fixen
• [ ] Creates examples with prefix, suffix and both

[wueestd]

@gfellerph does this help? https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components?node-id=10627%3A52548&t=oHGE1KDZe20h8aqg-1

[gfellerph]

Created dev tasks and update component tracker board.