Create <InputField /> component

[honzatmn]

Description

Input field is a form input that we use when we need from users to fill some simple data.

Visual style

Zeplin: https://zpl.io/2pdrdzQ

Interaction states

When an input is hovered, border colors should use :hover version of their color. Same behavior is for the error input. Tokens should be defined for this.

When input is focused, we show a small shadow (from $boxShadowInputFocus token) and specific border color ($borderColorInputFocus). For focused error input use tokens $boxShadowInputErrorFocus and $borderColorInputErrorFocus

Hover & focus states are same for all input sizes and types.

Disabled state should change background and text color (background-color: $backgroundInputDisabled
color: $colorTextInputDisabled), hover styles should be disabled too so it doesn’t look like there is some interaction with it. However, when disabled is hovered, we should change the cursor to "not-allowed".

Additional information

• Everything inside the text field is vertically centered
• Input width is 100%
• The space between prefix and value/placeholder should be $spaceXSmall

Functional specs

• If the user fills some value into an input, the label color needs to change to a lighter shade (an exact color is defined as a token)
• The prefix should accept text or other components like icon, country flag, ...
• Width of prefix should push input value to the right (for example, you can have currency $ or CZK)
• Suffix should accept other components like action icon, service logo, country flag, …
• Help text should be defined as text with a possibility of React component, as it can have a custom action attached to part of it (for example, click on „John Doe“ will fill the value with „John Doe")

Storybook chapters

This will be specified after we know which props we have. For now, start with playground and default. It’s very possible that there will be inputs with a prefix (icon or text), suffix (action icon or service logo)

Some inspiration

https://polaris.shopify.com/components/forms/text-field#navigation
https://www.material-ui.com/#/components/text-field
http://seek-oss.github.io/seek-style-guide/textfield/

Deprecated specs

This is from old specs, it’s probable that’s it not applicable anymore. But it shouldn’t hurt to have it here.

Proposed props

Note: feel free to update it anyhow you need or like

Prop	Values	Default
Size	Small, Normal	Normal
Type	text,number,email,password	text
Name	string	empty
Label	string or boolean	empty
Value	string	empty
Placeholder	string	empty
Prefix	component	empty
Suffix	component	empty
Help text	string	empty
Error	boolean	false
Error text	string	empty
Disabled	boolean	false
Max	number	empty
Min	number	empty
MaxLength	number	empty
MinLength	number	empty

Visual design & design tokens

Note: this is not updated, please refer to Design tokens page at orbit.kiwi

For input

border-radius: $borderRadiusNormal
border: $borderStyleInput $borderWidthInput $borderColorInput;
background-color: $backgroundInput
color: $colorTextInput

for placeholder: 
color: $colorPlaceholderInput

• prefix text should have same color & size as a value in the input

For label

font-size: $fontSizeLabelForm
color: $colorLabelForm

when filled with value:
color: $colorLabelFormFilled

For message (error & help)

font-size: $fontSizeMessageForm

for error message:
color: $colorTextError
font-weight: $fontWeightNormal

for info message:
color: $colorTextInfo

For icons (front & action)

color: $colorIconInput