@patternfly/patternfly 5.0.0-alpha.31 → 5.0.0-alpha.33

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 (37) hide show
  1. package/components/DatePicker/date-picker.css +0 -8
  2. package/components/DatePicker/date-picker.scss +0 -9
  3. package/components/HelperText/helper-text.css +4 -0
  4. package/components/HelperText/helper-text.scss +5 -0
  5. package/components/InputGroup/input-group.css +61 -85
  6. package/components/InputGroup/input-group.scss +55 -61
  7. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  8. package/components/OptionsMenu/options-menu.css +0 -5
  9. package/components/OptionsMenu/options-menu.scss +0 -6
  10. package/docs/components/CalendarMonth/examples/CalendarMonth.md +268 -252
  11. package/docs/components/DatePicker/examples/DatePicker.md +129 -94
  12. package/docs/components/FileUpload/examples/FileUpload.md +136 -96
  13. package/docs/components/Form/examples/Form.md +94 -73
  14. package/docs/components/HelperText/examples/HelperText.md +13 -24
  15. package/docs/components/InputGroup/examples/InputGroup.md +219 -169
  16. package/docs/components/Login/examples/Login.md +67 -30
  17. package/docs/components/NumberInput/examples/NumberInput.md +299 -227
  18. package/docs/components/Progress/examples/Progress.md +1 -1
  19. package/docs/components/SearchInput/examples/SearchInput.md +151 -113
  20. package/docs/components/Slider/examples/Slider.md +60 -38
  21. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -132
  22. package/docs/components/Toolbar/examples/Toolbar.md +374 -345
  23. package/docs/demos/Alert/examples/Alert.md +105 -58
  24. package/docs/demos/DataList/examples/DataList.md +158 -150
  25. package/docs/demos/Form/examples/BasicForms.md +191 -191
  26. package/docs/demos/HelperText/examples/HelperText.md +11 -8
  27. package/docs/demos/Masthead/examples/Masthead.md +279 -258
  28. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +21 -17
  29. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +100 -84
  30. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +266 -232
  31. package/docs/demos/Table/examples/Table.md +950 -902
  32. package/docs/demos/Toolbar/examples/Toolbar.md +330 -299
  33. package/package.json +2 -2
  34. package/patternfly-no-reset.css +64 -87
  35. package/patternfly.css +64 -87
  36. package/patternfly.min.css +1 -1
  37. package/patternfly.min.css.map +1 -1
package/docs/components/CalendarMonth/examples/CalendarMonth.md CHANGED
@@ -19,73 +19,77 @@ cssPrefix: pf-c-calendar-month
19
19
  </button>
20
20
  </div>
21
21
  <div class="pf-c-input-group">
22
- <div class="pf-c-calendar-month__header-month">
23
- <div class="pf-c-select">
24
- <span
25
- id="calendar-month-date-selected-month-select-label"
26
- hidden
27
- >Month</span>
22
+ <div class="pf-c-input-group__item pf-m-fill">
23
+ <div class="pf-c-calendar-month__header-month">
24
+ <div class="pf-c-select">
25
+ <span
26
+ id="calendar-month-date-selected-month-select-label"
27
+ hidden
28
+ >Month</span>
28
29
 
29
- <button
30
- class="pf-c-select__toggle"
31
- type="button"
32
- id="calendar-month-date-selected-month-select-toggle"
33
- aria-haspopup="true"
34
- aria-expanded="false"
35
- aria-labelledby="calendar-month-date-selected-month-select-label calendar-month-date-selected-month-select-toggle"
36
- >
37
- <div class="pf-c-select__toggle-wrapper">
38
- <span class="pf-c-select__toggle-text">October</span>
39
- </div>
40
- <span class="pf-c-select__toggle-arrow">
41
- <i class="fas fa-caret-down" aria-hidden="true"></i>
42
- </span>
43
- </button>
30
+ <button
31
+ class="pf-c-select__toggle"
32
+ type="button"
33
+ id="calendar-month-date-selected-month-select-toggle"
34
+ aria-haspopup="true"
35
+ aria-expanded="false"
36
+ aria-labelledby="calendar-month-date-selected-month-select-label calendar-month-date-selected-month-select-toggle"
37
+ >
38
+ <div class="pf-c-select__toggle-wrapper">
39
+ <span class="pf-c-select__toggle-text">October</span>
40
+ </div>
41
+ <span class="pf-c-select__toggle-arrow">
42
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
43
+ </span>
44
+ </button>
44
45
 
45
- <ul
46
- class="pf-c-select__menu"
47
- role="listbox"
48
- aria-labelledby="calendar-month-date-selected-month-select-label"
49
- hidden
50
- >
51
- <li role="presentation">
52
- <button class="pf-c-select__menu-item" role="option">Running</button>
53
- </li>
54
- <li role="presentation">
55
- <button
56
- class="pf-c-select__menu-item pf-m-selected"
57
- role="option"
58
- aria-selected="true"
59
- >
60
- Stopped
61
- <span class="pf-c-select__menu-item-icon">
62
- <i class="fas fa-check" aria-hidden="true"></i>
63
- </span>
64
- </button>
65
- </li>
66
- <li role="presentation">
67
- <button class="pf-c-select__menu-item" role="option">Down</button>
68
- </li>
69
- <li role="presentation">
70
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
71
- </li>
72
- <li role="presentation">
73
- <button
74
- class="pf-c-select__menu-item"
75
- role="option"
76
- >Needs maintenance</button>
77
- </li>
78
- </ul>
46
+ <ul
47
+ class="pf-c-select__menu"
48
+ role="listbox"
49
+ aria-labelledby="calendar-month-date-selected-month-select-label"
50
+ hidden
51
+ >
52
+ <li role="presentation">
53
+ <button class="pf-c-select__menu-item" role="option">Running</button>
54
+ </li>
55
+ <li role="presentation">
56
+ <button
57
+ class="pf-c-select__menu-item pf-m-selected"
58
+ role="option"
59
+ aria-selected="true"
60
+ >
61
+ Stopped
62
+ <span class="pf-c-select__menu-item-icon">
63
+ <i class="fas fa-check" aria-hidden="true"></i>
64
+ </span>
65
+ </button>
66
+ </li>
67
+ <li role="presentation">
68
+ <button class="pf-c-select__menu-item" role="option">Down</button>
69
+ </li>
70
+ <li role="presentation">
71
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
72
+ </li>
73
+ <li role="presentation">
74
+ <button
75
+ class="pf-c-select__menu-item"
76
+ role="option"
77
+ >Needs maintenance</button>
78
+ </li>
79
+ </ul>
80
+ </div>
79
81
  </div>
80
82
  </div>
81
- <div class="pf-c-calendar-month__header-year">
82
- <input
83
- class="pf-c-form-control"
84
- type="number"
85
- value="2020"
86
- id="calendar-month-date-selected-year"
87
- aria-label="Select year"
88
- />
83
+ <div class="pf-c-input-group__item">
84
+ <div class="pf-c-calendar-month__header-year">
85
+ <input
86
+ class="pf-c-form-control"
87
+ type="number"
88
+ value="2020"
89
+ id="calendar-month-date-selected-year"
90
+ aria-label="Select year"
91
+ />
92
+ </div>
89
93
  </div>
90
94
  </div>
91
95
  <div class="pf-c-calendar-month__header-nav-control pf-m-next-month">
@@ -408,73 +412,77 @@ cssPrefix: pf-c-calendar-month
408
412
  </button>
409
413
  </div>
410
414
  <div class="pf-c-input-group">
411
- <div class="pf-c-calendar-month__header-month">
412
- <div class="pf-c-select">
413
- <span
414
- id="calendar-month-range-start-date-selected-month-select-label"
415
- hidden
416
- >Month</span>
415
+ <div class="pf-c-input-group__item pf-m-fill">
416
+ <div class="pf-c-calendar-month__header-month">
417
+ <div class="pf-c-select">
418
+ <span
419
+ id="calendar-month-range-start-date-selected-month-select-label"
420
+ hidden
421
+ >Month</span>
417
422
 
418
- <button
419
- class="pf-c-select__toggle"
420
- type="button"
421
- id="calendar-month-range-start-date-selected-month-select-toggle"
422
- aria-haspopup="true"
423
- aria-expanded="false"
424
- aria-labelledby="calendar-month-range-start-date-selected-month-select-label calendar-month-range-start-date-selected-month-select-toggle"
425
- >
426
- <div class="pf-c-select__toggle-wrapper">
427
- <span class="pf-c-select__toggle-text">October</span>
428
- </div>
429
- <span class="pf-c-select__toggle-arrow">
430
- <i class="fas fa-caret-down" aria-hidden="true"></i>
431
- </span>
432
- </button>
423
+ <button
424
+ class="pf-c-select__toggle"
425
+ type="button"
426
+ id="calendar-month-range-start-date-selected-month-select-toggle"
427
+ aria-haspopup="true"
428
+ aria-expanded="false"
429
+ aria-labelledby="calendar-month-range-start-date-selected-month-select-label calendar-month-range-start-date-selected-month-select-toggle"
430
+ >
431
+ <div class="pf-c-select__toggle-wrapper">
432
+ <span class="pf-c-select__toggle-text">October</span>
433
+ </div>
434
+ <span class="pf-c-select__toggle-arrow">
435
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
436
+ </span>
437
+ </button>
433
438
 
434
- <ul
435
- class="pf-c-select__menu"
436
- role="listbox"
437
- aria-labelledby="calendar-month-range-start-date-selected-month-select-label"
438
- hidden
439
- >
440
- <li role="presentation">
441
- <button class="pf-c-select__menu-item" role="option">Running</button>
442
- </li>
443
- <li role="presentation">
444
- <button
445
- class="pf-c-select__menu-item pf-m-selected"
446
- role="option"
447
- aria-selected="true"
448
- >
449
- Stopped
450
- <span class="pf-c-select__menu-item-icon">
451
- <i class="fas fa-check" aria-hidden="true"></i>
452
- </span>
453
- </button>
454
- </li>
455
- <li role="presentation">
456
- <button class="pf-c-select__menu-item" role="option">Down</button>
457
- </li>
458
- <li role="presentation">
459
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
460
- </li>
461
- <li role="presentation">
462
- <button
463
- class="pf-c-select__menu-item"
464
- role="option"
465
- >Needs maintenance</button>
466
- </li>
467
- </ul>
439
+ <ul
440
+ class="pf-c-select__menu"
441
+ role="listbox"
442
+ aria-labelledby="calendar-month-range-start-date-selected-month-select-label"
443
+ hidden
444
+ >
445
+ <li role="presentation">
446
+ <button class="pf-c-select__menu-item" role="option">Running</button>
447
+ </li>
448
+ <li role="presentation">
449
+ <button
450
+ class="pf-c-select__menu-item pf-m-selected"
451
+ role="option"
452
+ aria-selected="true"
453
+ >
454
+ Stopped
455
+ <span class="pf-c-select__menu-item-icon">
456
+ <i class="fas fa-check" aria-hidden="true"></i>
457
+ </span>
458
+ </button>
459
+ </li>
460
+ <li role="presentation">
461
+ <button class="pf-c-select__menu-item" role="option">Down</button>
462
+ </li>
463
+ <li role="presentation">
464
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
465
+ </li>
466
+ <li role="presentation">
467
+ <button
468
+ class="pf-c-select__menu-item"
469
+ role="option"
470
+ >Needs maintenance</button>
471
+ </li>
472
+ </ul>
473
+ </div>
468
474
  </div>
469
475
  </div>
470
- <div class="pf-c-calendar-month__header-year">
471
- <input
472
- class="pf-c-form-control"
473
- type="number"
474
- value="2020"
475
- id="calendar-month-range-start-date-selected-year"
476
- aria-label="Select year"
477
- />
476
+ <div class="pf-c-input-group__item">
477
+ <div class="pf-c-calendar-month__header-year">
478
+ <input
479
+ class="pf-c-form-control"
480
+ type="number"
481
+ value="2020"
482
+ id="calendar-month-range-start-date-selected-year"
483
+ aria-label="Select year"
484
+ />
485
+ </div>
478
486
  </div>
479
487
  </div>
480
488
  <div class="pf-c-calendar-month__header-nav-control pf-m-next-month">
@@ -808,73 +816,77 @@ cssPrefix: pf-c-calendar-month
808
816
  </button>
809
817
  </div>
810
818
  <div class="pf-c-input-group">
811
- <div class="pf-c-calendar-month__header-month">
812
- <div class="pf-c-select">
813
- <span
814
- id="calendar-month-range-end-date-selected-month-select-label"
815
- hidden
816
- >Month</span>
819
+ <div class="pf-c-input-group__item pf-m-fill">
820
+ <div class="pf-c-calendar-month__header-month">
821
+ <div class="pf-c-select">
822
+ <span
823
+ id="calendar-month-range-end-date-selected-month-select-label"
824
+ hidden
825
+ >Month</span>
817
826
 
818
- <button
819
- class="pf-c-select__toggle"
820
- type="button"
821
- id="calendar-month-range-end-date-selected-month-select-toggle"
822
- aria-haspopup="true"
823
- aria-expanded="false"
824
- aria-labelledby="calendar-month-range-end-date-selected-month-select-label calendar-month-range-end-date-selected-month-select-toggle"
825
- >
826
- <div class="pf-c-select__toggle-wrapper">
827
- <span class="pf-c-select__toggle-text">October</span>
828
- </div>
829
- <span class="pf-c-select__toggle-arrow">
830
- <i class="fas fa-caret-down" aria-hidden="true"></i>
831
- </span>
832
- </button>
827
+ <button
828
+ class="pf-c-select__toggle"
829
+ type="button"
830
+ id="calendar-month-range-end-date-selected-month-select-toggle"
831
+ aria-haspopup="true"
832
+ aria-expanded="false"
833
+ aria-labelledby="calendar-month-range-end-date-selected-month-select-label calendar-month-range-end-date-selected-month-select-toggle"
834
+ >
835
+ <div class="pf-c-select__toggle-wrapper">
836
+ <span class="pf-c-select__toggle-text">October</span>
837
+ </div>
838
+ <span class="pf-c-select__toggle-arrow">
839
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
840
+ </span>
841
+ </button>
833
842
 
834
- <ul
835
- class="pf-c-select__menu"
836
- role="listbox"
837
- aria-labelledby="calendar-month-range-end-date-selected-month-select-label"
838
- hidden
839
- >
840
- <li role="presentation">
841
- <button class="pf-c-select__menu-item" role="option">Running</button>
842
- </li>
843
- <li role="presentation">
844
- <button
845
- class="pf-c-select__menu-item pf-m-selected"
846
- role="option"
847
- aria-selected="true"
848
- >
849
- Stopped
850
- <span class="pf-c-select__menu-item-icon">
851
- <i class="fas fa-check" aria-hidden="true"></i>
852
- </span>
853
- </button>
854
- </li>
855
- <li role="presentation">
856
- <button class="pf-c-select__menu-item" role="option">Down</button>
857
- </li>
858
- <li role="presentation">
859
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
860
- </li>
861
- <li role="presentation">
862
- <button
863
- class="pf-c-select__menu-item"
864
- role="option"
865
- >Needs maintenance</button>
866
- </li>
867
- </ul>
843
+ <ul
844
+ class="pf-c-select__menu"
845
+ role="listbox"
846
+ aria-labelledby="calendar-month-range-end-date-selected-month-select-label"
847
+ hidden
848
+ >
849
+ <li role="presentation">
850
+ <button class="pf-c-select__menu-item" role="option">Running</button>
851
+ </li>
852
+ <li role="presentation">
853
+ <button
854
+ class="pf-c-select__menu-item pf-m-selected"
855
+ role="option"
856
+ aria-selected="true"
857
+ >
858
+ Stopped
859
+ <span class="pf-c-select__menu-item-icon">
860
+ <i class="fas fa-check" aria-hidden="true"></i>
861
+ </span>
862
+ </button>
863
+ </li>
864
+ <li role="presentation">
865
+ <button class="pf-c-select__menu-item" role="option">Down</button>
866
+ </li>
867
+ <li role="presentation">
868
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
869
+ </li>
870
+ <li role="presentation">
871
+ <button
872
+ class="pf-c-select__menu-item"
873
+ role="option"
874
+ >Needs maintenance</button>
875
+ </li>
876
+ </ul>
877
+ </div>
868
878
  </div>
869
879
  </div>
870
- <div class="pf-c-calendar-month__header-year">
871
- <input
872
- class="pf-c-form-control"
873
- type="number"
874
- value="2020"
875
- id="calendar-month-range-end-date-selected-year"
876
- aria-label="Select year"
877
- />
880
+ <div class="pf-c-input-group__item">
881
+ <div class="pf-c-calendar-month__header-year">
882
+ <input
883
+ class="pf-c-form-control"
884
+ type="number"
885
+ value="2020"
886
+ id="calendar-month-range-end-date-selected-year"
887
+ aria-label="Select year"
888
+ />
889
+ </div>
878
890
  </div>
879
891
  </div>
880
892
  <div class="pf-c-calendar-month__header-nav-control pf-m-next-month">
@@ -1208,73 +1220,77 @@ cssPrefix: pf-c-calendar-month
1208
1220
  </button>
1209
1221
  </div>
1210
1222
  <div class="pf-c-input-group">
1211
- <div class="pf-c-calendar-month__header-month">
1212
- <div class="pf-c-select">
1213
- <span
1214
- id="calendar-month-range-start-and-end-dates-selected-month-select-label"
1215
- hidden
1216
- >Month</span>
1223
+ <div class="pf-c-input-group__item pf-m-fill">
1224
+ <div class="pf-c-calendar-month__header-month">
1225
+ <div class="pf-c-select">
1226
+ <span
1227
+ id="calendar-month-range-start-and-end-dates-selected-month-select-label"
1228
+ hidden
1229
+ >Month</span>
1217
1230
 
1218
- <button
1219
- class="pf-c-select__toggle"
1220
- type="button"
1221
- id="calendar-month-range-start-and-end-dates-selected-month-select-toggle"
1222
- aria-haspopup="true"
1223
- aria-expanded="false"
1224
- aria-labelledby="calendar-month-range-start-and-end-dates-selected-month-select-label calendar-month-range-start-and-end-dates-selected-month-select-toggle"
1225
- >
1226
- <div class="pf-c-select__toggle-wrapper">
1227
- <span class="pf-c-select__toggle-text">October</span>
1228
- </div>
1229
- <span class="pf-c-select__toggle-arrow">
1230
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1231
- </span>
1232
- </button>
1231
+ <button
1232
+ class="pf-c-select__toggle"
1233
+ type="button"
1234
+ id="calendar-month-range-start-and-end-dates-selected-month-select-toggle"
1235
+ aria-haspopup="true"
1236
+ aria-expanded="false"
1237
+ aria-labelledby="calendar-month-range-start-and-end-dates-selected-month-select-label calendar-month-range-start-and-end-dates-selected-month-select-toggle"
1238
+ >
1239
+ <div class="pf-c-select__toggle-wrapper">
1240
+ <span class="pf-c-select__toggle-text">October</span>
1241
+ </div>
1242
+ <span class="pf-c-select__toggle-arrow">
1243
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1244
+ </span>
1245
+ </button>
1233
1246
 
1234
- <ul
1235
- class="pf-c-select__menu"
1236
- role="listbox"
1237
- aria-labelledby="calendar-month-range-start-and-end-dates-selected-month-select-label"
1238
- hidden
1239
- >
1240
- <li role="presentation">
1241
- <button class="pf-c-select__menu-item" role="option">Running</button>
1242
- </li>
1243
- <li role="presentation">
1244
- <button
1245
- class="pf-c-select__menu-item pf-m-selected"
1246
- role="option"
1247
- aria-selected="true"
1248
- >
1249
- Stopped
1250
- <span class="pf-c-select__menu-item-icon">
1251
- <i class="fas fa-check" aria-hidden="true"></i>
1252
- </span>
1253
- </button>
1254
- </li>
1255
- <li role="presentation">
1256
- <button class="pf-c-select__menu-item" role="option">Down</button>
1257
- </li>
1258
- <li role="presentation">
1259
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
1260
- </li>
1261
- <li role="presentation">
1262
- <button
1263
- class="pf-c-select__menu-item"
1264
- role="option"
1265
- >Needs maintenance</button>
1266
- </li>
1267
- </ul>
1247
+ <ul
1248
+ class="pf-c-select__menu"
1249
+ role="listbox"
1250
+ aria-labelledby="calendar-month-range-start-and-end-dates-selected-month-select-label"
1251
+ hidden
1252
+ >
1253
+ <li role="presentation">
1254
+ <button class="pf-c-select__menu-item" role="option">Running</button>
1255
+ </li>
1256
+ <li role="presentation">
1257
+ <button
1258
+ class="pf-c-select__menu-item pf-m-selected"
1259
+ role="option"
1260
+ aria-selected="true"
1261
+ >
1262
+ Stopped
1263
+ <span class="pf-c-select__menu-item-icon">
1264
+ <i class="fas fa-check" aria-hidden="true"></i>
1265
+ </span>
1266
+ </button>
1267
+ </li>
1268
+ <li role="presentation">
1269
+ <button class="pf-c-select__menu-item" role="option">Down</button>
1270
+ </li>
1271
+ <li role="presentation">
1272
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
1273
+ </li>
1274
+ <li role="presentation">
1275
+ <button
1276
+ class="pf-c-select__menu-item"
1277
+ role="option"
1278
+ >Needs maintenance</button>
1279
+ </li>
1280
+ </ul>
1281
+ </div>
1268
1282
  </div>
1269
1283
  </div>
1270
- <div class="pf-c-calendar-month__header-year">
1271
- <input
1272
- class="pf-c-form-control"
1273
- type="number"
1274
- value="2020"
1275
- id="calendar-month-range-start-and-end-dates-selected-year"
1276
- aria-label="Select year"
1277
- />
1284
+ <div class="pf-c-input-group__item">
1285
+ <div class="pf-c-calendar-month__header-year">
1286
+ <input
1287
+ class="pf-c-form-control"
1288
+ type="number"
1289
+ value="2020"
1290
+ id="calendar-month-range-start-and-end-dates-selected-year"
1291
+ aria-label="Select year"
1292
+ />
1293
+ </div>
1278
1294
  </div>
1279
1295
  </div>
1280
1296
  <div class="pf-c-calendar-month__header-nav-control pf-m-next-month">