@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/demos/PasswordGenerator/examples/PasswordGenerator.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  id: 'Password generator'
3
- section: demos
3
+ section: components
4
4
  ---## Examples
5
5
 
6
6
  ### Provide a generated password
@@ -26,23 +26,27 @@ section: demos
26
26
  </div>
27
27
  <div class="pf-c-form__group-control">
28
28
  <div class="pf-c-input-group">
29
- <input
30
- class="pf-c-form-control"
31
- required
32
- type="password"
33
- id="password-generator-demo--initial-password"
34
- name="password-generator-demo--initial-password"
35
- aria-label="Password input"
36
- value
37
- placeholder="Password"
38
- />
39
- <button
40
- class="pf-c-button pf-m-control"
41
- type="button"
42
- aria-label="Show password"
43
- >
44
- <i class="fas fa-eye" aria-hidden="true"></i>
45
- </button>
29
+ <div class="pf-c-input-group__item pf-m-fill">
30
+ <input
31
+ class="pf-c-form-control"
32
+ required
33
+ type="password"
34
+ id="password-generator-demo--initial-password"
35
+ name="password-generator-demo--initial-password"
36
+ aria-label="Password input"
37
+ value
38
+ placeholder="Password"
39
+ />
40
+ </div>
41
+ <div class="pf-c-input-group__item">
42
+ <button
43
+ class="pf-c-button pf-m-control"
44
+ type="button"
45
+ aria-label="Show password"
46
+ >
47
+ <i class="fas fa-eye" aria-hidden="true"></i>
48
+ </button>
49
+ </div>
46
50
  </div>
47
51
  <div class="pf-c-menu">
48
52
  <div class="pf-c-menu__content">
package/docs/demos/PasswordStrength/examples/PasswordStrength.md CHANGED
@@ -1,7 +1,6 @@
1
1
  ---
2
2
  id: 'Password strength'
3
- beta: true
4
- section: demos
3
+ section: components
5
4
  ---## Examples
6
5
 
7
6
  ### Initial state
@@ -27,51 +26,55 @@ section: demos
27
26
  </div>
28
27
  <div class="pf-c-form__group-control">
29
28
  <div class="pf-c-input-group">
30
- <input
31
- class="pf-c-form-control"
32
- required
33
- type="text"
34
- id="password-strength-demo--initial-password"
35
- name="password-strength-demo--initial-password"
36
- aria-label="Password input"
37
- value
38
- placeholder="Password"
39
- />
40
- <button
41
- class="pf-c-button pf-m-control"
42
- type="button"
43
- aria-label="Show password"
44
- >
45
- <i class="fas fa-eye-slash" aria-hidden="true"></i>
46
- </button>
29
+ <div class="pf-c-input-group__item pf-m-fill">
30
+ <input
31
+ class="pf-c-form-control"
32
+ required
33
+ type="text"
34
+ id="password-strength-demo--initial-password"
35
+ name="password-strength-demo--initial-password"
36
+ aria-label="Password input"
37
+ value
38
+ placeholder="Password"
39
+ />
40
+ </div>
41
+ <div class="pf-c-input-group__item">
42
+ <button
43
+ class="pf-c-button pf-m-control"
44
+ type="button"
45
+ aria-label="Show password"
46
+ >
47
+ <i class="fas fa-eye-slash" aria-hidden="true"></i>
48
+ </button>
49
+ </div>
47
50
  </div>
48
- <div class="pf-c-form__helper-text">
49
- <ul class="pf-c-helper-text">
50
- <li class="pf-c-helper-text__item pf-m-dynamic pf-m-indeterminate">
51
+ <div class="pf-c-form__helper-text" aria-live="polite">
52
+ <div class="pf-c-helper-text">
53
+ <div class="pf-c-helper-text__item pf-m-indeterminate pf-m-dynamic">
51
54
  <span class="pf-c-helper-text__item-icon">
52
55
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
53
56
  </span>
54
57
  <span
55
58
  class="pf-c-helper-text__item-text"
56
59
  >Must be at least 14 characters</span>
57
- </li>
58
- <li class="pf-c-helper-text__item pf-m-dynamic pf-m-indeterminate">
60
+ </div>
61
+ <div class="pf-c-helper-text__item pf-m-indeterminate pf-m-dynamic">
59
62
  <span class="pf-c-helper-text__item-icon">
60
63
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
61
64
  </span>
62
65
  <span
63
66
  class="pf-c-helper-text__item-text"
64
67
  >Cannot contain the word "redhat"</span>
65
- </li>
66
- <li class="pf-c-helper-text__item pf-m-dynamic pf-m-indeterminate">
68
+ </div>
69
+ <div class="pf-c-helper-text__item pf-m-indeterminate pf-m-dynamic">
67
70
  <span class="pf-c-helper-text__item-icon">
68
71
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
69
72
  </span>
70
73
  <span
71
74
  class="pf-c-helper-text__item-text"
72
75
  >Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols</span>
73
- </li>
74
- </ul>
76
+ </div>
77
+ </div>
75
78
  </div>
76
79
  </div>
77
80
  </div>
@@ -102,51 +105,55 @@ section: demos
102
105
  </div>
103
106
  <div class="pf-c-form__group-control">
104
107
  <div class="pf-c-input-group">
105
- <input
106
- class="pf-c-form-control"
107
- required
108
- type="text"
109
- id="password-strength-demo--invalid-password"
110
- name="password-strength-demo--invalid-password"
111
- aria-label="Password input"
112
- value="Marie$RedHat78"
113
- placeholder="Password"
114
- />
115
- <button
116
- class="pf-c-button pf-m-control"
117
- type="button"
118
- aria-label="Show password"
119
- >
120
- <i class="fas fa-eye-slash" aria-hidden="true"></i>
121
- </button>
108
+ <div class="pf-c-input-group__item pf-m-fill">
109
+ <input
110
+ class="pf-c-form-control"
111
+ required
112
+ type="text"
113
+ id="password-strength-demo--invalid-password"
114
+ name="password-strength-demo--invalid-password"
115
+ aria-label="Password input"
116
+ value="Marie$RedHat78"
117
+ placeholder="Password"
118
+ />
119
+ </div>
120
+ <div class="pf-c-input-group__item">
121
+ <button
122
+ class="pf-c-button pf-m-control"
123
+ type="button"
124
+ aria-label="Show password"
125
+ >
126
+ <i class="fas fa-eye-slash" aria-hidden="true"></i>
127
+ </button>
128
+ </div>
122
129
  </div>
123
- <div class="pf-c-form__helper-text">
124
- <ul class="pf-c-helper-text">
125
- <li class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
130
+ <div class="pf-c-form__helper-text" aria-live="polite">
131
+ <div class="pf-c-helper-text">
132
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
126
133
  <span class="pf-c-helper-text__item-icon">
127
134
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
128
135
  </span>
129
136
  <span
130
137
  class="pf-c-helper-text__item-text"
131
138
  >Must be at least 14 characters</span>
132
- </li>
133
- <li class="pf-c-helper-text__item pf-m-dynamic pf-m-error">
139
+ </div>
140
+ <div class="pf-c-helper-text__item pf-m-error pf-m-dynamic">
134
141
  <span class="pf-c-helper-text__item-icon">
135
142
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
136
143
  </span>
137
144
  <span
138
145
  class="pf-c-helper-text__item-text"
139
146
  >Cannot contain the word "redhat"</span>
140
- </li>
141
- <li class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
147
+ </div>
148
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
142
149
  <span class="pf-c-helper-text__item-icon">
143
150
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
144
151
  </span>
145
152
  <span
146
153
  class="pf-c-helper-text__item-text"
147
154
  >Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols</span>
148
- </li>
149
- </ul>
155
+ </div>
156
+ </div>
150
157
  </div>
151
158
  </div>
152
159
  </div>
@@ -186,51 +193,55 @@ section: demos
186
193
  </div>
187
194
  <div class="pf-c-form__group-control">
188
195
  <div class="pf-c-input-group">
189
- <input
190
- class="pf-c-form-control"
191
- required
192
- type="text"
193
- id="password-strength-demo--weak-password"
194
- name="password-strength-demo--weak-password"
195
- aria-label="Password input"
196
- value="Marie$Can3Read"
197
- placeholder="Password"
198
- />
199
- <button
200
- class="pf-c-button pf-m-control"
201
- type="button"
202
- aria-label="Show password"
203
- >
204
- <i class="fas fa-eye-slash" aria-hidden="true"></i>
205
- </button>
196
+ <div class="pf-c-input-group__item pf-m-fill">
197
+ <input
198
+ class="pf-c-form-control"
199
+ required
200
+ type="text"
201
+ id="password-strength-demo--weak-password"
202
+ name="password-strength-demo--weak-password"
203
+ aria-label="Password input"
204
+ value="Marie$Can3Read"
205
+ placeholder="Password"
206
+ />
207
+ </div>
208
+ <div class="pf-c-input-group__item">
209
+ <button
210
+ class="pf-c-button pf-m-control"
211
+ type="button"
212
+ aria-label="Show password"
213
+ >
214
+ <i class="fas fa-eye-slash" aria-hidden="true"></i>
215
+ </button>
216
+ </div>
206
217
  </div>
207
- <div class="pf-c-form__helper-text">
208
- <ul class="pf-c-helper-text">
209
- <li class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
218
+ <div class="pf-c-form__helper-text" aria-live="polite">
219
+ <div class="pf-c-helper-text">
220
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
210
221
  <span class="pf-c-helper-text__item-icon">
211
222
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
212
223
  </span>
213
224
  <span
214
225
  class="pf-c-helper-text__item-text"
215
226
  >Must be at least 14 characters</span>
216
- </li>
217
- <li class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
227
+ </div>
228
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
218
229
  <span class="pf-c-helper-text__item-icon">
219
230
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
220
231
  </span>
221
232
  <span
222
233
  class="pf-c-helper-text__item-text"
223
234
  >Cannot contain the word "redhat"</span>
224
- </li>
225
- <li class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
235
+ </div>
236
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
226
237
  <span class="pf-c-helper-text__item-icon">
227
238
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
228
239
  </span>
229
240
  <span
230
241
  class="pf-c-helper-text__item-text"
231
242
  >Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols</span>
232
- </li>
233
- </ul>
243
+ </div>
244
+ </div>
234
245
  </div>
235
246
  </div>
236
247
  </div>
@@ -270,51 +281,55 @@ section: demos
270
281
  </div>
271
282
  <div class="pf-c-form__group-control">
272
283
  <div class="pf-c-input-group">
273
- <input
274
- class="pf-c-form-control"
275
- required
276
- type="text"
277
- id="password-strength-demo--strong-password"
278
- name="password-strength-demo--strong-password"
279
- aria-label="Password input"
280
- value="Marie$Can8Read3Pass@Word"
281
- placeholder="Password"
282
- />
283
- <button
284
- class="pf-c-button pf-m-control"
285
- type="button"
286
- aria-label="Show password"
287
- >
288
- <i class="fas fa-eye-slash" aria-hidden="true"></i>
289
- </button>
284
+ <div class="pf-c-input-group__item pf-m-fill">
285
+ <input
286
+ class="pf-c-form-control"
287
+ required
288
+ type="text"
289
+ id="password-strength-demo--strong-password"
290
+ name="password-strength-demo--strong-password"
291
+ aria-label="Password input"
292
+ value="Marie$Can8Read3Pass@Word"
293
+ placeholder="Password"
294
+ />
295
+ </div>
296
+ <div class="pf-c-input-group__item">
297
+ <button
298
+ class="pf-c-button pf-m-control"
299
+ type="button"
300
+ aria-label="Show password"
301
+ >
302
+ <i class="fas fa-eye-slash" aria-hidden="true"></i>
303
+ </button>
304
+ </div>
290
305
  </div>
291
- <div class="pf-c-form__helper-text">
292
- <ul class="pf-c-helper-text">
293
- <li class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
306
+ <div class="pf-c-form__helper-text" aria-live="polite">
307
+ <div class="pf-c-helper-text">
308
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
294
309
  <span class="pf-c-helper-text__item-icon">
295
310
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
296
311
  </span>
297
312
  <span
298
313
  class="pf-c-helper-text__item-text"
299
314
  >Must be at least 14 characters</span>
300
- </li>
301
- <li class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
315
+ </div>
316
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
302
317
  <span class="pf-c-helper-text__item-icon">
303
318
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
304
319
  </span>
305
320
  <span
306
321
  class="pf-c-helper-text__item-text"
307
322
  >Cannot contain the word "redhat"</span>
308
- </li>
309
- <li class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
323
+ </div>
324
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
310
325
  <span class="pf-c-helper-text__item-icon">
311
326
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
312
327
  </span>
313
328
  <span
314
329
  class="pf-c-helper-text__item-text"
315
330
  >Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols</span>
316
- </li>
317
- </ul>
331
+ </div>
332
+ </div>
318
333
  </div>
319
334
  </div>
320
335
  </div>