@patternfly/patternfly 5.0.0-alpha.53 → 5.0.0-alpha.54

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.
Files changed (39) hide show
  1. package/components/FormControl/form-control.css +164 -214
  2. package/components/FormControl/form-control.scss +175 -281
  3. package/components/FormControl/themes/dark/form-control.scss +1 -2
  4. package/components/NumberInput/number-input.css +0 -1
  5. package/components/NumberInput/number-input.scss +0 -1
  6. package/docs/components/CalendarMonth/examples/CalendarMonth.md +32 -28
  7. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +52 -46
  8. package/docs/components/DatePicker/examples/DatePicker.md +55 -49
  9. package/docs/components/FileUpload/examples/FileUpload.md +105 -93
  10. package/docs/components/Form/examples/Form.md +165 -145
  11. package/docs/components/FormControl/examples/FormControl.md +439 -475
  12. package/docs/components/InlineEdit/examples/InlineEdit.md +87 -76
  13. package/docs/components/InputGroup/examples/InputGroup.md +84 -74
  14. package/docs/components/Login/examples/Login.md +92 -82
  15. package/docs/components/NumberInput/examples/NumberInput.md +99 -87
  16. package/docs/components/Pagination/examples/Pagination.md +100 -89
  17. package/docs/components/Select/examples/Select.md +77 -68
  18. package/docs/components/Slider/examples/Slider.md +31 -44
  19. package/docs/components/TextInputGroup/examples/TextInputGroup.md +60 -52
  20. package/docs/components/Toolbar/examples/Toolbar.md +18 -16
  21. package/docs/components/Wizard/examples/Wizard.md +280 -245
  22. package/docs/demos/Alert/examples/Alert.md +69 -57
  23. package/docs/demos/Button/examples/Button.md +54 -48
  24. package/docs/demos/CardView/examples/CardView.md +9 -8
  25. package/docs/demos/DataList/examples/DataList.md +36 -32
  26. package/docs/demos/Form/examples/BasicForms.md +247 -227
  27. package/docs/demos/HelperText/examples/HelperText.md +37 -33
  28. package/docs/demos/Modal/examples/Modal.md +14 -21
  29. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +11 -10
  30. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -40
  31. package/docs/demos/Table/examples/Table.md +99 -88
  32. package/docs/demos/Toolbar/examples/Toolbar.md +28 -25
  33. package/docs/demos/Wizard/examples/Wizard.md +448 -392
  34. package/package.json +3 -3
  35. package/patternfly-no-globals.css +161 -212
  36. package/patternfly.css +161 -212
  37. package/patternfly.min.css +1 -1
  38. package/patternfly.min.css.map +1 -1
  39. package/docs/components/FormControl/examples/FormControl.css +0 -5
package/docs/components/FormControl/examples/FormControl.md CHANGED
@@ -3,495 +3,454 @@ id: Form control
3
3
  section: components
4
4
  subsection: forms
5
5
  cssPrefix: pf-v5-c-form-control
6
- ---import './FormControl.css'
7
-
8
- ## Examples
6
+ ---## Examples
9
7
 
10
8
  ### Input
11
9
 
12
10
  **Note:** In webkit browsers, inputs with status icons that are autocompleted will have their icons removed by the user agent stylesheet. If the field does not need to use autocomplete, turn it off with `autocomplete="off"` to avoid the problem. Otherwise, use [helper text](/components/helper-text/html-demos) instead to ensure that the status will remain visible if the field is autocompleted.
13
11
 
14
12
  ```html
15
- <input
16
- class="pf-v5-c-form-control"
17
- type="text"
18
- value="Standard"
19
- id="input-standard"
20
- aria-label="Standard input example"
21
- />
22
- <br />
23
- <br />
24
- <input
25
- class="pf-v5-c-form-control"
26
- type="text"
27
- placeholder="Placeholder"
28
- id="input-placeholder"
29
- aria-label="Placeholder input example"
30
- />
31
- <br />
32
- <br />
33
- <input
34
- class="pf-v5-c-form-control"
35
- readonly
36
- type="text"
37
- value="Readonly"
38
- id="input-readonly"
39
- aria-label="Readonly input example"
40
- />
41
- <br />
42
- <br />
43
- <input
44
- class="pf-v5-c-form-control pf-m-plain"
45
- readonly
46
- type="text"
47
- value="Readonly plain"
48
- id="input-readonly-plain"
49
- aria-label="Readonly plain input example"
50
- />
51
- <br />
52
- <br />
53
- <input
54
- class="pf-v5-c-form-control"
55
- disabled
56
- type="text"
57
- value="Disabled"
58
- id="input-disabled"
59
- aria-label="Disabled input example"
60
- />
61
- <br />
62
- <br />
63
- <input
64
- class="pf-v5-c-form-control pf-m-success"
65
- type="text"
66
- value="Success"
67
- id="input-success"
68
- aria-label="Success state input example"
69
- />
70
- <br />
71
- <br />
72
- <input
73
- class="pf-v5-c-form-control pf-m-warning"
74
- type="text"
75
- value="Warning"
76
- id="input-warning"
77
- aria-label="Warning state input example"
78
- />
79
- <br />
80
- <br />
81
- <input
82
- class="pf-v5-c-form-control"
83
- required
84
- type="text"
85
- value="Error"
86
- id="input-error"
87
- aria-invalid="true"
88
- aria-label="Error state input example"
89
- />
90
- <br />
91
- <br />
92
- <input
93
- class="pf-v5-c-form-control pf-m-expanded"
94
- type="text"
95
- value="Expanded"
96
- id="input-expanded"
97
- aria-label="Expanded input example"
98
- />
99
- <br />
100
- <br />
101
- <input
102
- class="pf-v5-c-form-control pf-m-icon pf-m-calendar"
103
- type="text"
104
- value="Calendar"
105
- id="input-calendar"
106
- name="input-calendar"
107
- aria-label="Calendar input example"
108
- />
109
- <br />
110
- <br />
111
- <input
112
- class="pf-v5-c-form-control pf-m-icon pf-m-clock"
113
- type="text"
114
- value="Clock"
115
- id="input-clock"
116
- name="input-clock"
117
- aria-label="Clock input example"
118
- />
119
- <br />
120
- <br />
121
- <input
122
- class="pf-v5-c-form-control pf-m-icon"
123
- type="text"
124
- value="Custom icon"
125
- id="input-custom-icon"
126
- name="custom-icon"
127
- aria-label="Custom icon input example"
128
- />
13
+ <div class="pf-v5-c-form-control">
14
+ <input
15
+ type="text"
16
+ value="Standard"
17
+ id="input-standard"
18
+ aria-label="Standard input example"
19
+ />
20
+ </div>
21
+ <br />
22
+ <div class="pf-v5-c-form-control pf-m-placeholder">
23
+ <input
24
+ type="text"
25
+ placeholder="Placeholder"
26
+ id="input-placeholder"
27
+ aria-label="Placeholder input example"
28
+ />
29
+ </div>
30
+ <br />
31
+ <div class="pf-v5-c-form-control pf-m-readonly">
32
+ <input
33
+ readonly
34
+ type="text"
35
+ value="Readonly"
36
+ id="input-readonly"
37
+ aria-label="Readonly input example"
38
+ />
39
+ </div>
40
+ <br />
41
+ <div class="pf-v5-c-form-control pf-m-readonly pf-m-plain">
42
+ <input
43
+ readonly
44
+ type="text"
45
+ value="Readonly plain"
46
+ id="input-readonly-plain"
47
+ aria-label="Readonly plain input example"
48
+ />
49
+ </div>
50
+ <br />
51
+ <div class="pf-v5-c-form-control pf-m-disabled">
52
+ <input
53
+ disabled
54
+ type="text"
55
+ value="Disabled"
56
+ id="input-disabled"
57
+ aria-label="Disabled input example"
58
+ />
59
+ </div>
60
+ <br />
61
+ <div class="pf-v5-c-form-control pf-m-success">
62
+ <input
63
+ type="text"
64
+ value="Success"
65
+ id="input-success"
66
+ aria-label="Success state input example"
67
+ />
68
+ <div class="pf-v5-c-form-control__utilities">
69
+ <div class="pf-v5-c-form-control__icon pf-m-status">
70
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ <br />
75
+ <div class="pf-v5-c-form-control pf-m-warning">
76
+ <input
77
+ type="text"
78
+ value="Warning"
79
+ id="input-warning"
80
+ aria-label="Warning state input example"
81
+ />
82
+ <div class="pf-v5-c-form-control__utilities">
83
+ <div class="pf-v5-c-form-control__icon pf-m-status">
84
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ <br />
89
+ <div class="pf-v5-c-form-control pf-m-error">
90
+ <input
91
+ required
92
+ type="text"
93
+ value="Error"
94
+ id="input-error"
95
+ aria-invalid="true"
96
+ aria-label="Error state input example"
97
+ />
98
+ <div class="pf-v5-c-form-control__utilities">
99
+ <div class="pf-v5-c-form-control__icon pf-m-status">
100
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ <br />
105
+ <div class="pf-v5-c-form-control pf-m-expanded">
106
+ <input
107
+ type="text"
108
+ value="Expanded"
109
+ id="input-expanded"
110
+ aria-label="Expanded input example"
111
+ />
112
+ </div>
113
+ <br />
114
+ <div class="pf-v5-c-form-control pf-m-icon">
115
+ <input
116
+ type="text"
117
+ value="Calendar"
118
+ id="input-calendar"
119
+ name="input-calendar"
120
+ aria-label="Calendar input example"
121
+ />
122
+ <div class="pf-v5-c-form-control__utilities">
123
+ <div class="pf-v5-c-form-control__icon">
124
+ <i class="fas fa-calendar" aria-hidden="true"></i>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ <br />
129
+ <div class="pf-v5-c-form-control pf-m-warning pf-m-icon">
130
+ <input
131
+ type="text"
132
+ value="Clock (invalid)"
133
+ id="input-clock"
134
+ name="input-clock"
135
+ aria-label="Clock input example"
136
+ />
137
+ <div class="pf-v5-c-form-control__utilities">
138
+ <div class="pf-v5-c-form-control__icon">
139
+ <i class="fas fa-clock" aria-hidden="true"></i>
140
+ </div>
141
+ <div class="pf-v5-c-form-control__icon pf-m-status">
142
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ <br />
147
+ <div class="pf-v5-c-form-control pf-m-icon">
148
+ <input
149
+ type="text"
150
+ value="Custom icon"
151
+ id="input-custom-icon"
152
+ name="custom-icon"
153
+ aria-label="Custom icon input example"
154
+ />
155
+ <div class="pf-v5-c-form-control__utilities">
156
+ <div class="pf-v5-c-form-control__icon">
157
+ <i class="fas fa-bell" aria-hidden="true"></i>
158
+ </div>
159
+ </div>
160
+ </div>
129
161
 
130
162
  ```
131
163
 
132
164
  ### Select
133
165
 
134
166
  ```html
135
- <select
136
- class="pf-v5-c-form-control pf-m-placeholder"
137
- id="select-selectable-placeholder"
138
- name="select-selectable-placeholder"
139
- aria-label="Selectable placeholder select example"
140
- >
141
- <option value selected>Selectable placeholder</option>
142
- <option value="Mr">Mr</option>
143
- <option value="Miss">Miss</option>
144
- <option value="Mrs">Mrs</option>
145
- <option value="Ms">Ms</option>
146
- <option value="Dr">Dr</option>
147
- <option value="Other">Other</option>
148
- </select>
149
- <br />
150
- <br />
151
- <select
152
- class="pf-v5-c-form-control pf-m-placeholder"
153
- id="select-non-selectable-placeholder"
154
- name="select-non-selectable-placeholder"
155
- aria-label="Non-selectable placeholder select example"
156
- >
157
- <option value selected disabled>Non-selectable placeholder</option>
158
- <option value="Mr">Mr</option>
159
- <option value="Miss">Miss</option>
160
- <option value="Mrs">Mrs</option>
161
- <option value="Ms">Ms</option>
162
- <option value="Dr">Dr</option>
163
- <option value="Other">Other</option>
164
- </select>
165
- <br />
166
- <br />
167
- <select
168
- class="pf-v5-c-form-control"
169
- id="select-group"
170
- name="select-group"
171
- aria-label="Select group example"
172
- >
173
- <optgroup label="Group 1">
174
- <option value="Option 1">The first option</option>
175
- <option value="Option 2" selected>Option groups (second option selected)</option>
176
- </optgroup>
177
- <optgroup label="Group 2">
178
- <option value="Option 3">The third option</option>
179
- <option value="Option 4">The fourth option</option>
180
- </optgroup>
181
- </select>
182
- <br />
183
- <br />
184
- <select
185
- class="pf-v5-c-form-control pf-m-success"
186
- id="select-group-success"
187
- name="select-group-success"
188
- aria-label="Success state select group example"
189
- >
190
- <option value>Valid option</option>
191
- <optgroup label="Group 1">
192
- <option value="Option 1">The first option</option>
193
- <option value="Option 2">The second option</option>
194
- </optgroup>
195
- <optgroup label="Group 2">
196
- <option value="Option 3">The third option</option>
197
- <option value="Option 4">The fourth option</option>
198
- </optgroup>
199
- </select>
200
- <br />
201
- <br />
202
- <select
203
- class="pf-v5-c-form-control pf-m-warning"
204
- id="select-group-warning"
205
- name="select-group-warning"
206
- aria-label="Warning state select group example"
207
- >
208
- <option value>Warning option</option>
209
- <optgroup label="Group 1">
210
- <option value="Option 1">The first option</option>
211
- <option value="Option 2">The second option</option>
212
- </optgroup>
213
- <optgroup label="Group 2">
214
- <option value="Option 3">The third option</option>
215
- <option value="Option 4">The fourth option</option>
216
- </optgroup>
217
- </select>
218
- <br />
219
- <br />
220
- <select
221
- class="pf-v5-c-form-control"
222
- required
223
- aria-invalid="true"
224
- id="select-group-error"
225
- name="select-group-error"
226
- aria-label="Error state select group example"
227
- >
228
- <option value>Invalid option</option>
229
- <optgroup label="Group 1">
230
- <option value="Option 1">The first option</option>
231
- <option value="Option 2">The second option</option>
232
- </optgroup>
233
- <optgroup label="Group 2">
234
- <option value="Option 3">The third option</option>
235
- <option value="Option 4">The fourth option</option>
236
- </optgroup>
237
- </select>
238
- <br />
239
- <br />
240
- <select
241
- class="pf-v5-c-form-control pf-m-placeholder"
242
- disabled
243
- id="select-disabled"
244
- name="select-disabled"
245
- aria-label="Disabled select example"
246
- >
247
- <option value selected>Disabled</option>
248
- <option value="Mr">Mr</option>
249
- <option value="Miss">Miss</option>
250
- <option value="Mrs">Mrs</option>
251
- <option value="Ms">Ms</option>
252
- <option value="Dr">Dr</option>
253
- <option value="Other">Other</option>
254
- </select>
167
+ <div class="pf-v5-c-form-control pf-m-placeholder">
168
+ <select
169
+ class
170
+ id="select-selectable-placeholder"
171
+ name="select-selectable-placeholder"
172
+ aria-label="Selectable placeholder select example"
173
+ >
174
+ <option value selected>Selectable placeholder</option>
175
+ <option value="Mr">Mr</option>
176
+ <option value="Miss">Miss</option>
177
+ <option value="Mrs">Mrs</option>
178
+ <option value="Ms">Ms</option>
179
+ <option value="Dr">Dr</option>
180
+ <option value="Other">Other</option>
181
+ </select>
182
+ <div class="pf-v5-c-form-control__utilities">
183
+ <div class="pf-v5-c-form-control__toggle-icon">
184
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ <br />
189
+ <div class="pf-v5-c-form-control pf-m-placeholder">
190
+ <select
191
+ class
192
+ id="select-non-selectable-placeholder"
193
+ name="select-non-selectable-placeholder"
194
+ aria-label="Non-selectable placeholder select example"
195
+ >
196
+ <option value selected disabled>Non-selectable placeholder</option>
197
+ <option value="Mr">Mr</option>
198
+ <option value="Miss">Miss</option>
199
+ <option value="Mrs">Mrs</option>
200
+ <option value="Ms">Ms</option>
201
+ <option value="Dr">Dr</option>
202
+ <option value="Other">Other</option>
203
+ </select>
204
+ <div class="pf-v5-c-form-control__utilities">
205
+ <div class="pf-v5-c-form-control__toggle-icon">
206
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ <br />
211
+ <div class="pf-v5-c-form-control">
212
+ <select
213
+ class
214
+ id="select-group"
215
+ name="select-group"
216
+ aria-label="Select group example"
217
+ >
218
+ <optgroup label="Group 1">
219
+ <option value="Option 1">The first option</option>
220
+ <option value="Option 2" selected>Option groups (second option selected)</option>
221
+ </optgroup>
222
+ <optgroup label="Group 2">
223
+ <option value="Option 3">The third option</option>
224
+ <option value="Option 4">The fourth option</option>
225
+ </optgroup>
226
+ </select>
227
+ <div class="pf-v5-c-form-control__utilities">
228
+ <div class="pf-v5-c-form-control__toggle-icon">
229
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ <br />
234
+ <div class="pf-v5-c-form-control pf-m-success">
235
+ <select
236
+ class
237
+ id="select-group-success"
238
+ name="select-group-success"
239
+ aria-label="Success state select group example"
240
+ >
241
+ <option value>Valid option</option>
242
+ <optgroup label="Group 1">
243
+ <option value="Option 1">The first option</option>
244
+ <option value="Option 2">The second option</option>
245
+ </optgroup>
246
+ <optgroup label="Group 2">
247
+ <option value="Option 3">The third option</option>
248
+ <option value="Option 4">The fourth option</option>
249
+ </optgroup>
250
+ </select>
251
+ <div class="pf-v5-c-form-control__utilities">
252
+ <div class="pf-v5-c-form-control__icon pf-m-status">
253
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
254
+ </div>
255
+ <div class="pf-v5-c-form-control__toggle-icon">
256
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ <br />
261
+ <div class="pf-v5-c-form-control pf-m-warning">
262
+ <select
263
+ class
264
+ id="select-group-warning"
265
+ name="select-group-warning"
266
+ aria-label="Warning state select group example"
267
+ >
268
+ <option value>Warning option</option>
269
+ <optgroup label="Group 1">
270
+ <option value="Option 1">The first option</option>
271
+ <option value="Option 2">The second option</option>
272
+ </optgroup>
273
+ <optgroup label="Group 2">
274
+ <option value="Option 3">The third option</option>
275
+ <option value="Option 4">The fourth option</option>
276
+ </optgroup>
277
+ </select>
278
+ <div class="pf-v5-c-form-control__utilities">
279
+ <div class="pf-v5-c-form-control__icon pf-m-status">
280
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
281
+ </div>
282
+ <div class="pf-v5-c-form-control__toggle-icon">
283
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ <br />
288
+ <div class="pf-v5-c-form-control pf-m-error">
289
+ <select
290
+ class
291
+ required
292
+ aria-invalid="true"
293
+ id="select-group-error"
294
+ name="select-group-error"
295
+ aria-label="Error state select group example"
296
+ >
297
+ <option value>Invalid option</option>
298
+ <optgroup label="Group 1">
299
+ <option value="Option 1">The first option</option>
300
+ <option value="Option 2">The second option</option>
301
+ </optgroup>
302
+ <optgroup label="Group 2">
303
+ <option value="Option 3">The third option</option>
304
+ <option value="Option 4">The fourth option</option>
305
+ </optgroup>
306
+ </select>
307
+ <div class="pf-v5-c-form-control__utilities">
308
+ <div class="pf-v5-c-form-control__icon pf-m-status">
309
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
310
+ </div>
311
+ <div class="pf-v5-c-form-control__toggle-icon">
312
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ <br />
317
+ <div class="pf-v5-c-form-control pf-m-disabled pf-m-placeholder">
318
+ <select
319
+ class
320
+ disabled
321
+ id="select-disabled"
322
+ name="select-disabled"
323
+ aria-label="Disabled select example"
324
+ >
325
+ <option value selected>Disabled</option>
326
+ <option value="Mr">Mr</option>
327
+ <option value="Miss">Miss</option>
328
+ <option value="Mrs">Mrs</option>
329
+ <option value="Ms">Ms</option>
330
+ <option value="Dr">Dr</option>
331
+ <option value="Other">Other</option>
332
+ </select>
333
+ <div class="pf-v5-c-form-control__utilities">
334
+ <div class="pf-v5-c-form-control__toggle-icon">
335
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
336
+ </div>
337
+ </div>
338
+ </div>
255
339
 
256
340
  ```
257
341
 
258
342
  ### Textarea
259
343
 
260
344
  ```html
261
- <textarea
262
- class="pf-v5-c-form-control"
263
- name="textarea-standard"
264
- id="textarea-standard"
265
- aria-label="Standard textarea example"
266
- >Standard
345
+ <div class="pf-v5-c-form-control">
346
+ <textarea
347
+ name="textarea-standard"
348
+ id="textarea-standard"
349
+ aria-label="Standard textarea example"
350
+ >Standard
267
351
  </textarea>
268
- <br />
269
- <br />
270
- <textarea
271
- class="pf-v5-c-form-control"
272
- readonly
273
- name="textarea-readonly"
274
- id="textarea-readonly"
275
- aria-label="Readonly textarea example"
276
- >Readonly
352
+ </div>
353
+ <br />
354
+ <div class="pf-v5-c-form-control pf-m-readonly">
355
+ <textarea
356
+ readonly
357
+ name="textarea-readonly"
358
+ id="textarea-readonly"
359
+ aria-label="Readonly textarea example"
360
+ >Readonly
277
361
  </textarea>
278
- <br />
279
- <br />
280
- <textarea
281
- class="pf-v5-c-form-control pf-m-plain"
282
- readonly
283
- name="textarea-readonly-plain"
284
- id="textarea-readonly-plain"
285
- aria-label="Readonly plain textarea example"
286
- >Readonly plain
362
+ </div>
363
+ <br />
364
+ <div class="pf-v5-c-form-control pf-m-readonly pf-m-plain">
365
+ <textarea
366
+ readonly
367
+ name="textarea-readonly-plain"
368
+ id="textarea-readonly-plain"
369
+ aria-label="Readonly plain textarea example"
370
+ >Readonly plain
287
371
  </textarea>
288
- <br />
289
- <br />
290
- <textarea
291
- class="pf-v5-c-form-control"
292
- disabled
293
- name="textarea-disabled"
294
- id="textarea-disabled"
295
- aria-label="Disabled textarea example"
296
- >Disabled
372
+ </div>
373
+ <br />
374
+ <div class="pf-v5-c-form-control pf-m-disabled">
375
+ <textarea
376
+ disabled
377
+ name="textarea-disabled"
378
+ id="textarea-disabled"
379
+ aria-label="Disabled textarea example"
380
+ >Disabled
297
381
  </textarea>
298
- <br />
299
- <br />
300
- <textarea
301
- class="pf-v5-c-form-control pf-m-success"
302
- name="textarea-success"
303
- id="textarea-success"
304
- aria-label="Success state textarea example"
305
- >Success
306
- </textarea>
307
- <br />
308
- <br />
309
- <textarea
310
- class="pf-v5-c-form-control pf-m-warning"
311
- name="textarea-warning"
312
- id="textarea-warning"
313
- aria-label="Warning state textarea example"
314
- >Warning
382
+ </div>
383
+ <br />
384
+ <div class="pf-v5-c-form-control pf-m-success">
385
+ <textarea
386
+ name="textarea-success"
387
+ id="textarea-success"
388
+ aria-label="Success state textarea example"
389
+ >Success
315
390
  </textarea>
316
- <br />
317
- <br />
318
- <textarea
319
- class="pf-v5-c-form-control"
320
- required
321
- name="textarea-error"
322
- id="textarea-error"
323
- aria-label="Error state textarea example"
324
- aria-invalid="true"
325
- >Error
326
- </textarea>
327
- <br />
328
- <br />
329
- <textarea
330
- class="pf-v5-c-form-control pf-m-resize-vertical"
331
- name="textarea-resize-vertical"
332
- id="textarea-resize-vertical"
333
- aria-label="Resize vertical textarea example"
334
- >Resizes vertically
391
+ <div class="pf-v5-c-form-control__utilities">
392
+ <div class="pf-v5-c-form-control__icon pf-m-status">
393
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
394
+ </div>
395
+ </div>
396
+ </div>
397
+ <br />
398
+ <div class="pf-v5-c-form-control pf-m-warning">
399
+ <textarea
400
+ name="textarea-warning"
401
+ id="textarea-warning"
402
+ aria-label="Warning state textarea example"
403
+ >Warning
335
404
  </textarea>
336
- <br />
337
- <br />
338
- <textarea
339
- class="pf-v5-c-form-control pf-m-resize-horizontal"
340
- name="textarea-resize-horizontal"
341
- id="textarea-resize-horizontal"
342
- aria-label="Resize horizontal textarea example"
343
- >Resizes horizontally
405
+ <div class="pf-v5-c-form-control__utilities">
406
+ <div class="pf-v5-c-form-control__icon pf-m-status">
407
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ <br />
412
+ <div class="pf-v5-c-form-control pf-m-error">
413
+ <textarea
414
+ required
415
+ name="textarea-error"
416
+ id="textarea-error"
417
+ aria-label="Error state textarea example"
418
+ aria-invalid="true"
419
+ >Error
344
420
  </textarea>
345
-
346
- ```
347
-
348
- ### Icon sprite
349
-
350
- **Note:** The icons for the success, invalid, calendar, etc varations in form control elemements are applied as background images to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `.pf-m-icon-sprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
351
-
352
- ```html
353
- <input
354
- class="pf-v5-c-form-control pf-m-success pf-m-icon-sprite"
355
- type="text"
356
- value="Success"
357
- id="input-success-sprite"
358
- aria-label="Success state input example"
359
- />
360
- <br />
361
- <br />
362
- <input
363
- class="pf-v5-c-form-control pf-m-warning pf-m-icon-sprite"
364
- type="text"
365
- value="Warning"
366
- id="input-warning-sprite"
367
- aria-label="Warning state input example"
368
- />
369
- <br />
370
- <br />
371
- <input
372
- class="pf-v5-c-form-control pf-m-icon-sprite"
373
- required
374
- type="text"
375
- value="Error"
376
- id="input-error-sprite"
377
- aria-invalid="true"
378
- aria-label="Error state input example"
379
- />
380
- <br />
381
- <br />
382
- <input
383
- class="pf-v5-c-form-control pf-m-search pf-m-icon-sprite"
384
- type="search"
385
- value="Search"
386
- id="input-search-sprite"
387
- name="search-input"
388
- aria-label="Search input example"
389
- />
390
- <br />
391
- <br />
392
- <input
393
- class="pf-v5-c-form-control pf-m-icon pf-m-calendar pf-m-icon-sprite"
394
- type="text"
395
- value="Calendar"
396
- id="input-calendar-sprite"
397
- name="input-calendar"
398
- aria-label="Calendar input example"
399
- />
400
- <br />
401
- <br />
402
- <input
403
- class="pf-v5-c-form-control pf-m-icon pf-m-clock pf-m-icon-sprite"
404
- type="text"
405
- value="Clock"
406
- id="input-clock-sprite"
407
- name="input-clock"
408
- aria-label="Clock input example"
409
- />
410
- <br />
411
- <br />
412
- <select
413
- class="pf-v5-c-form-control pf-m-success pf-m-icon-sprite"
414
- id="select-group-success-sprite"
415
- name="select-group-success"
416
- aria-label="Success state select group example"
417
- >
418
- <option value>Valid option</option>
419
- <optgroup label="Group 1">
420
- <option value="Option 1">The first option</option>
421
- <option value="Option 2">The second option</option>
422
- </optgroup>
423
- <optgroup label="Group 2">
424
- <option value="Option 3">The third option</option>
425
- <option value="Option 4">The fourth option</option>
426
- </optgroup>
427
- </select>
428
- <br />
429
- <br />
430
- <select
431
- class="pf-v5-c-form-control pf-m-warning pf-m-icon-sprite"
432
- id="select-group-warning-sprite"
433
- name="select-group-warning"
434
- aria-label="Warning state select group example"
435
- >
436
- <option value>Warning option</option>
437
- <optgroup label="Group 1">
438
- <option value="Option 1">The first option</option>
439
- <option value="Option 2">The second option</option>
440
- </optgroup>
441
- <optgroup label="Group 2">
442
- <option value="Option 3">The third option</option>
443
- <option value="Option 4">The fourth option</option>
444
- </optgroup>
445
- </select>
446
- <br />
447
- <br />
448
- <select
449
- class="pf-v5-c-form-control pf-m-icon-sprite"
450
- required
451
- aria-invalid="true"
452
- id="select-group-error-sprite"
453
- name="select-group-error"
454
- aria-label="Error state select group example"
455
- >
456
- <option value>Invalid option</option>
457
- <optgroup label="Group 1">
458
- <option value="Option 1">The first option</option>
459
- <option value="Option 2">The second option</option>
460
- </optgroup>
461
- <optgroup label="Group 2">
462
- <option value="Option 3">The third option</option>
463
- <option value="Option 4">The fourth option</option>
464
- </optgroup>
465
- </select>
466
- <br />
467
- <br />
468
- <textarea
469
- class="pf-v5-c-form-control pf-m-success pf-m-icon-sprite"
470
- name="textarea-success"
471
- id="textarea-success-sprite"
472
- aria-label="Success state textarea example"
473
- >Success
421
+ <div class="pf-v5-c-form-control__utilities">
422
+ <div class="pf-v5-c-form-control__icon pf-m-status">
423
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
424
+ </div>
425
+ </div>
426
+ </div>
427
+ <br />
428
+ <div class="pf-v5-c-form-control pf-m-resize-vertical">
429
+ <textarea
430
+ name="textarea-resize-vertical"
431
+ id="textarea-resize-vertical"
432
+ aria-label="Resize vertical textarea example"
433
+ >Resizes vertically
474
434
  </textarea>
475
- <br />
476
- <br />
477
- <textarea
478
- class="pf-v5-c-form-control pf-m-warning pf-m-icon-sprite"
479
- name="textarea-warning"
480
- id="textarea-warning-sprite"
481
- aria-label="Warning state textarea example"
482
- >Warning
435
+ </div>
436
+ <br />
437
+ <div class="pf-v5-c-form-control pf-m-resize-horizontal">
438
+ <textarea
439
+ name="textarea-resize-horizontal"
440
+ id="textarea-resize-horizontal"
441
+ aria-label="Resize horizontal textarea example"
442
+ >Resizes horizontally
483
443
  </textarea>
484
- <br />
485
- <br />
486
- <textarea
487
- class="pf-v5-c-form-control pf-m-icon-sprite"
488
- required
489
- name="textarea-error"
490
- id="textarea-error-sprite"
491
- aria-label="Error state textarea example"
492
- aria-invalid="true"
493
- >Error
444
+ </div>
445
+ <br />
446
+ <div class="pf-v5-c-form-control pf-m-resize-both">
447
+ <textarea
448
+ name="textarea-resize-both"
449
+ id="textarea-resize-both"
450
+ aria-label="Resize both textarea example"
451
+ >Resizes in both directions
494
452
  </textarea>
453
+ </div>
495
454
 
496
455
  ```
497
456
 
@@ -501,24 +460,29 @@ cssPrefix: pf-v5-c-form-control
501
460
 
502
461
  | Attribute | Applied to | Outcome |
503
462
  | -- | -- | -- |
504
- | `id` | `.pf-v5-c-form-control` | Provides an `id` value that can be used with the `for` attribute on an associated `<label>` element to provide an accessible label for the form control element.
505
- | `aria-invalid="true"` | `.pf-v5-c-form-control` | Indicates that the form control is in the error state and applies error state styling. |
506
- | `aria-label="descriptive text"` | `.pf-v5-c-form-control` | Provides an accessible label for assistive technology. |
507
- | `aria-expanded="true"` | `.pf-v5-c-form-control.pf-m-expanded` | Indicates that clicking in the form control has toggled something else to be expanded. |
463
+ | `id` | `.pf-v5-c-form-control > input`,`.pf-v5-c-form-control > select`, or `.pf-v5-c-form-control > textarea` | Provides an `id` value that can be used with the `for` attribute on an associated `<label>` element to provide an accessible label for the form control element.
464
+ | `aria-invalid="true"` | `.pf-v5-c-form-control > input`,`.pf-v5-c-form-control > select`, or `.pf-v5-c-form-control > textarea` | Indicates that the form control is in the error state and applies error state styling. Use with `.pf-m-error` on the `.pf-v5-c-form-control` to ensure correct styling. |
465
+ | `aria-label="descriptive text"` | `.pf-v5-c-form-control > input`,`.pf-v5-c-form-control > select`, or `.pf-v5-c-form-control > textarea` | Provides an accessible label for assistive technology. |
466
+ | `aria-expanded="true"` | `.pf-v5-c-form-control > input` | Indicates that clicking in the form control has toggled something else to be expanded. Use with `.pf-m-expanded` on the `.pf-v5-c-form-control` to ensure correct styling. |
508
467
 
509
468
  ### Usage
510
469
 
511
470
  | Class | Applied to | Outcome |
512
471
  | -- | -- | -- |
513
- | `.pf-v5-c-form-control` | `<input>`,`<textarea>`, `<select>` | Initiates an input, textarea or select. For styling of checkboxes or radios see the [checkbox component](/components/checkbox) or [radio component](/components/radio). **Required** |
514
- | `.pf-m-resize-vertical` | `textarea.pf-m-form-control` | Modifies a `textarea.pf-v5-c-form-control` element so it can only be resized vertically along the y-axis. |
515
- | `.pf-m-resize-horizontal` | `textarea.pf-m-form-control` | Modifies a `textarea.pf-v5-c-form-control` element so it can only be resized horizontally along the x-axis. |
472
+ | `.pf-v5-c-form-control` | `<div>` | Initiates a container for an input, text area or select. For styling of checkboxes or radios see the [checkbox component](/components/checkbox) or [radio component](/components/radio). **Required** |
473
+ | `.pf-v5-c-form-control__utilities` | `<div>` | Initiates a container for elements like icons to be associated with the form control. |
474
+ | `.pf-v5-c-form-control__icon` | `<div>` | Creates a container for an icon associated with a form control. |
475
+ | `.pf-v5-c-form-control__toggle-icon` | `<div>` | Initiates a toggle icon for a form select. |
476
+ | `.pf-m-resize-vertical` | `.pf-v5-c-form-control` | Modifies a form control element containing a text area so it can only be resized vertically. |
477
+ | `.pf-m-resize-horizontal` | `.pf-v5-c-form-control` | Modifies a form control element containing a text area so it can only be resized horizontally. |
478
+ | `.pf-m-resize-both` | `.pf-v5-c-form-control` | Modifies a `.pf-v5-c-form-control` element containing a text area so it resizes in both directions. |
479
+ | `.pf-m-icon` | `.pf-v5-c-form-control` | Modifies a form control to allow for an icon. |
480
+ | `.pf-m-readonly` | `.pf-v5-c-form-control` | Modifies a form control for a readonly input, text area, or select.|
481
+ | `.pf-m-disabled` | `.pf-v5-c-form-control` | Modifies a form control for a disabled input, text area, or select.|
516
482
  | `.pf-m-success` | `.pf-v5-c-form-control` | Modifies a form control for the success state. |
517
483
  | `.pf-m-warning` | `.pf-v5-c-form-control` | Modifies a form control for the warning state. |
518
- | `.pf-m-icon-sprite` | `.pf-v5-c-form-control` | Modifies form control element to use an external SVG sprite instead of embedded data URIs for icons. For use with apps whose content security policies disallow the use of data URIs. |
519
- | `.pf-m-icon` | `input.pf-v5-c-form-control` | Modifies a form control text input to be able to specify a custom SVG background via `--pf-v5-c-form-control--m-icon--BackgroundUrl`, and other optional vars for other background properties.
520
- | `.pf-m-calendar` | `.pf-v5-c-form-control.pf-m-icon` | Modifies a form control to support the calendar icon. |
521
- | `.pf-m-clock` | `.pf-v5-c-form-control.pf-m-icon` | Modifies a form control to support the clock icon. |
522
- | `.pf-m-expanded` | `input.pf-v5-c-form-control` | Modifies a form control for the expanded state. This is used when clicking in the text input toggles something open/closed. |
523
- | `.pf-m-placeholder` | `select.pf-v5-c-form-control` | Modifies a form select for placeholder styles. This modifier is set programatically based on the chosen option. |
524
- | `.pf-m-plain` | `input[readonly].pf-v5-c-form-control`, `textarea[readonly].pf-v5-c-form-control` | Modifies an `<input>` or `<textarea>` with a `readonly` attribute to be presented as normal text. |
484
+ | `.pf-m-error` | `.pf-v5-c-form-control` | Modifies a form control for the error (invalid) state. |
485
+ | `.pf-m-expanded` | `.pf-v5-c-form-control` | Modifies a form control for the expanded state. This is used when clicking in the text input toggles something open/closed. |
486
+ | `.pf-m-placeholder` | `.pf-v5-c-form-control` | Modifies a form select for placeholder styles. This modifier is set programatically based on the chosen option. |
487
+ | `.pf-m-plain` | `.pf-v5-c-form-control` | Modifies a form control containing an `<input>` or `<textarea>` with a `readonly` attribute to be presented as normal text. |
488
+ | `.pf-m-status`| `.pf-v5-c-form-control__icon` | Modifies a form control icon to show status. |