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

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 (340) hide show
  1. package/RELEASE-NOTES.md +18 -1
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/images/pfbg-icon.svg +1 -0
  4. package/assets/pficon/pficon.scss +7 -2
  5. package/assets/pficon/pficon.woff2 +0 -0
  6. package/base/_base.scss +0 -18
  7. package/base/_chart-globals.scss +0 -4
  8. package/base/_common.scss +0 -22
  9. package/base/_fa-icons.scss +1 -2
  10. package/base/_fonts.scss +22 -27
  11. package/base/_globals.scss +92 -86
  12. package/base/_icons.scss +1 -28
  13. package/base/_svg-icons.scss +6 -0
  14. package/base/_variables.scss +4 -4
  15. package/base/patternfly-common.css +0 -10
  16. package/base/patternfly-fa-icons.css +1 -1
  17. package/base/patternfly-fonts.css +17 -17
  18. package/base/patternfly-globals.css +35 -41
  19. package/base/patternfly-icons.css +8 -22
  20. package/base/patternfly-pf-icons.css +6 -2
  21. package/base/patternfly-themes.css +0 -42
  22. package/base/patternfly-variables.css +3 -3
  23. package/base/themes/dark/_globals.scss +1 -1
  24. package/base/themes/dark/_variables.scss +1 -1
  25. package/components/AboutModalBox/about-modal-box.css +20 -50
  26. package/components/AboutModalBox/about-modal-box.scss +22 -14
  27. package/components/Accordion/accordion.css +2 -0
  28. package/components/Accordion/accordion.scss +2 -0
  29. package/components/Alert/alert.css +17 -8
  30. package/components/Alert/alert.scss +21 -7
  31. package/components/Alert/themes/dark/alert.scss +1 -1
  32. package/components/AppLauncher/app-launcher.css +2 -0
  33. package/components/AppLauncher/app-launcher.scss +2 -0
  34. package/components/Avatar/avatar.scss +2 -2
  35. package/components/BackgroundImage/background-image.css +8 -35
  36. package/components/BackgroundImage/background-image.scss +17 -43
  37. package/components/Banner/banner.css +14 -52
  38. package/components/Banner/banner.scss +9 -13
  39. package/components/Breadcrumb/breadcrumb.css +2 -0
  40. package/components/Breadcrumb/breadcrumb.scss +2 -0
  41. package/components/CalendarMonth/calendar-month.css +2 -2
  42. package/components/CalendarMonth/calendar-month.scss +3 -3
  43. package/components/Card/card.css +115 -50
  44. package/components/Card/card.scss +164 -63
  45. package/components/Chip/chip.css +33 -24
  46. package/components/Chip/chip.scss +40 -31
  47. package/components/ChipGroup/chip-group.css +27 -17
  48. package/components/ChipGroup/chip-group.scss +36 -22
  49. package/components/Content/content.css +11 -5
  50. package/components/Content/content.scss +17 -9
  51. package/components/ContextSelector/context-selector.css +13 -6
  52. package/components/ContextSelector/context-selector.scss +14 -7
  53. package/components/DataList/data-list-grid.css +7 -7
  54. package/components/DataList/data-list-grid.scss +1 -1
  55. package/components/DataList/data-list.css +46 -40
  56. package/components/DataList/data-list.scss +37 -28
  57. package/components/DatePicker/date-picker.css +0 -8
  58. package/components/DatePicker/date-picker.scss +0 -9
  59. package/components/DescriptionList/description-list.css +7 -7
  60. package/components/DescriptionList/description-list.scss +7 -7
  61. package/components/Divider/divider.css +2 -2
  62. package/components/Divider/divider.scss +3 -3
  63. package/components/Drawer/drawer.css +15 -16
  64. package/components/Drawer/drawer.scss +2 -3
  65. package/components/Dropdown/dropdown.css +26 -25
  66. package/components/Dropdown/dropdown.scss +17 -18
  67. package/components/DualListSelector/dual-list-selector.css +1 -1
  68. package/components/DualListSelector/dual-list-selector.scss +1 -1
  69. package/components/EmptyState/empty-state.css +46 -52
  70. package/components/EmptyState/empty-state.scss +58 -57
  71. package/components/ExpandableSection/expandable-section.css +2 -0
  72. package/components/ExpandableSection/expandable-section.scss +2 -0
  73. package/components/Form/form.css +14 -12
  74. package/components/Form/form.scss +9 -7
  75. package/components/FormControl/form-control.css +2 -5
  76. package/components/FormControl/themes/dark/form-control.scss +2 -6
  77. package/components/HelperText/helper-text.css +4 -0
  78. package/components/HelperText/helper-text.scss +5 -0
  79. package/components/Hint/hint.css +2 -2
  80. package/components/Hint/hint.scss +2 -2
  81. package/components/Icon/icon.css +3 -3
  82. package/components/Icon/icon.scss +3 -3
  83. package/components/InputGroup/input-group.css +61 -85
  84. package/components/InputGroup/input-group.scss +55 -61
  85. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  86. package/components/Label/label.css +49 -36
  87. package/components/Label/label.scss +53 -38
  88. package/components/Label/themes/dark/label.scss +2 -2
  89. package/components/LabelGroup/label-group.css +26 -22
  90. package/components/LabelGroup/label-group.scss +31 -26
  91. package/components/LogViewer/log-viewer.css +0 -38
  92. package/components/Login/login.css +20 -60
  93. package/components/Login/login.scss +16 -18
  94. package/components/Login/themes/dark/login.scss +4 -0
  95. package/components/Masthead/masthead.css +4 -42
  96. package/components/Masthead/masthead.scss +4 -4
  97. package/components/Menu/menu.css +9 -6
  98. package/components/Menu/menu.scss +34 -31
  99. package/components/MenuToggle/menu-toggle.css +3 -1
  100. package/components/MenuToggle/menu-toggle.scss +3 -1
  101. package/components/ModalBox/modal-box.css +12 -11
  102. package/components/ModalBox/modal-box.scss +14 -14
  103. package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
  104. package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
  105. package/components/Nav/nav.css +1 -1
  106. package/components/Nav/nav.scss +2 -2
  107. package/components/NotificationDrawer/notification-drawer.css +8 -8
  108. package/components/NotificationDrawer/notification-drawer.scss +8 -8
  109. package/components/OptionsMenu/options-menu.css +8 -10
  110. package/components/OptionsMenu/options-menu.scss +9 -11
  111. package/components/Page/page.css +101 -122
  112. package/components/Page/page.scss +49 -21
  113. package/components/Pagination/pagination.css +2 -110
  114. package/components/Pagination/pagination.scss +0 -6
  115. package/components/Popover/popover.css +31 -37
  116. package/components/Popover/popover.scss +32 -37
  117. package/components/Popover/themes/dark/popover.scss +3 -9
  118. package/components/Progress/progress.css +13 -10
  119. package/components/Progress/progress.scss +13 -10
  120. package/components/ProgressStepper/progress-stepper.css +5 -5
  121. package/components/ProgressStepper/progress-stepper.scss +5 -5
  122. package/components/SearchInput/search-input.css +4 -2
  123. package/components/SearchInput/search-input.scss +4 -2
  124. package/components/Select/select.css +1 -1
  125. package/components/Select/select.scss +1 -1
  126. package/components/Sidebar/sidebar.css +69 -26
  127. package/components/Sidebar/sidebar.scss +84 -27
  128. package/components/SimpleList/simple-list.css +1 -1
  129. package/components/SimpleList/simple-list.scss +2 -2
  130. package/components/Spinner/spinner.css +4 -4
  131. package/components/Spinner/spinner.scss +4 -4
  132. package/components/Table/table-grid.css +28 -28
  133. package/components/Table/table-scrollable.css +31 -26
  134. package/components/Table/table-scrollable.scss +33 -28
  135. package/components/Table/table-tree-view.css +14 -4
  136. package/components/Table/table-tree-view.scss +15 -0
  137. package/components/Table/table.css +67 -65
  138. package/components/Table/table.scss +65 -62
  139. package/components/Tabs/tabs.css +0 -4
  140. package/components/Tabs/tabs.scss +0 -7
  141. package/components/TextInputGroup/text-input-group.css +6 -4
  142. package/components/TextInputGroup/text-input-group.scss +6 -5
  143. package/components/Tile/tile.css +1 -1
  144. package/components/Tile/tile.scss +1 -1
  145. package/components/Timestamp/timestamp.css +3 -3
  146. package/components/Timestamp/timestamp.scss +3 -3
  147. package/components/Toolbar/toolbar.css +78 -43
  148. package/components/Toolbar/toolbar.scss +50 -10
  149. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  150. package/components/Tooltip/tooltip.css +7 -12
  151. package/components/Tooltip/tooltip.scss +6 -3
  152. package/components/TreeView/tree-view.css +7 -15
  153. package/components/TreeView/tree-view.scss +7 -18
  154. package/components/Wizard/wizard.css +16 -39
  155. package/components/Wizard/wizard.scss +20 -2
  156. package/docs/components/AboutModalBox/examples/AboutModalBox.md +20 -14
  157. package/docs/components/Accordion/examples/Accordion.md +12 -12
  158. package/docs/components/ActionList/examples/ActionList.md +6 -6
  159. package/docs/components/Alert/examples/Alert.md +29 -29
  160. package/docs/components/AlertGroup/examples/AlertGroup.md +15 -15
  161. package/docs/components/AppLauncher/examples/application-launcher.md +52 -46
  162. package/docs/components/Avatar/examples/Avatar.md +11 -11
  163. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  164. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  165. package/docs/components/BackgroundImage/examples/BackgroundImage.md +13 -29
  166. package/docs/components/Badge/examples/Badge.md +5 -5
  167. package/docs/components/Banner/examples/Banner.md +8 -8
  168. package/docs/components/Brand/examples/Brand.md +9 -9
  169. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  170. package/docs/components/Button/examples/Button.md +35 -35
  171. package/docs/components/CalendarMonth/examples/CalendarMonth.md +301 -284
  172. package/docs/components/Card/examples/Card.md +676 -116
  173. package/docs/components/Check/examples/Check.md +16 -19
  174. package/docs/components/Chip/examples/Chip.md +70 -52
  175. package/docs/components/ChipGroup/examples/ChipGroup.md +452 -673
  176. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  177. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  178. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  179. package/docs/components/Content/examples/Content.md +37 -9
  180. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  181. package/docs/components/ContextSelector/examples/context-selector.md +87 -80
  182. package/docs/components/DataList/examples/DataList.md +239 -202
  183. package/docs/components/DatePicker/examples/DatePicker.md +139 -104
  184. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  185. package/docs/components/Divider/examples/Divider.md +10 -10
  186. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  187. package/docs/components/Drawer/examples/Drawer.md +43 -43
  188. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  189. package/docs/components/Dropdown/examples/Dropdown.md +125 -100
  190. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  191. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  192. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  193. package/docs/components/FileUpload/examples/FileUpload.md +146 -105
  194. package/docs/components/Form/examples/Form.md +152 -130
  195. package/docs/components/FormControl/examples/FormControl.md +21 -20
  196. package/docs/components/HelperText/examples/HelperText.md +24 -35
  197. package/docs/components/Hint/examples/Hint.md +7 -7
  198. package/docs/components/Icon/examples/Icon.md +11 -12
  199. package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
  200. package/docs/components/InputGroup/examples/InputGroup.md +229 -179
  201. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  202. package/docs/components/Label/examples/Label.md +1427 -746
  203. package/docs/components/LabelGroup/examples/LabelGroup.md +295 -242
  204. package/docs/components/List/examples/List.md +18 -18
  205. package/docs/components/LogViewer/examples/LogViewer.md +79 -74
  206. package/docs/components/Login/examples/Login.md +103 -181
  207. package/docs/components/Masthead/examples/masthead.md +9 -9
  208. package/docs/components/Menu/examples/Menu.md +83 -80
  209. package/docs/components/MenuToggle/examples/MenuToggle.md +29 -28
  210. package/docs/components/ModalBox/examples/ModalBox.md +113 -92
  211. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +27 -26
  212. package/docs/components/Nav/examples/Navigation.md +69 -69
  213. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  214. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +64 -64
  215. package/docs/components/NumberInput/examples/NumberInput.md +311 -239
  216. package/docs/components/OptionsMenu/examples/options-menu.md +28 -28
  217. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  218. package/docs/components/Page/examples/Page.css +7 -1
  219. package/docs/components/Page/examples/Page.md +81 -54
  220. package/docs/components/Pagination/examples/Pagination.md +27 -27
  221. package/docs/components/Panel/examples/Panel.md +10 -10
  222. package/docs/components/Popover/examples/Popover.md +206 -149
  223. package/docs/components/Progress/examples/Progress.md +32 -61
  224. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -39
  225. package/docs/components/Radio/examples/Radio.md +12 -11
  226. package/docs/components/SearchInput/examples/SearchInput.md +185 -148
  227. package/docs/components/Select/examples/Select.md +368 -313
  228. package/docs/components/Sidebar/examples/Sidebar.md +70 -14
  229. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  230. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  231. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  232. package/docs/components/Slider/examples/Slider.md +84 -62
  233. package/docs/components/Spinner/examples/Spinner.md +24 -24
  234. package/docs/components/Switch/examples/Switch.md +19 -19
  235. package/docs/components/TabContent/examples/TabContent.md +13 -13
  236. package/docs/components/Table/examples/Table.css +4 -0
  237. package/docs/components/Table/examples/Table.md +5212 -5750
  238. package/docs/components/Tabs/examples/Tabs.md +155 -155
  239. package/docs/components/TextInputGroup/examples/TextInputGroup.md +523 -406
  240. package/docs/components/Tile/examples/Tile.md +16 -17
  241. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  242. package/docs/components/Title/examples/Title.md +17 -17
  243. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  244. package/docs/components/Toolbar/examples/Toolbar.md +848 -726
  245. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  246. package/docs/components/TreeView/examples/TreeView.md +34 -34
  247. package/docs/components/Truncate/examples/Truncate.md +4 -5
  248. package/docs/components/Wizard/examples/Wizard.md +119 -127
  249. package/docs/demos/AboutModal/examples/AboutModal.md +4 -5
  250. package/docs/demos/Alert/examples/Alert.md +118 -71
  251. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  252. package/docs/demos/Banner/examples/Banner.md +8 -9
  253. package/docs/demos/Card/examples/Card.md +216 -153
  254. package/docs/demos/CardView/examples/CardView.md +57 -30
  255. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  256. package/docs/demos/Dashboard/examples/Dashboard.md +51 -33
  257. package/docs/demos/DataList/examples/DataList.md +312 -255
  258. package/docs/demos/DescriptionList/examples/DescriptionList.md +33 -22
  259. package/docs/demos/Drawer/examples/Drawer.md +24 -22
  260. package/docs/demos/Form/examples/BasicForms.md +220 -213
  261. package/docs/demos/HelperText/examples/HelperText.md +16 -14
  262. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  263. package/docs/demos/Masthead/examples/Masthead.md +302 -284
  264. package/docs/demos/Modal/examples/Modal.md +54 -66
  265. package/docs/demos/Nav/examples/Nav.md +47 -47
  266. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +70 -58
  267. package/docs/demos/Page/examples/Page.md +982 -51
  268. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +22 -18
  269. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +121 -106
  270. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +345 -311
  271. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  272. package/docs/demos/Table/examples/Table.md +3323 -1288
  273. package/docs/demos/Tabs/examples/Tabs.md +141 -90
  274. package/docs/demos/Toolbar/examples/Toolbar.md +1994 -329
  275. package/docs/demos/Wizard/examples/Wizard.md +289 -266
  276. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  277. package/docs/layouts/Flex/examples/Flex.md +98 -98
  278. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  279. package/docs/layouts/Grid/examples/Grid.md +9 -9
  280. package/docs/layouts/Level/examples/Level.md +5 -5
  281. package/docs/layouts/Split/examples/Split.md +7 -7
  282. package/docs/layouts/Stack/examples/Stack.md +6 -6
  283. package/docs/utilities/Accessibility/examples/Accessibility.md +5 -5
  284. package/docs/utilities/Alignment/examples/Alignment.md +7 -7
  285. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +13 -13
  286. package/docs/utilities/BoxShadow/examples/box-shadow.md +23 -23
  287. package/docs/utilities/Display/examples/Display.md +12 -12
  288. package/docs/utilities/Flex/examples/Flex.md +35 -35
  289. package/docs/utilities/Float/examples/Float.md +5 -5
  290. package/docs/utilities/Sizing/examples/Sizing.md +51 -51
  291. package/docs/utilities/Spacing/examples/Spacing.md +35 -35
  292. package/docs/utilities/Text/examples/Text.md +31 -31
  293. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  294. package/layouts/Gallery/gallery.css +1 -1
  295. package/layouts/Gallery/gallery.scss +1 -1
  296. package/layouts/Grid/grid.css +7 -7
  297. package/layouts/Grid/grid.scss +2 -2
  298. package/package.json +59 -65
  299. package/patternfly-addons.css +48 -48
  300. package/{patternfly-base-no-reset.css → patternfly-base-no-globals.css} +28 -73
  301. package/{patternfly-base-no-reset.scss → patternfly-base-no-globals.scss} +1 -0
  302. package/patternfly-base.css +63 -114
  303. package/{patternfly-no-reset.css → patternfly-no-globals.css} +1179 -2293
  304. package/{patternfly-no-reset.scss → patternfly-no-globals.scss} +1 -0
  305. package/patternfly.css +1207 -2327
  306. package/patternfly.min.css +1 -1
  307. package/patternfly.min.css.map +1 -1
  308. package/sass-utilities/functions.scss +8 -24
  309. package/sass-utilities/mixins.scss +15 -39
  310. package/sass-utilities/placeholders.scss +0 -23
  311. package/sass-utilities/scss-variables.scss +5 -6
  312. package/sass-utilities/themes/dark/placeholders.scss +0 -22
  313. package/sass-utilities/themes/dark/scss-variables.scss +1 -1
  314. package/utilities/Spacing/spacing.scss +2 -2
  315. package/utilities/Text/text.css +48 -48
  316. package/utilities/Text/text.scss +6 -6
  317. package/utilities/Text/themes/dark/text.scss +2 -2
  318. package/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff +0 -0
  319. package/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff +0 -0
  320. package/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff +0 -0
  321. package/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff +0 -0
  322. package/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff +0 -0
  323. package/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff +0 -0
  324. package/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff +0 -0
  325. package/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff +0 -0
  326. package/assets/fonts/RedHatText/RedHatText-Bold.woff +0 -0
  327. package/assets/fonts/RedHatText/RedHatText-BoldItalic.woff +0 -0
  328. package/assets/fonts/RedHatText/RedHatText-Italic.woff +0 -0
  329. package/assets/fonts/RedHatText/RedHatText-Medium.woff +0 -0
  330. package/assets/fonts/RedHatText/RedHatText-MediumItalic.woff +0 -0
  331. package/assets/fonts/RedHatText/RedHatText-Regular.woff +0 -0
  332. package/assets/fonts/webfonts/fa-solid-900.woff +0 -0
  333. package/assets/pficon/pficon.woff +0 -0
  334. package/base/_shield-inheritable.scss +0 -69
  335. package/base/_shield-noninheritable.scss +0 -13
  336. package/base/patternfly-shield-inheritable.css +0 -66
  337. package/base/patternfly-shield-inheritable.scss +0 -4
  338. package/base/patternfly-shield-noninheritable.css +0 -9
  339. package/base/patternfly-shield-noninheritable.scss +0 -4
  340. package/sass-utilities/bs-variables.scss +0 -709
package/docs/components/Login/examples/Login.md CHANGED
@@ -8,30 +8,7 @@ wrapperTag: div
8
8
  ### Basic
9
9
 
10
10
  ```html isFullscreen
11
- <div class="pf-c-background-image">
12
- <svg
13
- xmlns="http://www.w3.org/2000/svg"
14
- class="pf-c-background-image__filter"
15
- width="0"
16
- height="0"
17
- >
18
- <filter id="image_overlay">
19
- <feColorMatrix
20
- type="matrix"
21
- values="1 0 0 0 0
22
- 1 0 0 0 0
23
- 1 0 0 0 0
24
- 0 0 0 1 0"
25
- />
26
- <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
27
- <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451" />
28
- <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451" />
29
- <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451" />
30
- <feFuncA type="table" tableValues="0 1" />
31
- </feComponentTransfer>
32
- </filter>
33
- </svg>
34
- </div>
11
+ <div class="pf-c-background-image"></div>
35
12
  <div class="pf-c-login">
36
13
  <div class="pf-c-login__container">
37
14
  <header class="pf-c-login__header">
@@ -50,12 +27,18 @@ wrapperTag: div
50
27
  </header>
51
28
  <div class="pf-c-login__main-body">
52
29
  <form class="pf-c-form" novalidate>
53
- <p class="pf-c-form__helper-text pf-m-error pf-m-hidden">
54
- <span class="pf-c-form__helper-text-icon">
55
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
56
- </span>
57
- Invalid login credentials.
58
- </p>
30
+ <div class="pf-c-form__helper-text" aria-live="polite">
31
+ <div class="pf-c-helper-text pf-m-hidden">
32
+ <div class="pf-c-helper-text__item pf-m-error" id="-helper">
33
+ <span class="pf-c-helper-text__item-icon">
34
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
35
+ </span>
36
+ <span
37
+ class="pf-c-helper-text__item-text"
38
+ >Invalid login credentials.</span>
39
+ </div>
40
+ </div>
41
+ </div>
59
42
  <div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-username">
60
43
  <span class="pf-c-form__label-text">Username</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
61
44
 
@@ -104,7 +87,7 @@ wrapperTag: div
104
87
  </form>
105
88
  </div>
106
89
  <footer class="pf-c-login__main-footer">
107
- <ul class="pf-c-login__main-footer-links">
90
+ <ul class="pf-c-login__main-footer-links" role="list">
108
91
  <li class="pf-c-login__main-footer-links-item">
109
92
  <a
110
93
  href="#"
@@ -204,7 +187,7 @@ wrapperTag: div
204
187
  </main>
205
188
  <footer class="pf-c-login__footer">
206
189
  <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
207
- <ul class="pf-c-list pf-m-inline">
190
+ <ul class="pf-c-list pf-m-inline" role="list">
208
191
  <li>
209
192
  <a href="#">Terms of use</a>
210
193
  </li>
@@ -224,30 +207,7 @@ wrapperTag: div
224
207
  ### Invalid
225
208
 
226
209
  ```html isFullscreen
227
- <div class="pf-c-background-image">
228
- <svg
229
- xmlns="http://www.w3.org/2000/svg"
230
- class="pf-c-background-image__filter"
231
- width="0"
232
- height="0"
233
- >
234
- <filter id="image_overlay">
235
- <feColorMatrix
236
- type="matrix"
237
- values="1 0 0 0 0
238
- 1 0 0 0 0
239
- 1 0 0 0 0
240
- 0 0 0 1 0"
241
- />
242
- <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
243
- <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451" />
244
- <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451" />
245
- <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451" />
246
- <feFuncA type="table" tableValues="0 1" />
247
- </feComponentTransfer>
248
- </filter>
249
- </svg>
250
- </div>
210
+ <div class="pf-c-background-image"></div>
251
211
  <div class="pf-c-login">
252
212
  <div class="pf-c-login__container">
253
213
  <header class="pf-c-login__header">
@@ -266,12 +226,18 @@ wrapperTag: div
266
226
  </header>
267
227
  <div class="pf-c-login__main-body">
268
228
  <form class="pf-c-form" novalidate>
269
- <p class="pf-c-form__helper-text pf-m-error" aria-live="polite">
270
- <span class="pf-c-form__helper-text-icon">
271
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
272
- </span>
273
- Invalid login credentials.
274
- </p>
229
+ <div class="pf-c-form__helper-text" aria-live="polite">
230
+ <div class="pf-c-helper-text">
231
+ <div class="pf-c-helper-text__item pf-m-error" id="-helper">
232
+ <span class="pf-c-helper-text__item-icon">
233
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
234
+ </span>
235
+ <span
236
+ class="pf-c-helper-text__item-text"
237
+ >Invalid login credentials.</span>
238
+ </div>
239
+ </div>
240
+ </div>
275
241
  <div class="pf-c-form__group"><label
276
242
  class="pf-c-form__label"
277
243
  for="invalid-login-demo-form-username"
@@ -326,7 +292,7 @@ wrapperTag: div
326
292
  </form>
327
293
  </div>
328
294
  <footer class="pf-c-login__main-footer">
329
- <ul class="pf-c-login__main-footer-links">
295
+ <ul class="pf-c-login__main-footer-links" role="list">
330
296
  <li class="pf-c-login__main-footer-links-item">
331
297
  <a
332
298
  href="#"
@@ -426,7 +392,7 @@ wrapperTag: div
426
392
  </main>
427
393
  <footer class="pf-c-login__footer">
428
394
  <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
429
- <ul class="pf-c-list pf-m-inline">
395
+ <ul class="pf-c-list pf-m-inline" role="list">
430
396
  <li>
431
397
  <a href="#">Terms of use</a>
432
398
  </li>
@@ -446,30 +412,7 @@ wrapperTag: div
446
412
  ### Show password
447
413
 
448
414
  ```html isFullscreen
449
- <div class="pf-c-background-image">
450
- <svg
451
- xmlns="http://www.w3.org/2000/svg"
452
- class="pf-c-background-image__filter"
453
- width="0"
454
- height="0"
455
- >
456
- <filter id="image_overlay">
457
- <feColorMatrix
458
- type="matrix"
459
- values="1 0 0 0 0
460
- 1 0 0 0 0
461
- 1 0 0 0 0
462
- 0 0 0 1 0"
463
- />
464
- <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
465
- <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451" />
466
- <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451" />
467
- <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451" />
468
- <feFuncA type="table" tableValues="0 1" />
469
- </feComponentTransfer>
470
- </filter>
471
- </svg>
472
- </div>
415
+ <div class="pf-c-background-image"></div>
473
416
  <div class="pf-c-login">
474
417
  <div class="pf-c-login__container">
475
418
  <header class="pf-c-login__header">
@@ -488,12 +431,18 @@ wrapperTag: div
488
431
  </header>
489
432
  <div class="pf-c-login__main-body">
490
433
  <form class="pf-c-form" novalidate>
491
- <p class="pf-c-form__helper-text pf-m-error pf-m-hidden">
492
- <span class="pf-c-form__helper-text-icon">
493
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
494
- </span>
495
- Invalid login credentials.
496
- </p>
434
+ <div class="pf-c-form__helper-text" aria-live="polite">
435
+ <div class="pf-c-helper-text pf-m-hidden">
436
+ <div class="pf-c-helper-text__item pf-m-error" id="-helper">
437
+ <span class="pf-c-helper-text__item-icon">
438
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
439
+ </span>
440
+ <span
441
+ class="pf-c-helper-text__item-text"
442
+ >Invalid login credentials.</span>
443
+ </div>
444
+ </div>
445
+ </div>
497
446
  <div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-username">
498
447
  <span class="pf-c-form__label-text">Username</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
499
448
 
@@ -553,7 +502,7 @@ wrapperTag: div
553
502
  </form>
554
503
  </div>
555
504
  <footer class="pf-c-login__main-footer">
556
- <ul class="pf-c-login__main-footer-links">
505
+ <ul class="pf-c-login__main-footer-links" role="list">
557
506
  <li class="pf-c-login__main-footer-links-item">
558
507
  <a
559
508
  href="#"
@@ -653,7 +602,7 @@ wrapperTag: div
653
602
  </main>
654
603
  <footer class="pf-c-login__footer">
655
604
  <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
656
- <ul class="pf-c-list pf-m-inline">
605
+ <ul class="pf-c-list pf-m-inline" role="list">
657
606
  <li>
658
607
  <a href="#">Terms of use</a>
659
608
  </li>
@@ -673,30 +622,7 @@ wrapperTag: div
673
622
  ### Hide password
674
623
 
675
624
  ```html isFullscreen
676
- <div class="pf-c-background-image">
677
- <svg
678
- xmlns="http://www.w3.org/2000/svg"
679
- class="pf-c-background-image__filter"
680
- width="0"
681
- height="0"
682
- >
683
- <filter id="image_overlay">
684
- <feColorMatrix
685
- type="matrix"
686
- values="1 0 0 0 0
687
- 1 0 0 0 0
688
- 1 0 0 0 0
689
- 0 0 0 1 0"
690
- />
691
- <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
692
- <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451" />
693
- <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451" />
694
- <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451" />
695
- <feFuncA type="table" tableValues="0 1" />
696
- </feComponentTransfer>
697
- </filter>
698
- </svg>
699
- </div>
625
+ <div class="pf-c-background-image"></div>
700
626
  <div class="pf-c-login">
701
627
  <div class="pf-c-login__container">
702
628
  <header class="pf-c-login__header">
@@ -715,12 +641,25 @@ wrapperTag: div
715
641
  </header>
716
642
  <div class="pf-c-login__main-body">
717
643
  <form class="pf-c-form" novalidate>
718
- <p class="pf-c-form__helper-text pf-m-error pf-m-hidden">
719
- <span class="pf-c-form__helper-text-icon">
720
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
721
- </span>
644
+ <div class="pf-c-form__helper-text" aria-live="polite">
645
+ <div class="pf-c-helper-text pf-m-hidden">
646
+ <div class="pf-c-helper-text__item pf-m-error" id="-helper">
647
+ <span class="pf-c-helper-text__item-icon">
648
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
649
+ </span>
650
+ <span
651
+ class="pf-c-helper-text__item-text"
652
+ >Invalid login credentials.</span>
653
+ </div>
654
+ </div>
655
+ </div>
656
+ <div
657
+ class="pf-c-form__helper-text pf-m-error pf-m-hidden"
658
+ aria-live="polite"
659
+ >
660
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
722
661
  Invalid login credentials.
723
- </p>
662
+ </div>
724
663
  <div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-username">
725
664
  <span class="pf-c-form__label-text">Username</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
726
665
 
@@ -780,7 +719,7 @@ wrapperTag: div
780
719
  </form>
781
720
  </div>
782
721
  <footer class="pf-c-login__main-footer">
783
- <ul class="pf-c-login__main-footer-links">
722
+ <ul class="pf-c-login__main-footer-links" role="list">
784
723
  <li class="pf-c-login__main-footer-links-item">
785
724
  <a
786
725
  href="#"
@@ -880,7 +819,7 @@ wrapperTag: div
880
819
  </main>
881
820
  <footer class="pf-c-login__footer">
882
821
  <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
883
- <ul class="pf-c-list pf-m-inline">
822
+ <ul class="pf-c-list pf-m-inline" role="list">
884
823
  <li>
885
824
  <a href="#">Terms of use</a>
886
825
  </li>
@@ -900,30 +839,7 @@ wrapperTag: div
900
839
  ### With language selector
901
840
 
902
841
  ```html isFullscreen
903
- <div class="pf-c-background-image">
904
- <svg
905
- xmlns="http://www.w3.org/2000/svg"
906
- class="pf-c-background-image__filter"
907
- width="0"
908
- height="0"
909
- >
910
- <filter id="image_overlay">
911
- <feColorMatrix
912
- type="matrix"
913
- values="1 0 0 0 0
914
- 1 0 0 0 0
915
- 1 0 0 0 0
916
- 0 0 0 1 0"
917
- />
918
- <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
919
- <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451" />
920
- <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451" />
921
- <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451" />
922
- <feFuncA type="table" tableValues="0 1" />
923
- </feComponentTransfer>
924
- </filter>
925
- </svg>
926
- </div>
842
+ <div class="pf-c-background-image"></div>
927
843
  <div class="pf-c-login">
928
844
  <div class="pf-c-login__container">
929
845
  <header class="pf-c-login__header">
@@ -988,12 +904,18 @@ wrapperTag: div
988
904
  </header>
989
905
  <div class="pf-c-login__main-body">
990
906
  <form class="pf-c-form" novalidate>
991
- <p class="pf-c-form__helper-text pf-m-error pf-m-hidden">
992
- <span class="pf-c-form__helper-text-icon">
993
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
994
- </span>
995
- Invalid login credentials.
996
- </p>
907
+ <div class="pf-c-form__helper-text" aria-live="polite">
908
+ <div class="pf-c-helper-text pf-m-hidden">
909
+ <div class="pf-c-helper-text__item pf-m-error" id="-helper">
910
+ <span class="pf-c-helper-text__item-icon">
911
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
912
+ </span>
913
+ <span
914
+ class="pf-c-helper-text__item-text"
915
+ >Invalid login credentials.</span>
916
+ </div>
917
+ </div>
918
+ </div>
997
919
  <div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-username">
998
920
  <span class="pf-c-form__label-text">Username</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
999
921
 
@@ -1042,7 +964,7 @@ wrapperTag: div
1042
964
  </form>
1043
965
  </div>
1044
966
  <footer class="pf-c-login__main-footer">
1045
- <ul class="pf-c-login__main-footer-links">
967
+ <ul class="pf-c-login__main-footer-links" role="list">
1046
968
  <li class="pf-c-login__main-footer-links-item">
1047
969
  <a
1048
970
  href="#"
@@ -1142,7 +1064,7 @@ wrapperTag: div
1142
1064
  </main>
1143
1065
  <footer class="pf-c-login__footer">
1144
1066
  <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
1145
- <ul class="pf-c-list pf-m-inline">
1067
+ <ul class="pf-c-list pf-m-inline" role="list">
1146
1068
  <li>
1147
1069
  <a href="#">Terms of use</a>
1148
1070
  </li>
@@ -1163,25 +1085,25 @@ wrapperTag: div
1163
1085
 
1164
1086
  ### Usage
1165
1087
 
1166
- | Class | Applied to | Outcome |
1167
- | --------------------------------------------------------------------- | ------------------------------- | -------------------------------------------------------------------------------------------------------------- |
1168
- | `.pf-c-login` | `<div>` | Initializes the login component. **Required** |
1169
- | `.pf-c-login__container` | `<div>` | Positions the login component content. **Required** |
1170
- | `.pf-c-login__header` | `<header>` | Positions the login header. **Required** |
1171
- | `.pf-c-login__header .pf-c-brand` | `<img>` | Creates a brand image inside of login header. **Required** |
1172
- | `.pf-c-login__main` | `<main>` | Positions the login main area. **Required** |
1173
- | `.pf-c-login__main-header` | `<header>` | Creates the header of the main area. **Required** |
1174
- | `.pf-c-login__main-header .pf-c-title` | `<h1>,<h2>,<h3>,<h4>,<h5>,<h6>` | Creates a title in the main header area. **Required** |
1175
- | `.pf-c-login__main-header-desc` | `<p>` | Creates the description in the main area header. |
1176
- | `.pf-c-login__main-header-utilities` | `<div>` | Creates a utilities section in the main header area. **Note:** For use with a language selector menu. |
1177
- | `.pf-c-login__main-body` | `<div>` | Creates the body of the main area. **Required** |
1178
- | `.pf-c-login__main-body .pf-c-form` | `<form>` | Creates the login form in the main body area. **Required** |
1179
- | `.pf-c-login__main-body .pf-c-form .pf-c-form-helper-text.pf-m-error` | `<form>` | Creates the error messages shown when the form has errors. When not active, apply `.pf-m-hidden.` **Required** |
1180
- | `.pf-c-login__main-footer` | `<footer>` | Creates the footer of the main area. **Required** |
1181
- | `.pf-c-login__main-footer-links` | `<ul>` | Creates a list of links in the main footer. **Required** |
1182
- | `.pf-c-login__main-footer-links-item` | `<li>` | Creates proper spacing for links in the main footer. **Required** |
1183
- | `.pf-c-login__main-footer-links-item-link` | `<a>` | Creates link in links list in footer. **Required** |
1184
- | `.pf-c-login__main-footer-band` | `<div>` | Styles a band in the footer. |
1185
- | `.pf-c-login__main-footer-band-item` | `<p>` | Adds information to the band in the footer. |
1186
- | `.pf-c-login__footer` | `<footer>` | Positions the login footer. **Required** |
1187
- | `.pf-c-login__footer .pf-c-list` | `<ul>` | Creates a list of links in the login footer. **Required** |
1088
+ | Class | Applied to | Outcome |
1089
+ | -- | -- | -- |
1090
+ | `.pf-c-login` | `<div>` | Initializes the login component. **Required**|
1091
+ | `.pf-c-login__container` | `<div>` | Positions the login component content. **Required**|
1092
+ | `.pf-c-login__header` | `<header>` | Positions the login header. **Required**|
1093
+ | `.pf-c-login__header .pf-c-brand` | `<img>` | Creates a brand image inside of login header. **Required** |
1094
+ | `.pf-c-login__main` | `<main>` | Positions the login main area. **Required** |
1095
+ | `.pf-c-login__main-header` | `<header>` | Creates the header of the main area. **Required** |
1096
+ | `.pf-c-login__main-header .pf-c-title` | `<h1>,<h2>,<h3>,<h4>,<h5>,<h6>` | Creates a title in the main header area. **Required** |
1097
+ | `.pf-c-login__main-header-desc` | `<p>` | Creates the description in the main area header. |
1098
+ | `.pf-c-login__main-header-utilities` | `<div>` | Creates a utilities section in the main header area. **Note:** For use with a language selector menu. |
1099
+ | `.pf-c-login__main-body` | `<div>` | Creates the body of the main area. **Required** |
1100
+ | `.pf-c-login__main-body .pf-c-form` | `<form>` | Creates the login form in the main body area. **Required**|
1101
+ | `.pf-c-login__main-body .pf-c-form .pf-c-form-helper-text` | `<form>` | Creates the error messages shown when the form has errors. When not active, apply `.pf-m-hidden`. **Required** |
1102
+ | `.pf-c-login__main-footer` | `<footer>` | Creates the footer of the main area. **Required** |
1103
+ | `.pf-c-login__main-footer-links` | `<ul>` | Creates a list of links in the main footer. **Required** |
1104
+ | `.pf-c-login__main-footer-links-item` | `<li>` | Creates proper spacing for links in the main footer. **Required** |
1105
+ | `.pf-c-login__main-footer-links-item-link` | `<a>` | Creates link in links list in footer. **Required** |
1106
+ | `.pf-c-login__main-footer-band` | `<div>` | Styles a band in the footer. |
1107
+ | `.pf-c-login__main-footer-band-item` | `<p>` | Adds information to the band in the footer. |
1108
+ | `.pf-c-login__footer` | `<footer>` | Positions the login footer. **Required** |
1109
+ | `.pf-c-login__footer .pf-c-list` | `<ul>` | Creates a list of links in the login footer. **Required** |
package/docs/components/Masthead/examples/masthead.md CHANGED
@@ -200,13 +200,13 @@ cssPrefix: pf-c-masthead
200
200
 
201
201
  ### Usage
202
202
 
203
- | Class | Applied to | Outcome |
204
- | ----------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
205
- | `.pf-c-masthead` | `<header>` | Initiates the masthead component. **Required** |
206
- | `.pf-c-masthead__main` | `<div>` | Initiates the masthead main component. **Required** |
207
- | `.pf-c-masthead__toggle` | `<span>` | Initiates the masthead toggle component. |
208
- | `.pf-c-masthead__brand` | `<a>, <div>` | Initiates the masthead content component. |
209
- | `.pf-c-masthead__content` | `<div>` | Initiates the masthead content component. |
203
+ | Class | Applied to | Outcome |
204
+ | -- | -- | -- |
205
+ | `.pf-c-masthead` | `<header>` | Initiates the masthead component. **Required** |
206
+ | `.pf-c-masthead__main` | `<div>` | Initiates the masthead main component. **Required** |
207
+ | `.pf-c-masthead__toggle` | `<span>` | Initiates the masthead toggle component. |
208
+ | `.pf-c-masthead__brand` | `<a>, <div>` | Initiates the masthead content component. |
209
+ | `.pf-c-masthead__content` | `<div>` | Initiates the masthead content component. |
210
210
  | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-masthead` | Modifies masthead horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
211
- | `.pf-m-light` | `.pf-c-masthead` | Modifies a masthead component to have a light theme with a background color of `--pf-global--BackgroundColor--100`. |
212
- | `.pf-m-light-200` | `.pf-c-masthead` | Modifies a masthead component to have a light theme with a background color of `--pf-global--BackgroundColor--200`. |
211
+ | `.pf-m-light` | `.pf-c-masthead` | Modifies a masthead component to have a light theme with a background color of `--pf-global--BackgroundColor--100`. |
212
+ | `.pf-m-light-200` | `.pf-c-masthead` | Modifies a masthead component to have a light theme with a background color of `--pf-global--BackgroundColor--200`. |