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

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 (334) 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/DualListSelector/dual-list-selector.css +56 -48
  84. package/components/DualListSelector/dual-list-selector.scss +57 -50
  85. package/components/EmptyState/empty-state.css +57 -34
  86. package/components/EmptyState/empty-state.scss +63 -34
  87. package/components/ExpandableSection/expandable-section.css +64 -62
  88. package/components/ExpandableSection/expandable-section.scss +73 -76
  89. package/components/FileUpload/file-upload.css +28 -34
  90. package/components/FileUpload/file-upload.scss +30 -42
  91. package/components/Form/form.css +68 -114
  92. package/components/Form/form.scss +65 -126
  93. package/components/FormControl/form-control.css +86 -111
  94. package/components/FormControl/form-control.scss +88 -92
  95. package/components/HelperText/helper-text.css +28 -34
  96. package/components/HelperText/helper-text.scss +30 -40
  97. package/components/Hint/hint.css +28 -21
  98. package/components/Hint/hint.scss +28 -24
  99. package/components/Icon/icon.css +154 -18
  100. package/components/Icon/icon.scss +187 -20
  101. package/components/InlineEdit/inline-edit.css +8 -7
  102. package/components/InlineEdit/inline-edit.scss +8 -7
  103. package/components/InputGroup/input-group.css +22 -38
  104. package/components/InputGroup/input-group.scss +21 -29
  105. package/components/JumpLinks/jump-links.css +34 -34
  106. package/components/JumpLinks/jump-links.scss +35 -36
  107. package/components/Label/label-group.css +39 -44
  108. package/components/Label/label-group.scss +39 -45
  109. package/components/Label/label.css +380 -355
  110. package/components/Label/label.scss +434 -348
  111. package/components/List/list.css +16 -16
  112. package/components/List/list.scss +17 -17
  113. package/components/Login/login.css +70 -97
  114. package/components/Login/login.scss +56 -64
  115. package/components/Masthead/masthead.css +261 -502
  116. package/components/Masthead/masthead.scss +123 -286
  117. package/components/Menu/menu.css +3 -0
  118. package/components/Menu/menu.scss +7 -3
  119. package/components/MenuToggle/menu-toggle.css +8 -8
  120. package/components/MenuToggle/menu-toggle.scss +8 -10
  121. package/components/ModalBox/modal-box.css +59 -52
  122. package/components/ModalBox/modal-box.scss +57 -53
  123. package/components/MultipleFileUpload/multiple-file-upload.css +77 -50
  124. package/components/MultipleFileUpload/multiple-file-upload.scss +82 -53
  125. package/components/Nav/nav.css +240 -918
  126. package/components/Nav/nav.scss +300 -1082
  127. package/components/NotificationBadge/notification-badge.css +56 -81
  128. package/components/NotificationBadge/notification-badge.scss +60 -97
  129. package/components/NotificationDrawer/notification-drawer.css +104 -115
  130. package/components/NotificationDrawer/notification-drawer.scss +106 -116
  131. package/components/NumberInput/number-input.css +8 -8
  132. package/components/NumberInput/number-input.scss +7 -12
  133. package/components/OverflowMenu/overflow-menu.css +17 -47
  134. package/components/OverflowMenu/overflow-menu.scss +27 -65
  135. package/components/Page/page.css +56 -164
  136. package/components/Page/page.scss +60 -154
  137. package/components/Pagination/pagination.css +57 -124
  138. package/components/Pagination/pagination.scss +40 -128
  139. package/components/Panel/panel.css +27 -23
  140. package/components/Panel/panel.scss +29 -26
  141. package/components/Popover/popover.css +42 -53
  142. package/components/Popover/popover.scss +46 -55
  143. package/components/Progress/progress.css +31 -45
  144. package/components/Progress/progress.scss +36 -55
  145. package/components/ProgressStepper/progress-stepper.css +72 -69
  146. package/components/ProgressStepper/progress-stepper.scss +65 -65
  147. package/components/Radio/radio.css +27 -20
  148. package/components/Radio/radio.scss +28 -22
  149. package/components/Sidebar/sidebar.css +20 -9
  150. package/components/Sidebar/sidebar.scss +23 -11
  151. package/components/SimpleList/simple-list.css +35 -52
  152. package/components/SimpleList/simple-list.scss +41 -51
  153. package/components/Skeleton/skeleton.css +18 -20
  154. package/components/Skeleton/skeleton.scss +17 -21
  155. package/components/SkipToContent/skip-to-content.css +6 -3
  156. package/components/SkipToContent/skip-to-content.scss +8 -6
  157. package/components/Slider/slider.css +34 -30
  158. package/components/Slider/slider.scss +46 -43
  159. package/components/Spinner/spinner.css +17 -34
  160. package/components/Spinner/spinner.scss +19 -47
  161. package/components/Switch/switch.css +42 -38
  162. package/components/Switch/switch.scss +48 -43
  163. package/components/TabContent/tab-content.css +17 -11
  164. package/components/TabContent/tab-content.scss +18 -14
  165. package/components/Table/table-grid.css +29 -45
  166. package/components/Table/table-grid.scss +40 -53
  167. package/components/Table/table-scrollable.css +6 -6
  168. package/components/Table/table-scrollable.scss +8 -8
  169. package/components/Table/table-tree-view.css +76 -74
  170. package/components/Table/table-tree-view.scss +44 -39
  171. package/components/Table/table.css +67 -93
  172. package/components/Table/table.scss +83 -105
  173. package/components/Tabs/tabs.css +143 -175
  174. package/components/Tabs/tabs.scss +159 -217
  175. package/components/Tile/tile.css +40 -81
  176. package/components/Tile/tile.scss +38 -84
  177. package/components/Timestamp/timestamp.css +12 -9
  178. package/components/Timestamp/timestamp.scss +11 -10
  179. package/components/Title/title.css +70 -19
  180. package/components/Title/title.scss +90 -20
  181. package/components/ToggleGroup/toggle-group.css +54 -48
  182. package/components/ToggleGroup/toggle-group.scss +62 -50
  183. package/components/Toolbar/toolbar.css +2527 -1031
  184. package/components/Toolbar/toolbar.scss +233 -520
  185. package/components/Tooltip/tooltip.css +16 -18
  186. package/components/Tooltip/tooltip.scss +20 -24
  187. package/components/TreeView/tree-view.css +76 -97
  188. package/components/TreeView/tree-view.scss +82 -113
  189. package/components/Truncate/truncate.css +4 -0
  190. package/components/Truncate/truncate.scss +3 -0
  191. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  192. package/docs/components/Accordion/examples/Accordion.md +614 -416
  193. package/docs/components/ActionList/examples/ActionList.md +73 -22
  194. package/docs/components/Alert/examples/Alert.md +3 -3
  195. package/docs/components/Avatar/examples/Avatar.md +5 -19
  196. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  197. package/docs/components/Badge/examples/Badge.md +21 -0
  198. package/docs/components/Banner/examples/Banner.md +48 -25
  199. package/docs/components/Brand/examples/Brand.css +12 -0
  200. package/docs/components/Brand/examples/Brand.md +51 -32
  201. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  202. package/docs/components/Button/examples/Button.css +4 -0
  203. package/docs/components/Button/examples/Button.md +1419 -93
  204. package/docs/components/CalendarMonth/examples/CalendarMonth.md +48 -224
  205. package/docs/components/Card/examples/Card.md +550 -133
  206. package/docs/components/Check/examples/Check.md +1 -0
  207. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  208. package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
  209. package/docs/components/Content/examples/Content.md +5 -5
  210. package/docs/components/DatePicker/examples/DatePicker.md +5 -2
  211. package/docs/components/Divider/examples/Divider.css +3 -1
  212. package/docs/components/Divider/examples/Divider.md +30 -5
  213. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  214. package/docs/components/Drawer/examples/Drawer.md +294 -256
  215. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  216. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  217. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  218. package/docs/components/Form/examples/Form.md +134 -89
  219. package/docs/components/Icon/examples/Icon.md +82 -11
  220. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  221. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  222. package/docs/components/Label/examples/Label.css +4 -0
  223. package/docs/components/Label/examples/Label.md +3090 -703
  224. package/docs/components/LogViewer/examples/LogViewer.md +180 -180
  225. package/docs/components/Login/examples/Login.md +10 -5
  226. package/docs/components/Masthead/examples/masthead.md +443 -65
  227. package/docs/components/Menu/examples/Menu.md +507 -473
  228. package/docs/components/MenuToggle/examples/MenuToggle.md +106 -114
  229. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  230. package/docs/components/Nav/examples/Navigation.css +1 -23
  231. package/docs/components/Nav/examples/Navigation.md +209 -356
  232. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  233. package/docs/components/Page/examples/Page.css +0 -8
  234. package/docs/components/Page/examples/Page.md +22 -21
  235. package/docs/components/Pagination/examples/Pagination.md +663 -637
  236. package/docs/components/Panel/examples/Panel.md +12 -0
  237. package/docs/components/Popover/examples/Popover.md +1 -1
  238. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  239. package/docs/components/Radio/examples/Radio.md +1 -1
  240. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  241. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  242. package/docs/components/TabContent/examples/TabContent.md +10 -10
  243. package/docs/components/Table/examples/Table.md +8 -8
  244. package/docs/components/Tabs/examples/Tabs.css +1 -1
  245. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  246. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  247. package/docs/components/Tile/examples/Tile.md +264 -144
  248. package/docs/components/Title/examples/Title.md +18 -0
  249. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  250. package/docs/components/Toolbar/examples/Toolbar.md +985 -3355
  251. package/docs/components/TreeView/examples/TreeView.md +7 -57
  252. package/docs/components/Truncate/examples/Truncate.css +2 -2
  253. package/docs/demos/AboutModal/examples/AboutModal.md +104 -31
  254. package/docs/demos/Alert/examples/Alert.md +330 -87
  255. package/docs/demos/BackToTop/examples/BackToTop.md +102 -29
  256. package/docs/demos/Banner/examples/Banner.md +211 -60
  257. package/docs/demos/Card/examples/Card.md +2 -2
  258. package/docs/demos/CardView/examples/CardView.md +241 -187
  259. package/docs/demos/ContextSelector/examples/ContextSelector.md +377 -94
  260. package/docs/demos/Dashboard/examples/Dashboard.md +102 -29
  261. package/docs/demos/DataList/examples/DataList.md +999 -938
  262. package/docs/demos/DescriptionList/examples/DescriptionList.md +306 -87
  263. package/docs/demos/Drawer/examples/Drawer.md +640 -251
  264. package/docs/demos/Form/examples/BasicForms.md +138 -84
  265. package/docs/demos/JumpLinks/examples/JumpLinks.md +917 -385
  266. package/docs/demos/Masthead/examples/Masthead.md +786 -342
  267. package/docs/demos/Modal/examples/Modal.md +645 -198
  268. package/docs/demos/Nav/examples/Nav.md +691 -902
  269. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +515 -145
  270. package/docs/demos/Page/examples/Page.md +942 -273
  271. package/docs/demos/Page/examples/Penta.md +66 -26
  272. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
  273. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  274. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1183 -832
  275. package/docs/demos/Skeleton/examples/Skeleton.md +102 -29
  276. package/docs/demos/Table/examples/Table.md +3811 -3456
  277. package/docs/demos/Tabs/examples/Tabs.md +636 -194
  278. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  279. package/docs/demos/Toolbar/examples/Toolbar.md +1316 -1478
  280. package/docs/demos/Wizard/examples/Wizard.md +918 -261
  281. package/docs/layouts/Flex/examples/Flex.md +11 -11
  282. package/package.json +32 -32
  283. package/patternfly-base-no-globals-theme-dark-unversioned.css +897 -880
  284. package/patternfly-base-no-globals.css +897 -880
  285. package/patternfly-base-theme-dark-unversioned.css +890 -872
  286. package/patternfly-base.css +890 -872
  287. package/patternfly-no-globals.css +8107 -8027
  288. package/patternfly-theme-dark-unversioned.css +8111 -8030
  289. package/patternfly.css +8111 -8030
  290. package/patternfly.min.css +1 -1
  291. package/patternfly.min.css.map +1 -1
  292. package/sass-utilities/mixins.scss +18 -0
  293. package/base/themes/dark/_variables.scss +0 -102
  294. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  295. package/components/Accordion/themes/dark/accordion.scss +0 -9
  296. package/components/Alert/themes/dark/alert.scss +0 -17
  297. package/components/Badge/themes/dark/badge.scss +0 -9
  298. package/components/Banner/themes/dark/banner.scss +0 -14
  299. package/components/Button/themes/dark/button.scss +0 -51
  300. package/components/CalendarMonth/themes/dark/calendar-month.scss +0 -37
  301. package/components/Card/themes/dark/card.scss +0 -20
  302. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  303. package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
  304. package/components/DataList/themes/dark/data-list.scss +0 -10
  305. package/components/DatePicker/themes/dark/date-picker.scss +0 -8
  306. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  307. package/components/Drawer/themes/dark/drawer.scss +0 -13
  308. package/components/DualListSelector/themes/dark/dual-list-selector.scss +0 -9
  309. package/components/Form/themes/dark/form.scss +0 -7
  310. package/components/FormControl/themes/dark/form-control.scss +0 -24
  311. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  312. package/components/Hint/themes/dark/hint.scss +0 -8
  313. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  314. package/components/Label/themes/dark/label.scss +0 -53
  315. package/components/Login/themes/dark/login.scss +0 -12
  316. package/components/Masthead/themes/dark/masthead.scss +0 -14
  317. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  318. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  319. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  320. package/components/Page/themes/dark/page.scss +0 -69
  321. package/components/Pagination/themes/dark/pagination.scss +0 -7
  322. package/components/Panel/themes/dark/panel.scss +0 -7
  323. package/components/Popover/themes/dark/popover.scss +0 -11
  324. package/components/Progress/themes/dark/progress.scss +0 -9
  325. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  326. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  327. package/components/Switch/themes/dark/switch.scss +0 -11
  328. package/components/Tabs/themes/dark/tabs.scss +0 -10
  329. package/components/Tile/themes/dark/tile.scss +0 -10
  330. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  331. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  332. package/components/TreeView/themes/dark/tree-view.scss +0 -8
  333. package/docs/components/Avatar/examples/Avatar.css +0 -3
  334. 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. |