@patternfly/patternfly 6.0.0-alpha.90 → 6.0.0-alpha.91

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 (259) hide show
  1. package/base/patternfly-common.css +10 -10
  2. package/base/patternfly-globals.css +3 -3
  3. package/base/patternfly-icons.css +1 -1
  4. package/base/patternfly-themes.css +53 -53
  5. package/base/patternfly-variables.css +236 -245
  6. package/base/tokens/_tokens-font.scss +0 -11
  7. package/components/AboutModalBox/about-modal-box.css +102 -102
  8. package/components/Accordion/accordion.css +118 -118
  9. package/components/ActionList/action-list.css +16 -16
  10. package/components/Alert/alert-group.css +50 -50
  11. package/components/Alert/alert.css +161 -161
  12. package/components/AppLauncher/app-launcher.css +167 -167
  13. package/components/Avatar/avatar.css +116 -116
  14. package/components/BackToTop/back-to-top.css +21 -21
  15. package/components/Backdrop/backdrop.css +9 -9
  16. package/components/BackgroundImage/background-image.css +15 -15
  17. package/components/Badge/badge.css +35 -35
  18. package/components/Banner/banner.css +114 -114
  19. package/components/Brand/brand.css +28 -28
  20. package/components/Breadcrumb/breadcrumb.css +62 -62
  21. package/components/Button/button.css +514 -514
  22. package/components/CalendarMonth/calendar-month.css +144 -144
  23. package/components/Card/card.css +230 -230
  24. package/components/Check/check.css +43 -43
  25. package/components/Chip/chip-group.css +60 -60
  26. package/components/Chip/chip.css +83 -83
  27. package/components/ClipboardCopy/clipboard-copy.css +71 -71
  28. package/components/CodeBlock/code-block.css +35 -35
  29. package/components/CodeEditor/code-editor.css +121 -121
  30. package/components/Content/content.css +216 -216
  31. package/components/ContextSelector/context-selector.css +251 -251
  32. package/components/DataList/data-list-grid.css +182 -182
  33. package/components/DataList/data-list.css +468 -468
  34. package/components/DatePicker/date-picker.css +35 -35
  35. package/components/DescriptionList/description-list-order.css +90 -90
  36. package/components/DescriptionList/description-list.css +193 -193
  37. package/components/Divider/divider.css +143 -143
  38. package/components/DragDrop/drag-drop.css +46 -46
  39. package/components/Drawer/drawer.css +474 -474
  40. package/components/Dropdown/dropdown.css +457 -457
  41. package/components/DualListSelector/dual-list-selector.css +199 -199
  42. package/components/EmptyState/empty-state.css +104 -104
  43. package/components/ExpandableSection/expandable-section.css +113 -113
  44. package/components/FileUpload/file-upload.css +32 -32
  45. package/components/Form/form.css +281 -281
  46. package/components/FormControl/form-control.css +197 -197
  47. package/components/HelperText/helper-text.css +51 -51
  48. package/components/Hint/hint.css +46 -46
  49. package/components/Icon/icon.css +218 -218
  50. package/components/InlineEdit/inline-edit.css +43 -43
  51. package/components/InputGroup/input-group.css +52 -52
  52. package/components/JumpLinks/jump-links.css +183 -183
  53. package/components/Label/label-group.css +86 -86
  54. package/components/Label/label.css +438 -438
  55. package/components/List/list.css +53 -53
  56. package/components/LogViewer/log-viewer.css +138 -138
  57. package/components/Login/login.css +139 -139
  58. package/components/Masthead/masthead.css +319 -319
  59. package/components/Menu/menu.css +415 -415
  60. package/components/MenuToggle/menu-toggle.css +275 -275
  61. package/components/ModalBox/modal-box.css +121 -121
  62. package/components/MultipleFileUpload/multiple-file-upload.css +163 -163
  63. package/components/Nav/nav.css +225 -225
  64. package/components/NotificationBadge/notification-badge.css +66 -66
  65. package/components/NotificationDrawer/notification-drawer.css +179 -179
  66. package/components/NumberInput/number-input.css +20 -20
  67. package/components/OptionsMenu/options-menu.css +190 -190
  68. package/components/OverflowMenu/overflow-menu.css +19 -19
  69. package/components/Page/page.css +598 -598
  70. package/components/Pagination/pagination.css +220 -220
  71. package/components/Panel/panel.css +72 -72
  72. package/components/Popover/popover.css +148 -148
  73. package/components/Progress/progress.css +80 -80
  74. package/components/ProgressStepper/progress-stepper.css +514 -514
  75. package/components/Radio/radio.css +44 -44
  76. package/components/Select/select.css +423 -423
  77. package/components/Sidebar/sidebar.css +166 -166
  78. package/components/SimpleList/simple-list.css +53 -53
  79. package/components/Skeleton/skeleton.css +112 -112
  80. package/components/SkipToContent/skip-to-content.css +8 -8
  81. package/components/Slider/slider.css +144 -144
  82. package/components/Spinner/spinner.css +36 -36
  83. package/components/Switch/switch.css +89 -89
  84. package/components/TabContent/tab-content.css +34 -34
  85. package/components/Table/table-grid.css +911 -911
  86. package/components/Table/table-scrollable.css +38 -38
  87. package/components/Table/table-tree-view.css +497 -497
  88. package/components/Table/table.css +660 -660
  89. package/components/Tabs/tabs.css +616 -616
  90. package/components/TextInputGroup/text-input-group.css +88 -88
  91. package/components/Tile/tile.css +68 -68
  92. package/components/Timestamp/timestamp.css +29 -29
  93. package/components/Title/title.css +87 -87
  94. package/components/ToggleGroup/toggle-group.css +86 -86
  95. package/components/Toolbar/toolbar.css +2279 -2279
  96. package/components/Tooltip/tooltip.css +85 -85
  97. package/components/TreeView/tree-view.css +363 -363
  98. package/components/Truncate/truncate.css +15 -15
  99. package/components/Wizard/wizard.css +272 -272
  100. package/docs/components/AboutModalBox/examples/AboutModalBox.md +11 -11
  101. package/docs/components/Accordion/examples/Accordion.md +188 -188
  102. package/docs/components/ActionList/examples/ActionList.md +55 -55
  103. package/docs/components/Alert/examples/Alert.md +222 -222
  104. package/docs/components/AppLauncher/deprecated/application-launcher.md +146 -146
  105. package/docs/components/Avatar/examples/Avatar.md +6 -6
  106. package/docs/components/BackToTop/examples/BackToTop.md +3 -3
  107. package/docs/components/Backdrop/examples/Backdrop.md +1 -1
  108. package/docs/components/BackgroundImage/examples/BackgroundImage.md +2 -2
  109. package/docs/components/Badge/examples/Badge.md +17 -17
  110. package/docs/components/Banner/examples/Banner.md +42 -42
  111. package/docs/components/Brand/examples/Brand.md +4 -4
  112. package/docs/components/Breadcrumb/examples/Breadcrumb.md +90 -90
  113. package/docs/components/Button/examples/Button.md +364 -364
  114. package/docs/components/CalendarMonth/examples/CalendarMonth.md +436 -436
  115. package/docs/components/Card/examples/Card.md +515 -515
  116. package/docs/components/Check/examples/Check.md +37 -37
  117. package/docs/components/Chip/examples/Chip.md +216 -216
  118. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +82 -82
  119. package/docs/components/CodeBlock/examples/CodeBlock.md +39 -39
  120. package/docs/components/CodeEditor/examples/CodeEditor.md +85 -85
  121. package/docs/components/Content/examples/Content.md +1 -1
  122. package/docs/components/ContextSelector/deprecated/context-selector.md +160 -160
  123. package/docs/components/DataList/examples/DataList.md +666 -666
  124. package/docs/components/DatePicker/examples/DatePicker.md +54 -54
  125. package/docs/components/DescriptionList/examples/DescriptionList.md +737 -737
  126. package/docs/components/Divider/examples/Divider.md +18 -18
  127. package/docs/components/DragDrop/examples/DragDrop.md +27 -27
  128. package/docs/components/Drawer/examples/Drawer.md +225 -225
  129. package/docs/components/Dropdown/deprecated/Dropdown.md +541 -541
  130. package/docs/components/DualListSelector/examples/DualListSelector.md +1012 -1012
  131. package/docs/components/EmptyState/examples/EmptyState.md +100 -100
  132. package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -47
  133. package/docs/components/FileUpload/examples/FileUpload.md +94 -94
  134. package/docs/components/Form/examples/Form.md +226 -226
  135. package/docs/components/FormControl/examples/FormControl.md +65 -65
  136. package/docs/components/HelperText/examples/HelperText.md +72 -72
  137. package/docs/components/Hint/examples/Hint.md +44 -44
  138. package/docs/components/Icon/examples/Icon.md +85 -85
  139. package/docs/components/InlineEdit/examples/InlineEdit.md +209 -209
  140. package/docs/components/InputGroup/examples/InputGroup.md +73 -73
  141. package/docs/components/JumpLinks/examples/JumpLinks.md +285 -285
  142. package/docs/components/Label/examples/Label.md +1717 -1717
  143. package/docs/components/List/examples/List.md +30 -30
  144. package/docs/components/LogViewer/examples/LogViewer.md +1785 -1785
  145. package/docs/components/Login/examples/Login.md +287 -287
  146. package/docs/components/Masthead/examples/masthead.md +39 -39
  147. package/docs/components/Menu/examples/Menu.md +2377 -2377
  148. package/docs/components/MenuToggle/examples/MenuToggle.md +242 -242
  149. package/docs/components/ModalBox/examples/ModalBox.md +119 -119
  150. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +192 -192
  151. package/docs/components/Nav/examples/Navigation.md +856 -856
  152. package/docs/components/NotificationBadge/examples/NotificationBadge.md +42 -42
  153. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +659 -659
  154. package/docs/components/NumberInput/examples/NumberInput.md +127 -127
  155. package/docs/components/OptionsMenu/deprecated/options-menu.md +178 -178
  156. package/docs/components/OverflowMenu/examples/overflow-menu.md +97 -97
  157. package/docs/components/Page/deprecated/PageHeader.md +85 -85
  158. package/docs/components/Page/examples/Page.md +90 -90
  159. package/docs/components/Pagination/examples/Pagination.md +285 -285
  160. package/docs/components/Panel/examples/Panel.md +38 -38
  161. package/docs/components/Popover/examples/Popover.md +169 -169
  162. package/docs/components/Progress/examples/Progress.md +145 -145
  163. package/docs/components/ProgressStepper/examples/ProgressStepper.md +295 -295
  164. package/docs/components/Radio/examples/Radio.md +33 -33
  165. package/docs/components/Select/deprecated/Select.md +736 -736
  166. package/docs/components/Sidebar/examples/Sidebar.md +65 -65
  167. package/docs/components/SimpleList/examples/SimpleList.md +39 -39
  168. package/docs/components/Skeleton/examples/Skeleton.md +29 -29
  169. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -3
  170. package/docs/components/Slider/examples/Slider.md +213 -213
  171. package/docs/components/Spinner/examples/Spinner.md +14 -14
  172. package/docs/components/Switch/examples/Switch.md +58 -58
  173. package/docs/components/TabContent/examples/TabContent.md +24 -24
  174. package/docs/components/Table/examples/Table.md +6982 -6982
  175. package/docs/components/Tabs/examples/Tabs.md +2114 -2114
  176. package/docs/components/TextInputGroup/examples/TextInputGroup.md +373 -373
  177. package/docs/components/Tile/examples/Tile.md +131 -131
  178. package/docs/components/Timestamp/examples/Timestamp.md +10 -10
  179. package/docs/components/Title/examples/Title.md +12 -12
  180. package/docs/components/ToggleGroup/examples/toggle-group.md +116 -116
  181. package/docs/components/Toolbar/examples/Toolbar.md +611 -611
  182. package/docs/components/Tooltip/examples/Tooltip.md +27 -27
  183. package/docs/components/TreeView/examples/TreeView.md +1166 -1166
  184. package/docs/components/Truncate/examples/Truncate.md +7 -7
  185. package/docs/components/Wizard/examples/Wizard.md +522 -522
  186. package/docs/demos/AboutModal/examples/AboutModal.md +106 -106
  187. package/docs/demos/Alert/examples/Alert.md +391 -391
  188. package/docs/demos/BackToTop/examples/BackToTop.md +175 -175
  189. package/docs/demos/Banner/examples/Banner.md +364 -364
  190. package/docs/demos/Button/examples/Button.md +50 -50
  191. package/docs/demos/Card/examples/Card.md +1054 -1054
  192. package/docs/demos/CardView/examples/CardView.md +378 -378
  193. package/docs/demos/ContextSelector/examples/ContextSelector.md +449 -449
  194. package/docs/demos/Dashboard/examples/Dashboard.md +541 -541
  195. package/docs/demos/DataList/examples/DataList.md +1148 -1148
  196. package/docs/demos/DescriptionList/examples/DescriptionList.md +544 -544
  197. package/docs/demos/Drawer/examples/Drawer.md +531 -531
  198. package/docs/demos/Form/examples/BasicForms.md +444 -444
  199. package/docs/demos/HelperText/examples/HelperText.md +51 -51
  200. package/docs/demos/JumpLinks/examples/JumpLinks.md +596 -596
  201. package/docs/demos/Masthead/examples/Masthead.md +763 -763
  202. package/docs/demos/Modal/examples/Modal.md +645 -645
  203. package/docs/demos/Nav/examples/Nav.md +649 -649
  204. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1570 -1570
  205. package/docs/demos/Page/examples/Page.md +1330 -1330
  206. package/docs/demos/Page/examples/Penta.md +217 -217
  207. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +23 -23
  208. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +108 -108
  209. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1890 -1890
  210. package/docs/demos/Skeleton/examples/Skeleton.md +176 -176
  211. package/docs/demos/Table/examples/Table.md +4580 -4580
  212. package/docs/demos/Tabs/examples/Tabs.md +1040 -1040
  213. package/docs/demos/Toolbar/examples/Toolbar.md +961 -961
  214. package/docs/demos/Wizard/examples/Wizard.md +1574 -1574
  215. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -2
  216. package/docs/layouts/Flex/examples/Flex.md +290 -290
  217. package/docs/layouts/Gallery/examples/Gallery.md +48 -48
  218. package/docs/layouts/Grid/examples/Grid.md +121 -121
  219. package/docs/layouts/Level/examples/Level.md +11 -11
  220. package/docs/layouts/Split/examples/Split.md +23 -23
  221. package/docs/layouts/Stack/examples/Stack.md +8 -8
  222. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -3
  223. package/docs/utilities/Alignment/examples/Alignment.md +4 -4
  224. package/docs/utilities/Display/examples/Display.md +16 -16
  225. package/docs/utilities/Flex/examples/Flex.md +53 -53
  226. package/docs/utilities/Float/examples/Float.md +2 -2
  227. package/docs/utilities/Spacing/examples/Spacing.md +16 -16
  228. package/layouts/Bullseye/bullseye.css +3 -3
  229. package/layouts/Flex/flex.css +1276 -1276
  230. package/layouts/Gallery/gallery.css +34 -34
  231. package/layouts/Grid/grid.css +531 -531
  232. package/layouts/Level/level.css +4 -4
  233. package/layouts/Split/split.css +6 -6
  234. package/layouts/Stack/stack.css +5 -5
  235. package/package.json +1 -1
  236. package/patternfly-addons.css +2989 -2989
  237. package/patternfly-base-no-globals-theme-dark-unversioned.css +269 -278
  238. package/patternfly-base-no-globals.css +284 -293
  239. package/patternfly-base-theme-dark-unversioned.css +271 -280
  240. package/patternfly-base.css +286 -295
  241. package/patternfly-charts-theme-dark-unversioned.css +66 -66
  242. package/patternfly-charts-theme-dark.css +66 -66
  243. package/patternfly-charts.css +320 -320
  244. package/patternfly-no-globals.css +20217 -20226
  245. package/patternfly-theme-dark-unversioned.css +20209 -20218
  246. package/patternfly.css +20219 -20228
  247. package/patternfly.min.css +1 -1
  248. package/patternfly.min.css.map +1 -1
  249. package/sass-utilities/_init.scss +1 -1
  250. package/utilities/Accessibility/accessibility.css +18 -18
  251. package/utilities/Alignment/alignment.css +24 -24
  252. package/utilities/BackgroundColor/BackgroundColor.css +252 -252
  253. package/utilities/BoxShadow/box-shadow.css +42 -42
  254. package/utilities/Display/display.css +54 -54
  255. package/utilities/Flex/flex.css +228 -228
  256. package/utilities/Float/float.css +12 -12
  257. package/utilities/Sizing/sizing.css +216 -216
  258. package/utilities/Spacing/spacing.css +1512 -1512
  259. package/utilities/Text/text.css +631 -631
package/docs/components/Alert/examples/Alert.md CHANGED
@@ -7,52 +7,52 @@ cssPrefix: ['pf-v5-c-alert','pf-v5-c-alert-group']
7
7
  ### Types
8
8
 
9
9
  ```html
10
- <div class="pf-v5-c-alert pf-m-custom" aria-label="Custom alert">
11
- <div class="pf-v5-c-alert__icon">
10
+ <div class="pf-v6-c-alert pf-m-custom" aria-label="Custom alert">
11
+ <div class="pf-v6-c-alert__icon">
12
12
  <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
13
13
  </div>
14
- <p class="pf-v5-c-alert__title">
15
- <span class="pf-v5-screen-reader">Custom alert:</span>
14
+ <p class="pf-v6-c-alert__title">
15
+ <span class="pf-v6-screen-reader">Custom alert:</span>
16
16
  Custom alert title
17
17
  </p>
18
18
  </div>
19
19
  <br />
20
- <div class="pf-v5-c-alert pf-m-info" aria-label="Information alert">
21
- <div class="pf-v5-c-alert__icon">
20
+ <div class="pf-v6-c-alert pf-m-info" aria-label="Information alert">
21
+ <div class="pf-v6-c-alert__icon">
22
22
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
23
23
  </div>
24
- <p class="pf-v5-c-alert__title">
25
- <span class="pf-v5-screen-reader">Info alert:</span>
24
+ <p class="pf-v6-c-alert__title">
25
+ <span class="pf-v6-screen-reader">Info alert:</span>
26
26
  Info alert title
27
27
  </p>
28
28
  </div>
29
29
  <br />
30
- <div class="pf-v5-c-alert pf-m-success" aria-label="Success alert">
31
- <div class="pf-v5-c-alert__icon">
30
+ <div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
31
+ <div class="pf-v6-c-alert__icon">
32
32
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
33
33
  </div>
34
- <p class="pf-v5-c-alert__title">
35
- <span class="pf-v5-screen-reader">Success alert:</span>
34
+ <p class="pf-v6-c-alert__title">
35
+ <span class="pf-v6-screen-reader">Success alert:</span>
36
36
  Success alert title
37
37
  </p>
38
38
  </div>
39
39
  <br />
40
- <div class="pf-v5-c-alert pf-m-warning" aria-label="Warning alert">
41
- <div class="pf-v5-c-alert__icon">
40
+ <div class="pf-v6-c-alert pf-m-warning" aria-label="Warning alert">
41
+ <div class="pf-v6-c-alert__icon">
42
42
  <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
43
43
  </div>
44
- <p class="pf-v5-c-alert__title">
45
- <span class="pf-v5-screen-reader">Warning alert:</span>
44
+ <p class="pf-v6-c-alert__title">
45
+ <span class="pf-v6-screen-reader">Warning alert:</span>
46
46
  Warning alert title
47
47
  </p>
48
48
  </div>
49
49
  <br />
50
- <div class="pf-v5-c-alert pf-m-danger" aria-label="Danger alert">
51
- <div class="pf-v5-c-alert__icon">
50
+ <div class="pf-v6-c-alert pf-m-danger" aria-label="Danger alert">
51
+ <div class="pf-v6-c-alert__icon">
52
52
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
53
53
  </div>
54
- <p class="pf-v5-c-alert__title">
55
- <span class="pf-v5-screen-reader">Danger alert:</span>
54
+ <p class="pf-v6-c-alert__title">
55
+ <span class="pf-v6-screen-reader">Danger alert:</span>
56
56
  Danger alert title
57
57
  </p>
58
58
  </div>
@@ -62,53 +62,53 @@ cssPrefix: ['pf-v5-c-alert','pf-v5-c-alert-group']
62
62
  ### Variations
63
63
 
64
64
  ```html
65
- <div class="pf-v5-c-alert pf-m-success" aria-label="Success alert">
66
- <div class="pf-v5-c-alert__icon">
65
+ <div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
66
+ <div class="pf-v6-c-alert__icon">
67
67
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
68
68
  </div>
69
- <p class="pf-v5-c-alert__title">
70
- <span class="pf-v5-screen-reader">Success alert:</span>
69
+ <p class="pf-v6-c-alert__title">
70
+ <span class="pf-v6-screen-reader">Success alert:</span>
71
71
  Success alert title
72
72
  </p>
73
- <div class="pf-v5-c-alert__action">
73
+ <div class="pf-v6-c-alert__action">
74
74
  <button
75
- class="pf-v5-c-button pf-m-plain"
75
+ class="pf-v6-c-button pf-m-plain"
76
76
  type="button"
77
77
  aria-label="Close success alert: Success alert title"
78
78
  >
79
79
  <i class="fas fa-times" aria-hidden="true"></i>
80
80
  </button>
81
81
  </div>
82
- <div class="pf-v5-c-alert__description">
82
+ <div class="pf-v6-c-alert__description">
83
83
  <p>Success alert description. This should tell the user more information about the alert.</p>
84
84
  </div>
85
- <div class="pf-v5-c-alert__action-group">
85
+ <div class="pf-v6-c-alert__action-group">
86
86
  <button
87
- class="pf-v5-c-button pf-m-link pf-m-inline"
87
+ class="pf-v6-c-button pf-m-link pf-m-inline"
88
88
  type="button"
89
89
  >View details</button>
90
- <button class="pf-v5-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
90
+ <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
91
91
  </div>
92
92
  </div>
93
93
  <br />
94
- <div class="pf-v5-c-alert pf-m-success" aria-label="Success alert">
95
- <div class="pf-v5-c-alert__icon">
94
+ <div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
95
+ <div class="pf-v6-c-alert__icon">
96
96
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
97
97
  </div>
98
- <p class="pf-v5-c-alert__title">
99
- <span class="pf-v5-screen-reader">Success alert:</span>
98
+ <p class="pf-v6-c-alert__title">
99
+ <span class="pf-v6-screen-reader">Success alert:</span>
100
100
  Success alert title
101
101
  </p>
102
- <div class="pf-v5-c-alert__action">
102
+ <div class="pf-v6-c-alert__action">
103
103
  <button
104
- class="pf-v5-c-button pf-m-plain"
104
+ class="pf-v6-c-button pf-m-plain"
105
105
  type="button"
106
106
  aria-label="Close success alert: Success alert title"
107
107
  >
108
108
  <i class="fas fa-times" aria-hidden="true"></i>
109
109
  </button>
110
110
  </div>
111
- <div class="pf-v5-c-alert__description">
111
+ <div class="pf-v6-c-alert__description">
112
112
  <p>
113
113
  Success alert description. This should tell the user more information about the alert.
114
114
  <a href="#">This is a link.</a>
@@ -116,43 +116,43 @@ cssPrefix: ['pf-v5-c-alert','pf-v5-c-alert-group']
116
116
  </div>
117
117
  </div>
118
118
  <br />
119
- <div class="pf-v5-c-alert pf-m-success" aria-label="Success alert">
120
- <div class="pf-v5-c-alert__icon">
119
+ <div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
120
+ <div class="pf-v6-c-alert__icon">
121
121
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
122
122
  </div>
123
- <p class="pf-v5-c-alert__title">
124
- <span class="pf-v5-screen-reader">Success alert:</span>
123
+ <p class="pf-v6-c-alert__title">
124
+ <span class="pf-v6-screen-reader">Success alert:</span>
125
125
  Success alert title
126
126
  </p>
127
- <div class="pf-v5-c-alert__action">
127
+ <div class="pf-v6-c-alert__action">
128
128
  <button
129
- class="pf-v5-c-button pf-m-plain"
129
+ class="pf-v6-c-button pf-m-plain"
130
130
  type="button"
131
131
  aria-label="Close success alert: Success alert title"
132
132
  >
133
133
  <i class="fas fa-times" aria-hidden="true"></i>
134
134
  </button>
135
135
  </div>
136
- <div class="pf-v5-c-alert__action-group">
136
+ <div class="pf-v6-c-alert__action-group">
137
137
  <button
138
- class="pf-v5-c-button pf-m-link pf-m-inline"
138
+ class="pf-v6-c-button pf-m-link pf-m-inline"
139
139
  type="button"
140
140
  >View details</button>
141
- <button class="pf-v5-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
141
+ <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
142
142
  </div>
143
143
  </div>
144
144
  <br />
145
- <div class="pf-v5-c-alert pf-m-success" aria-label="Success alert">
146
- <div class="pf-v5-c-alert__icon">
145
+ <div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
146
+ <div class="pf-v6-c-alert__icon">
147
147
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
148
148
  </div>
149
- <p class="pf-v5-c-alert__title">
150
- <span class="pf-v5-screen-reader">Success alert:</span>
149
+ <p class="pf-v6-c-alert__title">
150
+ <span class="pf-v6-screen-reader">Success alert:</span>
151
151
  Success alert title
152
152
  </p>
153
- <div class="pf-v5-c-alert__action">
153
+ <div class="pf-v6-c-alert__action">
154
154
  <button
155
- class="pf-v5-c-button pf-m-plain"
155
+ class="pf-v6-c-button pf-m-plain"
156
156
  type="button"
157
157
  aria-label="Close success alert: Success alert title"
158
158
  >
@@ -161,47 +161,47 @@ cssPrefix: ['pf-v5-c-alert','pf-v5-c-alert-group']
161
161
  </div>
162
162
  </div>
163
163
  <br />
164
- <div class="pf-v5-c-alert pf-m-success" aria-label="Success alert">
165
- <div class="pf-v5-c-alert__icon">
164
+ <div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
165
+ <div class="pf-v6-c-alert__icon">
166
166
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
167
167
  </div>
168
- <p class="pf-v5-c-alert__title">
169
- <span class="pf-v5-screen-reader">Success alert:</span>
168
+ <p class="pf-v6-c-alert__title">
169
+ <span class="pf-v6-screen-reader">Success alert:</span>
170
170
  Success alert title
171
171
  </p>
172
172
  </div>
173
173
  <br />
174
174
  <div
175
- class="pf-v5-c-alert pf-m-success"
175
+ class="pf-v6-c-alert pf-m-success"
176
176
  aria-label="Success alert with title truncation"
177
177
  >
178
- <div class="pf-v5-c-alert__icon">
178
+ <div class="pf-v6-c-alert__icon">
179
179
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
180
180
  </div>
181
- <p class="pf-v5-c-alert__title pf-m-truncate">
182
- <span class="pf-v5-screen-reader">Success alert:</span>
181
+ <p class="pf-v6-c-alert__title pf-m-truncate">
182
+ <span class="pf-v6-screen-reader">Success alert:</span>
183
183
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
184
184
  </p>
185
- <div class="pf-v5-c-alert__description">
185
+ <div class="pf-v6-c-alert__description">
186
186
  <p>This example uses ".pf-m-truncate" to limit the title to a single line and truncate any overflow text with ellipses.</p>
187
187
  </div>
188
188
  </div>
189
189
  <br />
190
190
  <div
191
- class="pf-v5-c-alert pf-m-success"
191
+ class="pf-v6-c-alert pf-m-success"
192
192
  aria-label="Success alert with title truncation at 2 lines"
193
193
  >
194
- <div class="pf-v5-c-alert__icon">
194
+ <div class="pf-v6-c-alert__icon">
195
195
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
196
196
  </div>
197
197
  <p
198
- class="pf-v5-c-alert__title pf-m-truncate"
198
+ class="pf-v6-c-alert__title pf-m-truncate"
199
199
  style="--pf-v5-c-alert__title--max-lines: 2"
200
200
  >
201
- <span class="pf-v5-screen-reader">Success alert:</span>
201
+ <span class="pf-v6-screen-reader">Success alert:</span>
202
202
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
203
203
  </p>
204
- <div class="pf-v5-c-alert__description">
204
+ <div class="pf-v6-c-alert__description">
205
205
  <p>This example uses ".pf-m-truncate" and sets "--pf-v5-c-alert__title--max-lines: 2" to limit title to two lines and truncate any overflow text with ellipses.</p>
206
206
  </div>
207
207
  </div>
@@ -212,66 +212,66 @@ cssPrefix: ['pf-v5-c-alert','pf-v5-c-alert-group']
212
212
 
213
213
  ```html
214
214
  <div
215
- class="pf-v5-c-alert pf-m-custom pf-m-inline"
215
+ class="pf-v6-c-alert pf-m-custom pf-m-inline"
216
216
  aria-label="Inline custom alert"
217
217
  >
218
- <div class="pf-v5-c-alert__icon">
218
+ <div class="pf-v6-c-alert__icon">
219
219
  <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
220
220
  </div>
221
- <p class="pf-v5-c-alert__title">
222
- <span class="pf-v5-screen-reader">Custom inline alert:</span>
221
+ <p class="pf-v6-c-alert__title">
222
+ <span class="pf-v6-screen-reader">Custom inline alert:</span>
223
223
  Custom inline alert title
224
224
  </p>
225
225
  </div>
226
226
  <br />
227
227
  <div
228
- class="pf-v5-c-alert pf-m-info pf-m-inline"
228
+ class="pf-v6-c-alert pf-m-info pf-m-inline"
229
229
  aria-label="Inline information alert"
230
230
  >
231
- <div class="pf-v5-c-alert__icon">
231
+ <div class="pf-v6-c-alert__icon">
232
232
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
233
233
  </div>
234
- <p class="pf-v5-c-alert__title">
235
- <span class="pf-v5-screen-reader">Info alert:</span>
234
+ <p class="pf-v6-c-alert__title">
235
+ <span class="pf-v6-screen-reader">Info alert:</span>
236
236
  Info inline alert title
237
237
  </p>
238
238
  </div>
239
239
  <br />
240
240
  <div
241
- class="pf-v5-c-alert pf-m-success pf-m-inline"
241
+ class="pf-v6-c-alert pf-m-success pf-m-inline"
242
242
  aria-label="Inline success alert"
243
243
  >
244
- <div class="pf-v5-c-alert__icon">
244
+ <div class="pf-v6-c-alert__icon">
245
245
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
246
246
  </div>
247
- <p class="pf-v5-c-alert__title">
248
- <span class="pf-v5-screen-reader">Success alert:</span>
247
+ <p class="pf-v6-c-alert__title">
248
+ <span class="pf-v6-screen-reader">Success alert:</span>
249
249
  Success inline alert title
250
250
  </p>
251
251
  </div>
252
252
  <br />
253
253
  <div
254
- class="pf-v5-c-alert pf-m-warning pf-m-inline"
254
+ class="pf-v6-c-alert pf-m-warning pf-m-inline"
255
255
  aria-label="Inline warning alert"
256
256
  >
257
- <div class="pf-v5-c-alert__icon">
257
+ <div class="pf-v6-c-alert__icon">
258
258
  <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
259
259
  </div>
260
- <p class="pf-v5-c-alert__title">
261
- <span class="pf-v5-screen-reader">Warning alert:</span>
260
+ <p class="pf-v6-c-alert__title">
261
+ <span class="pf-v6-screen-reader">Warning alert:</span>
262
262
  Warning inline alert title
263
263
  </p>
264
264
  </div>
265
265
  <br />
266
266
  <div
267
- class="pf-v5-c-alert pf-m-danger pf-m-inline"
267
+ class="pf-v6-c-alert pf-m-danger pf-m-inline"
268
268
  aria-label="Inline danger alert"
269
269
  >
270
- <div class="pf-v5-c-alert__icon">
270
+ <div class="pf-v6-c-alert__icon">
271
271
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
272
272
  </div>
273
- <p class="pf-v5-c-alert__title">
274
- <span class="pf-v5-screen-reader">Danger alert:</span>
273
+ <p class="pf-v6-c-alert__title">
274
+ <span class="pf-v6-screen-reader">Danger alert:</span>
275
275
  Danger inline alert title
276
276
  </p>
277
277
  </div>
@@ -281,53 +281,53 @@ cssPrefix: ['pf-v5-c-alert','pf-v5-c-alert-group']
281
281
  ### Inline variations
282
282
 
283
283
  ```html
284
- <div class="pf-v5-c-alert pf-m-success pf-m-inline" aria-label="Success alert">
285
- <div class="pf-v5-c-alert__icon">
284
+ <div class="pf-v6-c-alert pf-m-success pf-m-inline" aria-label="Success alert">
285
+ <div class="pf-v6-c-alert__icon">
286
286
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
287
287
  </div>
288
- <p class="pf-v5-c-alert__title">
289
- <span class="pf-v5-screen-reader">Success alert:</span>
288
+ <p class="pf-v6-c-alert__title">
289
+ <span class="pf-v6-screen-reader">Success alert:</span>
290
290
  Success alert title
291
291
  </p>
292
- <div class="pf-v5-c-alert__action">
292
+ <div class="pf-v6-c-alert__action">
293
293
  <button
294
- class="pf-v5-c-button pf-m-plain"
294
+ class="pf-v6-c-button pf-m-plain"
295
295
  type="button"
296
296
  aria-label="Close success alert: Success alert title"
297
297
  >
298
298
  <i class="fas fa-times" aria-hidden="true"></i>
299
299
  </button>
300
300
  </div>
301
- <div class="pf-v5-c-alert__description">
301
+ <div class="pf-v6-c-alert__description">
302
302
  <p>Success alert description. This should tell the user more information about the alert.</p>
303
303
  </div>
304
- <div class="pf-v5-c-alert__action-group">
304
+ <div class="pf-v6-c-alert__action-group">
305
305
  <button
306
- class="pf-v5-c-button pf-m-link pf-m-inline"
306
+ class="pf-v6-c-button pf-m-link pf-m-inline"
307
307
  type="button"
308
308
  >View details</button>
309
- <button class="pf-v5-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
309
+ <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
310
310
  </div>
311
311
  </div>
312
312
  <br />
313
- <div class="pf-v5-c-alert pf-m-success pf-m-inline" aria-label="Success alert">
314
- <div class="pf-v5-c-alert__icon">
313
+ <div class="pf-v6-c-alert pf-m-success pf-m-inline" aria-label="Success alert">
314
+ <div class="pf-v6-c-alert__icon">
315
315
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
316
316
  </div>
317
- <p class="pf-v5-c-alert__title">
318
- <span class="pf-v5-screen-reader">Success alert:</span>
317
+ <p class="pf-v6-c-alert__title">
318
+ <span class="pf-v6-screen-reader">Success alert:</span>
319
319
  Success alert title
320
320
  </p>
321
- <div class="pf-v5-c-alert__action">
321
+ <div class="pf-v6-c-alert__action">
322
322
  <button
323
- class="pf-v5-c-button pf-m-plain"
323
+ class="pf-v6-c-button pf-m-plain"
324
324
  type="button"
325
325
  aria-label="Close success alert: Success alert title"
326
326
  >
327
327
  <i class="fas fa-times" aria-hidden="true"></i>
328
328
  </button>
329
329
  </div>
330
- <div class="pf-v5-c-alert__description">
330
+ <div class="pf-v6-c-alert__description">
331
331
  <p>
332
332
  Success alert description. This should tell the user more information about the alert.
333
333
  <a href="#">This is a link.</a>
@@ -335,38 +335,38 @@ cssPrefix: ['pf-v5-c-alert','pf-v5-c-alert-group']
335
335
  </div>
336
336
  </div>
337
337
  <br />
338
- <div class="pf-v5-c-alert pf-m-success pf-m-inline" aria-label="Success alert">
339
- <div class="pf-v5-c-alert__icon">
338
+ <div class="pf-v6-c-alert pf-m-success pf-m-inline" aria-label="Success alert">
339
+ <div class="pf-v6-c-alert__icon">
340
340
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
341
341
  </div>
342
- <p class="pf-v5-c-alert__title">
343
- <span class="pf-v5-screen-reader">Success alert:</span>
342
+ <p class="pf-v6-c-alert__title">
343
+ <span class="pf-v6-screen-reader">Success alert:</span>
344
344
  Success alert title
345
345
  </p>
346
- <div class="pf-v5-c-alert__action">
346
+ <div class="pf-v6-c-alert__action">
347
347
  <button
348
- class="pf-v5-c-button pf-m-plain"
348
+ class="pf-v6-c-button pf-m-plain"
349
349
  type="button"
350
350
  aria-label="Close success alert: Success alert title"
351
351
  >
352
352
  <i class="fas fa-times" aria-hidden="true"></i>
353
353
  </button>
354
354
  </div>
355
- <div class="pf-v5-c-alert__action-group">
355
+ <div class="pf-v6-c-alert__action-group">
356
356
  <button
357
- class="pf-v5-c-button pf-m-link pf-m-inline"
357
+ class="pf-v6-c-button pf-m-link pf-m-inline"
358
358
  type="button"
359
359
  >View details</button>
360
- <button class="pf-v5-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
360
+ <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
361
361
  </div>
362
362
  </div>
363
363
  <br />
364
- <div class="pf-v5-c-alert pf-m-success pf-m-inline" aria-label="Success alert">
365
- <div class="pf-v5-c-alert__icon">
364
+ <div class="pf-v6-c-alert pf-m-success pf-m-inline" aria-label="Success alert">
365
+ <div class="pf-v6-c-alert__icon">
366
366
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
367
367
  </div>
368
- <p class="pf-v5-c-alert__title">
369
- <span class="pf-v5-screen-reader">Success alert:</span>
368
+ <p class="pf-v6-c-alert__title">
369
+ <span class="pf-v6-screen-reader">Success alert:</span>
370
370
  Success alert title
371
371
  </p>
372
372
  </div>
@@ -376,22 +376,22 @@ cssPrefix: ['pf-v5-c-alert','pf-v5-c-alert-group']
376
376
  ### Custom icon
377
377
 
378
378
  ```html
379
- <div class="pf-v5-c-alert pf-m-success" aria-label="Success alert">
380
- <div class="pf-v5-c-alert__icon">
379
+ <div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
380
+ <div class="pf-v6-c-alert__icon">
381
381
  <i class="fas fa-fw fa-cog" aria-hidden="true"></i>
382
382
  </div>
383
- <p class="pf-v5-c-alert__title">
384
- <span class="pf-v5-screen-reader">Success alert:</span>
383
+ <p class="pf-v6-c-alert__title">
384
+ <span class="pf-v6-screen-reader">Success alert:</span>
385
385
  Success alert title
386
386
  </p>
387
387
  </div>
388
388
  <br />
389
- <div class="pf-v5-c-alert pf-m-success pf-m-inline" aria-label="Success alert">
390
- <div class="pf-v5-c-alert__icon">
389
+ <div class="pf-v6-c-alert pf-m-success pf-m-inline" aria-label="Success alert">
390
+ <div class="pf-v6-c-alert__icon">
391
391
  <i class="fas fa-fw fa-cog" aria-hidden="true"></i>
392
392
  </div>
393
- <p class="pf-v5-c-alert__title">
394
- <span class="pf-v5-screen-reader">Success alert:</span>
393
+ <p class="pf-v6-c-alert__title">
394
+ <span class="pf-v6-screen-reader">Success alert:</span>
395
395
  Success alert title (inline)
396
396
  </p>
397
397
  </div>
@@ -402,14 +402,14 @@ cssPrefix: ['pf-v5-c-alert','pf-v5-c-alert-group']
402
402
 
403
403
  ```html
404
404
  <div
405
- class="pf-v5-c-alert pf-m-success pf-m-plain pf-m-inline"
405
+ class="pf-v6-c-alert pf-m-success pf-m-plain pf-m-inline"
406
406
  aria-label="Success alert"
407
407
  >
408
- <div class="pf-v5-c-alert__icon">
408
+ <div class="pf-v6-c-alert__icon">
409
409
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
410
410
  </div>
411
- <p class="pf-v5-c-alert__title">
412
- <span class="pf-v5-screen-reader">Success alert:</span>
411
+ <p class="pf-v6-c-alert__title">
412
+ <span class="pf-v6-screen-reader">Success alert:</span>
413
413
  Success alert title
414
414
  </p>
415
415
  </div>
@@ -420,186 +420,186 @@ cssPrefix: ['pf-v5-c-alert','pf-v5-c-alert-group']
420
420
 
421
421
  ```html
422
422
  <div
423
- class="pf-v5-c-alert pf-m-expandable pf-m-success"
423
+ class="pf-v6-c-alert pf-m-expandable pf-m-success"
424
424
  aria-label="Success alert"
425
425
  >
426
- <div class="pf-v5-c-alert__toggle">
426
+ <div class="pf-v6-c-alert__toggle">
427
427
  <button
428
- class="pf-v5-c-button pf-m-plain"
428
+ class="pf-v6-c-button pf-m-plain"
429
429
  type="button"
430
430
  aria-expanded="false"
431
431
  id="alert-expandable-example-1-toggle"
432
432
  aria-label="Details"
433
433
  aria-labelledby="alert-expandable-example-1-title alert-expandable-example-1-toggle"
434
434
  >
435
- <span class="pf-v5-c-alert__toggle-icon">
435
+ <span class="pf-v6-c-alert__toggle-icon">
436
436
  <i class="fas fa-angle-right" aria-hidden="true"></i>
437
437
  </span>
438
438
  </button>
439
439
  </div>
440
- <div class="pf-v5-c-alert__icon">
440
+ <div class="pf-v6-c-alert__icon">
441
441
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
442
442
  </div>
443
- <p class="pf-v5-c-alert__title" id="alert-expandable-example-1-title">
444
- <span class="pf-v5-screen-reader">Success alert:</span>
443
+ <p class="pf-v6-c-alert__title" id="alert-expandable-example-1-title">
444
+ <span class="pf-v6-screen-reader">Success alert:</span>
445
445
  Success alert title
446
446
  </p>
447
- <div class="pf-v5-c-alert__action">
447
+ <div class="pf-v6-c-alert__action">
448
448
  <button
449
- class="pf-v5-c-button pf-m-plain"
449
+ class="pf-v6-c-button pf-m-plain"
450
450
  type="button"
451
451
  aria-label="Close success alert: Success alert title"
452
452
  >
453
453
  <i class="fas fa-times" aria-hidden="true"></i>
454
454
  </button>
455
455
  </div>
456
- <div class="pf-v5-c-alert__description" hidden>
456
+ <div class="pf-v6-c-alert__description" hidden>
457
457
  <p>Success alert description. This should tell the user more information about the alert.</p>
458
458
  </div>
459
- <div class="pf-v5-c-alert__action-group">
459
+ <div class="pf-v6-c-alert__action-group">
460
460
  <button
461
- class="pf-v5-c-button pf-m-link pf-m-inline"
461
+ class="pf-v6-c-button pf-m-link pf-m-inline"
462
462
  type="button"
463
463
  >View details</button>
464
- <button class="pf-v5-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
464
+ <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
465
465
  </div>
466
466
  </div>
467
467
  <br />
468
468
  <div
469
- class="pf-v5-c-alert pf-m-expandable pf-m-expanded pf-m-success"
469
+ class="pf-v6-c-alert pf-m-expandable pf-m-expanded pf-m-success"
470
470
  aria-label="Success alert"
471
471
  >
472
- <div class="pf-v5-c-alert__toggle">
472
+ <div class="pf-v6-c-alert__toggle">
473
473
  <button
474
- class="pf-v5-c-button pf-m-plain"
474
+ class="pf-v6-c-button pf-m-plain"
475
475
  type="button"
476
476
  aria-expanded="true"
477
477
  id="alert-expandable-example-2-toggle"
478
478
  aria-label="Details"
479
479
  aria-labelledby="alert-expandable-example-2-title alert-expandable-example-2-toggle"
480
480
  >
481
- <span class="pf-v5-c-alert__toggle-icon">
481
+ <span class="pf-v6-c-alert__toggle-icon">
482
482
  <i class="fas fa-angle-right" aria-hidden="true"></i>
483
483
  </span>
484
484
  </button>
485
485
  </div>
486
- <div class="pf-v5-c-alert__icon">
486
+ <div class="pf-v6-c-alert__icon">
487
487
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
488
488
  </div>
489
- <p class="pf-v5-c-alert__title" id="alert-expandable-example-2-title">
490
- <span class="pf-v5-screen-reader">Success alert:</span>
489
+ <p class="pf-v6-c-alert__title" id="alert-expandable-example-2-title">
490
+ <span class="pf-v6-screen-reader">Success alert:</span>
491
491
  Success alert title (expanded)
492
492
  </p>
493
- <div class="pf-v5-c-alert__action">
493
+ <div class="pf-v6-c-alert__action">
494
494
  <button
495
- class="pf-v5-c-button pf-m-plain"
495
+ class="pf-v6-c-button pf-m-plain"
496
496
  type="button"
497
497
  aria-label="Close success alert: Success alert title"
498
498
  >
499
499
  <i class="fas fa-times" aria-hidden="true"></i>
500
500
  </button>
501
501
  </div>
502
- <div class="pf-v5-c-alert__description">
502
+ <div class="pf-v6-c-alert__description">
503
503
  <p>Success alert description. This should tell the user more information about the alert.</p>
504
504
  </div>
505
- <div class="pf-v5-c-alert__action-group">
505
+ <div class="pf-v6-c-alert__action-group">
506
506
  <button
507
- class="pf-v5-c-button pf-m-link pf-m-inline"
507
+ class="pf-v6-c-button pf-m-link pf-m-inline"
508
508
  type="button"
509
509
  >View details</button>
510
- <button class="pf-v5-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
510
+ <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
511
511
  </div>
512
512
  </div>
513
513
  <br />
514
514
  <div
515
- class="pf-v5-c-alert pf-m-expandable pf-m-success pf-m-inline"
515
+ class="pf-v6-c-alert pf-m-expandable pf-m-success pf-m-inline"
516
516
  aria-label="Success alert"
517
517
  >
518
- <div class="pf-v5-c-alert__toggle">
518
+ <div class="pf-v6-c-alert__toggle">
519
519
  <button
520
- class="pf-v5-c-button pf-m-plain"
520
+ class="pf-v6-c-button pf-m-plain"
521
521
  type="button"
522
522
  aria-expanded="false"
523
523
  id="alert-expandable-example-3-toggle"
524
524
  aria-label="Details"
525
525
  aria-labelledby="alert-expandable-example-3-title alert-expandable-example-3-toggle"
526
526
  >
527
- <span class="pf-v5-c-alert__toggle-icon">
527
+ <span class="pf-v6-c-alert__toggle-icon">
528
528
  <i class="fas fa-angle-right" aria-hidden="true"></i>
529
529
  </span>
530
530
  </button>
531
531
  </div>
532
- <div class="pf-v5-c-alert__icon">
532
+ <div class="pf-v6-c-alert__icon">
533
533
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
534
534
  </div>
535
- <p class="pf-v5-c-alert__title" id="alert-expandable-example-3-title">
536
- <span class="pf-v5-screen-reader">Success alert:</span>
535
+ <p class="pf-v6-c-alert__title" id="alert-expandable-example-3-title">
536
+ <span class="pf-v6-screen-reader">Success alert:</span>
537
537
  Success alert title
538
538
  </p>
539
- <div class="pf-v5-c-alert__action">
539
+ <div class="pf-v6-c-alert__action">
540
540
  <button
541
- class="pf-v5-c-button pf-m-plain"
541
+ class="pf-v6-c-button pf-m-plain"
542
542
  type="button"
543
543
  aria-label="Close success alert: Success alert title"
544
544
  >
545
545
  <i class="fas fa-times" aria-hidden="true"></i>
546
546
  </button>
547
547
  </div>
548
- <div class="pf-v5-c-alert__description" hidden>
548
+ <div class="pf-v6-c-alert__description" hidden>
549
549
  <p>Success alert description. This should tell the user more information about the alert.</p>
550
550
  </div>
551
- <div class="pf-v5-c-alert__action-group">
551
+ <div class="pf-v6-c-alert__action-group">
552
552
  <button
553
- class="pf-v5-c-button pf-m-link pf-m-inline"
553
+ class="pf-v6-c-button pf-m-link pf-m-inline"
554
554
  type="button"
555
555
  >View details</button>
556
- <button class="pf-v5-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
556
+ <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
557
557
  </div>
558
558
  </div>
559
559
  <br />
560
560
  <div
561
- class="pf-v5-c-alert pf-m-expandable pf-m-expanded pf-m-success pf-m-inline"
561
+ class="pf-v6-c-alert pf-m-expandable pf-m-expanded pf-m-success pf-m-inline"
562
562
  aria-label="Success alert"
563
563
  >
564
- <div class="pf-v5-c-alert__toggle">
564
+ <div class="pf-v6-c-alert__toggle">
565
565
  <button
566
- class="pf-v5-c-button pf-m-plain"
566
+ class="pf-v6-c-button pf-m-plain"
567
567
  type="button"
568
568
  aria-expanded="true"
569
569
  id="alert-expandable-example-4-toggle"
570
570
  aria-label="Details"
571
571
  aria-labelledby="alert-expandable-example-4-title alert-expandable-example-4-toggle"
572
572
  >
573
- <span class="pf-v5-c-alert__toggle-icon">
573
+ <span class="pf-v6-c-alert__toggle-icon">
574
574
  <i class="fas fa-angle-right" aria-hidden="true"></i>
575
575
  </span>
576
576
  </button>
577
577
  </div>
578
- <div class="pf-v5-c-alert__icon">
578
+ <div class="pf-v6-c-alert__icon">
579
579
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
580
580
  </div>
581
- <p class="pf-v5-c-alert__title" id="alert-expandable-example-4-title">
582
- <span class="pf-v5-screen-reader">Success alert:</span>
581
+ <p class="pf-v6-c-alert__title" id="alert-expandable-example-4-title">
582
+ <span class="pf-v6-screen-reader">Success alert:</span>
583
583
  Success alert title (expanded)
584
584
  </p>
585
- <div class="pf-v5-c-alert__action">
585
+ <div class="pf-v6-c-alert__action">
586
586
  <button
587
- class="pf-v5-c-button pf-m-plain"
587
+ class="pf-v6-c-button pf-m-plain"
588
588
  type="button"
589
589
  aria-label="Close success alert: Success alert title"
590
590
  >
591
591
  <i class="fas fa-times" aria-hidden="true"></i>
592
592
  </button>
593
593
  </div>
594
- <div class="pf-v5-c-alert__description">
594
+ <div class="pf-v6-c-alert__description">
595
595
  <p>Success alert description. This should tell the user more information about the alert.</p>
596
596
  </div>
597
- <div class="pf-v5-c-alert__action-group">
597
+ <div class="pf-v6-c-alert__action-group">
598
598
  <button
599
- class="pf-v5-c-button pf-m-link pf-m-inline"
599
+ class="pf-v6-c-button pf-m-link pf-m-inline"
600
600
  type="button"
601
601
  >View details</button>
602
- <button class="pf-v5-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
602
+ <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
603
603
  </div>
604
604
  </div>
605
605
 
@@ -612,50 +612,50 @@ cssPrefix: ['pf-v5-c-alert','pf-v5-c-alert-group']
612
612
  An alert group is optional when only one static alert is needed. It becomes required when more than one alert is used in a list.
613
613
 
614
614
  ```html
615
- <ul class="pf-v5-c-alert-group" role="list">
616
- <li class="pf-v5-c-alert-group__item">
615
+ <ul class="pf-v6-c-alert-group" role="list">
616
+ <li class="pf-v6-c-alert-group__item">
617
617
  <div
618
- class="pf-v5-c-alert pf-m-inline pf-m-success"
618
+ class="pf-v6-c-alert pf-m-inline pf-m-success"
619
619
  aria-label="Success alert"
620
620
  >
621
- <div class="pf-v5-c-alert__icon">
621
+ <div class="pf-v6-c-alert__icon">
622
622
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
623
623
  </div>
624
- <p class="pf-v5-c-alert__title">
625
- <span class="pf-v5-screen-reader">Success alert:</span>
624
+ <p class="pf-v6-c-alert__title">
625
+ <span class="pf-v6-screen-reader">Success alert:</span>
626
626
  Success alert title
627
627
  </p>
628
628
  </div>
629
629
  </li>
630
630
 
631
- <li class="pf-v5-c-alert-group__item">
631
+ <li class="pf-v6-c-alert-group__item">
632
632
  <div
633
- class="pf-v5-c-alert pf-m-inline pf-m-danger"
633
+ class="pf-v6-c-alert pf-m-inline pf-m-danger"
634
634
  aria-label="Danger alert"
635
635
  >
636
- <div class="pf-v5-c-alert__icon">
636
+ <div class="pf-v6-c-alert__icon">
637
637
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
638
638
  </div>
639
- <p class="pf-v5-c-alert__title">
640
- <span class="pf-v5-screen-reader">Danger alert:</span>
639
+ <p class="pf-v6-c-alert__title">
640
+ <span class="pf-v6-screen-reader">Danger alert:</span>
641
641
  Danger alert title
642
642
  </p>
643
643
  </div>
644
644
  </li>
645
645
 
646
- <li class="pf-v5-c-alert-group__item">
646
+ <li class="pf-v6-c-alert-group__item">
647
647
  <div
648
- class="pf-v5-c-alert pf-m-inline pf-m-info"
648
+ class="pf-v6-c-alert pf-m-inline pf-m-info"
649
649
  aria-label="Information alert"
650
650
  >
651
- <div class="pf-v5-c-alert__icon">
651
+ <div class="pf-v6-c-alert__icon">
652
652
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
653
653
  </div>
654
- <p class="pf-v5-c-alert__title">
655
- <span class="pf-v5-screen-reader">Info alert:</span>
654
+ <p class="pf-v6-c-alert__title">
655
+ <span class="pf-v6-screen-reader">Info alert:</span>
656
656
  Info alert title
657
657
  </p>
658
- <div class="pf-v5-c-alert__description">
658
+ <div class="pf-v6-c-alert__description">
659
659
  <p>
660
660
  Info alert description.
661
661
  <a href="#">This is a link.</a>
@@ -681,19 +681,19 @@ For sighted users, interactive elements can be included in this message in one o
681
681
  * Using a button to download: "The build is complete. Go to the Builds page to <button class="pf-v5-c-button pf-m-link pf-m-inline" type="button">download</button>" using `<button class="pf-v5-c-button pf-m-link pf-m-inline type="button">download</button>`
682
682
 
683
683
  ```html isFullscreen
684
- <ul class="pf-v5-c-alert-group pf-m-toast" role="list">
685
- <li class="pf-v5-c-alert-group__item">
686
- <div class="pf-v5-c-alert pf-m-success" aria-label="Success toast alert">
687
- <div class="pf-v5-c-alert__icon">
684
+ <ul class="pf-v6-c-alert-group pf-m-toast" role="list">
685
+ <li class="pf-v6-c-alert-group__item">
686
+ <div class="pf-v6-c-alert pf-m-success" aria-label="Success toast alert">
687
+ <div class="pf-v6-c-alert__icon">
688
688
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
689
689
  </div>
690
- <p class="pf-v5-c-alert__title" id="alert_one_title">
691
- <span class="pf-v5-screen-reader">Success alert:</span>
690
+ <p class="pf-v6-c-alert__title" id="alert_one_title">
691
+ <span class="pf-v6-screen-reader">Success alert:</span>
692
692
  Success toast alert title
693
693
  </p>
694
- <div class="pf-v5-c-alert__action">
694
+ <div class="pf-v6-c-alert__action">
695
695
  <button
696
- class="pf-v5-c-button pf-m-plain"
696
+ class="pf-v6-c-button pf-m-plain"
697
697
  type="button"
698
698
  aria-label="Close success alert: Success alert title"
699
699
  >
@@ -703,18 +703,18 @@ For sighted users, interactive elements can be included in this message in one o
703
703
  </div>
704
704
  </li>
705
705
 
706
- <li class="pf-v5-c-alert-group__item">
707
- <div class="pf-v5-c-alert pf-m-danger" aria-label="Danger toast alert">
708
- <div class="pf-v5-c-alert__icon">
706
+ <li class="pf-v6-c-alert-group__item">
707
+ <div class="pf-v6-c-alert pf-m-danger" aria-label="Danger toast alert">
708
+ <div class="pf-v6-c-alert__icon">
709
709
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
710
710
  </div>
711
- <p class="pf-v5-c-alert__title" id="alert_two_title">
712
- <span class="pf-v5-screen-reader">Danger alert:</span>
711
+ <p class="pf-v6-c-alert__title" id="alert_two_title">
712
+ <span class="pf-v6-screen-reader">Danger alert:</span>
713
713
  Danger toast alert title
714
714
  </p>
715
- <div class="pf-v5-c-alert__action">
715
+ <div class="pf-v6-c-alert__action">
716
716
  <button
717
- class="pf-v5-c-button pf-m-plain"
717
+ class="pf-v6-c-button pf-m-plain"
718
718
  type="button"
719
719
  aria-label="Close success alert: Success alert title"
720
720
  >
@@ -724,24 +724,24 @@ For sighted users, interactive elements can be included in this message in one o
724
724
  </div>
725
725
  </li>
726
726
 
727
- <li class="pf-v5-c-alert-group__item">
728
- <div class="pf-v5-c-alert pf-m-info" aria-label="Information toast alert">
729
- <div class="pf-v5-c-alert__icon">
727
+ <li class="pf-v6-c-alert-group__item">
728
+ <div class="pf-v6-c-alert pf-m-info" aria-label="Information toast alert">
729
+ <div class="pf-v6-c-alert__icon">
730
730
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
731
731
  </div>
732
- <p class="pf-v5-c-alert__title" id="alert_three_title">
733
- <span class="pf-v5-screen-reader">Info alert:</span>
732
+ <p class="pf-v6-c-alert__title" id="alert_three_title">
733
+ <span class="pf-v6-screen-reader">Info alert:</span>
734
734
  Info toast alert title
735
735
  </p>
736
- <div class="pf-v5-c-alert__description">
736
+ <div class="pf-v6-c-alert__description">
737
737
  <p>
738
738
  Info toast alert description. From the settings tab, click
739
739
  <a href="#">View logs</a>&nbsp;to review the details.
740
740
  </p>
741
741
  </div>
742
- <div class="pf-v5-c-alert__action">
742
+ <div class="pf-v6-c-alert__action">
743
743
  <button
744
- class="pf-v5-c-button pf-m-plain"
744
+ class="pf-v6-c-button pf-m-plain"
745
745
  type="button"
746
746
  aria-label="Close success alert: Success alert title"
747
747
  >
@@ -751,9 +751,9 @@ For sighted users, interactive elements can be included in this message in one o
751
751
  </div>
752
752
  </li>
753
753
 
754
- <li class="pf-v5-c-alert-group__item">
754
+ <li class="pf-v6-c-alert-group__item">
755
755
  <button
756
- class="pf-v5-c-alert-group__overflow-button"
756
+ class="pf-v6-c-alert-group__overflow-button"
757
757
  >View 3 more notifications</button>
758
758
  </li>
759
759
  </ul>