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

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 (49) 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/components/Table/table-grid.css +380 -391
  7. package/components/Table/table-grid.scss +97 -92
  8. package/components/Table/table-tree-view.css +254 -254
  9. package/components/Table/table-tree-view.scss +30 -30
  10. package/components/Table/table.css +232 -232
  11. package/components/Table/table.scss +265 -255
  12. package/docs/components/CalendarMonth/examples/CalendarMonth.md +32 -28
  13. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +52 -46
  14. package/docs/components/DatePicker/examples/DatePicker.md +55 -49
  15. package/docs/components/FileUpload/examples/FileUpload.md +105 -93
  16. package/docs/components/Form/examples/Form.md +165 -145
  17. package/docs/components/FormControl/examples/FormControl.md +439 -475
  18. package/docs/components/InlineEdit/examples/InlineEdit.md +137 -104
  19. package/docs/components/InputGroup/examples/InputGroup.md +84 -74
  20. package/docs/components/Login/examples/Login.md +92 -82
  21. package/docs/components/NumberInput/examples/NumberInput.md +99 -87
  22. package/docs/components/Pagination/examples/Pagination.md +100 -89
  23. package/docs/components/Select/examples/Select.md +77 -68
  24. package/docs/components/Slider/examples/Slider.md +31 -44
  25. package/docs/components/Table/examples/Table.md +6839 -3703
  26. package/docs/components/TextInputGroup/examples/TextInputGroup.md +60 -52
  27. package/docs/components/Toolbar/examples/Toolbar.md +18 -16
  28. package/docs/components/Wizard/examples/Wizard.md +280 -245
  29. package/docs/demos/Alert/examples/Alert.md +69 -57
  30. package/docs/demos/Button/examples/Button.md +54 -48
  31. package/docs/demos/Card/examples/Card.md +73 -34
  32. package/docs/demos/CardView/examples/CardView.md +9 -8
  33. package/docs/demos/DataList/examples/DataList.md +223 -84
  34. package/docs/demos/DescriptionList/examples/DescriptionList.md +63 -23
  35. package/docs/demos/Form/examples/BasicForms.md +247 -227
  36. package/docs/demos/HelperText/examples/HelperText.md +37 -33
  37. package/docs/demos/Modal/examples/Modal.md +14 -21
  38. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +11 -10
  39. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -40
  40. package/docs/demos/Table/examples/Table.md +2765 -1397
  41. package/docs/demos/Tabs/examples/Tabs.md +203 -50
  42. package/docs/demos/Toolbar/examples/Toolbar.md +300 -137
  43. package/docs/demos/Wizard/examples/Wizard.md +448 -392
  44. package/package.json +3 -3
  45. package/patternfly-no-globals.css +1027 -1089
  46. package/patternfly.css +1027 -1089
  47. package/patternfly.min.css +1 -1
  48. package/patternfly.min.css.map +1 -1
  49. package/docs/components/FormControl/examples/FormControl.css +0 -5
package/docs/components/CalendarMonth/examples/CalendarMonth.md CHANGED
@@ -83,13 +83,14 @@ cssPrefix: pf-v5-c-calendar-month
83
83
  </div>
84
84
  <div class="pf-v5-c-input-group__item">
85
85
  <div class="pf-v5-c-calendar-month__header-year">
86
- <input
87
- class="pf-v5-c-form-control"
88
- type="number"
89
- value="2020"
90
- id="calendar-month-date-selected-year"
91
- aria-label="Select year"
92
- />
86
+ <div class="pf-v5-c-form-control">
87
+ <input
88
+ type="number"
89
+ value="2020"
90
+ id="calendar-month-date-selected-year"
91
+ aria-label="Select year"
92
+ />
93
+ </div>
93
94
  </div>
94
95
  </div>
95
96
  </div>
@@ -476,13 +477,14 @@ cssPrefix: pf-v5-c-calendar-month
476
477
  </div>
477
478
  <div class="pf-v5-c-input-group__item">
478
479
  <div class="pf-v5-c-calendar-month__header-year">
479
- <input
480
- class="pf-v5-c-form-control"
481
- type="number"
482
- value="2020"
483
- id="calendar-month-range-start-date-selected-year"
484
- aria-label="Select year"
485
- />
480
+ <div class="pf-v5-c-form-control">
481
+ <input
482
+ type="number"
483
+ value="2020"
484
+ id="calendar-month-range-start-date-selected-year"
485
+ aria-label="Select year"
486
+ />
487
+ </div>
486
488
  </div>
487
489
  </div>
488
490
  </div>
@@ -894,13 +896,14 @@ cssPrefix: pf-v5-c-calendar-month
894
896
  </div>
895
897
  <div class="pf-v5-c-input-group__item">
896
898
  <div class="pf-v5-c-calendar-month__header-year">
897
- <input
898
- class="pf-v5-c-form-control"
899
- type="number"
900
- value="2020"
901
- id="calendar-month-range-end-date-selected-year"
902
- aria-label="Select year"
903
- />
899
+ <div class="pf-v5-c-form-control">
900
+ <input
901
+ type="number"
902
+ value="2020"
903
+ id="calendar-month-range-end-date-selected-year"
904
+ aria-label="Select year"
905
+ />
906
+ </div>
904
907
  </div>
905
908
  </div>
906
909
  </div>
@@ -1312,13 +1315,14 @@ cssPrefix: pf-v5-c-calendar-month
1312
1315
  </div>
1313
1316
  <div class="pf-v5-c-input-group__item">
1314
1317
  <div class="pf-v5-c-calendar-month__header-year">
1315
- <input
1316
- class="pf-v5-c-form-control"
1317
- type="number"
1318
- value="2020"
1319
- id="calendar-month-range-start-and-end-dates-selected-year"
1320
- aria-label="Select year"
1321
- />
1318
+ <div class="pf-v5-c-form-control">
1319
+ <input
1320
+ type="number"
1321
+ value="2020"
1322
+ id="calendar-month-range-start-and-end-dates-selected-year"
1323
+ aria-label="Select year"
1324
+ />
1325
+ </div>
1322
1326
  </div>
1323
1327
  </div>
1324
1328
  </div>
package/docs/components/ClipboardCopy/examples/ClipboardCopy.md CHANGED
@@ -9,13 +9,14 @@ cssPrefix: pf-v5-c-clipboard-copy
9
9
  ```html
10
10
  <div class="pf-v5-c-clipboard-copy">
11
11
  <div class="pf-v5-c-clipboard-copy__group">
12
- <input
13
- class="pf-v5-c-form-control"
14
- type="text"
15
- value="This is editable"
16
- id="basic-editable-text-input"
17
- aria-label="Copyable input"
18
- />
12
+ <div class="pf-v5-c-form-control">
13
+ <input
14
+ type="text"
15
+ value="This is editable"
16
+ id="basic-editable-text-input"
17
+ aria-label="Copyable input"
18
+ />
19
+ </div>
19
20
  <button
20
21
  class="pf-v5-c-button pf-m-control"
21
22
  type="button"
@@ -30,14 +31,15 @@ cssPrefix: pf-v5-c-clipboard-copy
30
31
  <br />
31
32
  <div class="pf-v5-c-clipboard-copy">
32
33
  <div class="pf-v5-c-clipboard-copy__group">
33
- <input
34
- class="pf-v5-c-form-control"
35
- readonly
36
- type="text"
37
- value="This is read-only"
38
- id="basic-readonly-text-input"
39
- aria-label="Copyable input"
40
- />
34
+ <div class="pf-v5-c-form-control">
35
+ <input
36
+ readonly
37
+ type="text"
38
+ value="This is read-only"
39
+ id="basic-readonly-text-input"
40
+ aria-label="Copyable input"
41
+ />
42
+ </div>
41
43
  <button
42
44
  class="pf-v5-c-button pf-m-control"
43
45
  type="button"
@@ -69,13 +71,14 @@ cssPrefix: pf-v5-c-clipboard-copy
69
71
  <i class="fas fa-angle-right" aria-hidden="true"></i>
70
72
  </div>
71
73
  </button>
72
- <input
73
- class="pf-v5-c-form-control"
74
- type="text"
75
- value="This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion."
76
- id="expandable-not-expanded-editable-text-input"
77
- aria-label="Copyable input"
78
- />
74
+ <div class="pf-v5-c-form-control">
75
+ <input
76
+ type="text"
77
+ value="This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion."
78
+ id="expandable-not-expanded-editable-text-input"
79
+ aria-label="Copyable input"
80
+ />
81
+ </div>
79
82
  <button
80
83
  class="pf-v5-c-button pf-m-control"
81
84
  type="button"
@@ -106,14 +109,15 @@ cssPrefix: pf-v5-c-clipboard-copy
106
109
  <i class="fas fa-angle-right" aria-hidden="true"></i>
107
110
  </div>
108
111
  </button>
109
- <input
110
- class="pf-v5-c-form-control"
111
- readonly
112
- type="text"
113
- value="This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion."
114
- id="expandable-expanded-editable-text-input"
115
- aria-label="Copyable input"
116
- />
112
+ <div class="pf-v5-c-form-control">
113
+ <input
114
+ readonly
115
+ type="text"
116
+ value="This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion."
117
+ id="expandable-expanded-editable-text-input"
118
+ aria-label="Copyable input"
119
+ />
120
+ </div>
117
121
  <button
118
122
  class="pf-v5-c-button pf-m-control"
119
123
  type="button"
@@ -145,14 +149,15 @@ cssPrefix: pf-v5-c-clipboard-copy
145
149
  <i class="fas fa-angle-right" aria-hidden="true"></i>
146
150
  </div>
147
151
  </button>
148
- <input
149
- class="pf-v5-c-form-control"
150
- readonly
151
- type="text"
152
- value="This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion."
153
- id="expandable-not-expanded-readonly-text-input"
154
- aria-label="Copyable input"
155
- />
152
+ <div class="pf-v5-c-form-control">
153
+ <input
154
+ readonly
155
+ type="text"
156
+ value="This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion."
157
+ id="expandable-not-expanded-readonly-text-input"
158
+ aria-label="Copyable input"
159
+ />
160
+ </div>
156
161
  <button
157
162
  class="pf-v5-c-button pf-m-control"
158
163
  type="button"
@@ -183,14 +188,15 @@ cssPrefix: pf-v5-c-clipboard-copy
183
188
  <i class="fas fa-angle-right" aria-hidden="true"></i>
184
189
  </div>
185
190
  </button>
186
- <input
187
- class="pf-v5-c-form-control"
188
- readonly
189
- type="text"
190
- value="This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion."
191
- id="expandable-expanded-readonly-text-input"
192
- aria-label="Copyable input"
193
- />
191
+ <div class="pf-v5-c-form-control">
192
+ <input
193
+ readonly
194
+ type="text"
195
+ value="This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion."
196
+ id="expandable-expanded-readonly-text-input"
197
+ aria-label="Copyable input"
198
+ />
199
+ </div>
194
200
  <button
195
201
  class="pf-v5-c-button pf-m-control"
196
202
  type="button"
package/docs/components/DatePicker/examples/DatePicker.md CHANGED
@@ -14,14 +14,15 @@ cssPrefix: pf-v5-c-date-picker
14
14
  <div class="pf-v5-c-date-picker__input">
15
15
  <div class="pf-v5-c-input-group">
16
16
  <div class="pf-v5-c-input-group__item pf-m-fill">
17
- <input
18
- class="pf-v5-c-form-control"
19
- type="text"
20
- value="2020-03-05"
21
- id="basic-input"
22
- name="basic-input"
23
- aria-label="Date picker"
24
- />
17
+ <div class="pf-v5-c-form-control">
18
+ <input
19
+ type="text"
20
+ value="2020-03-05"
21
+ id="basic-input"
22
+ name="basic-input"
23
+ aria-label="Date picker"
24
+ />
25
+ </div>
25
26
  </div>
26
27
  <div class="pf-v5-c-input-group__item">
27
28
  <button
@@ -45,14 +46,15 @@ cssPrefix: pf-v5-c-date-picker
45
46
  <div class="pf-v5-c-date-picker__input">
46
47
  <div class="pf-v5-c-input-group">
47
48
  <div class="pf-v5-c-input-group__item pf-m-fill">
48
- <input
49
- class="pf-v5-c-form-control"
50
- type="text"
51
- value="2020-03-05"
52
- id="helper-text-input"
53
- name="helper-text-input"
54
- aria-label="Date picker"
55
- />
49
+ <div class="pf-v5-c-form-control">
50
+ <input
51
+ type="text"
52
+ value="2020-03-05"
53
+ id="helper-text-input"
54
+ name="helper-text-input"
55
+ aria-label="Date picker"
56
+ />
57
+ </div>
56
58
  </div>
57
59
  <div class="pf-v5-c-input-group__item">
58
60
  <button
@@ -83,15 +85,16 @@ cssPrefix: pf-v5-c-date-picker
83
85
  <div class="pf-v5-c-date-picker__input">
84
86
  <div class="pf-v5-c-input-group">
85
87
  <div class="pf-v5-c-input-group__item pf-m-fill">
86
- <input
87
- class="pf-v5-c-form-control"
88
- aria-invalid="true"
89
- type="text"
90
- value="2020-03-05"
91
- id="invalid-input"
92
- name="invalid-input"
93
- aria-label="Date picker"
94
- />
88
+ <div class="pf-v5-c-form-control">
89
+ <input
90
+ aria-invalid="true"
91
+ type="text"
92
+ value="2020-03-05"
93
+ id="invalid-input"
94
+ name="invalid-input"
95
+ aria-label="Date picker"
96
+ />
97
+ </div>
95
98
  </div>
96
99
  <div class="pf-v5-c-input-group__item">
97
100
  <button
@@ -122,14 +125,15 @@ cssPrefix: pf-v5-c-date-picker
122
125
  <div class="pf-v5-c-date-picker__input">
123
126
  <div class="pf-v5-c-input-group">
124
127
  <div class="pf-v5-c-input-group__item pf-m-fill">
125
- <input
126
- class="pf-v5-c-form-control"
127
- type="text"
128
- value="2020-03-05"
129
- id="expanded-input"
130
- name="expanded-input"
131
- aria-label="Date picker"
132
- />
128
+ <div class="pf-v5-c-form-control">
129
+ <input
130
+ type="text"
131
+ value="2020-03-05"
132
+ id="expanded-input"
133
+ name="expanded-input"
134
+ aria-label="Date picker"
135
+ />
136
+ </div>
133
137
  </div>
134
138
  <div class="pf-v5-c-input-group__item">
135
139
  <button
@@ -157,14 +161,15 @@ cssPrefix: pf-v5-c-date-picker
157
161
  <div class="pf-v5-c-date-picker__input">
158
162
  <div class="pf-v5-c-input-group">
159
163
  <div class="pf-v5-c-input-group__item pf-m-fill">
160
- <input
161
- class="pf-v5-c-form-control"
162
- type="text"
163
- value="November 20, 2020"
164
- id="custom-width-input-input"
165
- name="custom-width-input-input"
166
- aria-label="Date picker"
167
- />
164
+ <div class="pf-v5-c-form-control">
165
+ <input
166
+ type="text"
167
+ value="November 20, 2020"
168
+ id="custom-width-input-input"
169
+ name="custom-width-input-input"
170
+ aria-label="Date picker"
171
+ />
172
+ </div>
168
173
  </div>
169
174
  <div class="pf-v5-c-input-group__item">
170
175
  <button
@@ -191,14 +196,15 @@ cssPrefix: pf-v5-c-date-picker
191
196
  <div class="pf-v5-c-date-picker__input">
192
197
  <div class="pf-v5-c-input-group">
193
198
  <div class="pf-v5-c-input-group__item pf-m-fill">
194
- <input
195
- class="pf-v5-c-form-control"
196
- type="text"
197
- value="November 20, 2020"
198
- id="custom-width-input-based-on-number-of-characters-input"
199
- name="custom-width-input-based-on-number-of-characters-input"
200
- aria-label="Date picker"
201
- />
199
+ <div class="pf-v5-c-form-control">
200
+ <input
201
+ type="text"
202
+ value="November 20, 2020"
203
+ id="custom-width-input-based-on-number-of-characters-input"
204
+ name="custom-width-input-based-on-number-of-characters-input"
205
+ aria-label="Date picker"
206
+ />
207
+ </div>
202
208
  </div>
203
209
  <div class="pf-v5-c-input-group__item">
204
210
  <button
package/docs/components/FileUpload/examples/FileUpload.md CHANGED
@@ -12,15 +12,16 @@ cssPrefix: pf-v5-c-file-upload
12
12
  <div class="pf-v5-c-file-upload__file-select">
13
13
  <div class="pf-v5-c-input-group">
14
14
  <div class="pf-v5-c-input-group__item pf-m-fill">
15
- <input
16
- class="pf-v5-c-form-control"
17
- id="basic-file-upload-text-input"
18
- name="basic-file-upload-text-input"
19
- aria-label="Drag and drop a file or upload one"
20
- readonly
21
- placeholder="Drag and drop a file or upload one"
22
- aria-describedby="basic-file-upload-browse"
23
- />
15
+ <div class="pf-v5-c-form-control">
16
+ <input
17
+ id="basic-file-upload-text-input"
18
+ name="basic-file-upload-text-input"
19
+ aria-label="Drag and drop a file or upload one"
20
+ readonly
21
+ placeholder="Drag and drop a file or upload one"
22
+ aria-describedby="basic-file-upload-browse"
23
+ />
24
+ </div>
24
25
  </div>
25
26
  <div class="pf-v5-c-input-group__item">
26
27
  <button
@@ -35,12 +36,13 @@ cssPrefix: pf-v5-c-file-upload
35
36
  </div>
36
37
  </div>
37
38
  <div class="pf-v5-c-file-upload__file-details">
38
- <textarea
39
- class="pf-v5-c-form-control pf-m-resize-vertical"
40
- id="basic-file-upload-file-details"
41
- name="basic-file-upload-file-details"
42
- aria-label="Empty text area"
43
- ></textarea>
39
+ <div class="pf-v5-c-form-control pf-m-resize-vertical">
40
+ <textarea
41
+ id="basic-file-upload-file-details"
42
+ name="basic-file-upload-file-details"
43
+ aria-label="Empty text area"
44
+ ></textarea>
45
+ </div>
44
46
  </div>
45
47
  </div>
46
48
 
@@ -53,15 +55,16 @@ cssPrefix: pf-v5-c-file-upload
53
55
  <div class="pf-v5-c-file-upload__file-select">
54
56
  <div class="pf-v5-c-input-group">
55
57
  <div class="pf-v5-c-input-group__item pf-m-fill">
56
- <input
57
- class="pf-v5-c-form-control"
58
- id="browsed-file-upload-complete-text-input"
59
- name="browsed-file-upload-complete-text-input"
60
- aria-label="Read only filename"
61
- readonly
62
- value="Read only filename"
63
- aria-describedby="browsed-file-upload-complete-browse"
64
- />
58
+ <div class="pf-v5-c-form-control">
59
+ <input
60
+ id="browsed-file-upload-complete-text-input"
61
+ name="browsed-file-upload-complete-text-input"
62
+ aria-label="Read only filename"
63
+ readonly
64
+ value="Read only filename"
65
+ aria-describedby="browsed-file-upload-complete-browse"
66
+ />
67
+ </div>
65
68
  </div>
66
69
  <div class="pf-v5-c-input-group__item">
67
70
  <button
@@ -76,15 +79,16 @@ cssPrefix: pf-v5-c-file-upload
76
79
  </div>
77
80
  </div>
78
81
  <div class="pf-v5-c-file-upload__file-details" readonly>
79
- <textarea
80
- class="pf-v5-c-form-control pf-m-resize-vertical"
81
- id="browsed-file-upload-complete-file-details"
82
- name="browsed-file-upload-complete-file-details"
83
- aria-label="Text area"
84
- readonly
85
- >Ssh-Rsa AAh3zJFkzjjakCJialksjfB3zJFkzzAAhhMskjjakCJialksjfB3z89z3zJFkz3 +kzMAjsauoox88aaZXphBx4fczJFkzMAjsauoox88aaZXphBx4fczJFkzMAjsauoox88aaZXphBx4fc
82
+ <div class="pf-v5-c-form-control pf-m-resize-vertical">
83
+ <textarea
84
+ id="browsed-file-upload-complete-file-details"
85
+ name="browsed-file-upload-complete-file-details"
86
+ aria-label="Text area"
87
+ readonly
88
+ >Ssh-Rsa AAh3zJFkzjjakCJialksjfB3zJFkzzAAhhMskjjakCJialksjfB3z89z3zJFkz3 +kzMAjsauoox88aaZXphBx4fczJFkzMAjsauoox88aaZXphBx4fczJFkzMAjsauoox88aaZXphBx4fc
86
89
 
87
90
  </textarea>
91
+ </div>
88
92
  </div>
89
93
  </div>
90
94
 
@@ -97,15 +101,16 @@ cssPrefix: pf-v5-c-file-upload
97
101
  <div class="pf-v5-c-file-upload__file-select">
98
102
  <div class="pf-v5-c-input-group">
99
103
  <div class="pf-v5-c-input-group__item pf-m-fill">
100
- <input
101
- class="pf-v5-c-form-control"
102
- id="drop-file-text-input"
103
- name="drop-file-text-input"
104
- aria-label="Read only filename"
105
- readonly
106
- value="Sample.txt"
107
- aria-describedby="drop-file-browse"
108
- />
104
+ <div class="pf-v5-c-form-control">
105
+ <input
106
+ id="drop-file-text-input"
107
+ name="drop-file-text-input"
108
+ aria-label="Read only filename"
109
+ readonly
110
+ value="Sample.txt"
111
+ aria-describedby="drop-file-browse"
112
+ />
113
+ </div>
109
114
  </div>
110
115
  <div class="pf-v5-c-input-group__item">
111
116
  <button
@@ -120,14 +125,15 @@ cssPrefix: pf-v5-c-file-upload
120
125
  </div>
121
126
  </div>
122
127
  <div class="pf-v5-c-file-upload__file-details">
123
- <textarea
124
- class="pf-v5-c-form-control pf-m-resize-vertical"
125
- id="drop-file-file-details"
126
- name="drop-file-file-details"
127
- aria-label="Text area"
128
- >Ssh-Rsa AAh3zJFkzjjakCJialksjfB3zJFkzzAAhhMskjjakCJialksjfB3z89z3zJFkz3 +kzMAjsauoox88aaZXphBx4fczJFkzMAjsauoox88aaZXphBx4fczJFkzMAjsauoox88aaZXphBx4fc
128
+ <div class="pf-v5-c-form-control pf-m-resize-vertical">
129
+ <textarea
130
+ id="drop-file-file-details"
131
+ name="drop-file-file-details"
132
+ aria-label="Text area"
133
+ >Ssh-Rsa AAh3zJFkzjjakCJialksjfB3zJFkzzAAhhMskjjakCJialksjfB3z89z3zJFkz3 +kzMAjsauoox88aaZXphBx4fczJFkzMAjsauoox88aaZXphBx4fczJFkzMAjsauoox88aaZXphBx4fc
129
134
 
130
135
  </textarea>
136
+ </div>
131
137
  </div>
132
138
  </div>
133
139
 
@@ -140,15 +146,16 @@ cssPrefix: pf-v5-c-file-upload
140
146
  <div class="pf-v5-c-file-upload__file-select">
141
147
  <div class="pf-v5-c-input-group">
142
148
  <div class="pf-v5-c-input-group__item pf-m-fill">
143
- <input
144
- class="pf-v5-c-form-control"
145
- id="drag-file-hover-component-text-input"
146
- name="drag-file-hover-component-text-input"
147
- aria-label="Drag and drop a file or upload one"
148
- readonly
149
- placeholder="Drag and drop a file or upload one"
150
- aria-describedby="drag-file-hover-component-browse"
151
- />
149
+ <div class="pf-v5-c-form-control">
150
+ <input
151
+ id="drag-file-hover-component-text-input"
152
+ name="drag-file-hover-component-text-input"
153
+ aria-label="Drag and drop a file or upload one"
154
+ readonly
155
+ placeholder="Drag and drop a file or upload one"
156
+ aria-describedby="drag-file-hover-component-browse"
157
+ />
158
+ </div>
152
159
  </div>
153
160
  <div class="pf-v5-c-input-group__item">
154
161
  <button
@@ -163,12 +170,13 @@ cssPrefix: pf-v5-c-file-upload
163
170
  </div>
164
171
  </div>
165
172
  <div class="pf-v5-c-file-upload__file-details">
166
- <textarea
167
- class="pf-v5-c-form-control pf-m-resize-vertical"
168
- id="drag-file-hover-component-file-details"
169
- name="drag-file-hover-component-file-details"
170
- aria-label="Empty text area"
171
- ></textarea>
173
+ <div class="pf-v5-c-form-control pf-m-resize-vertical">
174
+ <textarea
175
+ id="drag-file-hover-component-file-details"
176
+ name="drag-file-hover-component-file-details"
177
+ aria-label="Empty text area"
178
+ ></textarea>
179
+ </div>
172
180
  </div>
173
181
  </div>
174
182
 
@@ -183,15 +191,16 @@ cssPrefix: pf-v5-c-file-upload
183
191
  <div class="pf-v5-c-file-upload__file-select">
184
192
  <div class="pf-v5-c-input-group">
185
193
  <div class="pf-v5-c-input-group__item pf-m-fill">
186
- <input
187
- class="pf-v5-c-form-control"
188
- id="file-upload-error-text-input"
189
- name="file-upload-error-text-input"
190
- aria-label="File upload error"
191
- required
192
- value="Sample.png"
193
- aria-describedby="file-upload-error-browse"
194
- />
194
+ <div class="pf-v5-c-form-control">
195
+ <input
196
+ id="file-upload-error-text-input"
197
+ name="file-upload-error-text-input"
198
+ aria-label="File upload error"
199
+ required
200
+ value="Sample.png"
201
+ aria-describedby="file-upload-error-browse"
202
+ />
203
+ </div>
195
204
  </div>
196
205
  <div class="pf-v5-c-input-group__item">
197
206
  <button
@@ -210,14 +219,15 @@ cssPrefix: pf-v5-c-file-upload
210
219
  aria-describedby="textAreaHelperText1"
211
220
  aria-invalid="true"
212
221
  >
213
- <textarea
214
- class="pf-v5-c-form-control pf-m-resize-vertical"
215
- id="file-upload-error-file-details"
216
- name="file-upload-error-file-details"
217
- aria-label="Empty text area"
218
- aria-describedby="textAreaHelperText1"
219
- aria-invalid="true"
220
- ></textarea>
222
+ <div class="pf-v5-c-form-control pf-m-resize-vertical">
223
+ <textarea
224
+ id="file-upload-error-file-details"
225
+ name="file-upload-error-file-details"
226
+ aria-label="Empty text area"
227
+ aria-describedby="textAreaHelperText1"
228
+ aria-invalid="true"
229
+ ></textarea>
230
+ </div>
221
231
  </div>
222
232
  </div>
223
233
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
@@ -244,15 +254,16 @@ cssPrefix: pf-v5-c-file-upload
244
254
  <div class="pf-v5-c-file-upload__file-select">
245
255
  <div class="pf-v5-c-input-group">
246
256
  <div class="pf-v5-c-input-group__item pf-m-fill">
247
- <input
248
- class="pf-v5-c-form-control"
249
- id="file-upload-loading-text-input"
250
- name="file-upload-loading"
251
- aria-label="Read only filename"
252
- readonly
253
- value="Sample.png"
254
- aria-describedby="file-upload-loading-browse"
255
- />
257
+ <div class="pf-v5-c-form-control">
258
+ <input
259
+ id="file-upload-loading-text-input"
260
+ name="file-upload-loading"
261
+ aria-label="Read only filename"
262
+ readonly
263
+ value="Sample.png"
264
+ aria-describedby="file-upload-loading-browse"
265
+ />
266
+ </div>
256
267
  </div>
257
268
  <div class="pf-v5-c-input-group__item">
258
269
  <button
@@ -268,14 +279,15 @@ cssPrefix: pf-v5-c-file-upload
268
279
  </div>
269
280
  </div>
270
281
  <div class="pf-v5-c-file-upload__file-details">
271
- <textarea
272
- class="pf-v5-c-form-control pf-m-resize-vertical"
273
- id="file-upload-loading-file-details"
274
- name="file-upload-loading-file-details"
275
- aria-label="Text area"
276
- >Ssh-Rsa AAh3zJFkzjjakCJialksjfB3zJFkzzAAhhMskjjakCJialksjfB3z89z3zJFkz3 +kzMAjsauoox88aaZXphBx4fczJFkzMAjsauoox88aaZXphBx4fczJFkzMAjsauoox88aaZXphBx4fc
282
+ <div class="pf-v5-c-form-control pf-m-resize-vertical">
283
+ <textarea
284
+ id="file-upload-loading-file-details"
285
+ name="file-upload-loading-file-details"
286
+ aria-label="Text area"
287
+ >Ssh-Rsa AAh3zJFkzjjakCJialksjfB3zJFkzzAAhhMskjjakCJialksjfB3z89z3zJFkz3 +kzMAjsauoox88aaZXphBx4fczJFkzMAjsauoox88aaZXphBx4fczJFkzMAjsauoox88aaZXphBx4fc
277
288
 
278
289
  </textarea>
290
+ </div>
279
291
 
280
292
  <div class="pf-v5-c-file-upload__file-details-spinner">
281
293
  <svg