@patternfly/patternfly 6.0.0-alpha.5 → 6.0.0-alpha.50

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 (360) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/README.md +13 -3
  3. package/assets/icons/iconUnicodes.json +1 -0
  4. package/assets/images/PF-Backdrop.svg +1 -0
  5. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  6. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  7. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  8. package/assets/images/PF-IconLogo-color.svg +17 -0
  9. package/assets/images/PF-IconLogo.svg +17 -0
  10. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  11. package/assets/images/pf-background.svg +22 -0
  12. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  13. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  14. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  15. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  16. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  17. package/assets/images/pf_logo_white.hbs +35 -0
  18. package/assets/images/pf_logo_white.svg +38 -0
  19. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  20. package/assets/pficon/pficon.scss +6 -129
  21. package/base/_common.scss +29 -4
  22. package/base/_globals.scss +5 -7
  23. package/base/_variables.scss +8 -6
  24. package/base/patternfly-common.css +24 -6
  25. package/base/patternfly-globals.css +5 -4
  26. package/base/patternfly-icons.css +5 -1
  27. package/base/patternfly-pf-icons.css +5 -1
  28. package/base/patternfly-variables.css +889 -787
  29. package/base/tokens/_tokens-dark.scss +322 -265
  30. package/base/tokens/_tokens-default.scss +428 -306
  31. package/base/tokens/_tokens-font.scss +41 -46
  32. package/base/tokens/_tokens-palette.scss +69 -71
  33. package/base/tokens/_workspace-overrides.scss +7 -0
  34. package/components/AboutModalBox/about-modal-box.css +78 -104
  35. package/components/AboutModalBox/about-modal-box.scss +62 -74
  36. package/components/Accordion/accordion.css +96 -175
  37. package/components/Accordion/accordion.scss +106 -193
  38. package/components/ActionList/action-list.css +2 -2
  39. package/components/ActionList/action-list.scss +2 -2
  40. package/components/Alert/alert-group.css +27 -20
  41. package/components/Alert/alert-group.scss +27 -20
  42. package/components/Alert/alert.css +74 -95
  43. package/components/Alert/alert.scss +76 -89
  44. package/components/AppLauncher/app-launcher.css +32 -23
  45. package/components/AppLauncher/app-launcher.scss +32 -23
  46. package/components/Avatar/avatar.css +10 -13
  47. package/components/Avatar/avatar.scss +10 -17
  48. package/components/BackToTop/back-to-top.css +17 -15
  49. package/components/BackToTop/back-to-top.scss +14 -13
  50. package/components/Backdrop/backdrop.css +8 -4
  51. package/components/Backdrop/backdrop.scss +7 -4
  52. package/components/BackgroundImage/background-image.css +11 -4
  53. package/components/BackgroundImage/background-image.scss +13 -4
  54. package/components/Badge/badge.css +25 -17
  55. package/components/Badge/badge.scss +27 -19
  56. package/components/Banner/banner.css +95 -69
  57. package/components/Banner/banner.scss +100 -34
  58. package/components/Breadcrumb/breadcrumb.css +28 -19
  59. package/components/Breadcrumb/breadcrumb.scss +26 -19
  60. package/components/Button/button.css +401 -358
  61. package/components/Button/button.scss +459 -486
  62. package/components/CalendarMonth/calendar-month.css +25 -15
  63. package/components/CalendarMonth/calendar-month.scss +23 -15
  64. package/components/Card/card.css +28 -17
  65. package/components/Card/card.scss +32 -17
  66. package/components/Check/check.css +25 -22
  67. package/components/Check/check.scss +26 -24
  68. package/components/Chip/chip-group.css +6 -6
  69. package/components/Chip/chip-group.scss +6 -6
  70. package/components/Chip/chip.css +16 -9
  71. package/components/Chip/chip.scss +17 -9
  72. package/components/ClipboardCopy/clipboard-copy.css +19 -10
  73. package/components/ClipboardCopy/clipboard-copy.scss +16 -8
  74. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +2 -2
  75. package/components/CodeBlock/code-block.css +6 -3
  76. package/components/CodeBlock/code-block.scss +6 -3
  77. package/components/CodeEditor/code-editor.css +31 -22
  78. package/components/CodeEditor/code-editor.scss +30 -21
  79. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  80. package/components/Content/content.css +40 -37
  81. package/components/Content/content.scss +40 -37
  82. package/components/ContextSelector/context-selector.css +41 -26
  83. package/components/ContextSelector/context-selector.scss +40 -25
  84. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  85. package/components/DataList/data-list-grid.css +21 -21
  86. package/components/DataList/data-list-grid.scss +3 -3
  87. package/components/DataList/data-list.css +165 -209
  88. package/components/DataList/data-list.scss +138 -185
  89. package/components/DatePicker/date-picker.css +8 -8
  90. package/components/DatePicker/date-picker.scss +8 -8
  91. package/components/DescriptionList/description-list.css +8 -5
  92. package/components/DescriptionList/description-list.scss +8 -5
  93. package/components/Divider/divider.css +97 -177
  94. package/components/Divider/divider.scss +60 -79
  95. package/components/DragDrop/drag-drop.css +8 -8
  96. package/components/DragDrop/drag-drop.scss +8 -8
  97. package/components/Drawer/drawer.css +120 -62
  98. package/components/Drawer/drawer.scss +94 -44
  99. package/components/Dropdown/dropdown.css +76 -69
  100. package/components/Dropdown/dropdown.scss +67 -62
  101. package/components/DualListSelector/dual-list-selector.css +29 -15
  102. package/components/DualListSelector/dual-list-selector.scss +30 -15
  103. package/components/EmptyState/empty-state.css +64 -38
  104. package/components/EmptyState/empty-state.scss +70 -38
  105. package/components/ExpandableSection/expandable-section.css +75 -66
  106. package/components/ExpandableSection/expandable-section.scss +82 -80
  107. package/components/FileUpload/file-upload.css +9 -15
  108. package/components/FileUpload/file-upload.scss +9 -15
  109. package/components/Form/form.css +111 -154
  110. package/components/Form/form.scss +101 -160
  111. package/components/FormControl/form-control.css +95 -111
  112. package/components/FormControl/form-control.scss +97 -92
  113. package/components/HelperText/helper-text.css +29 -35
  114. package/components/HelperText/helper-text.scss +31 -41
  115. package/components/Hint/hint.css +37 -27
  116. package/components/Hint/hint.scss +37 -30
  117. package/components/Icon/icon.css +1 -1
  118. package/components/Icon/icon.scss +1 -1
  119. package/components/InlineEdit/inline-edit.css +9 -9
  120. package/components/InlineEdit/inline-edit.scss +9 -9
  121. package/components/InputGroup/input-group.css +12 -6
  122. package/components/InputGroup/input-group.scss +11 -5
  123. package/components/InputGroup/themes/dark/input-group.scss +1 -1
  124. package/components/JumpLinks/jump-links.css +27 -24
  125. package/components/JumpLinks/jump-links.scss +26 -24
  126. package/components/Label/label-group.css +13 -10
  127. package/components/Label/label-group.scss +13 -10
  128. package/components/Label/label.css +9 -9
  129. package/components/Label/label.scss +9 -9
  130. package/components/List/list.css +25 -25
  131. package/components/List/list.scss +26 -26
  132. package/components/LogViewer/log-viewer.css +14 -14
  133. package/components/LogViewer/log-viewer.scss +14 -14
  134. package/components/Login/login.css +104 -122
  135. package/components/Login/login.scss +92 -91
  136. package/components/Masthead/masthead.css +273 -498
  137. package/components/Masthead/masthead.scss +137 -282
  138. package/components/Menu/menu.css +82 -65
  139. package/components/Menu/menu.scss +85 -69
  140. package/components/MenuToggle/menu-toggle.css +37 -31
  141. package/components/MenuToggle/menu-toggle.scss +37 -33
  142. package/components/ModalBox/modal-box.css +76 -69
  143. package/components/ModalBox/modal-box.scss +74 -70
  144. package/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  145. package/components/MultipleFileUpload/multiple-file-upload.scss +11 -8
  146. package/components/Nav/nav.css +249 -898
  147. package/components/Nav/nav.scss +316 -1071
  148. package/components/Nav/themes/dark/nav.scss +2 -2
  149. package/components/NotificationBadge/notification-badge.css +66 -85
  150. package/components/NotificationBadge/notification-badge.scss +72 -103
  151. package/components/NotificationDrawer/notification-drawer.css +130 -128
  152. package/components/NotificationDrawer/notification-drawer.scss +130 -129
  153. package/components/NumberInput/number-input.css +2 -2
  154. package/components/NumberInput/number-input.scss +2 -2
  155. package/components/OptionsMenu/options-menu.css +43 -31
  156. package/components/OptionsMenu/options-menu.scss +43 -31
  157. package/components/OverflowMenu/overflow-menu.css +2 -2
  158. package/components/OverflowMenu/overflow-menu.scss +2 -2
  159. package/components/Page/page.css +232 -271
  160. package/components/Page/page.scss +180 -231
  161. package/components/Pagination/pagination.css +71 -121
  162. package/components/Pagination/pagination.scss +56 -127
  163. package/components/Panel/panel.css +40 -30
  164. package/components/Panel/panel.scss +42 -33
  165. package/components/Popover/popover.css +108 -87
  166. package/components/Popover/popover.scss +120 -109
  167. package/components/Progress/progress.css +40 -52
  168. package/components/Progress/progress.scss +48 -62
  169. package/components/ProgressStepper/progress-stepper.css +26 -20
  170. package/components/ProgressStepper/progress-stepper.scss +25 -19
  171. package/components/Radio/radio.css +30 -23
  172. package/components/Radio/radio.scss +31 -25
  173. package/components/Select/select.css +56 -47
  174. package/components/Select/select.scss +56 -47
  175. package/components/Sidebar/sidebar.css +11 -5
  176. package/components/Sidebar/sidebar.scss +11 -5
  177. package/components/SimpleList/simple-list.css +45 -56
  178. package/components/SimpleList/simple-list.scss +51 -55
  179. package/components/Skeleton/skeleton.css +24 -25
  180. package/components/Skeleton/skeleton.scss +21 -26
  181. package/components/SkipToContent/skip-to-content.css +9 -6
  182. package/components/SkipToContent/skip-to-content.scss +8 -6
  183. package/components/Slider/slider.css +80 -55
  184. package/components/Slider/slider.scss +96 -65
  185. package/components/Spinner/spinner.css +17 -34
  186. package/components/Spinner/spinner.scss +19 -47
  187. package/components/Switch/switch.css +49 -41
  188. package/components/Switch/switch.scss +51 -42
  189. package/components/TabContent/tab-content.css +21 -12
  190. package/components/TabContent/tab-content.scss +22 -15
  191. package/components/Table/table-grid.css +264 -203
  192. package/components/Table/table-grid.scss +61 -47
  193. package/components/Table/table-scrollable.css +4 -4
  194. package/components/Table/table-scrollable.scss +6 -4
  195. package/components/Table/table-tree-view.css +112 -105
  196. package/components/Table/table-tree-view.scss +38 -33
  197. package/components/Table/table.css +105 -89
  198. package/components/Table/table.scss +105 -89
  199. package/components/Tabs/tabs.css +76 -48
  200. package/components/Tabs/tabs.scss +74 -48
  201. package/components/TextInputGroup/text-input-group.css +15 -15
  202. package/components/TextInputGroup/text-input-group.scss +15 -15
  203. package/components/Tile/tile.css +10 -10
  204. package/components/Tile/tile.scss +10 -10
  205. package/components/Title/title.css +70 -19
  206. package/components/Title/title.scss +90 -20
  207. package/components/ToggleGroup/toggle-group.css +14 -11
  208. package/components/ToggleGroup/toggle-group.scss +14 -11
  209. package/components/Toolbar/toolbar.css +57 -43
  210. package/components/Toolbar/toolbar.scss +45 -25
  211. package/components/Tooltip/tooltip.css +74 -44
  212. package/components/Tooltip/tooltip.scss +93 -77
  213. package/components/TreeView/tree-view.css +48 -27
  214. package/components/TreeView/tree-view.scss +50 -28
  215. package/components/Truncate/truncate.css +13 -0
  216. package/components/Truncate/truncate.scss +19 -3
  217. package/components/Wizard/wizard.css +57 -36
  218. package/components/Wizard/wizard.scss +57 -36
  219. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  220. package/docs/components/Accordion/examples/Accordion.md +614 -416
  221. package/docs/components/Alert/examples/Alert.md +3 -3
  222. package/docs/components/Avatar/examples/Avatar.md +5 -19
  223. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  224. package/docs/components/Badge/examples/Badge.md +21 -0
  225. package/docs/components/Banner/examples/Banner.md +48 -25
  226. package/docs/components/Brand/examples/Brand.css +12 -0
  227. package/docs/components/Brand/examples/Brand.md +51 -32
  228. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  229. package/docs/components/Button/examples/Button.css +6 -2
  230. package/docs/components/Button/examples/Button.md +1425 -87
  231. package/docs/components/Card/examples/Card.md +143 -37
  232. package/docs/components/Check/examples/Check.md +71 -58
  233. package/docs/components/Chip/examples/Chip.md +1 -1
  234. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  235. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  236. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  237. package/docs/components/Content/examples/Content.md +5 -5
  238. package/docs/components/Divider/examples/Divider.css +3 -1
  239. package/docs/components/Divider/examples/Divider.md +4 -5
  240. package/docs/components/DragDrop/examples/DragDrop.css +2 -2
  241. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  242. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  243. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  244. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  245. package/docs/components/Form/examples/Form.md +134 -89
  246. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  247. package/docs/components/Label/examples/Label.md +12 -12
  248. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  249. package/docs/components/LogViewer/examples/LogViewer.md +250 -160
  250. package/docs/components/Login/examples/Login.md +10 -5
  251. package/docs/components/Masthead/examples/masthead.md +443 -65
  252. package/docs/components/Menu/examples/Menu.css +8 -0
  253. package/docs/components/Menu/examples/Menu.md +594 -543
  254. package/docs/components/MenuToggle/examples/MenuToggle.md +109 -96
  255. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  256. package/docs/components/Nav/examples/Navigation.css +3 -47
  257. package/docs/components/Nav/examples/Navigation.md +305 -353
  258. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  259. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  260. package/docs/components/Page/examples/Page.css +0 -8
  261. package/docs/components/Page/examples/Page.md +22 -21
  262. package/docs/components/Pagination/examples/Pagination.md +663 -637
  263. package/docs/components/Panel/examples/Panel.md +12 -0
  264. package/docs/components/Popover/examples/Popover.css +4 -9
  265. package/docs/components/Popover/examples/Popover.md +1 -1
  266. package/docs/components/Radio/examples/Radio.md +62 -54
  267. package/docs/components/Select/deprecated/Select.md +184 -177
  268. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  269. package/docs/components/TabContent/examples/TabContent.md +10 -10
  270. package/docs/components/Table/examples/Table.css +2 -2
  271. package/docs/components/Table/examples/Table.md +10 -10
  272. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  273. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  274. package/docs/components/Tile/examples/Tile.css +1 -1
  275. package/docs/components/Title/examples/Title.md +18 -0
  276. package/docs/components/Toolbar/examples/Toolbar.md +663 -2894
  277. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  278. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  279. package/docs/components/Truncate/examples/Truncate.css +2 -2
  280. package/docs/components/Truncate/examples/Truncate.md +2 -2
  281. package/docs/demos/AboutModal/examples/AboutModal.md +103 -30
  282. package/docs/demos/Alert/examples/Alert.md +327 -84
  283. package/docs/demos/BackToTop/examples/BackToTop.md +101 -28
  284. package/docs/demos/Banner/examples/Banner.md +209 -58
  285. package/docs/demos/Card/examples/Card.css +3 -3
  286. package/docs/demos/Card/examples/Card.md +28 -12
  287. package/docs/demos/CardView/examples/CardView.md +263 -205
  288. package/docs/demos/ContextSelector/examples/ContextSelector.md +373 -90
  289. package/docs/demos/Dashboard/examples/Dashboard.md +104 -31
  290. package/docs/demos/DataList/examples/DataList.md +995 -928
  291. package/docs/demos/DescriptionList/examples/DescriptionList.md +303 -84
  292. package/docs/demos/Drawer/examples/Drawer.md +505 -140
  293. package/docs/demos/Form/examples/BasicForms.md +131 -80
  294. package/docs/demos/JumpLinks/examples/JumpLinks.md +606 -168
  295. package/docs/demos/Masthead/examples/Masthead.md +767 -323
  296. package/docs/demos/Modal/examples/Modal.md +639 -192
  297. package/docs/demos/Nav/examples/Nav.md +685 -896
  298. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +510 -140
  299. package/docs/demos/Page/examples/Page.md +933 -264
  300. package/docs/demos/Page/examples/Penta.md +569 -501
  301. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
  302. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  303. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1296 -917
  304. package/docs/demos/Skeleton/examples/Skeleton.md +108 -63
  305. package/docs/demos/Table/examples/Table.md +3832 -3390
  306. package/docs/demos/Tabs/examples/Tabs.md +636 -191
  307. package/docs/demos/Toolbar/examples/Toolbar.css +15 -0
  308. package/docs/demos/Toolbar/examples/Toolbar.md +1331 -1493
  309. package/docs/demos/Wizard/examples/Wizard.md +909 -252
  310. package/docs/layouts/Flex/examples/Flex.md +16 -16
  311. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  312. package/icons/pficons.mjs +1 -0
  313. package/layouts/Flex/flex.css +115 -43
  314. package/layouts/Flex/flex.scss +20 -8
  315. package/package.json +36 -32
  316. package/patternfly-addons.css +732 -972
  317. package/patternfly-base-no-globals-theme-dark-unversioned.css +923 -799
  318. package/patternfly-base-no-globals.css +923 -799
  319. package/patternfly-base-theme-dark-unversioned.css +928 -803
  320. package/patternfly-base.css +928 -803
  321. package/patternfly-no-globals.css +6092 -6615
  322. package/patternfly-theme-dark-unversioned.css +6097 -6619
  323. package/patternfly.css +6097 -6619
  324. package/patternfly.min.css +1 -1
  325. package/patternfly.min.css.map +1 -1
  326. package/sass-utilities/functions.scss +6 -0
  327. package/sass-utilities/mixins.scss +62 -2
  328. package/sass-utilities/scss-variables.scss +8 -8
  329. package/sass-utilities/themes/dark/mixins.scss +3 -1
  330. package/utilities/Accessibility/accessibility.css +12 -12
  331. package/utilities/Spacing/spacing.css +720 -960
  332. package/utilities/Spacing/spacing.scss +4 -8
  333. package/base/themes/dark/_variables.scss +0 -102
  334. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  335. package/components/Accordion/themes/dark/accordion.scss +0 -9
  336. package/components/Alert/themes/dark/alert.scss +0 -17
  337. package/components/Badge/themes/dark/badge.scss +0 -9
  338. package/components/Banner/themes/dark/banner.scss +0 -14
  339. package/components/Button/themes/dark/button.scss +0 -51
  340. package/components/DataList/themes/dark/data-list.scss +0 -10
  341. package/components/Form/themes/dark/form.scss +0 -7
  342. package/components/FormControl/themes/dark/form-control.scss +0 -24
  343. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  344. package/components/Hint/themes/dark/hint.scss +0 -8
  345. package/components/Login/themes/dark/login.scss +0 -12
  346. package/components/Masthead/themes/dark/masthead.scss +0 -14
  347. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  348. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  349. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  350. package/components/Page/themes/dark/page.scss +0 -69
  351. package/components/Pagination/themes/dark/pagination.scss +0 -7
  352. package/components/Panel/themes/dark/panel.scss +0 -7
  353. package/components/Popover/themes/dark/popover.scss +0 -11
  354. package/components/Progress/themes/dark/progress.scss +0 -9
  355. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  356. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  357. package/components/Switch/themes/dark/switch.scss +0 -11
  358. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  359. package/docs/components/Avatar/examples/Avatar.css +0 -3
  360. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
@@ -2,14 +2,12 @@
2
2
  id: Notification badge
3
3
  section: components
4
4
  cssPrefix: pf-v5-c-notification-badge
5
- ---import './NotificationBadge.css'
6
-
7
- ## Examples
5
+ ---## Examples
8
6
 
9
7
  ### Basic
10
8
 
11
9
  ```html
12
- <div class="pf-v5-t-dark">
10
+ <div>
13
11
  <button
14
12
  class="pf-v5-c-button pf-m-plain"
15
13
  type="button"
@@ -69,7 +67,7 @@ cssPrefix: pf-v5-c-notification-badge
69
67
  ### With count
70
68
 
71
69
  ```html
72
- <div class="pf-v5-t-dark">
70
+ <div>
73
71
  <button
74
72
  class="pf-v5-c-button pf-m-plain"
75
73
  type="button"
@@ -135,7 +133,7 @@ cssPrefix: pf-v5-c-notification-badge
135
133
  ### Expanded
136
134
 
137
135
  ```html
138
- <div class="pf-v5-t-dark">
136
+ <div>
139
137
  <button
140
138
  class="pf-v5-c-button pf-m-plain"
141
139
  type="button"
@@ -206,7 +204,7 @@ cssPrefix: pf-v5-c-notification-badge
206
204
 
207
205
  ### Overview
208
206
 
209
- Always add a modifier class to indicate read, unread, or attention state. Never use the class `.pf-v5-c-notification-badge` on its own. This component is designed to be used within a dark component such as the [masthead](/components/masthead).
207
+ Always add a modifier class to indicate read, unread, or attention state. Never use the class `.pf-v5-c-notification-badge` on its own.
210
208
 
211
209
  ### Accessibility
212
210
 
@@ -314,7 +314,10 @@ deprecated: true
314
314
  disabled
315
315
  aria-label="Sort by"
316
316
  >
317
- <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
317
+ <i
318
+ class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
319
+ aria-hidden="true"
320
+ ></i>
318
321
  </button>
319
322
  <ul
320
323
  class="pf-v5-c-options-menu__menu"
@@ -360,7 +363,10 @@ deprecated: true
360
363
  aria-expanded="false"
361
364
  aria-label="Sort by"
362
365
  >
363
- <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
366
+ <i
367
+ class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
368
+ aria-hidden="true"
369
+ ></i>
364
370
  </button>
365
371
  <ul
366
372
  class="pf-v5-c-options-menu__menu"
@@ -406,7 +412,10 @@ deprecated: true
406
412
  aria-expanded="true"
407
413
  aria-label="Sort by"
408
414
  >
409
- <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
415
+ <i
416
+ class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
417
+ aria-hidden="true"
418
+ ></i>
410
419
  </button>
411
420
  <ul
412
421
  class="pf-v5-c-options-menu__menu"
@@ -1,11 +1,3 @@
1
- .ws-core-c-page :is(.pf-v5-c-page__sidebar, .pf-v5-c-page__main-subnav) {
2
- color: var(--pf-v5-global--Color--light-100);
3
- }
4
-
5
- .ws-core-c-page .pf-v5-c-page__main-section.pf-m-dark-200 {
6
- color: var(--pf-v5-global--Color--dark-100);
7
- }
8
-
9
1
  #ws-core-c-page-with-or-without-fill .ws-preview-html,
10
2
  #ws-core-c-page-multiple-sidebar-body-elements-padding-and-fill .ws-preview-html {
11
3
  height: 500px;
@@ -32,20 +32,14 @@ wrapperTag: div
32
32
  <div class="pf-v5-c-page__sidebar-body">Navigation</div>
33
33
  </div>
34
34
  <main class="pf-v5-c-page__main" tabindex="-1">
35
- <section class="pf-v5-c-page__main-section pf-m-dark-100">
36
- This
37
- <code>.pf-v5-c-page__main-section</code> uses
38
- <code>.pf-m-dark-100</code>.
39
- </section>
40
- <section class="pf-v5-c-page__main-section pf-m-dark-200">
41
- This
42
- <code>.pf-v5-c-page__main-section</code> uses
43
- <code>.pf-m-dark-200</code>.
35
+ <section class="pf-v5-c-page__main-section">
36
+ This is a default
37
+ <code>.pf-v5-c-page__main-section</code>.
44
38
  </section>
45
- <section class="pf-v5-c-page__main-section pf-m-light">
39
+ <section class="pf-v5-c-page__main-section pf-m-secondary">
46
40
  This
47
41
  <code>.pf-v5-c-page__main-section</code> uses
48
- <code>.pf-m-light</code>.
42
+ <code>.pf-m-secondary</code>.
49
43
  </section>
50
44
  <section class="pf-v5-c-page__main-section">
51
45
  This is a default
@@ -78,10 +72,19 @@ wrapperTag: div
78
72
  </div>
79
73
  </header>
80
74
  <main class="pf-v5-c-page__main" tabindex="-1">
81
- <section class="pf-v5-c-page__main-section pf-m-dark-100"></section>
82
- <section class="pf-v5-c-page__main-section pf-m-dark-200"></section>
83
- <section class="pf-v5-c-page__main-section pf-m-light"></section>
84
- <section class="pf-v5-c-page__main-section"></section>
75
+ <section class="pf-v5-c-page__main-section">
76
+ This is a default
77
+ <code>.pf-v5-c-page__main-section</code>.
78
+ </section>
79
+ <section class="pf-v5-c-page__main-section pf-m-secondary">
80
+ This
81
+ <code>.pf-v5-c-page__main-section</code> uses
82
+ <code>.pf-m-secondary</code>.
83
+ </section>
84
+ <section class="pf-v5-c-page__main-section">
85
+ This is a default
86
+ <code>.pf-v5-c-page__main-section</code>.
87
+ </section>
85
88
  </main>
86
89
  </div>
87
90
 
@@ -116,7 +119,7 @@ wrapperTag: div
116
119
  <div class="pf-v5-c-page__sidebar-body pf-m-page-insets">footer content</div>
117
120
  </div>
118
121
  <main class="pf-v5-c-page__main" tabindex="-1">
119
- <section class="pf-v5-c-page__main-section pf-m-light"></section>
122
+ <section class="pf-v5-c-page__main-section"></section>
120
123
  </main>
121
124
  </div>
122
125
 
@@ -144,14 +147,12 @@ wrapperTag: div
144
147
  </div>
145
148
  </header>
146
149
  <main class="pf-v5-c-page__main" tabindex="-1">
147
- <section
148
- class="pf-v5-c-page__main-section pf-m-light"
149
- >A regular page section.</section>
150
+ <section class="pf-v5-c-page__main-section">A regular page section.</section>
150
151
  <section class="pf-v5-c-page__main-section pf-m-fill">
151
152
  This section uses
152
153
  <code>.pf-m-fill</code> to fill the available space.
153
154
  </section>
154
- <section class="pf-v5-c-page__main-section pf-m-light pf-m-no-fill">
155
+ <section class="pf-v5-c-page__main-section pf-m-no-fill">
155
156
  This section uses
156
157
  <code>.pf-m-no-fill</code> to not fill the available space.
157
158
  </section>
@@ -189,7 +190,7 @@ wrapperTag: div
189
190
  This
190
191
  <code>.pf-v5-c-page__main-section</code> has default padding.
191
192
  </section>
192
- <section class="pf-v5-c-page__main-section pf-m-no-padding pf-m-light">
193
+ <section class="pf-v5-c-page__main-section pf-m-no-padding">
193
194
  This
194
195
  <code>.pf-v5-c-page__main-section</code> uses
195
196
  <code>.pf-m-no-padding</code> to remove all padding.