@patternfly/patternfly 6.5.0-prerelease.62 → 6.5.0-prerelease.63

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 (51) hide show
  1. package/components/Button/button.css +2 -2
  2. package/components/Button/button.scss +3 -3
  3. package/components/Menu/menu.css +26 -19
  4. package/components/Menu/menu.scss +26 -19
  5. package/components/MenuToggle/menu-toggle.css +9 -5
  6. package/components/MenuToggle/menu-toggle.scss +12 -5
  7. package/components/_index.css +37 -26
  8. package/docs/components/Breadcrumb/examples/Breadcrumb.md +13 -1
  9. package/docs/components/CalendarMonth/examples/CalendarMonth.md +52 -4
  10. package/docs/components/Card/examples/Card.md +130 -10
  11. package/docs/components/DataList/examples/DataList.md +221 -17
  12. package/docs/components/DualListSelector/examples/DualListSelector.md +234 -18
  13. package/docs/components/Hint/examples/Hint.md +39 -3
  14. package/docs/components/InlineEdit/examples/InlineEdit.md +26 -2
  15. package/docs/components/InputGroup/examples/InputGroup.md +13 -1
  16. package/docs/components/Login/examples/Login.md +13 -1
  17. package/docs/components/Menu/examples/Menu.md +195 -15
  18. package/docs/components/MenuToggle/examples/MenuToggle.md +1331 -100
  19. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +481 -37
  20. package/docs/components/OverflowMenu/examples/overflow-menu.md +65 -5
  21. package/docs/components/Pagination/examples/Pagination.md +169 -13
  22. package/docs/components/Table/examples/Table.md +3461 -269
  23. package/docs/components/Toolbar/examples/Toolbar.md +507 -39
  24. package/docs/demos/AboutModal/examples/AboutModal.md +26 -2
  25. package/docs/demos/Alert/examples/Alert.md +78 -6
  26. package/docs/demos/BackToTop/examples/BackToTop.md +26 -2
  27. package/docs/demos/Banner/examples/Banner.md +52 -4
  28. package/docs/demos/Card/examples/Card.md +78 -6
  29. package/docs/demos/CardView/examples/CardView.md +206 -20
  30. package/docs/demos/Compass/examples/Compass.md +431 -56
  31. package/docs/demos/Dashboard/examples/Dashboard.md +63 -9
  32. package/docs/demos/DataList/examples/DataList.md +369 -45
  33. package/docs/demos/DescriptionList/examples/DescriptionList.md +91 -7
  34. package/docs/demos/Drawer/examples/Drawer.md +143 -11
  35. package/docs/demos/JumpLinks/examples/JumpLinks.md +156 -12
  36. package/docs/demos/Masthead/examples/Masthead.md +156 -12
  37. package/docs/demos/Modal/examples/Modal.md +156 -12
  38. package/docs/demos/Nav/examples/Nav.md +104 -8
  39. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +975 -75
  40. package/docs/demos/Page/examples/Page.md +390 -30
  41. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +593 -83
  42. package/docs/demos/Skeleton/examples/Skeleton.md +26 -2
  43. package/docs/demos/Table/examples/Table.md +2518 -322
  44. package/docs/demos/Tabs/examples/Tabs.md +247 -19
  45. package/docs/demos/Toolbar/examples/Toolbar.md +659 -59
  46. package/docs/demos/Wizard/examples/Wizard.md +234 -18
  47. package/package.json +1 -1
  48. package/patternfly-no-globals.css +37 -26
  49. package/patternfly.css +37 -26
  50. package/patternfly.min.css +1 -1
  51. package/patternfly.min.css.map +1 -1
@@ -23,7 +23,19 @@ The overflow menu relies on groups (`.pf-v6-c-overflow-menu__group`) and items (
23
23
  id="overflow-menu-simple-toggle"
24
24
  >
25
25
  <span class="pf-v6-c-menu-toggle__icon">
26
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
26
+ <svg
27
+ class="pf-v6-svg"
28
+ viewBox="0 0 32 32"
29
+ fill="currentColor"
30
+ aria-hidden="true"
31
+ role="img"
32
+ width="1em"
33
+ height="1em"
34
+ >
35
+ <path
36
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
37
+ />
38
+ </svg>
27
39
  </span>
28
40
  </button>
29
41
  </div>
@@ -194,7 +206,19 @@ The action group consists of a primary and secondary action. Any additional acti
194
206
  id="overflow-menu-simple-additional-options-hidden-toggle"
195
207
  >
196
208
  <span class="pf-v6-c-menu-toggle__icon">
197
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
209
+ <svg
210
+ class="pf-v6-svg"
211
+ viewBox="0 0 32 32"
212
+ fill="currentColor"
213
+ aria-hidden="true"
214
+ role="img"
215
+ width="1em"
216
+ height="1em"
217
+ >
218
+ <path
219
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
220
+ />
221
+ </svg>
198
222
  </span>
199
223
  </button>
200
224
  </div>
@@ -308,7 +332,19 @@ The action group consists of a primary and secondary action. Any additional acti
308
332
  id="overflow-menu-simple-additional-options-visible-toggle"
309
333
  >
310
334
  <span class="pf-v6-c-menu-toggle__icon">
311
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
335
+ <svg
336
+ class="pf-v6-svg"
337
+ viewBox="0 0 32 32"
338
+ fill="currentColor"
339
+ aria-hidden="true"
340
+ role="img"
341
+ width="1em"
342
+ height="1em"
343
+ >
344
+ <path
345
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
346
+ />
347
+ </svg>
312
348
  </span>
313
349
  </button>
314
350
  </div>
@@ -340,7 +376,19 @@ The action group consists of a primary and secondary action. Any additional acti
340
376
  id="overflow-menu-persistent-hidden-toggle"
341
377
  >
342
378
  <span class="pf-v6-c-menu-toggle__icon">
343
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
379
+ <svg
380
+ class="pf-v6-svg"
381
+ viewBox="0 0 32 32"
382
+ fill="currentColor"
383
+ aria-hidden="true"
384
+ role="img"
385
+ width="1em"
386
+ height="1em"
387
+ >
388
+ <path
389
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
390
+ />
391
+ </svg>
344
392
  </span>
345
393
  </button>
346
394
  </div>
@@ -383,7 +431,19 @@ The action group consists of a primary and secondary action. Any additional acti
383
431
  id="overflow-menu-persistent-visible-example-toggle"
384
432
  >
385
433
  <span class="pf-v6-c-menu-toggle__icon">
386
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
434
+ <svg
435
+ class="pf-v6-svg"
436
+ viewBox="0 0 32 32"
437
+ fill="currentColor"
438
+ aria-hidden="true"
439
+ role="img"
440
+ width="1em"
441
+ height="1em"
442
+ >
443
+ <path
444
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
445
+ />
446
+ </svg>
387
447
  </span>
388
448
  </button>
389
449
  </div>
@@ -25,7 +25,19 @@ cssPrefix: pf-v6-c-pagination
25
25
  </span>
26
26
  <span class="pf-v6-c-menu-toggle__controls">
27
27
  <span class="pf-v6-c-menu-toggle__toggle-icon">
28
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
28
+ <svg
29
+ class="pf-v6-svg"
30
+ viewBox="0 0 20 20"
31
+ fill="currentColor"
32
+ aria-hidden="true"
33
+ role="img"
34
+ width="1em"
35
+ height="1em"
36
+ >
37
+ <path
38
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
39
+ />
40
+ </svg>
29
41
  </span>
30
42
  </span>
31
43
  </button>
@@ -167,7 +179,19 @@ cssPrefix: pf-v6-c-pagination
167
179
  </span>
168
180
  <span class="pf-v6-c-menu-toggle__controls">
169
181
  <span class="pf-v6-c-menu-toggle__toggle-icon">
170
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
182
+ <svg
183
+ class="pf-v6-svg"
184
+ viewBox="0 0 20 20"
185
+ fill="currentColor"
186
+ aria-hidden="true"
187
+ role="img"
188
+ width="1em"
189
+ height="1em"
190
+ >
191
+ <path
192
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
193
+ />
194
+ </svg>
171
195
  </span>
172
196
  </span>
173
197
  </button>
@@ -319,7 +343,19 @@ cssPrefix: pf-v6-c-pagination
319
343
  </span>
320
344
  <span class="pf-v6-c-menu-toggle__controls">
321
345
  <span class="pf-v6-c-menu-toggle__toggle-icon">
322
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
346
+ <svg
347
+ class="pf-v6-svg"
348
+ viewBox="0 0 20 20"
349
+ fill="currentColor"
350
+ aria-hidden="true"
351
+ role="img"
352
+ width="1em"
353
+ height="1em"
354
+ >
355
+ <path
356
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
357
+ />
358
+ </svg>
323
359
  </span>
324
360
  </span>
325
361
  </button>
@@ -466,7 +502,19 @@ cssPrefix: pf-v6-c-pagination
466
502
  </span>
467
503
  <span class="pf-v6-c-menu-toggle__controls">
468
504
  <span class="pf-v6-c-menu-toggle__toggle-icon">
469
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
505
+ <svg
506
+ class="pf-v6-svg"
507
+ viewBox="0 0 20 20"
508
+ fill="currentColor"
509
+ aria-hidden="true"
510
+ role="img"
511
+ width="1em"
512
+ height="1em"
513
+ >
514
+ <path
515
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
516
+ />
517
+ </svg>
470
518
  </span>
471
519
  </span>
472
520
  </button>
@@ -614,7 +662,19 @@ cssPrefix: pf-v6-c-pagination
614
662
  </span>
615
663
  <span class="pf-v6-c-menu-toggle__controls">
616
664
  <span class="pf-v6-c-menu-toggle__toggle-icon">
617
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
665
+ <svg
666
+ class="pf-v6-svg"
667
+ viewBox="0 0 20 20"
668
+ fill="currentColor"
669
+ aria-hidden="true"
670
+ role="img"
671
+ width="1em"
672
+ height="1em"
673
+ >
674
+ <path
675
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
676
+ />
677
+ </svg>
618
678
  </span>
619
679
  </span>
620
680
  </button>
@@ -762,7 +822,19 @@ cssPrefix: pf-v6-c-pagination
762
822
  </span>
763
823
  <span class="pf-v6-c-menu-toggle__controls">
764
824
  <span class="pf-v6-c-menu-toggle__toggle-icon">
765
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
825
+ <svg
826
+ class="pf-v6-svg"
827
+ viewBox="0 0 20 20"
828
+ fill="currentColor"
829
+ aria-hidden="true"
830
+ role="img"
831
+ width="1em"
832
+ height="1em"
833
+ >
834
+ <path
835
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
836
+ />
837
+ </svg>
766
838
  </span>
767
839
  </span>
768
840
  </button>
@@ -905,7 +977,19 @@ cssPrefix: pf-v6-c-pagination
905
977
  </span>
906
978
  <span class="pf-v6-c-menu-toggle__controls">
907
979
  <span class="pf-v6-c-menu-toggle__toggle-icon">
908
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
980
+ <svg
981
+ class="pf-v6-svg"
982
+ viewBox="0 0 20 20"
983
+ fill="currentColor"
984
+ aria-hidden="true"
985
+ role="img"
986
+ width="1em"
987
+ height="1em"
988
+ >
989
+ <path
990
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
991
+ />
992
+ </svg>
909
993
  </span>
910
994
  </span>
911
995
  </button>
@@ -1049,7 +1133,19 @@ cssPrefix: pf-v6-c-pagination
1049
1133
  </span>
1050
1134
  <span class="pf-v6-c-menu-toggle__controls">
1051
1135
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1052
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1136
+ <svg
1137
+ class="pf-v6-svg"
1138
+ viewBox="0 0 20 20"
1139
+ fill="currentColor"
1140
+ aria-hidden="true"
1141
+ role="img"
1142
+ width="1em"
1143
+ height="1em"
1144
+ >
1145
+ <path
1146
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1147
+ />
1148
+ </svg>
1053
1149
  </span>
1054
1150
  </span>
1055
1151
  </button>
@@ -1131,7 +1227,19 @@ cssPrefix: pf-v6-c-pagination
1131
1227
  </span>
1132
1228
  <span class="pf-v6-c-menu-toggle__controls">
1133
1229
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1134
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1230
+ <svg
1231
+ class="pf-v6-svg"
1232
+ viewBox="0 0 20 20"
1233
+ fill="currentColor"
1234
+ aria-hidden="true"
1235
+ role="img"
1236
+ width="1em"
1237
+ height="1em"
1238
+ >
1239
+ <path
1240
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1241
+ />
1242
+ </svg>
1135
1243
  </span>
1136
1244
  </span>
1137
1245
  </button>
@@ -1273,7 +1381,19 @@ cssPrefix: pf-v6-c-pagination
1273
1381
  </span>
1274
1382
  <span class="pf-v6-c-menu-toggle__controls">
1275
1383
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1276
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1384
+ <svg
1385
+ class="pf-v6-svg"
1386
+ viewBox="0 0 20 20"
1387
+ fill="currentColor"
1388
+ aria-hidden="true"
1389
+ role="img"
1390
+ width="1em"
1391
+ height="1em"
1392
+ >
1393
+ <path
1394
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1395
+ />
1396
+ </svg>
1277
1397
  </span>
1278
1398
  </span>
1279
1399
  </button>
@@ -1417,7 +1537,19 @@ cssPrefix: pf-v6-c-pagination
1417
1537
  </span>
1418
1538
  <span class="pf-v6-c-menu-toggle__controls">
1419
1539
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1420
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1540
+ <svg
1541
+ class="pf-v6-svg"
1542
+ viewBox="0 0 20 20"
1543
+ fill="currentColor"
1544
+ aria-hidden="true"
1545
+ role="img"
1546
+ width="1em"
1547
+ height="1em"
1548
+ >
1549
+ <path
1550
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1551
+ />
1552
+ </svg>
1421
1553
  </span>
1422
1554
  </span>
1423
1555
  </button>
@@ -1559,7 +1691,19 @@ cssPrefix: pf-v6-c-pagination
1559
1691
  </span>
1560
1692
  <span class="pf-v6-c-menu-toggle__controls">
1561
1693
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1562
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1694
+ <svg
1695
+ class="pf-v6-svg"
1696
+ viewBox="0 0 20 20"
1697
+ fill="currentColor"
1698
+ aria-hidden="true"
1699
+ role="img"
1700
+ width="1em"
1701
+ height="1em"
1702
+ >
1703
+ <path
1704
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1705
+ />
1706
+ </svg>
1563
1707
  </span>
1564
1708
  </span>
1565
1709
  </button>
@@ -1643,7 +1787,19 @@ cssPrefix: pf-v6-c-pagination
1643
1787
  </span>
1644
1788
  <span class="pf-v6-c-menu-toggle__controls">
1645
1789
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1646
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1790
+ <svg
1791
+ class="pf-v6-svg"
1792
+ viewBox="0 0 20 20"
1793
+ fill="currentColor"
1794
+ aria-hidden="true"
1795
+ role="img"
1796
+ width="1em"
1797
+ height="1em"
1798
+ >
1799
+ <path
1800
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1801
+ />
1802
+ </svg>
1647
1803
  </span>
1648
1804
  </span>
1649
1805
  </button>