@patternfly/patternfly 4.162.2 → 4.164.2
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/RELEASE-NOTES.md +31 -0
- package/components/Dropdown/dropdown.css +4 -4
- package/components/Dropdown/dropdown.scss +11 -8
- package/components/Form/form.css +121 -1
- package/components/Form/form.scss +26 -1
- package/components/MultipleFileUpload/multiple-file-upload.css +180 -0
- package/components/MultipleFileUpload/multiple-file-upload.scss +214 -0
- package/components/Truncate/truncate.css +46 -0
- package/components/Truncate/truncate.scss +56 -0
- package/components/_all.scss +2 -0
- package/docs/components/Dropdown/examples/Dropdown.css +2 -1
- package/docs/components/Dropdown/examples/Dropdown.md +139 -0
- package/docs/components/Form/examples/Form.md +69 -41
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +685 -0
- package/docs/components/Truncate/examples/Truncate.md +71 -0
- package/package.json +1 -1
- package/patternfly-no-reset.css +352 -5
- package/patternfly.css +352 -5
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -0,0 +1,685 @@
|
|
|
1
|
+
---
|
|
2
|
+
id: 'File upload - multiple'
|
|
3
|
+
beta: true
|
|
4
|
+
section: components
|
|
5
|
+
cssPrefix: pf-c-multiple-file-upload
|
|
6
|
+
---## Examples
|
|
7
|
+
|
|
8
|
+
### Basic
|
|
9
|
+
|
|
10
|
+
```html
|
|
11
|
+
<div class="pf-c-multiple-file-upload">
|
|
12
|
+
<div class="pf-c-multiple-file-upload__main">
|
|
13
|
+
<div class="pf-c-multiple-file-upload__title">
|
|
14
|
+
<div class="pf-c-multiple-file-upload__title-icon">
|
|
15
|
+
<i class="fas fa-upload" aria-hidden="true"></i>
|
|
16
|
+
</div>
|
|
17
|
+
<div class="pf-c-multiple-file-upload__title-text">
|
|
18
|
+
Drag and drop files here
|
|
19
|
+
<div class="pf-c-multiple-file-upload__title-text-separator">or</div>
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="pf-c-multiple-file-upload__upload">
|
|
23
|
+
<button class="pf-c-button pf-m-secondary" type="button">Upload</button>
|
|
24
|
+
</div>
|
|
25
|
+
<div
|
|
26
|
+
class="pf-c-multiple-file-upload__info"
|
|
27
|
+
>Accepted file types: JPEG, Doc, PDF, PNG</div>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Drag over
|
|
34
|
+
|
|
35
|
+
```html
|
|
36
|
+
<div class="pf-c-multiple-file-upload pf-m-drag-over">
|
|
37
|
+
<div class="pf-c-multiple-file-upload__main">
|
|
38
|
+
<div class="pf-c-multiple-file-upload__title">
|
|
39
|
+
<div class="pf-c-multiple-file-upload__title-icon">
|
|
40
|
+
<i class="fas fa-upload" aria-hidden="true"></i>
|
|
41
|
+
</div>
|
|
42
|
+
<div class="pf-c-multiple-file-upload__title-text">
|
|
43
|
+
Drag and drop files here
|
|
44
|
+
<div class="pf-c-multiple-file-upload__title-text-separator">or</div>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="pf-c-multiple-file-upload__upload">
|
|
48
|
+
<button class="pf-c-button pf-m-secondary" type="button">Upload</button>
|
|
49
|
+
</div>
|
|
50
|
+
<div
|
|
51
|
+
class="pf-c-multiple-file-upload__info"
|
|
52
|
+
>Accepted file types: JPEG, Doc, PDF, PNG</div>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Horizontal
|
|
59
|
+
|
|
60
|
+
```html
|
|
61
|
+
<div class="pf-c-multiple-file-upload pf-m-horizontal">
|
|
62
|
+
<div class="pf-c-multiple-file-upload__main">
|
|
63
|
+
<div class="pf-c-multiple-file-upload__title">
|
|
64
|
+
<div class="pf-c-multiple-file-upload__title-icon">
|
|
65
|
+
<i class="fas fa-upload" aria-hidden="true"></i>
|
|
66
|
+
</div>
|
|
67
|
+
<div class="pf-c-multiple-file-upload__title-text">
|
|
68
|
+
Drag and drop files here
|
|
69
|
+
<div class="pf-c-multiple-file-upload__title-text-separator">or</div>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
<div class="pf-c-multiple-file-upload__upload">
|
|
73
|
+
<button class="pf-c-button pf-m-secondary" type="button">Upload</button>
|
|
74
|
+
</div>
|
|
75
|
+
<div
|
|
76
|
+
class="pf-c-multiple-file-upload__info"
|
|
77
|
+
>Accepted file types: JPEG, Doc, PDF, PNG</div>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### Horizontal drag over
|
|
84
|
+
|
|
85
|
+
```html
|
|
86
|
+
<div class="pf-c-multiple-file-upload pf-m-horizontal pf-m-drag-over">
|
|
87
|
+
<div class="pf-c-multiple-file-upload__main">
|
|
88
|
+
<div class="pf-c-multiple-file-upload__title">
|
|
89
|
+
<div class="pf-c-multiple-file-upload__title-icon">
|
|
90
|
+
<i class="fas fa-upload" aria-hidden="true"></i>
|
|
91
|
+
</div>
|
|
92
|
+
<div class="pf-c-multiple-file-upload__title-text">
|
|
93
|
+
Drag and drop files here
|
|
94
|
+
<div class="pf-c-multiple-file-upload__title-text-separator">or</div>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
<div class="pf-c-multiple-file-upload__upload">
|
|
98
|
+
<button class="pf-c-button pf-m-secondary" type="button">Upload</button>
|
|
99
|
+
</div>
|
|
100
|
+
<div
|
|
101
|
+
class="pf-c-multiple-file-upload__info"
|
|
102
|
+
>Accepted file types: JPEG, Doc, PDF, PNG</div>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### File upload status
|
|
109
|
+
|
|
110
|
+
```html
|
|
111
|
+
<div class="pf-c-multiple-file-upload">
|
|
112
|
+
<div class="pf-c-multiple-file-upload__main">
|
|
113
|
+
<div class="pf-c-multiple-file-upload__title">
|
|
114
|
+
<div class="pf-c-multiple-file-upload__title-icon">
|
|
115
|
+
<i class="fas fa-upload" aria-hidden="true"></i>
|
|
116
|
+
</div>
|
|
117
|
+
<div class="pf-c-multiple-file-upload__title-text">
|
|
118
|
+
Drag and drop files here
|
|
119
|
+
<div class="pf-c-multiple-file-upload__title-text-separator">or</div>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
<div class="pf-c-multiple-file-upload__upload">
|
|
123
|
+
<button class="pf-c-button pf-m-secondary" type="button">Upload</button>
|
|
124
|
+
</div>
|
|
125
|
+
<div
|
|
126
|
+
class="pf-c-multiple-file-upload__info"
|
|
127
|
+
>Accepted file types: JPEG, Doc, PDF, PNG</div>
|
|
128
|
+
</div>
|
|
129
|
+
<div class="pf-c-multiple-file-upload__status">
|
|
130
|
+
<div class="pf-c-expandable-section">
|
|
131
|
+
<button
|
|
132
|
+
type="button"
|
|
133
|
+
class="pf-c-expandable-section__toggle"
|
|
134
|
+
aria-expanded="false"
|
|
135
|
+
>
|
|
136
|
+
<span class="pf-c-expandable-section__toggle-icon">
|
|
137
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
138
|
+
</span>
|
|
139
|
+
<span class="pf-c-expandable-section__toggle-text">
|
|
140
|
+
<div class="pf-c-multiple-file-upload__status-progress">
|
|
141
|
+
<div class="pf-c-multiple-file-upload__status-progress-icon">
|
|
142
|
+
<i class="pf-icon-in-progress"></i>
|
|
143
|
+
</div>
|
|
144
|
+
<div
|
|
145
|
+
class="pf-c-multiple-file-upload__status-progress-text"
|
|
146
|
+
>0 of 3 files uploaded</div>
|
|
147
|
+
</div>
|
|
148
|
+
</span>
|
|
149
|
+
</button>
|
|
150
|
+
<div class="pf-c-expandable-section__content" hidden>
|
|
151
|
+
<ul class="pf-c-multiple-file-upload__status-list">
|
|
152
|
+
<li class="pf-c-multiple-file-upload__status-item">
|
|
153
|
+
<div class="pf-c-multiple-file-upload__status-item-icon">
|
|
154
|
+
<i class="fas fa-file" aria-hidden="true"></i>
|
|
155
|
+
</div>
|
|
156
|
+
<div class="pf-c-multiple-file-upload__status-item-main">
|
|
157
|
+
<div class="pf-c-progress" id="multiple-file-upload-progress-png">
|
|
158
|
+
<div
|
|
159
|
+
class="pf-c-progress__description"
|
|
160
|
+
id="multiple-file-upload-progress-png-description"
|
|
161
|
+
>
|
|
162
|
+
<span class="pf-c-multiple-file-upload__status-item-progress">
|
|
163
|
+
<span
|
|
164
|
+
class="pf-c-multiple-file-upload__status-item-progress-text"
|
|
165
|
+
>filename.png</span>
|
|
166
|
+
<span
|
|
167
|
+
class="pf-c-multiple-file-upload__status-item-progress-size"
|
|
168
|
+
>40 mb</span>
|
|
169
|
+
</span>
|
|
170
|
+
</div>
|
|
171
|
+
<div class="pf-c-progress__status" aria-hidden="true">
|
|
172
|
+
<span class="pf-c-progress__measure">35%</span>
|
|
173
|
+
</div>
|
|
174
|
+
<div
|
|
175
|
+
class="pf-c-progress__bar"
|
|
176
|
+
role="progressbar"
|
|
177
|
+
aria-valuemin="0"
|
|
178
|
+
aria-valuemax="100"
|
|
179
|
+
aria-valuenow="35"
|
|
180
|
+
aria-labelledby="multiple-file-upload-progress-png-description"
|
|
181
|
+
>
|
|
182
|
+
<div class="pf-c-progress__indicator" style="width:35%;"></div>
|
|
183
|
+
</div>
|
|
184
|
+
</div>
|
|
185
|
+
</div>
|
|
186
|
+
<div class="pf-c-multiple-file-upload__status-item-close">
|
|
187
|
+
<button
|
|
188
|
+
class="pf-c-button pf-m-plain"
|
|
189
|
+
type="button"
|
|
190
|
+
aria-label="Remove from list"
|
|
191
|
+
>
|
|
192
|
+
<i class="fas fa-times-circle" aria-hidden="true"></i>
|
|
193
|
+
</button>
|
|
194
|
+
</div>
|
|
195
|
+
</li>
|
|
196
|
+
<li class="pf-c-multiple-file-upload__status-item">
|
|
197
|
+
<div class="pf-c-multiple-file-upload__status-item-icon">
|
|
198
|
+
<i class="fas fa-file" aria-hidden="true"></i>
|
|
199
|
+
</div>
|
|
200
|
+
<div class="pf-c-multiple-file-upload__status-item-main">
|
|
201
|
+
<div class="pf-c-progress" id="multiple-file-upload-progress-doc">
|
|
202
|
+
<div
|
|
203
|
+
class="pf-c-progress__description"
|
|
204
|
+
id="multiple-file-upload-progress-doc-description"
|
|
205
|
+
>
|
|
206
|
+
<span class="pf-c-multiple-file-upload__status-item-progress">
|
|
207
|
+
<span
|
|
208
|
+
class="pf-c-multiple-file-upload__status-item-progress-text"
|
|
209
|
+
>filename.doc</span>
|
|
210
|
+
<span
|
|
211
|
+
class="pf-c-multiple-file-upload__status-item-progress-size"
|
|
212
|
+
>30 mb</span>
|
|
213
|
+
</span>
|
|
214
|
+
</div>
|
|
215
|
+
<div class="pf-c-progress__status" aria-hidden="true">
|
|
216
|
+
<span class="pf-c-progress__measure">70%</span>
|
|
217
|
+
</div>
|
|
218
|
+
<div
|
|
219
|
+
class="pf-c-progress__bar"
|
|
220
|
+
role="progressbar"
|
|
221
|
+
aria-valuemin="0"
|
|
222
|
+
aria-valuemax="100"
|
|
223
|
+
aria-valuenow="70"
|
|
224
|
+
aria-labelledby="multiple-file-upload-progress-doc-description"
|
|
225
|
+
>
|
|
226
|
+
<div class="pf-c-progress__indicator" style="width:70%;"></div>
|
|
227
|
+
</div>
|
|
228
|
+
</div>
|
|
229
|
+
</div>
|
|
230
|
+
<div class="pf-c-multiple-file-upload__status-item-close">
|
|
231
|
+
<button
|
|
232
|
+
class="pf-c-button pf-m-plain"
|
|
233
|
+
type="button"
|
|
234
|
+
aria-label="Remove from list"
|
|
235
|
+
>
|
|
236
|
+
<i class="fas fa-times-circle" aria-hidden="true"></i>
|
|
237
|
+
</button>
|
|
238
|
+
</div>
|
|
239
|
+
</li>
|
|
240
|
+
<li class="pf-c-multiple-file-upload__status-item">
|
|
241
|
+
<div class="pf-c-multiple-file-upload__status-item-icon">
|
|
242
|
+
<i class="fas fa-file" aria-hidden="true"></i>
|
|
243
|
+
</div>
|
|
244
|
+
<div class="pf-c-multiple-file-upload__status-item-main">
|
|
245
|
+
<div class="pf-c-progress" id="multiple-file-upload-progress-pdf">
|
|
246
|
+
<div
|
|
247
|
+
class="pf-c-progress__description"
|
|
248
|
+
id="multiple-file-upload-progress-pdf-description"
|
|
249
|
+
>
|
|
250
|
+
<span class="pf-c-multiple-file-upload__status-item-progress">
|
|
251
|
+
<span
|
|
252
|
+
class="pf-c-multiple-file-upload__status-item-progress-text"
|
|
253
|
+
>filename.pdf</span>
|
|
254
|
+
<span
|
|
255
|
+
class="pf-c-multiple-file-upload__status-item-progress-size"
|
|
256
|
+
>25 mb</span>
|
|
257
|
+
</span>
|
|
258
|
+
</div>
|
|
259
|
+
<div class="pf-c-progress__status" aria-hidden="true">
|
|
260
|
+
<span class="pf-c-progress__measure">50%</span>
|
|
261
|
+
</div>
|
|
262
|
+
<div
|
|
263
|
+
class="pf-c-progress__bar"
|
|
264
|
+
role="progressbar"
|
|
265
|
+
aria-valuemin="0"
|
|
266
|
+
aria-valuemax="100"
|
|
267
|
+
aria-valuenow="50"
|
|
268
|
+
aria-labelledby="multiple-file-upload-progress-pdf-description"
|
|
269
|
+
>
|
|
270
|
+
<div class="pf-c-progress__indicator" style="width:50%;"></div>
|
|
271
|
+
</div>
|
|
272
|
+
</div>
|
|
273
|
+
</div>
|
|
274
|
+
<div class="pf-c-multiple-file-upload__status-item-close">
|
|
275
|
+
<button
|
|
276
|
+
class="pf-c-button pf-m-plain"
|
|
277
|
+
type="button"
|
|
278
|
+
aria-label="Remove from list"
|
|
279
|
+
>
|
|
280
|
+
<i class="fas fa-times-circle" aria-hidden="true"></i>
|
|
281
|
+
</button>
|
|
282
|
+
</div>
|
|
283
|
+
</li>
|
|
284
|
+
</ul>
|
|
285
|
+
</div>
|
|
286
|
+
</div>
|
|
287
|
+
</div>
|
|
288
|
+
</div>
|
|
289
|
+
|
|
290
|
+
```
|
|
291
|
+
|
|
292
|
+
### File upload status expanded
|
|
293
|
+
|
|
294
|
+
```html
|
|
295
|
+
<div class="pf-c-multiple-file-upload">
|
|
296
|
+
<div class="pf-c-multiple-file-upload__main">
|
|
297
|
+
<div class="pf-c-multiple-file-upload__title">
|
|
298
|
+
<div class="pf-c-multiple-file-upload__title-icon">
|
|
299
|
+
<i class="fas fa-upload" aria-hidden="true"></i>
|
|
300
|
+
</div>
|
|
301
|
+
<div class="pf-c-multiple-file-upload__title-text">
|
|
302
|
+
Drag and drop files here
|
|
303
|
+
<div class="pf-c-multiple-file-upload__title-text-separator">or</div>
|
|
304
|
+
</div>
|
|
305
|
+
</div>
|
|
306
|
+
<div class="pf-c-multiple-file-upload__upload">
|
|
307
|
+
<button class="pf-c-button pf-m-secondary" type="button">Upload</button>
|
|
308
|
+
</div>
|
|
309
|
+
<div
|
|
310
|
+
class="pf-c-multiple-file-upload__info"
|
|
311
|
+
>Accepted file types: JPEG, Doc, PDF, PNG</div>
|
|
312
|
+
</div>
|
|
313
|
+
<div class="pf-c-multiple-file-upload__status">
|
|
314
|
+
<div class="pf-c-expandable-section pf-m-expanded">
|
|
315
|
+
<button
|
|
316
|
+
type="button"
|
|
317
|
+
class="pf-c-expandable-section__toggle"
|
|
318
|
+
aria-expanded="true"
|
|
319
|
+
>
|
|
320
|
+
<span class="pf-c-expandable-section__toggle-icon">
|
|
321
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
322
|
+
</span>
|
|
323
|
+
<span class="pf-c-expandable-section__toggle-text">
|
|
324
|
+
<div class="pf-c-multiple-file-upload__status-progress">
|
|
325
|
+
<div class="pf-c-multiple-file-upload__status-progress-icon">
|
|
326
|
+
<i class="pf-icon-in-progress"></i>
|
|
327
|
+
</div>
|
|
328
|
+
<div
|
|
329
|
+
class="pf-c-multiple-file-upload__status-progress-text"
|
|
330
|
+
>0 of 3 files uploaded</div>
|
|
331
|
+
</div>
|
|
332
|
+
</span>
|
|
333
|
+
</button>
|
|
334
|
+
<div class="pf-c-expandable-section__content">
|
|
335
|
+
<ul class="pf-c-multiple-file-upload__status-list">
|
|
336
|
+
<li class="pf-c-multiple-file-upload__status-item">
|
|
337
|
+
<div class="pf-c-multiple-file-upload__status-item-icon">
|
|
338
|
+
<i class="fas fa-file" aria-hidden="true"></i>
|
|
339
|
+
</div>
|
|
340
|
+
<div class="pf-c-multiple-file-upload__status-item-main">
|
|
341
|
+
<div class="pf-c-progress" id="multiple-file-upload-progress-png">
|
|
342
|
+
<div
|
|
343
|
+
class="pf-c-progress__description"
|
|
344
|
+
id="multiple-file-upload-progress-png-description"
|
|
345
|
+
>
|
|
346
|
+
<span class="pf-c-multiple-file-upload__status-item-progress">
|
|
347
|
+
<span
|
|
348
|
+
class="pf-c-multiple-file-upload__status-item-progress-text"
|
|
349
|
+
>filename.png</span>
|
|
350
|
+
<span
|
|
351
|
+
class="pf-c-multiple-file-upload__status-item-progress-size"
|
|
352
|
+
>40 mb</span>
|
|
353
|
+
</span>
|
|
354
|
+
</div>
|
|
355
|
+
<div class="pf-c-progress__status" aria-hidden="true">
|
|
356
|
+
<span class="pf-c-progress__measure">35%</span>
|
|
357
|
+
</div>
|
|
358
|
+
<div
|
|
359
|
+
class="pf-c-progress__bar"
|
|
360
|
+
role="progressbar"
|
|
361
|
+
aria-valuemin="0"
|
|
362
|
+
aria-valuemax="100"
|
|
363
|
+
aria-valuenow="35"
|
|
364
|
+
aria-labelledby="multiple-file-upload-progress-png-description"
|
|
365
|
+
>
|
|
366
|
+
<div class="pf-c-progress__indicator" style="width:35%;"></div>
|
|
367
|
+
</div>
|
|
368
|
+
</div>
|
|
369
|
+
</div>
|
|
370
|
+
<div class="pf-c-multiple-file-upload__status-item-close">
|
|
371
|
+
<button
|
|
372
|
+
class="pf-c-button pf-m-plain"
|
|
373
|
+
type="button"
|
|
374
|
+
aria-label="Remove from list"
|
|
375
|
+
>
|
|
376
|
+
<i class="fas fa-times-circle" aria-hidden="true"></i>
|
|
377
|
+
</button>
|
|
378
|
+
</div>
|
|
379
|
+
</li>
|
|
380
|
+
<li class="pf-c-multiple-file-upload__status-item">
|
|
381
|
+
<div class="pf-c-multiple-file-upload__status-item-icon">
|
|
382
|
+
<i class="fas fa-file" aria-hidden="true"></i>
|
|
383
|
+
</div>
|
|
384
|
+
<div class="pf-c-multiple-file-upload__status-item-main">
|
|
385
|
+
<div class="pf-c-progress" id="multiple-file-upload-progress-doc">
|
|
386
|
+
<div
|
|
387
|
+
class="pf-c-progress__description"
|
|
388
|
+
id="multiple-file-upload-progress-doc-description"
|
|
389
|
+
>
|
|
390
|
+
<span class="pf-c-multiple-file-upload__status-item-progress">
|
|
391
|
+
<span
|
|
392
|
+
class="pf-c-multiple-file-upload__status-item-progress-text"
|
|
393
|
+
>filename.doc</span>
|
|
394
|
+
<span
|
|
395
|
+
class="pf-c-multiple-file-upload__status-item-progress-size"
|
|
396
|
+
>30 mb</span>
|
|
397
|
+
</span>
|
|
398
|
+
</div>
|
|
399
|
+
<div class="pf-c-progress__status" aria-hidden="true">
|
|
400
|
+
<span class="pf-c-progress__measure">70%</span>
|
|
401
|
+
</div>
|
|
402
|
+
<div
|
|
403
|
+
class="pf-c-progress__bar"
|
|
404
|
+
role="progressbar"
|
|
405
|
+
aria-valuemin="0"
|
|
406
|
+
aria-valuemax="100"
|
|
407
|
+
aria-valuenow="70"
|
|
408
|
+
aria-labelledby="multiple-file-upload-progress-doc-description"
|
|
409
|
+
>
|
|
410
|
+
<div class="pf-c-progress__indicator" style="width:70%;"></div>
|
|
411
|
+
</div>
|
|
412
|
+
</div>
|
|
413
|
+
</div>
|
|
414
|
+
<div class="pf-c-multiple-file-upload__status-item-close">
|
|
415
|
+
<button
|
|
416
|
+
class="pf-c-button pf-m-plain"
|
|
417
|
+
type="button"
|
|
418
|
+
aria-label="Remove from list"
|
|
419
|
+
>
|
|
420
|
+
<i class="fas fa-times-circle" aria-hidden="true"></i>
|
|
421
|
+
</button>
|
|
422
|
+
</div>
|
|
423
|
+
</li>
|
|
424
|
+
<li class="pf-c-multiple-file-upload__status-item">
|
|
425
|
+
<div class="pf-c-multiple-file-upload__status-item-icon">
|
|
426
|
+
<i class="fas fa-file" aria-hidden="true"></i>
|
|
427
|
+
</div>
|
|
428
|
+
<div class="pf-c-multiple-file-upload__status-item-main">
|
|
429
|
+
<div class="pf-c-progress" id="multiple-file-upload-progress-pdf">
|
|
430
|
+
<div
|
|
431
|
+
class="pf-c-progress__description"
|
|
432
|
+
id="multiple-file-upload-progress-pdf-description"
|
|
433
|
+
>
|
|
434
|
+
<span class="pf-c-multiple-file-upload__status-item-progress">
|
|
435
|
+
<span
|
|
436
|
+
class="pf-c-multiple-file-upload__status-item-progress-text"
|
|
437
|
+
>filename.pdf</span>
|
|
438
|
+
<span
|
|
439
|
+
class="pf-c-multiple-file-upload__status-item-progress-size"
|
|
440
|
+
>25 mb</span>
|
|
441
|
+
</span>
|
|
442
|
+
</div>
|
|
443
|
+
<div class="pf-c-progress__status" aria-hidden="true">
|
|
444
|
+
<span class="pf-c-progress__measure">50%</span>
|
|
445
|
+
</div>
|
|
446
|
+
<div
|
|
447
|
+
class="pf-c-progress__bar"
|
|
448
|
+
role="progressbar"
|
|
449
|
+
aria-valuemin="0"
|
|
450
|
+
aria-valuemax="100"
|
|
451
|
+
aria-valuenow="50"
|
|
452
|
+
aria-labelledby="multiple-file-upload-progress-pdf-description"
|
|
453
|
+
>
|
|
454
|
+
<div class="pf-c-progress__indicator" style="width:50%;"></div>
|
|
455
|
+
</div>
|
|
456
|
+
</div>
|
|
457
|
+
</div>
|
|
458
|
+
<div class="pf-c-multiple-file-upload__status-item-close">
|
|
459
|
+
<button
|
|
460
|
+
class="pf-c-button pf-m-plain"
|
|
461
|
+
type="button"
|
|
462
|
+
aria-label="Remove from list"
|
|
463
|
+
>
|
|
464
|
+
<i class="fas fa-times-circle" aria-hidden="true"></i>
|
|
465
|
+
</button>
|
|
466
|
+
</div>
|
|
467
|
+
</li>
|
|
468
|
+
</ul>
|
|
469
|
+
</div>
|
|
470
|
+
</div>
|
|
471
|
+
</div>
|
|
472
|
+
</div>
|
|
473
|
+
|
|
474
|
+
```
|
|
475
|
+
|
|
476
|
+
### Horizontal file upload status expanded
|
|
477
|
+
|
|
478
|
+
```html
|
|
479
|
+
<div class="pf-c-multiple-file-upload pf-m-horizontal">
|
|
480
|
+
<div class="pf-c-multiple-file-upload__main">
|
|
481
|
+
<div class="pf-c-multiple-file-upload__title">
|
|
482
|
+
<div class="pf-c-multiple-file-upload__title-icon">
|
|
483
|
+
<i class="fas fa-upload" aria-hidden="true"></i>
|
|
484
|
+
</div>
|
|
485
|
+
<div class="pf-c-multiple-file-upload__title-text">
|
|
486
|
+
Drag and drop files here
|
|
487
|
+
<div class="pf-c-multiple-file-upload__title-text-separator">or</div>
|
|
488
|
+
</div>
|
|
489
|
+
</div>
|
|
490
|
+
<div class="pf-c-multiple-file-upload__upload">
|
|
491
|
+
<button class="pf-c-button pf-m-secondary" type="button">Upload</button>
|
|
492
|
+
</div>
|
|
493
|
+
<div
|
|
494
|
+
class="pf-c-multiple-file-upload__info"
|
|
495
|
+
>Accepted file types: JPEG, Doc, PDF, PNG</div>
|
|
496
|
+
</div>
|
|
497
|
+
<div class="pf-c-multiple-file-upload__status">
|
|
498
|
+
<div class="pf-c-expandable-section pf-m-expanded">
|
|
499
|
+
<button
|
|
500
|
+
type="button"
|
|
501
|
+
class="pf-c-expandable-section__toggle"
|
|
502
|
+
aria-expanded="true"
|
|
503
|
+
>
|
|
504
|
+
<span class="pf-c-expandable-section__toggle-icon">
|
|
505
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
506
|
+
</span>
|
|
507
|
+
<span class="pf-c-expandable-section__toggle-text">
|
|
508
|
+
<div class="pf-c-multiple-file-upload__status-progress">
|
|
509
|
+
<div class="pf-c-multiple-file-upload__status-progress-icon">
|
|
510
|
+
<i class="pf-icon-in-progress"></i>
|
|
511
|
+
</div>
|
|
512
|
+
<div
|
|
513
|
+
class="pf-c-multiple-file-upload__status-progress-text"
|
|
514
|
+
>0 of 3 files uploaded</div>
|
|
515
|
+
</div>
|
|
516
|
+
</span>
|
|
517
|
+
</button>
|
|
518
|
+
<div class="pf-c-expandable-section__content">
|
|
519
|
+
<ul class="pf-c-multiple-file-upload__status-list">
|
|
520
|
+
<li class="pf-c-multiple-file-upload__status-item">
|
|
521
|
+
<div class="pf-c-multiple-file-upload__status-item-icon">
|
|
522
|
+
<i class="fas fa-file" aria-hidden="true"></i>
|
|
523
|
+
</div>
|
|
524
|
+
<div class="pf-c-multiple-file-upload__status-item-main">
|
|
525
|
+
<div class="pf-c-progress" id="multiple-file-upload-progress-png">
|
|
526
|
+
<div
|
|
527
|
+
class="pf-c-progress__description"
|
|
528
|
+
id="multiple-file-upload-progress-png-description"
|
|
529
|
+
>
|
|
530
|
+
<span class="pf-c-multiple-file-upload__status-item-progress">
|
|
531
|
+
<span
|
|
532
|
+
class="pf-c-multiple-file-upload__status-item-progress-text"
|
|
533
|
+
>filename.png</span>
|
|
534
|
+
<span
|
|
535
|
+
class="pf-c-multiple-file-upload__status-item-progress-size"
|
|
536
|
+
>40 mb</span>
|
|
537
|
+
</span>
|
|
538
|
+
</div>
|
|
539
|
+
<div class="pf-c-progress__status" aria-hidden="true">
|
|
540
|
+
<span class="pf-c-progress__measure">35%</span>
|
|
541
|
+
</div>
|
|
542
|
+
<div
|
|
543
|
+
class="pf-c-progress__bar"
|
|
544
|
+
role="progressbar"
|
|
545
|
+
aria-valuemin="0"
|
|
546
|
+
aria-valuemax="100"
|
|
547
|
+
aria-valuenow="35"
|
|
548
|
+
aria-labelledby="multiple-file-upload-progress-png-description"
|
|
549
|
+
>
|
|
550
|
+
<div class="pf-c-progress__indicator" style="width:35%;"></div>
|
|
551
|
+
</div>
|
|
552
|
+
</div>
|
|
553
|
+
</div>
|
|
554
|
+
<div class="pf-c-multiple-file-upload__status-item-close">
|
|
555
|
+
<button
|
|
556
|
+
class="pf-c-button pf-m-plain"
|
|
557
|
+
type="button"
|
|
558
|
+
aria-label="Remove from list"
|
|
559
|
+
>
|
|
560
|
+
<i class="fas fa-times-circle" aria-hidden="true"></i>
|
|
561
|
+
</button>
|
|
562
|
+
</div>
|
|
563
|
+
</li>
|
|
564
|
+
<li class="pf-c-multiple-file-upload__status-item">
|
|
565
|
+
<div class="pf-c-multiple-file-upload__status-item-icon">
|
|
566
|
+
<i class="fas fa-file" aria-hidden="true"></i>
|
|
567
|
+
</div>
|
|
568
|
+
<div class="pf-c-multiple-file-upload__status-item-main">
|
|
569
|
+
<div class="pf-c-progress" id="multiple-file-upload-progress-doc">
|
|
570
|
+
<div
|
|
571
|
+
class="pf-c-progress__description"
|
|
572
|
+
id="multiple-file-upload-progress-doc-description"
|
|
573
|
+
>
|
|
574
|
+
<span class="pf-c-multiple-file-upload__status-item-progress">
|
|
575
|
+
<span
|
|
576
|
+
class="pf-c-multiple-file-upload__status-item-progress-text"
|
|
577
|
+
>filename.doc</span>
|
|
578
|
+
<span
|
|
579
|
+
class="pf-c-multiple-file-upload__status-item-progress-size"
|
|
580
|
+
>30 mb</span>
|
|
581
|
+
</span>
|
|
582
|
+
</div>
|
|
583
|
+
<div class="pf-c-progress__status" aria-hidden="true">
|
|
584
|
+
<span class="pf-c-progress__measure">70%</span>
|
|
585
|
+
</div>
|
|
586
|
+
<div
|
|
587
|
+
class="pf-c-progress__bar"
|
|
588
|
+
role="progressbar"
|
|
589
|
+
aria-valuemin="0"
|
|
590
|
+
aria-valuemax="100"
|
|
591
|
+
aria-valuenow="70"
|
|
592
|
+
aria-labelledby="multiple-file-upload-progress-doc-description"
|
|
593
|
+
>
|
|
594
|
+
<div class="pf-c-progress__indicator" style="width:70%;"></div>
|
|
595
|
+
</div>
|
|
596
|
+
</div>
|
|
597
|
+
</div>
|
|
598
|
+
<div class="pf-c-multiple-file-upload__status-item-close">
|
|
599
|
+
<button
|
|
600
|
+
class="pf-c-button pf-m-plain"
|
|
601
|
+
type="button"
|
|
602
|
+
aria-label="Remove from list"
|
|
603
|
+
>
|
|
604
|
+
<i class="fas fa-times-circle" aria-hidden="true"></i>
|
|
605
|
+
</button>
|
|
606
|
+
</div>
|
|
607
|
+
</li>
|
|
608
|
+
<li class="pf-c-multiple-file-upload__status-item">
|
|
609
|
+
<div class="pf-c-multiple-file-upload__status-item-icon">
|
|
610
|
+
<i class="fas fa-file" aria-hidden="true"></i>
|
|
611
|
+
</div>
|
|
612
|
+
<div class="pf-c-multiple-file-upload__status-item-main">
|
|
613
|
+
<div class="pf-c-progress" id="multiple-file-upload-progress-pdf">
|
|
614
|
+
<div
|
|
615
|
+
class="pf-c-progress__description"
|
|
616
|
+
id="multiple-file-upload-progress-pdf-description"
|
|
617
|
+
>
|
|
618
|
+
<span class="pf-c-multiple-file-upload__status-item-progress">
|
|
619
|
+
<span
|
|
620
|
+
class="pf-c-multiple-file-upload__status-item-progress-text"
|
|
621
|
+
>filename.pdf</span>
|
|
622
|
+
<span
|
|
623
|
+
class="pf-c-multiple-file-upload__status-item-progress-size"
|
|
624
|
+
>25 mb</span>
|
|
625
|
+
</span>
|
|
626
|
+
</div>
|
|
627
|
+
<div class="pf-c-progress__status" aria-hidden="true">
|
|
628
|
+
<span class="pf-c-progress__measure">50%</span>
|
|
629
|
+
</div>
|
|
630
|
+
<div
|
|
631
|
+
class="pf-c-progress__bar"
|
|
632
|
+
role="progressbar"
|
|
633
|
+
aria-valuemin="0"
|
|
634
|
+
aria-valuemax="100"
|
|
635
|
+
aria-valuenow="50"
|
|
636
|
+
aria-labelledby="multiple-file-upload-progress-pdf-description"
|
|
637
|
+
>
|
|
638
|
+
<div class="pf-c-progress__indicator" style="width:50%;"></div>
|
|
639
|
+
</div>
|
|
640
|
+
</div>
|
|
641
|
+
</div>
|
|
642
|
+
<div class="pf-c-multiple-file-upload__status-item-close">
|
|
643
|
+
<button
|
|
644
|
+
class="pf-c-button pf-m-plain"
|
|
645
|
+
type="button"
|
|
646
|
+
aria-label="Remove from list"
|
|
647
|
+
>
|
|
648
|
+
<i class="fas fa-times-circle" aria-hidden="true"></i>
|
|
649
|
+
</button>
|
|
650
|
+
</div>
|
|
651
|
+
</li>
|
|
652
|
+
</ul>
|
|
653
|
+
</div>
|
|
654
|
+
</div>
|
|
655
|
+
</div>
|
|
656
|
+
</div>
|
|
657
|
+
|
|
658
|
+
```
|
|
659
|
+
|
|
660
|
+
## Documentation
|
|
661
|
+
|
|
662
|
+
### Usage
|
|
663
|
+
|
|
664
|
+
| Class | Applied | Outcome |
|
|
665
|
+
| ------------------------------------------------------- | ------- | ---------------------------------------------------------- |
|
|
666
|
+
| `.pf-c-multiple-file-upload` | `<div>` | Initiates the multiple file upload component. **Required** |
|
|
667
|
+
| `.pf-c-multiple-file-upload__main` | `<div>` | Defines the main section. |
|
|
668
|
+
| `.pf-c-multiple-file-upload__title` | `<div>` | Defines the title. |
|
|
669
|
+
| `.pf-c-multiple-file-upload__title-icon` | `<div>` | Defines the title icon. |
|
|
670
|
+
| `.pf-c-multiple-file-upload__title-text` | `<div>` | Defines the title text. |
|
|
671
|
+
| `.pf-c-multiple-file-upload__title-text-separator` | `<div>` | Defines the title text separator. |
|
|
672
|
+
| `.pf-c-multiple-file-upload__upload` | `<div>` | Defines the upload button. |
|
|
673
|
+
| `.pf-c-multiple-file-upload__info` | `<div>` | Defines the info section. |
|
|
674
|
+
| `.pf-c-multiple-file-upload__status` | `<div>` | Defines the status section. |
|
|
675
|
+
| `.pf-c-multiple-file-upload__status-progress` | `<div>` | Defines the status toggle progress. |
|
|
676
|
+
| `.pf-c-multiple-file-upload__status-progress-icon` | `<div>` | Defines the status toggle progress icon. |
|
|
677
|
+
| `.pf-c-multiple-file-upload__status-progress-text` | `<div>` | Defines the status toggle progress text. |
|
|
678
|
+
| `.pf-c-multiple-file-upload__status-list` | `<div>` | Defines the status item list. |
|
|
679
|
+
| `.pf-c-multiple-file-upload__status-item` | `<div>` | Defines a status item. |
|
|
680
|
+
| `.pf-c-multiple-file-upload__status-item-icon` | `<div>` | Defines the status item icon. |
|
|
681
|
+
| `.pf-c-multiple-file-upload__status-item-main` | `<div>` | Defines the status item main progress section. |
|
|
682
|
+
| `.pf-c-multiple-file-upload__status-item-close` | `<div>` | Defines the status item close button. |
|
|
683
|
+
| `.pf-c-multiple-file-upload__status-item-progress` | `<div>` | Defines the status item progress description. |
|
|
684
|
+
| `.pf-c-multiple-file-upload__status-item-progress-text` | `<div>` | Defines the status item progress description text. |
|
|
685
|
+
| `.pf-c-multiple-file-upload__status-item-progress-size` | `<div>` | Defines the status item progress description size. |
|