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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (342) hide show
  1. package/README.md +4 -4
  2. package/RELEASE-NOTES.md +18 -1
  3. package/assets/icons/iconUnicodes.json +1 -0
  4. package/assets/images/pfbg-icon.svg +1 -0
  5. package/assets/pficon/pficon.scss +7 -2
  6. package/assets/pficon/pficon.woff2 +0 -0
  7. package/base/_base.scss +0 -18
  8. package/base/_chart-globals.scss +0 -4
  9. package/base/_common.scss +0 -22
  10. package/base/_fa-icons.scss +1 -2
  11. package/base/_fonts.scss +22 -27
  12. package/base/_globals.scss +92 -86
  13. package/base/_icons.scss +1 -28
  14. package/base/_svg-icons.scss +6 -0
  15. package/base/_variables.scss +4 -4
  16. package/base/patternfly-common.css +0 -10
  17. package/base/patternfly-fa-icons.css +1 -1
  18. package/base/patternfly-fonts.css +17 -17
  19. package/base/patternfly-globals.css +35 -41
  20. package/base/patternfly-icons.css +8 -22
  21. package/base/patternfly-pf-icons.css +6 -2
  22. package/base/patternfly-themes.css +0 -42
  23. package/base/patternfly-variables.css +3 -3
  24. package/base/themes/dark/_globals.scss +1 -1
  25. package/base/themes/dark/_variables.scss +1 -1
  26. package/components/AboutModalBox/about-modal-box.css +20 -50
  27. package/components/AboutModalBox/about-modal-box.scss +22 -14
  28. package/components/Accordion/accordion.css +2 -0
  29. package/components/Accordion/accordion.scss +2 -0
  30. package/components/Alert/alert.css +17 -8
  31. package/components/Alert/alert.scss +21 -7
  32. package/components/Alert/themes/dark/alert.scss +1 -1
  33. package/components/AppLauncher/app-launcher.css +2 -0
  34. package/components/AppLauncher/app-launcher.scss +2 -0
  35. package/components/Avatar/avatar.scss +2 -2
  36. package/components/BackgroundImage/background-image.css +8 -35
  37. package/components/BackgroundImage/background-image.scss +17 -43
  38. package/components/Banner/banner.css +14 -52
  39. package/components/Banner/banner.scss +9 -13
  40. package/components/Breadcrumb/breadcrumb.css +2 -0
  41. package/components/Breadcrumb/breadcrumb.scss +2 -0
  42. package/components/CalendarMonth/calendar-month.css +2 -2
  43. package/components/CalendarMonth/calendar-month.scss +3 -3
  44. package/components/Card/card.css +115 -50
  45. package/components/Card/card.scss +164 -63
  46. package/components/Chip/chip.css +33 -24
  47. package/components/Chip/chip.scss +40 -31
  48. package/components/ChipGroup/chip-group.css +27 -17
  49. package/components/ChipGroup/chip-group.scss +36 -22
  50. package/components/Content/content.css +11 -5
  51. package/components/Content/content.scss +17 -9
  52. package/components/ContextSelector/context-selector.css +13 -6
  53. package/components/ContextSelector/context-selector.scss +14 -7
  54. package/components/DataList/data-list-grid.css +7 -7
  55. package/components/DataList/data-list-grid.scss +1 -1
  56. package/components/DataList/data-list.css +46 -40
  57. package/components/DataList/data-list.scss +37 -28
  58. package/components/DatePicker/date-picker.css +0 -8
  59. package/components/DatePicker/date-picker.scss +0 -9
  60. package/components/DescriptionList/description-list.css +7 -7
  61. package/components/DescriptionList/description-list.scss +7 -7
  62. package/components/Divider/divider.css +2 -2
  63. package/components/Divider/divider.scss +3 -3
  64. package/components/Drawer/drawer.css +15 -16
  65. package/components/Drawer/drawer.scss +2 -3
  66. package/components/Dropdown/dropdown.css +26 -25
  67. package/components/Dropdown/dropdown.scss +17 -18
  68. package/components/DualListSelector/dual-list-selector.css +1 -1
  69. package/components/DualListSelector/dual-list-selector.scss +1 -1
  70. package/components/EmptyState/empty-state.css +46 -52
  71. package/components/EmptyState/empty-state.scss +58 -57
  72. package/components/ExpandableSection/expandable-section.css +2 -0
  73. package/components/ExpandableSection/expandable-section.scss +2 -0
  74. package/components/Form/form.css +14 -12
  75. package/components/Form/form.scss +9 -7
  76. package/components/FormControl/form-control.css +2 -5
  77. package/components/FormControl/themes/dark/form-control.scss +2 -6
  78. package/components/HelperText/helper-text.css +4 -0
  79. package/components/HelperText/helper-text.scss +5 -0
  80. package/components/Hint/hint.css +2 -2
  81. package/components/Hint/hint.scss +2 -2
  82. package/components/Icon/icon.css +3 -3
  83. package/components/Icon/icon.scss +3 -3
  84. package/components/InputGroup/input-group.css +61 -85
  85. package/components/InputGroup/input-group.scss +55 -61
  86. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  87. package/components/Label/label.css +49 -36
  88. package/components/Label/label.scss +53 -38
  89. package/components/Label/themes/dark/label.scss +2 -2
  90. package/components/LabelGroup/label-group.css +26 -22
  91. package/components/LabelGroup/label-group.scss +31 -26
  92. package/components/LogViewer/log-viewer.css +0 -38
  93. package/components/Login/login.css +20 -60
  94. package/components/Login/login.scss +16 -18
  95. package/components/Login/themes/dark/login.scss +4 -0
  96. package/components/Masthead/masthead.css +4 -42
  97. package/components/Masthead/masthead.scss +4 -4
  98. package/components/Menu/menu.css +9 -6
  99. package/components/Menu/menu.scss +34 -31
  100. package/components/MenuToggle/menu-toggle.css +3 -1
  101. package/components/MenuToggle/menu-toggle.scss +3 -1
  102. package/components/ModalBox/modal-box.css +12 -11
  103. package/components/ModalBox/modal-box.scss +14 -14
  104. package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
  105. package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
  106. package/components/Nav/nav.css +1 -1
  107. package/components/Nav/nav.scss +2 -2
  108. package/components/NotificationDrawer/notification-drawer.css +8 -8
  109. package/components/NotificationDrawer/notification-drawer.scss +8 -8
  110. package/components/OptionsMenu/options-menu.css +8 -10
  111. package/components/OptionsMenu/options-menu.scss +9 -11
  112. package/components/Page/page.css +101 -122
  113. package/components/Page/page.scss +49 -21
  114. package/components/Pagination/pagination.css +2 -110
  115. package/components/Pagination/pagination.scss +0 -6
  116. package/components/Popover/popover.css +31 -37
  117. package/components/Popover/popover.scss +32 -37
  118. package/components/Popover/themes/dark/popover.scss +3 -9
  119. package/components/Progress/progress.css +13 -10
  120. package/components/Progress/progress.scss +13 -10
  121. package/components/ProgressStepper/progress-stepper.css +5 -5
  122. package/components/ProgressStepper/progress-stepper.scss +5 -5
  123. package/components/SearchInput/search-input.css +4 -2
  124. package/components/SearchInput/search-input.scss +4 -2
  125. package/components/Select/select.css +1 -1
  126. package/components/Select/select.scss +1 -1
  127. package/components/Sidebar/sidebar.css +69 -26
  128. package/components/Sidebar/sidebar.scss +84 -27
  129. package/components/SimpleList/simple-list.css +1 -1
  130. package/components/SimpleList/simple-list.scss +2 -2
  131. package/components/Spinner/spinner.css +4 -133
  132. package/components/Spinner/spinner.scss +4 -173
  133. package/components/Table/table-grid.css +28 -28
  134. package/components/Table/table-scrollable.css +31 -26
  135. package/components/Table/table-scrollable.scss +33 -28
  136. package/components/Table/table-tree-view.css +14 -4
  137. package/components/Table/table-tree-view.scss +15 -0
  138. package/components/Table/table.css +67 -65
  139. package/components/Table/table.scss +65 -62
  140. package/components/Tabs/tabs.css +0 -4
  141. package/components/Tabs/tabs.scss +0 -7
  142. package/components/TextInputGroup/text-input-group.css +6 -4
  143. package/components/TextInputGroup/text-input-group.scss +6 -5
  144. package/components/Tile/tile.css +1 -1
  145. package/components/Tile/tile.scss +1 -1
  146. package/components/Timestamp/timestamp.css +3 -3
  147. package/components/Timestamp/timestamp.scss +3 -3
  148. package/components/Toolbar/toolbar.css +78 -43
  149. package/components/Toolbar/toolbar.scss +50 -10
  150. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  151. package/components/Tooltip/tooltip.css +7 -12
  152. package/components/Tooltip/tooltip.scss +6 -3
  153. package/components/TreeView/tree-view.css +7 -15
  154. package/components/TreeView/tree-view.scss +7 -18
  155. package/components/Wizard/wizard.css +16 -39
  156. package/components/Wizard/wizard.scss +20 -2
  157. package/docs/components/AboutModalBox/examples/AboutModalBox.md +20 -14
  158. package/docs/components/Accordion/examples/Accordion.md +12 -12
  159. package/docs/components/ActionList/examples/ActionList.md +6 -6
  160. package/docs/components/Alert/examples/Alert.md +29 -29
  161. package/docs/components/AlertGroup/examples/AlertGroup.md +15 -15
  162. package/docs/components/AppLauncher/examples/application-launcher.md +52 -46
  163. package/docs/components/Avatar/examples/Avatar.md +11 -11
  164. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  165. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  166. package/docs/components/BackgroundImage/examples/BackgroundImage.md +13 -29
  167. package/docs/components/Badge/examples/Badge.md +5 -5
  168. package/docs/components/Banner/examples/Banner.md +8 -8
  169. package/docs/components/Brand/examples/Brand.md +9 -9
  170. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  171. package/docs/components/Button/examples/Button.md +51 -55
  172. package/docs/components/CalendarMonth/examples/CalendarMonth.md +301 -284
  173. package/docs/components/Card/examples/Card.md +676 -116
  174. package/docs/components/Check/examples/Check.md +16 -19
  175. package/docs/components/Chip/examples/Chip.md +70 -52
  176. package/docs/components/ChipGroup/examples/ChipGroup.md +452 -673
  177. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  178. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  179. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  180. package/docs/components/Content/examples/Content.md +37 -9
  181. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  182. package/docs/components/ContextSelector/examples/context-selector.md +87 -80
  183. package/docs/components/DataList/examples/DataList.md +239 -202
  184. package/docs/components/DatePicker/examples/DatePicker.md +139 -104
  185. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  186. package/docs/components/Divider/examples/Divider.md +10 -10
  187. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  188. package/docs/components/Drawer/examples/Drawer.md +43 -43
  189. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  190. package/docs/components/Dropdown/examples/Dropdown.md +125 -100
  191. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  192. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  193. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  194. package/docs/components/FileUpload/examples/FileUpload.md +150 -110
  195. package/docs/components/Form/examples/Form.md +152 -130
  196. package/docs/components/FormControl/examples/FormControl.md +21 -20
  197. package/docs/components/HelperText/examples/HelperText.md +24 -35
  198. package/docs/components/Hint/examples/Hint.md +7 -7
  199. package/docs/components/Icon/examples/Icon.md +11 -12
  200. package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
  201. package/docs/components/InputGroup/examples/InputGroup.md +229 -179
  202. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  203. package/docs/components/Label/examples/Label.md +1427 -746
  204. package/docs/components/LabelGroup/examples/LabelGroup.md +295 -242
  205. package/docs/components/List/examples/List.md +18 -18
  206. package/docs/components/LogViewer/examples/LogViewer.md +79 -74
  207. package/docs/components/Login/examples/Login.md +103 -181
  208. package/docs/components/Masthead/examples/masthead.md +9 -9
  209. package/docs/components/Menu/examples/Menu.md +93 -85
  210. package/docs/components/MenuToggle/examples/MenuToggle.md +29 -28
  211. package/docs/components/ModalBox/examples/ModalBox.md +113 -92
  212. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +27 -26
  213. package/docs/components/Nav/examples/Navigation.md +69 -69
  214. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  215. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +64 -64
  216. package/docs/components/NumberInput/examples/NumberInput.md +311 -239
  217. package/docs/components/OptionsMenu/examples/options-menu.md +28 -28
  218. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  219. package/docs/components/Page/examples/Page.css +7 -1
  220. package/docs/components/Page/examples/Page.md +81 -54
  221. package/docs/components/Pagination/examples/Pagination.md +27 -27
  222. package/docs/components/Panel/examples/Panel.md +10 -10
  223. package/docs/components/Popover/examples/Popover.md +206 -149
  224. package/docs/components/Progress/examples/Progress.md +32 -61
  225. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -39
  226. package/docs/components/Radio/examples/Radio.md +12 -11
  227. package/docs/components/SearchInput/examples/SearchInput.md +185 -148
  228. package/docs/components/Select/examples/Select.md +372 -318
  229. package/docs/components/Sidebar/examples/Sidebar.md +70 -14
  230. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  231. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  232. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  233. package/docs/components/Slider/examples/Slider.md +84 -62
  234. package/docs/components/Spinner/examples/Spinner.md +18 -67
  235. package/docs/components/Switch/examples/Switch.md +19 -19
  236. package/docs/components/TabContent/examples/TabContent.md +13 -13
  237. package/docs/components/Table/examples/Table.css +4 -0
  238. package/docs/components/Table/examples/Table.md +5212 -5750
  239. package/docs/components/Tabs/examples/Tabs.md +155 -155
  240. package/docs/components/TextInputGroup/examples/TextInputGroup.md +523 -406
  241. package/docs/components/Tile/examples/Tile.md +16 -17
  242. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  243. package/docs/components/Title/examples/Title.md +17 -17
  244. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  245. package/docs/components/Toolbar/examples/Toolbar.md +848 -726
  246. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  247. package/docs/components/TreeView/examples/TreeView.md +34 -34
  248. package/docs/components/Truncate/examples/Truncate.md +4 -5
  249. package/docs/components/Wizard/examples/Wizard.md +119 -127
  250. package/docs/demos/AboutModal/examples/AboutModal.md +4 -5
  251. package/docs/demos/Alert/examples/Alert.md +118 -71
  252. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  253. package/docs/demos/Banner/examples/Banner.md +8 -9
  254. package/docs/demos/Button/examples/Button.md +10 -5
  255. package/docs/demos/Card/examples/Card.md +246 -168
  256. package/docs/demos/CardView/examples/CardView.md +57 -30
  257. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  258. package/docs/demos/Dashboard/examples/Dashboard.md +61 -38
  259. package/docs/demos/DataList/examples/DataList.md +312 -255
  260. package/docs/demos/DescriptionList/examples/DescriptionList.md +33 -22
  261. package/docs/demos/Drawer/examples/Drawer.md +24 -22
  262. package/docs/demos/Form/examples/BasicForms.md +220 -213
  263. package/docs/demos/HelperText/examples/HelperText.md +16 -14
  264. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  265. package/docs/demos/Masthead/examples/Masthead.md +302 -284
  266. package/docs/demos/Modal/examples/Modal.md +54 -66
  267. package/docs/demos/Nav/examples/Nav.md +47 -47
  268. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +70 -58
  269. package/docs/demos/Page/examples/Page.md +982 -51
  270. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +22 -18
  271. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +121 -106
  272. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +345 -311
  273. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  274. package/docs/demos/Table/examples/Table.md +3373 -1333
  275. package/docs/demos/Tabs/examples/Tabs.md +141 -90
  276. package/docs/demos/Toolbar/examples/Toolbar.md +1994 -329
  277. package/docs/demos/Wizard/examples/Wizard.md +289 -266
  278. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  279. package/docs/layouts/Flex/examples/Flex.md +98 -98
  280. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  281. package/docs/layouts/Grid/examples/Grid.md +9 -9
  282. package/docs/layouts/Level/examples/Level.md +5 -5
  283. package/docs/layouts/Split/examples/Split.md +7 -7
  284. package/docs/layouts/Stack/examples/Stack.md +6 -6
  285. package/docs/utilities/Accessibility/examples/Accessibility.md +5 -5
  286. package/docs/utilities/Alignment/examples/Alignment.md +7 -7
  287. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +13 -13
  288. package/docs/utilities/BoxShadow/examples/box-shadow.md +23 -23
  289. package/docs/utilities/Display/examples/Display.md +12 -12
  290. package/docs/utilities/Flex/examples/Flex.md +35 -35
  291. package/docs/utilities/Float/examples/Float.md +5 -5
  292. package/docs/utilities/Sizing/examples/Sizing.md +51 -51
  293. package/docs/utilities/Spacing/examples/Spacing.md +35 -35
  294. package/docs/utilities/Text/examples/Text.md +31 -31
  295. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  296. package/layouts/Gallery/gallery.css +1 -1
  297. package/layouts/Gallery/gallery.scss +1 -1
  298. package/layouts/Grid/grid.css +7 -7
  299. package/layouts/Grid/grid.scss +2 -2
  300. package/package.json +60 -66
  301. package/patternfly-addons.css +48 -48
  302. package/{patternfly-base-no-reset.css → patternfly-base-no-globals.css} +28 -73
  303. package/{patternfly-base-no-reset.scss → patternfly-base-no-globals.scss} +1 -0
  304. package/patternfly-base.css +63 -114
  305. package/{patternfly-no-reset.css → patternfly-no-globals.css} +1206 -2449
  306. package/{patternfly-no-reset.scss → patternfly-no-globals.scss} +1 -0
  307. package/patternfly.css +1234 -2483
  308. package/patternfly.min.css +1 -1
  309. package/patternfly.min.css.map +1 -1
  310. package/sass-utilities/functions.scss +8 -24
  311. package/sass-utilities/mixins.scss +15 -39
  312. package/sass-utilities/placeholders.scss +0 -23
  313. package/sass-utilities/scss-variables.scss +5 -6
  314. package/sass-utilities/themes/dark/placeholders.scss +0 -22
  315. package/sass-utilities/themes/dark/scss-variables.scss +1 -1
  316. package/utilities/Spacing/spacing.scss +2 -2
  317. package/utilities/Text/text.css +48 -48
  318. package/utilities/Text/text.scss +6 -6
  319. package/utilities/Text/themes/dark/text.scss +2 -2
  320. package/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff +0 -0
  321. package/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff +0 -0
  322. package/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff +0 -0
  323. package/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff +0 -0
  324. package/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff +0 -0
  325. package/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff +0 -0
  326. package/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff +0 -0
  327. package/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff +0 -0
  328. package/assets/fonts/RedHatText/RedHatText-Bold.woff +0 -0
  329. package/assets/fonts/RedHatText/RedHatText-BoldItalic.woff +0 -0
  330. package/assets/fonts/RedHatText/RedHatText-Italic.woff +0 -0
  331. package/assets/fonts/RedHatText/RedHatText-Medium.woff +0 -0
  332. package/assets/fonts/RedHatText/RedHatText-MediumItalic.woff +0 -0
  333. package/assets/fonts/RedHatText/RedHatText-Regular.woff +0 -0
  334. package/assets/fonts/webfonts/fa-solid-900.woff +0 -0
  335. package/assets/pficon/pficon.woff +0 -0
  336. package/base/_shield-inheritable.scss +0 -69
  337. package/base/_shield-noninheritable.scss +0 -13
  338. package/base/patternfly-shield-inheritable.css +0 -66
  339. package/base/patternfly-shield-inheritable.scss +0 -4
  340. package/base/patternfly-shield-noninheritable.css +0 -9
  341. package/base/patternfly-shield-noninheritable.scss +0 -4
  342. package/sass-utilities/bs-variables.scss +0 -709
package/docs/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>