@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/Hint/examples/Hint.md CHANGED
@@ -7,11 +7,11 @@ cssPrefix: pf-v5-c-hint
7
7
  ### Hint with title
8
8
 
9
9
  ```html
10
- <div class="pf-v5-c-hint">
11
- <div class="pf-v5-c-hint__actions">
12
- <div class="pf-v5-c-dropdown">
10
+ <div class="pf-v6-c-hint">
11
+ <div class="pf-v6-c-hint__actions">
12
+ <div class="pf-v6-c-dropdown">
13
13
  <button
14
- class="pf-v5-c-dropdown__toggle pf-m-plain"
14
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
15
15
  id="hint-with-title-dropdown-kebab-button"
16
16
  aria-expanded="false"
17
17
  type="button"
@@ -20,24 +20,24 @@ cssPrefix: pf-v5-c-hint
20
20
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
21
21
  </button>
22
22
  <ul
23
- class="pf-v5-c-dropdown__menu"
23
+ class="pf-v6-c-dropdown__menu"
24
24
  aria-labelledby="hint-with-title-dropdown-kebab-button"
25
25
  hidden
26
26
  role="menu"
27
27
  >
28
28
  <li role="none">
29
- <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
29
+ <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
30
30
  </li>
31
31
  <li role="none">
32
32
  <button
33
- class="pf-v5-c-dropdown__menu-item"
33
+ class="pf-v6-c-dropdown__menu-item"
34
34
  role="menuitem"
35
35
  type="button"
36
36
  >Action</button>
37
37
  </li>
38
38
  <li role="none">
39
39
  <a
40
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
40
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
41
41
  role="menuitem"
42
42
  href="#"
43
43
  aria-disabled="true"
@@ -46,16 +46,16 @@ cssPrefix: pf-v5-c-hint
46
46
  </li>
47
47
  <li role="none">
48
48
  <button
49
- class="pf-v5-c-dropdown__menu-item"
49
+ class="pf-v6-c-dropdown__menu-item"
50
50
  role="menuitem"
51
51
  type="button"
52
52
  disabled
53
53
  >Disabled action</button>
54
54
  </li>
55
- <li class="pf-v5-c-divider" role="separator"></li>
55
+ <li class="pf-v6-c-divider" role="separator"></li>
56
56
  <li role="none">
57
57
  <a
58
- class="pf-v5-c-dropdown__menu-item"
58
+ class="pf-v6-c-dropdown__menu-item"
59
59
  role="menuitem"
60
60
  href="#"
61
61
  >Separated link</a>
@@ -63,19 +63,19 @@ cssPrefix: pf-v5-c-hint
63
63
  </ul>
64
64
  </div>
65
65
  </div>
66
- <div class="pf-v5-c-hint__title">Do more with Find it Fix it capabilities</div>
66
+ <div class="pf-v6-c-hint__title">Do more with Find it Fix it capabilities</div>
67
67
  <div
68
- class="pf-v5-c-hint__body"
68
+ class="pf-v6-c-hint__body"
69
69
  >Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.</div>
70
70
  </div>
71
71
 
72
72
  <br />
73
73
 
74
- <div class="pf-v5-c-hint">
75
- <div class="pf-v5-c-hint__actions">
76
- <div class="pf-v5-c-dropdown">
74
+ <div class="pf-v6-c-hint">
75
+ <div class="pf-v6-c-hint__actions">
76
+ <div class="pf-v6-c-dropdown">
77
77
  <button
78
- class="pf-v5-c-dropdown__toggle pf-m-plain"
78
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
79
79
  id="hint-with-title-with-footer-dropdown-kebab-button"
80
80
  aria-expanded="false"
81
81
  type="button"
@@ -84,24 +84,24 @@ cssPrefix: pf-v5-c-hint
84
84
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
85
85
  </button>
86
86
  <ul
87
- class="pf-v5-c-dropdown__menu"
87
+ class="pf-v6-c-dropdown__menu"
88
88
  aria-labelledby="hint-with-title-with-footer-dropdown-kebab-button"
89
89
  hidden
90
90
  role="menu"
91
91
  >
92
92
  <li role="none">
93
- <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
93
+ <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
94
94
  </li>
95
95
  <li role="none">
96
96
  <button
97
- class="pf-v5-c-dropdown__menu-item"
97
+ class="pf-v6-c-dropdown__menu-item"
98
98
  role="menuitem"
99
99
  type="button"
100
100
  >Action</button>
101
101
  </li>
102
102
  <li role="none">
103
103
  <a
104
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
104
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
105
105
  role="menuitem"
106
106
  href="#"
107
107
  aria-disabled="true"
@@ -110,16 +110,16 @@ cssPrefix: pf-v5-c-hint
110
110
  </li>
111
111
  <li role="none">
112
112
  <button
113
- class="pf-v5-c-dropdown__menu-item"
113
+ class="pf-v6-c-dropdown__menu-item"
114
114
  role="menuitem"
115
115
  type="button"
116
116
  disabled
117
117
  >Disabled action</button>
118
118
  </li>
119
- <li class="pf-v5-c-divider" role="separator"></li>
119
+ <li class="pf-v6-c-divider" role="separator"></li>
120
120
  <li role="none">
121
121
  <a
122
- class="pf-v5-c-dropdown__menu-item"
122
+ class="pf-v6-c-dropdown__menu-item"
123
123
  role="menuitem"
124
124
  href="#"
125
125
  >Separated link</a>
@@ -127,13 +127,13 @@ cssPrefix: pf-v5-c-hint
127
127
  </ul>
128
128
  </div>
129
129
  </div>
130
- <div class="pf-v5-c-hint__title">Do more with Find it Fix it capabilities</div>
130
+ <div class="pf-v6-c-hint__title">Do more with Find it Fix it capabilities</div>
131
131
  <div
132
- class="pf-v5-c-hint__body"
132
+ class="pf-v6-c-hint__body"
133
133
  >Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.</div>
134
- <div class="pf-v5-c-hint__footer">
134
+ <div class="pf-v6-c-hint__footer">
135
135
  <button
136
- class="pf-v5-c-button pf-m-link pf-m-inline"
136
+ class="pf-v6-c-button pf-m-link pf-m-inline"
137
137
  type="button"
138
138
  >Try it for 90 days</button>
139
139
  </div>
@@ -144,8 +144,8 @@ cssPrefix: pf-v5-c-hint
144
144
  ### Default with no title
145
145
 
146
146
  ```html
147
- <div class="pf-v5-c-hint">
148
- <div class="pf-v5-c-hint__body">
147
+ <div class="pf-v6-c-hint">
148
+ <div class="pf-v6-c-hint__body">
149
149
  Welcome to the new documentation experience.
150
150
  <a href="#">Learn more about the improved features</a>.
151
151
  </div>
@@ -153,11 +153,11 @@ cssPrefix: pf-v5-c-hint
153
153
 
154
154
  <br />
155
155
 
156
- <div class="pf-v5-c-hint">
157
- <div class="pf-v5-c-hint__actions">
158
- <div class="pf-v5-c-dropdown">
156
+ <div class="pf-v6-c-hint">
157
+ <div class="pf-v6-c-hint__actions">
158
+ <div class="pf-v6-c-dropdown">
159
159
  <button
160
- class="pf-v5-c-dropdown__toggle pf-m-plain"
160
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
161
161
  id="hint-with-no-title-dropdown-kebab-button"
162
162
  aria-expanded="false"
163
163
  type="button"
@@ -166,24 +166,24 @@ cssPrefix: pf-v5-c-hint
166
166
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
167
167
  </button>
168
168
  <ul
169
- class="pf-v5-c-dropdown__menu"
169
+ class="pf-v6-c-dropdown__menu"
170
170
  aria-labelledby="hint-with-no-title-dropdown-kebab-button"
171
171
  hidden
172
172
  role="menu"
173
173
  >
174
174
  <li role="none">
175
- <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
175
+ <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
176
176
  </li>
177
177
  <li role="none">
178
178
  <button
179
- class="pf-v5-c-dropdown__menu-item"
179
+ class="pf-v6-c-dropdown__menu-item"
180
180
  role="menuitem"
181
181
  type="button"
182
182
  >Action</button>
183
183
  </li>
184
184
  <li role="none">
185
185
  <a
186
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
186
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
187
187
  role="menuitem"
188
188
  href="#"
189
189
  aria-disabled="true"
@@ -192,16 +192,16 @@ cssPrefix: pf-v5-c-hint
192
192
  </li>
193
193
  <li role="none">
194
194
  <button
195
- class="pf-v5-c-dropdown__menu-item"
195
+ class="pf-v6-c-dropdown__menu-item"
196
196
  role="menuitem"
197
197
  type="button"
198
198
  disabled
199
199
  >Disabled action</button>
200
200
  </li>
201
- <li class="pf-v5-c-divider" role="separator"></li>
201
+ <li class="pf-v6-c-divider" role="separator"></li>
202
202
  <li role="none">
203
203
  <a
204
- class="pf-v5-c-dropdown__menu-item"
204
+ class="pf-v6-c-dropdown__menu-item"
205
205
  role="menuitem"
206
206
  href="#"
207
207
  >Separated link</a>
@@ -210,11 +210,11 @@ cssPrefix: pf-v5-c-hint
210
210
  </div>
211
211
  </div>
212
212
  <div
213
- class="pf-v5-c-hint__body"
213
+ class="pf-v6-c-hint__body"
214
214
  >Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.</div>
215
- <div class="pf-v5-c-hint__footer">
215
+ <div class="pf-v6-c-hint__footer">
216
216
  <button
217
- class="pf-v5-c-button pf-m-link pf-m-inline"
217
+ class="pf-v6-c-button pf-m-link pf-m-inline"
218
218
  type="button"
219
219
  >Try it for 90 days</button>
220
220
  </div>
package/docs/components/Icon/examples/Icon.md CHANGED
@@ -7,26 +7,26 @@ cssPrefix: pf-v5-c-icon
7
7
  ### Basic
8
8
 
9
9
  ```html
10
- <span class="pf-v5-c-icon">
11
- <span class="pf-v5-c-icon__content">
10
+ <span class="pf-v6-c-icon">
11
+ <span class="pf-v6-c-icon__content">
12
12
  <i class="fas fa-long-arrow-alt-down" aria-hidden="true"></i>
13
13
  </span>
14
14
  </span>
15
15
 
16
- <span class="pf-v5-c-icon">
17
- <span class="pf-v5-c-icon__content">
16
+ <span class="pf-v6-c-icon">
17
+ <span class="pf-v6-c-icon__content">
18
18
  <i class="fas fa-angle-right" aria-hidden="true"></i>
19
19
  </span>
20
20
  </span>
21
21
 
22
- <span class="pf-v5-c-icon">
23
- <span class="pf-v5-c-icon__content">
22
+ <span class="pf-v6-c-icon">
23
+ <span class="pf-v6-c-icon__content">
24
24
  <i class="fas fa-angle-down" aria-hidden="true"></i>
25
25
  </span>
26
26
  </span>
27
27
 
28
- <span class="pf-v5-c-icon">
29
- <span class="pf-v5-c-icon__content">
28
+ <span class="pf-v6-c-icon">
29
+ <span class="pf-v6-c-icon__content">
30
30
  <i class="fas fa-cog" aria-hidden="true"></i>
31
31
  </span>
32
32
  </span>
@@ -36,33 +36,33 @@ cssPrefix: pf-v5-c-icon
36
36
  ### Standalone icon sizes
37
37
 
38
38
  ```html
39
- <span class="pf-v5-c-icon pf-m-sm">
40
- <span class="pf-v5-c-icon__content">
39
+ <span class="pf-v6-c-icon pf-m-sm">
40
+ <span class="pf-v6-c-icon__content">
41
41
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
42
42
  </span>
43
43
  </span>
44
- <span class="pf-v5-c-icon pf-m-md">
45
- <span class="pf-v5-c-icon__content">
44
+ <span class="pf-v6-c-icon pf-m-md">
45
+ <span class="pf-v6-c-icon__content">
46
46
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
47
47
  </span>
48
48
  </span>
49
- <span class="pf-v5-c-icon pf-m-lg">
50
- <span class="pf-v5-c-icon__content">
49
+ <span class="pf-v6-c-icon pf-m-lg">
50
+ <span class="pf-v6-c-icon__content">
51
51
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
52
52
  </span>
53
53
  </span>
54
- <span class="pf-v5-c-icon pf-m-xl">
55
- <span class="pf-v5-c-icon__content">
54
+ <span class="pf-v6-c-icon pf-m-xl">
55
+ <span class="pf-v6-c-icon__content">
56
56
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
57
57
  </span>
58
58
  </span>
59
- <span class="pf-v5-c-icon pf-m-2xl">
60
- <span class="pf-v5-c-icon__content">
59
+ <span class="pf-v6-c-icon pf-m-2xl">
60
+ <span class="pf-v6-c-icon__content">
61
61
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
62
62
  </span>
63
63
  </span>
64
- <span class="pf-v5-c-icon pf-m-3xl">
65
- <span class="pf-v5-c-icon__content">
64
+ <span class="pf-v6-c-icon pf-m-3xl">
65
+ <span class="pf-v6-c-icon__content">
66
66
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
67
67
  </span>
68
68
  </span>
@@ -72,18 +72,18 @@ cssPrefix: pf-v5-c-icon
72
72
  ### Body sizes
73
73
 
74
74
  ```html
75
- <span class="pf-v5-c-icon pf-m-body-sm">
76
- <span class="pf-v5-c-icon__content">
75
+ <span class="pf-v6-c-icon pf-m-body-sm">
76
+ <span class="pf-v6-c-icon__content">
77
77
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
78
78
  </span>
79
79
  </span>
80
- <span class="pf-v5-c-icon pf-m-body-default">
81
- <span class="pf-v5-c-icon__content">
80
+ <span class="pf-v6-c-icon pf-m-body-default">
81
+ <span class="pf-v6-c-icon__content">
82
82
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
83
83
  </span>
84
84
  </span>
85
- <span class="pf-v5-c-icon pf-m-body-lg">
86
- <span class="pf-v5-c-icon__content">
85
+ <span class="pf-v6-c-icon pf-m-body-lg">
86
+ <span class="pf-v6-c-icon__content">
87
87
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
88
88
  </span>
89
89
  </span>
@@ -93,33 +93,33 @@ cssPrefix: pf-v5-c-icon
93
93
  ### Heading sizes
94
94
 
95
95
  ```html
96
- <span class="pf-v5-c-icon pf-m-heading-sm">
97
- <span class="pf-v5-c-icon__content">
96
+ <span class="pf-v6-c-icon pf-m-heading-sm">
97
+ <span class="pf-v6-c-icon__content">
98
98
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
99
99
  </span>
100
100
  </span>
101
- <span class="pf-v5-c-icon pf-m-heading-md">
102
- <span class="pf-v5-c-icon__content">
101
+ <span class="pf-v6-c-icon pf-m-heading-md">
102
+ <span class="pf-v6-c-icon__content">
103
103
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
104
104
  </span>
105
105
  </span>
106
- <span class="pf-v5-c-icon pf-m-heading-lg">
107
- <span class="pf-v5-c-icon__content">
106
+ <span class="pf-v6-c-icon pf-m-heading-lg">
107
+ <span class="pf-v6-c-icon__content">
108
108
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
109
109
  </span>
110
110
  </span>
111
- <span class="pf-v5-c-icon pf-m-heading-xl">
112
- <span class="pf-v5-c-icon__content">
111
+ <span class="pf-v6-c-icon pf-m-heading-xl">
112
+ <span class="pf-v6-c-icon__content">
113
113
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
114
114
  </span>
115
115
  </span>
116
- <span class="pf-v5-c-icon pf-m-heading-2xl">
117
- <span class="pf-v5-c-icon__content">
116
+ <span class="pf-v6-c-icon pf-m-heading-2xl">
117
+ <span class="pf-v6-c-icon__content">
118
118
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
119
119
  </span>
120
120
  </span>
121
- <span class="pf-v5-c-icon pf-m-heading-3xl">
122
- <span class="pf-v5-c-icon__content">
121
+ <span class="pf-v6-c-icon pf-m-heading-3xl">
122
+ <span class="pf-v6-c-icon__content">
123
123
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
124
124
  </span>
125
125
  </span>
@@ -129,28 +129,28 @@ cssPrefix: pf-v5-c-icon
129
129
  ### Status colors
130
130
 
131
131
  ```html
132
- <span class="pf-v5-c-icon">
133
- <span class="pf-v5-c-icon__content pf-m-danger">
132
+ <span class="pf-v6-c-icon">
133
+ <span class="pf-v6-c-icon__content pf-m-danger">
134
134
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
135
135
  </span>
136
136
  </span>
137
- <span class="pf-v5-c-icon">
138
- <span class="pf-v5-c-icon__content pf-m-warning">
137
+ <span class="pf-v6-c-icon">
138
+ <span class="pf-v6-c-icon__content pf-m-warning">
139
139
  <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
140
140
  </span>
141
141
  </span>
142
- <span class="pf-v5-c-icon">
143
- <span class="pf-v5-c-icon__content pf-m-success">
142
+ <span class="pf-v6-c-icon">
143
+ <span class="pf-v6-c-icon__content pf-m-success">
144
144
  <i class="fas fa-check-circle" aria-hidden="true"></i>
145
145
  </span>
146
146
  </span>
147
- <span class="pf-v5-c-icon">
148
- <span class="pf-v5-c-icon__content pf-m-info">
147
+ <span class="pf-v6-c-icon">
148
+ <span class="pf-v6-c-icon__content pf-m-info">
149
149
  <i class="fas fa-info-circle" aria-hidden="true"></i>
150
150
  </span>
151
151
  </span>
152
- <span class="pf-v5-c-icon">
153
- <span class="pf-v5-c-icon__content pf-m-custom">
152
+ <span class="pf-v6-c-icon">
153
+ <span class="pf-v6-c-icon__content pf-m-custom">
154
154
  <i class="fas fa-bell" aria-hidden="true"></i>
155
155
  </span>
156
156
  </span>
@@ -162,23 +162,23 @@ cssPrefix: pf-v5-c-icon
162
162
  Use a size modifier on the icon container to maintain a consistent size, even if the contents change in size.
163
163
 
164
164
  ```html
165
- <span class="pf-v5-c-icon pf-m-3xl pf-m-inline">
166
- <span class="pf-v5-c-icon__content pf-m-lg">
165
+ <span class="pf-v6-c-icon pf-m-3xl pf-m-inline">
166
+ <span class="pf-v6-c-icon__content pf-m-lg">
167
167
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
168
168
  </span>
169
169
  </span>
170
- <span class="pf-v5-c-icon pf-m-3xl pf-m-inline">
171
- <span class="pf-v5-c-icon__content pf-m-xl">
170
+ <span class="pf-v6-c-icon pf-m-3xl pf-m-inline">
171
+ <span class="pf-v6-c-icon__content pf-m-xl">
172
172
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
173
173
  </span>
174
174
  </span>
175
- <span class="pf-v5-c-icon pf-m-3xl pf-m-inline">
176
- <span class="pf-v5-c-icon__content pf-m-2xl">
175
+ <span class="pf-v6-c-icon pf-m-3xl pf-m-inline">
176
+ <span class="pf-v6-c-icon__content pf-m-2xl">
177
177
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
178
178
  </span>
179
179
  </span>
180
- <span class="pf-v5-c-icon pf-m-3xl pf-m-inline">
181
- <span class="pf-v5-c-icon__content pf-m-3xl">
180
+ <span class="pf-v6-c-icon pf-m-3xl pf-m-inline">
181
+ <span class="pf-v6-c-icon__content pf-m-3xl">
182
182
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
183
183
  </span>
184
184
  </span>
@@ -188,11 +188,11 @@ Use a size modifier on the icon container to maintain a consistent size, even if
188
188
  ### Inline
189
189
 
190
190
  ```html
191
- <div class="pf-v5-c-content">
191
+ <div class="pf-v6-c-content">
192
192
  <h1>
193
193
  Heading
194
- <span class="pf-v5-c-icon pf-m-inline">
195
- <span class="pf-v5-c-icon__content">
194
+ <span class="pf-v6-c-icon pf-m-inline">
195
+ <span class="pf-v6-c-icon__content">
196
196
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
197
197
  </span>
198
198
  </span>
@@ -203,23 +203,23 @@ Use a size modifier on the icon container to maintain a consistent size, even if
203
203
  </p>
204
204
  <h2>
205
205
  Second level
206
- <span class="pf-v5-c-icon pf-m-inline">
207
- <span class="pf-v5-c-icon__content">
206
+ <span class="pf-v6-c-icon pf-m-inline">
207
+ <span class="pf-v6-c-icon__content">
208
208
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
209
209
  </span>
210
210
  </span>
211
211
  </h2>
212
212
  <p>
213
- <span class="pf-v5-c-icon pf-m-inline">
214
- <span class="pf-v5-c-icon__content">
213
+ <span class="pf-v6-c-icon pf-m-inline">
214
+ <span class="pf-v6-c-icon__content">
215
215
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
216
216
  </span>
217
217
  </span>
218
218
  Curabitur accumsan turpis pharetra
219
219
  <strong>
220
220
  augue tincidunt
221
- <span class="pf-v5-c-icon pf-m-inline">
222
- <span class="pf-v5-c-icon__content">
221
+ <span class="pf-v6-c-icon pf-m-inline">
222
+ <span class="pf-v6-c-icon__content">
223
223
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
224
224
  </span>
225
225
  </span>
@@ -228,33 +228,33 @@ Use a size modifier on the icon container to maintain a consistent size, even if
228
228
  </p>
229
229
  <small>
230
230
  Sometimes you need small text
231
- <span class="pf-v5-c-icon pf-m-inline">
232
- <span class="pf-v5-c-icon__content">
231
+ <span class="pf-v6-c-icon pf-m-inline">
232
+ <span class="pf-v6-c-icon__content">
233
233
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
234
234
  </span>
235
235
  </span>
236
236
  </small>
237
237
  </div>Inline with size specified:
238
- <span class="pf-v5-c-icon pf-m-sm pf-m-inline">
239
- <span class="pf-v5-c-icon__content">
238
+ <span class="pf-v6-c-icon pf-m-sm pf-m-inline">
239
+ <span class="pf-v6-c-icon__content">
240
240
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
241
241
  </span>
242
242
  </span>
243
243
  small,
244
- <span class="pf-v5-c-icon pf-m-md pf-m-inline">
245
- <span class="pf-v5-c-icon__content">
244
+ <span class="pf-v6-c-icon pf-m-md pf-m-inline">
245
+ <span class="pf-v6-c-icon__content">
246
246
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
247
247
  </span>
248
248
  </span>
249
249
  medium,
250
- <span class="pf-v5-c-icon pf-m-lg pf-m-inline">
251
- <span class="pf-v5-c-icon__content">
250
+ <span class="pf-v6-c-icon pf-m-lg pf-m-inline">
251
+ <span class="pf-v6-c-icon__content">
252
252
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
253
253
  </span>
254
254
  </span>
255
255
  large,
256
- <span class="pf-v5-c-icon pf-m-xl pf-m-inline">
257
- <span class="pf-v5-c-icon__content">
256
+ <span class="pf-v6-c-icon pf-m-xl pf-m-inline">
257
+ <span class="pf-v6-c-icon__content">
258
258
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
259
259
  </span>
260
260
  </span>
@@ -265,34 +265,34 @@ extra large
265
265
  ### In progress
266
266
 
267
267
  ```html
268
- <span class="pf-v5-c-icon pf-m-md pf-m-in-progress">
269
- <span class="pf-v5-c-icon__content">
268
+ <span class="pf-v6-c-icon pf-m-md pf-m-in-progress">
269
+ <span class="pf-v6-c-icon__content">
270
270
  <i class="fas fa-check-circle" aria-hidden="true"></i>
271
271
  </span>
272
- <span class="pf-v5-c-icon__progress">
272
+ <span class="pf-v6-c-icon__progress">
273
273
  <svg
274
- class="pf-v5-c-spinner pf-m-md"
274
+ class="pf-v6-c-spinner pf-m-md"
275
275
  role="progressbar"
276
276
  viewBox="0 0 100 100"
277
277
  aria-label="Loading..."
278
278
  >
279
- <circle class="pf-v5-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
279
+ <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
280
280
  </svg>
281
281
  </span>
282
282
  </span>
283
283
 
284
- <span class="pf-v5-c-icon pf-m-md">
285
- <span class="pf-v5-c-icon__content">
284
+ <span class="pf-v6-c-icon pf-m-md">
285
+ <span class="pf-v6-c-icon__content">
286
286
  <i class="fas fa-check-circle" aria-hidden="true"></i>
287
287
  </span>
288
- <span class="pf-v5-c-icon__progress">
288
+ <span class="pf-v6-c-icon__progress">
289
289
  <svg
290
- class="pf-v5-c-spinner pf-m-md"
290
+ class="pf-v6-c-spinner pf-m-md"
291
291
  role="progressbar"
292
292
  viewBox="0 0 100 100"
293
293
  aria-label="Loading..."
294
294
  >
295
- <circle class="pf-v5-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
295
+ <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
296
296
  </svg>
297
297
  </span>
298
298
  </span>