@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.70

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 (382) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/README.md +13 -3
  3. package/assets/icons/iconUnicodes.json +1 -0
  4. package/assets/images/PF-Backdrop.svg +1 -0
  5. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  6. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  7. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  8. package/assets/images/PF-IconLogo-color.svg +17 -0
  9. package/assets/images/PF-IconLogo.svg +17 -0
  10. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  11. package/assets/images/pf-background.svg +22 -0
  12. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  13. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  14. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  15. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  16. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  17. package/assets/images/pf_logo_white.hbs +35 -0
  18. package/assets/images/pf_logo_white.svg +38 -0
  19. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  20. package/assets/pficon/pficon.scss +6 -129
  21. package/base/_common.scss +29 -4
  22. package/base/_globals.scss +5 -7
  23. package/base/_variables.scss +8 -6
  24. package/base/patternfly-common.css +24 -6
  25. package/base/patternfly-globals.css +5 -4
  26. package/base/patternfly-icons.css +5 -1
  27. package/base/patternfly-pf-icons.css +5 -1
  28. package/base/patternfly-variables.css +859 -833
  29. package/base/tokens/_tokens-dark.scss +306 -284
  30. package/base/tokens/_tokens-default.scss +415 -329
  31. package/base/tokens/_tokens-font.scss +41 -46
  32. package/base/tokens/_tokens-palette.scss +68 -68
  33. package/base/tokens/_workspace-overrides.scss +7 -0
  34. package/components/AboutModalBox/about-modal-box.css +78 -104
  35. package/components/AboutModalBox/about-modal-box.scss +62 -74
  36. package/components/Accordion/accordion.css +96 -175
  37. package/components/Accordion/accordion.scss +106 -193
  38. package/components/ActionList/action-list.css +18 -17
  39. package/components/ActionList/action-list.scss +26 -16
  40. package/components/Alert/alert-group.css +27 -20
  41. package/components/Alert/alert-group.scss +27 -20
  42. package/components/Alert/alert.css +74 -95
  43. package/components/Alert/alert.scss +76 -89
  44. package/components/AppLauncher/app-launcher.css +32 -23
  45. package/components/AppLauncher/app-launcher.scss +32 -23
  46. package/components/Avatar/avatar.css +10 -13
  47. package/components/Avatar/avatar.scss +10 -17
  48. package/components/BackToTop/back-to-top.css +17 -16
  49. package/components/BackToTop/back-to-top.scss +14 -14
  50. package/components/Backdrop/backdrop.css +8 -4
  51. package/components/Backdrop/backdrop.scss +7 -4
  52. package/components/BackgroundImage/background-image.css +11 -4
  53. package/components/BackgroundImage/background-image.scss +13 -4
  54. package/components/Badge/badge.css +25 -17
  55. package/components/Badge/badge.scss +27 -19
  56. package/components/Banner/banner.css +95 -69
  57. package/components/Banner/banner.scss +100 -34
  58. package/components/Breadcrumb/breadcrumb.css +28 -19
  59. package/components/Breadcrumb/breadcrumb.scss +26 -19
  60. package/components/Button/button.css +417 -359
  61. package/components/Button/button.scss +472 -484
  62. package/components/CalendarMonth/calendar-month.css +25 -15
  63. package/components/CalendarMonth/calendar-month.scss +23 -15
  64. package/components/Card/card.css +117 -203
  65. package/components/Card/card.scss +137 -246
  66. package/components/Check/check.css +25 -22
  67. package/components/Check/check.scss +26 -24
  68. package/components/Chip/chip-group.css +6 -6
  69. package/components/Chip/chip-group.scss +6 -6
  70. package/components/Chip/chip.css +16 -9
  71. package/components/Chip/chip.scss +17 -9
  72. package/components/ClipboardCopy/clipboard-copy.css +47 -41
  73. package/components/ClipboardCopy/clipboard-copy.scss +50 -34
  74. package/components/CodeBlock/code-block.css +24 -12
  75. package/components/CodeBlock/code-block.scss +24 -13
  76. package/components/CodeEditor/code-editor.css +31 -22
  77. package/components/CodeEditor/code-editor.scss +30 -21
  78. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  79. package/components/Content/content.css +40 -37
  80. package/components/Content/content.scss +40 -37
  81. package/components/ContextSelector/context-selector.css +41 -26
  82. package/components/ContextSelector/context-selector.scss +40 -25
  83. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  84. package/components/DataList/data-list-grid.css +21 -21
  85. package/components/DataList/data-list-grid.scss +3 -3
  86. package/components/DataList/data-list.css +165 -209
  87. package/components/DataList/data-list.scss +138 -185
  88. package/components/DatePicker/date-picker.css +8 -8
  89. package/components/DatePicker/date-picker.scss +8 -8
  90. package/components/DescriptionList/description-list.css +47 -39
  91. package/components/DescriptionList/description-list.scss +33 -30
  92. package/components/Divider/divider.css +97 -177
  93. package/components/Divider/divider.scss +60 -79
  94. package/components/DragDrop/drag-drop.css +26 -22
  95. package/components/DragDrop/drag-drop.scss +26 -25
  96. package/components/Drawer/drawer.css +216 -158
  97. package/components/Drawer/drawer.scss +199 -150
  98. package/components/Dropdown/dropdown.css +76 -69
  99. package/components/Dropdown/dropdown.scss +67 -62
  100. package/components/DualListSelector/dual-list-selector.css +29 -15
  101. package/components/DualListSelector/dual-list-selector.scss +30 -15
  102. package/components/EmptyState/empty-state.css +64 -38
  103. package/components/EmptyState/empty-state.scss +70 -38
  104. package/components/ExpandableSection/expandable-section.css +75 -66
  105. package/components/ExpandableSection/expandable-section.scss +82 -80
  106. package/components/FileUpload/file-upload.css +31 -43
  107. package/components/FileUpload/file-upload.scss +31 -49
  108. package/components/Form/form.css +111 -154
  109. package/components/Form/form.scss +101 -160
  110. package/components/FormControl/form-control.css +95 -111
  111. package/components/FormControl/form-control.scss +97 -92
  112. package/components/HelperText/helper-text.css +29 -35
  113. package/components/HelperText/helper-text.scss +31 -41
  114. package/components/Hint/hint.css +37 -27
  115. package/components/Hint/hint.scss +37 -30
  116. package/components/Icon/icon.css +155 -19
  117. package/components/Icon/icon.scss +188 -21
  118. package/components/InlineEdit/inline-edit.css +12 -11
  119. package/components/InlineEdit/inline-edit.scss +12 -11
  120. package/components/InputGroup/input-group.css +32 -42
  121. package/components/InputGroup/input-group.scss +31 -33
  122. package/components/JumpLinks/jump-links.css +61 -58
  123. package/components/JumpLinks/jump-links.scss +61 -60
  124. package/components/Label/label-group.css +48 -50
  125. package/components/Label/label-group.scss +48 -51
  126. package/components/Label/label.css +382 -363
  127. package/components/Label/label.scss +441 -356
  128. package/components/List/list.css +25 -25
  129. package/components/List/list.scss +26 -26
  130. package/components/LogViewer/log-viewer.css +14 -14
  131. package/components/LogViewer/log-viewer.scss +14 -14
  132. package/components/Login/login.css +104 -122
  133. package/components/Login/login.scss +92 -91
  134. package/components/Masthead/masthead.css +262 -506
  135. package/components/Masthead/masthead.scss +123 -289
  136. package/components/Menu/menu.css +82 -65
  137. package/components/Menu/menu.scss +85 -69
  138. package/components/MenuToggle/menu-toggle.css +37 -31
  139. package/components/MenuToggle/menu-toggle.scss +37 -33
  140. package/components/ModalBox/modal-box.css +76 -69
  141. package/components/ModalBox/modal-box.scss +74 -70
  142. package/components/MultipleFileUpload/multiple-file-upload.css +87 -57
  143. package/components/MultipleFileUpload/multiple-file-upload.scss +92 -60
  144. package/components/Nav/nav.css +248 -899
  145. package/components/Nav/nav.scss +304 -1059
  146. package/components/Nav/themes/dark/nav.scss +2 -2
  147. package/components/NotificationBadge/notification-badge.css +66 -85
  148. package/components/NotificationBadge/notification-badge.scss +72 -103
  149. package/components/NotificationDrawer/notification-drawer.css +130 -128
  150. package/components/NotificationDrawer/notification-drawer.scss +130 -129
  151. package/components/NumberInput/number-input.css +10 -10
  152. package/components/NumberInput/number-input.scss +9 -14
  153. package/components/OptionsMenu/options-menu.css +43 -31
  154. package/components/OptionsMenu/options-menu.scss +43 -31
  155. package/components/OverflowMenu/overflow-menu.css +17 -47
  156. package/components/OverflowMenu/overflow-menu.scss +27 -65
  157. package/components/Page/page.css +182 -232
  158. package/components/Page/page.scss +130 -195
  159. package/components/Pagination/pagination.css +74 -121
  160. package/components/Pagination/pagination.scss +55 -125
  161. package/components/Panel/panel.css +40 -30
  162. package/components/Panel/panel.scss +42 -33
  163. package/components/Popover/popover.css +108 -87
  164. package/components/Popover/popover.scss +120 -109
  165. package/components/Progress/progress.css +40 -52
  166. package/components/Progress/progress.scss +48 -62
  167. package/components/ProgressStepper/progress-stepper.css +98 -89
  168. package/components/ProgressStepper/progress-stepper.scss +90 -84
  169. package/components/Radio/radio.css +30 -23
  170. package/components/Radio/radio.scss +31 -25
  171. package/components/Select/select.css +56 -47
  172. package/components/Select/select.scss +56 -47
  173. package/components/Sidebar/sidebar.css +31 -14
  174. package/components/Sidebar/sidebar.scss +34 -16
  175. package/components/SimpleList/simple-list.css +45 -56
  176. package/components/SimpleList/simple-list.scss +51 -55
  177. package/components/Skeleton/skeleton.css +24 -25
  178. package/components/Skeleton/skeleton.scss +21 -26
  179. package/components/SkipToContent/skip-to-content.css +9 -6
  180. package/components/SkipToContent/skip-to-content.scss +8 -6
  181. package/components/Slider/slider.css +80 -55
  182. package/components/Slider/slider.scss +96 -65
  183. package/components/Spinner/spinner.css +17 -34
  184. package/components/Spinner/spinner.scss +19 -47
  185. package/components/Switch/switch.css +49 -41
  186. package/components/Switch/switch.scss +51 -42
  187. package/components/TabContent/tab-content.css +21 -12
  188. package/components/TabContent/tab-content.scss +22 -15
  189. package/components/Table/table-grid.css +256 -195
  190. package/components/Table/table-grid.scss +53 -39
  191. package/components/Table/table-scrollable.css +4 -4
  192. package/components/Table/table-scrollable.scss +6 -4
  193. package/components/Table/table-tree-view.css +112 -105
  194. package/components/Table/table-tree-view.scss +38 -33
  195. package/components/Table/table.css +105 -89
  196. package/components/Table/table.scss +105 -89
  197. package/components/Tabs/tabs.css +210 -214
  198. package/components/Tabs/tabs.scss +222 -254
  199. package/components/TextInputGroup/text-input-group.css +15 -15
  200. package/components/TextInputGroup/text-input-group.scss +15 -15
  201. package/components/Tile/tile.css +47 -88
  202. package/components/Tile/tile.scss +45 -91
  203. package/components/Timestamp/timestamp.css +12 -9
  204. package/components/Timestamp/timestamp.scss +11 -10
  205. package/components/Title/title.css +70 -19
  206. package/components/Title/title.scss +90 -20
  207. package/components/ToggleGroup/toggle-group.css +68 -59
  208. package/components/ToggleGroup/toggle-group.scss +72 -57
  209. package/components/Toolbar/toolbar.css +2553 -1054
  210. package/components/Toolbar/toolbar.scss +234 -516
  211. package/components/Tooltip/tooltip.css +74 -44
  212. package/components/Tooltip/tooltip.scss +93 -77
  213. package/components/TreeView/tree-view.css +48 -27
  214. package/components/TreeView/tree-view.scss +50 -28
  215. package/components/Truncate/truncate.css +13 -0
  216. package/components/Truncate/truncate.scss +19 -3
  217. package/components/Wizard/wizard.css +57 -36
  218. package/components/Wizard/wizard.scss +57 -36
  219. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  220. package/docs/components/Accordion/examples/Accordion.md +614 -416
  221. package/docs/components/ActionList/examples/ActionList.md +73 -22
  222. package/docs/components/Alert/examples/Alert.md +3 -3
  223. package/docs/components/Avatar/examples/Avatar.md +5 -19
  224. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  225. package/docs/components/Badge/examples/Badge.md +21 -0
  226. package/docs/components/Banner/examples/Banner.md +48 -25
  227. package/docs/components/Brand/examples/Brand.css +12 -0
  228. package/docs/components/Brand/examples/Brand.md +51 -32
  229. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  230. package/docs/components/Button/examples/Button.css +6 -2
  231. package/docs/components/Button/examples/Button.md +1425 -87
  232. package/docs/components/Card/examples/Card.md +565 -148
  233. package/docs/components/Check/examples/Check.md +71 -58
  234. package/docs/components/Chip/examples/Chip.md +1 -1
  235. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  236. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  237. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  238. package/docs/components/Content/examples/Content.md +5 -5
  239. package/docs/components/Divider/examples/Divider.css +3 -1
  240. package/docs/components/Divider/examples/Divider.md +4 -5
  241. package/docs/components/DragDrop/examples/DragDrop.css +3 -3
  242. package/docs/components/Drawer/examples/Drawer.md +294 -256
  243. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  244. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  245. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  246. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  247. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  248. package/docs/components/Form/examples/Form.md +134 -89
  249. package/docs/components/Icon/examples/Icon.md +82 -11
  250. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  251. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  252. package/docs/components/Label/examples/Label.css +4 -0
  253. package/docs/components/Label/examples/Label.md +3091 -704
  254. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  255. package/docs/components/LogViewer/examples/LogViewer.md +300 -210
  256. package/docs/components/Login/examples/Login.md +10 -5
  257. package/docs/components/Masthead/examples/masthead.md +443 -65
  258. package/docs/components/Menu/examples/Menu.css +8 -0
  259. package/docs/components/Menu/examples/Menu.md +594 -543
  260. package/docs/components/MenuToggle/examples/MenuToggle.md +109 -96
  261. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  262. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  263. package/docs/components/Nav/examples/Navigation.css +3 -42
  264. package/docs/components/Nav/examples/Navigation.md +305 -353
  265. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  266. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  267. package/docs/components/Page/examples/Page.css +0 -8
  268. package/docs/components/Page/examples/Page.md +22 -21
  269. package/docs/components/Pagination/examples/Pagination.md +663 -637
  270. package/docs/components/Panel/examples/Panel.md +12 -0
  271. package/docs/components/Popover/examples/Popover.css +4 -9
  272. package/docs/components/Popover/examples/Popover.md +1 -1
  273. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  274. package/docs/components/Radio/examples/Radio.md +62 -54
  275. package/docs/components/Select/deprecated/Select.md +184 -177
  276. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  277. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  278. package/docs/components/TabContent/examples/TabContent.md +10 -10
  279. package/docs/components/Table/examples/Table.css +2 -2
  280. package/docs/components/Table/examples/Table.md +10 -10
  281. package/docs/components/Tabs/examples/Tabs.css +1 -1
  282. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  283. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  284. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  285. package/docs/components/Tile/examples/Tile.css +1 -1
  286. package/docs/components/Tile/examples/Tile.md +264 -144
  287. package/docs/components/Title/examples/Title.md +18 -0
  288. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  289. package/docs/components/Toolbar/examples/Toolbar.md +1211 -3487
  290. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  291. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  292. package/docs/components/Truncate/examples/Truncate.css +2 -2
  293. package/docs/components/Truncate/examples/Truncate.md +2 -2
  294. package/docs/demos/AboutModal/examples/AboutModal.md +104 -31
  295. package/docs/demos/Alert/examples/Alert.md +330 -87
  296. package/docs/demos/BackToTop/examples/BackToTop.md +102 -29
  297. package/docs/demos/Banner/examples/Banner.md +211 -60
  298. package/docs/demos/Card/examples/Card.css +3 -3
  299. package/docs/demos/Card/examples/Card.md +28 -12
  300. package/docs/demos/CardView/examples/CardView.md +265 -207
  301. package/docs/demos/ContextSelector/examples/ContextSelector.md +377 -94
  302. package/docs/demos/Dashboard/examples/Dashboard.md +105 -32
  303. package/docs/demos/DataList/examples/DataList.md +1002 -935
  304. package/docs/demos/DescriptionList/examples/DescriptionList.md +306 -87
  305. package/docs/demos/Drawer/examples/Drawer.md +640 -251
  306. package/docs/demos/Form/examples/BasicForms.md +138 -84
  307. package/docs/demos/JumpLinks/examples/JumpLinks.md +917 -385
  308. package/docs/demos/Masthead/examples/Masthead.md +786 -342
  309. package/docs/demos/Modal/examples/Modal.md +645 -198
  310. package/docs/demos/Nav/examples/Nav.md +691 -902
  311. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +515 -145
  312. package/docs/demos/Page/examples/Page.md +942 -273
  313. package/docs/demos/Page/examples/Penta.md +66 -26
  314. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
  315. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  316. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1333 -946
  317. package/docs/demos/Skeleton/examples/Skeleton.md +109 -64
  318. package/docs/demos/Table/examples/Table.md +3857 -3418
  319. package/docs/demos/Tabs/examples/Tabs.md +664 -215
  320. package/docs/demos/Toolbar/examples/Toolbar.css +15 -0
  321. package/docs/demos/Toolbar/examples/Toolbar.md +1313 -1475
  322. package/docs/demos/Wizard/examples/Wizard.md +918 -261
  323. package/docs/layouts/Flex/examples/Flex.md +16 -16
  324. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  325. package/icons/pficons.mjs +1 -0
  326. package/layouts/Flex/flex.css +115 -43
  327. package/layouts/Flex/flex.scss +20 -8
  328. package/package.json +36 -32
  329. package/patternfly-addons.css +732 -972
  330. package/patternfly-base-no-globals-theme-dark-unversioned.css +895 -847
  331. package/patternfly-base-no-globals.css +895 -847
  332. package/patternfly-base-theme-dark-unversioned.css +899 -850
  333. package/patternfly-base.css +899 -850
  334. package/patternfly-no-globals.css +9935 -8997
  335. package/patternfly-theme-dark-unversioned.css +9940 -9001
  336. package/patternfly.css +9940 -9001
  337. package/patternfly.min.css +1 -1
  338. package/patternfly.min.css.map +1 -1
  339. package/sass-utilities/functions.scss +6 -0
  340. package/sass-utilities/mixins.scss +80 -2
  341. package/sass-utilities/scss-variables.scss +8 -8
  342. package/sass-utilities/themes/dark/mixins.scss +3 -1
  343. package/utilities/Accessibility/accessibility.css +12 -12
  344. package/utilities/Spacing/spacing.css +720 -960
  345. package/utilities/Spacing/spacing.scss +4 -8
  346. package/base/themes/dark/_variables.scss +0 -102
  347. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  348. package/components/Accordion/themes/dark/accordion.scss +0 -9
  349. package/components/Alert/themes/dark/alert.scss +0 -17
  350. package/components/Badge/themes/dark/badge.scss +0 -9
  351. package/components/Banner/themes/dark/banner.scss +0 -14
  352. package/components/Button/themes/dark/button.scss +0 -51
  353. package/components/Card/themes/dark/card.scss +0 -20
  354. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  355. package/components/DataList/themes/dark/data-list.scss +0 -10
  356. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  357. package/components/Drawer/themes/dark/drawer.scss +0 -13
  358. package/components/Form/themes/dark/form.scss +0 -7
  359. package/components/FormControl/themes/dark/form-control.scss +0 -24
  360. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  361. package/components/Hint/themes/dark/hint.scss +0 -8
  362. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  363. package/components/Label/themes/dark/label.scss +0 -53
  364. package/components/Login/themes/dark/login.scss +0 -12
  365. package/components/Masthead/themes/dark/masthead.scss +0 -14
  366. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  367. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  368. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  369. package/components/Page/themes/dark/page.scss +0 -69
  370. package/components/Pagination/themes/dark/pagination.scss +0 -7
  371. package/components/Panel/themes/dark/panel.scss +0 -7
  372. package/components/Popover/themes/dark/popover.scss +0 -11
  373. package/components/Progress/themes/dark/progress.scss +0 -9
  374. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  375. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  376. package/components/Switch/themes/dark/switch.scss +0 -11
  377. package/components/Tabs/themes/dark/tabs.scss +0 -10
  378. package/components/Tile/themes/dark/tile.scss +0 -10
  379. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  380. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  381. package/docs/components/Avatar/examples/Avatar.css +0 -3
  382. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
package/docs/components/Drawer/examples/Drawer.md CHANGED
@@ -17,22 +17,24 @@ cssPrefix: pf-v5-c-drawer
17
17
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
18
18
  </div>
19
19
  <div class="pf-v5-c-drawer__panel" hidden>
20
- <div class="pf-v5-c-drawer__body">
21
- <div class="pf-v5-c-drawer__head">
22
- <span>drawer-panel</span>
23
- <div class="pf-v5-c-drawer__actions">
24
- <div class="pf-v5-c-drawer__close">
25
- <button
26
- class="pf-v5-c-button pf-m-plain"
27
- type="button"
28
- aria-label="Close drawer panel"
29
- >
30
- <i class="fas fa-times" aria-hidden="true"></i>
31
- </button>
32
- </div>
20
+ <div class="pf-v5-c-drawer__head">
21
+ <span>Drawer panel header content</span>
22
+ <div class="pf-v5-c-drawer__actions">
23
+ <div class="pf-v5-c-drawer__close">
24
+ <button
25
+ class="pf-v5-c-button pf-m-plain"
26
+ type="button"
27
+ aria-label="Close drawer panel"
28
+ >
29
+ <i class="fas fa-times" aria-hidden="true"></i>
30
+ </button>
33
31
  </div>
34
32
  </div>
35
33
  </div>
34
+ <div
35
+ class="pf-v5-c-drawer__description"
36
+ >This is a helpful description of the drawer panel.</div>
37
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
36
38
  </div>
37
39
  </div>
38
40
  </div>
@@ -50,22 +52,24 @@ cssPrefix: pf-v5-c-drawer
50
52
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
51
53
  </div>
52
54
  <div class="pf-v5-c-drawer__panel">
53
- <div class="pf-v5-c-drawer__body">
54
- <div class="pf-v5-c-drawer__head">
55
- <span>drawer-panel</span>
56
- <div class="pf-v5-c-drawer__actions">
57
- <div class="pf-v5-c-drawer__close">
58
- <button
59
- class="pf-v5-c-button pf-m-plain"
60
- type="button"
61
- aria-label="Close drawer panel"
62
- >
63
- <i class="fas fa-times" aria-hidden="true"></i>
64
- </button>
65
- </div>
55
+ <div class="pf-v5-c-drawer__head">
56
+ <span>Drawer panel header content</span>
57
+ <div class="pf-v5-c-drawer__actions">
58
+ <div class="pf-v5-c-drawer__close">
59
+ <button
60
+ class="pf-v5-c-button pf-m-plain"
61
+ type="button"
62
+ aria-label="Close drawer panel"
63
+ >
64
+ <i class="fas fa-times" aria-hidden="true"></i>
65
+ </button>
66
66
  </div>
67
67
  </div>
68
68
  </div>
69
+ <div
70
+ class="pf-v5-c-drawer__description"
71
+ >This is a helpful description of the drawer panel.</div>
72
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
69
73
  </div>
70
74
  </div>
71
75
  </div>
@@ -83,22 +87,24 @@ cssPrefix: pf-v5-c-drawer
83
87
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
84
88
  </div>
85
89
  <div class="pf-v5-c-drawer__panel" hidden>
86
- <div class="pf-v5-c-drawer__body">
87
- <div class="pf-v5-c-drawer__head">
88
- <span>drawer-panel</span>
89
- <div class="pf-v5-c-drawer__actions">
90
- <div class="pf-v5-c-drawer__close">
91
- <button
92
- class="pf-v5-c-button pf-m-plain"
93
- type="button"
94
- aria-label="Close drawer panel"
95
- >
96
- <i class="fas fa-times" aria-hidden="true"></i>
97
- </button>
98
- </div>
90
+ <div class="pf-v5-c-drawer__head">
91
+ <span>Drawer panel header content</span>
92
+ <div class="pf-v5-c-drawer__actions">
93
+ <div class="pf-v5-c-drawer__close">
94
+ <button
95
+ class="pf-v5-c-button pf-m-plain"
96
+ type="button"
97
+ aria-label="Close drawer panel"
98
+ >
99
+ <i class="fas fa-times" aria-hidden="true"></i>
100
+ </button>
99
101
  </div>
100
102
  </div>
101
103
  </div>
104
+ <div
105
+ class="pf-v5-c-drawer__description"
106
+ >This is a helpful description of the drawer panel.</div>
107
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
102
108
  </div>
103
109
  </div>
104
110
  </div>
@@ -116,22 +122,24 @@ cssPrefix: pf-v5-c-drawer
116
122
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
117
123
  </div>
118
124
  <div class="pf-v5-c-drawer__panel">
119
- <div class="pf-v5-c-drawer__body">
120
- <div class="pf-v5-c-drawer__head">
121
- <span>drawer-panel</span>
122
- <div class="pf-v5-c-drawer__actions">
123
- <div class="pf-v5-c-drawer__close">
124
- <button
125
- class="pf-v5-c-button pf-m-plain"
126
- type="button"
127
- aria-label="Close drawer panel"
128
- >
129
- <i class="fas fa-times" aria-hidden="true"></i>
130
- </button>
131
- </div>
125
+ <div class="pf-v5-c-drawer__head">
126
+ <span>Drawer panel header content</span>
127
+ <div class="pf-v5-c-drawer__actions">
128
+ <div class="pf-v5-c-drawer__close">
129
+ <button
130
+ class="pf-v5-c-button pf-m-plain"
131
+ type="button"
132
+ aria-label="Close drawer panel"
133
+ >
134
+ <i class="fas fa-times" aria-hidden="true"></i>
135
+ </button>
132
136
  </div>
133
137
  </div>
134
138
  </div>
139
+ <div
140
+ class="pf-v5-c-drawer__description"
141
+ >This is a helpful description of the drawer panel.</div>
142
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
135
143
  </div>
136
144
  </div>
137
145
  </div>
@@ -151,22 +159,24 @@ cssPrefix: pf-v5-c-drawer
151
159
  </div>
152
160
  </div>
153
161
  <div class="pf-v5-c-drawer__panel" hidden>
154
- <div class="pf-v5-c-drawer__body">
155
- <div class="pf-v5-c-drawer__head">
156
- <span>drawer-panel</span>
157
- <div class="pf-v5-c-drawer__actions">
158
- <div class="pf-v5-c-drawer__close">
159
- <button
160
- class="pf-v5-c-button pf-m-plain"
161
- type="button"
162
- aria-label="Close drawer panel"
163
- >
164
- <i class="fas fa-times" aria-hidden="true"></i>
165
- </button>
166
- </div>
162
+ <div class="pf-v5-c-drawer__head">
163
+ <span>Drawer panel header content</span>
164
+ <div class="pf-v5-c-drawer__actions">
165
+ <div class="pf-v5-c-drawer__close">
166
+ <button
167
+ class="pf-v5-c-button pf-m-plain"
168
+ type="button"
169
+ aria-label="Close drawer panel"
170
+ >
171
+ <i class="fas fa-times" aria-hidden="true"></i>
172
+ </button>
167
173
  </div>
168
174
  </div>
169
175
  </div>
176
+ <div
177
+ class="pf-v5-c-drawer__description"
178
+ >This is a helpful description of the drawer panel.</div>
179
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
170
180
  </div>
171
181
  </div>
172
182
  </div>
@@ -187,22 +197,24 @@ cssPrefix: pf-v5-c-drawer
187
197
  </div>
188
198
 
189
199
  <div class="pf-v5-c-drawer__panel">
190
- <div class="pf-v5-c-drawer__body">
191
- <div class="pf-v5-c-drawer__head">
192
- <span>drawer-panel</span>
193
- <div class="pf-v5-c-drawer__actions">
194
- <div class="pf-v5-c-drawer__close">
195
- <button
196
- class="pf-v5-c-button pf-m-plain"
197
- type="button"
198
- aria-label="Close drawer panel"
199
- >
200
- <i class="fas fa-times" aria-hidden="true"></i>
201
- </button>
202
- </div>
200
+ <div class="pf-v5-c-drawer__head">
201
+ <span>Drawer panel header content</span>
202
+ <div class="pf-v5-c-drawer__actions">
203
+ <div class="pf-v5-c-drawer__close">
204
+ <button
205
+ class="pf-v5-c-button pf-m-plain"
206
+ type="button"
207
+ aria-label="Close drawer panel"
208
+ >
209
+ <i class="fas fa-times" aria-hidden="true"></i>
210
+ </button>
203
211
  </div>
204
212
  </div>
205
213
  </div>
214
+ <div
215
+ class="pf-v5-c-drawer__description"
216
+ >This is a helpful description of the drawer panel.</div>
217
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
206
218
  </div>
207
219
  </div>
208
220
  </div>
@@ -220,22 +232,24 @@ cssPrefix: pf-v5-c-drawer
220
232
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
221
233
  </div>
222
234
  <div class="pf-v5-c-drawer__panel">
223
- <div class="pf-v5-c-drawer__body">
224
- <div class="pf-v5-c-drawer__head">
225
- <span>drawer-panel</span>
226
- <div class="pf-v5-c-drawer__actions">
227
- <div class="pf-v5-c-drawer__close">
228
- <button
229
- class="pf-v5-c-button pf-m-plain"
230
- type="button"
231
- aria-label="Close drawer panel"
232
- >
233
- <i class="fas fa-times" aria-hidden="true"></i>
234
- </button>
235
- </div>
235
+ <div class="pf-v5-c-drawer__head">
236
+ <span>Drawer panel header content</span>
237
+ <div class="pf-v5-c-drawer__actions">
238
+ <div class="pf-v5-c-drawer__close">
239
+ <button
240
+ class="pf-v5-c-button pf-m-plain"
241
+ type="button"
242
+ aria-label="Close drawer panel"
243
+ >
244
+ <i class="fas fa-times" aria-hidden="true"></i>
245
+ </button>
236
246
  </div>
237
247
  </div>
238
248
  </div>
249
+ <div
250
+ class="pf-v5-c-drawer__description"
251
+ >This is a helpful description of the drawer panel.</div>
252
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
239
253
  </div>
240
254
  </div>
241
255
  </div>
@@ -253,22 +267,24 @@ cssPrefix: pf-v5-c-drawer
253
267
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
254
268
  </div>
255
269
  <div class="pf-v5-c-drawer__panel">
256
- <div class="pf-v5-c-drawer__body">
257
- <div class="pf-v5-c-drawer__head">
258
- <span>drawer-panel</span>
259
- <div class="pf-v5-c-drawer__actions">
260
- <div class="pf-v5-c-drawer__close">
261
- <button
262
- class="pf-v5-c-button pf-m-plain"
263
- type="button"
264
- aria-label="Close drawer panel"
265
- >
266
- <i class="fas fa-times" aria-hidden="true"></i>
267
- </button>
268
- </div>
270
+ <div class="pf-v5-c-drawer__head">
271
+ <span>Drawer panel header content</span>
272
+ <div class="pf-v5-c-drawer__actions">
273
+ <div class="pf-v5-c-drawer__close">
274
+ <button
275
+ class="pf-v5-c-button pf-m-plain"
276
+ type="button"
277
+ aria-label="Close drawer panel"
278
+ >
279
+ <i class="fas fa-times" aria-hidden="true"></i>
280
+ </button>
269
281
  </div>
270
282
  </div>
271
283
  </div>
284
+ <div
285
+ class="pf-v5-c-drawer__description"
286
+ >This is a helpful description of the drawer panel.</div>
287
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
272
288
  </div>
273
289
  </div>
274
290
  </div>
@@ -286,22 +302,24 @@ cssPrefix: pf-v5-c-drawer
286
302
  >Static drawers don't have interactive elements. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
287
303
  </div>
288
304
  <div class="pf-v5-c-drawer__panel">
289
- <div class="pf-v5-c-drawer__body">
290
- <div class="pf-v5-c-drawer__head">
291
- <span>drawer-panel</span>
292
- <div class="pf-v5-c-drawer__actions">
293
- <div class="pf-v5-c-drawer__close">
294
- <button
295
- class="pf-v5-c-button pf-m-plain"
296
- type="button"
297
- aria-label="Close drawer panel"
298
- >
299
- <i class="fas fa-times" aria-hidden="true"></i>
300
- </button>
301
- </div>
305
+ <div class="pf-v5-c-drawer__head">
306
+ <span>Drawer panel header content</span>
307
+ <div class="pf-v5-c-drawer__actions">
308
+ <div class="pf-v5-c-drawer__close">
309
+ <button
310
+ class="pf-v5-c-button pf-m-plain"
311
+ type="button"
312
+ aria-label="Close drawer panel"
313
+ >
314
+ <i class="fas fa-times" aria-hidden="true"></i>
315
+ </button>
302
316
  </div>
303
317
  </div>
304
318
  </div>
319
+ <div
320
+ class="pf-v5-c-drawer__description"
321
+ >This is a helpful description of the drawer panel.</div>
322
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
305
323
  </div>
306
324
  </div>
307
325
  </div>
@@ -320,32 +338,32 @@ cssPrefix: pf-v5-c-drawer
320
338
  </div>
321
339
 
322
340
  <div class="pf-v5-c-drawer__panel">
323
- <div class="pf-v5-c-drawer__body">
324
- <div class="pf-v5-c-drawer__head">
325
- <div class="pf-v5-c-drawer__actions">
326
- <div class="pf-v5-c-drawer__close">
327
- <button
328
- class="pf-v5-c-button pf-m-plain"
329
- type="button"
330
- aria-label="Close drawer panel"
331
- >
332
- <i class="fas fa-times" aria-hidden="true"></i>
333
- </button>
334
- </div>
335
- </div>drawer-panel
341
+ <div class="pf-v5-c-drawer__head">
342
+ <span>Drawer panel header content</span>
343
+ <div class="pf-v5-c-drawer__actions">
344
+ <div class="pf-v5-c-drawer__close">
345
+ <button
346
+ class="pf-v5-c-button pf-m-plain"
347
+ type="button"
348
+ aria-label="Close drawer panel"
349
+ >
350
+ <i class="fas fa-times" aria-hidden="true"></i>
351
+ </button>
352
+ </div>
336
353
  </div>
337
354
  </div>
355
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
338
356
  <div
339
357
  class="pf-v5-c-drawer__body pf-m-no-padding"
340
- >drawer-panel with no padding</div>
341
- <div class="pf-v5-c-drawer__body">drawer-panel</div>
358
+ >Drawer panel body content with no padding</div>
359
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
342
360
  </div>
343
361
  </div>
344
362
  </div>
345
363
 
346
364
  ```
347
365
 
348
- ### Modified content padding
366
+ ### Modified content body padding
349
367
 
350
368
  ```html
351
369
  <div class="pf-v5-c-drawer pf-m-expanded">
@@ -356,29 +374,31 @@ cssPrefix: pf-v5-c-drawer
356
374
  </div>
357
375
  </div>
358
376
  <div class="pf-v5-c-drawer__panel">
359
- <div class="pf-v5-c-drawer__body">
360
- <div class="pf-v5-c-drawer__head">
361
- <span>drawer-panel</span>
362
- <div class="pf-v5-c-drawer__actions">
363
- <div class="pf-v5-c-drawer__close">
364
- <button
365
- class="pf-v5-c-button pf-m-plain"
366
- type="button"
367
- aria-label="Close drawer panel"
368
- >
369
- <i class="fas fa-times" aria-hidden="true"></i>
370
- </button>
371
- </div>
377
+ <div class="pf-v5-c-drawer__head">
378
+ <span>Drawer panel header content</span>
379
+ <div class="pf-v5-c-drawer__actions">
380
+ <div class="pf-v5-c-drawer__close">
381
+ <button
382
+ class="pf-v5-c-button pf-m-plain"
383
+ type="button"
384
+ aria-label="Close drawer panel"
385
+ >
386
+ <i class="fas fa-times" aria-hidden="true"></i>
387
+ </button>
372
388
  </div>
373
389
  </div>
374
390
  </div>
391
+ <div
392
+ class="pf-v5-c-drawer__description"
393
+ >This is a helpful description of the drawer panel.</div>
394
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
375
395
  </div>
376
396
  </div>
377
397
  </div>
378
398
 
379
399
  ```
380
400
 
381
- ### Modified panel padding
401
+ ### Modified panel body padding
382
402
 
383
403
  ```html
384
404
  <div class="pf-v5-c-drawer pf-m-expanded">
@@ -389,22 +409,25 @@ cssPrefix: pf-v5-c-drawer
389
409
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
390
410
  </div>
391
411
  <div class="pf-v5-c-drawer__panel">
392
- <div class="pf-v5-c-drawer__body">
393
- <div class="pf-v5-c-drawer__head">
394
- <span>drawer-panel</span>
395
- <div class="pf-v5-c-drawer__actions">
396
- <div class="pf-v5-c-drawer__close">
397
- <button
398
- class="pf-v5-c-button pf-m-plain"
399
- type="button"
400
- aria-label="Close drawer panel"
401
- >
402
- <i class="fas fa-times" aria-hidden="true"></i>
403
- </button>
404
- </div>
412
+ <div class="pf-v5-c-drawer__head">
413
+ <span>Drawer panel header content</span>
414
+ <div class="pf-v5-c-drawer__actions">
415
+ <div class="pf-v5-c-drawer__close">
416
+ <button
417
+ class="pf-v5-c-button pf-m-plain"
418
+ type="button"
419
+ aria-label="Close drawer panel"
420
+ >
421
+ <i class="fas fa-times" aria-hidden="true"></i>
422
+ </button>
405
423
  </div>
406
424
  </div>
407
425
  </div>
426
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
427
+ <div
428
+ class="pf-v5-c-drawer__body pf-m-paddinng"
429
+ style="--pf-v5-c-drawer__panel__body--PaddingLeft: 48px;"
430
+ >Drawer panel body content with modified inline start padding</div>
408
431
  </div>
409
432
  </div>
410
433
  </div>
@@ -424,22 +447,24 @@ cssPrefix: pf-v5-c-drawer
424
447
  <div
425
448
  class="pf-v5-c-drawer__panel pf-m-width-75 pf-m-width-33-on-lg pf-m-width-25-on-2xl"
426
449
  >
427
- <div class="pf-v5-c-drawer__body">
428
- <div class="pf-v5-c-drawer__head">
429
- <span>drawer-panel</span>
430
- <div class="pf-v5-c-drawer__actions">
431
- <div class="pf-v5-c-drawer__close">
432
- <button
433
- class="pf-v5-c-button pf-m-plain"
434
- type="button"
435
- aria-label="Close drawer panel"
436
- >
437
- <i class="fas fa-times" aria-hidden="true"></i>
438
- </button>
439
- </div>
450
+ <div class="pf-v5-c-drawer__head">
451
+ <span>Drawer panel header content</span>
452
+ <div class="pf-v5-c-drawer__actions">
453
+ <div class="pf-v5-c-drawer__close">
454
+ <button
455
+ class="pf-v5-c-button pf-m-plain"
456
+ type="button"
457
+ aria-label="Close drawer panel"
458
+ >
459
+ <i class="fas fa-times" aria-hidden="true"></i>
460
+ </button>
440
461
  </div>
441
462
  </div>
442
463
  </div>
464
+ <div
465
+ class="pf-v5-c-drawer__description"
466
+ >This is a helpful description of the drawer panel.</div>
467
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
443
468
  </div>
444
469
  </div>
445
470
  </div>
@@ -458,22 +483,24 @@ cssPrefix: pf-v5-c-drawer
458
483
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
459
484
  </div>
460
485
  <div class="pf-v5-c-drawer__panel">
461
- <div class="pf-v5-c-drawer__body">
462
- <div class="pf-v5-c-drawer__head">
463
- <span>drawer-panel</span>
464
- <div class="pf-v5-c-drawer__actions">
465
- <div class="pf-v5-c-drawer__close">
466
- <button
467
- class="pf-v5-c-button pf-m-plain"
468
- type="button"
469
- aria-label="Close drawer panel"
470
- >
471
- <i class="fas fa-times" aria-hidden="true"></i>
472
- </button>
473
- </div>
486
+ <div class="pf-v5-c-drawer__head">
487
+ <span>Drawer panel header content</span>
488
+ <div class="pf-v5-c-drawer__actions">
489
+ <div class="pf-v5-c-drawer__close">
490
+ <button
491
+ class="pf-v5-c-button pf-m-plain"
492
+ type="button"
493
+ aria-label="Close drawer panel"
494
+ >
495
+ <i class="fas fa-times" aria-hidden="true"></i>
496
+ </button>
474
497
  </div>
475
498
  </div>
476
499
  </div>
500
+ <div
501
+ class="pf-v5-c-drawer__description"
502
+ >This is a helpful description of the drawer panel.</div>
503
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
477
504
  </div>
478
505
  </div>
479
506
  </div>
@@ -500,22 +527,24 @@ cssPrefix: pf-v5-c-drawer
500
527
  <div class="pf-v5-c-drawer__splitter-handle"></div>
501
528
  </div>
502
529
  <div class="pf-v5-c-drawer__panel-main">
503
- <div class="pf-v5-c-drawer__body">
504
- <div class="pf-v5-c-drawer__head">
505
- <span>drawer-panel</span>
506
- <div class="pf-v5-c-drawer__actions">
507
- <div class="pf-v5-c-drawer__close">
508
- <button
509
- class="pf-v5-c-button pf-m-plain"
510
- type="button"
511
- aria-label="Close drawer panel"
512
- >
513
- <i class="fas fa-times" aria-hidden="true"></i>
514
- </button>
515
- </div>
530
+ <div class="pf-v5-c-drawer__head">
531
+ <span>Drawer panel header content</span>
532
+ <div class="pf-v5-c-drawer__actions">
533
+ <div class="pf-v5-c-drawer__close">
534
+ <button
535
+ class="pf-v5-c-button pf-m-plain"
536
+ type="button"
537
+ aria-label="Close drawer panel"
538
+ >
539
+ <i class="fas fa-times" aria-hidden="true"></i>
540
+ </button>
516
541
  </div>
517
542
  </div>
518
543
  </div>
544
+ <div
545
+ class="pf-v5-c-drawer__description"
546
+ >This is a helpful description of the drawer panel.</div>
547
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
519
548
  </div>
520
549
  </div>
521
550
  </div>
@@ -543,22 +572,24 @@ cssPrefix: pf-v5-c-drawer
543
572
  <div class="pf-v5-c-drawer__splitter-handle"></div>
544
573
  </div>
545
574
  <div class="pf-v5-c-drawer__panel-main">
546
- <div class="pf-v5-c-drawer__body">
547
- <div class="pf-v5-c-drawer__head">
548
- <span>drawer-panel</span>
549
- <div class="pf-v5-c-drawer__actions">
550
- <div class="pf-v5-c-drawer__close">
551
- <button
552
- class="pf-v5-c-button pf-m-plain"
553
- type="button"
554
- aria-label="Close drawer panel"
555
- >
556
- <i class="fas fa-times" aria-hidden="true"></i>
557
- </button>
558
- </div>
575
+ <div class="pf-v5-c-drawer__head">
576
+ <span>Drawer panel header content</span>
577
+ <div class="pf-v5-c-drawer__actions">
578
+ <div class="pf-v5-c-drawer__close">
579
+ <button
580
+ class="pf-v5-c-button pf-m-plain"
581
+ type="button"
582
+ aria-label="Close drawer panel"
583
+ >
584
+ <i class="fas fa-times" aria-hidden="true"></i>
585
+ </button>
559
586
  </div>
560
587
  </div>
561
588
  </div>
589
+ <div
590
+ class="pf-v5-c-drawer__description"
591
+ >This is a helpful description of the drawer panel.</div>
592
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
562
593
  </div>
563
594
  </div>
564
595
  </div>
@@ -589,22 +620,24 @@ cssPrefix: pf-v5-c-drawer
589
620
  <div class="pf-v5-c-drawer__splitter-handle"></div>
590
621
  </div>
591
622
  <div class="pf-v5-c-drawer__panel-main">
592
- <div class="pf-v5-c-drawer__body">
593
- <div class="pf-v5-c-drawer__head">
594
- <span>drawer-panel</span>
595
- <div class="pf-v5-c-drawer__actions">
596
- <div class="pf-v5-c-drawer__close">
597
- <button
598
- class="pf-v5-c-button pf-m-plain"
599
- type="button"
600
- aria-label="Close drawer panel"
601
- >
602
- <i class="fas fa-times" aria-hidden="true"></i>
603
- </button>
604
- </div>
623
+ <div class="pf-v5-c-drawer__head">
624
+ <span>Drawer panel header content</span>
625
+ <div class="pf-v5-c-drawer__actions">
626
+ <div class="pf-v5-c-drawer__close">
627
+ <button
628
+ class="pf-v5-c-button pf-m-plain"
629
+ type="button"
630
+ aria-label="Close drawer panel"
631
+ >
632
+ <i class="fas fa-times" aria-hidden="true"></i>
633
+ </button>
605
634
  </div>
606
635
  </div>
607
636
  </div>
637
+ <div
638
+ class="pf-v5-c-drawer__description"
639
+ >This is a helpful description of the drawer panel.</div>
640
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
608
641
  </div>
609
642
  </div>
610
643
  </div>
@@ -632,22 +665,24 @@ cssPrefix: pf-v5-c-drawer
632
665
  <div class="pf-v5-c-drawer__splitter-handle"></div>
633
666
  </div>
634
667
  <div class="pf-v5-c-drawer__panel-main">
635
- <div class="pf-v5-c-drawer__body">
636
- <div class="pf-v5-c-drawer__head">
637
- <span>drawer-panel</span>
638
- <div class="pf-v5-c-drawer__actions">
639
- <div class="pf-v5-c-drawer__close">
640
- <button
641
- class="pf-v5-c-button pf-m-plain"
642
- type="button"
643
- aria-label="Close drawer panel"
644
- >
645
- <i class="fas fa-times" aria-hidden="true"></i>
646
- </button>
647
- </div>
668
+ <div class="pf-v5-c-drawer__head">
669
+ <span>Drawer panel header content</span>
670
+ <div class="pf-v5-c-drawer__actions">
671
+ <div class="pf-v5-c-drawer__close">
672
+ <button
673
+ class="pf-v5-c-button pf-m-plain"
674
+ type="button"
675
+ aria-label="Close drawer panel"
676
+ >
677
+ <i class="fas fa-times" aria-hidden="true"></i>
678
+ </button>
648
679
  </div>
649
680
  </div>
650
681
  </div>
682
+ <div
683
+ class="pf-v5-c-drawer__description"
684
+ >This is a helpful description of the drawer panel.</div>
685
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
651
686
  </div>
652
687
  </div>
653
688
  </div>
@@ -665,23 +700,25 @@ cssPrefix: pf-v5-c-drawer
665
700
  class="pf-v5-c-drawer__body"
666
701
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
667
702
  </div>
668
- <div class="pf-v5-c-drawer__panel pf-m-light-200">
669
- <div class="pf-v5-c-drawer__body">
670
- <div class="pf-v5-c-drawer__head">
671
- <span>drawer-panel</span>
672
- <div class="pf-v5-c-drawer__actions">
673
- <div class="pf-v5-c-drawer__close">
674
- <button
675
- class="pf-v5-c-button pf-m-plain"
676
- type="button"
677
- aria-label="Close drawer panel"
678
- >
679
- <i class="fas fa-times" aria-hidden="true"></i>
680
- </button>
681
- </div>
703
+ <div class="pf-v5-c-drawer__panel pf-m-secondary">
704
+ <div class="pf-v5-c-drawer__head">
705
+ <span>Drawer panel header content</span>
706
+ <div class="pf-v5-c-drawer__actions">
707
+ <div class="pf-v5-c-drawer__close">
708
+ <button
709
+ class="pf-v5-c-button pf-m-plain"
710
+ type="button"
711
+ aria-label="Close drawer panel"
712
+ >
713
+ <i class="fas fa-times" aria-hidden="true"></i>
714
+ </button>
682
715
  </div>
683
716
  </div>
684
717
  </div>
718
+ <div
719
+ class="pf-v5-c-drawer__description"
720
+ >This is a helpful description of the drawer panel.</div>
721
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
685
722
  </div>
686
723
  </div>
687
724
  </div>
@@ -727,8 +764,9 @@ cssPrefix: pf-v5-c-drawer
727
764
  | `.pf-v5-c-drawer__panel-main` | `<div>` | Initiates the drawer panel main container for resizable drawers only. |
728
765
  | `.pf-v5-c-drawer__body` | `<div>` | Initiates a drawer body container and is the child of `.pf-v5-c-drawer__content`, `.pf-v5-c-drawer__panel` and `.pf-v5-c-drawer__panel-main`. **Required** |
729
766
  | `.pf-v5-c-drawer__head` | `<div>` | Initiates a drawer head container. This container positions `.pf-v5-c-drawer__actions`, if present. |
730
- | `.pf-v5-c-drawer__actions` | `<div>` | Identifies the drawer close button. |
731
- | `.pf-v5-c-drawer__close` | `<div>` | Identifies the drawer close button. |
767
+ | `.pf-v5-c-drawer__actions` | `<div>` | Initiates an actions container within `.pf-v5--drawer__head`. |
768
+ | `.pf-v5-c-drawer__close` | `<div>` | Identifies the drawer close button within `.pf-v5-c-drawer__actions`. |
769
+ | `.pf-v5-c-drawer__description` | `<div>` | Initiates a drawer panel description. |
732
770
  | `.pf-m-panel-left` | `.pf-v5-c-drawer` | Modifies the drawer panel to expand from the left. |
733
771
  | `.pf-m-panel-bottom` | `.pf-v5-c-drawer` | Modifies the drawer panel to expand from the bottom. **Note:** percentage based panel sizes require the drawer component's parent element have an implicit or explicit height. |
734
772
  | `.pf-m-expanded` | `.pf-v5-c-drawer` | Modifies the drawer panel for the expanded state. |
@@ -737,8 +775,8 @@ cssPrefix: pf-v5-c-drawer
737
775
  | `.pf-m-no-border` | `.pf-v5-c-drawer__panel` | Modifies the drawer panel border treatment to disable all border treatment. |
738
776
  | `.pf-m-padding` | `.pf-v5-c-drawer__body` | Modifies the element to add padding. |
739
777
  | `.pf-m-no-padding` | `.pf-v5-c-drawer__body` | Modifies the element to remove padding. |
740
- | `.pf-m-no-background` | `.pf-v5-c-drawer__section`, `.pf-v5-c-drawer__content`, `.pf-v5-c-drawer__panel` | Modifies the drawer body/panel background color to transparent. |
741
- | `.pf-m-light-200` | `.pf-v5-c-drawer__section`, `.pf-v5-c-drawer__content`, `.pf-v5-c-drawer__panel` | Modifies the body/panel to use the secondary background color. |
778
+ | `.pf-m-no-background` | `.pf-v5-c-drawer__section`, `.pf-v5-c-drawer__content`, `.pf-v5-c-drawer__panel` | Modifies the drawer element background color to transparent. |
779
+ | `.pf-m-secondary` | `.pf-v5-c-drawer__section`, `.pf-v5-c-drawer__content`, `.pf-v5-c-drawer__panel` | Modifies the drawer element to use the secondary background color. |
742
780
  | `.pf-m-width-{25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-v5-c-drawer__panel` | Modifies the drawer panel width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
743
781
  | `.pf-m-resizable` | `.pf-v5-c-drawer__panel` | Modifies the drawer panel to be resizable. Intended for use with the `.pf-v5-c-drawer__splitter` element. |
744
782
  | `--pf-v5-c-drawer__panel--md--FlexBasis--min` | `.pf-v5-c-drawer__panel` | Defines the drawer panel minimum size. |