@patternfly/patternfly 4.196.1 → 4.196.4

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 (24) hide show
  1. package/assets/images/icon-github.hbs +4 -0
  2. package/assets/images/icon-google.hbs +4 -0
  3. package/assets/images/icon-red-hat.hbs +1 -0
  4. package/base/patternfly-variables.css +3 -3
  5. package/components/AboutModalBox/about-modal-box.css +1 -1
  6. package/components/Banner/banner.css +1 -1
  7. package/components/CalendarMonth/calendar-month.css +4 -4
  8. package/components/CalendarMonth/calendar-month.scss +4 -4
  9. package/components/LogViewer/log-viewer.css +1 -1
  10. package/components/Login/login.css +1 -1
  11. package/components/Masthead/masthead.css +1 -1
  12. package/components/Page/page.css +2 -2
  13. package/components/Page/page.scss +1 -1
  14. package/components/Wizard/wizard.css +1 -1
  15. package/docs/components/CalendarMonth/examples/CalendarMonth.md +264 -253
  16. package/docs/demos/Table/examples/Table.css +3 -0
  17. package/docs/demos/Table/examples/Table.md +1092 -1
  18. package/package.json +1 -1
  19. package/patternfly-base-no-reset.css +3 -3
  20. package/patternfly-base.css +3 -3
  21. package/patternfly-no-reset.css +58 -58
  22. package/patternfly.css +58 -58
  23. package/patternfly.min.css +1 -1
  24. package/patternfly.min.css.map +1 -1
package/docs/components/CalendarMonth/examples/CalendarMonth.md CHANGED
@@ -19,70 +19,75 @@ cssPrefix: pf-c-calendar-month
19
19
  <i class="fas fa-angle-left" aria-hidden="true"></i>
20
20
  </button>
21
21
  </div>
22
- <div class="pf-c-calendar-month__header-month">
23
- <div class="pf-c-select">
24
- <span id="calendar-month-date-selected-month-select-label" hidden>Month</span>
22
+ <div class="pf-c-input-group">
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>
25
29
 
26
- <button
27
- class="pf-c-select__toggle"
28
- type="button"
29
- id="calendar-month-date-selected-month-select-toggle"
30
- aria-haspopup="true"
31
- aria-expanded="false"
32
- aria-labelledby="calendar-month-date-selected-month-select-label calendar-month-date-selected-month-select-toggle"
33
- >
34
- <div class="pf-c-select__toggle-wrapper">
35
- <span class="pf-c-select__toggle-text">October</span>
36
- </div>
37
- <span class="pf-c-select__toggle-arrow">
38
- <i class="fas fa-caret-down" aria-hidden="true"></i>
39
- </span>
40
- </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>
41
45
 
42
- <ul
43
- class="pf-c-select__menu"
44
- role="listbox"
45
- aria-labelledby="calendar-month-date-selected-month-select-label"
46
- hidden
47
- >
48
- <li role="presentation">
49
- <button class="pf-c-select__menu-item" role="option">Running</button>
50
- </li>
51
- <li role="presentation">
52
- <button
53
- class="pf-c-select__menu-item pf-m-selected"
54
- role="option"
55
- aria-selected="true"
56
- >
57
- Stopped
58
- <span class="pf-c-select__menu-item-icon">
59
- <i class="fas fa-check" aria-hidden="true"></i>
60
- </span>
61
- </button>
62
- </li>
63
- <li role="presentation">
64
- <button class="pf-c-select__menu-item" role="option">Down</button>
65
- </li>
66
- <li role="presentation">
67
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
68
- </li>
69
- <li role="presentation">
70
- <button
71
- class="pf-c-select__menu-item"
72
- role="option"
73
- >Needs maintenance</button>
74
- </li>
75
- </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>
81
+ </div>
82
+ <div class="pf-c-calendar-month__header-year">
83
+ <input
84
+ class="pf-c-form-control"
85
+ type="number"
86
+ value="2020"
87
+ id="calendar-month-date-selected-year"
88
+ aria-label="Select year"
89
+ />
76
90
  </div>
77
- </div>
78
- <div class="pf-c-calendar-month__header-year">
79
- <input
80
- class="pf-c-form-control"
81
- type="number"
82
- value="2020"
83
- id="calendar-month-date-selected-year"
84
- aria-label="Select year"
85
- />
86
91
  </div>
87
92
  <div class="pf-c-calendar-month__header-nav-control pf-m-next-month">
88
93
  <button
@@ -403,73 +408,75 @@ cssPrefix: pf-c-calendar-month
403
408
  <i class="fas fa-angle-left" aria-hidden="true"></i>
404
409
  </button>
405
410
  </div>
406
- <div class="pf-c-calendar-month__header-month">
407
- <div class="pf-c-select">
408
- <span
409
- id="calendar-month-range-start-date-selected-month-select-label"
410
- hidden
411
- >Month</span>
411
+ <div class="pf-c-input-group">
412
+ <div class="pf-c-calendar-month__header-month">
413
+ <div class="pf-c-select">
414
+ <span
415
+ id="calendar-month-range-start-date-selected-month-select-label"
416
+ hidden
417
+ >Month</span>
412
418
 
413
- <button
414
- class="pf-c-select__toggle"
415
- type="button"
416
- id="calendar-month-range-start-date-selected-month-select-toggle"
417
- aria-haspopup="true"
418
- aria-expanded="false"
419
- aria-labelledby="calendar-month-range-start-date-selected-month-select-label calendar-month-range-start-date-selected-month-select-toggle"
420
- >
421
- <div class="pf-c-select__toggle-wrapper">
422
- <span class="pf-c-select__toggle-text">October</span>
423
- </div>
424
- <span class="pf-c-select__toggle-arrow">
425
- <i class="fas fa-caret-down" aria-hidden="true"></i>
426
- </span>
427
- </button>
419
+ <button
420
+ class="pf-c-select__toggle"
421
+ type="button"
422
+ id="calendar-month-range-start-date-selected-month-select-toggle"
423
+ aria-haspopup="true"
424
+ aria-expanded="false"
425
+ aria-labelledby="calendar-month-range-start-date-selected-month-select-label calendar-month-range-start-date-selected-month-select-toggle"
426
+ >
427
+ <div class="pf-c-select__toggle-wrapper">
428
+ <span class="pf-c-select__toggle-text">October</span>
429
+ </div>
430
+ <span class="pf-c-select__toggle-arrow">
431
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
432
+ </span>
433
+ </button>
428
434
 
429
- <ul
430
- class="pf-c-select__menu"
431
- role="listbox"
432
- aria-labelledby="calendar-month-range-start-date-selected-month-select-label"
433
- hidden
434
- >
435
- <li role="presentation">
436
- <button class="pf-c-select__menu-item" role="option">Running</button>
437
- </li>
438
- <li role="presentation">
439
- <button
440
- class="pf-c-select__menu-item pf-m-selected"
441
- role="option"
442
- aria-selected="true"
443
- >
444
- Stopped
445
- <span class="pf-c-select__menu-item-icon">
446
- <i class="fas fa-check" aria-hidden="true"></i>
447
- </span>
448
- </button>
449
- </li>
450
- <li role="presentation">
451
- <button class="pf-c-select__menu-item" role="option">Down</button>
452
- </li>
453
- <li role="presentation">
454
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
455
- </li>
456
- <li role="presentation">
457
- <button
458
- class="pf-c-select__menu-item"
459
- role="option"
460
- >Needs maintenance</button>
461
- </li>
462
- </ul>
435
+ <ul
436
+ class="pf-c-select__menu"
437
+ role="listbox"
438
+ aria-labelledby="calendar-month-range-start-date-selected-month-select-label"
439
+ hidden
440
+ >
441
+ <li role="presentation">
442
+ <button class="pf-c-select__menu-item" role="option">Running</button>
443
+ </li>
444
+ <li role="presentation">
445
+ <button
446
+ class="pf-c-select__menu-item pf-m-selected"
447
+ role="option"
448
+ aria-selected="true"
449
+ >
450
+ Stopped
451
+ <span class="pf-c-select__menu-item-icon">
452
+ <i class="fas fa-check" aria-hidden="true"></i>
453
+ </span>
454
+ </button>
455
+ </li>
456
+ <li role="presentation">
457
+ <button class="pf-c-select__menu-item" role="option">Down</button>
458
+ </li>
459
+ <li role="presentation">
460
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
461
+ </li>
462
+ <li role="presentation">
463
+ <button
464
+ class="pf-c-select__menu-item"
465
+ role="option"
466
+ >Needs maintenance</button>
467
+ </li>
468
+ </ul>
469
+ </div>
470
+ </div>
471
+ <div class="pf-c-calendar-month__header-year">
472
+ <input
473
+ class="pf-c-form-control"
474
+ type="number"
475
+ value="2020"
476
+ id="calendar-month-range-start-date-selected-year"
477
+ aria-label="Select year"
478
+ />
463
479
  </div>
464
- </div>
465
- <div class="pf-c-calendar-month__header-year">
466
- <input
467
- class="pf-c-form-control"
468
- type="number"
469
- value="2020"
470
- id="calendar-month-range-start-date-selected-year"
471
- aria-label="Select year"
472
- />
473
480
  </div>
474
481
  <div class="pf-c-calendar-month__header-nav-control pf-m-next-month">
475
482
  <button
@@ -801,73 +808,75 @@ cssPrefix: pf-c-calendar-month
801
808
  <i class="fas fa-angle-left" aria-hidden="true"></i>
802
809
  </button>
803
810
  </div>
804
- <div class="pf-c-calendar-month__header-month">
805
- <div class="pf-c-select">
806
- <span
807
- id="calendar-month-range-end-date-selected-month-select-label"
808
- hidden
809
- >Month</span>
811
+ <div class="pf-c-input-group">
812
+ <div class="pf-c-calendar-month__header-month">
813
+ <div class="pf-c-select">
814
+ <span
815
+ id="calendar-month-range-end-date-selected-month-select-label"
816
+ hidden
817
+ >Month</span>
810
818
 
811
- <button
812
- class="pf-c-select__toggle"
813
- type="button"
814
- id="calendar-month-range-end-date-selected-month-select-toggle"
815
- aria-haspopup="true"
816
- aria-expanded="false"
817
- aria-labelledby="calendar-month-range-end-date-selected-month-select-label calendar-month-range-end-date-selected-month-select-toggle"
818
- >
819
- <div class="pf-c-select__toggle-wrapper">
820
- <span class="pf-c-select__toggle-text">October</span>
821
- </div>
822
- <span class="pf-c-select__toggle-arrow">
823
- <i class="fas fa-caret-down" aria-hidden="true"></i>
824
- </span>
825
- </button>
819
+ <button
820
+ class="pf-c-select__toggle"
821
+ type="button"
822
+ id="calendar-month-range-end-date-selected-month-select-toggle"
823
+ aria-haspopup="true"
824
+ aria-expanded="false"
825
+ aria-labelledby="calendar-month-range-end-date-selected-month-select-label calendar-month-range-end-date-selected-month-select-toggle"
826
+ >
827
+ <div class="pf-c-select__toggle-wrapper">
828
+ <span class="pf-c-select__toggle-text">October</span>
829
+ </div>
830
+ <span class="pf-c-select__toggle-arrow">
831
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
832
+ </span>
833
+ </button>
826
834
 
827
- <ul
828
- class="pf-c-select__menu"
829
- role="listbox"
830
- aria-labelledby="calendar-month-range-end-date-selected-month-select-label"
831
- hidden
832
- >
833
- <li role="presentation">
834
- <button class="pf-c-select__menu-item" role="option">Running</button>
835
- </li>
836
- <li role="presentation">
837
- <button
838
- class="pf-c-select__menu-item pf-m-selected"
839
- role="option"
840
- aria-selected="true"
841
- >
842
- Stopped
843
- <span class="pf-c-select__menu-item-icon">
844
- <i class="fas fa-check" aria-hidden="true"></i>
845
- </span>
846
- </button>
847
- </li>
848
- <li role="presentation">
849
- <button class="pf-c-select__menu-item" role="option">Down</button>
850
- </li>
851
- <li role="presentation">
852
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
853
- </li>
854
- <li role="presentation">
855
- <button
856
- class="pf-c-select__menu-item"
857
- role="option"
858
- >Needs maintenance</button>
859
- </li>
860
- </ul>
835
+ <ul
836
+ class="pf-c-select__menu"
837
+ role="listbox"
838
+ aria-labelledby="calendar-month-range-end-date-selected-month-select-label"
839
+ hidden
840
+ >
841
+ <li role="presentation">
842
+ <button class="pf-c-select__menu-item" role="option">Running</button>
843
+ </li>
844
+ <li role="presentation">
845
+ <button
846
+ class="pf-c-select__menu-item pf-m-selected"
847
+ role="option"
848
+ aria-selected="true"
849
+ >
850
+ Stopped
851
+ <span class="pf-c-select__menu-item-icon">
852
+ <i class="fas fa-check" aria-hidden="true"></i>
853
+ </span>
854
+ </button>
855
+ </li>
856
+ <li role="presentation">
857
+ <button class="pf-c-select__menu-item" role="option">Down</button>
858
+ </li>
859
+ <li role="presentation">
860
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
861
+ </li>
862
+ <li role="presentation">
863
+ <button
864
+ class="pf-c-select__menu-item"
865
+ role="option"
866
+ >Needs maintenance</button>
867
+ </li>
868
+ </ul>
869
+ </div>
870
+ </div>
871
+ <div class="pf-c-calendar-month__header-year">
872
+ <input
873
+ class="pf-c-form-control"
874
+ type="number"
875
+ value="2020"
876
+ id="calendar-month-range-end-date-selected-year"
877
+ aria-label="Select year"
878
+ />
861
879
  </div>
862
- </div>
863
- <div class="pf-c-calendar-month__header-year">
864
- <input
865
- class="pf-c-form-control"
866
- type="number"
867
- value="2020"
868
- id="calendar-month-range-end-date-selected-year"
869
- aria-label="Select year"
870
- />
871
880
  </div>
872
881
  <div class="pf-c-calendar-month__header-nav-control pf-m-next-month">
873
882
  <button
@@ -1199,73 +1208,75 @@ cssPrefix: pf-c-calendar-month
1199
1208
  <i class="fas fa-angle-left" aria-hidden="true"></i>
1200
1209
  </button>
1201
1210
  </div>
1202
- <div class="pf-c-calendar-month__header-month">
1203
- <div class="pf-c-select">
1204
- <span
1205
- id="calendar-month-range-start-and-end-dates-selected-month-select-label"
1206
- hidden
1207
- >Month</span>
1211
+ <div class="pf-c-input-group">
1212
+ <div class="pf-c-calendar-month__header-month">
1213
+ <div class="pf-c-select">
1214
+ <span
1215
+ id="calendar-month-range-start-and-end-dates-selected-month-select-label"
1216
+ hidden
1217
+ >Month</span>
1208
1218
 
1209
- <button
1210
- class="pf-c-select__toggle"
1211
- type="button"
1212
- id="calendar-month-range-start-and-end-dates-selected-month-select-toggle"
1213
- aria-haspopup="true"
1214
- aria-expanded="false"
1215
- aria-labelledby="calendar-month-range-start-and-end-dates-selected-month-select-label calendar-month-range-start-and-end-dates-selected-month-select-toggle"
1216
- >
1217
- <div class="pf-c-select__toggle-wrapper">
1218
- <span class="pf-c-select__toggle-text">October</span>
1219
- </div>
1220
- <span class="pf-c-select__toggle-arrow">
1221
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1222
- </span>
1223
- </button>
1219
+ <button
1220
+ class="pf-c-select__toggle"
1221
+ type="button"
1222
+ id="calendar-month-range-start-and-end-dates-selected-month-select-toggle"
1223
+ aria-haspopup="true"
1224
+ aria-expanded="false"
1225
+ aria-labelledby="calendar-month-range-start-and-end-dates-selected-month-select-label calendar-month-range-start-and-end-dates-selected-month-select-toggle"
1226
+ >
1227
+ <div class="pf-c-select__toggle-wrapper">
1228
+ <span class="pf-c-select__toggle-text">October</span>
1229
+ </div>
1230
+ <span class="pf-c-select__toggle-arrow">
1231
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1232
+ </span>
1233
+ </button>
1224
1234
 
1225
- <ul
1226
- class="pf-c-select__menu"
1227
- role="listbox"
1228
- aria-labelledby="calendar-month-range-start-and-end-dates-selected-month-select-label"
1229
- hidden
1230
- >
1231
- <li role="presentation">
1232
- <button class="pf-c-select__menu-item" role="option">Running</button>
1233
- </li>
1234
- <li role="presentation">
1235
- <button
1236
- class="pf-c-select__menu-item pf-m-selected"
1237
- role="option"
1238
- aria-selected="true"
1239
- >
1240
- Stopped
1241
- <span class="pf-c-select__menu-item-icon">
1242
- <i class="fas fa-check" aria-hidden="true"></i>
1243
- </span>
1244
- </button>
1245
- </li>
1246
- <li role="presentation">
1247
- <button class="pf-c-select__menu-item" role="option">Down</button>
1248
- </li>
1249
- <li role="presentation">
1250
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
1251
- </li>
1252
- <li role="presentation">
1253
- <button
1254
- class="pf-c-select__menu-item"
1255
- role="option"
1256
- >Needs maintenance</button>
1257
- </li>
1258
- </ul>
1235
+ <ul
1236
+ class="pf-c-select__menu"
1237
+ role="listbox"
1238
+ aria-labelledby="calendar-month-range-start-and-end-dates-selected-month-select-label"
1239
+ hidden
1240
+ >
1241
+ <li role="presentation">
1242
+ <button class="pf-c-select__menu-item" role="option">Running</button>
1243
+ </li>
1244
+ <li role="presentation">
1245
+ <button
1246
+ class="pf-c-select__menu-item pf-m-selected"
1247
+ role="option"
1248
+ aria-selected="true"
1249
+ >
1250
+ Stopped
1251
+ <span class="pf-c-select__menu-item-icon">
1252
+ <i class="fas fa-check" aria-hidden="true"></i>
1253
+ </span>
1254
+ </button>
1255
+ </li>
1256
+ <li role="presentation">
1257
+ <button class="pf-c-select__menu-item" role="option">Down</button>
1258
+ </li>
1259
+ <li role="presentation">
1260
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
1261
+ </li>
1262
+ <li role="presentation">
1263
+ <button
1264
+ class="pf-c-select__menu-item"
1265
+ role="option"
1266
+ >Needs maintenance</button>
1267
+ </li>
1268
+ </ul>
1269
+ </div>
1270
+ </div>
1271
+ <div class="pf-c-calendar-month__header-year">
1272
+ <input
1273
+ class="pf-c-form-control"
1274
+ type="number"
1275
+ value="2020"
1276
+ id="calendar-month-range-start-and-end-dates-selected-year"
1277
+ aria-label="Select year"
1278
+ />
1259
1279
  </div>
1260
- </div>
1261
- <div class="pf-c-calendar-month__header-year">
1262
- <input
1263
- class="pf-c-form-control"
1264
- type="number"
1265
- value="2020"
1266
- id="calendar-month-range-start-and-end-dates-selected-year"
1267
- aria-label="Select year"
1268
- />
1269
1280
  </div>
1270
1281
  <div class="pf-c-calendar-month__header-nav-control pf-m-next-month">
1271
1282
  <button
package/docs/demos/Table/examples/Table.css ADDED
@@ -0,0 +1,3 @@
1
+ .table-demo-icon {
2
+ width: 36px;
3
+ }