@patternfly/patternfly 6.6.0-prerelease.2 → 6.6.0-prerelease.21

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 (106) hide show
  1. package/assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2 +0 -0
  2. package/assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2 +0 -0
  3. package/assets/fonts/RedHatMono/RedHatMonoVF-Italic.woff2 +0 -0
  4. package/assets/fonts/RedHatMono/RedHatMonoVF.woff2 +0 -0
  5. package/assets/fonts/RedHatText/RedHatTextVF-Italic.woff2 +0 -0
  6. package/assets/fonts/RedHatText/RedHatTextVF.woff2 +0 -0
  7. package/assets/images/img_avatar-rhds.svg +22 -0
  8. package/assets/images/pf-logo-avatar.jpg +0 -0
  9. package/base/patternfly-fonts.css +4 -4
  10. package/base/patternfly-fonts.scss +4 -4
  11. package/base/patternfly-variables.css +8 -6
  12. package/base/tokens/tokens-charts-dark.scss +1 -1
  13. package/base/tokens/tokens-charts-highcontrast-dark.scss +1 -1
  14. package/base/tokens/tokens-charts-highcontrast.scss +1 -1
  15. package/base/tokens/tokens-charts.scss +1 -1
  16. package/base/tokens/tokens-dark.scss +1 -1
  17. package/base/tokens/tokens-default.scss +4 -4
  18. package/base/tokens/tokens-felt-dark.scss +1 -1
  19. package/base/tokens/tokens-felt-glass-dark.scss +1 -1
  20. package/base/tokens/tokens-felt-glass.scss +3 -2
  21. package/base/tokens/tokens-felt-highcontrast-dark.scss +1 -1
  22. package/base/tokens/tokens-felt-highcontrast.scss +1 -1
  23. package/base/tokens/tokens-felt.scss +1 -1
  24. package/base/tokens/tokens-glass-dark.scss +1 -1
  25. package/base/tokens/tokens-glass.scss +3 -2
  26. package/base/tokens/tokens-highcontrast-dark.scss +1 -1
  27. package/base/tokens/tokens-highcontrast.scss +4 -4
  28. package/base/tokens/tokens-palette.scss +1 -1
  29. package/base/tokens/tokens-redhat-highcontrast.scss +3 -3
  30. package/components/AboutModalBox/about-modal-box.css +1 -1
  31. package/components/AboutModalBox/about-modal-box.scss +1 -1
  32. package/components/Alert/alert.css +3 -2
  33. package/components/Alert/alert.scss +3 -2
  34. package/components/Avatar/avatar.css +144 -0
  35. package/components/Avatar/avatar.scss +161 -0
  36. package/components/Banner/banner.css +7 -0
  37. package/components/Banner/banner.scss +7 -0
  38. package/components/Breadcrumb/breadcrumb.css +1 -1
  39. package/components/Breadcrumb/breadcrumb.scss +1 -1
  40. package/components/Button/button.css +18 -1
  41. package/components/Button/button.scss +21 -1
  42. package/components/ClipboardCopy/clipboard-copy.css +1 -1
  43. package/components/ClipboardCopy/clipboard-copy.scss +1 -1
  44. package/components/Compass/compass.css +5 -1
  45. package/components/Compass/compass.scss +5 -1
  46. package/components/DragDrop/drag-drop.css +4 -0
  47. package/components/DragDrop/drag-drop.scss +4 -0
  48. package/components/DualListSelector/dual-list-selector.css +1 -1
  49. package/components/DualListSelector/dual-list-selector.scss +1 -1
  50. package/components/Masthead/masthead.css +1 -1
  51. package/components/Masthead/masthead.scss +1 -1
  52. package/components/Menu/menu.css +2 -2
  53. package/components/Menu/menu.scss +3 -3
  54. package/components/MenuToggle/menu-toggle.css +3 -0
  55. package/components/MenuToggle/menu-toggle.scss +4 -1
  56. package/components/ModalBox/modal-box.css +1 -1
  57. package/components/ModalBox/modal-box.scss +1 -1
  58. package/components/NotificationDrawer/notification-drawer.css +3 -3
  59. package/components/NotificationDrawer/notification-drawer.scss +3 -3
  60. package/components/Page/page.css +30 -23
  61. package/components/Page/page.scss +35 -29
  62. package/components/Panel/panel.css +1 -1
  63. package/components/Panel/panel.scss +2 -2
  64. package/components/Progress/progress.css +2 -2
  65. package/components/Progress/progress.scss +2 -2
  66. package/components/Sidebar/sidebar.css +4 -7
  67. package/components/Sidebar/sidebar.scss +9 -9
  68. package/components/Table/table-tree-view.css +3 -0
  69. package/components/Table/table-tree-view.scss +2 -0
  70. package/components/Table/table.css +53 -19
  71. package/components/Table/table.scss +80 -32
  72. package/components/Title/title.css +1 -1
  73. package/components/Title/title.scss +1 -1
  74. package/components/Tooltip/tooltip.css +1 -1
  75. package/components/Tooltip/tooltip.scss +1 -1
  76. package/components/TreeView/tree-view.css +1 -1
  77. package/components/TreeView/tree-view.scss +1 -1
  78. package/components/Wizard/wizard.css +3 -3
  79. package/components/Wizard/wizard.scss +3 -3
  80. package/components/_index.css +294 -73
  81. package/docs/components/Avatar/examples/Avatar.css +6 -0
  82. package/docs/components/Avatar/examples/Avatar.md +414 -40
  83. package/docs/components/Drawer/examples/Drawer.md +1 -1
  84. package/docs/components/DualListSelector/examples/DualListSelector.md +85 -85
  85. package/docs/components/InputGroup/examples/InputGroup.md +1 -1
  86. package/docs/components/MenuToggle/examples/MenuToggle.md +54 -15
  87. package/docs/components/Pagination/examples/Pagination.md +120 -120
  88. package/docs/components/Sidebar/examples/Sidebar.md +3 -1
  89. package/docs/components/Table/examples/Table.css +6 -0
  90. package/docs/components/Table/examples/Table.md +305 -18
  91. package/docs/components/Toolbar/examples/Toolbar.md +16 -16
  92. package/docs/components/TreeView/examples/TreeView.md +100 -100
  93. package/docs/demos/CardView/examples/CardView.md +12 -12
  94. package/docs/demos/Compass/examples/Compass.md +91 -35
  95. package/docs/demos/Dashboard/examples/Dashboard.md +27 -30
  96. package/docs/demos/DataList/examples/DataList.md +48 -48
  97. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +20 -20
  98. package/docs/demos/Table/examples/Table.md +160 -160
  99. package/docs/demos/Toolbar/examples/Toolbar.md +36 -36
  100. package/package.json +7 -7
  101. package/patternfly-base-no-globals.css +12 -10
  102. package/patternfly-base.css +12 -10
  103. package/patternfly-no-globals.css +306 -83
  104. package/patternfly.css +306 -83
  105. package/patternfly.min.css +1 -1
  106. package/patternfly.min.css.map +1 -1
@@ -702,14 +702,14 @@ section: patterns
702
702
  <svg
703
703
  class="pf-v6-svg"
704
704
  fill="currentColor"
705
- viewBox="0 0 256 512"
705
+ viewBox="0 0 20 20"
706
706
  aria-hidden="true"
707
707
  role="img"
708
708
  width="1em"
709
709
  height="1em"
710
710
  >
711
711
  <path
712
- d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
712
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
713
713
  />
714
714
  </svg>
715
715
  </span>
@@ -725,14 +725,14 @@ section: patterns
725
725
  <svg
726
726
  class="pf-v6-svg"
727
727
  fill="currentColor"
728
- viewBox="0 0 256 512"
728
+ viewBox="0 0 20 20"
729
729
  aria-hidden="true"
730
730
  role="img"
731
731
  width="1em"
732
732
  height="1em"
733
733
  >
734
734
  <path
735
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
735
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
736
736
  />
737
737
  </svg>
738
738
  </span>
@@ -1413,14 +1413,14 @@ section: patterns
1413
1413
  <svg
1414
1414
  class="pf-v6-svg"
1415
1415
  fill="currentColor"
1416
- viewBox="0 0 448 512"
1416
+ viewBox="0 0 20 20"
1417
1417
  aria-hidden="true"
1418
1418
  role="img"
1419
1419
  width="1em"
1420
1420
  height="1em"
1421
1421
  >
1422
1422
  <path
1423
- d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
1423
+ d="M10 19a.997.997 0 0 1-.707-.293l-7.647-7.646c-.283-.284-.439-.66-.439-1.061s.156-.777.44-1.06l7.646-7.647a1 1 0 1 1 1.414 1.414L3.414 10l7.293 7.293A1 1 0 0 1 10 19Zm8.707-.293a1 1 0 0 0 0-1.414L11.414 10l7.293-7.293a1 1 0 1 0-1.414-1.414L9.646 8.939c-.283.284-.439.66-.439 1.061s.156.777.44 1.06l7.646 7.647a.997.997 0 0 0 1.414 0Z"
1424
1424
  />
1425
1425
  </svg>
1426
1426
  </span>
@@ -1437,14 +1437,14 @@ section: patterns
1437
1437
  <svg
1438
1438
  class="pf-v6-svg"
1439
1439
  fill="currentColor"
1440
- viewBox="0 0 256 512"
1440
+ viewBox="0 0 20 20"
1441
1441
  aria-hidden="true"
1442
1442
  role="img"
1443
1443
  width="1em"
1444
1444
  height="1em"
1445
1445
  >
1446
1446
  <path
1447
- d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
1447
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
1448
1448
  />
1449
1449
  </svg>
1450
1450
  </span>
@@ -1472,14 +1472,14 @@ section: patterns
1472
1472
  <svg
1473
1473
  class="pf-v6-svg"
1474
1474
  fill="currentColor"
1475
- viewBox="0 0 256 512"
1475
+ viewBox="0 0 20 20"
1476
1476
  aria-hidden="true"
1477
1477
  role="img"
1478
1478
  width="1em"
1479
1479
  height="1em"
1480
1480
  >
1481
1481
  <path
1482
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1482
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1483
1483
  />
1484
1484
  </svg>
1485
1485
  </span>
@@ -1496,14 +1496,14 @@ section: patterns
1496
1496
  <svg
1497
1497
  class="pf-v6-svg"
1498
1498
  fill="currentColor"
1499
- viewBox="0 0 448 512"
1499
+ viewBox="0 0 20 20"
1500
1500
  aria-hidden="true"
1501
1501
  role="img"
1502
1502
  width="1em"
1503
1503
  height="1em"
1504
1504
  >
1505
1505
  <path
1506
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
1506
+ d="M10 19a1 1 0 0 1-.707-1.707L16.586 10 9.293 2.707a1 1 0 1 1 1.414-1.414l7.647 7.646c.283.284.439.66.439 1.061s-.156.777-.44 1.06l-7.646 7.647A.997.997 0 0 1 10 19Zm-7.293-.293 7.647-7.646c.283-.284.439-.66.439-1.061s-.156-.777-.44-1.06L2.708 1.292a1 1 0 1 0-1.414 1.414L8.586 10l-7.293 7.293a1 1 0 1 0 1.414 1.414Z"
1507
1507
  />
1508
1508
  </svg>
1509
1509
  </span>
@@ -444,11 +444,24 @@ This demo populates the main Compass section with a card view, which is one of t
444
444
  aria-expanded="false"
445
445
  >
446
446
  <span class="pf-v6-c-menu-toggle__icon">
447
- <img
448
- class="pf-v6-c-avatar pf-m-md"
449
- alt="Avatar image"
450
- src="/assets/images/img_avatar-light.svg"
451
- />
447
+ <div class="pf-v6-c-avatar pf-m-md" role="img" aria-hidden="true">
448
+ <svg
449
+ aria-hidden="true"
450
+ data-name="Layer 1"
451
+ xmlns="http://www.w3.org/2000/svg"
452
+ version="1.1"
453
+ viewBox="0 0 36 36"
454
+ >
455
+ <path
456
+ fill="currentColor"
457
+ d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
458
+ />
459
+ <path
460
+ fill="currentColor"
461
+ d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
462
+ />
463
+ </svg>
464
+ </div>
452
465
  </span>
453
466
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
454
467
  <span class="pf-v6-c-menu-toggle__controls">
@@ -842,14 +855,14 @@ This demo populates the main Compass section with a card view, which is one of t
842
855
  <svg
843
856
  class="pf-v6-svg"
844
857
  fill="currentColor"
845
- viewBox="0 0 256 512"
858
+ viewBox="0 0 20 20"
846
859
  aria-hidden="true"
847
860
  role="img"
848
861
  width="1em"
849
862
  height="1em"
850
863
  >
851
864
  <path
852
- d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
865
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
853
866
  />
854
867
  </svg>
855
868
  </span>
@@ -867,14 +880,14 @@ This demo populates the main Compass section with a card view, which is one of t
867
880
  <svg
868
881
  class="pf-v6-svg"
869
882
  fill="currentColor"
870
- viewBox="0 0 256 512"
883
+ viewBox="0 0 20 20"
871
884
  aria-hidden="true"
872
885
  role="img"
873
886
  width="1em"
874
887
  height="1em"
875
888
  >
876
889
  <path
877
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
890
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
878
891
  />
879
892
  </svg>
880
893
  </span>
@@ -2095,11 +2108,24 @@ This demo populates the main Compass section with a dashboard, which is often us
2095
2108
  aria-expanded="false"
2096
2109
  >
2097
2110
  <span class="pf-v6-c-menu-toggle__icon">
2098
- <img
2099
- class="pf-v6-c-avatar pf-m-md"
2100
- alt="Avatar image"
2101
- src="/assets/images/img_avatar-light.svg"
2102
- />
2111
+ <div class="pf-v6-c-avatar pf-m-md" role="img" aria-hidden="true">
2112
+ <svg
2113
+ aria-hidden="true"
2114
+ data-name="Layer 1"
2115
+ xmlns="http://www.w3.org/2000/svg"
2116
+ version="1.1"
2117
+ viewBox="0 0 36 36"
2118
+ >
2119
+ <path
2120
+ fill="currentColor"
2121
+ d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
2122
+ />
2123
+ <path
2124
+ fill="currentColor"
2125
+ d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
2126
+ />
2127
+ </svg>
2128
+ </div>
2103
2129
  </span>
2104
2130
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
2105
2131
  <span class="pf-v6-c-menu-toggle__controls">
@@ -4031,11 +4057,24 @@ Without a glass panel component wrapping all of the content, there is no rounded
4031
4057
  aria-expanded="false"
4032
4058
  >
4033
4059
  <span class="pf-v6-c-menu-toggle__icon">
4034
- <img
4035
- class="pf-v6-c-avatar pf-m-md"
4036
- alt="Avatar image"
4037
- src="/assets/images/img_avatar-light.svg"
4038
- />
4060
+ <div class="pf-v6-c-avatar pf-m-md" role="img" aria-hidden="true">
4061
+ <svg
4062
+ aria-hidden="true"
4063
+ data-name="Layer 1"
4064
+ xmlns="http://www.w3.org/2000/svg"
4065
+ version="1.1"
4066
+ viewBox="0 0 36 36"
4067
+ >
4068
+ <path
4069
+ fill="currentColor"
4070
+ d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
4071
+ />
4072
+ <path
4073
+ fill="currentColor"
4074
+ d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
4075
+ />
4076
+ </svg>
4077
+ </div>
4039
4078
  </span>
4040
4079
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
4041
4080
  <span class="pf-v6-c-menu-toggle__controls">
@@ -4437,14 +4476,14 @@ Without a glass panel component wrapping all of the content, there is no rounded
4437
4476
  <svg
4438
4477
  class="pf-v6-svg"
4439
4478
  fill="currentColor"
4440
- viewBox="0 0 256 512"
4479
+ viewBox="0 0 20 20"
4441
4480
  aria-hidden="true"
4442
4481
  role="img"
4443
4482
  width="1em"
4444
4483
  height="1em"
4445
4484
  >
4446
4485
  <path
4447
- d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
4486
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
4448
4487
  />
4449
4488
  </svg>
4450
4489
  </span>
@@ -4462,14 +4501,14 @@ Without a glass panel component wrapping all of the content, there is no rounded
4462
4501
  <svg
4463
4502
  class="pf-v6-svg"
4464
4503
  fill="currentColor"
4465
- viewBox="0 0 256 512"
4504
+ viewBox="0 0 20 20"
4466
4505
  aria-hidden="true"
4467
4506
  role="img"
4468
4507
  width="1em"
4469
4508
  height="1em"
4470
4509
  >
4471
4510
  <path
4472
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
4511
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
4473
4512
  />
4474
4513
  </svg>
4475
4514
  </span>
@@ -5327,14 +5366,14 @@ Without a glass panel component wrapping all of the content, there is no rounded
5327
5366
  <svg
5328
5367
  class="pf-v6-svg"
5329
5368
  fill="currentColor"
5330
- viewBox="0 0 256 512"
5369
+ viewBox="0 0 20 20"
5331
5370
  aria-hidden="true"
5332
5371
  role="img"
5333
5372
  width="1em"
5334
5373
  height="1em"
5335
5374
  >
5336
5375
  <path
5337
- d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
5376
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
5338
5377
  />
5339
5378
  </svg>
5340
5379
  </span>
@@ -5352,14 +5391,14 @@ Without a glass panel component wrapping all of the content, there is no rounded
5352
5391
  <svg
5353
5392
  class="pf-v6-svg"
5354
5393
  fill="currentColor"
5355
- viewBox="0 0 256 512"
5394
+ viewBox="0 0 20 20"
5356
5395
  aria-hidden="true"
5357
5396
  role="img"
5358
5397
  width="1em"
5359
5398
  height="1em"
5360
5399
  >
5361
5400
  <path
5362
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
5401
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
5363
5402
  />
5364
5403
  </svg>
5365
5404
  </span>
@@ -6628,11 +6667,28 @@ This demo showcases how you can position a side-panel drawer on top of the other
6628
6667
  aria-expanded="false"
6629
6668
  >
6630
6669
  <span class="pf-v6-c-menu-toggle__icon">
6631
- <img
6670
+ <div
6632
6671
  class="pf-v6-c-avatar pf-m-md"
6633
- alt="Avatar image"
6634
- src="/assets/images/img_avatar-light.svg"
6635
- />
6672
+ role="img"
6673
+ aria-hidden="true"
6674
+ >
6675
+ <svg
6676
+ aria-hidden="true"
6677
+ data-name="Layer 1"
6678
+ xmlns="http://www.w3.org/2000/svg"
6679
+ version="1.1"
6680
+ viewBox="0 0 36 36"
6681
+ >
6682
+ <path
6683
+ fill="currentColor"
6684
+ d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
6685
+ />
6686
+ <path
6687
+ fill="currentColor"
6688
+ d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
6689
+ />
6690
+ </svg>
6691
+ </div>
6636
6692
  </span>
6637
6693
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
6638
6694
  <span class="pf-v6-c-menu-toggle__controls">
@@ -7048,14 +7104,14 @@ This demo showcases how you can position a side-panel drawer on top of the other
7048
7104
  <svg
7049
7105
  class="pf-v6-svg"
7050
7106
  fill="currentColor"
7051
- viewBox="0 0 256 512"
7107
+ viewBox="0 0 20 20"
7052
7108
  aria-hidden="true"
7053
7109
  role="img"
7054
7110
  width="1em"
7055
7111
  height="1em"
7056
7112
  >
7057
7113
  <path
7058
- d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
7114
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
7059
7115
  />
7060
7116
  </svg>
7061
7117
  </span>
@@ -7073,14 +7129,14 @@ This demo showcases how you can position a side-panel drawer on top of the other
7073
7129
  <svg
7074
7130
  class="pf-v6-svg"
7075
7131
  fill="currentColor"
7076
- viewBox="0 0 256 512"
7132
+ viewBox="0 0 20 20"
7077
7133
  aria-hidden="true"
7078
7134
  role="img"
7079
7135
  width="1em"
7080
7136
  height="1em"
7081
7137
  >
7082
7138
  <path
7083
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
7139
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
7084
7140
  />
7085
7141
  </svg>
7086
7142
  </span>
@@ -499,8 +499,14 @@ cssPrefix: pf-d-dashboard
499
499
  class="pf-v6-l-flex__item"
500
500
  style="margin-block-end: -.25em"
501
501
  >
502
- <span class="pf-v6-c-label pf-m-red">
502
+ <span class="pf-v6-c-label pf-m-danger">
503
503
  <span class="pf-v6-c-label__content">
504
+ <span class="pf-v6-c-label__icon">
505
+ <i
506
+ class="fas fa-fw fa-exclamation-circle"
507
+ aria-hidden="true"
508
+ ></i>
509
+ </span>
504
510
  <span class="pf-v6-c-label__text">Incident</span>
505
511
  </span>
506
512
  </span>
@@ -510,9 +516,7 @@ cssPrefix: pf-d-dashboard
510
516
  style="row-gap: var(--pf-6-global--spacer--md);"
511
517
  >
512
518
  <span class="pf-v6-c-icon">
513
- <span
514
- class="pf-v6-c-icon__content pf-m-success"
515
- >
519
+ <span class="pf-v6-c-icon__content pf-m-danger">
516
520
  <svg
517
521
  class="pf-v6-svg"
518
522
  fill="currentColor"
@@ -530,7 +534,7 @@ cssPrefix: pf-d-dashboard
530
534
  </span>
531
535
  <p class="pf-v6-u-color-200">
532
536
  System reboot
533
- <b class="pf-v6-u-color-100">is not</b> required
537
+ <b class="pf-v6-u-color-100">is</b> required
534
538
  </p>
535
539
  </div>
536
540
  </div>
@@ -635,7 +639,9 @@ cssPrefix: pf-d-dashboard
635
639
  style="row-gap: var(--pf-6-global--spacer--md);"
636
640
  >
637
641
  <span class="pf-v6-c-icon">
638
- <span class="pf-v6-c-icon__content pf-m-danger">
642
+ <span
643
+ class="pf-v6-c-icon__content pf-m-success"
644
+ >
639
645
  <svg
640
646
  class="pf-v6-svg"
641
647
  fill="currentColor"
@@ -653,7 +659,7 @@ cssPrefix: pf-d-dashboard
653
659
  </span>
654
660
  <p class="pf-v6-u-color-200">
655
661
  System reboot
656
- <b class="pf-v6-u-color-100">is</b> required
662
+ <b class="pf-v6-u-color-100">is not</b> required
657
663
  </p>
658
664
  </div>
659
665
  </div>
@@ -747,8 +753,14 @@ cssPrefix: pf-d-dashboard
747
753
  class="pf-v6-l-flex__item"
748
754
  style="margin-block-end: -.25em"
749
755
  >
750
- <span class="pf-v6-c-label pf-m-red">
756
+ <span class="pf-v6-c-label pf-m-danger">
751
757
  <span class="pf-v6-c-label__content">
758
+ <span class="pf-v6-c-label__icon">
759
+ <i
760
+ class="fas fa-fw fa-exclamation-circle"
761
+ aria-hidden="true"
762
+ ></i>
763
+ </span>
752
764
  <span class="pf-v6-c-label__text">Incident</span>
753
765
  </span>
754
766
  </span>
@@ -758,9 +770,7 @@ cssPrefix: pf-d-dashboard
758
770
  style="row-gap: var(--pf-6-global--spacer--md);"
759
771
  >
760
772
  <span class="pf-v6-c-icon">
761
- <span
762
- class="pf-v6-c-icon__content pf-m-success"
763
- >
773
+ <span class="pf-v6-c-icon__content pf-m-danger">
764
774
  <svg
765
775
  class="pf-v6-svg"
766
776
  fill="currentColor"
@@ -778,7 +788,7 @@ cssPrefix: pf-d-dashboard
778
788
  </span>
779
789
  <p class="pf-v6-u-color-200">
780
790
  System reboot
781
- <b class="pf-v6-u-color-100">is not</b> required
791
+ <b class="pf-v6-u-color-100">is</b> required
782
792
  </p>
783
793
  </div>
784
794
  </div>
@@ -1050,7 +1060,7 @@ cssPrefix: pf-d-dashboard
1050
1060
  aria-label="Group of labels"
1051
1061
  >
1052
1062
  <li class="pf-v6-c-label-group__list-item">
1053
- <span class="pf-v6-c-label pf-m-red">
1063
+ <span class="pf-v6-c-label pf-m-danger">
1054
1064
  <span class="pf-v6-c-label__content">
1055
1065
  <span class="pf-v6-c-label__icon">
1056
1066
  <i
@@ -1063,11 +1073,11 @@ cssPrefix: pf-d-dashboard
1063
1073
  </span>
1064
1074
  </li>
1065
1075
  <li class="pf-v6-c-label-group__list-item">
1066
- <span class="pf-v6-c-label pf-m-orange">
1076
+ <span class="pf-v6-c-label pf-m-warning">
1067
1077
  <span class="pf-v6-c-label__content">
1068
1078
  <span class="pf-v6-c-label__icon">
1069
1079
  <i
1070
- class="fas fa-fw fa-exclamation-circle"
1080
+ class="fas fa-fw fa-exclamation-triangle"
1071
1081
  aria-hidden="true"
1072
1082
  ></i>
1073
1083
  </span>
@@ -1076,7 +1086,7 @@ cssPrefix: pf-d-dashboard
1076
1086
  </span>
1077
1087
  </li>
1078
1088
  <li class="pf-v6-c-label-group__list-item">
1079
- <span class="pf-v6-c-label pf-m-green">
1089
+ <span class="pf-v6-c-label pf-m-success">
1080
1090
  <span class="pf-v6-c-label__content">
1081
1091
  <span class="pf-v6-c-label__icon">
1082
1092
  <i
@@ -1089,7 +1099,7 @@ cssPrefix: pf-d-dashboard
1089
1099
  </span>
1090
1100
  </li>
1091
1101
  <li class="pf-v6-c-label-group__list-item">
1092
- <span class="pf-v6-c-label pf-m-blue">
1102
+ <span class="pf-v6-c-label pf-m-info">
1093
1103
  <span class="pf-v6-c-label__content">
1094
1104
  <span class="pf-v6-c-label__icon">
1095
1105
  <i
@@ -1101,19 +1111,6 @@ cssPrefix: pf-d-dashboard
1101
1111
  </span>
1102
1112
  </span>
1103
1113
  </li>
1104
- <li class="pf-v6-c-label-group__list-item">
1105
- <span class="pf-v6-c-label pf-m-teal">
1106
- <span class="pf-v6-c-label__content">
1107
- <span class="pf-v6-c-label__icon">
1108
- <i
1109
- class="fas fa-fw fa-bell"
1110
- aria-hidden="true"
1111
- ></i>
1112
- </span>
1113
- <span class="pf-v6-c-label__text">3</span>
1114
- </span>
1115
- </span>
1116
- </li>
1117
1114
  </ul>
1118
1115
  </div>
1119
1116
  </div>