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

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 +33 -5
  43. package/components/Button/button.scss +39 -7
  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 +412 -141
  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 +424 -151
  156. package/patternfly.css +424 -151
  157. package/patternfly.min.css +1 -1
  158. package/patternfly.min.css.map +1 -1
package/docs/demos/Alert/examples/Alert.md CHANGED
@@ -992,7 +992,19 @@ section: components
992
992
  />
993
993
  <span class="pf-v6-c-form-control__utilities">
994
994
  <span class="pf-v6-c-form-control__icon pf-m-status">
995
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
995
+ <svg
996
+ class="pf-v6-svg"
997
+ fill="currentColor"
998
+ viewBox="0 0 32 32"
999
+ aria-hidden="true"
1000
+ role="img"
1001
+ width="1em"
1002
+ height="1em"
1003
+ >
1004
+ <path
1005
+ 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"
1006
+ />
1007
+ </svg>
996
1008
  </span>
997
1009
  </span>
998
1010
  </span>
@@ -1003,10 +1015,19 @@ section: components
1003
1015
  id="alert-horizontal-example-form-name-helper"
1004
1016
  >
1005
1017
  <span class="pf-v6-c-helper-text__item-icon">
1006
- <i
1007
- class="fas fa-fw fa-exclamation-circle"
1018
+ <svg
1019
+ class="pf-v6-svg"
1020
+ fill="currentColor"
1021
+ viewBox="0 0 32 32"
1008
1022
  aria-hidden="true"
1009
- ></i>
1023
+ role="img"
1024
+ width="1em"
1025
+ height="1em"
1026
+ >
1027
+ <path
1028
+ 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"
1029
+ />
1030
+ </svg>
1010
1031
  </span>
1011
1032
  <span class="pf-v6-c-helper-text__item-text">
1012
1033
  <span class="pf-v6-screen-reader">Error:</span>
@@ -1061,7 +1082,19 @@ section: components
1061
1082
  />
1062
1083
  <span class="pf-v6-c-form-control__utilities">
1063
1084
  <span class="pf-v6-c-form-control__icon pf-m-status">
1064
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1085
+ <svg
1086
+ class="pf-v6-svg"
1087
+ fill="currentColor"
1088
+ viewBox="0 0 32 32"
1089
+ aria-hidden="true"
1090
+ role="img"
1091
+ width="1em"
1092
+ height="1em"
1093
+ >
1094
+ <path
1095
+ 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"
1096
+ />
1097
+ </svg>
1065
1098
  </span>
1066
1099
  </span>
1067
1100
  </span>
@@ -1072,10 +1105,19 @@ section: components
1072
1105
  id="alert-horizontal-example-form-phone-helper"
1073
1106
  >
1074
1107
  <span class="pf-v6-c-helper-text__item-icon">
1075
- <i
1076
- class="fas fa-fw fa-exclamation-circle"
1108
+ <svg
1109
+ class="pf-v6-svg"
1110
+ fill="currentColor"
1111
+ viewBox="0 0 32 32"
1077
1112
  aria-hidden="true"
1078
- ></i>
1113
+ role="img"
1114
+ width="1em"
1115
+ height="1em"
1116
+ >
1117
+ <path
1118
+ 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"
1119
+ />
1120
+ </svg>
1079
1121
  </span>
1080
1122
  <span class="pf-v6-c-helper-text__item-text">
1081
1123
  <span class="pf-v6-screen-reader">Error:</span>
@@ -1111,10 +1153,19 @@ section: components
1111
1153
  id="alert-horizontal-example-form-check-group-helper"
1112
1154
  >
1113
1155
  <span class="pf-v6-c-helper-text__item-icon">
1114
- <i
1115
- class="fas fa-fw fa-exclamation-circle"
1156
+ <svg
1157
+ class="pf-v6-svg"
1158
+ fill="currentColor"
1159
+ viewBox="0 0 32 32"
1116
1160
  aria-hidden="true"
1117
- ></i>
1161
+ role="img"
1162
+ width="1em"
1163
+ height="1em"
1164
+ >
1165
+ <path
1166
+ 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"
1167
+ />
1168
+ </svg>
1118
1169
  </span>
1119
1170
  <span class="pf-v6-c-helper-text__item-text">
1120
1171
  <span class="pf-v6-screen-reader">Error:</span>
@@ -1153,13 +1204,22 @@ section: components
1153
1204
  </div>
1154
1205
  <div class="pf-v6-c-form__group pf-m-action">
1155
1206
  <div class="pf-v6-c-form__group-control">
1156
- <div class="pf-v6-c-form__actions">
1157
- <button class="pf-v6-c-button pf-m-primary" type="submit">
1158
- <span class="pf-v6-c-button__text">Submit</span>
1159
- </button>
1160
- <button class="pf-v6-c-button pf-m-secondary" type="reset">
1161
- <span class="pf-v6-c-button__text">Cancel</span>
1162
- </button>
1207
+ <div class="pf-v6-c-action-list">
1208
+ <div class="pf-v6-c-action-list__group">
1209
+ <div class="pf-v6-c-action-list__item">
1210
+ <button class="pf-v6-c-button pf-m-primary" type="submit">
1211
+ <span class="pf-v6-c-button__text">Submit</span>
1212
+ </button>
1213
+ </div>
1214
+ <div class="pf-v6-c-action-list__item">
1215
+ <button
1216
+ class="pf-v6-c-button pf-m-secondary"
1217
+ type="button"
1218
+ >
1219
+ <span class="pf-v6-c-button__text">Cancel</span>
1220
+ </button>
1221
+ </div>
1222
+ </div>
1163
1223
  </div>
1164
1224
  </div>
1165
1225
  </div>
@@ -1595,7 +1655,19 @@ section: components
1595
1655
  />
1596
1656
  <span class="pf-v6-c-form-control__utilities">
1597
1657
  <span class="pf-v6-c-form-control__icon pf-m-status">
1598
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1658
+ <svg
1659
+ class="pf-v6-svg"
1660
+ fill="currentColor"
1661
+ viewBox="0 0 32 32"
1662
+ aria-hidden="true"
1663
+ role="img"
1664
+ width="1em"
1665
+ height="1em"
1666
+ >
1667
+ <path
1668
+ 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"
1669
+ />
1670
+ </svg>
1599
1671
  </span>
1600
1672
  </span>
1601
1673
  </span>
@@ -1606,10 +1678,19 @@ section: components
1606
1678
  id="alert-stacked-example-form-name-helper"
1607
1679
  >
1608
1680
  <span class="pf-v6-c-helper-text__item-icon">
1609
- <i
1610
- class="fas fa-fw fa-exclamation-circle"
1681
+ <svg
1682
+ class="pf-v6-svg"
1683
+ fill="currentColor"
1684
+ viewBox="0 0 32 32"
1611
1685
  aria-hidden="true"
1612
- ></i>
1686
+ role="img"
1687
+ width="1em"
1688
+ height="1em"
1689
+ >
1690
+ <path
1691
+ 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"
1692
+ />
1693
+ </svg>
1613
1694
  </span>
1614
1695
  <span class="pf-v6-c-helper-text__item-text">
1615
1696
  <span class="pf-v6-screen-reader">Error:</span>
@@ -1648,10 +1729,19 @@ section: components
1648
1729
  id="alert-stacked-example-form-email-helper"
1649
1730
  >
1650
1731
  <span class="pf-v6-c-helper-text__item-icon">
1651
- <i
1652
- class="fas fa-fw fa-exclamation-circle"
1732
+ <svg
1733
+ class="pf-v6-svg"
1734
+ fill="currentColor"
1735
+ viewBox="0 0 32 32"
1653
1736
  aria-hidden="true"
1654
- ></i>
1737
+ role="img"
1738
+ width="1em"
1739
+ height="1em"
1740
+ >
1741
+ <path
1742
+ 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"
1743
+ />
1744
+ </svg>
1655
1745
  </span>
1656
1746
  <span class="pf-v6-c-helper-text__item-text">
1657
1747
  <span class="pf-v6-screen-reader">Error:</span>
@@ -1688,10 +1778,34 @@ section: components
1688
1778
  </select>
1689
1779
  <span class="pf-v6-c-form-control__utilities">
1690
1780
  <span class="pf-v6-c-form-control__icon pf-m-status">
1691
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1781
+ <svg
1782
+ class="pf-v6-svg"
1783
+ fill="currentColor"
1784
+ viewBox="0 0 32 32"
1785
+ aria-hidden="true"
1786
+ role="img"
1787
+ width="1em"
1788
+ height="1em"
1789
+ >
1790
+ <path
1791
+ 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"
1792
+ />
1793
+ </svg>
1692
1794
  </span>
1693
1795
  <span class="pf-v6-c-form-control__toggle-icon">
1694
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1796
+ <svg
1797
+ class="pf-v6-svg"
1798
+ fill="currentColor"
1799
+ viewBox="0 0 32 32"
1800
+ aria-hidden="true"
1801
+ role="img"
1802
+ width="1em"
1803
+ height="1em"
1804
+ >
1805
+ <path
1806
+ d="M29.707 11.707 17.061 24.353c-.292.292-.677.438-1.061.438s-.769-.146-1.061-.438L2.293 11.707A1 1 0 0 1 3 10h26a1 1 0 0 1 .707 1.707Z"
1807
+ />
1808
+ </svg>
1695
1809
  </span>
1696
1810
  </span>
1697
1811
  </span>
@@ -1706,10 +1820,19 @@ section: components
1706
1820
  id="alert-stacked-example-form-state-helper"
1707
1821
  >
1708
1822
  <span class="pf-v6-c-helper-text__item-icon">
1709
- <i
1710
- class="fas fa-fw fa-exclamation-circle"
1823
+ <svg
1824
+ class="pf-v6-svg"
1825
+ fill="currentColor"
1826
+ viewBox="0 0 32 32"
1711
1827
  aria-hidden="true"
1712
- ></i>
1828
+ role="img"
1829
+ width="1em"
1830
+ height="1em"
1831
+ >
1832
+ <path
1833
+ 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"
1834
+ />
1835
+ </svg>
1713
1836
  </span>
1714
1837
  <span class="pf-v6-c-helper-text__item-text">
1715
1838
  <span class="pf-v6-screen-reader">Error:</span>
@@ -1742,10 +1865,19 @@ section: components
1742
1865
  id="alert-stacked-example-form-check-group-helper"
1743
1866
  >
1744
1867
  <span class="pf-v6-c-helper-text__item-icon">
1745
- <i
1746
- class="fas fa-fw fa-exclamation-circle"
1868
+ <svg
1869
+ class="pf-v6-svg"
1870
+ fill="currentColor"
1871
+ viewBox="0 0 32 32"
1747
1872
  aria-hidden="true"
1748
- ></i>
1873
+ role="img"
1874
+ width="1em"
1875
+ height="1em"
1876
+ >
1877
+ <path
1878
+ 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"
1879
+ />
1880
+ </svg>
1749
1881
  </span>
1750
1882
  <span class="pf-v6-c-helper-text__item-text">
1751
1883
  <span class="pf-v6-screen-reader">Error:</span>
@@ -1799,13 +1931,22 @@ section: components
1799
1931
  </div>
1800
1932
  <div class="pf-v6-c-form__group pf-m-action">
1801
1933
  <div class="pf-v6-c-form__group-control">
1802
- <div class="pf-v6-c-form__actions">
1803
- <button class="pf-v6-c-button pf-m-primary" type="submit">
1804
- <span class="pf-v6-c-button__text">Submit</span>
1805
- </button>
1806
- <button class="pf-v6-c-button pf-m-secondary" type="reset">
1807
- <span class="pf-v6-c-button__text">Cancel</span>
1808
- </button>
1934
+ <div class="pf-v6-c-action-list">
1935
+ <div class="pf-v6-c-action-list__group">
1936
+ <div class="pf-v6-c-action-list__item">
1937
+ <button class="pf-v6-c-button pf-m-primary" type="submit">
1938
+ <span class="pf-v6-c-button__text">Submit</span>
1939
+ </button>
1940
+ </div>
1941
+ <div class="pf-v6-c-action-list__item">
1942
+ <button
1943
+ class="pf-v6-c-button pf-m-secondary"
1944
+ type="button"
1945
+ >
1946
+ <span class="pf-v6-c-button__text">Cancel</span>
1947
+ </button>
1948
+ </div>
1949
+ </div>
1809
1950
  </div>
1810
1951
  </div>
1811
1952
  </div>
package/docs/demos/Button/examples/Button.md CHANGED
@@ -41,10 +41,14 @@ cssPrefix: pf-d-button
41
41
  </div>
42
42
  </div>
43
43
  <div class="pf-v6-c-form__group pf-m-action">
44
- <div class="pf-v6-c-form__actions">
45
- <button class="pf-v6-c-button pf-m-primary" type="submit">
46
- <span class="pf-v6-c-button__text">Link account and log in</span>
47
- </button>
44
+ <div class="pf-v6-c-action-list">
45
+ <div class="pf-v6-c-action-list__group">
46
+ <div class="pf-v6-c-action-list__item">
47
+ <button class="pf-v6-c-button pf-m-primary" type="submit">
48
+ <span class="pf-v6-c-button__text">Link account and log in</span>
49
+ </button>
50
+ </div>
51
+ </div>
48
52
  </div>
49
53
  </div>
50
54
  </form>
@@ -94,30 +98,34 @@ cssPrefix: pf-d-button
94
98
  </div>
95
99
  </div>
96
100
  <div class="pf-v6-c-form__group pf-m-action">
97
- <div class="pf-v6-c-form__actions">
98
- <button
99
- class="pf-v6-c-button pf-m-in-progress pf-m-progress pf-m-primary"
100
- type="submit"
101
- >
102
- <span class="pf-v6-c-button__progress">
103
- <svg
104
- class="pf-v6-c-spinner pf-m-md"
105
- role="progressbar"
106
- viewBox="0 0 100 100"
107
- aria-label="Loading..."
101
+ <div class="pf-v6-c-action-list">
102
+ <div class="pf-v6-c-action-list__group">
103
+ <div class="pf-v6-c-action-list__item">
104
+ <button
105
+ class="pf-v6-c-button pf-m-in-progress pf-m-progress pf-m-primary"
106
+ type="submit"
108
107
  >
109
- <circle
110
- class="pf-v6-c-spinner__path"
111
- cx="50"
112
- cy="50"
113
- r="45"
114
- fill="none"
115
- />
116
- </svg>
117
- </span>
108
+ <span class="pf-v6-c-button__progress">
109
+ <svg
110
+ class="pf-v6-c-spinner pf-m-md"
111
+ role="progressbar"
112
+ viewBox="0 0 100 100"
113
+ aria-label="Loading..."
114
+ >
115
+ <circle
116
+ class="pf-v6-c-spinner__path"
117
+ cx="50"
118
+ cy="50"
119
+ r="45"
120
+ fill="none"
121
+ />
122
+ </svg>
123
+ </span>
118
124
 
119
- <span class="pf-v6-c-button__text">Linking account</span>
120
- </button>
125
+ <span class="pf-v6-c-button__text">Linking account</span>
126
+ </button>
127
+ </div>
128
+ </div>
121
129
  </div>
122
130
  </div>
123
131
  </form>
@@ -167,25 +175,29 @@ cssPrefix: pf-d-button
167
175
  </div>
168
176
  </div>
169
177
  <div class="pf-v6-c-form__group pf-m-action">
170
- <div class="pf-v6-c-form__actions">
171
- <button class="pf-v6-c-button pf-m-primary" type="submit">
172
- <span class="pf-v6-c-button__icon pf-m-start">
173
- <svg
174
- class="pf-v6-svg"
175
- fill="currentColor"
176
- viewBox="0 0 512 512"
177
- aria-hidden="true"
178
- role="img"
179
- width="1em"
180
- height="1em"
181
- >
182
- <path
183
- d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
184
- />
185
- </svg>
186
- </span>
187
- <span class="pf-v6-c-button__text">Logged in</span>
188
- </button>
178
+ <div class="pf-v6-c-action-list">
179
+ <div class="pf-v6-c-action-list__group">
180
+ <div class="pf-v6-c-action-list__item">
181
+ <button class="pf-v6-c-button pf-m-primary" type="submit">
182
+ <span class="pf-v6-c-button__icon pf-m-start">
183
+ <svg
184
+ class="pf-v6-svg"
185
+ fill="currentColor"
186
+ viewBox="0 0 512 512"
187
+ aria-hidden="true"
188
+ role="img"
189
+ width="1em"
190
+ height="1em"
191
+ >
192
+ <path
193
+ d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
194
+ />
195
+ </svg>
196
+ </span>
197
+ <span class="pf-v6-c-button__text">Logged in</span>
198
+ </button>
199
+ </div>
200
+ </div>
189
201
  </div>
190
202
  </div>
191
203
  </form>