Skip to content

Commit

Permalink
Update FormControl examples and docs to use the TextInput component
Browse files Browse the repository at this point in the history
  • Loading branch information
@maurobender
maurobender committed Sep 27, 2022
1 parent d307ca5 commit 999f6aa
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 79 deletions.
23 changes: 11 additions & 12 deletions docs/docs/components/form_control.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { FormControl, HStack } from '@amalgama/react-native-ui-kit';
import TextInput from '@site/src/components/TextInput';
import { FormControl, HStack, TextInput } from '@amalgama/react-native-ui-kit';
import CodePreview from '@site/src/components/CodePreview';

# FormControl
Expand All @@ -13,7 +12,7 @@ The `FormControl` component is used to wrap form inputs (suchs as `TextInput`, `
isRequired
hint="Remember to enter a valid email address"
>
<TextInput placeholder="Email address" />
<TextInput placeholder="Email address" width="300px" />
</FormControl>
</CodePreview>

Expand All @@ -24,7 +23,7 @@ The `FormControl` component is used to wrap form inputs (suchs as `TextInput`, `
isRequired
hint="Remember to enter a valid email address"
>
<TextInput placeholder="Email address" />
<TextInput placeholder="Email address" width="300px" />
</FormControl>
```

Expand All @@ -42,15 +41,15 @@ The label text to show above the input component.
<FormControl
label="Email"
>
<TextInput placeholder="Email address" />
<TextInput placeholder="Email address" width="300px" />
</FormControl>
</CodePreview>

```jsx
<FormControl
label="Email"
>
<TextInput placeholder="Email address" />
<TextInput placeholder="Email address" width="300px" />
</FormControl>
```

Expand All @@ -67,7 +66,7 @@ Shows an indicator for required input.
label="Email"
isRequired
>
<TextInput placeholder="Email address" />
<TextInput placeholder="Email address" width="300px" />
</FormControl>
</CodePreview>

Expand All @@ -76,7 +75,7 @@ Shows an indicator for required input.
label="Email"
isRequired
>
<TextInput placeholder="Email address" />
<TextInput placeholder="Email address" width="300px" />
</FormControl>
```

Expand All @@ -98,7 +97,7 @@ Shows a hint text below the input.
isRequired
hint="Remember to enter a valid email address"
>
<TextInput placeholder="Email address" />
<TextInput placeholder="Email address" width="300px" />
</FormControl>
</CodePreview>

Expand All @@ -108,7 +107,7 @@ Shows a hint text below the input.
isRequired
hint="Remember to enter a valid email address"
>
<TextInput placeholder="Email address" />
<TextInput placeholder="Email address" width="300px" />
</FormControl>
```

Expand All @@ -130,7 +129,7 @@ Shows an error text below the input.
isRequired
error="The email address is not valid"
>
<TextInput placeholder="Email address" />
<TextInput placeholder="Email address" width="300px" />
</FormControl>
</CodePreview>

Expand All @@ -140,7 +139,7 @@ Shows an error text below the input.
isRequired
error="The email address is not valid"
>
<TextInput placeholder="Email address" />
<TextInput placeholder="Email address" width="300px" />
</FormControl>
```

Expand Down
12 changes: 0 additions & 12 deletions docs/src/components/TextInput/index.tsx
View file

This file was deleted.

35 changes: 9 additions & 26 deletions example/src/components/FormControlExamples.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import * as React from 'react';

import { StyleSheet, TextInput, View } from 'react-native';
import { VStack, FormControl, Text } from '@amalgama/react-native-ui-kit';
import { StyleSheet, View } from 'react-native';
import {
VStack, FormControl, TextInput, Text
} from '@amalgama/react-native-ui-kit';

const styles = StyleSheet.create( {
container: {
Expand All @@ -17,12 +19,6 @@ const styles = StyleSheet.create( {
marginTop: 2,
marginBottom: 6,
backgroundColor: 'black'
},
textInput: {
height: 30,
width: '100%',
borderBottomWidth: 1,
borderBottomColor: '#888'
}
} );

Expand All @@ -37,9 +33,7 @@ const FormControlExamples = () => (
label="Email"
isRequired
>
<TextInput
style={styles.textInput}
placeholder="Enter your email address"
<TextInput placeholder="Enter your email address"
/>
</FormControl>

Expand All @@ -51,10 +45,7 @@ const FormControlExamples = () => (
<FormControl
label="Email"
>
<TextInput
style={styles.textInput}
placeholder="Enter your email address"
/>
<TextInput placeholder="Enter your email address" />
</FormControl>

<View style={styles.vspace} />
Expand All @@ -67,9 +58,7 @@ const FormControlExamples = () => (
hint="Remember to enter a valid email address"
isRequired
>
<TextInput
style={styles.textInput}
placeholder="Enter your email address"
<TextInput placeholder="Enter your email address"
/>
</FormControl>

Expand All @@ -81,10 +70,7 @@ const FormControlExamples = () => (
<FormControl
hint="Remember to enter a valid email address"
>
<TextInput
style={styles.textInput}
placeholder="Enter your email address"
/>
<TextInput placeholder="Enter your email address" />
</FormControl>

<View style={styles.vspace} />
Expand All @@ -97,10 +83,7 @@ const FormControlExamples = () => (
error="The email is not valid!"
isRequired
>
<TextInput
style={styles.textInput}
placeholder="Enter your email address"
/>
<TextInput placeholder="Enter your email address" />
</FormControl>

<View style={styles.vspace} />
Expand Down
73 changes: 44 additions & 29 deletions web_example/src/components/FormControlExamples.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import * as React from 'react';

import { StyleSheet, TextInput, View } from 'react-native';
import { VStack, FormControl, Text } from '@amalgama/react-native-ui-kit';
import { StyleSheet, View } from 'react-native';
import {
VStack, FormControl, TextInput, Text,
Checkbox, Radio
} from '@amalgama/react-native-ui-kit';

const styles = StyleSheet.create( {
container: {
Expand All @@ -17,12 +20,6 @@ const styles = StyleSheet.create( {
marginTop: 2,
marginBottom: 6,
backgroundColor: 'black'
},
textInput: {
height: 30,
width: '100%',
borderBottomWidth: 1,
borderBottomColor: '#888'
}
} );

Expand All @@ -37,10 +34,7 @@ const FormControlExamples = () => (
label="Email"
isRequired
>
<TextInput
style={styles.textInput}
placeholder="Enter your email address"
/>
<TextInput placeholder="Enter your email address" />
</FormControl>

<View style={styles.vspace} />
Expand All @@ -51,10 +45,7 @@ const FormControlExamples = () => (
<FormControl
label="Email"
>
<TextInput
style={styles.textInput}
placeholder="Enter your email address"
/>
<TextInput placeholder="Enter your email address" />
</FormControl>

<View style={styles.vspace} />
Expand All @@ -67,10 +58,7 @@ const FormControlExamples = () => (
hint="Remember to enter a valid email address"
isRequired
>
<TextInput
style={styles.textInput}
placeholder="Enter your email address"
/>
<TextInput placeholder="Enter your email address" />
</FormControl>

<View style={styles.vspace} />
Expand All @@ -81,14 +69,10 @@ const FormControlExamples = () => (
<FormControl
hint="Remember to enter a valid email address"
>
<TextInput
style={styles.textInput}
placeholder="Enter your email address"
/>
<TextInput placeholder="Enter your email address" />
</FormControl>

<View style={styles.vspace} />

<Text variant="sh1" color="primary.800">With error</Text>
<View style={styles.separator} />

Expand All @@ -97,10 +81,41 @@ const FormControlExamples = () => (
error="The email is not valid!"
isRequired
>
<TextInput
style={styles.textInput}
placeholder="Enter your email address"
/>
<TextInput placeholder="Enter your email address" />
</FormControl>

<View style={styles.vspace} />
<Text variant="sh1" color="primary.800">With Checkboxes</Text>
<View style={styles.separator} />

<FormControl
label="What are your favorite languages?"
error="You have to select at least one!"
isRequired
>
<Checkbox.Group>
<Checkbox label="Javascript" value="js" />
<Checkbox label="Typescript" value="ts" />
<Checkbox label="Ruby" value="rb" />
<Checkbox label="Python" value="py" />
</Checkbox.Group>
</FormControl>

<View style={styles.vspace} />
<Text variant="sh1" color="primary.800">With Radios</Text>
<View style={styles.separator} />

<FormControl
label="What is your favorite language?"
error="You have to select one!"
isRequired
>
<Radio.Group>
<Radio label="Javascript" value="js" />
<Radio label="Typescript" value="ts" />
<Radio label="Ruby" value="rb" />
<Radio label="Python" value="py" />
</Radio.Group>
</FormControl>

<View style={styles.vspace} />
Expand Down

0 comments on commit 999f6aa

Please sign in to comment.