@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/EmptyState/examples/EmptyState.md CHANGED
@@ -7,32 +7,32 @@ cssPrefix: pf-v5-c-empty-state
7
7
  ### Basic
8
8
 
9
9
  ```html
10
- <div class="pf-v5-c-empty-state">
11
- <div class="pf-v5-c-empty-state__content">
12
- <div class="pf-v5-c-empty-state__header">
13
- <div class="pf-v5-c-empty-state__icon">
10
+ <div class="pf-v6-c-empty-state">
11
+ <div class="pf-v6-c-empty-state__content">
12
+ <div class="pf-v6-c-empty-state__header">
13
+ <div class="pf-v6-c-empty-state__icon">
14
14
  <i class="fas fa-cubes" aria-hidden="true"></i>
15
15
  </div>
16
- <div class="pf-v5-c-empty-state__title">
17
- <h1 class="pf-v5-c-empty-state__title-text">Empty state</h1>
16
+ <div class="pf-v6-c-empty-state__title">
17
+ <h1 class="pf-v6-c-empty-state__title-text">Empty state</h1>
18
18
  </div>
19
19
  </div>
20
20
 
21
21
  <div
22
- class="pf-v5-c-empty-state__body"
22
+ class="pf-v6-c-empty-state__body"
23
23
  >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
24
24
 
25
- <div class="pf-v5-c-empty-state__footer">
26
- <div class="pf-v5-c-empty-state__actions">
27
- <button class="pf-v5-c-button pf-m-primary" type="button">Primary action</button>
25
+ <div class="pf-v6-c-empty-state__footer">
26
+ <div class="pf-v6-c-empty-state__actions">
27
+ <button class="pf-v6-c-button pf-m-primary" type="button">Primary action</button>
28
28
  </div>
29
- <div class="pf-v5-c-empty-state__actions">
30
- <button class="pf-v5-c-button pf-m-link" type="button">Multiple</button>
31
- <button class="pf-v5-c-button pf-m-link" type="button">Action buttons</button>
32
- <button class="pf-v5-c-button pf-m-link" type="button">Can</button>
33
- <button class="pf-v5-c-button pf-m-link" type="button">Go here</button>
34
- <button class="pf-v5-c-button pf-m-link" type="button">In the second</button>
35
- <button class="pf-v5-c-button pf-m-link" type="button">Action area</button>
29
+ <div class="pf-v6-c-empty-state__actions">
30
+ <button class="pf-v6-c-button pf-m-link" type="button">Multiple</button>
31
+ <button class="pf-v6-c-button pf-m-link" type="button">Action buttons</button>
32
+ <button class="pf-v6-c-button pf-m-link" type="button">Can</button>
33
+ <button class="pf-v6-c-button pf-m-link" type="button">Go here</button>
34
+ <button class="pf-v6-c-button pf-m-link" type="button">In the second</button>
35
+ <button class="pf-v6-c-button pf-m-link" type="button">Action area</button>
36
36
  </div>
37
37
  </div>
38
38
  </div>
@@ -43,39 +43,39 @@ cssPrefix: pf-v5-c-empty-state
43
43
  ### Extra small
44
44
 
45
45
  ```html
46
- <div class="pf-v5-c-empty-state pf-m-xs">
47
- <div class="pf-v5-c-empty-state__content">
48
- <div class="pf-v5-c-empty-state__header">
49
- <div class="pf-v5-c-empty-state__icon">
46
+ <div class="pf-v6-c-empty-state pf-m-xs">
47
+ <div class="pf-v6-c-empty-state__content">
48
+ <div class="pf-v6-c-empty-state__header">
49
+ <div class="pf-v6-c-empty-state__icon">
50
50
  <i class="fas fa-cubes" aria-hidden="true"></i>
51
51
  </div>
52
- <div class="pf-v5-c-empty-state__title">
53
- <h1 class="pf-v5-c-empty-state__title-text">Empty state</h1>
52
+ <div class="pf-v6-c-empty-state__title">
53
+ <h1 class="pf-v6-c-empty-state__title-text">Empty state</h1>
54
54
  </div>
55
55
  </div>
56
56
 
57
57
  <div
58
- class="pf-v5-c-empty-state__body"
58
+ class="pf-v6-c-empty-state__body"
59
59
  >This represents an the empty state pattern in PatternFly. The icon is optional.</div>
60
60
 
61
- <div class="pf-v5-c-empty-state__footer">
62
- <div class="pf-v5-c-empty-state__actions">
61
+ <div class="pf-v6-c-empty-state__footer">
62
+ <div class="pf-v6-c-empty-state__actions">
63
63
  <button
64
- class="pf-v5-c-button pf-m-link pf-m-small"
64
+ class="pf-v6-c-button pf-m-link pf-m-small"
65
65
  type="button"
66
66
  >Multiple</button>
67
67
  <button
68
- class="pf-v5-c-button pf-m-link pf-m-small"
68
+ class="pf-v6-c-button pf-m-link pf-m-small"
69
69
  type="button"
70
70
  >Action buttons</button>
71
- <button class="pf-v5-c-button pf-m-link pf-m-small" type="button">Can</button>
71
+ <button class="pf-v6-c-button pf-m-link pf-m-small" type="button">Can</button>
72
72
  <button
73
- class="pf-v5-c-button pf-m-link pf-m-small"
73
+ class="pf-v6-c-button pf-m-link pf-m-small"
74
74
  type="button"
75
75
  >Go here</button>
76
- <button class="pf-v5-c-button pf-m-link pf-m-small" type="button">In the</button>
76
+ <button class="pf-v6-c-button pf-m-link pf-m-small" type="button">In the</button>
77
77
  <button
78
- class="pf-v5-c-button pf-m-link pf-m-small"
78
+ class="pf-v6-c-button pf-m-link pf-m-small"
79
79
  type="button"
80
80
  >Action area</button>
81
81
  </div>
@@ -88,33 +88,33 @@ cssPrefix: pf-v5-c-empty-state
88
88
  ### Small
89
89
 
90
90
  ```html
91
- <div class="pf-v5-c-empty-state pf-m-sm">
92
- <div class="pf-v5-c-empty-state__content">
93
- <div class="pf-v5-c-empty-state__header">
94
- <div class="pf-v5-c-empty-state__icon">
91
+ <div class="pf-v6-c-empty-state pf-m-sm">
92
+ <div class="pf-v6-c-empty-state__content">
93
+ <div class="pf-v6-c-empty-state__header">
94
+ <div class="pf-v6-c-empty-state__icon">
95
95
  <i class="fas fa-cubes" aria-hidden="true"></i>
96
96
  </div>
97
- <div class="pf-v5-c-empty-state__title">
98
- <h1 class="pf-v5-c-empty-state__title-text">Empty state</h1>
97
+ <div class="pf-v6-c-empty-state__title">
98
+ <h1 class="pf-v6-c-empty-state__title-text">Empty state</h1>
99
99
  </div>
100
100
  </div>
101
101
 
102
102
  <div
103
- class="pf-v5-c-empty-state__body"
103
+ class="pf-v6-c-empty-state__body"
104
104
  >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
105
105
 
106
- <div class="pf-v5-c-empty-state__footer">
107
- <div class="pf-v5-c-empty-state__actions">
108
- <button class="pf-v5-c-button pf-m-primary" type="button">Primary action</button>
106
+ <div class="pf-v6-c-empty-state__footer">
107
+ <div class="pf-v6-c-empty-state__actions">
108
+ <button class="pf-v6-c-button pf-m-primary" type="button">Primary action</button>
109
109
  </div>
110
110
 
111
- <div class="pf-v5-c-empty-state__actions">
112
- <button class="pf-v5-c-button pf-m-link" type="button">Multiple</button>
113
- <button class="pf-v5-c-button pf-m-link" type="button">Action buttons</button>
114
- <button class="pf-v5-c-button pf-m-link" type="button">Can</button>
115
- <button class="pf-v5-c-button pf-m-link" type="button">Go here</button>
116
- <button class="pf-v5-c-button pf-m-link" type="button">In the second</button>
117
- <button class="pf-v5-c-button pf-m-link" type="button">Action area</button>
111
+ <div class="pf-v6-c-empty-state__actions">
112
+ <button class="pf-v6-c-button pf-m-link" type="button">Multiple</button>
113
+ <button class="pf-v6-c-button pf-m-link" type="button">Action buttons</button>
114
+ <button class="pf-v6-c-button pf-m-link" type="button">Can</button>
115
+ <button class="pf-v6-c-button pf-m-link" type="button">Go here</button>
116
+ <button class="pf-v6-c-button pf-m-link" type="button">In the second</button>
117
+ <button class="pf-v6-c-button pf-m-link" type="button">Action area</button>
118
118
  </div>
119
119
  </div>
120
120
  </div>
@@ -125,32 +125,32 @@ cssPrefix: pf-v5-c-empty-state
125
125
  ### Large
126
126
 
127
127
  ```html
128
- <div class="pf-v5-c-empty-state pf-m-lg">
129
- <div class="pf-v5-c-empty-state__content">
130
- <div class="pf-v5-c-empty-state__header">
131
- <div class="pf-v5-c-empty-state__icon">
128
+ <div class="pf-v6-c-empty-state pf-m-lg">
129
+ <div class="pf-v6-c-empty-state__content">
130
+ <div class="pf-v6-c-empty-state__header">
131
+ <div class="pf-v6-c-empty-state__icon">
132
132
  <i class="fas fa-cubes" aria-hidden="true"></i>
133
133
  </div>
134
- <div class="pf-v5-c-empty-state__title">
135
- <h1 class="pf-v5-c-empty-state__title-text">Empty state</h1>
134
+ <div class="pf-v6-c-empty-state__title">
135
+ <h1 class="pf-v6-c-empty-state__title-text">Empty state</h1>
136
136
  </div>
137
137
  </div>
138
138
 
139
139
  <div
140
- class="pf-v5-c-empty-state__body"
140
+ class="pf-v6-c-empty-state__body"
141
141
  >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
142
142
 
143
- <div class="pf-v5-c-empty-state__footer">
144
- <div class="pf-v5-c-empty-state__actions">
145
- <button class="pf-v5-c-button pf-m-primary" type="button">Primary action</button>
143
+ <div class="pf-v6-c-empty-state__footer">
144
+ <div class="pf-v6-c-empty-state__actions">
145
+ <button class="pf-v6-c-button pf-m-primary" type="button">Primary action</button>
146
146
  </div>
147
- <div class="pf-v5-c-empty-state__actions">
148
- <button class="pf-v5-c-button pf-m-link" type="button">Multiple</button>
149
- <button class="pf-v5-c-button pf-m-link" type="button">Action buttons</button>
150
- <button class="pf-v5-c-button pf-m-link" type="button">Can</button>
151
- <button class="pf-v5-c-button pf-m-link" type="button">Go here</button>
152
- <button class="pf-v5-c-button pf-m-link" type="button">In the second</button>
153
- <button class="pf-v5-c-button pf-m-link" type="button">Action area</button>
147
+ <div class="pf-v6-c-empty-state__actions">
148
+ <button class="pf-v6-c-button pf-m-link" type="button">Multiple</button>
149
+ <button class="pf-v6-c-button pf-m-link" type="button">Action buttons</button>
150
+ <button class="pf-v6-c-button pf-m-link" type="button">Can</button>
151
+ <button class="pf-v6-c-button pf-m-link" type="button">Go here</button>
152
+ <button class="pf-v6-c-button pf-m-link" type="button">In the second</button>
153
+ <button class="pf-v6-c-button pf-m-link" type="button">Action area</button>
154
154
  </div>
155
155
  </div>
156
156
  </div>
@@ -161,31 +161,31 @@ cssPrefix: pf-v5-c-empty-state
161
161
  ### Extra large
162
162
 
163
163
  ```html
164
- <div class="pf-v5-c-empty-state pf-m-xl">
165
- <div class="pf-v5-c-empty-state__content">
166
- <div class="pf-v5-c-empty-state__header">
167
- <div class="pf-v5-c-empty-state__icon">
164
+ <div class="pf-v6-c-empty-state pf-m-xl">
165
+ <div class="pf-v6-c-empty-state__content">
166
+ <div class="pf-v6-c-empty-state__header">
167
+ <div class="pf-v6-c-empty-state__icon">
168
168
  <i class="fas fa-cubes" aria-hidden="true"></i>
169
169
  </div>
170
- <div class="pf-v5-c-empty-state__title">
171
- <h1 class="pf-v5-c-empty-state__title-text">Empty state</h1>
170
+ <div class="pf-v6-c-empty-state__title">
171
+ <h1 class="pf-v6-c-empty-state__title-text">Empty state</h1>
172
172
  </div>
173
173
  </div>
174
174
 
175
175
  <div
176
- class="pf-v5-c-empty-state__body"
176
+ class="pf-v6-c-empty-state__body"
177
177
  >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
178
- <div class="pf-v5-c-empty-state__footer">
179
- <div class="pf-v5-c-empty-state__actions">
180
- <button class="pf-v5-c-button pf-m-primary" type="button">Primary action</button>
178
+ <div class="pf-v6-c-empty-state__footer">
179
+ <div class="pf-v6-c-empty-state__actions">
180
+ <button class="pf-v6-c-button pf-m-primary" type="button">Primary action</button>
181
181
  </div>
182
- <div class="pf-v5-c-empty-state__actions">
183
- <button class="pf-v5-c-button pf-m-link" type="button">Multiple</button>
184
- <button class="pf-v5-c-button pf-m-link" type="button">Action buttons</button>
185
- <button class="pf-v5-c-button pf-m-link" type="button">Can</button>
186
- <button class="pf-v5-c-button pf-m-link" type="button">Go here</button>
187
- <button class="pf-v5-c-button pf-m-link" type="button">In the second</button>
188
- <button class="pf-v5-c-button pf-m-link" type="button">Action area</button>
182
+ <div class="pf-v6-c-empty-state__actions">
183
+ <button class="pf-v6-c-button pf-m-link" type="button">Multiple</button>
184
+ <button class="pf-v6-c-button pf-m-link" type="button">Action buttons</button>
185
+ <button class="pf-v6-c-button pf-m-link" type="button">Can</button>
186
+ <button class="pf-v6-c-button pf-m-link" type="button">Go here</button>
187
+ <button class="pf-v6-c-button pf-m-link" type="button">In the second</button>
188
+ <button class="pf-v6-c-button pf-m-link" type="button">Action area</button>
189
189
  </div>
190
190
  </div>
191
191
  </div>
@@ -196,32 +196,32 @@ cssPrefix: pf-v5-c-empty-state
196
196
  ### With status
197
197
 
198
198
  ```html
199
- <div class="pf-v5-c-empty-state pf-m-success">
200
- <div class="pf-v5-c-empty-state__content">
201
- <div class="pf-v5-c-empty-state__header">
202
- <div class="pf-v5-c-empty-state__icon">
199
+ <div class="pf-v6-c-empty-state pf-m-success">
200
+ <div class="pf-v6-c-empty-state__content">
201
+ <div class="pf-v6-c-empty-state__header">
202
+ <div class="pf-v6-c-empty-state__icon">
203
203
  <i class="fas fa- fa-check-circle" aria-hidden="true"></i>
204
204
  </div>
205
- <div class="pf-v5-c-empty-state__title">
206
- <h1 class="pf-v5-c-empty-state__title-text">You're all set</h1>
205
+ <div class="pf-v6-c-empty-state__title">
206
+ <h1 class="pf-v6-c-empty-state__title-text">You're all set</h1>
207
207
  </div>
208
208
  </div>
209
209
 
210
210
  <div
211
- class="pf-v5-c-empty-state__body"
211
+ class="pf-v6-c-empty-state__body"
212
212
  >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
213
213
 
214
- <div class="pf-v5-c-empty-state__footer">
215
- <div class="pf-v5-c-empty-state__actions">
216
- <button class="pf-v5-c-button pf-m-primary" type="button">Primary action</button>
214
+ <div class="pf-v6-c-empty-state__footer">
215
+ <div class="pf-v6-c-empty-state__actions">
216
+ <button class="pf-v6-c-button pf-m-primary" type="button">Primary action</button>
217
217
  </div>
218
- <div class="pf-v5-c-empty-state__actions">
219
- <button class="pf-v5-c-button pf-m-link" type="button">Multiple</button>
220
- <button class="pf-v5-c-button pf-m-link" type="button">Action buttons</button>
221
- <button class="pf-v5-c-button pf-m-link" type="button">Can</button>
222
- <button class="pf-v5-c-button pf-m-link" type="button">Go here</button>
223
- <button class="pf-v5-c-button pf-m-link" type="button">In the second</button>
224
- <button class="pf-v5-c-button pf-m-link" type="button">Action area</button>
218
+ <div class="pf-v6-c-empty-state__actions">
219
+ <button class="pf-v6-c-button pf-m-link" type="button">Multiple</button>
220
+ <button class="pf-v6-c-button pf-m-link" type="button">Action buttons</button>
221
+ <button class="pf-v6-c-button pf-m-link" type="button">Can</button>
222
+ <button class="pf-v6-c-button pf-m-link" type="button">Go here</button>
223
+ <button class="pf-v6-c-button pf-m-link" type="button">In the second</button>
224
+ <button class="pf-v6-c-button pf-m-link" type="button">Action area</button>
225
225
  </div>
226
226
  </div>
227
227
  </div>
package/docs/components/ExpandableSection/examples/ExpandableSection.md CHANGED
@@ -7,19 +7,19 @@ cssPrefix: pf-v5-c-expandable-section
7
7
  ### Hidden
8
8
 
9
9
  ```html
10
- <div class="pf-v5-c-expandable-section">
10
+ <div class="pf-v6-c-expandable-section">
11
11
  <button
12
12
  type="button"
13
- class="pf-v5-c-expandable-section__toggle"
13
+ class="pf-v6-c-expandable-section__toggle"
14
14
  aria-expanded="false"
15
15
  >
16
- <span class="pf-v5-c-expandable-section__toggle-icon">
16
+ <span class="pf-v6-c-expandable-section__toggle-icon">
17
17
  <i class="fas fa-angle-right" aria-hidden="true"></i>
18
18
  </span>
19
- <span class="pf-v5-c-expandable-section__toggle-text">Show more</span>
19
+ <span class="pf-v6-c-expandable-section__toggle-text">Show more</span>
20
20
  </button>
21
21
  <div
22
- class="pf-v5-c-expandable-section__content"
22
+ class="pf-v6-c-expandable-section__content"
23
23
  hidden
24
24
  >This content is visible only when the component is expanded.</div>
25
25
  </div>
@@ -29,19 +29,19 @@ cssPrefix: pf-v5-c-expandable-section
29
29
  ### Expanded
30
30
 
31
31
  ```html
32
- <div class="pf-v5-c-expandable-section pf-m-expanded">
32
+ <div class="pf-v6-c-expandable-section pf-m-expanded">
33
33
  <button
34
34
  type="button"
35
- class="pf-v5-c-expandable-section__toggle"
35
+ class="pf-v6-c-expandable-section__toggle"
36
36
  aria-expanded="true"
37
37
  >
38
- <span class="pf-v5-c-expandable-section__toggle-icon">
38
+ <span class="pf-v6-c-expandable-section__toggle-icon">
39
39
  <i class="fas fa-angle-right" aria-hidden="true"></i>
40
40
  </span>
41
- <span class="pf-v5-c-expandable-section__toggle-text">Show less</span>
41
+ <span class="pf-v6-c-expandable-section__toggle-text">Show less</span>
42
42
  </button>
43
43
  <div
44
- class="pf-v5-c-expandable-section__content"
44
+ class="pf-v6-c-expandable-section__content"
45
45
  >This content is visible only when the component is expanded.</div>
46
46
  </div>
47
47
 
@@ -50,19 +50,19 @@ cssPrefix: pf-v5-c-expandable-section
50
50
  ### Indented
51
51
 
52
52
  ```html
53
- <div class="pf-v5-c-expandable-section pf-m-expanded pf-m-indented">
53
+ <div class="pf-v6-c-expandable-section pf-m-expanded pf-m-indented">
54
54
  <button
55
55
  type="button"
56
- class="pf-v5-c-expandable-section__toggle"
56
+ class="pf-v6-c-expandable-section__toggle"
57
57
  aria-expanded="true"
58
58
  >
59
- <span class="pf-v5-c-expandable-section__toggle-icon">
59
+ <span class="pf-v6-c-expandable-section__toggle-icon">
60
60
  <i class="fas fa-angle-right" aria-hidden="true"></i>
61
61
  </span>
62
- <span class="pf-v5-c-expandable-section__toggle-text">Show less</span>
62
+ <span class="pf-v6-c-expandable-section__toggle-text">Show less</span>
63
63
  </button>
64
64
  <div
65
- class="pf-v5-c-expandable-section__content"
65
+ class="pf-v6-c-expandable-section__content"
66
66
  >This content is visible only when the component is expanded.</div>
67
67
  </div>
68
68
 
@@ -71,19 +71,19 @@ cssPrefix: pf-v5-c-expandable-section
71
71
  ### Disclosure variation (hidden)
72
72
 
73
73
  ```html
74
- <div class="pf-v5-c-expandable-section pf-m-display-lg pf-m-limit-width">
74
+ <div class="pf-v6-c-expandable-section pf-m-display-lg pf-m-limit-width">
75
75
  <button
76
76
  type="button"
77
- class="pf-v5-c-expandable-section__toggle"
77
+ class="pf-v6-c-expandable-section__toggle"
78
78
  aria-expanded="false"
79
79
  >
80
- <span class="pf-v5-c-expandable-section__toggle-icon">
80
+ <span class="pf-v6-c-expandable-section__toggle-icon">
81
81
  <i class="fas fa-angle-right" aria-hidden="true"></i>
82
82
  </span>
83
- <span class="pf-v5-c-expandable-section__toggle-text">Show more</span>
83
+ <span class="pf-v6-c-expandable-section__toggle-text">Show more</span>
84
84
  </button>
85
85
  <div
86
- class="pf-v5-c-expandable-section__content"
86
+ class="pf-v6-c-expandable-section__content"
87
87
  hidden
88
88
  >This content is visible only when the component is expanded.</div>
89
89
  </div>
@@ -94,20 +94,20 @@ cssPrefix: pf-v5-c-expandable-section
94
94
 
95
95
  ```html
96
96
  <div
97
- class="pf-v5-c-expandable-section pf-m-expanded pf-m-display-lg pf-m-limit-width"
97
+ class="pf-v6-c-expandable-section pf-m-expanded pf-m-display-lg pf-m-limit-width"
98
98
  >
99
99
  <button
100
100
  type="button"
101
- class="pf-v5-c-expandable-section__toggle"
101
+ class="pf-v6-c-expandable-section__toggle"
102
102
  aria-expanded="true"
103
103
  >
104
- <span class="pf-v5-c-expandable-section__toggle-icon">
104
+ <span class="pf-v6-c-expandable-section__toggle-icon">
105
105
  <i class="fas fa-angle-right" aria-hidden="true"></i>
106
106
  </span>
107
- <span class="pf-v5-c-expandable-section__toggle-text">Show less</span>
107
+ <span class="pf-v6-c-expandable-section__toggle-text">Show less</span>
108
108
  </button>
109
109
  <div
110
- class="pf-v5-c-expandable-section__content"
110
+ class="pf-v6-c-expandable-section__content"
111
111
  >This content is visible only when the component is expanded.</div>
112
112
  </div>
113
113
 
@@ -117,20 +117,20 @@ cssPrefix: pf-v5-c-expandable-section
117
117
 
118
118
  ```html
119
119
  <div
120
- class="pf-v5-c-expandable-section pf-m-expanded pf-m-display-lg pf-m-limit-width pf-m-indented"
120
+ class="pf-v6-c-expandable-section pf-m-expanded pf-m-display-lg pf-m-limit-width pf-m-indented"
121
121
  >
122
122
  <button
123
123
  type="button"
124
- class="pf-v5-c-expandable-section__toggle"
124
+ class="pf-v6-c-expandable-section__toggle"
125
125
  aria-expanded="true"
126
126
  >
127
- <span class="pf-v5-c-expandable-section__toggle-icon">
127
+ <span class="pf-v6-c-expandable-section__toggle-icon">
128
128
  <i class="fas fa-angle-right" aria-hidden="true"></i>
129
129
  </span>
130
- <span class="pf-v5-c-expandable-section__toggle-text">Show less</span>
130
+ <span class="pf-v6-c-expandable-section__toggle-text">Show less</span>
131
131
  </button>
132
132
  <div
133
- class="pf-v5-c-expandable-section__content"
133
+ class="pf-v6-c-expandable-section__content"
134
134
  >This content is visible only when the component is expanded.</div>
135
135
  </div>
136
136
 
@@ -139,28 +139,28 @@ cssPrefix: pf-v5-c-expandable-section
139
139
  ### Detached
140
140
 
141
141
  ```html
142
- <div class="pf-v5-l-stack pf-m-gutter">
143
- <div class="pf-v5-l-stack__item">
144
- <div class="pf-v5-c-expandable-section pf-m-expanded">
142
+ <div class="pf-v6-l-stack pf-m-gutter">
143
+ <div class="pf-v6-l-stack__item">
144
+ <div class="pf-v6-c-expandable-section pf-m-expanded">
145
145
  <div
146
- class="pf-v5-c-expandable-section__content"
146
+ class="pf-v6-c-expandable-section__content"
147
147
  id="detached-toggle-content"
148
148
  >This content is visible only when the component is expanded.</div>
149
149
  </div>
150
150
  </div>
151
151
 
152
- <div class="pf-v5-l-stack__item">
153
- <div class="pf-v5-c-expandable-section pf-m-expanded">
152
+ <div class="pf-v6-l-stack__item">
153
+ <div class="pf-v6-c-expandable-section pf-m-expanded">
154
154
  <button
155
155
  type="button"
156
- class="pf-v5-c-expandable-section__toggle"
156
+ class="pf-v6-c-expandable-section__toggle"
157
157
  aria-expanded="true"
158
158
  aria-controls="detached-toggle-content"
159
159
  >
160
- <span class="pf-v5-c-expandable-section__toggle-icon pf-m-expand-top">
160
+ <span class="pf-v6-c-expandable-section__toggle-icon pf-m-expand-top">
161
161
  <i class="fas fa-angle-right" aria-hidden="true"></i>
162
162
  </span>
163
- <span class="pf-v5-c-expandable-section__toggle-text">Show less</span>
163
+ <span class="pf-v6-c-expandable-section__toggle-text">Show less</span>
164
164
  </button>
165
165
  </div>
166
166
  </div>
@@ -171,16 +171,16 @@ cssPrefix: pf-v5-c-expandable-section
171
171
  ### Truncate expansion (hidden)
172
172
 
173
173
  ```html
174
- <div class="pf-v5-c-expandable-section pf-m-truncate">
174
+ <div class="pf-v6-c-expandable-section pf-m-truncate">
175
175
  <div
176
- class="pf-v5-c-expandable-section__content"
176
+ class="pf-v6-c-expandable-section__content"
177
177
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus, diam vitae eleifend consequat, metus sapien posuere quam, ut tincidunt nunc enim eget sapien. Mauris ac dui imperdiet dolor dignissim efficitur laoreet quis erat. Proin turpis leo, malesuada eget urna et, tristique mollis odio. Ut mattis nulla lorem, elementum hendrerit nunc molestie vitae. Proin massa sem, bibendum id urna in, viverra porta neque. Ut ut mi ac lacus rhoncus mollis id quis sem. Suspendisse non justo elementum, dictum eros nec, hendrerit sapien. Mauris aliquet, est sit amet tincidunt vehicula, purus est hendrerit arcu, vitae egestas odio lorem ut lacus. In et neque non metus viverra rhoncus quis non purus. Integer id venenatis tortor. Nulla sollicitudin convallis tellus, at porta eros volutpat in. Curabitur rhoncus rhoncus nisi, sit amet tincidunt dolor efficitur vitae. Integer purus neque, porta non odio lobortis, accumsan elementum risus. Pellentesque viverra id lacus a cursus. Etiam eu pulvinar risus. Etiam ultrices nec urna id consequat.</div>
178
178
  <button
179
179
  type="button"
180
- class="pf-v5-c-expandable-section__toggle"
180
+ class="pf-v6-c-expandable-section__toggle"
181
181
  aria-expanded="false"
182
182
  >
183
- <span class="pf-v5-c-expandable-section__toggle-text">Show more</span>
183
+ <span class="pf-v6-c-expandable-section__toggle-text">Show more</span>
184
184
  </button>
185
185
  </div>
186
186
 
@@ -189,16 +189,16 @@ cssPrefix: pf-v5-c-expandable-section
189
189
  ### Truncate expansion (expanded)
190
190
 
191
191
  ```html
192
- <div class="pf-v5-c-expandable-section pf-m-expanded pf-m-truncate">
192
+ <div class="pf-v6-c-expandable-section pf-m-expanded pf-m-truncate">
193
193
  <div
194
- class="pf-v5-c-expandable-section__content"
194
+ class="pf-v6-c-expandable-section__content"
195
195
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus, diam vitae eleifend consequat, metus sapien posuere quam, ut tincidunt nunc enim eget sapien. Mauris ac dui imperdiet dolor dignissim efficitur laoreet quis erat. Proin turpis leo, malesuada eget urna et, tristique mollis odio. Ut mattis nulla lorem, elementum hendrerit nunc molestie vitae. Proin massa sem, bibendum id urna in, viverra porta neque. Ut ut mi ac lacus rhoncus mollis id quis sem. Suspendisse non justo elementum, dictum eros nec, hendrerit sapien. Mauris aliquet, est sit amet tincidunt vehicula, purus est hendrerit arcu, vitae egestas odio lorem ut lacus. In et neque non metus viverra rhoncus quis non purus. Integer id venenatis tortor. Nulla sollicitudin convallis tellus, at porta eros volutpat in. Curabitur rhoncus rhoncus nisi, sit amet tincidunt dolor efficitur vitae. Integer purus neque, porta non odio lobortis, accumsan elementum risus. Pellentesque viverra id lacus a cursus. Etiam eu pulvinar risus. Etiam ultrices nec urna id consequat.</div>
196
196
  <button
197
197
  type="button"
198
- class="pf-v5-c-expandable-section__toggle"
198
+ class="pf-v6-c-expandable-section__toggle"
199
199
  aria-expanded="true"
200
200
  >
201
- <span class="pf-v5-c-expandable-section__toggle-text">Show less</span>
201
+ <span class="pf-v6-c-expandable-section__toggle-text">Show less</span>
202
202
  </button>
203
203
  </div>
204
204