@patternfly/patternfly 6.5.0-prerelease.66 → 6.5.0-prerelease.68

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 (58) hide show
  1. package/components/Accordion/accordion.css +1 -2
  2. package/components/Accordion/accordion.scss +2 -2
  3. package/components/Card/card.css +8 -0
  4. package/components/Card/card.scss +13 -0
  5. package/components/DataList/data-list.css +1 -1
  6. package/components/DataList/data-list.scss +2 -2
  7. package/components/Drawer/drawer.css +3 -5
  8. package/components/Drawer/drawer.scss +7 -9
  9. package/components/OverflowMenu/overflow-menu.css +16 -0
  10. package/components/OverflowMenu/overflow-menu.scss +20 -1
  11. package/components/Page/page.css +11 -11
  12. package/components/Page/page.scss +2 -2
  13. package/components/Table/table.css +1 -2
  14. package/components/Table/table.scss +2 -2
  15. package/components/Toolbar/toolbar.css +100 -0
  16. package/components/Toolbar/toolbar.scss +2 -2
  17. package/components/Wizard/wizard.css +2 -2
  18. package/components/Wizard/wizard.scss +4 -4
  19. package/components/_index.css +143 -23
  20. package/docs/components/ActionList/examples/ActionList.md +2 -2
  21. package/docs/components/Alert/examples/Alert.md +4 -4
  22. package/docs/components/Button/examples/Button.md +1 -1
  23. package/docs/components/Icon/examples/Icon.md +13 -1
  24. package/docs/components/Menu/examples/Menu.md +26 -2
  25. package/docs/components/MenuToggle/examples/MenuToggle.md +172 -64
  26. package/docs/components/OverflowMenu/examples/overflow-menu.css +6 -3
  27. package/docs/components/OverflowMenu/examples/overflow-menu.md +21 -0
  28. package/docs/components/Toolbar/examples/Toolbar.md +106 -7
  29. package/docs/components/TreeView/examples/TreeView.md +4 -4
  30. package/docs/components/Wizard/examples/Wizard.md +1 -1
  31. package/docs/demos/AboutModal/examples/AboutModal.md +23 -15
  32. package/docs/demos/Alert/examples/Alert.md +69 -45
  33. package/docs/demos/BackToTop/examples/BackToTop.md +23 -15
  34. package/docs/demos/Banner/examples/Banner.md +46 -30
  35. package/docs/demos/CardView/examples/CardView.md +36 -16
  36. package/docs/demos/Compass/examples/Compass.md +76 -19
  37. package/docs/demos/Dashboard/examples/Dashboard.md +23 -15
  38. package/docs/demos/DataList/examples/DataList.md +157 -65
  39. package/docs/demos/DescriptionList/examples/DescriptionList.md +69 -45
  40. package/docs/demos/Drawer/examples/Drawer.md +115 -75
  41. package/docs/demos/JumpLinks/examples/JumpLinks.md +138 -90
  42. package/docs/demos/Masthead/examples/Masthead.md +101 -21
  43. package/docs/demos/Modal/examples/Modal.md +138 -90
  44. package/docs/demos/Nav/examples/Nav.md +188 -120
  45. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +115 -75
  46. package/docs/demos/Page/examples/Page.md +361 -213
  47. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +265 -113
  48. package/docs/demos/Skeleton/examples/Skeleton.md +23 -15
  49. package/docs/demos/Table/examples/Table.md +711 -271
  50. package/docs/demos/Tabs/examples/Tabs.md +151 -91
  51. package/docs/demos/Toolbar/examples/Toolbar.md +124 -36
  52. package/docs/demos/Wizard/examples/Wizard.md +207 -135
  53. package/package.json +1 -1
  54. package/patternfly-no-globals.css +143 -23
  55. package/patternfly.css +143 -23
  56. package/patternfly.min.css +1 -1
  57. package/patternfly.min.css.map +1 -1
  58. package/sass-utilities/mixins.scss +16 -1
package/docs/demos/Toolbar/examples/Toolbar.md CHANGED
@@ -24,7 +24,19 @@ section: components
24
24
  aria-controls="toolbar-attribute-value-search-filter-desktop-example-expandable-content"
25
25
  >
26
26
  <span class="pf-v6-c-menu-toggle__icon">
27
- <i class="fas fa-filter" aria-hidden="true"></i>
27
+ <svg
28
+ class="pf-v6-svg"
29
+ viewBox="0 0 512 512"
30
+ fill="currentColor"
31
+ aria-hidden="true"
32
+ role="img"
33
+ width="1em"
34
+ height="1em"
35
+ >
36
+ <path
37
+ d="M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z"
38
+ />
39
+ </svg>
28
40
  </span>
29
41
  </button>
30
42
  </div>
@@ -374,23 +386,11 @@ section: components
374
386
  type="button"
375
387
  aria-expanded="false"
376
388
  aria-label="Application launcher"
377
- >
378
- <span class="pf-v6-c-menu-toggle__icon">
379
- <i class="fas fa-th" aria-hidden="true"></i>
380
- </span>
381
- </button>
382
- </div>
383
- <div class="pf-v6-c-toolbar__item">
384
- <button
385
- class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
386
- type="button"
387
- aria-expanded="false"
388
- aria-label="Settings"
389
389
  >
390
390
  <span class="pf-v6-c-menu-toggle__icon">
391
391
  <svg
392
392
  class="pf-v6-svg"
393
- viewBox="0 0 32 32"
393
+ viewBox="0 0 512 512"
394
394
  fill="currentColor"
395
395
  aria-hidden="true"
396
396
  role="img"
@@ -398,12 +398,20 @@ section: components
398
398
  height="1em"
399
399
  >
400
400
  <path
401
- d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
401
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
402
402
  />
403
403
  </svg>
404
404
  </span>
405
405
  </button>
406
406
  </div>
407
+ <div class="pf-v6-c-toolbar__item">
408
+ <button
409
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
410
+ type="button"
411
+ aria-expanded="false"
412
+ aria-label="Settings"
413
+ ></button>
414
+ </div>
407
415
  <div class="pf-v6-c-toolbar__item">
408
416
  <button
409
417
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -412,7 +420,19 @@ section: components
412
420
  aria-label="Help"
413
421
  >
414
422
  <span class="pf-v6-c-menu-toggle__icon">
415
- <i class="fas fa-question-circle" aria-hidden="true"></i>
423
+ <svg
424
+ class="pf-v6-svg"
425
+ viewBox="0 0 512 512"
426
+ fill="currentColor"
427
+ aria-hidden="true"
428
+ role="img"
429
+ width="1em"
430
+ height="1em"
431
+ >
432
+ <path
433
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
434
+ />
435
+ </svg>
416
436
  </span>
417
437
  </button>
418
438
  </div>
@@ -598,7 +618,19 @@ section: components
598
618
  aria-controls="toolbar-with-validation-example-expandable-content"
599
619
  >
600
620
  <span class="pf-v6-c-menu-toggle__icon">
601
- <i class="fas fa-filter" aria-hidden="true"></i>
621
+ <svg
622
+ class="pf-v6-svg"
623
+ viewBox="0 0 512 512"
624
+ fill="currentColor"
625
+ aria-hidden="true"
626
+ role="img"
627
+ width="1em"
628
+ height="1em"
629
+ >
630
+ <path
631
+ d="M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z"
632
+ />
633
+ </svg>
602
634
  </span>
603
635
  </button>
604
636
  </div>
@@ -1534,7 +1566,19 @@ section: components
1534
1566
  aria-controls="toolbar-attribute-value-search-filter-mobile-example-expandable-content"
1535
1567
  >
1536
1568
  <span class="pf-v6-c-menu-toggle__icon">
1537
- <i class="fas fa-filter" aria-hidden="true"></i>
1569
+ <svg
1570
+ class="pf-v6-svg"
1571
+ viewBox="0 0 512 512"
1572
+ fill="currentColor"
1573
+ aria-hidden="true"
1574
+ role="img"
1575
+ width="1em"
1576
+ height="1em"
1577
+ >
1578
+ <path
1579
+ d="M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z"
1580
+ />
1581
+ </svg>
1538
1582
  </span>
1539
1583
  </button>
1540
1584
  </div>
@@ -2068,7 +2112,19 @@ section: components
2068
2112
  aria-controls="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-expandable-content"
2069
2113
  >
2070
2114
  <span class="pf-v6-c-menu-toggle__icon">
2071
- <i class="fas fa-filter" aria-hidden="true"></i>
2115
+ <svg
2116
+ class="pf-v6-svg"
2117
+ viewBox="0 0 512 512"
2118
+ fill="currentColor"
2119
+ aria-hidden="true"
2120
+ role="img"
2121
+ width="1em"
2122
+ height="1em"
2123
+ >
2124
+ <path
2125
+ d="M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z"
2126
+ />
2127
+ </svg>
2072
2128
  </span>
2073
2129
  </button>
2074
2130
  </div>
@@ -2881,7 +2937,19 @@ section: components
2881
2937
  aria-controls="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-expandable-content"
2882
2938
  >
2883
2939
  <span class="pf-v6-c-menu-toggle__icon">
2884
- <i class="fas fa-filter" aria-hidden="true"></i>
2940
+ <svg
2941
+ class="pf-v6-svg"
2942
+ viewBox="0 0 512 512"
2943
+ fill="currentColor"
2944
+ aria-hidden="true"
2945
+ role="img"
2946
+ width="1em"
2947
+ height="1em"
2948
+ >
2949
+ <path
2950
+ d="M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z"
2951
+ />
2952
+ </svg>
2885
2953
  </span>
2886
2954
  </button>
2887
2955
  </div>
@@ -3605,23 +3673,11 @@ section: components
3605
3673
  type="button"
3606
3674
  aria-expanded="false"
3607
3675
  aria-label="Application launcher"
3608
- >
3609
- <span class="pf-v6-c-menu-toggle__icon">
3610
- <i class="fas fa-th" aria-hidden="true"></i>
3611
- </span>
3612
- </button>
3613
- </div>
3614
- <div class="pf-v6-c-toolbar__item">
3615
- <button
3616
- class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
3617
- type="button"
3618
- aria-expanded="false"
3619
- aria-label="Settings"
3620
3676
  >
3621
3677
  <span class="pf-v6-c-menu-toggle__icon">
3622
3678
  <svg
3623
3679
  class="pf-v6-svg"
3624
- viewBox="0 0 32 32"
3680
+ viewBox="0 0 512 512"
3625
3681
  fill="currentColor"
3626
3682
  aria-hidden="true"
3627
3683
  role="img"
@@ -3629,12 +3685,20 @@ section: components
3629
3685
  height="1em"
3630
3686
  >
3631
3687
  <path
3632
- d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
3688
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
3633
3689
  />
3634
3690
  </svg>
3635
3691
  </span>
3636
3692
  </button>
3637
3693
  </div>
3694
+ <div class="pf-v6-c-toolbar__item">
3695
+ <button
3696
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
3697
+ type="button"
3698
+ aria-expanded="false"
3699
+ aria-label="Settings"
3700
+ ></button>
3701
+ </div>
3638
3702
  <div class="pf-v6-c-toolbar__item">
3639
3703
  <button
3640
3704
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -3643,7 +3707,19 @@ section: components
3643
3707
  aria-label="Help"
3644
3708
  >
3645
3709
  <span class="pf-v6-c-menu-toggle__icon">
3646
- <i class="fas fa-question-circle" aria-hidden="true"></i>
3710
+ <svg
3711
+ class="pf-v6-svg"
3712
+ viewBox="0 0 512 512"
3713
+ fill="currentColor"
3714
+ aria-hidden="true"
3715
+ role="img"
3716
+ width="1em"
3717
+ height="1em"
3718
+ >
3719
+ <path
3720
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
3721
+ />
3722
+ </svg>
3647
3723
  </span>
3648
3724
  </button>
3649
3725
  </div>
@@ -3832,7 +3908,19 @@ section: components
3832
3908
  aria-controls="toolbar-pagination-management-example-toolbar-expandable-content"
3833
3909
  >
3834
3910
  <span class="pf-v6-c-menu-toggle__icon">
3835
- <i class="fas fa-filter" aria-hidden="true"></i>
3911
+ <svg
3912
+ class="pf-v6-svg"
3913
+ viewBox="0 0 512 512"
3914
+ fill="currentColor"
3915
+ aria-hidden="true"
3916
+ role="img"
3917
+ width="1em"
3918
+ height="1em"
3919
+ >
3920
+ <path
3921
+ d="M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z"
3922
+ />
3923
+ </svg>
3836
3924
  </span>
3837
3925
  </button>
3838
3926
  </div>