@patternfly/patternfly 6.0.0-alpha.8 → 6.0.0-alpha.80

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 (331) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/assets/images/PF-Backdrop.svg +1 -0
  3. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  4. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  5. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  6. package/assets/images/PF-IconLogo-color.svg +17 -0
  7. package/assets/images/PF-IconLogo.svg +17 -0
  8. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  9. package/assets/images/pf-background.svg +22 -0
  10. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  11. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  12. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  13. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  14. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  15. package/assets/images/pf_logo_white.hbs +35 -0
  16. package/assets/images/pf_logo_white.svg +38 -0
  17. package/base/_common.scss +8 -4
  18. package/base/_globals.scss +4 -6
  19. package/base/_variables.scss +2 -7
  20. package/base/patternfly-common.css +8 -4
  21. package/base/patternfly-globals.css +4 -3
  22. package/base/patternfly-variables.css +884 -871
  23. package/base/tokens/_tokens-charts.scss +159 -0
  24. package/base/tokens/_tokens-dark.scss +311 -287
  25. package/base/tokens/_tokens-default.scss +425 -329
  26. package/base/tokens/_tokens-font.scss +29 -36
  27. package/base/tokens/_tokens-palette.scss +71 -71
  28. package/base/tokens/_workspace-overrides.scss +7 -0
  29. package/components/AboutModalBox/about-modal-box.css +57 -94
  30. package/components/AboutModalBox/about-modal-box.scss +37 -62
  31. package/components/Accordion/accordion.css +85 -177
  32. package/components/Accordion/accordion.scss +96 -195
  33. package/components/ActionList/action-list.css +18 -17
  34. package/components/ActionList/action-list.scss +26 -16
  35. package/components/Alert/alert-group.css +20 -16
  36. package/components/Alert/alert-group.scss +20 -16
  37. package/components/Alert/alert.css +59 -84
  38. package/components/Alert/alert.scss +62 -78
  39. package/components/Avatar/avatar.css +10 -13
  40. package/components/Avatar/avatar.scss +10 -17
  41. package/components/BackToTop/back-to-top.css +17 -16
  42. package/components/BackToTop/back-to-top.scss +12 -12
  43. package/components/Backdrop/backdrop.css +6 -2
  44. package/components/Backdrop/backdrop.scss +5 -2
  45. package/components/BackgroundImage/background-image.css +5 -1
  46. package/components/BackgroundImage/background-image.scss +5 -1
  47. package/components/Badge/badge.css +23 -15
  48. package/components/Badge/badge.scss +25 -17
  49. package/components/Banner/banner.css +90 -64
  50. package/components/Banner/banner.scss +95 -32
  51. package/components/Breadcrumb/breadcrumb.css +19 -16
  52. package/components/Breadcrumb/breadcrumb.scss +18 -16
  53. package/components/Button/button.css +419 -353
  54. package/components/Button/button.scss +476 -476
  55. package/components/CalendarMonth/calendar-month.css +61 -92
  56. package/components/CalendarMonth/calendar-month.scss +68 -63
  57. package/components/Card/card.css +100 -194
  58. package/components/Card/card.scss +121 -237
  59. package/components/Check/check.css +24 -21
  60. package/components/Check/check.scss +25 -23
  61. package/components/ClipboardCopy/clipboard-copy.css +30 -33
  62. package/components/ClipboardCopy/clipboard-copy.scss +34 -26
  63. package/components/CodeBlock/code-block.css +22 -9
  64. package/components/CodeBlock/code-block.scss +22 -10
  65. package/components/CodeEditor/code-editor.css +94 -72
  66. package/components/CodeEditor/code-editor.scss +104 -82
  67. package/components/Content/content.css +7 -7
  68. package/components/Content/content.scss +7 -7
  69. package/components/DataList/data-list.css +101 -158
  70. package/components/DataList/data-list.scss +95 -154
  71. package/components/DatePicker/date-picker.css +13 -14
  72. package/components/DatePicker/date-picker.scss +12 -16
  73. package/components/DescriptionList/description-list.css +39 -34
  74. package/components/DescriptionList/description-list.scss +25 -25
  75. package/components/Divider/divider.css +91 -169
  76. package/components/Divider/divider.scss +60 -77
  77. package/components/DragDrop/drag-drop.css +18 -14
  78. package/components/DragDrop/drag-drop.scss +18 -17
  79. package/components/Drawer/drawer.css +112 -113
  80. package/components/Drawer/drawer.scss +134 -134
  81. package/components/Dropdown/dropdown.css +1 -3
  82. package/components/Dropdown/dropdown.scss +2 -6
  83. package/components/EmptyState/empty-state.css +57 -34
  84. package/components/EmptyState/empty-state.scss +63 -34
  85. package/components/ExpandableSection/expandable-section.css +64 -62
  86. package/components/ExpandableSection/expandable-section.scss +73 -76
  87. package/components/FileUpload/file-upload.css +28 -34
  88. package/components/FileUpload/file-upload.scss +30 -42
  89. package/components/Form/form.css +68 -114
  90. package/components/Form/form.scss +65 -126
  91. package/components/FormControl/form-control.css +86 -111
  92. package/components/FormControl/form-control.scss +88 -92
  93. package/components/HelperText/helper-text.css +28 -34
  94. package/components/HelperText/helper-text.scss +30 -40
  95. package/components/Hint/hint.css +28 -21
  96. package/components/Hint/hint.scss +28 -24
  97. package/components/Icon/icon.css +154 -18
  98. package/components/Icon/icon.scss +187 -20
  99. package/components/InlineEdit/inline-edit.css +8 -7
  100. package/components/InlineEdit/inline-edit.scss +8 -7
  101. package/components/InputGroup/input-group.css +22 -38
  102. package/components/InputGroup/input-group.scss +21 -29
  103. package/components/JumpLinks/jump-links.css +34 -34
  104. package/components/JumpLinks/jump-links.scss +35 -36
  105. package/components/Label/label-group.css +39 -44
  106. package/components/Label/label-group.scss +39 -45
  107. package/components/Label/label.css +380 -355
  108. package/components/Label/label.scss +434 -348
  109. package/components/List/list.css +16 -16
  110. package/components/List/list.scss +17 -17
  111. package/components/Login/login.css +70 -97
  112. package/components/Login/login.scss +56 -64
  113. package/components/Masthead/masthead.css +261 -502
  114. package/components/Masthead/masthead.scss +123 -286
  115. package/components/Menu/menu.css +3 -0
  116. package/components/Menu/menu.scss +7 -3
  117. package/components/MenuToggle/menu-toggle.css +8 -8
  118. package/components/MenuToggle/menu-toggle.scss +8 -10
  119. package/components/ModalBox/modal-box.css +59 -52
  120. package/components/ModalBox/modal-box.scss +57 -53
  121. package/components/MultipleFileUpload/multiple-file-upload.css +77 -50
  122. package/components/MultipleFileUpload/multiple-file-upload.scss +82 -53
  123. package/components/Nav/nav.css +240 -918
  124. package/components/Nav/nav.scss +300 -1082
  125. package/components/NotificationBadge/notification-badge.css +56 -81
  126. package/components/NotificationBadge/notification-badge.scss +60 -97
  127. package/components/NotificationDrawer/notification-drawer.css +104 -115
  128. package/components/NotificationDrawer/notification-drawer.scss +106 -116
  129. package/components/NumberInput/number-input.css +8 -8
  130. package/components/NumberInput/number-input.scss +7 -12
  131. package/components/OverflowMenu/overflow-menu.css +17 -47
  132. package/components/OverflowMenu/overflow-menu.scss +27 -65
  133. package/components/Page/page.css +56 -164
  134. package/components/Page/page.scss +60 -154
  135. package/components/Pagination/pagination.css +57 -124
  136. package/components/Pagination/pagination.scss +40 -128
  137. package/components/Panel/panel.css +27 -23
  138. package/components/Panel/panel.scss +29 -26
  139. package/components/Popover/popover.css +42 -53
  140. package/components/Popover/popover.scss +46 -55
  141. package/components/Progress/progress.css +31 -45
  142. package/components/Progress/progress.scss +36 -55
  143. package/components/ProgressStepper/progress-stepper.css +72 -69
  144. package/components/ProgressStepper/progress-stepper.scss +65 -65
  145. package/components/Radio/radio.css +27 -20
  146. package/components/Radio/radio.scss +28 -22
  147. package/components/Sidebar/sidebar.css +20 -9
  148. package/components/Sidebar/sidebar.scss +23 -11
  149. package/components/SimpleList/simple-list.css +35 -52
  150. package/components/SimpleList/simple-list.scss +41 -51
  151. package/components/Skeleton/skeleton.css +18 -20
  152. package/components/Skeleton/skeleton.scss +17 -21
  153. package/components/SkipToContent/skip-to-content.css +6 -3
  154. package/components/SkipToContent/skip-to-content.scss +8 -6
  155. package/components/Slider/slider.css +34 -30
  156. package/components/Slider/slider.scss +46 -43
  157. package/components/Spinner/spinner.css +17 -34
  158. package/components/Spinner/spinner.scss +19 -47
  159. package/components/Switch/switch.css +42 -38
  160. package/components/Switch/switch.scss +48 -43
  161. package/components/TabContent/tab-content.css +17 -11
  162. package/components/TabContent/tab-content.scss +18 -14
  163. package/components/Table/table-grid.css +29 -45
  164. package/components/Table/table-grid.scss +40 -53
  165. package/components/Table/table-scrollable.css +6 -6
  166. package/components/Table/table-scrollable.scss +8 -8
  167. package/components/Table/table-tree-view.css +76 -74
  168. package/components/Table/table-tree-view.scss +44 -39
  169. package/components/Table/table.css +67 -93
  170. package/components/Table/table.scss +83 -105
  171. package/components/Tabs/tabs.css +143 -175
  172. package/components/Tabs/tabs.scss +159 -217
  173. package/components/Tile/tile.css +40 -81
  174. package/components/Tile/tile.scss +38 -84
  175. package/components/Timestamp/timestamp.css +12 -9
  176. package/components/Timestamp/timestamp.scss +11 -10
  177. package/components/Title/title.css +70 -19
  178. package/components/Title/title.scss +90 -20
  179. package/components/ToggleGroup/toggle-group.css +54 -48
  180. package/components/ToggleGroup/toggle-group.scss +62 -50
  181. package/components/Toolbar/toolbar.css +2527 -1031
  182. package/components/Toolbar/toolbar.scss +233 -520
  183. package/components/Tooltip/tooltip.css +16 -18
  184. package/components/Tooltip/tooltip.scss +20 -24
  185. package/components/TreeView/tree-view.css +76 -97
  186. package/components/TreeView/tree-view.scss +82 -113
  187. package/components/Truncate/truncate.css +4 -0
  188. package/components/Truncate/truncate.scss +3 -0
  189. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  190. package/docs/components/Accordion/examples/Accordion.md +614 -416
  191. package/docs/components/ActionList/examples/ActionList.md +73 -22
  192. package/docs/components/Alert/examples/Alert.md +3 -3
  193. package/docs/components/Avatar/examples/Avatar.md +5 -19
  194. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  195. package/docs/components/Badge/examples/Badge.md +21 -0
  196. package/docs/components/Banner/examples/Banner.md +48 -25
  197. package/docs/components/Brand/examples/Brand.css +12 -0
  198. package/docs/components/Brand/examples/Brand.md +51 -32
  199. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  200. package/docs/components/Button/examples/Button.css +4 -0
  201. package/docs/components/Button/examples/Button.md +1419 -93
  202. package/docs/components/CalendarMonth/examples/CalendarMonth.md +48 -224
  203. package/docs/components/Card/examples/Card.md +550 -133
  204. package/docs/components/Check/examples/Check.md +1 -0
  205. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  206. package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
  207. package/docs/components/Content/examples/Content.md +5 -5
  208. package/docs/components/DatePicker/examples/DatePicker.md +5 -2
  209. package/docs/components/Divider/examples/Divider.css +3 -1
  210. package/docs/components/Divider/examples/Divider.md +30 -5
  211. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  212. package/docs/components/Drawer/examples/Drawer.md +294 -256
  213. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  214. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  215. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  216. package/docs/components/Form/examples/Form.md +134 -89
  217. package/docs/components/Icon/examples/Icon.md +82 -11
  218. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  219. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  220. package/docs/components/Label/examples/Label.css +4 -0
  221. package/docs/components/Label/examples/Label.md +3090 -703
  222. package/docs/components/LogViewer/examples/LogViewer.md +180 -180
  223. package/docs/components/Login/examples/Login.md +10 -5
  224. package/docs/components/Masthead/examples/masthead.md +443 -65
  225. package/docs/components/Menu/examples/Menu.md +507 -473
  226. package/docs/components/MenuToggle/examples/MenuToggle.md +106 -114
  227. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  228. package/docs/components/Nav/examples/Navigation.css +1 -23
  229. package/docs/components/Nav/examples/Navigation.md +209 -356
  230. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  231. package/docs/components/Page/examples/Page.css +0 -8
  232. package/docs/components/Page/examples/Page.md +22 -21
  233. package/docs/components/Pagination/examples/Pagination.md +663 -637
  234. package/docs/components/Panel/examples/Panel.md +12 -0
  235. package/docs/components/Popover/examples/Popover.md +1 -1
  236. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  237. package/docs/components/Radio/examples/Radio.md +1 -1
  238. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  239. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  240. package/docs/components/TabContent/examples/TabContent.md +10 -10
  241. package/docs/components/Table/examples/Table.md +8 -8
  242. package/docs/components/Tabs/examples/Tabs.css +1 -1
  243. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  244. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  245. package/docs/components/Tile/examples/Tile.md +264 -144
  246. package/docs/components/Title/examples/Title.md +18 -0
  247. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  248. package/docs/components/Toolbar/examples/Toolbar.md +985 -3355
  249. package/docs/components/TreeView/examples/TreeView.md +7 -57
  250. package/docs/components/Truncate/examples/Truncate.css +2 -2
  251. package/docs/demos/AboutModal/examples/AboutModal.md +104 -31
  252. package/docs/demos/Alert/examples/Alert.md +330 -87
  253. package/docs/demos/BackToTop/examples/BackToTop.md +102 -29
  254. package/docs/demos/Banner/examples/Banner.md +211 -60
  255. package/docs/demos/Card/examples/Card.md +2 -2
  256. package/docs/demos/CardView/examples/CardView.md +241 -187
  257. package/docs/demos/ContextSelector/examples/ContextSelector.md +377 -94
  258. package/docs/demos/Dashboard/examples/Dashboard.md +102 -29
  259. package/docs/demos/DataList/examples/DataList.md +999 -938
  260. package/docs/demos/DescriptionList/examples/DescriptionList.md +306 -87
  261. package/docs/demos/Drawer/examples/Drawer.md +640 -251
  262. package/docs/demos/Form/examples/BasicForms.md +138 -84
  263. package/docs/demos/JumpLinks/examples/JumpLinks.md +917 -385
  264. package/docs/demos/Masthead/examples/Masthead.md +786 -342
  265. package/docs/demos/Modal/examples/Modal.md +645 -198
  266. package/docs/demos/Nav/examples/Nav.md +691 -902
  267. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +515 -145
  268. package/docs/demos/Page/examples/Page.md +942 -273
  269. package/docs/demos/Page/examples/Penta.md +66 -26
  270. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
  271. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  272. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1183 -832
  273. package/docs/demos/Skeleton/examples/Skeleton.md +102 -29
  274. package/docs/demos/Table/examples/Table.md +3811 -3456
  275. package/docs/demos/Tabs/examples/Tabs.md +636 -194
  276. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  277. package/docs/demos/Toolbar/examples/Toolbar.md +1316 -1478
  278. package/docs/demos/Wizard/examples/Wizard.md +918 -261
  279. package/docs/layouts/Flex/examples/Flex.md +11 -11
  280. package/package.json +32 -32
  281. package/patternfly-base-no-globals-theme-dark-unversioned.css +897 -880
  282. package/patternfly-base-no-globals.css +897 -880
  283. package/patternfly-base-theme-dark-unversioned.css +890 -872
  284. package/patternfly-base.css +890 -872
  285. package/patternfly-no-globals.css +8053 -7977
  286. package/patternfly-theme-dark-unversioned.css +8059 -7982
  287. package/patternfly.css +8059 -7982
  288. package/patternfly.min.css +1 -1
  289. package/patternfly.min.css.map +1 -1
  290. package/sass-utilities/mixins.scss +18 -0
  291. package/base/themes/dark/_variables.scss +0 -102
  292. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  293. package/components/Accordion/themes/dark/accordion.scss +0 -9
  294. package/components/Alert/themes/dark/alert.scss +0 -17
  295. package/components/Badge/themes/dark/badge.scss +0 -9
  296. package/components/Banner/themes/dark/banner.scss +0 -14
  297. package/components/Button/themes/dark/button.scss +0 -51
  298. package/components/CalendarMonth/themes/dark/calendar-month.scss +0 -37
  299. package/components/Card/themes/dark/card.scss +0 -20
  300. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  301. package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
  302. package/components/DataList/themes/dark/data-list.scss +0 -10
  303. package/components/DatePicker/themes/dark/date-picker.scss +0 -8
  304. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  305. package/components/Drawer/themes/dark/drawer.scss +0 -13
  306. package/components/Form/themes/dark/form.scss +0 -7
  307. package/components/FormControl/themes/dark/form-control.scss +0 -24
  308. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  309. package/components/Hint/themes/dark/hint.scss +0 -8
  310. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  311. package/components/Label/themes/dark/label.scss +0 -53
  312. package/components/Login/themes/dark/login.scss +0 -12
  313. package/components/Masthead/themes/dark/masthead.scss +0 -14
  314. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  315. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  316. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  317. package/components/Page/themes/dark/page.scss +0 -69
  318. package/components/Pagination/themes/dark/pagination.scss +0 -7
  319. package/components/Panel/themes/dark/panel.scss +0 -7
  320. package/components/Popover/themes/dark/popover.scss +0 -11
  321. package/components/Progress/themes/dark/progress.scss +0 -9
  322. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  323. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  324. package/components/Switch/themes/dark/switch.scss +0 -11
  325. package/components/Tabs/themes/dark/tabs.scss +0 -10
  326. package/components/Tile/themes/dark/tile.scss +0 -10
  327. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  328. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  329. package/components/TreeView/themes/dark/tree-view.scss +0 -8
  330. package/docs/components/Avatar/examples/Avatar.css +0 -3
  331. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
package/docs/components/Check/examples/Check.md CHANGED
@@ -47,6 +47,7 @@ cssPrefix: pf-v5-c-check
47
47
  type="checkbox"
48
48
  id="check-checked-example-input"
49
49
  name="check-checked-example-input"
50
+ checked
50
51
  />
51
52
  <label
52
53
  class="pf-v5-c-check__label"
package/docs/components/CodeBlock/examples/CodeBlock.md CHANGED
@@ -75,7 +75,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</co
75
75
  kind: HelmChartRepository
76
76
  metadata:
77
77
  name: azure-sample-repo<div
78
- class="pf-v5-c-expandable-section pf-m-detached"
78
+ class="pf-v5-c-expandable-section"
79
79
  ><div
80
80
  class="pf-v5-c-expandable-section__content"
81
81
  hidden
@@ -87,7 +87,7 @@ name: azure-sample-repo<div
87
87
  </div>
88
88
  </code>
89
89
  </pre>
90
- <div class="pf-v5-c-expandable-section pf-m-detached">
90
+ <div class="pf-v5-c-expandable-section">
91
91
  <button
92
92
  type="button"
93
93
  class="pf-v5-c-expandable-section__toggle"
@@ -136,7 +136,7 @@ name: azure-sample-repo<div
136
136
  kind: HelmChartRepository
137
137
  metadata:
138
138
  name: azure-sample-repo<div
139
- class="pf-v5-c-expandable-section pf-m-expanded pf-m-detached"
139
+ class="pf-v5-c-expandable-section pf-m-expanded"
140
140
  ><div
141
141
  class="pf-v5-c-expandable-section__content"
142
142
  id="code-block-expandable-expanded-content"
@@ -147,7 +147,7 @@ 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 pf-m-detached">
150
+ <div class="pf-v5-c-expandable-section pf-m-expanded">
151
151
  <button
152
152
  type="button"
153
153
  class="pf-v5-c-expandable-section__toggle"
package/docs/components/CodeEditor/examples/CodeEditor.md CHANGED
@@ -9,30 +9,32 @@ cssPrefix: pf-v5-c-code-editor
9
9
  ```html
10
10
  <div class="pf-v5-c-code-editor">
11
11
  <div class="pf-v5-c-code-editor__header">
12
- <div class="pf-v5-c-code-editor__controls">
13
- <button
14
- class="pf-v5-c-button pf-m-control"
15
- type="button"
16
- aria-label="Copy to clipboard"
17
- >
18
- <i class="fas fa-copy" aria-hidden="true"></i>
19
- </button>
20
- <button
21
- class="pf-v5-c-button pf-m-control"
22
- type="button"
23
- aria-label="Download code"
24
- >
25
- <i class="fas fa-download"></i>
26
- </button>
27
- <button
28
- class="pf-v5-c-button pf-m-control"
29
- type="button"
30
- aria-label="Upload code"
31
- >
32
- <i class="fas fa-upload"></i>
33
- </button>
12
+ <div class="pf-v5-c-code-editor__header-content">
13
+ <div class="pf-v5-c-code-editor__controls">
14
+ <button
15
+ class="pf-v5-c-button pf-m-plain"
16
+ type="button"
17
+ aria-label="Copy to clipboard"
18
+ >
19
+ <i class="fas fa-copy" aria-hidden="true"></i>
20
+ </button>
21
+ <button
22
+ class="pf-v5-c-button pf-m-plain"
23
+ type="button"
24
+ aria-label="Download code"
25
+ >
26
+ <i class="fas fa-download"></i>
27
+ </button>
28
+ <button
29
+ class="pf-v5-c-button pf-m-plain"
30
+ type="button"
31
+ aria-label="Upload code"
32
+ >
33
+ <i class="fas fa-upload"></i>
34
+ </button>
35
+ </div>
36
+ <div class="pf-v5-c-code-editor__header-main"></div>
34
37
  </div>
35
- <div class="pf-v5-c-code-editor__header-main"></div>
36
38
  <div class="pf-v5-c-code-editor__tab">
37
39
  <span class="pf-v5-c-code-editor__tab-icon">
38
40
  <i class="fas fa-code"></i>
@@ -56,31 +58,33 @@ cssPrefix: pf-v5-c-code-editor
56
58
  ```html
57
59
  <div class="pf-v5-c-code-editor pf-m-read-only">
58
60
  <div class="pf-v5-c-code-editor__header">
59
- <div class="pf-v5-c-code-editor__controls">
60
- <button
61
- class="pf-v5-c-button pf-m-control"
62
- type="button"
63
- aria-label="Copy to clipboard"
64
- >
65
- <i class="fas fa-copy" aria-hidden="true"></i>
66
- </button>
67
- <button
68
- class="pf-v5-c-button pf-m-control"
69
- type="button"
70
- aria-label="Download code"
71
- >
72
- <i class="fas fa-download"></i>
73
- </button>
74
- <button
75
- class="pf-v5-c-button pf-m-control"
76
- type="button"
77
- aria-label="Upload code"
78
- disabled
79
- >
80
- <i class="fas fa-upload"></i>
81
- </button>
61
+ <div class="pf-v5-c-code-editor__header-content">
62
+ <div class="pf-v5-c-code-editor__controls">
63
+ <button
64
+ class="pf-v5-c-button pf-m-plain"
65
+ type="button"
66
+ aria-label="Copy to clipboard"
67
+ >
68
+ <i class="fas fa-copy" aria-hidden="true"></i>
69
+ </button>
70
+ <button
71
+ class="pf-v5-c-button pf-m-plain"
72
+ type="button"
73
+ aria-label="Download code"
74
+ >
75
+ <i class="fas fa-download"></i>
76
+ </button>
77
+ <button
78
+ class="pf-v5-c-button pf-m-plain"
79
+ type="button"
80
+ aria-label="Upload code"
81
+ disabled
82
+ >
83
+ <i class="fas fa-upload"></i>
84
+ </button>
85
+ </div>
86
+ <div class="pf-v5-c-code-editor__header-main"></div>
82
87
  </div>
83
- <div class="pf-v5-c-code-editor__header-main"></div>
84
88
  <div class="pf-v5-c-code-editor__tab">
85
89
  <span class="pf-v5-c-code-editor__tab-icon">
86
90
  <i class="fas fa-code"></i>
@@ -113,30 +117,32 @@ cssPrefix: pf-v5-c-code-editor
113
117
  </div>
114
118
  </div>
115
119
  <div class="pf-v5-c-code-editor__main">
116
- <div class="pf-v5-c-empty-state">
117
- <div class="pf-v5-c-empty-state__content">
118
- <div class="pf-v5-c-empty-state__header">
119
- <div class="pf-v5-c-empty-state__icon">
120
- <i class="fas fa- fa-code" aria-hidden="true"></i>
120
+ <div class="pf-v5-c-code-editor__upload">
121
+ <div class="pf-v5-c-empty-state">
122
+ <div class="pf-v5-c-empty-state__content">
123
+ <div class="pf-v5-c-empty-state__header">
124
+ <div class="pf-v5-c-empty-state__icon">
125
+ <i class="fas fa- fa-code" aria-hidden="true"></i>
126
+ </div>
127
+ <div class="pf-v5-c-empty-state__title">
128
+ <h1 class="pf-v5-c-empty-state__title-text">Start editing</h1>
129
+ </div>
121
130
  </div>
122
- <div class="pf-v5-c-empty-state__title">
123
- <h1 class="pf-v5-c-empty-state__title-text">Start editing</h1>
124
- </div>
125
- </div>
126
131
 
127
- <div
128
- class="pf-v5-c-empty-state__body"
129
- >Drag a file here or browse to upload.</div>
132
+ <div
133
+ class="pf-v5-c-empty-state__body"
134
+ >Drag a file here or browse to upload.</div>
130
135
 
131
- <div class="pf-v5-c-empty-state__footer">
132
- <div class="pf-v5-c-empty-state__actions">
133
- <button class="pf-v5-c-button pf-m-primary" type="button">Browse</button>
134
- </div>
135
- <div class="pf-v5-c-empty-state__actions">
136
- <button
137
- class="pf-v5-c-button pf-m-link"
138
- type="button"
139
- >Start from scratch</button>
136
+ <div class="pf-v5-c-empty-state__footer">
137
+ <div class="pf-v5-c-empty-state__actions">
138
+ <button class="pf-v5-c-button pf-m-primary" type="button">Browse</button>
139
+ </div>
140
+ <div class="pf-v5-c-empty-state__actions">
141
+ <button
142
+ class="pf-v5-c-button pf-m-link"
143
+ type="button"
144
+ >Start from scratch</button>
145
+ </div>
140
146
  </div>
141
147
  </div>
142
148
  </div>
@@ -160,30 +166,32 @@ cssPrefix: pf-v5-c-code-editor
160
166
  </div>
161
167
  </div>
162
168
  <div class="pf-v5-c-code-editor__main pf-m-drag-hover">
163
- <div class="pf-v5-c-empty-state">
164
- <div class="pf-v5-c-empty-state__content">
165
- <div class="pf-v5-c-empty-state__header">
166
- <div class="pf-v5-c-empty-state__icon">
167
- <i class="fas fa- fa-code" aria-hidden="true"></i>
169
+ <div class="pf-v5-c-code-editor__upload">
170
+ <div class="pf-v5-c-empty-state">
171
+ <div class="pf-v5-c-empty-state__content">
172
+ <div class="pf-v5-c-empty-state__header">
173
+ <div class="pf-v5-c-empty-state__icon">
174
+ <i class="fas fa- fa-code" aria-hidden="true"></i>
175
+ </div>
176
+ <div class="pf-v5-c-empty-state__title">
177
+ <h1 class="pf-v5-c-empty-state__title-text">Start editing</h1>
178
+ </div>
168
179
  </div>
169
- <div class="pf-v5-c-empty-state__title">
170
- <h1 class="pf-v5-c-empty-state__title-text">Start editing</h1>
171
- </div>
172
- </div>
173
180
 
174
- <div
175
- class="pf-v5-c-empty-state__body"
176
- >Drag a file here or browse to upload.</div>
181
+ <div
182
+ class="pf-v5-c-empty-state__body"
183
+ >Drag a file here or browse to upload.</div>
177
184
 
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">Browse</button>
181
- </div>
182
- <div class="pf-v5-c-empty-state__actions">
183
- <button
184
- class="pf-v5-c-button pf-m-link"
185
- type="button"
186
- >Start from scratch</button>
185
+ <div class="pf-v5-c-empty-state__footer">
186
+ <div class="pf-v5-c-empty-state__actions">
187
+ <button class="pf-v5-c-button pf-m-primary" type="button">Browse</button>
188
+ </div>
189
+ <div class="pf-v5-c-empty-state__actions">
190
+ <button
191
+ class="pf-v5-c-button pf-m-link"
192
+ type="button"
193
+ >Start from scratch</button>
194
+ </div>
187
195
  </div>
188
196
  </div>
189
197
  </div>
@@ -198,37 +206,39 @@ cssPrefix: pf-v5-c-code-editor
198
206
  ```html
199
207
  <div class="pf-v5-c-code-editor">
200
208
  <div class="pf-v5-c-code-editor__header">
201
- <div class="pf-v5-c-code-editor__controls">
202
- <button
203
- class="pf-v5-c-button pf-m-control"
204
- type="button"
205
- aria-label="Copy to clipboard"
206
- >
207
- <i class="fas fa-copy" aria-hidden="true"></i>
208
- </button>
209
- <button
210
- class="pf-v5-c-button pf-m-control"
211
- type="button"
212
- aria-label="Download code"
213
- >
214
- <i class="fas fa-download"></i>
215
- </button>
216
- <button
217
- class="pf-v5-c-button pf-m-control"
218
- type="button"
219
- aria-label="Upload code"
220
- >
221
- <i class="fas fa-upload"></i>
222
- </button>
223
- </div>
224
- <div class="pf-v5-c-code-editor__header-main">Header main content</div>
225
- <div class="pf-v5-c-code-editor__keyboard-shortcuts">
226
- <button class="pf-v5-c-button pf-m-link" type="button">
227
- <span class="pf-v5-c-button__icon pf-m-start">
228
- <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
229
- </span>
230
- View shortcuts
231
- </button>
209
+ <div class="pf-v5-c-code-editor__header-content">
210
+ <div class="pf-v5-c-code-editor__controls">
211
+ <button
212
+ class="pf-v5-c-button pf-m-plain"
213
+ type="button"
214
+ aria-label="Copy to clipboard"
215
+ >
216
+ <i class="fas fa-copy" aria-hidden="true"></i>
217
+ </button>
218
+ <button
219
+ class="pf-v5-c-button pf-m-plain"
220
+ type="button"
221
+ aria-label="Download code"
222
+ >
223
+ <i class="fas fa-download"></i>
224
+ </button>
225
+ <button
226
+ class="pf-v5-c-button pf-m-plain"
227
+ type="button"
228
+ aria-label="Upload code"
229
+ >
230
+ <i class="fas fa-upload"></i>
231
+ </button>
232
+ </div>
233
+ <div class="pf-v5-c-code-editor__header-main">Header main content</div>
234
+ <div class="pf-v5-c-code-editor__keyboard-shortcuts">
235
+ <button class="pf-v5-c-button pf-m-link" type="button">
236
+ <span class="pf-v5-c-button__icon pf-m-start">
237
+ <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
238
+ </span>
239
+ View shortcuts
240
+ </button>
241
+ </div>
232
242
  </div>
233
243
  <div class="pf-v5-c-code-editor__tab">
234
244
  <span class="pf-v5-c-code-editor__tab-icon">
@@ -252,15 +262,17 @@ cssPrefix: pf-v5-c-code-editor
252
262
 
253
263
  ### Usage
254
264
 
255
- | Class | Applied to | Outcome |
256
- | -- | -- | -- |
257
- | `.pf-v5-c-code-editor` | `<div>` | Initiates the code editor component. **Required** |
258
- | `.pf-v5-c-code-editor__header` | `<div>` | Initiates the code editor header used for the controls and tab elements. **Required** |
259
- | `.pf-v5-c-code-editor__main` | `<div>` | Initiates the main container for a code editor e.g. Monaco **Required** |
260
- | `.pf-v5-c-code-editor__code` | `<div>` | Initiates the container for code without a JS code editor. Comes with PatternFly styling. |
261
- | `.pf-v5-c-code-editor__controls` | `<div>` | Initiates the code editor controls. |
262
- | `.pf-v5-c-code-editor__header-main` | `<div>` | Initiates the code editor header content area. |
263
- | `.pf-v5-c-code-editor__keyboard-shortcuts` | `<div>` | Initiates the code editor header keyboard shortcuts area. |
264
- | `.pf-v5-c-code-editor__tab` | `<div>` | Initiates the code editor tab. |
265
- | `.pf-v5-c-code-editor__tab-text` | `<span>` | Initiates the code editor tab text. |
266
- | `.pf-v5-c-code-editor__tab-icon` | `<span>` | Initiates the code editor tab icon. |
265
+ | Class | Applied to | Outcome |
266
+ | ------------------------------------------ | ---------- | --------------------------------------------------------------------------------------------- |
267
+ | `.pf-v5-c-code-editor` | `<div>` | Initiates the code editor component. **Required** |
268
+ | `.pf-v5-c-code-editor__header` | `<div>` | Initiates the code editor header used for the controls and tab elements. **Required** |
269
+ | `.pf-v5-c-code-editor__header-content` | `<div>` | Initiates the code editor header content used for the controls and tab elements. **Required** |
270
+ | `.pf-v5-c-code-editor__main` | `<div>` | Initiates the main container for a code editor e.g. Monaco **Required** |
271
+ | `.pf-v5-c-code-editor__code` | `<div>` | Initiates the container for code without a JS code editor. Comes with PatternFly styling. |
272
+ | `.pf-v5-c-code-editor__controls` | `<div>` | Initiates the code editor controls. |
273
+ | `.pf-v5-c-code-editor__header-main` | `<div>` | Initiates the code editor header content area. |
274
+ | `.pf-v5-c-code-editor__keyboard-shortcuts` | `<div>` | Initiates the code editor header keyboard shortcuts area. |
275
+ | `.pf-v5-c-code-editor__tab` | `<div>` | Initiates the code editor tab. |
276
+ | `.pf-v5-c-code-editor__tab-text` | `<span>` | Initiates the code editor tab text. |
277
+ | `.pf-v5-c-code-editor__tab-icon` | `<span>` | Initiates the code editor tab icon. |
278
+ | `.pf-v5-c-code-editor__upload` | `<div>` | Initiates the code editor upload border. |
package/docs/components/Content/examples/Content.md CHANGED
@@ -163,11 +163,11 @@ cssPrefix: pf-v5-c-content
163
163
 
164
164
  When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use `pf-v5-c-content` as container. It can handle almost any HTML tag:
165
165
 
166
- * `<p>` paragraphs
167
- * `<ul>` `<ol>` `<dl>` lists
168
- * `<h1>` to `<h6>` headings
169
- * `<blockquote>` quotes
170
- * `<em>` and `<strong>`
166
+ * `<p>` paragraphs
167
+ * `<ul>` `<ol>` `<dl>` lists
168
+ * `<h1>` to `<h6>` headings
169
+ * `<blockquote>` quotes
170
+ * `<em>` and `<strong>`
171
171
 
172
172
  This `pf-v5-c-content` class can be used in any context where you just want to (or can only) write some text.
173
173
 
package/docs/components/DatePicker/examples/DatePicker.md CHANGED
@@ -70,7 +70,7 @@ cssPrefix: pf-v5-c-date-picker
70
70
  <div class="pf-v5-c-date-picker__helper-text">
71
71
  <div class="pf-v5-c-helper-text">
72
72
  <div class="pf-v5-c-helper-text__item">
73
- <span class="pf-v5-c-helper-text__item-text">Select a date.</span>
73
+ <span class="pf-v5-c-helper-text__item-text">Select a date</span>
74
74
  </div>
75
75
  </div>
76
76
  </div>
@@ -115,6 +115,9 @@ cssPrefix: pf-v5-c-date-picker
115
115
  <div class="pf-v5-c-date-picker__helper-text">
116
116
  <div class="pf-v5-c-helper-text">
117
117
  <div class="pf-v5-c-helper-text__item pf-m-error">
118
+ <span class="pf-v5-c-helper-text__item-icon">
119
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
120
+ </span>
118
121
  <span class="pf-v5-c-helper-text__item-text">Invalid date</span>
119
122
  </div>
120
123
  </div>
@@ -196,7 +199,7 @@ cssPrefix: pf-v5-c-date-picker
196
199
  ```html
197
200
  <div
198
201
  class="pf-v5-c-date-picker"
199
- style="--pf-v5-c-date-picker__input--c-form-control--width-chars: 17;"
202
+ style="--pf-v5-c-date-picker__input--c-form-control--width-chars: 18;"
200
203
  >
201
204
  <div class="pf-v5-c-date-picker__input">
202
205
  <div class="pf-v5-c-input-group">
package/docs/components/Divider/examples/Divider.css CHANGED
@@ -3,11 +3,13 @@
3
3
  align-items: center;
4
4
  }
5
5
 
6
+ [id*="divider-vertical"],
6
7
  [id*="ws-core-c-divider-vertical"],
7
8
  #ws-core-c-divider-horizontal-on-lg {
8
- height: 4rem;
9
+ height: 6rem;
9
10
  }
10
11
 
11
12
  [id*="ws-core-c-divider"] .ws-preview-html {
12
13
  height: 100%;
13
14
  }
15
+
package/docs/components/Divider/examples/Divider.md CHANGED
@@ -34,24 +34,23 @@ cssPrefix: pf-v5-c-divider
34
34
  ### Inset medium
35
35
 
36
36
  ```html
37
- <div class="pf-v5-c-divider pf-m-inset-md" role="separator"></div>
37
+ <hr class="pf-v5-c-divider pf-m-inset-md" />
38
38
 
39
39
  ```
40
40
 
41
41
  ### Md inset, no inset on md, 3xl inset on lg, lg inset on xl
42
42
 
43
43
  ```html
44
- <div
44
+ <hr
45
45
  class="pf-v5-c-divider pf-m-inset-md pf-m-inset-none-on-md pf-m-inset-3xl-on-lg pf-m-inset-lg-on-xl"
46
- role="separator"
47
- ></div>
46
+ />
48
47
 
49
48
  ```
50
49
 
51
50
  ### Vertical
52
51
 
53
52
  ```html
54
- <div class="pf-v5-c-divider pf-m-vertical pf-m-inset-md" role="separator"></div>
53
+ <div class="pf-v5-c-divider pf-m-vertical" role="separator"></div>
55
54
 
56
55
  ```
57
56
 
@@ -92,6 +91,32 @@ cssPrefix: pf-v5-c-divider
92
91
 
93
92
  ```
94
93
 
94
+ ### In flex layout
95
+
96
+ ```html
97
+ <strong>Horizontal</strong>
98
+ <br />
99
+ <br />
100
+ <div class="pf-v5-l-flex">
101
+ <div class="pf-v5-l-flex__item">item 1</div>
102
+
103
+ <div class="pf-v5-c-divider pf-m-vertical" role="separator"></div>
104
+ <div class="pf-v5-l-flex__item">item 1</div>
105
+ </div>
106
+ <br />
107
+ <br />
108
+ <strong>Vertical</strong>
109
+ <br />
110
+ <br />
111
+ <div class="pf-v5-l-flex pf-m-column">
112
+ <div class="pf-v5-l-flex__item">item 1</div>
113
+
114
+ <div class="pf-v5-c-divider" role="separator"></div>
115
+ <div class="pf-v5-l-flex__item">item 1</div>
116
+ </div>
117
+
118
+ ```
119
+
95
120
  ## Documentation
96
121
 
97
122
  ### Overview
package/docs/components/DragDrop/examples/DragDrop.css CHANGED
@@ -3,7 +3,7 @@
3
3
  }
4
4
 
5
5
  .pf-v5-c-draggable.pf-m-dragging {
6
- --pf-v5-c-draggable--m-dragging--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
6
+ --pf-v5-c-draggable--m-dragging--BackgroundColor: var(--pf-t--global--background--color--primary--default);
7
7
 
8
8
  position: absolute;
9
9
  inset-block-start: 23%;