@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.41

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 (342) hide show
  1. package/README.md +4 -4
  2. package/RELEASE-NOTES.md +18 -1
  3. package/assets/icons/iconUnicodes.json +1 -0
  4. package/assets/images/pfbg-icon.svg +1 -0
  5. package/assets/pficon/pficon.scss +7 -2
  6. package/assets/pficon/pficon.woff2 +0 -0
  7. package/base/_base.scss +0 -18
  8. package/base/_chart-globals.scss +0 -4
  9. package/base/_common.scss +0 -22
  10. package/base/_fa-icons.scss +1 -2
  11. package/base/_fonts.scss +22 -27
  12. package/base/_globals.scss +92 -86
  13. package/base/_icons.scss +1 -28
  14. package/base/_svg-icons.scss +6 -0
  15. package/base/_variables.scss +4 -4
  16. package/base/patternfly-common.css +0 -10
  17. package/base/patternfly-fa-icons.css +1 -1
  18. package/base/patternfly-fonts.css +17 -17
  19. package/base/patternfly-globals.css +35 -41
  20. package/base/patternfly-icons.css +8 -22
  21. package/base/patternfly-pf-icons.css +6 -2
  22. package/base/patternfly-themes.css +0 -42
  23. package/base/patternfly-variables.css +3 -3
  24. package/base/themes/dark/_globals.scss +1 -1
  25. package/base/themes/dark/_variables.scss +1 -1
  26. package/components/AboutModalBox/about-modal-box.css +20 -50
  27. package/components/AboutModalBox/about-modal-box.scss +22 -14
  28. package/components/Accordion/accordion.css +2 -0
  29. package/components/Accordion/accordion.scss +2 -0
  30. package/components/Alert/alert.css +17 -8
  31. package/components/Alert/alert.scss +21 -7
  32. package/components/Alert/themes/dark/alert.scss +1 -1
  33. package/components/AppLauncher/app-launcher.css +2 -0
  34. package/components/AppLauncher/app-launcher.scss +2 -0
  35. package/components/Avatar/avatar.scss +2 -2
  36. package/components/BackgroundImage/background-image.css +8 -35
  37. package/components/BackgroundImage/background-image.scss +17 -43
  38. package/components/Banner/banner.css +14 -52
  39. package/components/Banner/banner.scss +9 -13
  40. package/components/Breadcrumb/breadcrumb.css +2 -0
  41. package/components/Breadcrumb/breadcrumb.scss +2 -0
  42. package/components/CalendarMonth/calendar-month.css +2 -2
  43. package/components/CalendarMonth/calendar-month.scss +3 -3
  44. package/components/Card/card.css +115 -50
  45. package/components/Card/card.scss +164 -63
  46. package/components/Chip/chip.css +33 -24
  47. package/components/Chip/chip.scss +40 -31
  48. package/components/ChipGroup/chip-group.css +27 -17
  49. package/components/ChipGroup/chip-group.scss +36 -22
  50. package/components/Content/content.css +11 -5
  51. package/components/Content/content.scss +17 -9
  52. package/components/ContextSelector/context-selector.css +13 -6
  53. package/components/ContextSelector/context-selector.scss +14 -7
  54. package/components/DataList/data-list-grid.css +7 -7
  55. package/components/DataList/data-list-grid.scss +1 -1
  56. package/components/DataList/data-list.css +46 -40
  57. package/components/DataList/data-list.scss +37 -28
  58. package/components/DatePicker/date-picker.css +0 -8
  59. package/components/DatePicker/date-picker.scss +0 -9
  60. package/components/DescriptionList/description-list.css +7 -7
  61. package/components/DescriptionList/description-list.scss +7 -7
  62. package/components/Divider/divider.css +2 -2
  63. package/components/Divider/divider.scss +3 -3
  64. package/components/Drawer/drawer.css +15 -16
  65. package/components/Drawer/drawer.scss +2 -3
  66. package/components/Dropdown/dropdown.css +26 -25
  67. package/components/Dropdown/dropdown.scss +17 -18
  68. package/components/DualListSelector/dual-list-selector.css +1 -1
  69. package/components/DualListSelector/dual-list-selector.scss +1 -1
  70. package/components/EmptyState/empty-state.css +46 -52
  71. package/components/EmptyState/empty-state.scss +58 -57
  72. package/components/ExpandableSection/expandable-section.css +2 -0
  73. package/components/ExpandableSection/expandable-section.scss +2 -0
  74. package/components/Form/form.css +14 -12
  75. package/components/Form/form.scss +9 -7
  76. package/components/FormControl/form-control.css +2 -5
  77. package/components/FormControl/themes/dark/form-control.scss +2 -6
  78. package/components/HelperText/helper-text.css +4 -0
  79. package/components/HelperText/helper-text.scss +5 -0
  80. package/components/Hint/hint.css +2 -2
  81. package/components/Hint/hint.scss +2 -2
  82. package/components/Icon/icon.css +3 -3
  83. package/components/Icon/icon.scss +3 -3
  84. package/components/InputGroup/input-group.css +61 -85
  85. package/components/InputGroup/input-group.scss +55 -61
  86. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  87. package/components/Label/label.css +49 -36
  88. package/components/Label/label.scss +53 -38
  89. package/components/Label/themes/dark/label.scss +2 -2
  90. package/components/LabelGroup/label-group.css +26 -22
  91. package/components/LabelGroup/label-group.scss +31 -26
  92. package/components/LogViewer/log-viewer.css +0 -38
  93. package/components/Login/login.css +20 -60
  94. package/components/Login/login.scss +16 -18
  95. package/components/Login/themes/dark/login.scss +4 -0
  96. package/components/Masthead/masthead.css +4 -42
  97. package/components/Masthead/masthead.scss +4 -4
  98. package/components/Menu/menu.css +9 -6
  99. package/components/Menu/menu.scss +34 -31
  100. package/components/MenuToggle/menu-toggle.css +3 -1
  101. package/components/MenuToggle/menu-toggle.scss +3 -1
  102. package/components/ModalBox/modal-box.css +12 -11
  103. package/components/ModalBox/modal-box.scss +14 -14
  104. package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
  105. package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
  106. package/components/Nav/nav.css +1 -1
  107. package/components/Nav/nav.scss +2 -2
  108. package/components/NotificationDrawer/notification-drawer.css +8 -8
  109. package/components/NotificationDrawer/notification-drawer.scss +8 -8
  110. package/components/OptionsMenu/options-menu.css +8 -10
  111. package/components/OptionsMenu/options-menu.scss +9 -11
  112. package/components/Page/page.css +101 -122
  113. package/components/Page/page.scss +49 -21
  114. package/components/Pagination/pagination.css +2 -110
  115. package/components/Pagination/pagination.scss +0 -6
  116. package/components/Popover/popover.css +31 -37
  117. package/components/Popover/popover.scss +32 -37
  118. package/components/Popover/themes/dark/popover.scss +3 -9
  119. package/components/Progress/progress.css +13 -10
  120. package/components/Progress/progress.scss +13 -10
  121. package/components/ProgressStepper/progress-stepper.css +5 -5
  122. package/components/ProgressStepper/progress-stepper.scss +5 -5
  123. package/components/SearchInput/search-input.css +4 -2
  124. package/components/SearchInput/search-input.scss +4 -2
  125. package/components/Select/select.css +1 -1
  126. package/components/Select/select.scss +1 -1
  127. package/components/Sidebar/sidebar.css +69 -26
  128. package/components/Sidebar/sidebar.scss +84 -27
  129. package/components/SimpleList/simple-list.css +1 -1
  130. package/components/SimpleList/simple-list.scss +2 -2
  131. package/components/Spinner/spinner.css +4 -133
  132. package/components/Spinner/spinner.scss +4 -173
  133. package/components/Table/table-grid.css +28 -28
  134. package/components/Table/table-scrollable.css +31 -26
  135. package/components/Table/table-scrollable.scss +33 -28
  136. package/components/Table/table-tree-view.css +14 -4
  137. package/components/Table/table-tree-view.scss +15 -0
  138. package/components/Table/table.css +67 -65
  139. package/components/Table/table.scss +65 -62
  140. package/components/Tabs/tabs.css +0 -4
  141. package/components/Tabs/tabs.scss +0 -7
  142. package/components/TextInputGroup/text-input-group.css +6 -4
  143. package/components/TextInputGroup/text-input-group.scss +6 -5
  144. package/components/Tile/tile.css +1 -1
  145. package/components/Tile/tile.scss +1 -1
  146. package/components/Timestamp/timestamp.css +3 -3
  147. package/components/Timestamp/timestamp.scss +3 -3
  148. package/components/Toolbar/toolbar.css +78 -43
  149. package/components/Toolbar/toolbar.scss +50 -10
  150. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  151. package/components/Tooltip/tooltip.css +7 -12
  152. package/components/Tooltip/tooltip.scss +6 -3
  153. package/components/TreeView/tree-view.css +7 -15
  154. package/components/TreeView/tree-view.scss +7 -18
  155. package/components/Wizard/wizard.css +16 -39
  156. package/components/Wizard/wizard.scss +20 -2
  157. package/docs/components/AboutModalBox/examples/AboutModalBox.md +20 -14
  158. package/docs/components/Accordion/examples/Accordion.md +12 -12
  159. package/docs/components/ActionList/examples/ActionList.md +6 -6
  160. package/docs/components/Alert/examples/Alert.md +29 -29
  161. package/docs/components/AlertGroup/examples/AlertGroup.md +15 -15
  162. package/docs/components/AppLauncher/examples/application-launcher.md +52 -46
  163. package/docs/components/Avatar/examples/Avatar.md +11 -11
  164. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  165. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  166. package/docs/components/BackgroundImage/examples/BackgroundImage.md +13 -29
  167. package/docs/components/Badge/examples/Badge.md +5 -5
  168. package/docs/components/Banner/examples/Banner.md +8 -8
  169. package/docs/components/Brand/examples/Brand.md +9 -9
  170. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  171. package/docs/components/Button/examples/Button.md +51 -55
  172. package/docs/components/CalendarMonth/examples/CalendarMonth.md +301 -284
  173. package/docs/components/Card/examples/Card.md +676 -116
  174. package/docs/components/Check/examples/Check.md +16 -19
  175. package/docs/components/Chip/examples/Chip.md +70 -52
  176. package/docs/components/ChipGroup/examples/ChipGroup.md +452 -673
  177. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  178. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  179. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  180. package/docs/components/Content/examples/Content.md +37 -9
  181. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  182. package/docs/components/ContextSelector/examples/context-selector.md +87 -80
  183. package/docs/components/DataList/examples/DataList.md +239 -202
  184. package/docs/components/DatePicker/examples/DatePicker.md +139 -104
  185. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  186. package/docs/components/Divider/examples/Divider.md +10 -10
  187. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  188. package/docs/components/Drawer/examples/Drawer.md +43 -43
  189. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  190. package/docs/components/Dropdown/examples/Dropdown.md +125 -100
  191. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  192. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  193. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  194. package/docs/components/FileUpload/examples/FileUpload.md +150 -110
  195. package/docs/components/Form/examples/Form.md +152 -130
  196. package/docs/components/FormControl/examples/FormControl.md +21 -20
  197. package/docs/components/HelperText/examples/HelperText.md +24 -35
  198. package/docs/components/Hint/examples/Hint.md +7 -7
  199. package/docs/components/Icon/examples/Icon.md +11 -12
  200. package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
  201. package/docs/components/InputGroup/examples/InputGroup.md +229 -179
  202. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  203. package/docs/components/Label/examples/Label.md +1427 -746
  204. package/docs/components/LabelGroup/examples/LabelGroup.md +295 -242
  205. package/docs/components/List/examples/List.md +18 -18
  206. package/docs/components/LogViewer/examples/LogViewer.md +79 -74
  207. package/docs/components/Login/examples/Login.md +103 -181
  208. package/docs/components/Masthead/examples/masthead.md +9 -9
  209. package/docs/components/Menu/examples/Menu.md +93 -85
  210. package/docs/components/MenuToggle/examples/MenuToggle.md +29 -28
  211. package/docs/components/ModalBox/examples/ModalBox.md +113 -92
  212. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +27 -26
  213. package/docs/components/Nav/examples/Navigation.md +69 -69
  214. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  215. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +64 -64
  216. package/docs/components/NumberInput/examples/NumberInput.md +311 -239
  217. package/docs/components/OptionsMenu/examples/options-menu.md +28 -28
  218. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  219. package/docs/components/Page/examples/Page.css +7 -1
  220. package/docs/components/Page/examples/Page.md +81 -54
  221. package/docs/components/Pagination/examples/Pagination.md +27 -27
  222. package/docs/components/Panel/examples/Panel.md +10 -10
  223. package/docs/components/Popover/examples/Popover.md +206 -149
  224. package/docs/components/Progress/examples/Progress.md +32 -61
  225. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -39
  226. package/docs/components/Radio/examples/Radio.md +12 -11
  227. package/docs/components/SearchInput/examples/SearchInput.md +185 -148
  228. package/docs/components/Select/examples/Select.md +372 -318
  229. package/docs/components/Sidebar/examples/Sidebar.md +70 -14
  230. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  231. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  232. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  233. package/docs/components/Slider/examples/Slider.md +84 -62
  234. package/docs/components/Spinner/examples/Spinner.md +18 -67
  235. package/docs/components/Switch/examples/Switch.md +19 -19
  236. package/docs/components/TabContent/examples/TabContent.md +13 -13
  237. package/docs/components/Table/examples/Table.css +4 -0
  238. package/docs/components/Table/examples/Table.md +5212 -5750
  239. package/docs/components/Tabs/examples/Tabs.md +155 -155
  240. package/docs/components/TextInputGroup/examples/TextInputGroup.md +523 -406
  241. package/docs/components/Tile/examples/Tile.md +16 -17
  242. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  243. package/docs/components/Title/examples/Title.md +17 -17
  244. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  245. package/docs/components/Toolbar/examples/Toolbar.md +848 -726
  246. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  247. package/docs/components/TreeView/examples/TreeView.md +34 -34
  248. package/docs/components/Truncate/examples/Truncate.md +4 -5
  249. package/docs/components/Wizard/examples/Wizard.md +119 -127
  250. package/docs/demos/AboutModal/examples/AboutModal.md +4 -5
  251. package/docs/demos/Alert/examples/Alert.md +118 -71
  252. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  253. package/docs/demos/Banner/examples/Banner.md +8 -9
  254. package/docs/demos/Button/examples/Button.md +10 -5
  255. package/docs/demos/Card/examples/Card.md +246 -168
  256. package/docs/demos/CardView/examples/CardView.md +57 -30
  257. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  258. package/docs/demos/Dashboard/examples/Dashboard.md +61 -38
  259. package/docs/demos/DataList/examples/DataList.md +312 -255
  260. package/docs/demos/DescriptionList/examples/DescriptionList.md +33 -22
  261. package/docs/demos/Drawer/examples/Drawer.md +24 -22
  262. package/docs/demos/Form/examples/BasicForms.md +220 -213
  263. package/docs/demos/HelperText/examples/HelperText.md +16 -14
  264. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  265. package/docs/demos/Masthead/examples/Masthead.md +302 -284
  266. package/docs/demos/Modal/examples/Modal.md +54 -66
  267. package/docs/demos/Nav/examples/Nav.md +47 -47
  268. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +70 -58
  269. package/docs/demos/Page/examples/Page.md +982 -51
  270. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +22 -18
  271. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +121 -106
  272. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +345 -311
  273. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  274. package/docs/demos/Table/examples/Table.md +3373 -1333
  275. package/docs/demos/Tabs/examples/Tabs.md +141 -90
  276. package/docs/demos/Toolbar/examples/Toolbar.md +1994 -329
  277. package/docs/demos/Wizard/examples/Wizard.md +289 -266
  278. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  279. package/docs/layouts/Flex/examples/Flex.md +98 -98
  280. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  281. package/docs/layouts/Grid/examples/Grid.md +9 -9
  282. package/docs/layouts/Level/examples/Level.md +5 -5
  283. package/docs/layouts/Split/examples/Split.md +7 -7
  284. package/docs/layouts/Stack/examples/Stack.md +6 -6
  285. package/docs/utilities/Accessibility/examples/Accessibility.md +5 -5
  286. package/docs/utilities/Alignment/examples/Alignment.md +7 -7
  287. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +13 -13
  288. package/docs/utilities/BoxShadow/examples/box-shadow.md +23 -23
  289. package/docs/utilities/Display/examples/Display.md +12 -12
  290. package/docs/utilities/Flex/examples/Flex.md +35 -35
  291. package/docs/utilities/Float/examples/Float.md +5 -5
  292. package/docs/utilities/Sizing/examples/Sizing.md +51 -51
  293. package/docs/utilities/Spacing/examples/Spacing.md +35 -35
  294. package/docs/utilities/Text/examples/Text.md +31 -31
  295. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  296. package/layouts/Gallery/gallery.css +1 -1
  297. package/layouts/Gallery/gallery.scss +1 -1
  298. package/layouts/Grid/grid.css +7 -7
  299. package/layouts/Grid/grid.scss +2 -2
  300. package/package.json +60 -66
  301. package/patternfly-addons.css +48 -48
  302. package/{patternfly-base-no-reset.css → patternfly-base-no-globals.css} +28 -73
  303. package/{patternfly-base-no-reset.scss → patternfly-base-no-globals.scss} +1 -0
  304. package/patternfly-base.css +63 -114
  305. package/{patternfly-no-reset.css → patternfly-no-globals.css} +1206 -2449
  306. package/{patternfly-no-reset.scss → patternfly-no-globals.scss} +1 -0
  307. package/patternfly.css +1234 -2483
  308. package/patternfly.min.css +1 -1
  309. package/patternfly.min.css.map +1 -1
  310. package/sass-utilities/functions.scss +8 -24
  311. package/sass-utilities/mixins.scss +15 -39
  312. package/sass-utilities/placeholders.scss +0 -23
  313. package/sass-utilities/scss-variables.scss +5 -6
  314. package/sass-utilities/themes/dark/placeholders.scss +0 -22
  315. package/sass-utilities/themes/dark/scss-variables.scss +1 -1
  316. package/utilities/Spacing/spacing.scss +2 -2
  317. package/utilities/Text/text.css +48 -48
  318. package/utilities/Text/text.scss +6 -6
  319. package/utilities/Text/themes/dark/text.scss +2 -2
  320. package/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff +0 -0
  321. package/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff +0 -0
  322. package/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff +0 -0
  323. package/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff +0 -0
  324. package/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff +0 -0
  325. package/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff +0 -0
  326. package/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff +0 -0
  327. package/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff +0 -0
  328. package/assets/fonts/RedHatText/RedHatText-Bold.woff +0 -0
  329. package/assets/fonts/RedHatText/RedHatText-BoldItalic.woff +0 -0
  330. package/assets/fonts/RedHatText/RedHatText-Italic.woff +0 -0
  331. package/assets/fonts/RedHatText/RedHatText-Medium.woff +0 -0
  332. package/assets/fonts/RedHatText/RedHatText-MediumItalic.woff +0 -0
  333. package/assets/fonts/RedHatText/RedHatText-Regular.woff +0 -0
  334. package/assets/fonts/webfonts/fa-solid-900.woff +0 -0
  335. package/assets/pficon/pficon.woff +0 -0
  336. package/base/_shield-inheritable.scss +0 -69
  337. package/base/_shield-noninheritable.scss +0 -13
  338. package/base/patternfly-shield-inheritable.css +0 -66
  339. package/base/patternfly-shield-inheritable.scss +0 -4
  340. package/base/patternfly-shield-noninheritable.css +0 -9
  341. package/base/patternfly-shield-noninheritable.scss +0 -4
  342. package/sass-utilities/bs-variables.scss +0 -709
package/docs/components/Popover/examples/Popover.md CHANGED
@@ -18,10 +18,16 @@ cssPrefix: pf-c-popover
18
18
  >
19
19
  <div class="pf-c-popover__arrow"></div>
20
20
  <div class="pf-c-popover__content">
21
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
22
- <i class="fas fa-times" aria-hidden="true"></i>
23
- </button>
24
- <h1 class="pf-c-title pf-m-md" id="popover-top-header">Popover header</h1>
21
+ <div class="pf-c-popover__close">
22
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
23
+ <i class="fas fa-times" aria-hidden="true"></i>
24
+ </button>
25
+ </div>
26
+ <header class="pf-c-popover__header">
27
+ <div class="pf-c-popover__title" id="popover-top-header">
28
+ <h1 class="pf-c-popover__title-text">Popover header</h1>
29
+ </div>
30
+ </header>
25
31
  <div
26
32
  class="pf-c-popover__body"
27
33
  id="popover-top-body"
@@ -44,10 +50,16 @@ cssPrefix: pf-c-popover
44
50
  >
45
51
  <div class="pf-c-popover__arrow"></div>
46
52
  <div class="pf-c-popover__content">
47
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
48
- <i class="fas fa-times" aria-hidden="true"></i>
49
- </button>
50
- <h1 class="pf-c-title pf-m-md" id="popover-right-header">Popover header</h1>
53
+ <div class="pf-c-popover__close">
54
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
55
+ <i class="fas fa-times" aria-hidden="true"></i>
56
+ </button>
57
+ </div>
58
+ <header class="pf-c-popover__header">
59
+ <div class="pf-c-popover__title" id="popover-right-header">
60
+ <h1 class="pf-c-popover__title-text">Popover header</h1>
61
+ </div>
62
+ </header>
51
63
  <div
52
64
  class="pf-c-popover__body"
53
65
  id="popover-right-body"
@@ -70,10 +82,16 @@ cssPrefix: pf-c-popover
70
82
  >
71
83
  <div class="pf-c-popover__arrow"></div>
72
84
  <div class="pf-c-popover__content">
73
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
74
- <i class="fas fa-times" aria-hidden="true"></i>
75
- </button>
76
- <h1 class="pf-c-title pf-m-md" id="popover-bottom-header">Popover header</h1>
85
+ <div class="pf-c-popover__close">
86
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
87
+ <i class="fas fa-times" aria-hidden="true"></i>
88
+ </button>
89
+ </div>
90
+ <header class="pf-c-popover__header">
91
+ <div class="pf-c-popover__title" id="popover-bottom-header">
92
+ <h1 class="pf-c-popover__title-text">Popover header</h1>
93
+ </div>
94
+ </header>
77
95
  <div
78
96
  class="pf-c-popover__body"
79
97
  id="popover-bottom-body"
@@ -96,10 +114,16 @@ cssPrefix: pf-c-popover
96
114
  >
97
115
  <div class="pf-c-popover__arrow"></div>
98
116
  <div class="pf-c-popover__content">
99
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
100
- <i class="fas fa-times" aria-hidden="true"></i>
101
- </button>
102
- <h1 class="pf-c-title pf-m-md" id="popover-left-header">Popover header</h1>
117
+ <div class="pf-c-popover__close">
118
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
119
+ <i class="fas fa-times" aria-hidden="true"></i>
120
+ </button>
121
+ </div>
122
+ <header class="pf-c-popover__header">
123
+ <div class="pf-c-popover__title" id="popover-left-header">
124
+ <h1 class="pf-c-popover__title-text">Popover header</h1>
125
+ </div>
126
+ </header>
103
127
  <div
104
128
  class="pf-c-popover__body"
105
129
  id="popover-left-body"
@@ -122,10 +146,16 @@ cssPrefix: pf-c-popover
122
146
  >
123
147
  <div class="pf-c-popover__arrow"></div>
124
148
  <div class="pf-c-popover__content">
125
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
126
- <i class="fas fa-times" aria-hidden="true"></i>
127
- </button>
128
- <h1 class="pf-c-title pf-m-md" id="popover-left-start-header">Popover header</h1>
149
+ <div class="pf-c-popover__close">
150
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
151
+ <i class="fas fa-times" aria-hidden="true"></i>
152
+ </button>
153
+ </div>
154
+ <header class="pf-c-popover__header">
155
+ <div class="pf-c-popover__title" id="popover-left-start-header">
156
+ <h1 class="pf-c-popover__title-text">Popover header</h1>
157
+ </div>
158
+ </header>
129
159
  <div
130
160
  class="pf-c-popover__body"
131
161
  id="popover-left-start-body"
@@ -148,10 +178,16 @@ cssPrefix: pf-c-popover
148
178
  >
149
179
  <div class="pf-c-popover__arrow"></div>
150
180
  <div class="pf-c-popover__content">
151
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
152
- <i class="fas fa-times" aria-hidden="true"></i>
153
- </button>
154
- <h1 class="pf-c-title pf-m-md" id="popover-left-end-header">Popover header</h1>
181
+ <div class="pf-c-popover__close">
182
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
183
+ <i class="fas fa-times" aria-hidden="true"></i>
184
+ </button>
185
+ </div>
186
+ <header class="pf-c-popover__header">
187
+ <div class="pf-c-popover__title" id="popover-left-end-header">
188
+ <h1 class="pf-c-popover__title-text">Popover header</h1>
189
+ </div>
190
+ </header>
155
191
  <div
156
192
  class="pf-c-popover__body"
157
193
  id="popover-left-end-body"
@@ -174,13 +210,16 @@ cssPrefix: pf-c-popover
174
210
  >
175
211
  <div class="pf-c-popover__arrow"></div>
176
212
  <div class="pf-c-popover__content">
177
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
178
- <i class="fas fa-times" aria-hidden="true"></i>
179
- </button>
180
- <h1
181
- class="pf-c-title pf-m-md"
182
- id="popover-bottom-start-header"
183
- >Popover header</h1>
213
+ <div class="pf-c-popover__close">
214
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
215
+ <i class="fas fa-times" aria-hidden="true"></i>
216
+ </button>
217
+ </div>
218
+ <header class="pf-c-popover__header">
219
+ <div class="pf-c-popover__title" id="popover-bottom-start-header">
220
+ <h1 class="pf-c-popover__title-text">Popover header</h1>
221
+ </div>
222
+ </header>
184
223
  <div
185
224
  class="pf-c-popover__body"
186
225
  id="popover-bottom-start-body"
@@ -203,10 +242,16 @@ cssPrefix: pf-c-popover
203
242
  >
204
243
  <div class="pf-c-popover__arrow"></div>
205
244
  <div class="pf-c-popover__content">
206
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
207
- <i class="fas fa-times" aria-hidden="true"></i>
208
- </button>
209
- <h1 class="pf-c-title pf-m-md" id="popover-bottom-end-header">Popover header</h1>
245
+ <div class="pf-c-popover__close">
246
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
247
+ <i class="fas fa-times" aria-hidden="true"></i>
248
+ </button>
249
+ </div>
250
+ <header class="pf-c-popover__header">
251
+ <div class="pf-c-popover__title" id="popover-bottom-end-header">
252
+ <h1 class="pf-c-popover__title-text">Popover header</h1>
253
+ </div>
254
+ </header>
210
255
  <div
211
256
  class="pf-c-popover__body"
212
257
  id="popover-bottom-end-body"
@@ -229,9 +274,11 @@ cssPrefix: pf-c-popover
229
274
  >
230
275
  <div class="pf-c-popover__arrow"></div>
231
276
  <div class="pf-c-popover__content">
232
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
233
- <i class="fas fa-times" aria-hidden="true"></i>
234
- </button>
277
+ <div class="pf-c-popover__close">
278
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
279
+ <i class="fas fa-times" aria-hidden="true"></i>
280
+ </button>
281
+ </div>
235
282
  <div
236
283
  class="pf-c-popover__body"
237
284
  id="popover-no-header-body"
@@ -274,10 +321,16 @@ cssPrefix: pf-c-popover
274
321
  >
275
322
  <div class="pf-c-popover__arrow"></div>
276
323
  <div class="pf-c-popover__content">
277
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
278
- <i class="fas fa-times" aria-hidden="true"></i>
279
- </button>
280
- <h1 class="pf-c-title pf-m-md" id="popover-width-auto-header">Popover header</h1>
324
+ <div class="pf-c-popover__close">
325
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
326
+ <i class="fas fa-times" aria-hidden="true"></i>
327
+ </button>
328
+ </div>
329
+ <header class="pf-c-popover__header">
330
+ <div class="pf-c-popover__title" id="popover-width-auto-header">
331
+ <h1 class="pf-c-popover__title-text">Popover header</h1>
332
+ </div>
333
+ </header>
281
334
  <div class="pf-c-popover__body" id="popover-width-auto-body">Popovers body</div>
282
335
  <footer class="pf-c-popover__footer">Popover footer</footer>
283
336
  </div>
@@ -297,16 +350,18 @@ cssPrefix: pf-c-popover
297
350
  >
298
351
  <div class="pf-c-popover__arrow"></div>
299
352
  <div class="pf-c-popover__content">
300
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
301
- <i class="fas fa-times" aria-hidden="true"></i>
302
- </button>
353
+ <div class="pf-c-popover__close">
354
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
355
+ <i class="fas fa-times" aria-hidden="true"></i>
356
+ </button>
357
+ </div>
303
358
  <header class="pf-c-popover__header">
304
- <h1 class="pf-c-popover__title pf-m-icon" id="popover-icon-title-header">
359
+ <div class="pf-c-popover__title" id="popover-icon-title-header">
305
360
  <span class="pf-c-popover__title-icon">
306
361
  <i class="fas fa-fw fa-bullhorn" aria-hidden="true"></i>
307
362
  </span>
308
- <span class="pf-c-popover__title-text">Popover with icon title</span>
309
- </h1>
363
+ <h1 class="pf-c-popover__title-text">Popover with icon title</h1>
364
+ </div>
310
365
  </header>
311
366
  <div
312
367
  class="pf-c-popover__body"
@@ -318,39 +373,40 @@ cssPrefix: pf-c-popover
318
373
 
319
374
  ```
320
375
 
321
- ### Default alert popover
376
+ ### Custom alert popover
322
377
 
323
378
  ```html isFullscreen
324
379
  <div
325
- class="pf-c-popover pf-m-default pf-m-left"
380
+ class="pf-c-popover pf-m-custom pf-m-left"
326
381
  role="dialog"
327
382
  aria-modal="true"
328
- aria-labelledby="popover-default-alert-header"
329
- aria-describedby="popover-default-alert-body"
383
+ aria-labelledby="popover-custom-alert-header"
384
+ aria-describedby="popover-custom-alert-body"
330
385
  >
331
386
  <div class="pf-c-popover__arrow"></div>
332
387
  <div class="pf-c-popover__content">
333
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
334
- <i class="fas fa-times" aria-hidden="true"></i>
335
- </button>
388
+ <div class="pf-c-popover__close">
389
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
390
+ <i class="fas fa-times" aria-hidden="true"></i>
391
+ </button>
392
+ </div>
336
393
  <header class="pf-c-popover__header">
337
- <h1
338
- class="pf-c-popover__title pf-m-icon"
339
- id="popover-default-alert-header"
340
- >
394
+ <div class="pf-c-popover__title" id="popover-custom-alert-header">
341
395
  <span class="pf-c-popover__title-icon">
342
396
  <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
343
397
  </span>
344
- <span class="pf-u-screen-reader">
345
- Default
346
- alert:
347
- </span>
348
- <span class="pf-c-popover__title-text">Default popover title</span>
349
- </h1>
398
+ <h1 class="pf-c-popover__title-text">
399
+ <span class="pf-screen-reader">
400
+ Custom
401
+ alert:
402
+ </span>
403
+ Custom popover title
404
+ </h1>
405
+ </div>
350
406
  </header>
351
407
  <div
352
408
  class="pf-c-popover__body"
353
- id="popover-default-alert-body"
409
+ id="popover-custom-alert-body"
354
410
  >Popovers are triggered by click rather than hover. Click again to close.</div>
355
411
  <footer class="pf-c-popover__footer">Popover footer</footer>
356
412
  </div>
@@ -370,20 +426,24 @@ cssPrefix: pf-c-popover
370
426
  >
371
427
  <div class="pf-c-popover__arrow"></div>
372
428
  <div class="pf-c-popover__content">
373
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
374
- <i class="fas fa-times" aria-hidden="true"></i>
375
- </button>
429
+ <div class="pf-c-popover__close">
430
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
431
+ <i class="fas fa-times" aria-hidden="true"></i>
432
+ </button>
433
+ </div>
376
434
  <header class="pf-c-popover__header">
377
- <h1 class="pf-c-popover__title pf-m-icon" id="popover-info-alert-header">
435
+ <div class="pf-c-popover__title" id="popover-info-alert-header">
378
436
  <span class="pf-c-popover__title-icon">
379
437
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
380
438
  </span>
381
- <span class="pf-u-screen-reader">
382
- Info
383
- alert:
384
- </span>
385
- <span class="pf-c-popover__title-text">Info popover title</span>
386
- </h1>
439
+ <h1 class="pf-c-popover__title-text">
440
+ <span class="pf-screen-reader">
441
+ Info
442
+ alert:
443
+ </span>
444
+ Info popover title
445
+ </h1>
446
+ </div>
387
447
  </header>
388
448
  <div
389
449
  class="pf-c-popover__body"
@@ -407,23 +467,24 @@ cssPrefix: pf-c-popover
407
467
  >
408
468
  <div class="pf-c-popover__arrow"></div>
409
469
  <div class="pf-c-popover__content">
410
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
411
- <i class="fas fa-times" aria-hidden="true"></i>
412
- </button>
470
+ <div class="pf-c-popover__close">
471
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
472
+ <i class="fas fa-times" aria-hidden="true"></i>
473
+ </button>
474
+ </div>
413
475
  <header class="pf-c-popover__header">
414
- <h1
415
- class="pf-c-popover__title pf-m-icon"
416
- id="popover-success-alert-header"
417
- >
476
+ <div class="pf-c-popover__title" id="popover-success-alert-header">
418
477
  <span class="pf-c-popover__title-icon">
419
478
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
420
479
  </span>
421
- <span class="pf-u-screen-reader">
422
- Success
423
- alert:
424
- </span>
425
- <span class="pf-c-popover__title-text">Success popover title</span>
426
- </h1>
480
+ <h1 class="pf-c-popover__title-text">
481
+ <span class="pf-screen-reader">
482
+ Success
483
+ alert:
484
+ </span>
485
+ Success popover title
486
+ </h1>
487
+ </div>
427
488
  </header>
428
489
  <div
429
490
  class="pf-c-popover__body"
@@ -447,23 +508,19 @@ cssPrefix: pf-c-popover
447
508
  >
448
509
  <div class="pf-c-popover__arrow"></div>
449
510
  <div class="pf-c-popover__content">
450
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
451
- <i class="fas fa-times" aria-hidden="true"></i>
452
- </button>
453
511
  <header class="pf-c-popover__header">
454
- <h1
455
- class="pf-c-popover__title pf-m-icon"
456
- id="popover-warning-alert-header"
457
- >
512
+ <div class="pf-c-popover__title" id="popover-warning-alert-header">
458
513
  <span class="pf-c-popover__title-icon">
459
514
  <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
460
515
  </span>
461
- <span class="pf-u-screen-reader">
462
- Warning
463
- alert:
464
- </span>
465
- <span class="pf-c-popover__title-text">Warning popover title</span>
466
- </h1>
516
+ <h1 class="pf-c-popover__title-text">
517
+ <span class="pf-screen-reader">
518
+ Warning
519
+ alert:
520
+ </span>
521
+ Warning popover title
522
+ </h1>
523
+ </div>
467
524
  </header>
468
525
  <div
469
526
  class="pf-c-popover__body"
@@ -487,23 +544,24 @@ cssPrefix: pf-c-popover
487
544
  >
488
545
  <div class="pf-c-popover__arrow"></div>
489
546
  <div class="pf-c-popover__content">
490
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
491
- <i class="fas fa-times" aria-hidden="true"></i>
492
- </button>
547
+ <div class="pf-c-popover__close">
548
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
549
+ <i class="fas fa-times" aria-hidden="true"></i>
550
+ </button>
551
+ </div>
493
552
  <header class="pf-c-popover__header">
494
- <h1
495
- class="pf-c-popover__title pf-m-icon"
496
- id="popover-danger-alert-header"
497
- >
553
+ <div class="pf-c-popover__title" id="popover-danger-alert-header">
498
554
  <span class="pf-c-popover__title-icon">
499
555
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
500
556
  </span>
501
- <span class="pf-u-screen-reader">
502
- Danger
503
- alert:
504
- </span>
505
- <span class="pf-c-popover__title-text">Danger popover title</span>
506
- </h1>
557
+ <h1 class="pf-c-popover__title-text">
558
+ <span class="pf-screen-reader">
559
+ Danger
560
+ alert:
561
+ </span>
562
+ Danger popover title
563
+ </h1>
564
+ </div>
507
565
  </header>
508
566
  <div
509
567
  class="pf-c-popover__body"
@@ -523,40 +581,39 @@ A popover is used to provide contextual information for another component on cli
523
581
 
524
582
  ### Accessibility
525
583
 
526
- | Attribute | Applies to | Outcome |
527
- | ----------------------------------------------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
528
- | `role="dialog"` | `.pf-c-popover` | Identifies the element that serves as the popover container. **Required** |
529
- | `aria-labelledby="[id value of .pf-c-title]"` | `.pf-c-popover` | Gives the popover an accessible name by referring to the element that provides the dialog title. **Required when .pf-c-title is present** |
530
- | `aria-label="[title of popover]"` | `.pf-c-popover` | Gives the popover an accessible name. **Required when .pf-c-title is _not_ present** |
531
- | `aria-describedby="[id value of applicable content]"` | `.pf-c-popover` | Gives the popover an accessible description by referring to the popover content that describes the primary message or purpose of the dialog. Not used if there is no static text that describes the popover. |
532
- | `aria-modal="true"` | `.pf-c-popover` | Tells assistive technologies that the windows underneath the current popover are not available for interaction. **Required** |
533
- | `aria-label="Close"` | `.pf-c-button` | Provides an accessible name for the close button as it uses an icon instead of text. **Required** |
534
- | `aria-hidden="true"` | Parent element containing the page contents when the popover is open. | Hides main contents of the page from screen readers. The element with `.pf-c-popover` must not be a descendent of the element with `aria-hidden="true"`. For more info, see [trapping focus](/accessibility/product-development-guide#trapping-focus). **Required** |
584
+ | Attribute | Applies to | Outcome |
585
+ | -- | -- | -- |
586
+ | `role="dialog"` | `.pf-c-popover` | Identifies the element that serves as the popover container. **Required** |
587
+ | `aria-labelledby="[id value of .pf-c-title]"` | `.pf-c-popover` | Gives the popover an accessible name by referring to the element that provides the dialog title. **Required when .pf-c-title is present** |
588
+ | `aria-label="[title of popover]"` | `.pf-c-popover` | Gives the popover an accessible name. **Required when .pf-c-title is *not* present** |
589
+ | `aria-describedby="[id value of applicable content]"` | `.pf-c-popover` | Gives the popover an accessible description by referring to the popover content that describes the primary message or purpose of the dialog. Not used if there is no static text that describes the popover. |
590
+ | `aria-modal="true"` | `.pf-c-popover` | Tells assistive technologies that the windows underneath the current popover are not available for interaction. **Required**|
591
+ | `aria-label="Close"` | `.pf-c-button` | Provides an accessible name for the close button as it uses an icon instead of text. **Required**|
592
+ | `aria-hidden="true"` | Parent element containing the page contents when the popover is open. | Hides main contents of the page from screen readers. The element with `.pf-c-popover` must not be a descendent of the element with `aria-hidden="true"`. For more info, see [trapping focus](/accessibility/product-development-guide#trapping-focus). **Required** |
593
+ | `.pf-screen-reader` | `.pf-c-popover__title-text <span>` | Adds text to be read saying the alert status before the title. If `.pf-c-popover__title-text` is not used to create a title, this must be added within the title. **Required for popovers that are alerts** |
535
594
 
536
595
  ### Usage
537
596
 
538
- | Class | Applied to | Outcome |
539
- | --------------------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
540
- | `.pf-c-popover` | `<div>` | Creates a popover. Always use it with a modifier class that positions the popover relative to the element that triggered it. **Required** |
541
- | `.pf-c-popover__arrow` | `<div>` | Creates an arrow pointing towards the element the popover describes. **Required** |
542
- | `.pf-c-popover__content` | `<div>` | Creates the content area of the popover. **Required** |
543
- | `.pf-c-button` | `<button>` | Positions the close icon in the top-right corner of the popover. **Required** |
544
- | `.pf-c-popover__header` | `<header>` | Creates the popover header |
545
- | `.pf-c-popover__title` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`,`<div>` | Creates the popover title |
546
- | `.pf-c-title` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>` | Initiates a title. Always use it with a modifier class. See the [title component](/components/title) for more info. |
547
- | `.pf-c-popover__title-icon` | `<span>` | Creates the popover title icon |
548
- | `.pf-c-popover__title-text` | `<span>` | Creates the popover title text |
549
- | `.pf-c-popover__body` | `<div>` | The popover's body text. **Required** |
550
- | `.pf-c-popover__footer` | `<footer>` | Initiates a popover footer. |
551
- | `.pf-m-left{-top/bottom}` | `.pf-c-popover` | Positions the popover to the left (or left top/left bottom) of the element. |
552
- | `.pf-m-right{-top/bottom}` | `.pf-c-popover` | Positions the popover to the right (or right top/right bottom) of the element. |
553
- | `.pf-m-top{-left/right}` | `.pf-c-popover` | Positions the popover to the top (or top left/top right) of the element. |
554
- | `.pf-m-bottom{-left/right}` | `.pf-c-popover` | Positions the popover to the bottom (or bottom left/bottom right) of the element. |
555
- | `.pf-m-no-padding` | `.pf-c-popover` | Removes the outer padding from the popover content. |
556
- | `.pf-m-width-auto` | `.pf-c-popover` | Allows popover width to be defined by the popover content. |
557
- | `.pf-m-icon` | `.pf-c-popover__title` | Modifies the title layout to accommodate an icon. |
558
- | `.pf-m-default` | `.pf-c-popover` | Modifies for the default alert state. |
559
- | `.pf-m-info` | `.pf-c-popover` | Modifies for the info alert state. |
560
- | `.pf-m-success` | `.pf-c-popover` | Modifies for the success alert state. |
561
- | `.pf-m-warning` | `.pf-c-popover` | Modifies for the warning alert state. |
562
- | `.pf-m-danger` | `.pf-c-popover` | Modifies for the danger alert state. |
597
+ | Class | Applied to | Outcome |
598
+ | -- | -- | -- |
599
+ | `.pf-c-popover` | `<div>` | Creates a popover. Always use it with a modifier class that positions the popover relative to the element that triggered it. **Required** |
600
+ | `.pf-c-popover__arrow` | `<div>` | Creates an arrow pointing towards the element the popover describes. **Required** |
601
+ | `.pf-c-popover__content` | `<div>` | Creates the content area of the popover. **Required** |
602
+ | `.pf-c-popover__close` | `<div>` | Positions the close icon in the top-right corner of the popover. **Required if there is a close button** |
603
+ | `.pf-c-popover__header` | `<header>` | Creates the popover header. **Required if there is a title**|
604
+ | `.pf-c-popover__title` | `<div>` | Creates the popover title. |
605
+ | `.pf-c-popover__title-icon` | `<span>` | Creates the popover title icon. |
606
+ | `.pf-c-popover__title-text` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`,`<span>` | Creates the popover title text. |
607
+ | `.pf-c-popover__body` | `<div>` | The popover's body text. **Required** |
608
+ | `.pf-c-popover__footer` | `<footer>` | Initiates a popover footer. |
609
+ | `.pf-m-left{-top/bottom}` | `.pf-c-popover` | Positions the popover to the left (or left top/left bottom) of the element. |
610
+ | `.pf-m-right{-top/bottom}` | `.pf-c-popover` | Positions the popover to the right (or right top/right bottom) of the element. |
611
+ | `.pf-m-top{-left/right}` | `.pf-c-popover` | Positions the popover to the top (or top left/top right) of the element. |
612
+ | `.pf-m-bottom{-left/right}` | `.pf-c-popover` | Positions the popover to the bottom (or bottom left/bottom right) of the element. |
613
+ | `.pf-m-no-padding` | `.pf-c-popover` | Removes the outer padding from the popover content. |
614
+ | `.pf-m-width-auto` | `.pf-c-popover` | Allows popover width to be defined by the popover content. |
615
+ | `.pf-m-custom` | `.pf-c-popover` | Modifies for the custom alert state. |
616
+ | `.pf-m-info` | `.pf-c-popover` | Modifies for the info alert state. |
617
+ | `.pf-m-success` | `.pf-c-popover` | Modifies for the success alert state. |
618
+ | `.pf-m-warning` | `.pf-c-popover` | Modifies for the warning alert state. |
619
+ | `.pf-m-danger` | `.pf-c-popover` | Modifies for the danger alert state. |