@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/ClipboardCopy/examples/ClipboardCopy.md CHANGED
@@ -7,9 +7,9 @@ cssPrefix: pf-v5-c-clipboard-copy
7
7
  ### Basic
8
8
 
9
9
  ```html
10
- <div class="pf-v5-c-clipboard-copy">
11
- <div class="pf-v5-c-clipboard-copy__group">
12
- <span class="pf-v5-c-form-control">
10
+ <div class="pf-v6-c-clipboard-copy">
11
+ <div class="pf-v6-c-clipboard-copy__group">
12
+ <span class="pf-v6-c-form-control">
13
13
  <input
14
14
  type="text"
15
15
  value="This is editable"
@@ -18,7 +18,7 @@ cssPrefix: pf-v5-c-clipboard-copy
18
18
  />
19
19
  </span>
20
20
  <button
21
- class="pf-v5-c-button pf-m-control"
21
+ class="pf-v6-c-button pf-m-control"
22
22
  type="button"
23
23
  aria-label="Copy to clipboard"
24
24
  id="basic-editable-copy-button"
@@ -29,9 +29,9 @@ cssPrefix: pf-v5-c-clipboard-copy
29
29
  </div>
30
30
  </div>
31
31
  <br />
32
- <div class="pf-v5-c-clipboard-copy">
33
- <div class="pf-v5-c-clipboard-copy__group">
34
- <span class="pf-v5-c-form-control pf-m-readonly">
32
+ <div class="pf-v6-c-clipboard-copy">
33
+ <div class="pf-v6-c-clipboard-copy__group">
34
+ <span class="pf-v6-c-form-control pf-m-readonly">
35
35
  <input
36
36
  readonly
37
37
  type="text"
@@ -41,7 +41,7 @@ cssPrefix: pf-v5-c-clipboard-copy
41
41
  />
42
42
  </span>
43
43
  <button
44
- class="pf-v5-c-button pf-m-control"
44
+ class="pf-v6-c-button pf-m-control"
45
45
  type="button"
46
46
  aria-label="Copy to clipboard"
47
47
  id="basic-readonly-copy-button"
@@ -58,20 +58,20 @@ cssPrefix: pf-v5-c-clipboard-copy
58
58
 
59
59
  ```html
60
60
  <h4>Editable</h4>
61
- <div class="pf-v5-c-clipboard-copy">
62
- <div class="pf-v5-c-clipboard-copy__group">
61
+ <div class="pf-v6-c-clipboard-copy">
62
+ <div class="pf-v6-c-clipboard-copy__group">
63
63
  <button
64
- class="pf-v5-c-button pf-m-control"
64
+ class="pf-v6-c-button pf-m-control"
65
65
  type="button"
66
66
  id="expandable-not-expanded-editable-toggle"
67
67
  aria-labelledby="expandable-not-expanded-editable-toggle expandable-not-expanded-editable-text-input"
68
68
  aria-controls="expandable-not-expanded-editable-content"
69
69
  >
70
- <div class="pf-v5-c-clipboard-copy__toggle-icon">
70
+ <div class="pf-v6-c-clipboard-copy__toggle-icon">
71
71
  <i class="fas fa-angle-right" aria-hidden="true"></i>
72
72
  </div>
73
73
  </button>
74
- <span class="pf-v5-c-form-control">
74
+ <span class="pf-v6-c-form-control">
75
75
  <input
76
76
  type="text"
77
77
  value="This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion."
@@ -80,7 +80,7 @@ cssPrefix: pf-v5-c-clipboard-copy
80
80
  />
81
81
  </span>
82
82
  <button
83
- class="pf-v5-c-button pf-m-control"
83
+ class="pf-v6-c-button pf-m-control"
84
84
  type="button"
85
85
  aria-label="Copy to clipboard"
86
86
  id="expandable-not-expanded-editable-copy-button"
@@ -90,26 +90,26 @@ cssPrefix: pf-v5-c-clipboard-copy
90
90
  </button>
91
91
  </div>
92
92
  <div
93
- class="pf-v5-c-clipboard-copy__expandable-content"
93
+ class="pf-v6-c-clipboard-copy__expandable-content"
94
94
  hidden
95
95
  id="expandable-not-expanded-editable-content"
96
96
  >This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.</div>
97
97
  </div>
98
98
  <br />
99
- <div class="pf-v5-c-clipboard-copy pf-m-expanded">
100
- <div class="pf-v5-c-clipboard-copy__group">
99
+ <div class="pf-v6-c-clipboard-copy pf-m-expanded">
100
+ <div class="pf-v6-c-clipboard-copy__group">
101
101
  <button
102
- class="pf-v5-c-button pf-m-control pf-m-expanded"
102
+ class="pf-v6-c-button pf-m-control pf-m-expanded"
103
103
  type="button"
104
104
  id="expandable-expanded-editable-toggle"
105
105
  aria-labelledby="expandable-expanded-editable-toggle expandable-expanded-editable-text-input"
106
106
  aria-controls="expandable-expanded-editable-content"
107
107
  >
108
- <div class="pf-v5-c-clipboard-copy__toggle-icon">
108
+ <div class="pf-v6-c-clipboard-copy__toggle-icon">
109
109
  <i class="fas fa-angle-right" aria-hidden="true"></i>
110
110
  </div>
111
111
  </button>
112
- <span class="pf-v5-c-form-control pf-m-readonly">
112
+ <span class="pf-v6-c-form-control pf-m-readonly">
113
113
  <input
114
114
  readonly
115
115
  type="text"
@@ -119,7 +119,7 @@ cssPrefix: pf-v5-c-clipboard-copy
119
119
  />
120
120
  </span>
121
121
  <button
122
- class="pf-v5-c-button pf-m-control"
122
+ class="pf-v6-c-button pf-m-control"
123
123
  type="button"
124
124
  aria-label="Copy to clipboard"
125
125
  id="expandable-expanded-editable-copy-button"
@@ -129,27 +129,27 @@ cssPrefix: pf-v5-c-clipboard-copy
129
129
  </button>
130
130
  </div>
131
131
  <div
132
- class="pf-v5-c-clipboard-copy__expandable-content"
132
+ class="pf-v6-c-clipboard-copy__expandable-content"
133
133
  contenteditable="true"
134
134
  id="expandable-expanded-editable-content"
135
135
  >This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.</div>
136
136
  </div>
137
137
  <br />
138
138
  <h4>Read-only</h4>
139
- <div class="pf-v5-c-clipboard-copy">
140
- <div class="pf-v5-c-clipboard-copy__group">
139
+ <div class="pf-v6-c-clipboard-copy">
140
+ <div class="pf-v6-c-clipboard-copy__group">
141
141
  <button
142
- class="pf-v5-c-button pf-m-control"
142
+ class="pf-v6-c-button pf-m-control"
143
143
  type="button"
144
144
  id="expandable-not-expanded-readonly-toggle"
145
145
  aria-labelledby="expandable-not-expanded-readonly-toggle expandable-not-expanded-readonly-text-input"
146
146
  aria-controls="expandable-not-expanded-readonly-content"
147
147
  >
148
- <div class="pf-v5-c-clipboard-copy__toggle-icon">
148
+ <div class="pf-v6-c-clipboard-copy__toggle-icon">
149
149
  <i class="fas fa-angle-right" aria-hidden="true"></i>
150
150
  </div>
151
151
  </button>
152
- <span class="pf-v5-c-form-control pf-m-readonly">
152
+ <span class="pf-v6-c-form-control pf-m-readonly">
153
153
  <input
154
154
  readonly
155
155
  type="text"
@@ -159,7 +159,7 @@ cssPrefix: pf-v5-c-clipboard-copy
159
159
  />
160
160
  </span>
161
161
  <button
162
- class="pf-v5-c-button pf-m-control"
162
+ class="pf-v6-c-button pf-m-control"
163
163
  type="button"
164
164
  aria-label="Copy to clipboard"
165
165
  id="expandable-not-expanded-readonly-copy-button"
@@ -169,26 +169,26 @@ cssPrefix: pf-v5-c-clipboard-copy
169
169
  </button>
170
170
  </div>
171
171
  <div
172
- class="pf-v5-c-clipboard-copy__expandable-content"
172
+ class="pf-v6-c-clipboard-copy__expandable-content"
173
173
  hidden
174
174
  id="expandable-not-expanded-readonly-content"
175
175
  >This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.</div>
176
176
  </div>
177
177
  <br />
178
- <div class="pf-v5-c-clipboard-copy pf-m-expanded">
179
- <div class="pf-v5-c-clipboard-copy__group">
178
+ <div class="pf-v6-c-clipboard-copy pf-m-expanded">
179
+ <div class="pf-v6-c-clipboard-copy__group">
180
180
  <button
181
- class="pf-v5-c-button pf-m-control pf-m-expanded"
181
+ class="pf-v6-c-button pf-m-control pf-m-expanded"
182
182
  type="button"
183
183
  id="expandable-expanded-readonly-toggle"
184
184
  aria-labelledby="expandable-expanded-readonly-toggle expandable-expanded-readonly-text-input"
185
185
  aria-controls="expandable-expanded-readonly-content"
186
186
  >
187
- <div class="pf-v5-c-clipboard-copy__toggle-icon">
187
+ <div class="pf-v6-c-clipboard-copy__toggle-icon">
188
188
  <i class="fas fa-angle-right" aria-hidden="true"></i>
189
189
  </div>
190
190
  </button>
191
- <span class="pf-v5-c-form-control pf-m-readonly">
191
+ <span class="pf-v6-c-form-control pf-m-readonly">
192
192
  <input
193
193
  readonly
194
194
  type="text"
@@ -198,7 +198,7 @@ cssPrefix: pf-v5-c-clipboard-copy
198
198
  />
199
199
  </span>
200
200
  <button
201
- class="pf-v5-c-button pf-m-control"
201
+ class="pf-v6-c-button pf-m-control"
202
202
  type="button"
203
203
  aria-label="Copy to clipboard"
204
204
  id="expandable-expanded-readonly-copy-button"
@@ -208,26 +208,26 @@ cssPrefix: pf-v5-c-clipboard-copy
208
208
  </button>
209
209
  </div>
210
210
  <div
211
- class="pf-v5-c-clipboard-copy__expandable-content"
211
+ class="pf-v6-c-clipboard-copy__expandable-content"
212
212
  id="expandable-expanded-readonly-content"
213
213
  >This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.</div>
214
214
  </div>
215
215
  <br />
216
216
  <h4>Code</h4>
217
- <div class="pf-v5-c-clipboard-copy">
218
- <div class="pf-v5-c-clipboard-copy__group">
217
+ <div class="pf-v6-c-clipboard-copy">
218
+ <div class="pf-v6-c-clipboard-copy__group">
219
219
  <button
220
- class="pf-v5-c-button pf-m-control"
220
+ class="pf-v6-c-button pf-m-control"
221
221
  type="button"
222
222
  id="expandable-not-expanded-code-toggle"
223
223
  aria-labelledby="expandable-not-expanded-code-toggle expandable-not-expanded-code-text-input"
224
224
  aria-controls="expandable-not-expanded-code-content"
225
225
  >
226
- <div class="pf-v5-c-clipboard-copy__toggle-icon">
226
+ <div class="pf-v6-c-clipboard-copy__toggle-icon">
227
227
  <i class="fas fa-angle-right" aria-hidden="true"></i>
228
228
  </div>
229
229
  </button>
230
- <span class="pf-v5-c-form-control">
230
+ <span class="pf-v6-c-form-control">
231
231
  <input
232
232
  dir="ltr"
233
233
  type="text"
@@ -237,7 +237,7 @@ cssPrefix: pf-v5-c-clipboard-copy
237
237
  />
238
238
  </span>
239
239
  <button
240
- class="pf-v5-c-button pf-m-control"
240
+ class="pf-v6-c-button pf-m-control"
241
241
  type="button"
242
242
  aria-label="Copy to clipboard"
243
243
  id="expandable-not-expanded-code-copy-button"
@@ -247,7 +247,7 @@ cssPrefix: pf-v5-c-clipboard-copy
247
247
  </button>
248
248
  </div>
249
249
  <div
250
- class="pf-v5-c-clipboard-copy__expandable-content"
250
+ class="pf-v6-c-clipboard-copy__expandable-content"
251
251
  hidden
252
252
  id="expandable-not-expanded-code-content"
253
253
  >
@@ -266,20 +266,20 @@ cssPrefix: pf-v5-c-clipboard-copy
266
266
  </div>
267
267
  </div>
268
268
  <br />
269
- <div class="pf-v5-c-clipboard-copy pf-m-expanded">
270
- <div class="pf-v5-c-clipboard-copy__group">
269
+ <div class="pf-v6-c-clipboard-copy pf-m-expanded">
270
+ <div class="pf-v6-c-clipboard-copy__group">
271
271
  <button
272
- class="pf-v5-c-button pf-m-control pf-m-expanded"
272
+ class="pf-v6-c-button pf-m-control pf-m-expanded"
273
273
  type="button"
274
274
  id="expandable-expanded-code-toggle"
275
275
  aria-labelledby="expandable-expanded-code-toggle expandable-expanded-code-text-input"
276
276
  aria-controls="expandable-expanded-code-content"
277
277
  >
278
- <div class="pf-v5-c-clipboard-copy__toggle-icon">
278
+ <div class="pf-v6-c-clipboard-copy__toggle-icon">
279
279
  <i class="fas fa-angle-right" aria-hidden="true"></i>
280
280
  </div>
281
281
  </button>
282
- <span class="pf-v5-c-form-control pf-m-readonly">
282
+ <span class="pf-v6-c-form-control pf-m-readonly">
283
283
  <input
284
284
  readonly
285
285
  dir="ltr"
@@ -290,7 +290,7 @@ cssPrefix: pf-v5-c-clipboard-copy
290
290
  />
291
291
  </span>
292
292
  <button
293
- class="pf-v5-c-button pf-m-control"
293
+ class="pf-v6-c-button pf-m-control"
294
294
  type="button"
295
295
  aria-label="Copy to clipboard"
296
296
  id="expandable-expanded-code-copy-button"
@@ -300,7 +300,7 @@ cssPrefix: pf-v5-c-clipboard-copy
300
300
  </button>
301
301
  </div>
302
302
  <div
303
- class="pf-v5-c-clipboard-copy__expandable-content"
303
+ class="pf-v6-c-clipboard-copy__expandable-content"
304
304
  contenteditable="true"
305
305
  id="expandable-expanded-code-content"
306
306
  >
@@ -324,12 +324,12 @@ cssPrefix: pf-v5-c-clipboard-copy
324
324
  ### Inline compact
325
325
 
326
326
  ```html
327
- <div class="pf-v5-c-clipboard-copy pf-m-inline">
328
- <span class="pf-v5-c-clipboard-copy__text">2.3.4-2-redhat</span>
329
- <span class="pf-v5-c-clipboard-copy__actions">
330
- <span class="pf-v5-c-clipboard-copy__actions-item">
327
+ <div class="pf-v6-c-clipboard-copy pf-m-inline">
328
+ <span class="pf-v6-c-clipboard-copy__text">2.3.4-2-redhat</span>
329
+ <span class="pf-v6-c-clipboard-copy__actions">
330
+ <span class="pf-v6-c-clipboard-copy__actions-item">
331
331
  <button
332
- class="pf-v5-c-button pf-m-plain"
332
+ class="pf-v6-c-button pf-m-plain"
333
333
  type="button"
334
334
  aria-label="Copy to clipboard"
335
335
  >
@@ -344,12 +344,12 @@ cssPrefix: pf-v5-c-clipboard-copy
344
344
  ### Inline compact code
345
345
 
346
346
  ```html
347
- <div class="pf-v5-c-clipboard-copy pf-m-inline">
348
- <code class="pf-v5-c-clipboard-copy__text pf-m-code">2.3.4-2-redhat</code>
349
- <span class="pf-v5-c-clipboard-copy__actions">
350
- <span class="pf-v5-c-clipboard-copy__actions-item">
347
+ <div class="pf-v6-c-clipboard-copy pf-m-inline">
348
+ <code class="pf-v6-c-clipboard-copy__text pf-m-code">2.3.4-2-redhat</code>
349
+ <span class="pf-v6-c-clipboard-copy__actions">
350
+ <span class="pf-v6-c-clipboard-copy__actions-item">
351
351
  <button
352
- class="pf-v5-c-button pf-m-plain"
352
+ class="pf-v6-c-button pf-m-plain"
353
353
  type="button"
354
354
  aria-label="Copy to clipboard"
355
355
  >
@@ -364,21 +364,21 @@ cssPrefix: pf-v5-c-clipboard-copy
364
364
  ### Inline compact with additional action
365
365
 
366
366
  ```html
367
- <div class="pf-v5-c-clipboard-copy pf-m-inline">
368
- <span class="pf-v5-c-clipboard-copy__text">2.3.4-2-redhat</span>
369
- <span class="pf-v5-c-clipboard-copy__actions">
370
- <span class="pf-v5-c-clipboard-copy__actions-item">
367
+ <div class="pf-v6-c-clipboard-copy pf-m-inline">
368
+ <span class="pf-v6-c-clipboard-copy__text">2.3.4-2-redhat</span>
369
+ <span class="pf-v6-c-clipboard-copy__actions">
370
+ <span class="pf-v6-c-clipboard-copy__actions-item">
371
371
  <button
372
- class="pf-v5-c-button pf-m-plain"
372
+ class="pf-v6-c-button pf-m-plain"
373
373
  type="button"
374
374
  aria-label="Copy to clipboard"
375
375
  >
376
376
  <i class="fas fa-copy" aria-hidden="true"></i>
377
377
  </button>
378
378
  </span>
379
- <span class="pf-v5-c-clipboard-copy__actions-item">
379
+ <span class="pf-v6-c-clipboard-copy__actions-item">
380
380
  <button
381
- class="pf-v5-c-button pf-m-plain"
381
+ class="pf-v6-c-button pf-m-plain"
382
382
  type="button"
383
383
  aria-label="Run in web terminal"
384
384
  >
@@ -396,12 +396,12 @@ cssPrefix: pf-v5-c-clipboard-copy
396
396
  <h4>
397
397
  <strong>Basic</strong>
398
398
  </h4>Lorem ipsum&nbsp;
399
- <div class="pf-v5-c-clipboard-copy pf-m-inline">
400
- <span class="pf-v5-c-clipboard-copy__text">2.3.4-2-redhat</span>
401
- <span class="pf-v5-c-clipboard-copy__actions">
402
- <span class="pf-v5-c-clipboard-copy__actions-item">
399
+ <div class="pf-v6-c-clipboard-copy pf-m-inline">
400
+ <span class="pf-v6-c-clipboard-copy__text">2.3.4-2-redhat</span>
401
+ <span class="pf-v6-c-clipboard-copy__actions">
402
+ <span class="pf-v6-c-clipboard-copy__actions-item">
403
403
  <button
404
- class="pf-v5-c-button pf-m-plain"
404
+ class="pf-v6-c-button pf-m-plain"
405
405
  type="button"
406
406
  aria-label="Copy to clipboard"
407
407
  >
@@ -417,14 +417,14 @@ cssPrefix: pf-v5-c-clipboard-copy
417
417
  <h4>
418
418
  <strong>Long copy string</strong>
419
419
  </h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.&nbsp;
420
- <div class="pf-v5-c-clipboard-copy pf-m-inline">
420
+ <div class="pf-v6-c-clipboard-copy pf-m-inline">
421
421
  <span
422
- class="pf-v5-c-clipboard-copy__text"
422
+ class="pf-v6-c-clipboard-copy__text"
423
423
  >https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890</span>
424
- <span class="pf-v5-c-clipboard-copy__actions">
425
- <span class="pf-v5-c-clipboard-copy__actions-item">
424
+ <span class="pf-v6-c-clipboard-copy__actions">
425
+ <span class="pf-v6-c-clipboard-copy__actions-item">
426
426
  <button
427
- class="pf-v5-c-button pf-m-plain"
427
+ class="pf-v6-c-button pf-m-plain"
428
428
  type="button"
429
429
  aria-label="Copy to clipboard"
430
430
  >
@@ -439,14 +439,14 @@ cssPrefix: pf-v5-c-clipboard-copy
439
439
  <h4>
440
440
  <strong>Long copy string in block</strong>
441
441
  </h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.&nbsp;
442
- <div class="pf-v5-c-clipboard-copy pf-m-inline pf-m-block">
442
+ <div class="pf-v6-c-clipboard-copy pf-m-inline pf-m-block">
443
443
  <span
444
- class="pf-v5-c-clipboard-copy__text"
444
+ class="pf-v6-c-clipboard-copy__text"
445
445
  >https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890</span>
446
- <span class="pf-v5-c-clipboard-copy__actions">
447
- <span class="pf-v5-c-clipboard-copy__actions-item">
446
+ <span class="pf-v6-c-clipboard-copy__actions">
447
+ <span class="pf-v6-c-clipboard-copy__actions-item">
448
448
  <button
449
- class="pf-v5-c-button pf-m-plain"
449
+ class="pf-v6-c-button pf-m-plain"
450
450
  type="button"
451
451
  aria-label="Copy to clipboard"
452
452
  >
package/docs/components/CodeBlock/examples/CodeBlock.md CHANGED
@@ -7,21 +7,21 @@ cssPrefix: pf-v5-c-code-block
7
7
  ### Basic
8
8
 
9
9
  ```html
10
- <div class="pf-v5-c-code-block">
11
- <div class="pf-v5-c-code-block__header">
12
- <div class="pf-v5-c-code-block__actions">
13
- <div class="pf-v5-c-code-block__actions-item">
10
+ <div class="pf-v6-c-code-block">
11
+ <div class="pf-v6-c-code-block__header">
12
+ <div class="pf-v6-c-code-block__actions">
13
+ <div class="pf-v6-c-code-block__actions-item">
14
14
  <button
15
- class="pf-v5-c-button pf-m-plain"
15
+ class="pf-v6-c-button pf-m-plain"
16
16
  type="button"
17
17
  aria-label="Copy to clipboard"
18
18
  >
19
19
  <i class="fas fa-copy" aria-hidden="true"></i>
20
20
  </button>
21
21
  </div>
22
- <div class="pf-v5-c-code-block__actions-item">
22
+ <div class="pf-v6-c-code-block__actions-item">
23
23
  <button
24
- class="pf-v5-c-button pf-m-plain"
24
+ class="pf-v6-c-button pf-m-plain"
25
25
  type="button"
26
26
  aria-label="Run in Web Terminal"
27
27
  >
@@ -30,8 +30,8 @@ cssPrefix: pf-v5-c-code-block
30
30
  </div>
31
31
  </div>
32
32
  </div>
33
- <div class="pf-v5-c-code-block__content">
34
- <pre class="pf-v5-c-code-block__pre"><code class="pf-v5-c-code-block__code">apiVersion: helm.openshift.io/v1beta1/
33
+ <div class="pf-v6-c-code-block__content">
34
+ <pre class="pf-v6-c-code-block__pre"><code class="pf-v6-c-code-block__code">apiVersion: helm.openshift.io/v1beta1/
35
35
  kind: HelmChartRepository
36
36
  metadata:
37
37
  name: azure-sample-repo
@@ -47,21 +47,21 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</co
47
47
  ### Expandable
48
48
 
49
49
  ```html
50
- <div class="pf-v5-c-code-block">
51
- <div class="pf-v5-c-code-block__header">
52
- <div class="pf-v5-c-code-block__actions">
53
- <div class="pf-v5-c-code-block__actions-item">
50
+ <div class="pf-v6-c-code-block">
51
+ <div class="pf-v6-c-code-block__header">
52
+ <div class="pf-v6-c-code-block__actions">
53
+ <div class="pf-v6-c-code-block__actions-item">
54
54
  <button
55
- class="pf-v5-c-button pf-m-plain"
55
+ class="pf-v6-c-button pf-m-plain"
56
56
  type="button"
57
57
  aria-label="Copy to clipboard"
58
58
  >
59
59
  <i class="fas fa-copy" aria-hidden="true"></i>
60
60
  </button>
61
61
  </div>
62
- <div class="pf-v5-c-code-block__actions-item">
62
+ <div class="pf-v6-c-code-block__actions-item">
63
63
  <button
64
- class="pf-v5-c-button pf-m-plain"
64
+ class="pf-v6-c-button pf-m-plain"
65
65
  type="button"
66
66
  aria-label="Run in Web Terminal"
67
67
  >
@@ -70,14 +70,14 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</co
70
70
  </div>
71
71
  </div>
72
72
  </div>
73
- <div class="pf-v5-c-code-block__content">
74
- <pre class="pf-v5-c-code-block__pre"><code class="pf-v5-c-code-block__code">apiVersion: helm.openshift.io/v1beta1/
73
+ <div class="pf-v6-c-code-block__content">
74
+ <pre class="pf-v6-c-code-block__pre"><code class="pf-v6-c-code-block__code">apiVersion: helm.openshift.io/v1beta1/
75
75
  kind: HelmChartRepository
76
76
  metadata:
77
77
  name: azure-sample-repo<div
78
- class="pf-v5-c-expandable-section"
78
+ class="pf-v6-c-expandable-section"
79
79
  ><div
80
- class="pf-v5-c-expandable-section__content"
80
+ class="pf-v6-c-expandable-section__content"
81
81
  hidden
82
82
  id="code-block-expandable-content"
83
83
  >
@@ -87,17 +87,17 @@ name: azure-sample-repo<div
87
87
  </div>
88
88
  </code>
89
89
  </pre>
90
- <div class="pf-v5-c-expandable-section">
90
+ <div class="pf-v6-c-expandable-section">
91
91
  <button
92
92
  type="button"
93
- class="pf-v5-c-expandable-section__toggle"
93
+ class="pf-v6-c-expandable-section__toggle"
94
94
  aria-expanded="false"
95
95
  aria-controls="code-block-expandable-content"
96
96
  >
97
- <span class="pf-v5-c-expandable-section__toggle-icon pf-m-expand-top">
97
+ <span class="pf-v6-c-expandable-section__toggle-icon pf-m-expand-top">
98
98
  <i class="fas fa-angle-right" aria-hidden="true"></i>
99
99
  </span>
100
- <span class="pf-v5-c-expandable-section__toggle-text">Show more</span>
100
+ <span class="pf-v6-c-expandable-section__toggle-text">Show more</span>
101
101
  </button>
102
102
  </div>
103
103
  </div>
@@ -108,21 +108,21 @@ name: azure-sample-repo<div
108
108
  ### Expandable expanded
109
109
 
110
110
  ```html
111
- <div class="pf-v5-c-code-block">
112
- <div class="pf-v5-c-code-block__header">
113
- <div class="pf-v5-c-code-block__actions">
114
- <div class="pf-v5-c-code-block__actions-item">
111
+ <div class="pf-v6-c-code-block">
112
+ <div class="pf-v6-c-code-block__header">
113
+ <div class="pf-v6-c-code-block__actions">
114
+ <div class="pf-v6-c-code-block__actions-item">
115
115
  <button
116
- class="pf-v5-c-button pf-m-plain"
116
+ class="pf-v6-c-button pf-m-plain"
117
117
  type="button"
118
118
  aria-label="Copy to clipboard"
119
119
  >
120
120
  <i class="fas fa-copy" aria-hidden="true"></i>
121
121
  </button>
122
122
  </div>
123
- <div class="pf-v5-c-code-block__actions-item">
123
+ <div class="pf-v6-c-code-block__actions-item">
124
124
  <button
125
- class="pf-v5-c-button pf-m-plain"
125
+ class="pf-v6-c-button pf-m-plain"
126
126
  type="button"
127
127
  aria-label="Run in Web Terminal"
128
128
  >
@@ -131,14 +131,14 @@ name: azure-sample-repo<div
131
131
  </div>
132
132
  </div>
133
133
  </div>
134
- <div class="pf-v5-c-code-block__content">
135
- <pre class="pf-v5-c-code-block__pre"><code class="pf-v5-c-code-block__code">apiVersion: helm.openshift.io/v1beta1/
134
+ <div class="pf-v6-c-code-block__content">
135
+ <pre class="pf-v6-c-code-block__pre"><code class="pf-v6-c-code-block__code">apiVersion: helm.openshift.io/v1beta1/
136
136
  kind: HelmChartRepository
137
137
  metadata:
138
138
  name: azure-sample-repo<div
139
- class="pf-v5-c-expandable-section pf-m-expanded"
139
+ class="pf-v6-c-expandable-section pf-m-expanded"
140
140
  ><div
141
- class="pf-v5-c-expandable-section__content"
141
+ class="pf-v6-c-expandable-section__content"
142
142
  id="code-block-expandable-expanded-content"
143
143
  >
144
144
  spec:
@@ -147,17 +147,17 @@ name: azure-sample-repo<div
147
147
  </div>
148
148
  </code>
149
149
  </pre>
150
- <div class="pf-v5-c-expandable-section pf-m-expanded">
150
+ <div class="pf-v6-c-expandable-section pf-m-expanded">
151
151
  <button
152
152
  type="button"
153
- class="pf-v5-c-expandable-section__toggle"
153
+ class="pf-v6-c-expandable-section__toggle"
154
154
  aria-expanded="true"
155
155
  aria-controls="code-block-expandable-expanded-content"
156
156
  >
157
- <span class="pf-v5-c-expandable-section__toggle-icon pf-m-expand-top">
157
+ <span class="pf-v6-c-expandable-section__toggle-icon pf-m-expand-top">
158
158
  <i class="fas fa-angle-right" aria-hidden="true"></i>
159
159
  </span>
160
- <span class="pf-v5-c-expandable-section__toggle-text">Show less</span>
160
+ <span class="pf-v6-c-expandable-section__toggle-text">Show less</span>
161
161
  </button>
162
162
  </div>
163
163
  </div>