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

Adding a new doc file on how to build forms :D!

Browse Source
This commit is contained in:
Belen Curcio
2018-08-02 20:15:47 -03:00
parent 0c9dd07f1f
commit 5fb23c7634
2 changed files with 54 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/ui/components/index.ts
+2
View File
@@ -7,3 +7,5 @@ export { default as Flex } from "./Flex";
export { default as MatchMedia } from "./MatchMedia";
export { default as TrapFocus } from "./TrapFocus";
export { default as ValidationMessage } from "./ValidationMessage";
export { default as InputLabel } from "./InputLabel";
export { default as TextField } from "./TextField";
src/docs/forms.mdx
+52
View File
@@ -0,0 +1,52 @@
---
name: Forms
route: '/forms'
---
# Forms
Let's build some forms! We will use the following compoenents `InputLabel`, `Typography`, `TextField`, `ValidationMessage`
### Examples
import { Playground, PropsTable } from 'docz'
import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} from '../core/client/ui/components'
# InputLabel
## Simple Form
<Playground>
<Flex itemGutter direction="column" style={{width:330}}>
<Typography variant="heading1">Sign up to join the conversation</Typography>
<InputLabel>Email Address</InputLabel>
<TextField fullWidth/>
<InputLabel>Username</InputLabel>
<Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
<TextField fullWidth/>
<InputLabel>Password</InputLabel>
<Typography>Must be at least 8 characters</Typography>
<TextField fullWidth/>
<InputLabel>Confirm Password</InputLabel>
<TextField fullWidth/>
<Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
</Flex>
</Playground>
## Simple Form with error
<Playground>
<Flex itemGutter direction="column" style={{width:330}}>
<Typography variant="heading1">Sign up to join the conversation</Typography>
<InputLabel>Email Address</InputLabel>
<TextField fullWidth />
<InputLabel>Username</InputLabel>
<Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
<TextField defaultValue="something.com" color="error" fullWidth/>
<ValidationMessage color="error" fullWidth>Invalid characters. Try again.</ValidationMessage>
<InputLabel>Password</InputLabel>
<Typography>Must be at least 8 characters</Typography>
<TextField fullWidth/>
<InputLabel>Confirm Password</InputLabel>
<TextField fullWidth/>
<Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
</Flex>
</Playground>