Updated docs

This commit is contained in:
Belen Curcio
2018-08-17 09:18:02 -03:00
parent d1e938112e
commit e1dc50a494
+35 -4
View File
@@ -10,9 +10,7 @@ Let's build some forms! We will use the following compoenents `InputLabel`, `Typ
### Examples
import { Playground, PropsTable } from 'docz'
import { InputLabel, ValidationMessage, TextField, InputDescription, Flex, Button, FormField, Typography } from '../core/client/ui/components'
# InputLabel
import { InputLabel, CallOut, ValidationMessage, TextField, InputDescription, Flex, Button, FormField, Typography } from '../core/client/ui/components'
## Simple Form
<Playground>
@@ -57,13 +55,46 @@ import { InputLabel, ValidationMessage, TextField, InputDescription, Flex, Butto
</FormField>
<FormField>
<InputLabel defaultValue="something.com" color="error" >Username</InputLabel>
<InputLabel defaultValue="something.com">Username</InputLabel>
<InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
<TextField/>
<ValidationMessage>Invalid characters. Try again.</ValidationMessage>
</FormField>
<FormField>
<InputLabel>Password</InputLabel>
<InputDescription>Must be at least 8 characters</InputDescription>
<TextField/>
</FormField>
<FormField>
<InputLabel>Confirm Password</InputLabel>
<TextField/>
</FormField>
<Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
</Flex>
</Playground>
## Simple Form with CallOut
<Playground>
<Flex itemGutter direction="column">
<Typography variant="heading1">Sign up to join the conversation</Typography>
<CallOut color="error" fullWidth>The email address or password you entered is incorrect. Try again</CallOut>
<FormField>
<InputLabel>Email Address</InputLabel>
<TextField/>
</FormField>
<FormField>
<InputLabel defaultValue="something.com">Username</InputLabel>
<InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
<TextField/>
</FormField>
<FormField>
<InputLabel>Password</InputLabel>
<InputDescription>Must be at least 8 characters</InputDescription>