@patternfly/patternfly 6.6.0-prerelease.3 → 6.6.0-prerelease.30

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 (158) 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/Accordion/accordion.css +3 -3
  33. package/components/Accordion/accordion.scss +3 -3
  34. package/components/Alert/alert.css +8 -7
  35. package/components/Alert/alert.scss +8 -7
  36. package/components/Avatar/avatar.css +144 -0
  37. package/components/Avatar/avatar.scss +161 -0
  38. package/components/Banner/banner.css +7 -0
  39. package/components/Banner/banner.scss +7 -0
  40. package/components/Breadcrumb/breadcrumb.css +3 -3
  41. package/components/Breadcrumb/breadcrumb.scss +3 -3
  42. package/components/Button/button.css +20 -4
  43. package/components/Button/button.scss +24 -5
  44. package/components/Card/card.css +4 -4
  45. package/components/Card/card.scss +4 -4
  46. package/components/ClipboardCopy/clipboard-copy.css +1 -1
  47. package/components/ClipboardCopy/clipboard-copy.scss +1 -1
  48. package/components/DataList/data-list.css +5 -5
  49. package/components/DataList/data-list.scss +5 -5
  50. package/components/DragDrop/drag-drop.css +4 -0
  51. package/components/DragDrop/drag-drop.scss +4 -0
  52. package/components/DualListSelector/dual-list-selector.css +1 -1
  53. package/components/DualListSelector/dual-list-selector.scss +1 -1
  54. package/components/Form/form.scss +1 -0
  55. package/components/FormControl/form-control.css +12 -2
  56. package/components/FormControl/form-control.scss +14 -2
  57. package/components/Hint/hint.css +2 -2
  58. package/components/Hint/hint.scss +2 -2
  59. package/components/Label/label.css +9 -3
  60. package/components/Label/label.scss +9 -3
  61. package/components/Masthead/masthead.css +1 -1
  62. package/components/Masthead/masthead.scss +1 -1
  63. package/components/Menu/menu.css +2 -2
  64. package/components/Menu/menu.scss +3 -3
  65. package/components/MenuToggle/menu-toggle.css +3 -0
  66. package/components/MenuToggle/menu-toggle.scss +4 -1
  67. package/components/ModalBox/modal-box.css +4 -4
  68. package/components/ModalBox/modal-box.scss +5 -5
  69. package/components/Nav/nav.css +2 -2
  70. package/components/Nav/nav.scss +2 -2
  71. package/components/NotificationDrawer/notification-drawer.css +3 -3
  72. package/components/NotificationDrawer/notification-drawer.scss +3 -3
  73. package/components/Page/page.css +25 -22
  74. package/components/Page/page.scss +28 -28
  75. package/components/Pagination/pagination.css +12 -7
  76. package/components/Pagination/pagination.scss +15 -12
  77. package/components/Panel/panel.css +1 -1
  78. package/components/Panel/panel.scss +2 -2
  79. package/components/Popover/popover.css +1 -1
  80. package/components/Popover/popover.scss +1 -1
  81. package/components/Progress/progress.css +2 -2
  82. package/components/Progress/progress.scss +2 -2
  83. package/components/Sidebar/sidebar.css +4 -7
  84. package/components/Sidebar/sidebar.scss +9 -9
  85. package/components/Table/table-grid.css +25 -13
  86. package/components/Table/table-grid.scss +10 -5
  87. package/components/Table/table-tree-view.css +3 -0
  88. package/components/Table/table-tree-view.scss +2 -0
  89. package/components/Table/table.css +55 -21
  90. package/components/Table/table.scss +82 -34
  91. package/components/Tabs/tabs.css +19 -5
  92. package/components/Tabs/tabs.scss +22 -5
  93. package/components/Title/title.css +1 -1
  94. package/components/Title/title.scss +1 -1
  95. package/components/Tooltip/tooltip.css +1 -1
  96. package/components/Tooltip/tooltip.scss +1 -1
  97. package/components/TreeView/tree-view.css +7 -7
  98. package/components/TreeView/tree-view.scss +7 -7
  99. package/components/Wizard/wizard.css +4 -4
  100. package/components/Wizard/wizard.scss +4 -4
  101. package/components/_index.css +399 -140
  102. package/docs/components/Avatar/examples/Avatar.css +6 -0
  103. package/docs/components/Avatar/examples/Avatar.md +414 -40
  104. package/docs/components/Button/examples/Button.md +2 -2
  105. package/docs/components/CodeEditor/examples/CodeEditor.md +131 -47
  106. package/docs/components/DataList/examples/DataList.md +143 -11
  107. package/docs/components/DatePicker/examples/DatePicker.md +26 -2
  108. package/docs/components/DescriptionList/examples/DescriptionList.md +115 -55
  109. package/docs/components/Drawer/examples/Drawer.md +1 -1
  110. package/docs/components/DualListSelector/examples/DualListSelector.md +355 -139
  111. package/docs/components/EmptyState/examples/EmptyState.md +12 -12
  112. package/docs/components/FileUpload/examples/FileUpload.md +26 -2
  113. package/docs/components/Form/examples/Form.md +140 -16
  114. package/docs/components/FormControl/examples/FormControl.md +260 -20
  115. package/docs/components/HelperText/examples/HelperText.md +139 -11
  116. package/docs/components/Icon/examples/Icon.md +403 -31
  117. package/docs/components/InlineEdit/examples/InlineEdit.md +13 -1
  118. package/docs/components/InputGroup/examples/InputGroup.md +20 -8
  119. package/docs/components/Label/examples/Label.md +4029 -765
  120. package/docs/components/List/examples/List.md +78 -6
  121. package/docs/components/Login/examples/Login.md +104 -8
  122. package/docs/components/Menu/examples/Menu.md +221 -17
  123. package/docs/components/MenuToggle/examples/MenuToggle.md +54 -15
  124. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +247 -19
  125. package/docs/components/NumberInput/examples/NumberInput.md +301 -25
  126. package/docs/components/Pagination/examples/Pagination.md +111 -273
  127. package/docs/components/ProgressStepper/examples/ProgressStepper.md +169 -13
  128. package/docs/components/Sidebar/examples/Sidebar.md +3 -1
  129. package/docs/components/Switch/examples/Switch.md +52 -4
  130. package/docs/components/Table/examples/Table.css +6 -0
  131. package/docs/components/Table/examples/Table.md +1322 -171
  132. package/docs/components/Tabs/examples/Tabs.md +18 -998
  133. package/docs/components/TextInputGroup/examples/TextInputGroup.md +355 -115
  134. package/docs/components/Toolbar/examples/Toolbar.md +133 -25
  135. package/docs/components/TreeView/examples/TreeView.md +286 -118
  136. package/docs/components/Wizard/examples/Wizard.md +325 -25
  137. package/docs/demos/Alert/examples/Alert.md +181 -40
  138. package/docs/demos/Button/examples/Button.md +57 -45
  139. package/docs/demos/Card/examples/Card.md +280 -34
  140. package/docs/demos/CardView/examples/CardView.md +12 -12
  141. package/docs/demos/Compass/examples/Compass.md +91 -439
  142. package/docs/demos/Dashboard/examples/Dashboard.md +92 -41
  143. package/docs/demos/DataList/examples/DataList.md +74 -50
  144. package/docs/demos/Form/examples/BasicForms.md +112 -36
  145. package/docs/demos/HelperText/examples/HelperText.md +104 -8
  146. package/docs/demos/Masthead/examples/Masthead.md +52 -4
  147. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +176 -14
  148. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +2570 -4968
  149. package/docs/demos/Table/examples/Table.md +407 -179
  150. package/docs/demos/Toolbar/examples/Toolbar.md +139 -46
  151. package/docs/demos/Wizard/examples/Wizard.md +117 -9
  152. package/package.json +7 -7
  153. package/patternfly-base-no-globals.css +12 -10
  154. package/patternfly-base.css +12 -10
  155. package/patternfly-no-globals.css +411 -150
  156. package/patternfly.css +411 -150
  157. package/patternfly.min.css +1 -1
  158. package/patternfly.min.css.map +1 -1
@@ -499,8 +499,23 @@ 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
+ <svg
506
+ class="pf-v6-svg"
507
+ fill="currentColor"
508
+ viewBox="0 0 32 32"
509
+ aria-hidden="true"
510
+ role="img"
511
+ width="1em"
512
+ height="1em"
513
+ >
514
+ <path
515
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
516
+ />
517
+ </svg>
518
+ </span>
504
519
  <span class="pf-v6-c-label__text">Incident</span>
505
520
  </span>
506
521
  </span>
@@ -510,9 +525,7 @@ cssPrefix: pf-d-dashboard
510
525
  style="row-gap: var(--pf-6-global--spacer--md);"
511
526
  >
512
527
  <span class="pf-v6-c-icon">
513
- <span
514
- class="pf-v6-c-icon__content pf-m-success"
515
- >
528
+ <span class="pf-v6-c-icon__content pf-m-danger">
516
529
  <svg
517
530
  class="pf-v6-svg"
518
531
  fill="currentColor"
@@ -530,7 +543,7 @@ cssPrefix: pf-d-dashboard
530
543
  </span>
531
544
  <p class="pf-v6-u-color-200">
532
545
  System reboot
533
- <b class="pf-v6-u-color-100">is not</b> required
546
+ <b class="pf-v6-u-color-100">is</b> required
534
547
  </p>
535
548
  </div>
536
549
  </div>
@@ -635,7 +648,9 @@ cssPrefix: pf-d-dashboard
635
648
  style="row-gap: var(--pf-6-global--spacer--md);"
636
649
  >
637
650
  <span class="pf-v6-c-icon">
638
- <span class="pf-v6-c-icon__content pf-m-danger">
651
+ <span
652
+ class="pf-v6-c-icon__content pf-m-success"
653
+ >
639
654
  <svg
640
655
  class="pf-v6-svg"
641
656
  fill="currentColor"
@@ -653,7 +668,7 @@ cssPrefix: pf-d-dashboard
653
668
  </span>
654
669
  <p class="pf-v6-u-color-200">
655
670
  System reboot
656
- <b class="pf-v6-u-color-100">is</b> required
671
+ <b class="pf-v6-u-color-100">is not</b> required
657
672
  </p>
658
673
  </div>
659
674
  </div>
@@ -747,8 +762,23 @@ cssPrefix: pf-d-dashboard
747
762
  class="pf-v6-l-flex__item"
748
763
  style="margin-block-end: -.25em"
749
764
  >
750
- <span class="pf-v6-c-label pf-m-red">
765
+ <span class="pf-v6-c-label pf-m-danger">
751
766
  <span class="pf-v6-c-label__content">
767
+ <span class="pf-v6-c-label__icon">
768
+ <svg
769
+ class="pf-v6-svg"
770
+ fill="currentColor"
771
+ viewBox="0 0 32 32"
772
+ aria-hidden="true"
773
+ role="img"
774
+ width="1em"
775
+ height="1em"
776
+ >
777
+ <path
778
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
779
+ />
780
+ </svg>
781
+ </span>
752
782
  <span class="pf-v6-c-label__text">Incident</span>
753
783
  </span>
754
784
  </span>
@@ -758,9 +788,7 @@ cssPrefix: pf-d-dashboard
758
788
  style="row-gap: var(--pf-6-global--spacer--md);"
759
789
  >
760
790
  <span class="pf-v6-c-icon">
761
- <span
762
- class="pf-v6-c-icon__content pf-m-success"
763
- >
791
+ <span class="pf-v6-c-icon__content pf-m-danger">
764
792
  <svg
765
793
  class="pf-v6-svg"
766
794
  fill="currentColor"
@@ -778,7 +806,7 @@ cssPrefix: pf-d-dashboard
778
806
  </span>
779
807
  <p class="pf-v6-u-color-200">
780
808
  System reboot
781
- <b class="pf-v6-u-color-100">is not</b> required
809
+ <b class="pf-v6-u-color-100">is</b> required
782
810
  </p>
783
811
  </div>
784
812
  </div>
@@ -1050,65 +1078,88 @@ cssPrefix: pf-d-dashboard
1050
1078
  aria-label="Group of labels"
1051
1079
  >
1052
1080
  <li class="pf-v6-c-label-group__list-item">
1053
- <span class="pf-v6-c-label pf-m-red">
1081
+ <span class="pf-v6-c-label pf-m-danger">
1054
1082
  <span class="pf-v6-c-label__content">
1055
1083
  <span class="pf-v6-c-label__icon">
1056
- <i
1057
- class="fas fa-fw fa-exclamation-circle"
1084
+ <svg
1085
+ class="pf-v6-svg"
1086
+ fill="currentColor"
1087
+ viewBox="0 0 32 32"
1058
1088
  aria-hidden="true"
1059
- ></i>
1089
+ role="img"
1090
+ width="1em"
1091
+ height="1em"
1092
+ >
1093
+ <path
1094
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
1095
+ />
1096
+ </svg>
1060
1097
  </span>
1061
1098
  <span class="pf-v6-c-label__text">1</span>
1062
1099
  </span>
1063
1100
  </span>
1064
1101
  </li>
1065
1102
  <li class="pf-v6-c-label-group__list-item">
1066
- <span class="pf-v6-c-label pf-m-orange">
1103
+ <span class="pf-v6-c-label pf-m-warning">
1067
1104
  <span class="pf-v6-c-label__content">
1068
1105
  <span class="pf-v6-c-label__icon">
1069
- <i
1070
- class="fas fa-fw fa-exclamation-circle"
1106
+ <svg
1107
+ class="pf-v6-svg"
1108
+ fill="currentColor"
1109
+ viewBox="0 0 32 32"
1071
1110
  aria-hidden="true"
1072
- ></i>
1111
+ role="img"
1112
+ width="1em"
1113
+ height="1em"
1114
+ >
1115
+ <path
1116
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
1117
+ />
1118
+ </svg>
1073
1119
  </span>
1074
1120
  <span class="pf-v6-c-label__text">1</span>
1075
1121
  </span>
1076
1122
  </span>
1077
1123
  </li>
1078
1124
  <li class="pf-v6-c-label-group__list-item">
1079
- <span class="pf-v6-c-label pf-m-green">
1080
- <span class="pf-v6-c-label__content">
1081
- <span class="pf-v6-c-label__icon">
1082
- <i
1083
- class="fas fa-fw fa-check-circle"
1084
- aria-hidden="true"
1085
- ></i>
1086
- </span>
1087
- <span class="pf-v6-c-label__text">3</span>
1088
- </span>
1089
- </span>
1090
- </li>
1091
- <li class="pf-v6-c-label-group__list-item">
1092
- <span class="pf-v6-c-label pf-m-blue">
1125
+ <span class="pf-v6-c-label pf-m-success">
1093
1126
  <span class="pf-v6-c-label__content">
1094
1127
  <span class="pf-v6-c-label__icon">
1095
- <i
1096
- class="fas fa-fw fa-info-circle"
1128
+ <svg
1129
+ class="pf-v6-svg"
1130
+ fill="currentColor"
1131
+ viewBox="0 0 32 32"
1097
1132
  aria-hidden="true"
1098
- ></i>
1133
+ role="img"
1134
+ width="1em"
1135
+ height="1em"
1136
+ >
1137
+ <path
1138
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1139
+ />
1140
+ </svg>
1099
1141
  </span>
1100
1142
  <span class="pf-v6-c-label__text">3</span>
1101
1143
  </span>
1102
1144
  </span>
1103
1145
  </li>
1104
1146
  <li class="pf-v6-c-label-group__list-item">
1105
- <span class="pf-v6-c-label pf-m-teal">
1147
+ <span class="pf-v6-c-label pf-m-info">
1106
1148
  <span class="pf-v6-c-label__content">
1107
1149
  <span class="pf-v6-c-label__icon">
1108
- <i
1109
- class="fas fa-fw fa-bell"
1150
+ <svg
1151
+ class="pf-v6-svg"
1152
+ fill="currentColor"
1153
+ viewBox="0 0 32 32"
1110
1154
  aria-hidden="true"
1111
- ></i>
1155
+ role="img"
1156
+ width="1em"
1157
+ height="1em"
1158
+ >
1159
+ <path
1160
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm1.5 22a1.5 1.5 0 1 1-3 0v-5.157l-.188.04a1.5 1.5 0 0 1-.625-2.934l1.956-.416c.112-.024.223-.032.333-.03l.024-.002a1.5 1.5 0 0 1 1.5 1.5v7Zm-.08-12.58c-.38.37-.89.58-1.42.58a1.998 1.998 0 0 1-1.851-2.76c.051-.13.11-.24.19-.35.07-.11.15-.21.25-.3.74-.75 2.08-.75 2.83 0 .09.09.17.19.24.3.08.11.14.22.189.35.05.12.09.24.11.37.03.13.04.26.04.39 0 .53-.21 1.04-.58 1.42Z"
1161
+ />
1162
+ </svg>
1112
1163
  </span>
1113
1164
  <span class="pf-v6-c-label__text">3</span>
1114
1165
  </span>