@patternfly/react-core 4.223.2 → 4.223.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/esm/components/Form/FormGroup.d.ts +4 -2
- package/dist/esm/components/Form/FormGroup.d.ts.map +1 -1
- package/dist/esm/components/Form/FormGroup.js +4 -3
- package/dist/esm/components/Form/FormGroup.js.map +1 -1
- package/dist/js/components/Form/FormGroup.d.ts +4 -2
- package/dist/js/components/Form/FormGroup.d.ts.map +1 -1
- package/dist/js/components/Form/FormGroup.js +4 -3
- package/dist/js/components/Form/FormGroup.js.map +1 -1
- package/dist/umd/react-core.js +3 -3
- package/dist/umd/react-core.min.js +1 -1
- package/package.json +6 -6
- package/src/components/Form/FormGroup.tsx +40 -29
- package/src/components/Form/examples/Form.md +12 -1271
- package/src/components/Form/examples/FormBasic.tsx +122 -0
- package/src/components/Form/examples/FormFieldGroups.tsx +324 -0
- package/src/components/Form/examples/FormGrid.tsx +66 -0
- package/src/components/Form/examples/FormGroupLabelInfo.tsx +72 -0
- package/src/components/Form/examples/FormHorizontal.tsx +118 -0
- package/src/components/Form/examples/FormHorizontalHelper.tsx +23 -0
- package/src/components/Form/examples/FormHorizontalStacked.tsx +11 -0
- package/src/components/Form/examples/FormInvalid.tsx +47 -0
- package/src/components/Form/examples/FormInvalidWithFormAlert.tsx +52 -0
- package/src/components/Form/examples/FormLimitWidth.tsx +122 -0
- package/src/components/Form/examples/FormSections.tsx +44 -0
- package/src/components/Form/examples/FormValidated.tsx +60 -0
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Form, FormGroup, TextInput, Checkbox, Popover, ActionGroup, Button, Radio } from '@patternfly/react-core';
|
|
3
|
+
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
|
|
4
|
+
|
|
5
|
+
export const FormBasic: React.FunctionComponent = () => {
|
|
6
|
+
const [name, setName] = React.useState('');
|
|
7
|
+
const [email, setEmail] = React.useState('');
|
|
8
|
+
const [phone, setPhone] = React.useState('');
|
|
9
|
+
|
|
10
|
+
const handleNameChange = (name: string) => {
|
|
11
|
+
setName(name);
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
const handleEmailChange = (email: string) => {
|
|
15
|
+
setEmail(email);
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
const handlePhoneChange = (phone: string) => {
|
|
19
|
+
setPhone(phone);
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
return (
|
|
23
|
+
<Form>
|
|
24
|
+
<FormGroup
|
|
25
|
+
label="Full name"
|
|
26
|
+
labelIcon={
|
|
27
|
+
<Popover
|
|
28
|
+
headerContent={
|
|
29
|
+
<div>
|
|
30
|
+
The{' '}
|
|
31
|
+
<a href="https://schema.org/name" target="_blank" rel="noreferrer">
|
|
32
|
+
name
|
|
33
|
+
</a>{' '}
|
|
34
|
+
of a{' '}
|
|
35
|
+
<a href="https://schema.org/Person" target="_blank" rel="noreferrer">
|
|
36
|
+
Person
|
|
37
|
+
</a>
|
|
38
|
+
</div>
|
|
39
|
+
}
|
|
40
|
+
bodyContent={
|
|
41
|
+
<div>
|
|
42
|
+
Often composed of{' '}
|
|
43
|
+
<a href="https://schema.org/givenName" target="_blank" rel="noreferrer">
|
|
44
|
+
givenName
|
|
45
|
+
</a>{' '}
|
|
46
|
+
and{' '}
|
|
47
|
+
<a href="https://schema.org/familyName" target="_blank" rel="noreferrer">
|
|
48
|
+
familyName
|
|
49
|
+
</a>
|
|
50
|
+
.
|
|
51
|
+
</div>
|
|
52
|
+
}
|
|
53
|
+
>
|
|
54
|
+
<button
|
|
55
|
+
type="button"
|
|
56
|
+
aria-label="More info for name field"
|
|
57
|
+
onClick={e => e.preventDefault()}
|
|
58
|
+
aria-describedby="simple-form-name-01"
|
|
59
|
+
className="pf-c-form__group-label-help"
|
|
60
|
+
>
|
|
61
|
+
<HelpIcon noVerticalAlign />
|
|
62
|
+
</button>
|
|
63
|
+
</Popover>
|
|
64
|
+
}
|
|
65
|
+
isRequired
|
|
66
|
+
fieldId="simple-form-name-01"
|
|
67
|
+
helperText="Include your middle name if you have one."
|
|
68
|
+
>
|
|
69
|
+
<TextInput
|
|
70
|
+
isRequired
|
|
71
|
+
type="text"
|
|
72
|
+
id="simple-form-name-01"
|
|
73
|
+
name="simple-form-name-01"
|
|
74
|
+
aria-describedby="simple-form-name-01-helper"
|
|
75
|
+
value={name}
|
|
76
|
+
onChange={handleNameChange}
|
|
77
|
+
/>
|
|
78
|
+
</FormGroup>
|
|
79
|
+
<FormGroup label="Email" isRequired fieldId="simple-form-email-01">
|
|
80
|
+
<TextInput
|
|
81
|
+
isRequired
|
|
82
|
+
type="email"
|
|
83
|
+
id="simple-form-email-01"
|
|
84
|
+
name="simple-form-email-01"
|
|
85
|
+
value={email}
|
|
86
|
+
onChange={handleEmailChange}
|
|
87
|
+
/>
|
|
88
|
+
</FormGroup>
|
|
89
|
+
<FormGroup label="Phone number" isRequired fieldId="simple-form-phone-01">
|
|
90
|
+
<TextInput
|
|
91
|
+
isRequired
|
|
92
|
+
type="tel"
|
|
93
|
+
id="simple-form-phone-01"
|
|
94
|
+
name="simple-form-phone-01"
|
|
95
|
+
placeholder="555-555-5555"
|
|
96
|
+
value={phone}
|
|
97
|
+
onChange={handlePhoneChange}
|
|
98
|
+
/>
|
|
99
|
+
</FormGroup>
|
|
100
|
+
<FormGroup role="group" isInline fieldId="basic-form-checkbox-group" label="How can we contact you?">
|
|
101
|
+
<Checkbox label="Email" aria-label="Email" id="inlinecheck01" />
|
|
102
|
+
<Checkbox label="Phone" aria-label="Phone" id="inlinecheck02" />
|
|
103
|
+
<Checkbox label="Mail" aria-label="Mail" id="inlinecheck03" />
|
|
104
|
+
</FormGroup>
|
|
105
|
+
<FormGroup role="radiogroup" isInline fieldId="basic-form-radio-group" label="Time zone">
|
|
106
|
+
<Radio name="basic-inline-radio" label="Eastern" id="basic-inline-radio-01" />
|
|
107
|
+
<Radio name="basic-inline-radio" label="Central" id="basic-inline-radio-02" />
|
|
108
|
+
<Radio name="basic-inline-radio" label="Pacific" id="basic-inline-radio-03" />
|
|
109
|
+
</FormGroup>
|
|
110
|
+
<FormGroup label="Additional note" fieldId="simple-form-note-01">
|
|
111
|
+
<TextInput isDisabled type="text" id="simple-form-note-01" name="simple-form-number" value="disabled" />
|
|
112
|
+
</FormGroup>
|
|
113
|
+
<FormGroup fieldId="checkbox01">
|
|
114
|
+
<Checkbox label="I'd like updates via email." id="checkbox01" name="checkbox01" aria-label="Update via email" />
|
|
115
|
+
</FormGroup>
|
|
116
|
+
<ActionGroup>
|
|
117
|
+
<Button variant="primary">Submit</Button>
|
|
118
|
+
<Button variant="link">Cancel</Button>
|
|
119
|
+
</ActionGroup>
|
|
120
|
+
</Form>
|
|
121
|
+
);
|
|
122
|
+
};
|
|
@@ -0,0 +1,324 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Form,
|
|
4
|
+
FormGroup,
|
|
5
|
+
FormFieldGroup,
|
|
6
|
+
FormFieldGroupExpandable,
|
|
7
|
+
FormFieldGroupHeader,
|
|
8
|
+
TextInput,
|
|
9
|
+
Button
|
|
10
|
+
} from '@patternfly/react-core';
|
|
11
|
+
import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
|
|
12
|
+
|
|
13
|
+
export const FormFieldGroups: React.FunctionComponent = () => {
|
|
14
|
+
const initialValues = {
|
|
15
|
+
'0-label1': '',
|
|
16
|
+
'0-label2': '',
|
|
17
|
+
'1-expanded-group1-label1': '',
|
|
18
|
+
'1-expanded-group1-label2': '',
|
|
19
|
+
'1-expanded-group2-label1': '',
|
|
20
|
+
'1-expanded-group2-label2': '',
|
|
21
|
+
'1-expanded-group3-label1': '',
|
|
22
|
+
'1-expanded-group3-label2': '',
|
|
23
|
+
'1-group1-label1': '',
|
|
24
|
+
'1-group1-label2': '',
|
|
25
|
+
'2-label1': '',
|
|
26
|
+
'2-label2': '',
|
|
27
|
+
'3-label1': '',
|
|
28
|
+
'3-label2': '',
|
|
29
|
+
'3-nonexpand-group1-label1': '',
|
|
30
|
+
'3-nonexpand-group1-label2': '',
|
|
31
|
+
'3-nonexpand-group2-label1': '',
|
|
32
|
+
'3-nonexpand-group2-label2': '',
|
|
33
|
+
'4-nonexpand-label1': '',
|
|
34
|
+
'4-nonexpand-label2': '',
|
|
35
|
+
'0-label3': '',
|
|
36
|
+
'0-label4': ''
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
const [inputValues, setInputValues] = React.useState(initialValues);
|
|
40
|
+
|
|
41
|
+
const handleChange = (value: string, event: React.FormEvent<HTMLInputElement>) => {
|
|
42
|
+
const { name } = event.currentTarget;
|
|
43
|
+
setInputValues({ ...inputValues, [name]: value });
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
return (
|
|
47
|
+
<Form>
|
|
48
|
+
<FormGroup label="Label 1" isRequired fieldId="0-label1">
|
|
49
|
+
<TextInput isRequired id="0-label1" name="0-label1" value={inputValues['0-label1']} onChange={handleChange} />
|
|
50
|
+
</FormGroup>
|
|
51
|
+
<FormGroup label="Label 2" isRequired fieldId="0-label2">
|
|
52
|
+
<TextInput isRequired id="0-label2" name="0-label2" value={inputValues['0-label2']} onChange={handleChange} />
|
|
53
|
+
</FormGroup>
|
|
54
|
+
<FormFieldGroupExpandable
|
|
55
|
+
isExpanded
|
|
56
|
+
toggleAriaLabel="Details"
|
|
57
|
+
header={
|
|
58
|
+
<FormFieldGroupHeader
|
|
59
|
+
titleText={{ text: 'Field group 1', id: 'field-group1-titleText-id' }}
|
|
60
|
+
titleDescription="Field group 1 description text."
|
|
61
|
+
actions={
|
|
62
|
+
<>
|
|
63
|
+
<Button variant="link">Delete all</Button> <Button variant="secondary">Add parameter</Button>
|
|
64
|
+
</>
|
|
65
|
+
}
|
|
66
|
+
/>
|
|
67
|
+
}
|
|
68
|
+
>
|
|
69
|
+
<FormFieldGroupExpandable
|
|
70
|
+
isExpanded
|
|
71
|
+
toggleAriaLabel="Details"
|
|
72
|
+
header={
|
|
73
|
+
<FormFieldGroupHeader
|
|
74
|
+
titleText={{ text: 'Nested field group 1', id: 'nested-field-group1-titleText-id' }}
|
|
75
|
+
titleDescription="Nested field group 1 description text."
|
|
76
|
+
actions={
|
|
77
|
+
<Button variant="plain" aria-label="Remove">
|
|
78
|
+
<TrashIcon />
|
|
79
|
+
</Button>
|
|
80
|
+
}
|
|
81
|
+
/>
|
|
82
|
+
}
|
|
83
|
+
>
|
|
84
|
+
<FormGroup label="Label 1" isRequired fieldId="1-expanded-group1-label1">
|
|
85
|
+
<TextInput
|
|
86
|
+
isRequired
|
|
87
|
+
id="1-expanded-group1-label1"
|
|
88
|
+
name="1-expanded-group1-label1"
|
|
89
|
+
value={inputValues['1-expanded-group1-label1']}
|
|
90
|
+
onChange={handleChange}
|
|
91
|
+
/>
|
|
92
|
+
</FormGroup>
|
|
93
|
+
<FormGroup label="Label 2" isRequired fieldId="1-expanded-group1-label2">
|
|
94
|
+
<TextInput
|
|
95
|
+
isRequired
|
|
96
|
+
id="1-expanded-group1-label2"
|
|
97
|
+
name="1-expanded-group1-label2"
|
|
98
|
+
value={inputValues['1-expanded-group1-label2']}
|
|
99
|
+
onChange={handleChange}
|
|
100
|
+
/>
|
|
101
|
+
</FormGroup>
|
|
102
|
+
</FormFieldGroupExpandable>
|
|
103
|
+
<FormFieldGroupExpandable
|
|
104
|
+
toggleAriaLabel="Details"
|
|
105
|
+
header={
|
|
106
|
+
<FormFieldGroupHeader
|
|
107
|
+
titleText={{ text: 'Nested field group 2', id: 'nested-field-group2-titleText-id' }}
|
|
108
|
+
actions={
|
|
109
|
+
<Button variant="plain" aria-label="Remove">
|
|
110
|
+
<TrashIcon />
|
|
111
|
+
</Button>
|
|
112
|
+
}
|
|
113
|
+
/>
|
|
114
|
+
}
|
|
115
|
+
>
|
|
116
|
+
<FormGroup label="Label 1" isRequired fieldId="1-expanded-group2-label1">
|
|
117
|
+
<TextInput
|
|
118
|
+
isRequired
|
|
119
|
+
id="1-expanded-group2-label1"
|
|
120
|
+
name="1-expanded-group2-label1"
|
|
121
|
+
value={inputValues['1-expanded-group2-label1']}
|
|
122
|
+
onChange={handleChange}
|
|
123
|
+
/>
|
|
124
|
+
</FormGroup>
|
|
125
|
+
<FormGroup label="Label 2" isRequired fieldId="1-expanded-group2-label2">
|
|
126
|
+
<TextInput
|
|
127
|
+
isRequired
|
|
128
|
+
id="1-expanded-group2-label2"
|
|
129
|
+
name="1-expanded-group2-label2"
|
|
130
|
+
value={inputValues['1-expanded-group2-label2']}
|
|
131
|
+
onChange={handleChange}
|
|
132
|
+
/>
|
|
133
|
+
</FormGroup>
|
|
134
|
+
</FormFieldGroupExpandable>
|
|
135
|
+
<FormFieldGroupExpandable
|
|
136
|
+
toggleAriaLabel="Details"
|
|
137
|
+
header={
|
|
138
|
+
<FormFieldGroupHeader
|
|
139
|
+
titleText={{ text: 'Nested field group 3', id: 'nested-field-group3-titleText-id' }}
|
|
140
|
+
titleDescription="Field group 3 description text."
|
|
141
|
+
actions={
|
|
142
|
+
<Button variant="plain" aria-label="Remove">
|
|
143
|
+
<TrashIcon />
|
|
144
|
+
</Button>
|
|
145
|
+
}
|
|
146
|
+
/>
|
|
147
|
+
}
|
|
148
|
+
>
|
|
149
|
+
<FormGroup label="Label 1" isRequired fieldId="1-expanded-group3-label1">
|
|
150
|
+
<TextInput
|
|
151
|
+
isRequired
|
|
152
|
+
id="1-expanded-group3-label1"
|
|
153
|
+
name="1-expanded-group3-label1"
|
|
154
|
+
value={inputValues['1-expanded-group3-label1']}
|
|
155
|
+
onChange={handleChange}
|
|
156
|
+
/>
|
|
157
|
+
</FormGroup>
|
|
158
|
+
<FormGroup label="Label 2" isRequired fieldId="1-expanded-group3-label2">
|
|
159
|
+
<TextInput
|
|
160
|
+
isRequired
|
|
161
|
+
id="1-expanded-group3-label2"
|
|
162
|
+
name="1-expanded-group3-label2"
|
|
163
|
+
value={inputValues['1-expanded-group3-label2']}
|
|
164
|
+
onChange={handleChange}
|
|
165
|
+
/>
|
|
166
|
+
</FormGroup>
|
|
167
|
+
</FormFieldGroupExpandable>
|
|
168
|
+
<FormGroup label="Label 1" isRequired fieldId="1-group1-label1">
|
|
169
|
+
<TextInput
|
|
170
|
+
isRequired
|
|
171
|
+
id="1-group1-label1"
|
|
172
|
+
name="1-group1-label1"
|
|
173
|
+
value={inputValues['1-group1-label1']}
|
|
174
|
+
onChange={handleChange}
|
|
175
|
+
/>
|
|
176
|
+
</FormGroup>
|
|
177
|
+
<FormGroup label="Label 2" isRequired fieldId="1-group1-label2">
|
|
178
|
+
<TextInput
|
|
179
|
+
isRequired
|
|
180
|
+
id="1-group1-label2"
|
|
181
|
+
name="1-group1-label2"
|
|
182
|
+
value={inputValues['1-group1-label2']}
|
|
183
|
+
onChange={handleChange}
|
|
184
|
+
/>
|
|
185
|
+
</FormGroup>
|
|
186
|
+
</FormFieldGroupExpandable>
|
|
187
|
+
<FormFieldGroupExpandable
|
|
188
|
+
toggleAriaLabel="Details"
|
|
189
|
+
header={
|
|
190
|
+
<FormFieldGroupHeader
|
|
191
|
+
titleText={{ text: 'Field group 2', id: 'field-group2-titleText-id' }}
|
|
192
|
+
titleDescription="Field group 2 description text."
|
|
193
|
+
actions={
|
|
194
|
+
<>
|
|
195
|
+
<Button variant="link">Delete all</Button> <Button variant="secondary">Add parameter</Button>
|
|
196
|
+
</>
|
|
197
|
+
}
|
|
198
|
+
/>
|
|
199
|
+
}
|
|
200
|
+
>
|
|
201
|
+
<FormGroup label="Label 1" isRequired fieldId="2-label1">
|
|
202
|
+
<TextInput isRequired id="2-label1" name="2-label1" value={inputValues['2-label1']} onChange={handleChange} />
|
|
203
|
+
</FormGroup>
|
|
204
|
+
<FormGroup label="Label 2" isRequired fieldId="2-label2">
|
|
205
|
+
<TextInput isRequired id="2-label2" name="2-label2" value={inputValues['2-label2']} onChange={handleChange} />
|
|
206
|
+
</FormGroup>
|
|
207
|
+
</FormFieldGroupExpandable>
|
|
208
|
+
<FormFieldGroupExpandable
|
|
209
|
+
isExpanded
|
|
210
|
+
toggleAriaLabel="Details"
|
|
211
|
+
header={
|
|
212
|
+
<FormFieldGroupHeader
|
|
213
|
+
titleText={{ text: 'Field group 3', id: 'field-group3-titleText-id' }}
|
|
214
|
+
titleDescription="Field group 3 description text."
|
|
215
|
+
/>
|
|
216
|
+
}
|
|
217
|
+
>
|
|
218
|
+
<FormGroup label="Label 1" isRequired fieldId="3-label1">
|
|
219
|
+
<TextInput isRequired id="3-label1" name="3-label1" value={inputValues['3-label1']} onChange={handleChange} />
|
|
220
|
+
</FormGroup>
|
|
221
|
+
<FormGroup label="Label 2" isRequired fieldId="3-label2">
|
|
222
|
+
<TextInput isRequired id="3-label2" name="3-label2" value={inputValues['3-label2']} onChange={handleChange} />
|
|
223
|
+
</FormGroup>
|
|
224
|
+
<FormFieldGroup
|
|
225
|
+
header={
|
|
226
|
+
<FormFieldGroupHeader
|
|
227
|
+
titleText={{
|
|
228
|
+
text: 'Nested field group 1 (non-expandable)',
|
|
229
|
+
id: 'nested-field-group1-non-expandable-titleText-id'
|
|
230
|
+
}}
|
|
231
|
+
/>
|
|
232
|
+
}
|
|
233
|
+
>
|
|
234
|
+
<FormGroup label="Label 1" isRequired fieldId="3-nonexpand-group1-label1">
|
|
235
|
+
<TextInput
|
|
236
|
+
isRequired
|
|
237
|
+
id="3-nonexpand-group1-label1"
|
|
238
|
+
name="3-nonexpand-group1-label1"
|
|
239
|
+
value={inputValues['3-nonexpand-group1-label1']}
|
|
240
|
+
onChange={handleChange}
|
|
241
|
+
/>
|
|
242
|
+
</FormGroup>
|
|
243
|
+
<FormGroup label="Label 2" isRequired fieldId="3-nonexpand-group1-label2">
|
|
244
|
+
<TextInput
|
|
245
|
+
isRequired
|
|
246
|
+
id="3-nonexpand-group1-label2"
|
|
247
|
+
name="3-nonexpand-group1-label2"
|
|
248
|
+
value={inputValues['3-nonexpand-group1-label2']}
|
|
249
|
+
onChange={handleChange}
|
|
250
|
+
/>
|
|
251
|
+
</FormGroup>
|
|
252
|
+
</FormFieldGroup>
|
|
253
|
+
<FormFieldGroup
|
|
254
|
+
header={
|
|
255
|
+
<FormFieldGroupHeader
|
|
256
|
+
titleText={{
|
|
257
|
+
text: 'Nested field group 2 (non-expandable)',
|
|
258
|
+
id: 'nested-field-group2-non-expandable-titleText-id'
|
|
259
|
+
}}
|
|
260
|
+
titleDescription="Field group 2 description text."
|
|
261
|
+
/>
|
|
262
|
+
}
|
|
263
|
+
>
|
|
264
|
+
<FormGroup label="Label 1" isRequired fieldId="3-nonexpand-group2-label1">
|
|
265
|
+
<TextInput
|
|
266
|
+
isRequired
|
|
267
|
+
id="3-nonexpand-group2-label1"
|
|
268
|
+
name="3-nonexpand-group2-label1"
|
|
269
|
+
value={inputValues['3-nonexpand-group2-label1']}
|
|
270
|
+
onChange={handleChange}
|
|
271
|
+
/>
|
|
272
|
+
</FormGroup>
|
|
273
|
+
<FormGroup label="Label 2" isRequired fieldId="3-nonexpand-group2-label2">
|
|
274
|
+
<TextInput
|
|
275
|
+
isRequired
|
|
276
|
+
id="3-nonexpand-group2-label2"
|
|
277
|
+
name="3-nonexpand-group2-label2"
|
|
278
|
+
value={inputValues['3-nonexpand-group2-label2']}
|
|
279
|
+
onChange={handleChange}
|
|
280
|
+
/>
|
|
281
|
+
</FormGroup>
|
|
282
|
+
</FormFieldGroup>
|
|
283
|
+
</FormFieldGroupExpandable>
|
|
284
|
+
<FormFieldGroup
|
|
285
|
+
header={
|
|
286
|
+
<FormFieldGroupHeader
|
|
287
|
+
titleText={{ text: 'Field group 4 (non-expandable)', id: 'field-group4-non-expandable-titleText-id' }}
|
|
288
|
+
titleDescription="Field group 4 description text."
|
|
289
|
+
actions={
|
|
290
|
+
<>
|
|
291
|
+
<Button variant="link">Delete all</Button> <Button variant="secondary">Add parameter</Button>
|
|
292
|
+
</>
|
|
293
|
+
}
|
|
294
|
+
/>
|
|
295
|
+
}
|
|
296
|
+
>
|
|
297
|
+
<FormGroup label="Label 1" isRequired fieldId="4-nonexpand-label1">
|
|
298
|
+
<TextInput
|
|
299
|
+
isRequired
|
|
300
|
+
id="4-nonexpand-label1"
|
|
301
|
+
name="4-nonexpand-label1"
|
|
302
|
+
value={inputValues['4-nonexpand-label1']}
|
|
303
|
+
onChange={handleChange}
|
|
304
|
+
/>
|
|
305
|
+
</FormGroup>
|
|
306
|
+
<FormGroup label="Label 2" isRequired fieldId="4-nonexpand-label2">
|
|
307
|
+
<TextInput
|
|
308
|
+
isRequired
|
|
309
|
+
id="4-nonexpand-label2"
|
|
310
|
+
name="4-nonexpand-label2"
|
|
311
|
+
value={inputValues['4-nonexpand-label2']}
|
|
312
|
+
onChange={handleChange}
|
|
313
|
+
/>
|
|
314
|
+
</FormGroup>
|
|
315
|
+
</FormFieldGroup>
|
|
316
|
+
<FormGroup label="Label 3" isRequired fieldId="0-label3">
|
|
317
|
+
<TextInput isRequired id="0-label3" name="0-label3" value={inputValues['0-label3']} onChange={handleChange} />
|
|
318
|
+
</FormGroup>
|
|
319
|
+
<FormGroup label="Label 4" isRequired fieldId="0-label4">
|
|
320
|
+
<TextInput isRequired id="0-label4" name="0-label4" value={inputValues['0-label4']} onChange={handleChange} />
|
|
321
|
+
</FormGroup>
|
|
322
|
+
</Form>
|
|
323
|
+
);
|
|
324
|
+
};
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Form, FormGroup, TextInput, Grid, GridItem } from '@patternfly/react-core';
|
|
3
|
+
|
|
4
|
+
export const FormGrid: React.FunctionComponent = () => {
|
|
5
|
+
const [name, setName] = React.useState('');
|
|
6
|
+
const [email, setEmail] = React.useState('');
|
|
7
|
+
const [phone, setPhone] = React.useState('');
|
|
8
|
+
|
|
9
|
+
const handleNameChange = (name: string) => {
|
|
10
|
+
setName(name);
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
const handleEmailChange = (email: string) => {
|
|
14
|
+
setEmail(email);
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
const handlePhoneChange = (phone: string) => {
|
|
18
|
+
setPhone(phone);
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
return (
|
|
22
|
+
<Form>
|
|
23
|
+
<Grid hasGutter md={6}>
|
|
24
|
+
<GridItem span={12}>
|
|
25
|
+
<FormGroup
|
|
26
|
+
label="Full name"
|
|
27
|
+
isRequired
|
|
28
|
+
fieldId="grid-form-name-01"
|
|
29
|
+
helperText="Include your middle name if you have one."
|
|
30
|
+
>
|
|
31
|
+
<TextInput
|
|
32
|
+
isRequired
|
|
33
|
+
type="text"
|
|
34
|
+
id="grid-form-name-01"
|
|
35
|
+
name="grid-form-name-01"
|
|
36
|
+
aria-describedby="grid-form-name-01-helper"
|
|
37
|
+
value={name}
|
|
38
|
+
onChange={handleNameChange}
|
|
39
|
+
/>
|
|
40
|
+
</FormGroup>
|
|
41
|
+
</GridItem>
|
|
42
|
+
<FormGroup label="Email" isRequired fieldId="grid-form-email-01">
|
|
43
|
+
<TextInput
|
|
44
|
+
isRequired
|
|
45
|
+
type="email"
|
|
46
|
+
id="grid-form-email-01"
|
|
47
|
+
name="grid-form-email-01"
|
|
48
|
+
value={email}
|
|
49
|
+
onChange={handleEmailChange}
|
|
50
|
+
/>
|
|
51
|
+
</FormGroup>
|
|
52
|
+
<FormGroup label="Phone number" isRequired fieldId="grid-form-number-01">
|
|
53
|
+
<TextInput
|
|
54
|
+
isRequired
|
|
55
|
+
type="tel"
|
|
56
|
+
id="grid-form-number-01"
|
|
57
|
+
placeholder="555-555-5555"
|
|
58
|
+
name="grid-form-number-01"
|
|
59
|
+
value={phone}
|
|
60
|
+
onChange={handlePhoneChange}
|
|
61
|
+
/>
|
|
62
|
+
</FormGroup>
|
|
63
|
+
</Grid>
|
|
64
|
+
</Form>
|
|
65
|
+
);
|
|
66
|
+
};
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Form, FormGroup, TextInput, Popover } from '@patternfly/react-core';
|
|
3
|
+
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
|
|
4
|
+
|
|
5
|
+
export const FormGroupLabelInfo: React.FunctionComponent = () => {
|
|
6
|
+
const [name, setName] = React.useState('');
|
|
7
|
+
|
|
8
|
+
const handleNameChange = (name: string, _event: React.FormEvent<HTMLInputElement>) => {
|
|
9
|
+
setName(name);
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
return (
|
|
13
|
+
<Form>
|
|
14
|
+
<FormGroup
|
|
15
|
+
label="Full name"
|
|
16
|
+
labelInfo="Additional label info"
|
|
17
|
+
labelIcon={
|
|
18
|
+
<Popover
|
|
19
|
+
headerContent={
|
|
20
|
+
<div>
|
|
21
|
+
The{' '}
|
|
22
|
+
<a href="https://schema.org/name" target="_blank" rel="noreferrer">
|
|
23
|
+
name
|
|
24
|
+
</a>{' '}
|
|
25
|
+
of a{' '}
|
|
26
|
+
<a href="https://schema.org/Person" target="_blank" rel="noreferrer">
|
|
27
|
+
Person
|
|
28
|
+
</a>
|
|
29
|
+
</div>
|
|
30
|
+
}
|
|
31
|
+
bodyContent={
|
|
32
|
+
<div>
|
|
33
|
+
Often composed of{' '}
|
|
34
|
+
<a href="https://schema.org/givenName" target="_blank" rel="noreferrer">
|
|
35
|
+
givenName
|
|
36
|
+
</a>{' '}
|
|
37
|
+
and{' '}
|
|
38
|
+
<a href="https://schema.org/familyName" target="_blank" rel="noreferrer">
|
|
39
|
+
familyName
|
|
40
|
+
</a>
|
|
41
|
+
.
|
|
42
|
+
</div>
|
|
43
|
+
}
|
|
44
|
+
>
|
|
45
|
+
<button
|
|
46
|
+
type="button"
|
|
47
|
+
aria-label="More info for name field"
|
|
48
|
+
onClick={e => e.preventDefault()}
|
|
49
|
+
aria-describedby="form-group-label-info"
|
|
50
|
+
className="pf-c-form__group-label-help"
|
|
51
|
+
>
|
|
52
|
+
<HelpIcon noVerticalAlign />
|
|
53
|
+
</button>
|
|
54
|
+
</Popover>
|
|
55
|
+
}
|
|
56
|
+
isRequired
|
|
57
|
+
fieldId="form-group-label-info"
|
|
58
|
+
helperText="Include your middle name if you have one."
|
|
59
|
+
>
|
|
60
|
+
<TextInput
|
|
61
|
+
isRequired
|
|
62
|
+
type="text"
|
|
63
|
+
id="form-group-label-info"
|
|
64
|
+
name="form-group-label-info"
|
|
65
|
+
aria-describedby="form-group-label-info-helper"
|
|
66
|
+
value={name}
|
|
67
|
+
onChange={handleNameChange}
|
|
68
|
+
/>
|
|
69
|
+
</FormGroup>
|
|
70
|
+
</Form>
|
|
71
|
+
);
|
|
72
|
+
};
|