Skip to content

Commit 5312212

Browse files
mperrottimperrotti
committed
addresses PR feedback
1 parent ad742b0 commit 5312212

File tree

1 file changed

+61
-60
lines changed

1 file changed

+61
-60
lines changed

‎docs/content/FormControl.mdx‎

Lines changed: 61 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,65 @@ import {MarkGithubIcon} from '@primer/octicons-react'
3232
</FormControl>
3333
```
3434

35+
### With complex inputs
36+
37+
```javascript live noinline
38+
const DifferentInputs = () => {
39+
const [tokens, setTokens] = React.useState([
40+
{text: 'zero', id: 0},
41+
{text: 'one', id: 1},
42+
{text: 'two', id: 2}
43+
])
44+
const onTokenRemove = tokenId => {
45+
setTokens(tokens.filter(token => token.id !== tokenId))
46+
}
47+
48+
return (
49+
<Box display="grid" gridGap={3}>
50+
<FormControl>
51+
<FormControl.Label>TextInputWithTokens</FormControl.Label>
52+
<TextInputWithTokens onTokenRemove={onTokenRemove} tokens={tokens} />
53+
</FormControl>
54+
<FormControl>
55+
<FormControl.Label>Autocomplete</FormControl.Label>
56+
<Autocomplete>
57+
<Autocomplete.Input block />
58+
<Autocomplete.Overlay>
59+
<Autocomplete.Menu
60+
items={[
61+
{text: 'css', id: 0},
62+
{text: 'css-in-js', id: 1},
63+
{text: 'styled-system', id: 2},
64+
{text: 'javascript', id: 3},
65+
{text: 'typescript', id: 4},
66+
{text: 'react', id: 5},
67+
{text: 'design-systems', id: 6}
68+
]}
69+
selectedItemIds={[]}
70+
/>
71+
</Autocomplete.Overlay>
72+
</Autocomplete>
73+
</FormControl>
74+
<FormControl>
75+
<FormControl.Label>Select</FormControl.Label>
76+
<Select>
77+
<Select.Option value="figma">Figma</Select.Option>
78+
<Select.Option value="css">Primer CSS</Select.Option>
79+
<Select.Option value="prc">Primer React components</Select.Option>
80+
<Select.Option value="pvc">Primer ViewComponents</Select.Option>
81+
</Select>
82+
</FormControl>
83+
<FormControl>
84+
<FormControl.Label>Textarea</FormControl.Label>
85+
<Textarea />
86+
</FormControl>
87+
</Box>
88+
)
89+
}
90+
91+
render(DifferentInputs)
92+
```
93+
3594
### With a custom input
3695

3796
<Note variant="warning">
@@ -42,7 +101,7 @@ When rendering an input other than a form component from Primer, you must manual
42101
- `FormControl.Label` should be associated with the text input by using `htmlFor`
43102
- If there is a caption, the input should be associated with the caption by passing the message's ID to `aria-describedby`
44103
- If there is a validation message, the input should be associated with the message by passing the message's ID to `aria-describedby`
45-
- If there is both a caption and a validation message, the input should be associated with the message by passing the both the validation message's ID and the caption's ID to `aria-describedby`
104+
- If there is both a caption and a validation message, the input should be associated with the message by passing the both the validation message's ID and the caption's ID to `aria-describedby`. Example: `aria-describedby="caption-id validation-id"`
46105
- If the input's value is invalid, `aria-invalid={true}` should be passed to the input.
47106
- If the input is disabled, `disabled` should be passed.
48107
- If the input is required, `required` should be passed.
@@ -78,6 +137,7 @@ const FormControlWithCustomInput = () => {
78137
id="custom-input"
79138
aria-describedby="custom-input-caption custom-input-validation"
80139
aria-invalid={validationResult === 'noSpaces'}
140+
onChange={handleInputChange}
81141
/>
82142
{validationResult === 'noSpaces' && (
83143
<FormControl.Validation id="custom-input-validation" variant="error">
@@ -114,65 +174,6 @@ const FormControlWithCustomInput = () => {
114174
render(FormControlWithCustomInput)
115175
```
116176

117-
### With complex inputs
118-
119-
```javascript live noinline
120-
const DifferentInputs = () => {
121-
const [tokens, setTokens] = React.useState([
122-
{text: 'zero', id: 0},
123-
{text: 'one', id: 1},
124-
{text: 'two', id: 2}
125-
])
126-
const onTokenRemove = tokenId => {
127-
setTokens(tokens.filter(token => token.id !== tokenId))
128-
}
129-
130-
return (
131-
<Box display="grid" gridGap={3}>
132-
<FormControl>
133-
<FormControl.Label>TextInputWithTokens</FormControl.Label>
134-
<TextInputWithTokens onTokenRemove={onTokenRemove} tokens={tokens} />
135-
</FormControl>
136-
<FormControl>
137-
<FormControl.Label>Autocomplete</FormControl.Label>
138-
<Autocomplete>
139-
<Autocomplete.Input block />
140-
<Autocomplete.Overlay>
141-
<Autocomplete.Menu
142-
items={[
143-
{text: 'css', id: 0},
144-
{text: 'css-in-js', id: 1},
145-
{text: 'styled-system', id: 2},
146-
{text: 'javascript', id: 3},
147-
{text: 'typescript', id: 4},
148-
{text: 'react', id: 5},
149-
{text: 'design-systems', id: 6}
150-
]}
151-
selectedItemIds={[]}
152-
/>
153-
</Autocomplete.Overlay>
154-
</Autocomplete>
155-
</FormControl>
156-
<FormControl>
157-
<FormControl.Label>Select</FormControl.Label>
158-
<Select>
159-
<Select.Option value="figma">Figma</Select.Option>
160-
<Select.Option value="css">Primer CSS</Select.Option>
161-
<Select.Option value="prc">Primer React components</Select.Option>
162-
<Select.Option value="pvc">Primer ViewComponents</Select.Option>
163-
</Select>
164-
</FormControl>
165-
<FormControl>
166-
<FormControl.Label>Textarea</FormControl.Label>
167-
<Textarea />
168-
</FormControl>
169-
</Box>
170-
)
171-
}
172-
173-
render(DifferentInputs)
174-
```
175-
176177
### With checkbox and radio inputs
177178

178179
```jsx live

0 commit comments

Comments
 (0)