@patternfly/patternfly 5.0.0-alpha.52 → 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 (47) hide show
  1. package/components/Divider/divider.css +12 -12
  2. package/components/FormControl/form-control.css +164 -214
  3. package/components/FormControl/form-control.scss +175 -281
  4. package/components/FormControl/themes/dark/form-control.scss +1 -2
  5. package/components/Masthead/masthead.css +12 -12
  6. package/components/NumberInput/number-input.css +0 -1
  7. package/components/NumberInput/number-input.scss +0 -1
  8. package/components/Pagination/pagination.css +12 -12
  9. package/components/Tabs/tabs.css +24 -24
  10. package/components/Toolbar/toolbar.css +54 -54
  11. package/docs/components/CalendarMonth/examples/CalendarMonth.md +32 -28
  12. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +52 -46
  13. package/docs/components/DatePicker/examples/DatePicker.md +55 -49
  14. package/docs/components/FileUpload/examples/FileUpload.md +105 -93
  15. package/docs/components/Form/examples/Form.md +165 -145
  16. package/docs/components/FormControl/examples/FormControl.md +439 -475
  17. package/docs/components/InlineEdit/examples/InlineEdit.md +87 -76
  18. package/docs/components/InputGroup/examples/InputGroup.md +84 -74
  19. package/docs/components/Login/examples/Login.md +92 -82
  20. package/docs/components/NumberInput/examples/NumberInput.md +99 -87
  21. package/docs/components/Pagination/examples/Pagination.md +100 -89
  22. package/docs/components/Select/examples/Select.md +77 -68
  23. package/docs/components/Slider/examples/Slider.md +31 -44
  24. package/docs/components/TextInputGroup/examples/TextInputGroup.md +60 -52
  25. package/docs/components/Toolbar/examples/Toolbar.md +18 -16
  26. package/docs/components/Wizard/examples/Wizard.md +280 -245
  27. package/docs/demos/Alert/examples/Alert.md +69 -57
  28. package/docs/demos/Button/examples/Button.md +54 -48
  29. package/docs/demos/CardView/examples/CardView.md +9 -8
  30. package/docs/demos/DataList/examples/DataList.md +36 -32
  31. package/docs/demos/Form/examples/BasicForms.md +247 -227
  32. package/docs/demos/HelperText/examples/HelperText.md +37 -33
  33. package/docs/demos/Modal/examples/Modal.md +14 -21
  34. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +11 -10
  35. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -40
  36. package/docs/demos/Table/examples/Table.md +99 -88
  37. package/docs/demos/Toolbar/examples/Toolbar.md +28 -25
  38. package/docs/demos/Wizard/examples/Wizard.md +448 -392
  39. package/layouts/Flex/flex.css +60 -120
  40. package/layouts/Flex/flex.scss +1 -1
  41. package/package.json +3 -3
  42. package/patternfly-no-globals.css +335 -446
  43. package/patternfly.css +335 -446
  44. package/patternfly.min.css +1 -1
  45. package/patternfly.min.css.map +1 -1
  46. package/sass-utilities/functions.scss +6 -9
  47. package/docs/components/FormControl/examples/FormControl.css +0 -5
package/docs/components/Login/examples/Login.md CHANGED
@@ -48,14 +48,15 @@ wrapperTag: div
48
48
  aria-hidden="true"
49
49
  >&#42;</span></label>
50
50
 
51
- <input
52
- class="pf-v5-c-form-control"
53
- required
54
- input="true"
55
- type="text"
56
- id="login-demo-form-username"
57
- name="login-demo-form-username"
58
- />
51
+ <div class="pf-v5-c-form-control">
52
+ <input
53
+ required
54
+ input="true"
55
+ type="text"
56
+ id="login-demo-form-username"
57
+ name="login-demo-form-username"
58
+ />
59
+ </div>
59
60
  </div>
60
61
  <div class="pf-v5-c-form__group"><label class="pf-v5-c-form__label" for="login-demo-form-password">
61
62
  <span class="pf-v5-c-form__label-text">Password</span>&nbsp;<span
@@ -63,14 +64,15 @@ wrapperTag: div
63
64
  aria-hidden="true"
64
65
  >&#42;</span></label>
65
66
 
66
- <input
67
- class="pf-v5-c-form-control"
68
- required
69
- input="true"
70
- type="password"
71
- id="login-demo-form-password"
72
- name="login-demo-form-password"
73
- />
67
+ <div class="pf-v5-c-form-control">
68
+ <input
69
+ required
70
+ input="true"
71
+ type="password"
72
+ id="login-demo-form-password"
73
+ name="login-demo-form-password"
74
+ />
75
+ </div>
74
76
  </div>
75
77
  <div class="pf-v5-c-form__group">
76
78
  <div class="pf-v5-c-check">
@@ -259,14 +261,15 @@ wrapperTag: div
259
261
  aria-hidden="true"
260
262
  >&#42;</span></label>
261
263
 
262
- <input
263
- class="pf-v5-c-form-control"
264
- required
265
- type="text"
266
- id="invalid-login-demo-form-username"
267
- name="invalid-login-demo-form-username"
268
- aria-invalid="true"
269
- />
264
+ <div class="pf-v5-c-form-control">
265
+ <input
266
+ required
267
+ type="text"
268
+ id="invalid-login-demo-form-username"
269
+ name="invalid-login-demo-form-username"
270
+ aria-invalid="true"
271
+ />
272
+ </div>
270
273
  </div>
271
274
  <div class="pf-v5-c-form__group"><label
272
275
  class="pf-v5-c-form__label"
@@ -277,14 +280,15 @@ wrapperTag: div
277
280
  aria-hidden="true"
278
281
  >&#42;</span></label>
279
282
 
280
- <input
281
- class="pf-v5-c-form-control"
282
- required
283
- type="password"
284
- id="invalid-login-demo-form-password"
285
- name="invalid-login-demo-form-password"
286
- aria-invalid="true"
287
- />
283
+ <div class="pf-v5-c-form-control">
284
+ <input
285
+ required
286
+ type="password"
287
+ id="invalid-login-demo-form-password"
288
+ name="invalid-login-demo-form-password"
289
+ aria-invalid="true"
290
+ />
291
+ </div>
288
292
  </div>
289
293
  <div class="pf-v5-c-form__group">
290
294
  <div class="pf-v5-c-check">
@@ -470,14 +474,15 @@ wrapperTag: div
470
474
  aria-hidden="true"
471
475
  >&#42;</span></label>
472
476
 
473
- <input
474
- class="pf-v5-c-form-control"
475
- required
476
- input="true"
477
- type="text"
478
- id="login-demo-form-username"
479
- name="login-demo-form-username"
480
- />
477
+ <div class="pf-v5-c-form-control">
478
+ <input
479
+ required
480
+ input="true"
481
+ type="text"
482
+ id="login-demo-form-username"
483
+ name="login-demo-form-username"
484
+ />
485
+ </div>
481
486
  </div>
482
487
  <div class="pf-v5-c-form__group"><label class="pf-v5-c-form__label" for="login-demo-form-password">
483
488
  <span class="pf-v5-c-form__label-text">Password</span>&nbsp;<span
@@ -486,15 +491,16 @@ wrapperTag: div
486
491
  >&#42;</span></label>
487
492
 
488
493
  <div class="pf-v5-c-input-group">
489
- <input
490
- class="pf-v5-c-form-control"
491
- required
492
- input="true"
493
- type="password"
494
- id="login-demo-form-password"
495
- name="login-demo-form-password"
496
- value="abcd1234"
497
- />
494
+ <div class="pf-v5-c-form-control">
495
+ <input
496
+ required
497
+ input="true"
498
+ type="password"
499
+ id="login-demo-form-password"
500
+ name="login-demo-form-password"
501
+ value="abcd1234"
502
+ />
503
+ </div>
498
504
 
499
505
  <button
500
506
  class="pf-v5-c-button pf-m-control"
@@ -696,14 +702,15 @@ wrapperTag: div
696
702
  aria-hidden="true"
697
703
  >&#42;</span></label>
698
704
 
699
- <input
700
- class="pf-v5-c-form-control"
701
- required
702
- input="true"
703
- type="text"
704
- id="login-demo-form-username"
705
- name="login-demo-form-username"
706
- />
705
+ <div class="pf-v5-c-form-control">
706
+ <input
707
+ required
708
+ input="true"
709
+ type="text"
710
+ id="login-demo-form-username"
711
+ name="login-demo-form-username"
712
+ />
713
+ </div>
707
714
  </div>
708
715
  <div class="pf-v5-c-form__group"><label class="pf-v5-c-form__label" for="login-demo-form-password">
709
716
  <span class="pf-v5-c-form__label-text">Password</span>&nbsp;<span
@@ -712,15 +719,16 @@ wrapperTag: div
712
719
  >&#42;</span></label>
713
720
 
714
721
  <div class="pf-v5-c-input-group">
715
- <input
716
- class="pf-v5-c-form-control"
717
- required
718
- input="true"
719
- type="text"
720
- id="login-demo-form-password"
721
- name="login-demo-form-password"
722
- value="abcd1234"
723
- />
722
+ <div class="pf-v5-c-form-control">
723
+ <input
724
+ required
725
+ input="true"
726
+ type="text"
727
+ id="login-demo-form-password"
728
+ name="login-demo-form-password"
729
+ value="abcd1234"
730
+ />
731
+ </div>
724
732
 
725
733
  <button
726
734
  class="pf-v5-c-button pf-m-control"
@@ -961,14 +969,15 @@ wrapperTag: div
961
969
  aria-hidden="true"
962
970
  >&#42;</span></label>
963
971
 
964
- <input
965
- class="pf-v5-c-form-control"
966
- required
967
- input="true"
968
- type="text"
969
- id="login-demo-form-username"
970
- name="login-demo-form-username"
971
- />
972
+ <div class="pf-v5-c-form-control">
973
+ <input
974
+ required
975
+ input="true"
976
+ type="text"
977
+ id="login-demo-form-username"
978
+ name="login-demo-form-username"
979
+ />
980
+ </div>
972
981
  </div>
973
982
  <div class="pf-v5-c-form__group"><label class="pf-v5-c-form__label" for="login-demo-form-password">
974
983
  <span class="pf-v5-c-form__label-text">Password</span>&nbsp;<span
@@ -976,14 +985,15 @@ wrapperTag: div
976
985
  aria-hidden="true"
977
986
  >&#42;</span></label>
978
987
 
979
- <input
980
- class="pf-v5-c-form-control"
981
- required
982
- input="true"
983
- type="password"
984
- id="login-demo-form-password"
985
- name="login-demo-form-password"
986
- />
988
+ <div class="pf-v5-c-form-control">
989
+ <input
990
+ required
991
+ input="true"
992
+ type="password"
993
+ id="login-demo-form-password"
994
+ name="login-demo-form-password"
995
+ />
996
+ </div>
987
997
  </div>
988
998
  <div class="pf-v5-c-form__group">
989
999
  <div class="pf-v5-c-check">
package/docs/components/NumberInput/examples/NumberInput.md CHANGED
@@ -21,13 +21,14 @@ cssPrefix: pf-v5-c-number-input
21
21
  </button>
22
22
  </div>
23
23
  <div class="pf-v5-c-input-group__item pf-m-fill">
24
- <input
25
- class="pf-v5-c-form-control"
26
- type="number"
27
- value="90"
28
- name="number-input-default-name"
29
- aria-label="Number input"
30
- />
24
+ <div class="pf-v5-c-form-control">
25
+ <input
26
+ type="number"
27
+ value="90"
28
+ name="number-input-default-name"
29
+ aria-label="Number input"
30
+ />
31
+ </div>
31
32
  </div>
32
33
  <div class="pf-v5-c-input-group__item">
33
34
  <button
@@ -62,13 +63,14 @@ cssPrefix: pf-v5-c-number-input
62
63
  </button>
63
64
  </div>
64
65
  <div class="pf-v5-c-input-group__item pf-m-fill">
65
- <input
66
- class="pf-v5-c-form-control"
67
- type="number"
68
- value="90"
69
- name="number-input-unit-name"
70
- aria-label="Number input"
71
- />
66
+ <div class="pf-v5-c-form-control">
67
+ <input
68
+ type="number"
69
+ value="90"
70
+ name="number-input-unit-name"
71
+ aria-label="Number input"
72
+ />
73
+ </div>
72
74
  </div>
73
75
  <div class="pf-v5-c-input-group__item">
74
76
  <button
@@ -102,13 +104,14 @@ cssPrefix: pf-v5-c-number-input
102
104
  </button>
103
105
  </div>
104
106
  <div class="pf-v5-c-input-group__item pf-m-fill">
105
- <input
106
- class="pf-v5-c-form-control"
107
- type="number"
108
- value="1.00"
109
- name="number-input-unit2-name"
110
- aria-label="Number input"
111
- />
107
+ <div class="pf-v5-c-form-control">
108
+ <input
109
+ type="number"
110
+ value="1.00"
111
+ name="number-input-unit2-name"
112
+ aria-label="Number input"
113
+ />
114
+ </div>
112
115
  </div>
113
116
  <div class="pf-v5-c-input-group__item">
114
117
  <button
@@ -144,14 +147,15 @@ cssPrefix: pf-v5-c-number-input
144
147
  </button>
145
148
  </div>
146
149
  <div class="pf-v5-c-input-group__item pf-m-fill">
147
- <input
148
- class="pf-v5-c-form-control"
149
- type="number"
150
- value="0"
151
- min="0"
152
- name="number-input-unit-lower-threshold-name"
153
- aria-label="Number input"
154
- />
150
+ <div class="pf-v5-c-form-control">
151
+ <input
152
+ type="number"
153
+ value="0"
154
+ min="0"
155
+ name="number-input-unit-lower-threshold-name"
156
+ aria-label="Number input"
157
+ />
158
+ </div>
155
159
  </div>
156
160
  <div class="pf-v5-c-input-group__item">
157
161
  <button
@@ -187,14 +191,15 @@ cssPrefix: pf-v5-c-number-input
187
191
  </button>
188
192
  </div>
189
193
  <div class="pf-v5-c-input-group__item pf-m-fill">
190
- <input
191
- class="pf-v5-c-form-control"
192
- type="number"
193
- value="100"
194
- max="100"
195
- name="number-input-unit-upper-threshold-name"
196
- aria-label="Number input"
197
- />
194
+ <div class="pf-v5-c-form-control">
195
+ <input
196
+ type="number"
197
+ value="100"
198
+ max="100"
199
+ name="number-input-unit-upper-threshold-name"
200
+ aria-label="Number input"
201
+ />
202
+ </div>
198
203
  </div>
199
204
  <div class="pf-v5-c-input-group__item">
200
205
  <button
@@ -232,14 +237,15 @@ cssPrefix: pf-v5-c-number-input
232
237
  </button>
233
238
  </div>
234
239
  <div class="pf-v5-c-input-group__item pf-m-fill">
235
- <input
236
- class="pf-v5-c-form-control"
237
- type="number"
238
- value="100"
239
- name="number-input-disabled-name"
240
- aria-label="Number input"
241
- disabled
242
- />
240
+ <div class="pf-v5-c-form-control">
241
+ <input
242
+ type="number"
243
+ value="100"
244
+ name="number-input-disabled-name"
245
+ aria-label="Number input"
246
+ disabled
247
+ />
248
+ </div>
243
249
  </div>
244
250
  <div class="pf-v5-c-input-group__item">
245
251
  <button
@@ -276,13 +282,14 @@ cssPrefix: pf-v5-c-number-input
276
282
  </button>
277
283
  </div>
278
284
  <div class="pf-v5-c-input-group__item pf-m-fill">
279
- <input
280
- class="pf-v5-c-form-control"
281
- type="number"
282
- value="90"
283
- name="number-input-status-name"
284
- aria-label="Number input"
285
- />
285
+ <div class="pf-v5-c-form-control">
286
+ <input
287
+ type="number"
288
+ value="90"
289
+ name="number-input-status-name"
290
+ aria-label="Number input"
291
+ />
292
+ </div>
286
293
  </div>
287
294
  <div class="pf-v5-c-input-group__item">
288
295
  <button
@@ -313,13 +320,14 @@ cssPrefix: pf-v5-c-number-input
313
320
  </button>
314
321
  </div>
315
322
  <div class="pf-v5-c-input-group__item pf-m-fill">
316
- <input
317
- class="pf-v5-c-form-control pf-m-warning"
318
- type="number"
319
- value="90"
320
- name="number-input-status-warning-name"
321
- aria-label="Number input"
322
- />
323
+ <div class="pf-v5-c-form-control pf-m-warning">
324
+ <input
325
+ type="number"
326
+ value="90"
327
+ name="number-input-status-warning-name"
328
+ aria-label="Number input"
329
+ />
330
+ </div>
323
331
  </div>
324
332
  <div class="pf-v5-c-input-group__item">
325
333
  <button
@@ -357,13 +365,14 @@ cssPrefix: pf-v5-c-number-input
357
365
  </button>
358
366
  </div>
359
367
  <div class="pf-v5-c-input-group__item pf-m-fill">
360
- <input
361
- class="pf-v5-c-form-control"
362
- type="number"
363
- value="1"
364
- name="number-input-sizes-name"
365
- aria-label="Number input"
366
- />
368
+ <div class="pf-v5-c-form-control">
369
+ <input
370
+ type="number"
371
+ value="1"
372
+ name="number-input-sizes-name"
373
+ aria-label="Number input"
374
+ />
375
+ </div>
367
376
  </div>
368
377
  <div class="pf-v5-c-input-group__item">
369
378
  <button
@@ -397,13 +406,14 @@ cssPrefix: pf-v5-c-number-input
397
406
  </button>
398
407
  </div>
399
408
  <div class="pf-v5-c-input-group__item pf-m-fill">
400
- <input
401
- class="pf-v5-c-form-control"
402
- type="number"
403
- value="1234567890"
404
- name="number-input-sizes2-name"
405
- aria-label="Number input"
406
- />
409
+ <div class="pf-v5-c-form-control">
410
+ <input
411
+ type="number"
412
+ value="1234567890"
413
+ name="number-input-sizes2-name"
414
+ aria-label="Number input"
415
+ />
416
+ </div>
407
417
  </div>
408
418
  <div class="pf-v5-c-input-group__item">
409
419
  <button
@@ -437,13 +447,14 @@ cssPrefix: pf-v5-c-number-input
437
447
  </button>
438
448
  </div>
439
449
  <div class="pf-v5-c-input-group__item pf-m-fill">
440
- <input
441
- class="pf-v5-c-form-control"
442
- type="number"
443
- value="5"
444
- name="number-input-sizes3-name"
445
- aria-label="Number input"
446
- />
450
+ <div class="pf-v5-c-form-control">
451
+ <input
452
+ type="number"
453
+ value="5"
454
+ name="number-input-sizes3-name"
455
+ aria-label="Number input"
456
+ />
457
+ </div>
447
458
  </div>
448
459
  <div class="pf-v5-c-input-group__item">
449
460
  <button
@@ -477,13 +488,14 @@ cssPrefix: pf-v5-c-number-input
477
488
  </button>
478
489
  </div>
479
490
  <div class="pf-v5-c-input-group__item pf-m-fill">
480
- <input
481
- class="pf-v5-c-form-control"
482
- type="number"
483
- value="12345"
484
- name="number-input-sizes4-name"
485
- aria-label="Number input"
486
- />
491
+ <div class="pf-v5-c-form-control">
492
+ <input
493
+ type="number"
494
+ value="12345"
495
+ name="number-input-sizes4-name"
496
+ aria-label="Number input"
497
+ />
498
+ </div>
487
499
  </div>
488
500
  <div class="pf-v5-c-input-group__item">
489
501
  <button