wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-10 22:00:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Adding Spinner Component to UI and some corrections to the docs

Browse Source
This commit is contained in:
Belen Curcio
2018-08-17 09:06:00 -03:00
parent 6e1b9c99ac
commit d1e938112e
8 changed files with 151 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/docs/forms.mdx
+9 -10
View File
@@ -10,13 +10,13 @@ Let's build some forms! We will use the following compoenents `InputLabel`, `Typ
### Examples
import { Playground, PropsTable } from 'docz'
import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} from '../core/client/ui/components'
import { InputLabel, ValidationMessage, TextField, InputDescription, Flex, Button, FormField, Typography } from '../core/client/ui/components'
# InputLabel
## Simple Form
<Playground>
<Flex>
<Flex itemGutter direction="column">
<Typography variant="heading1">Sign up to join the conversation</Typography>
<FormField>
@@ -26,14 +26,13 @@ import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} fro
<FormField>
<InputLabel>Username</InputLabel>
<Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
<InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
<TextField/>
</FormField>
<FormField>
<InputLabel>Password</InputLabel>
<Typography>Must be at least 8 characters</Typography>
<InputDescription>Must be at least 8 characters</InputDescription>
<TextField/>
</FormField>
@@ -42,14 +41,14 @@ import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} fro
<TextField/>
</FormField>
<Button variant="filled" color="primary" size="large" >Sign up and join the conversation</Button>
<Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
</Flex>
</Playground>
## Simple Form with error
<Playground>
<Flex>
<Flex itemGutter direction="column">
<Typography variant="heading1">Sign up to join the conversation</Typography>
<FormField>
@@ -59,7 +58,7 @@ import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} fro
<FormField>
<InputLabel defaultValue="something.com" color="error" >Username</InputLabel>
<Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
<InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
<TextField/>
<ValidationMessage>Invalid characters. Try again.</ValidationMessage>
</FormField>
@@ -67,7 +66,7 @@ import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} fro
<FormField>
<InputLabel>Password</InputLabel>
<Typography>Must be at least 8 characters</Typography>
<InputDescription>Must be at least 8 characters</InputDescription>
<TextField/>
</FormField>
@@ -76,6 +75,6 @@ import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} fro
<TextField/>
</FormField>
<Button variant="filled" color="primary" size="large" >Sign up and join the conversation</Button>
<Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
</Flex>
</Playground>