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

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 +5 -5
  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/ModalBox/examples/ModalBox.md CHANGED
@@ -10,25 +10,25 @@ cssPrefix: pf-v5-c-modal-box
10
10
 
11
11
  ```html isFullscreen
12
12
  <div
13
- class="pf-v5-c-modal-box"
13
+ class="pf-v6-c-modal-box"
14
14
  role="dialog"
15
15
  aria-modal="true"
16
16
  aria-labelledby="modal-title"
17
17
  aria-describedby="modal-description"
18
18
  >
19
- <div class="pf-v5-c-modal-box__close">
20
- <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Close">
19
+ <div class="pf-v6-c-modal-box__close">
20
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
21
21
  <i class="fas fa-times" aria-hidden="true"></i>
22
22
  </button>
23
23
  </div>
24
- <header class="pf-v5-c-modal-box__header">
25
- <h1 class="pf-v5-c-modal-box__title" id="modal-title">Modal title</h1>
24
+ <header class="pf-v6-c-modal-box__header">
25
+ <h1 class="pf-v6-c-modal-box__title" id="modal-title">Modal title</h1>
26
26
  </header>
27
27
  <div
28
- class="pf-v5-c-modal-box__body"
28
+ class="pf-v6-c-modal-box__body"
29
29
  id="modal-description"
30
30
  >To support screen reader user awareness of the dialog text, the dialog text is wrapped in a div that is referenced by aria-describedby.</div>
31
- <footer class="pf-v5-c-modal-box__footer">Modal footer</footer>
31
+ <footer class="pf-v6-c-modal-box__footer">Modal footer</footer>
32
32
  </div>
33
33
 
34
34
  ```
@@ -37,38 +37,38 @@ cssPrefix: pf-v5-c-modal-box
37
37
 
38
38
  ```html isFullscreen
39
39
  <div
40
- class="pf-v5-c-modal-box"
40
+ class="pf-v6-c-modal-box"
41
41
  role="dialog"
42
42
  aria-modal="true"
43
43
  aria-labelledby="modal-help-title"
44
44
  aria-describedby="modal-help-description"
45
45
  >
46
- <div class="pf-v5-c-modal-box__close">
47
- <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Close">
46
+ <div class="pf-v6-c-modal-box__close">
47
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
48
48
  <i class="fas fa-times" aria-hidden="true"></i>
49
49
  </button>
50
50
  </div>
51
- <header class="pf-v5-c-modal-box__header pf-m-help">
52
- <div class="pf-v5-c-modal-box__header-main">
51
+ <header class="pf-v6-c-modal-box__header pf-m-help">
52
+ <div class="pf-v6-c-modal-box__header-main">
53
53
  <h1
54
- class="pf-v5-c-modal-box__title"
54
+ class="pf-v6-c-modal-box__title"
55
55
  id="modal-help-title"
56
56
  >Modal title Modal title Modal title Modal title Modal title Modal title Modal title Modal title</h1>
57
57
  <div
58
- class="pf-v5-c-modal-box__description"
58
+ class="pf-v6-c-modal-box__description"
59
59
  id="modal-help-description"
60
60
  >A description is used when you want to provide more info about the modal than the title is able to describe. The content in the description is static and will not scroll with the rest of the modal body.</div>
61
61
  </div>
62
- <div class="pf-v5-c-modal-box__header-help">
63
- <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Help">
62
+ <div class="pf-v6-c-modal-box__header-help">
63
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Help">
64
64
  <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
65
65
  </button>
66
66
  </div>
67
67
  </header>
68
68
  <div
69
- class="pf-v5-c-modal-box__body"
69
+ class="pf-v6-c-modal-box__body"
70
70
  >To support screen reader user awareness of the dialog text, the dialog text is wrapped in a div that is referenced by aria-describedby.</div>
71
- <footer class="pf-v5-c-modal-box__footer">Modal footer</footer>
71
+ <footer class="pf-v6-c-modal-box__footer">Modal footer</footer>
72
72
  </div>
73
73
 
74
74
  ```
@@ -77,27 +77,27 @@ cssPrefix: pf-v5-c-modal-box
77
77
 
78
78
  ```html isFullscreen
79
79
  <div
80
- class="pf-v5-c-modal-box pf-m-sm"
80
+ class="pf-v6-c-modal-box pf-m-sm"
81
81
  role="dialog"
82
82
  aria-modal="true"
83
83
  aria-labelledby="modal-sm-title"
84
84
  aria-describedby="modal-sm-description"
85
85
  >
86
- <div class="pf-v5-c-modal-box__close">
87
- <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Close">
86
+ <div class="pf-v6-c-modal-box__close">
87
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
88
88
  <i class="fas fa-times" aria-hidden="true"></i>
89
89
  </button>
90
90
  </div>
91
- <header class="pf-v5-c-modal-box__header">
92
- <h1 class="pf-v5-c-modal-box__title" id="modal-sm-title">Modal title</h1>
91
+ <header class="pf-v6-c-modal-box__header">
92
+ <h1 class="pf-v6-c-modal-box__title" id="modal-sm-title">Modal title</h1>
93
93
  </header>
94
- <div class="pf-v5-c-modal-box__body" id="modal-sm-description">
94
+ <div class="pf-v6-c-modal-box__body" id="modal-sm-description">
95
95
  Static text describing modal purpose. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
96
96
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
97
97
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
98
98
  consequat.
99
99
  </div>
100
- <footer class="pf-v5-c-modal-box__footer">Modal footer</footer>
100
+ <footer class="pf-v6-c-modal-box__footer">Modal footer</footer>
101
101
  </div>
102
102
 
103
103
  ```
@@ -106,27 +106,27 @@ cssPrefix: pf-v5-c-modal-box
106
106
 
107
107
  ```html isFullscreen
108
108
  <div
109
- class="pf-v5-c-modal-box pf-m-md"
109
+ class="pf-v6-c-modal-box pf-m-md"
110
110
  role="dialog"
111
111
  aria-modal="true"
112
112
  aria-labelledby="modal-md-title"
113
113
  aria-describedby="modal-md-description"
114
114
  >
115
- <div class="pf-v5-c-modal-box__close">
116
- <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Close">
115
+ <div class="pf-v6-c-modal-box__close">
116
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
117
117
  <i class="fas fa-times" aria-hidden="true"></i>
118
118
  </button>
119
119
  </div>
120
- <header class="pf-v5-c-modal-box__header">
121
- <h1 class="pf-v5-c-modal-box__title" id="modal-md-title">Modal title</h1>
120
+ <header class="pf-v6-c-modal-box__header">
121
+ <h1 class="pf-v6-c-modal-box__title" id="modal-md-title">Modal title</h1>
122
122
  </header>
123
- <div class="pf-v5-c-modal-box__body" id="modal-md-description">
123
+ <div class="pf-v6-c-modal-box__body" id="modal-md-description">
124
124
  Static text describing modal purpose. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
125
125
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
126
126
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
127
127
  consequat.
128
128
  </div>
129
- <footer class="pf-v5-c-modal-box__footer">Modal footer</footer>
129
+ <footer class="pf-v6-c-modal-box__footer">Modal footer</footer>
130
130
  </div>
131
131
 
132
132
  ```
@@ -135,27 +135,27 @@ cssPrefix: pf-v5-c-modal-box
135
135
 
136
136
  ```html isFullscreen
137
137
  <div
138
- class="pf-v5-c-modal-box pf-m-lg"
138
+ class="pf-v6-c-modal-box pf-m-lg"
139
139
  role="dialog"
140
140
  aria-modal="true"
141
141
  aria-labelledby="modal-lg-title"
142
142
  aria-describedby="modal-lg-description"
143
143
  >
144
- <div class="pf-v5-c-modal-box__close">
145
- <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Close">
144
+ <div class="pf-v6-c-modal-box__close">
145
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
146
146
  <i class="fas fa-times" aria-hidden="true"></i>
147
147
  </button>
148
148
  </div>
149
- <header class="pf-v5-c-modal-box__header">
150
- <h1 class="pf-v5-c-modal-box__title" id="modal-lg-title">Modal title</h1>
149
+ <header class="pf-v6-c-modal-box__header">
150
+ <h1 class="pf-v6-c-modal-box__title" id="modal-lg-title">Modal title</h1>
151
151
  </header>
152
- <div class="pf-v5-c-modal-box__body" id="modal-lg-description">
152
+ <div class="pf-v6-c-modal-box__body" id="modal-lg-description">
153
153
  Static text describing modal purpose. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
154
154
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
155
155
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
156
156
  consequat.
157
157
  </div>
158
- <footer class="pf-v5-c-modal-box__footer">Modal footer</footer>
158
+ <footer class="pf-v6-c-modal-box__footer">Modal footer</footer>
159
159
  </div>
160
160
 
161
161
  ```
@@ -164,23 +164,23 @@ cssPrefix: pf-v5-c-modal-box
164
164
 
165
165
  ```html isFullscreen
166
166
  <div
167
- class="pf-v5-c-modal-box"
167
+ class="pf-v6-c-modal-box"
168
168
  role="dialog"
169
169
  aria-modal="true"
170
170
  aria-label="Example of a modal without a title"
171
171
  aria-describedby="modal-no-title-description"
172
172
  >
173
- <div class="pf-v5-c-modal-box__close">
174
- <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Close">
173
+ <div class="pf-v6-c-modal-box__close">
174
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
175
175
  <i class="fas fa-times" aria-hidden="true"></i>
176
176
  </button>
177
177
  </div>
178
- <div class="pf-v5-c-modal-box__body">
178
+ <div class="pf-v6-c-modal-box__body">
179
179
  <span
180
180
  id="modal-no-title-description"
181
181
  >When static text describing the modal is available, it can be wrapped with an ID referring to the modal's aria-describedby value. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
182
182
  </div>
183
- <footer class="pf-v5-c-modal-box__footer">Modal footer</footer>
183
+ <footer class="pf-v6-c-modal-box__footer">Modal footer</footer>
184
184
  </div>
185
185
 
186
186
  ```
@@ -189,31 +189,31 @@ cssPrefix: pf-v5-c-modal-box
189
189
 
190
190
  ```html isFullscreen
191
191
  <div
192
- class="pf-v5-c-modal-box"
192
+ class="pf-v6-c-modal-box"
193
193
  role="dialog"
194
194
  aria-modal="true"
195
195
  aria-labelledby="modal-with-description-title"
196
196
  aria-describedby="modal-with-description-description"
197
197
  >
198
- <div class="pf-v5-c-modal-box__close">
199
- <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Close">
198
+ <div class="pf-v6-c-modal-box__close">
199
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
200
200
  <i class="fas fa-times" aria-hidden="true"></i>
201
201
  </button>
202
202
  </div>
203
- <header class="pf-v5-c-modal-box__header">
203
+ <header class="pf-v6-c-modal-box__header">
204
204
  <h1
205
- class="pf-v5-c-modal-box__title"
205
+ class="pf-v6-c-modal-box__title"
206
206
  id="modal-with-description-title"
207
207
  >Modal title</h1>
208
208
  <div
209
- class="pf-v5-c-modal-box__description"
209
+ class="pf-v6-c-modal-box__description"
210
210
  id="modal-with-description-description"
211
211
  >A description is used when you want to provide more info about the modal than the title is able to describe. The content in the description is static and will not scroll with the rest of the modal body.</div>
212
212
  </header>
213
213
  <div
214
- class="pf-v5-c-modal-box__body"
214
+ class="pf-v6-c-modal-box__body"
215
215
  >To support screen reader user awareness of the dialog text, the dialog text is wrapped in a div that is referenced by aria-describedby.</div>
216
- <footer class="pf-v5-c-modal-box__footer">Modal footer</footer>
216
+ <footer class="pf-v6-c-modal-box__footer">Modal footer</footer>
217
217
  </div>
218
218
 
219
219
  ```
@@ -222,25 +222,25 @@ cssPrefix: pf-v5-c-modal-box
222
222
 
223
223
  ```html isFullscreen
224
224
  <div
225
- class="pf-v5-c-modal-box"
225
+ class="pf-v6-c-modal-box"
226
226
  role="dialog"
227
227
  aria-modal="true"
228
228
  aria-labelledby="modal-custom-title"
229
229
  aria-describedby="modal-custom-description"
230
230
  >
231
- <div class="pf-v5-c-modal-box__close">
232
- <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Close">
231
+ <div class="pf-v6-c-modal-box__close">
232
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
233
233
  <i class="fas fa-times" aria-hidden="true"></i>
234
234
  </button>
235
235
  </div>
236
- <header class="pf-v5-c-modal-box__header">
237
- <h1 class="pf-v5-c-title pf-m-4xl" id="modal-custom-title">Custom title</h1>
236
+ <header class="pf-v6-c-modal-box__header">
237
+ <h1 class="pf-v6-c-title pf-m-4xl" id="modal-custom-title">Custom title</h1>
238
238
  </header>
239
239
  <div
240
- class="pf-v5-c-modal-box__body"
240
+ class="pf-v6-c-modal-box__body"
241
241
  id="modal-custom-description"
242
242
  >To support screen reader user awareness of the dialog text, the dialog text is wrapped in a div that is referenced by aria-describedby.</div>
243
- <footer class="pf-v5-c-modal-box__footer">Modal footer</footer>
243
+ <footer class="pf-v6-c-modal-box__footer">Modal footer</footer>
244
244
  </div>
245
245
 
246
246
  ```
@@ -249,7 +249,7 @@ cssPrefix: pf-v5-c-modal-box
249
249
 
250
250
  ```html isFullscreen
251
251
  <div
252
- class="pf-v5-c-modal-box"
252
+ class="pf-v6-c-modal-box"
253
253
  role="dialog"
254
254
  aria-modal="true"
255
255
  aria-labelledby="modal-generic-container-description"
@@ -265,27 +265,27 @@ cssPrefix: pf-v5-c-modal-box
265
265
 
266
266
  ```html isFullscreen
267
267
  <div
268
- class="pf-v5-c-modal-box"
268
+ class="pf-v6-c-modal-box"
269
269
  role="dialog"
270
270
  aria-modal="true"
271
271
  aria-labelledby="icon-title"
272
272
  aria-describedby="icon-description"
273
273
  >
274
- <div class="pf-v5-c-modal-box__close">
275
- <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Close">
274
+ <div class="pf-v6-c-modal-box__close">
275
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
276
276
  <i class="fas fa-times" aria-hidden="true"></i>
277
277
  </button>
278
278
  </div>
279
- <header class="pf-v5-c-modal-box__header">
280
- <h1 class="pf-v5-c-modal-box__title pf-m-icon" id="icon-title">
281
- <span class="pf-v5-c-modal-box__title-icon">
279
+ <header class="pf-v6-c-modal-box__header">
280
+ <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="icon-title">
281
+ <span class="pf-v6-c-modal-box__title-icon">
282
282
  <i class="fas fa-fw fa-bullhorn" aria-hidden="true"></i>
283
283
  </span>
284
- <span class="pf-v5-c-modal-box__title-text">Modal with icon title</span>
284
+ <span class="pf-v6-c-modal-box__title-text">Modal with icon title</span>
285
285
  </h1>
286
286
  </header>
287
- <div class="pf-v5-c-modal-box__body" id="icon-description">Modal description</div>
288
- <footer class="pf-v5-c-modal-box__footer">Modal footer</footer>
287
+ <div class="pf-v6-c-modal-box__body" id="icon-description">Modal description</div>
288
+ <footer class="pf-v6-c-modal-box__footer">Modal footer</footer>
289
289
  </div>
290
290
 
291
291
  ```
@@ -294,34 +294,34 @@ cssPrefix: pf-v5-c-modal-box
294
294
 
295
295
  ```html isFullscreen
296
296
  <div
297
- class="pf-v5-c-modal-box pf-m-custom"
297
+ class="pf-v6-c-modal-box pf-m-custom"
298
298
  role="dialog"
299
299
  aria-modal="true"
300
300
  aria-labelledby="custom-alert-title"
301
301
  aria-describedby="custom-alert-description"
302
302
  >
303
- <div class="pf-v5-c-modal-box__close">
304
- <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Close">
303
+ <div class="pf-v6-c-modal-box__close">
304
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
305
305
  <i class="fas fa-times" aria-hidden="true"></i>
306
306
  </button>
307
307
  </div>
308
- <header class="pf-v5-c-modal-box__header">
309
- <h1 class="pf-v5-c-modal-box__title pf-m-icon" id="custom-alert-title">
310
- <span class="pf-v5-c-modal-box__title-icon">
308
+ <header class="pf-v6-c-modal-box__header">
309
+ <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="custom-alert-title">
310
+ <span class="pf-v6-c-modal-box__title-icon">
311
311
  <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
312
312
  </span>
313
- <span class="pf-v5-u-screen-reader">
313
+ <span class="pf-v6-u-screen-reader">
314
314
  Default
315
315
  alert:
316
316
  </span>
317
- <span class="pf-v5-c-modal-box__title-text">Custom alert modal title</span>
317
+ <span class="pf-v6-c-modal-box__title-text">Custom alert modal title</span>
318
318
  </h1>
319
319
  </header>
320
320
  <div
321
- class="pf-v5-c-modal-box__body"
321
+ class="pf-v6-c-modal-box__body"
322
322
  id="custom-alert-description"
323
323
  >Modal description</div>
324
- <footer class="pf-v5-c-modal-box__footer">Modal footer</footer>
324
+ <footer class="pf-v6-c-modal-box__footer">Modal footer</footer>
325
325
  </div>
326
326
 
327
327
  ```
@@ -330,34 +330,34 @@ cssPrefix: pf-v5-c-modal-box
330
330
 
331
331
  ```html isFullscreen
332
332
  <div
333
- class="pf-v5-c-modal-box pf-m-info"
333
+ class="pf-v6-c-modal-box pf-m-info"
334
334
  role="dialog"
335
335
  aria-modal="true"
336
336
  aria-labelledby="info-alert-title"
337
337
  aria-describedby="info-alert-description"
338
338
  >
339
- <div class="pf-v5-c-modal-box__close">
340
- <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Close">
339
+ <div class="pf-v6-c-modal-box__close">
340
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
341
341
  <i class="fas fa-times" aria-hidden="true"></i>
342
342
  </button>
343
343
  </div>
344
- <header class="pf-v5-c-modal-box__header">
345
- <h1 class="pf-v5-c-modal-box__title pf-m-icon" id="info-alert-title">
346
- <span class="pf-v5-c-modal-box__title-icon">
344
+ <header class="pf-v6-c-modal-box__header">
345
+ <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="info-alert-title">
346
+ <span class="pf-v6-c-modal-box__title-icon">
347
347
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
348
348
  </span>
349
- <span class="pf-v5-u-screen-reader">
349
+ <span class="pf-v6-u-screen-reader">
350
350
  Info
351
351
  alert:
352
352
  </span>
353
- <span class="pf-v5-c-modal-box__title-text">Info alert modal title</span>
353
+ <span class="pf-v6-c-modal-box__title-text">Info alert modal title</span>
354
354
  </h1>
355
355
  </header>
356
356
  <div
357
- class="pf-v5-c-modal-box__body"
357
+ class="pf-v6-c-modal-box__body"
358
358
  id="info-alert-description"
359
359
  >Modal description</div>
360
- <footer class="pf-v5-c-modal-box__footer">Modal footer</footer>
360
+ <footer class="pf-v6-c-modal-box__footer">Modal footer</footer>
361
361
  </div>
362
362
 
363
363
  ```
@@ -366,34 +366,34 @@ cssPrefix: pf-v5-c-modal-box
366
366
 
367
367
  ```html isFullscreen
368
368
  <div
369
- class="pf-v5-c-modal-box pf-m-success"
369
+ class="pf-v6-c-modal-box pf-m-success"
370
370
  role="dialog"
371
371
  aria-modal="true"
372
372
  aria-labelledby="success-alert-title"
373
373
  aria-describedby="success-alert-description"
374
374
  >
375
- <div class="pf-v5-c-modal-box__close">
376
- <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Close">
375
+ <div class="pf-v6-c-modal-box__close">
376
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
377
377
  <i class="fas fa-times" aria-hidden="true"></i>
378
378
  </button>
379
379
  </div>
380
- <header class="pf-v5-c-modal-box__header">
381
- <h1 class="pf-v5-c-modal-box__title pf-m-icon" id="success-alert-title">
382
- <span class="pf-v5-c-modal-box__title-icon">
380
+ <header class="pf-v6-c-modal-box__header">
381
+ <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="success-alert-title">
382
+ <span class="pf-v6-c-modal-box__title-icon">
383
383
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
384
384
  </span>
385
- <span class="pf-v5-u-screen-reader">
385
+ <span class="pf-v6-u-screen-reader">
386
386
  Success
387
387
  alert:
388
388
  </span>
389
- <span class="pf-v5-c-modal-box__title-text">Success alert modal title</span>
389
+ <span class="pf-v6-c-modal-box__title-text">Success alert modal title</span>
390
390
  </h1>
391
391
  </header>
392
392
  <div
393
- class="pf-v5-c-modal-box__body"
393
+ class="pf-v6-c-modal-box__body"
394
394
  id="success-alert-description"
395
395
  >Modal description</div>
396
- <footer class="pf-v5-c-modal-box__footer">Modal footer</footer>
396
+ <footer class="pf-v6-c-modal-box__footer">Modal footer</footer>
397
397
  </div>
398
398
 
399
399
  ```
@@ -402,34 +402,34 @@ cssPrefix: pf-v5-c-modal-box
402
402
 
403
403
  ```html isFullscreen
404
404
  <div
405
- class="pf-v5-c-modal-box pf-m-warning"
405
+ class="pf-v6-c-modal-box pf-m-warning"
406
406
  role="dialog"
407
407
  aria-modal="true"
408
408
  aria-labelledby="warning-alert-title"
409
409
  aria-describedby="warning-alert-description"
410
410
  >
411
- <div class="pf-v5-c-modal-box__close">
412
- <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Close">
411
+ <div class="pf-v6-c-modal-box__close">
412
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
413
413
  <i class="fas fa-times" aria-hidden="true"></i>
414
414
  </button>
415
415
  </div>
416
- <header class="pf-v5-c-modal-box__header">
417
- <h1 class="pf-v5-c-modal-box__title pf-m-icon" id="warning-alert-title">
418
- <span class="pf-v5-c-modal-box__title-icon">
416
+ <header class="pf-v6-c-modal-box__header">
417
+ <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="warning-alert-title">
418
+ <span class="pf-v6-c-modal-box__title-icon">
419
419
  <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
420
420
  </span>
421
- <span class="pf-v5-u-screen-reader">
421
+ <span class="pf-v6-u-screen-reader">
422
422
  Warning
423
423
  alert:
424
424
  </span>
425
- <span class="pf-v5-c-modal-box__title-text">Warning alert modal title</span>
425
+ <span class="pf-v6-c-modal-box__title-text">Warning alert modal title</span>
426
426
  </h1>
427
427
  </header>
428
428
  <div
429
- class="pf-v5-c-modal-box__body"
429
+ class="pf-v6-c-modal-box__body"
430
430
  id="warning-alert-description"
431
431
  >Modal description</div>
432
- <footer class="pf-v5-c-modal-box__footer">Modal footer</footer>
432
+ <footer class="pf-v6-c-modal-box__footer">Modal footer</footer>
433
433
  </div>
434
434
 
435
435
  ```
@@ -438,34 +438,34 @@ cssPrefix: pf-v5-c-modal-box
438
438
 
439
439
  ```html isFullscreen
440
440
  <div
441
- class="pf-v5-c-modal-box pf-m-danger"
441
+ class="pf-v6-c-modal-box pf-m-danger"
442
442
  role="dialog"
443
443
  aria-modal="true"
444
444
  aria-labelledby="danger-alert-title"
445
445
  aria-describedby="danger-alert-description"
446
446
  >
447
- <div class="pf-v5-c-modal-box__close">
448
- <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Close">
447
+ <div class="pf-v6-c-modal-box__close">
448
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
449
449
  <i class="fas fa-times" aria-hidden="true"></i>
450
450
  </button>
451
451
  </div>
452
- <header class="pf-v5-c-modal-box__header">
453
- <h1 class="pf-v5-c-modal-box__title pf-m-icon" id="danger-alert-title">
454
- <span class="pf-v5-c-modal-box__title-icon">
452
+ <header class="pf-v6-c-modal-box__header">
453
+ <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="danger-alert-title">
454
+ <span class="pf-v6-c-modal-box__title-icon">
455
455
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
456
456
  </span>
457
- <span class="pf-v5-u-screen-reader">
457
+ <span class="pf-v6-u-screen-reader">
458
458
  Danger
459
459
  alert:
460
460
  </span>
461
- <span class="pf-v5-c-modal-box__title-text">Danger alert modal title</span>
461
+ <span class="pf-v6-c-modal-box__title-text">Danger alert modal title</span>
462
462
  </h1>
463
463
  </header>
464
464
  <div
465
- class="pf-v5-c-modal-box__body"
465
+ class="pf-v6-c-modal-box__body"
466
466
  id="danger-alert-description"
467
467
  >To support screen reader user awareness of the dialog text, the dialog text is wrapped in a div that is referenced by aria-describedby.</div>
468
- <footer class="pf-v5-c-modal-box__footer">Modal footer</footer>
468
+ <footer class="pf-v6-c-modal-box__footer">Modal footer</footer>
469
469
  </div>
470
470
 
471
471
  ```