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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (342) hide show
  1. package/README.md +4 -4
  2. package/RELEASE-NOTES.md +18 -1
  3. package/assets/icons/iconUnicodes.json +1 -0
  4. package/assets/images/pfbg-icon.svg +1 -0
  5. package/assets/pficon/pficon.scss +7 -2
  6. package/assets/pficon/pficon.woff2 +0 -0
  7. package/base/_base.scss +0 -18
  8. package/base/_chart-globals.scss +0 -4
  9. package/base/_common.scss +0 -22
  10. package/base/_fa-icons.scss +1 -2
  11. package/base/_fonts.scss +22 -27
  12. package/base/_globals.scss +92 -86
  13. package/base/_icons.scss +1 -28
  14. package/base/_svg-icons.scss +6 -0
  15. package/base/_variables.scss +4 -4
  16. package/base/patternfly-common.css +0 -10
  17. package/base/patternfly-fa-icons.css +1 -1
  18. package/base/patternfly-fonts.css +17 -17
  19. package/base/patternfly-globals.css +35 -41
  20. package/base/patternfly-icons.css +8 -22
  21. package/base/patternfly-pf-icons.css +6 -2
  22. package/base/patternfly-themes.css +0 -42
  23. package/base/patternfly-variables.css +3 -3
  24. package/base/themes/dark/_globals.scss +1 -1
  25. package/base/themes/dark/_variables.scss +1 -1
  26. package/components/AboutModalBox/about-modal-box.css +20 -50
  27. package/components/AboutModalBox/about-modal-box.scss +22 -14
  28. package/components/Accordion/accordion.css +2 -0
  29. package/components/Accordion/accordion.scss +2 -0
  30. package/components/Alert/alert.css +17 -8
  31. package/components/Alert/alert.scss +21 -7
  32. package/components/Alert/themes/dark/alert.scss +1 -1
  33. package/components/AppLauncher/app-launcher.css +2 -0
  34. package/components/AppLauncher/app-launcher.scss +2 -0
  35. package/components/Avatar/avatar.scss +2 -2
  36. package/components/BackgroundImage/background-image.css +8 -35
  37. package/components/BackgroundImage/background-image.scss +17 -43
  38. package/components/Banner/banner.css +14 -52
  39. package/components/Banner/banner.scss +9 -13
  40. package/components/Breadcrumb/breadcrumb.css +2 -0
  41. package/components/Breadcrumb/breadcrumb.scss +2 -0
  42. package/components/CalendarMonth/calendar-month.css +2 -2
  43. package/components/CalendarMonth/calendar-month.scss +3 -3
  44. package/components/Card/card.css +115 -50
  45. package/components/Card/card.scss +164 -63
  46. package/components/Chip/chip.css +33 -24
  47. package/components/Chip/chip.scss +40 -31
  48. package/components/ChipGroup/chip-group.css +27 -17
  49. package/components/ChipGroup/chip-group.scss +36 -22
  50. package/components/Content/content.css +11 -5
  51. package/components/Content/content.scss +17 -9
  52. package/components/ContextSelector/context-selector.css +13 -6
  53. package/components/ContextSelector/context-selector.scss +14 -7
  54. package/components/DataList/data-list-grid.css +7 -7
  55. package/components/DataList/data-list-grid.scss +1 -1
  56. package/components/DataList/data-list.css +46 -40
  57. package/components/DataList/data-list.scss +37 -28
  58. package/components/DatePicker/date-picker.css +0 -8
  59. package/components/DatePicker/date-picker.scss +0 -9
  60. package/components/DescriptionList/description-list.css +7 -7
  61. package/components/DescriptionList/description-list.scss +7 -7
  62. package/components/Divider/divider.css +2 -2
  63. package/components/Divider/divider.scss +3 -3
  64. package/components/Drawer/drawer.css +15 -16
  65. package/components/Drawer/drawer.scss +2 -3
  66. package/components/Dropdown/dropdown.css +26 -25
  67. package/components/Dropdown/dropdown.scss +17 -18
  68. package/components/DualListSelector/dual-list-selector.css +1 -1
  69. package/components/DualListSelector/dual-list-selector.scss +1 -1
  70. package/components/EmptyState/empty-state.css +46 -52
  71. package/components/EmptyState/empty-state.scss +58 -57
  72. package/components/ExpandableSection/expandable-section.css +2 -0
  73. package/components/ExpandableSection/expandable-section.scss +2 -0
  74. package/components/Form/form.css +14 -12
  75. package/components/Form/form.scss +9 -7
  76. package/components/FormControl/form-control.css +2 -5
  77. package/components/FormControl/themes/dark/form-control.scss +2 -6
  78. package/components/HelperText/helper-text.css +4 -0
  79. package/components/HelperText/helper-text.scss +5 -0
  80. package/components/Hint/hint.css +2 -2
  81. package/components/Hint/hint.scss +2 -2
  82. package/components/Icon/icon.css +3 -3
  83. package/components/Icon/icon.scss +3 -3
  84. package/components/InputGroup/input-group.css +61 -85
  85. package/components/InputGroup/input-group.scss +55 -61
  86. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  87. package/components/Label/label.css +49 -36
  88. package/components/Label/label.scss +53 -38
  89. package/components/Label/themes/dark/label.scss +2 -2
  90. package/components/LabelGroup/label-group.css +26 -22
  91. package/components/LabelGroup/label-group.scss +31 -26
  92. package/components/LogViewer/log-viewer.css +0 -38
  93. package/components/Login/login.css +20 -60
  94. package/components/Login/login.scss +16 -18
  95. package/components/Login/themes/dark/login.scss +4 -0
  96. package/components/Masthead/masthead.css +4 -42
  97. package/components/Masthead/masthead.scss +4 -4
  98. package/components/Menu/menu.css +9 -6
  99. package/components/Menu/menu.scss +34 -31
  100. package/components/MenuToggle/menu-toggle.css +3 -1
  101. package/components/MenuToggle/menu-toggle.scss +3 -1
  102. package/components/ModalBox/modal-box.css +12 -11
  103. package/components/ModalBox/modal-box.scss +14 -14
  104. package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
  105. package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
  106. package/components/Nav/nav.css +1 -1
  107. package/components/Nav/nav.scss +2 -2
  108. package/components/NotificationDrawer/notification-drawer.css +8 -8
  109. package/components/NotificationDrawer/notification-drawer.scss +8 -8
  110. package/components/OptionsMenu/options-menu.css +8 -10
  111. package/components/OptionsMenu/options-menu.scss +9 -11
  112. package/components/Page/page.css +101 -122
  113. package/components/Page/page.scss +49 -21
  114. package/components/Pagination/pagination.css +2 -110
  115. package/components/Pagination/pagination.scss +0 -6
  116. package/components/Popover/popover.css +31 -37
  117. package/components/Popover/popover.scss +32 -37
  118. package/components/Popover/themes/dark/popover.scss +3 -9
  119. package/components/Progress/progress.css +13 -10
  120. package/components/Progress/progress.scss +13 -10
  121. package/components/ProgressStepper/progress-stepper.css +5 -5
  122. package/components/ProgressStepper/progress-stepper.scss +5 -5
  123. package/components/SearchInput/search-input.css +4 -2
  124. package/components/SearchInput/search-input.scss +4 -2
  125. package/components/Select/select.css +1 -1
  126. package/components/Select/select.scss +1 -1
  127. package/components/Sidebar/sidebar.css +69 -26
  128. package/components/Sidebar/sidebar.scss +84 -27
  129. package/components/SimpleList/simple-list.css +1 -1
  130. package/components/SimpleList/simple-list.scss +2 -2
  131. package/components/Spinner/spinner.css +4 -133
  132. package/components/Spinner/spinner.scss +4 -173
  133. package/components/Table/table-grid.css +28 -28
  134. package/components/Table/table-scrollable.css +31 -26
  135. package/components/Table/table-scrollable.scss +33 -28
  136. package/components/Table/table-tree-view.css +14 -4
  137. package/components/Table/table-tree-view.scss +15 -0
  138. package/components/Table/table.css +67 -65
  139. package/components/Table/table.scss +65 -62
  140. package/components/Tabs/tabs.css +0 -4
  141. package/components/Tabs/tabs.scss +0 -7
  142. package/components/TextInputGroup/text-input-group.css +6 -4
  143. package/components/TextInputGroup/text-input-group.scss +6 -5
  144. package/components/Tile/tile.css +1 -1
  145. package/components/Tile/tile.scss +1 -1
  146. package/components/Timestamp/timestamp.css +3 -3
  147. package/components/Timestamp/timestamp.scss +3 -3
  148. package/components/Toolbar/toolbar.css +78 -43
  149. package/components/Toolbar/toolbar.scss +50 -10
  150. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  151. package/components/Tooltip/tooltip.css +7 -12
  152. package/components/Tooltip/tooltip.scss +6 -3
  153. package/components/TreeView/tree-view.css +7 -15
  154. package/components/TreeView/tree-view.scss +7 -18
  155. package/components/Wizard/wizard.css +16 -39
  156. package/components/Wizard/wizard.scss +20 -2
  157. package/docs/components/AboutModalBox/examples/AboutModalBox.md +20 -14
  158. package/docs/components/Accordion/examples/Accordion.md +12 -12
  159. package/docs/components/ActionList/examples/ActionList.md +6 -6
  160. package/docs/components/Alert/examples/Alert.md +29 -29
  161. package/docs/components/AlertGroup/examples/AlertGroup.md +15 -15
  162. package/docs/components/AppLauncher/examples/application-launcher.md +52 -46
  163. package/docs/components/Avatar/examples/Avatar.md +11 -11
  164. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  165. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  166. package/docs/components/BackgroundImage/examples/BackgroundImage.md +13 -29
  167. package/docs/components/Badge/examples/Badge.md +5 -5
  168. package/docs/components/Banner/examples/Banner.md +8 -8
  169. package/docs/components/Brand/examples/Brand.md +9 -9
  170. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  171. package/docs/components/Button/examples/Button.md +51 -55
  172. package/docs/components/CalendarMonth/examples/CalendarMonth.md +301 -284
  173. package/docs/components/Card/examples/Card.md +676 -116
  174. package/docs/components/Check/examples/Check.md +16 -19
  175. package/docs/components/Chip/examples/Chip.md +70 -52
  176. package/docs/components/ChipGroup/examples/ChipGroup.md +452 -673
  177. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  178. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  179. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  180. package/docs/components/Content/examples/Content.md +37 -9
  181. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  182. package/docs/components/ContextSelector/examples/context-selector.md +87 -80
  183. package/docs/components/DataList/examples/DataList.md +239 -202
  184. package/docs/components/DatePicker/examples/DatePicker.md +139 -104
  185. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  186. package/docs/components/Divider/examples/Divider.md +10 -10
  187. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  188. package/docs/components/Drawer/examples/Drawer.md +43 -43
  189. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  190. package/docs/components/Dropdown/examples/Dropdown.md +125 -100
  191. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  192. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  193. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  194. package/docs/components/FileUpload/examples/FileUpload.md +150 -110
  195. package/docs/components/Form/examples/Form.md +152 -130
  196. package/docs/components/FormControl/examples/FormControl.md +21 -20
  197. package/docs/components/HelperText/examples/HelperText.md +24 -35
  198. package/docs/components/Hint/examples/Hint.md +7 -7
  199. package/docs/components/Icon/examples/Icon.md +11 -12
  200. package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
  201. package/docs/components/InputGroup/examples/InputGroup.md +229 -179
  202. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  203. package/docs/components/Label/examples/Label.md +1427 -746
  204. package/docs/components/LabelGroup/examples/LabelGroup.md +295 -242
  205. package/docs/components/List/examples/List.md +18 -18
  206. package/docs/components/LogViewer/examples/LogViewer.md +79 -74
  207. package/docs/components/Login/examples/Login.md +103 -181
  208. package/docs/components/Masthead/examples/masthead.md +9 -9
  209. package/docs/components/Menu/examples/Menu.md +93 -85
  210. package/docs/components/MenuToggle/examples/MenuToggle.md +29 -28
  211. package/docs/components/ModalBox/examples/ModalBox.md +113 -92
  212. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +27 -26
  213. package/docs/components/Nav/examples/Navigation.md +69 -69
  214. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  215. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +64 -64
  216. package/docs/components/NumberInput/examples/NumberInput.md +311 -239
  217. package/docs/components/OptionsMenu/examples/options-menu.md +28 -28
  218. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  219. package/docs/components/Page/examples/Page.css +7 -1
  220. package/docs/components/Page/examples/Page.md +81 -54
  221. package/docs/components/Pagination/examples/Pagination.md +27 -27
  222. package/docs/components/Panel/examples/Panel.md +10 -10
  223. package/docs/components/Popover/examples/Popover.md +206 -149
  224. package/docs/components/Progress/examples/Progress.md +32 -61
  225. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -39
  226. package/docs/components/Radio/examples/Radio.md +12 -11
  227. package/docs/components/SearchInput/examples/SearchInput.md +185 -148
  228. package/docs/components/Select/examples/Select.md +372 -318
  229. package/docs/components/Sidebar/examples/Sidebar.md +70 -14
  230. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  231. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  232. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  233. package/docs/components/Slider/examples/Slider.md +84 -62
  234. package/docs/components/Spinner/examples/Spinner.md +18 -67
  235. package/docs/components/Switch/examples/Switch.md +19 -19
  236. package/docs/components/TabContent/examples/TabContent.md +13 -13
  237. package/docs/components/Table/examples/Table.css +4 -0
  238. package/docs/components/Table/examples/Table.md +5212 -5750
  239. package/docs/components/Tabs/examples/Tabs.md +155 -155
  240. package/docs/components/TextInputGroup/examples/TextInputGroup.md +523 -406
  241. package/docs/components/Tile/examples/Tile.md +16 -17
  242. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  243. package/docs/components/Title/examples/Title.md +17 -17
  244. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  245. package/docs/components/Toolbar/examples/Toolbar.md +848 -726
  246. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  247. package/docs/components/TreeView/examples/TreeView.md +34 -34
  248. package/docs/components/Truncate/examples/Truncate.md +4 -5
  249. package/docs/components/Wizard/examples/Wizard.md +119 -127
  250. package/docs/demos/AboutModal/examples/AboutModal.md +4 -5
  251. package/docs/demos/Alert/examples/Alert.md +118 -71
  252. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  253. package/docs/demos/Banner/examples/Banner.md +8 -9
  254. package/docs/demos/Button/examples/Button.md +10 -5
  255. package/docs/demos/Card/examples/Card.md +246 -168
  256. package/docs/demos/CardView/examples/CardView.md +57 -30
  257. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  258. package/docs/demos/Dashboard/examples/Dashboard.md +61 -38
  259. package/docs/demos/DataList/examples/DataList.md +312 -255
  260. package/docs/demos/DescriptionList/examples/DescriptionList.md +33 -22
  261. package/docs/demos/Drawer/examples/Drawer.md +24 -22
  262. package/docs/demos/Form/examples/BasicForms.md +220 -213
  263. package/docs/demos/HelperText/examples/HelperText.md +16 -14
  264. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  265. package/docs/demos/Masthead/examples/Masthead.md +302 -284
  266. package/docs/demos/Modal/examples/Modal.md +54 -66
  267. package/docs/demos/Nav/examples/Nav.md +47 -47
  268. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +70 -58
  269. package/docs/demos/Page/examples/Page.md +982 -51
  270. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +22 -18
  271. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +121 -106
  272. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +345 -311
  273. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  274. package/docs/demos/Table/examples/Table.md +3373 -1333
  275. package/docs/demos/Tabs/examples/Tabs.md +141 -90
  276. package/docs/demos/Toolbar/examples/Toolbar.md +1994 -329
  277. package/docs/demos/Wizard/examples/Wizard.md +289 -266
  278. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  279. package/docs/layouts/Flex/examples/Flex.md +98 -98
  280. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  281. package/docs/layouts/Grid/examples/Grid.md +9 -9
  282. package/docs/layouts/Level/examples/Level.md +5 -5
  283. package/docs/layouts/Split/examples/Split.md +7 -7
  284. package/docs/layouts/Stack/examples/Stack.md +6 -6
  285. package/docs/utilities/Accessibility/examples/Accessibility.md +5 -5
  286. package/docs/utilities/Alignment/examples/Alignment.md +7 -7
  287. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +13 -13
  288. package/docs/utilities/BoxShadow/examples/box-shadow.md +23 -23
  289. package/docs/utilities/Display/examples/Display.md +12 -12
  290. package/docs/utilities/Flex/examples/Flex.md +35 -35
  291. package/docs/utilities/Float/examples/Float.md +5 -5
  292. package/docs/utilities/Sizing/examples/Sizing.md +51 -51
  293. package/docs/utilities/Spacing/examples/Spacing.md +35 -35
  294. package/docs/utilities/Text/examples/Text.md +31 -31
  295. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  296. package/layouts/Gallery/gallery.css +1 -1
  297. package/layouts/Gallery/gallery.scss +1 -1
  298. package/layouts/Grid/grid.css +7 -7
  299. package/layouts/Grid/grid.scss +2 -2
  300. package/package.json +60 -66
  301. package/patternfly-addons.css +48 -48
  302. package/{patternfly-base-no-reset.css → patternfly-base-no-globals.css} +28 -73
  303. package/{patternfly-base-no-reset.scss → patternfly-base-no-globals.scss} +1 -0
  304. package/patternfly-base.css +63 -114
  305. package/{patternfly-no-reset.css → patternfly-no-globals.css} +1206 -2449
  306. package/{patternfly-no-reset.scss → patternfly-no-globals.scss} +1 -0
  307. package/patternfly.css +1234 -2483
  308. package/patternfly.min.css +1 -1
  309. package/patternfly.min.css.map +1 -1
  310. package/sass-utilities/functions.scss +8 -24
  311. package/sass-utilities/mixins.scss +15 -39
  312. package/sass-utilities/placeholders.scss +0 -23
  313. package/sass-utilities/scss-variables.scss +5 -6
  314. package/sass-utilities/themes/dark/placeholders.scss +0 -22
  315. package/sass-utilities/themes/dark/scss-variables.scss +1 -1
  316. package/utilities/Spacing/spacing.scss +2 -2
  317. package/utilities/Text/text.css +48 -48
  318. package/utilities/Text/text.scss +6 -6
  319. package/utilities/Text/themes/dark/text.scss +2 -2
  320. package/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff +0 -0
  321. package/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff +0 -0
  322. package/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff +0 -0
  323. package/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff +0 -0
  324. package/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff +0 -0
  325. package/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff +0 -0
  326. package/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff +0 -0
  327. package/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff +0 -0
  328. package/assets/fonts/RedHatText/RedHatText-Bold.woff +0 -0
  329. package/assets/fonts/RedHatText/RedHatText-BoldItalic.woff +0 -0
  330. package/assets/fonts/RedHatText/RedHatText-Italic.woff +0 -0
  331. package/assets/fonts/RedHatText/RedHatText-Medium.woff +0 -0
  332. package/assets/fonts/RedHatText/RedHatText-MediumItalic.woff +0 -0
  333. package/assets/fonts/RedHatText/RedHatText-Regular.woff +0 -0
  334. package/assets/fonts/webfonts/fa-solid-900.woff +0 -0
  335. package/assets/pficon/pficon.woff +0 -0
  336. package/base/_shield-inheritable.scss +0 -69
  337. package/base/_shield-noninheritable.scss +0 -13
  338. package/base/patternfly-shield-inheritable.css +0 -66
  339. package/base/patternfly-shield-inheritable.scss +0 -4
  340. package/base/patternfly-shield-noninheritable.css +0 -9
  341. package/base/patternfly-shield-noninheritable.scss +0 -4
  342. package/sass-utilities/bs-variables.scss +0 -709
package/docs/components/NumberInput/examples/NumberInput.md CHANGED
@@ -9,23 +9,29 @@ cssPrefix: pf-c-number-input
9
9
  ```html
10
10
  <div class="pf-c-number-input">
11
11
  <div class="pf-c-input-group">
12
- <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
13
- <span class="pf-c-number-input__icon">
14
- <i class="fas fa-minus" aria-hidden="true"></i>
15
- </span>
16
- </button>
17
- <input
18
- class="pf-c-form-control"
19
- type="number"
20
- value="90"
21
- name="number-input-default-name"
22
- aria-label="Number input"
23
- />
24
- <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
25
- <span class="pf-c-number-input__icon">
26
- <i class="fas fa-plus" aria-hidden="true"></i>
27
- </span>
28
- </button>
12
+ <div class="pf-c-input-group__item">
13
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
14
+ <span class="pf-c-number-input__icon">
15
+ <i class="fas fa-minus" aria-hidden="true"></i>
16
+ </span>
17
+ </button>
18
+ </div>
19
+ <div class="pf-c-input-group__item pf-m-fill">
20
+ <input
21
+ class="pf-c-form-control"
22
+ type="number"
23
+ value="90"
24
+ name="number-input-default-name"
25
+ aria-label="Number input"
26
+ />
27
+ </div>
28
+ <div class="pf-c-input-group__item">
29
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
30
+ <span class="pf-c-number-input__icon">
31
+ <i class="fas fa-plus" aria-hidden="true"></i>
32
+ </span>
33
+ </button>
34
+ </div>
29
35
  </div>
30
36
  </div>
31
37
 
@@ -36,23 +42,29 @@ cssPrefix: pf-c-number-input
36
42
  ```html
37
43
  <div class="pf-c-number-input">
38
44
  <div class="pf-c-input-group">
39
- <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
40
- <span class="pf-c-number-input__icon">
41
- <i class="fas fa-minus" aria-hidden="true"></i>
42
- </span>
43
- </button>
44
- <input
45
- class="pf-c-form-control"
46
- type="number"
47
- value="90"
48
- name="number-input-unit-name"
49
- aria-label="Number input"
50
- />
51
- <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
52
- <span class="pf-c-number-input__icon">
53
- <i class="fas fa-plus" aria-hidden="true"></i>
54
- </span>
55
- </button>
45
+ <div class="pf-c-input-group__item">
46
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
47
+ <span class="pf-c-number-input__icon">
48
+ <i class="fas fa-minus" aria-hidden="true"></i>
49
+ </span>
50
+ </button>
51
+ </div>
52
+ <div class="pf-c-input-group__item pf-m-fill">
53
+ <input
54
+ class="pf-c-form-control"
55
+ type="number"
56
+ value="90"
57
+ name="number-input-unit-name"
58
+ aria-label="Number input"
59
+ />
60
+ </div>
61
+ <div class="pf-c-input-group__item">
62
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
63
+ <span class="pf-c-number-input__icon">
64
+ <i class="fas fa-plus" aria-hidden="true"></i>
65
+ </span>
66
+ </button>
67
+ </div>
56
68
  </div>
57
69
  <span class="pf-c-number-input__unit">%</span>
58
70
  </div>
@@ -62,23 +74,29 @@ cssPrefix: pf-c-number-input
62
74
  <span class="pf-c-number-input__unit">$</span>
63
75
 
64
76
  <div class="pf-c-input-group">
65
- <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
66
- <span class="pf-c-number-input__icon">
67
- <i class="fas fa-minus" aria-hidden="true"></i>
68
- </span>
69
- </button>
70
- <input
71
- class="pf-c-form-control"
72
- type="number"
73
- value="1.00"
74
- name="number-input-unit2-name"
75
- aria-label="Number input"
76
- />
77
- <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
78
- <span class="pf-c-number-input__icon">
79
- <i class="fas fa-plus" aria-hidden="true"></i>
80
- </span>
81
- </button>
77
+ <div class="pf-c-input-group__item">
78
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
79
+ <span class="pf-c-number-input__icon">
80
+ <i class="fas fa-minus" aria-hidden="true"></i>
81
+ </span>
82
+ </button>
83
+ </div>
84
+ <div class="pf-c-input-group__item pf-m-fill">
85
+ <input
86
+ class="pf-c-form-control"
87
+ type="number"
88
+ value="1.00"
89
+ name="number-input-unit2-name"
90
+ aria-label="Number input"
91
+ />
92
+ </div>
93
+ <div class="pf-c-input-group__item">
94
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
95
+ <span class="pf-c-number-input__icon">
96
+ <i class="fas fa-plus" aria-hidden="true"></i>
97
+ </span>
98
+ </button>
99
+ </div>
82
100
  </div>
83
101
  </div>
84
102
 
@@ -89,29 +107,35 @@ cssPrefix: pf-c-number-input
89
107
  ```html
90
108
  <div class="pf-c-number-input">
91
109
  <div class="pf-c-input-group">
92
- <button
93
- class="pf-c-button pf-m-control"
94
- type="button"
95
- aria-label="Minus"
96
- disabled
97
- >
98
- <span class="pf-c-number-input__icon">
99
- <i class="fas fa-minus" aria-hidden="true"></i>
100
- </span>
101
- </button>
102
- <input
103
- class="pf-c-form-control"
104
- type="number"
105
- value="0"
106
- min="0"
107
- name="number-input-unit-lower-threshold-name"
108
- aria-label="Number input"
109
- />
110
- <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
111
- <span class="pf-c-number-input__icon">
112
- <i class="fas fa-plus" aria-hidden="true"></i>
113
- </span>
114
- </button>
110
+ <div class="pf-c-input-group__item">
111
+ <button
112
+ class="pf-c-button pf-m-control"
113
+ type="button"
114
+ aria-label="Minus"
115
+ disabled
116
+ >
117
+ <span class="pf-c-number-input__icon">
118
+ <i class="fas fa-minus" aria-hidden="true"></i>
119
+ </span>
120
+ </button>
121
+ </div>
122
+ <div class="pf-c-input-group__item pf-m-fill">
123
+ <input
124
+ class="pf-c-form-control"
125
+ type="number"
126
+ value="0"
127
+ min="0"
128
+ name="number-input-unit-lower-threshold-name"
129
+ aria-label="Number input"
130
+ />
131
+ </div>
132
+ <div class="pf-c-input-group__item">
133
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
134
+ <span class="pf-c-number-input__icon">
135
+ <i class="fas fa-plus" aria-hidden="true"></i>
136
+ </span>
137
+ </button>
138
+ </div>
115
139
  </div>
116
140
  <span class="pf-c-number-input__unit">%</span>
117
141
  </div>
@@ -123,29 +147,35 @@ cssPrefix: pf-c-number-input
123
147
  ```html
124
148
  <div class="pf-c-number-input">
125
149
  <div class="pf-c-input-group">
126
- <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
127
- <span class="pf-c-number-input__icon">
128
- <i class="fas fa-minus" aria-hidden="true"></i>
129
- </span>
130
- </button>
131
- <input
132
- class="pf-c-form-control"
133
- type="number"
134
- value="100"
135
- max="100"
136
- name="number-input-unit-upper-threshold-name"
137
- aria-label="Number input"
138
- />
139
- <button
140
- class="pf-c-button pf-m-control"
141
- type="button"
142
- aria-label="Plus"
143
- disabled
144
- >
145
- <span class="pf-c-number-input__icon">
146
- <i class="fas fa-plus" aria-hidden="true"></i>
147
- </span>
148
- </button>
150
+ <div class="pf-c-input-group__item">
151
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
152
+ <span class="pf-c-number-input__icon">
153
+ <i class="fas fa-minus" aria-hidden="true"></i>
154
+ </span>
155
+ </button>
156
+ </div>
157
+ <div class="pf-c-input-group__item pf-m-fill">
158
+ <input
159
+ class="pf-c-form-control"
160
+ type="number"
161
+ value="100"
162
+ max="100"
163
+ name="number-input-unit-upper-threshold-name"
164
+ aria-label="Number input"
165
+ />
166
+ </div>
167
+ <div class="pf-c-input-group__item">
168
+ <button
169
+ class="pf-c-button pf-m-control"
170
+ type="button"
171
+ aria-label="Plus"
172
+ disabled
173
+ >
174
+ <span class="pf-c-number-input__icon">
175
+ <i class="fas fa-plus" aria-hidden="true"></i>
176
+ </span>
177
+ </button>
178
+ </div>
149
179
  </div>
150
180
  <span class="pf-c-number-input__unit">%</span>
151
181
  </div>
@@ -157,34 +187,40 @@ cssPrefix: pf-c-number-input
157
187
  ```html
158
188
  <div class="pf-c-number-input">
159
189
  <div class="pf-c-input-group">
160
- <button
161
- class="pf-c-button pf-m-control"
162
- type="button"
163
- aria-label="Minus"
164
- disabled
165
- >
166
- <span class="pf-c-number-input__icon">
167
- <i class="fas fa-minus" aria-hidden="true"></i>
168
- </span>
169
- </button>
170
- <input
171
- class="pf-c-form-control"
172
- type="number"
173
- value="100"
174
- name="number-input-disabled-name"
175
- aria-label="Number input"
176
- disabled
177
- />
178
- <button
179
- class="pf-c-button pf-m-control"
180
- type="button"
181
- aria-label="Plus"
182
- disabled
183
- >
184
- <span class="pf-c-number-input__icon">
185
- <i class="fas fa-plus" aria-hidden="true"></i>
186
- </span>
187
- </button>
190
+ <div class="pf-c-input-group__item">
191
+ <button
192
+ class="pf-c-button pf-m-control"
193
+ type="button"
194
+ aria-label="Minus"
195
+ disabled
196
+ >
197
+ <span class="pf-c-number-input__icon">
198
+ <i class="fas fa-minus" aria-hidden="true"></i>
199
+ </span>
200
+ </button>
201
+ </div>
202
+ <div class="pf-c-input-group__item pf-m-fill">
203
+ <input
204
+ class="pf-c-form-control"
205
+ type="number"
206
+ value="100"
207
+ name="number-input-disabled-name"
208
+ aria-label="Number input"
209
+ disabled
210
+ />
211
+ </div>
212
+ <div class="pf-c-input-group__item">
213
+ <button
214
+ class="pf-c-button pf-m-control"
215
+ type="button"
216
+ aria-label="Plus"
217
+ disabled
218
+ >
219
+ <span class="pf-c-number-input__icon">
220
+ <i class="fas fa-plus" aria-hidden="true"></i>
221
+ </span>
222
+ </button>
223
+ </div>
188
224
  </div>
189
225
  <span class="pf-c-number-input__unit">%</span>
190
226
  </div>
@@ -196,46 +232,58 @@ cssPrefix: pf-c-number-input
196
232
  ```html
197
233
  <div class="pf-c-number-input pf-m-status">
198
234
  <div class="pf-c-input-group">
199
- <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
200
- <span class="pf-c-number-input__icon">
201
- <i class="fas fa-minus" aria-hidden="true"></i>
202
- </span>
203
- </button>
204
- <input
205
- class="pf-c-form-control"
206
- type="number"
207
- value="90"
208
- name="number-input-status-name"
209
- aria-label="Number input"
210
- />
211
- <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
212
- <span class="pf-c-number-input__icon">
213
- <i class="fas fa-plus" aria-hidden="true"></i>
214
- </span>
215
- </button>
235
+ <div class="pf-c-input-group__item">
236
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
237
+ <span class="pf-c-number-input__icon">
238
+ <i class="fas fa-minus" aria-hidden="true"></i>
239
+ </span>
240
+ </button>
241
+ </div>
242
+ <div class="pf-c-input-group__item pf-m-fill">
243
+ <input
244
+ class="pf-c-form-control"
245
+ type="number"
246
+ value="90"
247
+ name="number-input-status-name"
248
+ aria-label="Number input"
249
+ />
250
+ </div>
251
+ <div class="pf-c-input-group__item">
252
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
253
+ <span class="pf-c-number-input__icon">
254
+ <i class="fas fa-plus" aria-hidden="true"></i>
255
+ </span>
256
+ </button>
257
+ </div>
216
258
  </div>
217
259
  </div>
218
260
  <br />
219
261
  <br />
220
262
  <div class="pf-c-number-input pf-m-status">
221
263
  <div class="pf-c-input-group">
222
- <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
223
- <span class="pf-c-number-input__icon">
224
- <i class="fas fa-minus" aria-hidden="true"></i>
225
- </span>
226
- </button>
227
- <input
228
- class="pf-c-form-control pf-m-warning"
229
- type="number"
230
- value="90"
231
- name="number-input-status-warning-name"
232
- aria-label="Number input"
233
- />
234
- <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
235
- <span class="pf-c-number-input__icon">
236
- <i class="fas fa-plus" aria-hidden="true"></i>
237
- </span>
238
- </button>
264
+ <div class="pf-c-input-group__item">
265
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
266
+ <span class="pf-c-number-input__icon">
267
+ <i class="fas fa-minus" aria-hidden="true"></i>
268
+ </span>
269
+ </button>
270
+ </div>
271
+ <div class="pf-c-input-group__item pf-m-fill">
272
+ <input
273
+ class="pf-c-form-control pf-m-warning"
274
+ type="number"
275
+ value="90"
276
+ name="number-input-status-warning-name"
277
+ aria-label="Number input"
278
+ />
279
+ </div>
280
+ <div class="pf-c-input-group__item">
281
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
282
+ <span class="pf-c-number-input__icon">
283
+ <i class="fas fa-plus" aria-hidden="true"></i>
284
+ </span>
285
+ </button>
286
+ </div>
239
287
  </div>
240
288
  </div>
241
289
 
@@ -249,23 +297,29 @@ cssPrefix: pf-c-number-input
249
297
  style="--pf-c-number-input--c-form-control--width-chars: 1;"
250
298
  >
251
299
  <div class="pf-c-input-group">
252
- <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
253
- <span class="pf-c-number-input__icon">
254
- <i class="fas fa-minus" aria-hidden="true"></i>
255
- </span>
256
- </button>
257
- <input
258
- class="pf-c-form-control"
259
- type="number"
260
- value="1"
261
- name="number-input-sizes-name"
262
- aria-label="Number input"
263
- />
264
- <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
265
- <span class="pf-c-number-input__icon">
266
- <i class="fas fa-plus" aria-hidden="true"></i>
267
- </span>
268
- </button>
300
+ <div class="pf-c-input-group__item">
301
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
302
+ <span class="pf-c-number-input__icon">
303
+ <i class="fas fa-minus" aria-hidden="true"></i>
304
+ </span>
305
+ </button>
306
+ </div>
307
+ <div class="pf-c-input-group__item pf-m-fill">
308
+ <input
309
+ class="pf-c-form-control"
310
+ type="number"
311
+ value="1"
312
+ name="number-input-sizes-name"
313
+ aria-label="Number input"
314
+ />
315
+ </div>
316
+ <div class="pf-c-input-group__item">
317
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
318
+ <span class="pf-c-number-input__icon">
319
+ <i class="fas fa-plus" aria-hidden="true"></i>
320
+ </span>
321
+ </button>
322
+ </div>
269
323
  </div>
270
324
  </div>
271
325
  <br />
@@ -275,23 +329,29 @@ cssPrefix: pf-c-number-input
275
329
  style="--pf-c-number-input--c-form-control--width-chars: 10;"
276
330
  >
277
331
  <div class="pf-c-input-group">
278
- <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
279
- <span class="pf-c-number-input__icon">
280
- <i class="fas fa-minus" aria-hidden="true"></i>
281
- </span>
282
- </button>
283
- <input
284
- class="pf-c-form-control"
285
- type="number"
286
- value="1234567890"
287
- name="number-input-sizes2-name"
288
- aria-label="Number input"
289
- />
290
- <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
291
- <span class="pf-c-number-input__icon">
292
- <i class="fas fa-plus" aria-hidden="true"></i>
293
- </span>
294
- </button>
332
+ <div class="pf-c-input-group__item">
333
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
334
+ <span class="pf-c-number-input__icon">
335
+ <i class="fas fa-minus" aria-hidden="true"></i>
336
+ </span>
337
+ </button>
338
+ </div>
339
+ <div class="pf-c-input-group__item pf-m-fill">
340
+ <input
341
+ class="pf-c-form-control"
342
+ type="number"
343
+ value="1234567890"
344
+ name="number-input-sizes2-name"
345
+ aria-label="Number input"
346
+ />
347
+ </div>
348
+ <div class="pf-c-input-group__item">
349
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
350
+ <span class="pf-c-number-input__icon">
351
+ <i class="fas fa-plus" aria-hidden="true"></i>
352
+ </span>
353
+ </button>
354
+ </div>
295
355
  </div>
296
356
  </div>
297
357
  <br />
@@ -301,23 +361,29 @@ cssPrefix: pf-c-number-input
301
361
  style="--pf-c-number-input--c-form-control--width-chars: 5;"
302
362
  >
303
363
  <div class="pf-c-input-group">
304
- <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
305
- <span class="pf-c-number-input__icon">
306
- <i class="fas fa-minus" aria-hidden="true"></i>
307
- </span>
308
- </button>
309
- <input
310
- class="pf-c-form-control"
311
- type="number"
312
- value="5"
313
- name="number-input-sizes3-name"
314
- aria-label="Number input"
315
- />
316
- <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
317
- <span class="pf-c-number-input__icon">
318
- <i class="fas fa-plus" aria-hidden="true"></i>
319
- </span>
320
- </button>
364
+ <div class="pf-c-input-group__item">
365
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
366
+ <span class="pf-c-number-input__icon">
367
+ <i class="fas fa-minus" aria-hidden="true"></i>
368
+ </span>
369
+ </button>
370
+ </div>
371
+ <div class="pf-c-input-group__item pf-m-fill">
372
+ <input
373
+ class="pf-c-form-control"
374
+ type="number"
375
+ value="5"
376
+ name="number-input-sizes3-name"
377
+ aria-label="Number input"
378
+ />
379
+ </div>
380
+ <div class="pf-c-input-group__item">
381
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
382
+ <span class="pf-c-number-input__icon">
383
+ <i class="fas fa-plus" aria-hidden="true"></i>
384
+ </span>
385
+ </button>
386
+ </div>
321
387
  </div>
322
388
  </div>
323
389
  <br />
@@ -327,23 +393,29 @@ cssPrefix: pf-c-number-input
327
393
  style="--pf-c-number-input--c-form-control--width-chars: 5;"
328
394
  >
329
395
  <div class="pf-c-input-group">
330
- <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
331
- <span class="pf-c-number-input__icon">
332
- <i class="fas fa-minus" aria-hidden="true"></i>
333
- </span>
334
- </button>
335
- <input
336
- class="pf-c-form-control"
337
- type="number"
338
- value="12345"
339
- name="number-input-sizes4-name"
340
- aria-label="Number input"
341
- />
342
- <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
343
- <span class="pf-c-number-input__icon">
344
- <i class="fas fa-plus" aria-hidden="true"></i>
345
- </span>
346
- </button>
396
+ <div class="pf-c-input-group__item">
397
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
398
+ <span class="pf-c-number-input__icon">
399
+ <i class="fas fa-minus" aria-hidden="true"></i>
400
+ </span>
401
+ </button>
402
+ </div>
403
+ <div class="pf-c-input-group__item pf-m-fill">
404
+ <input
405
+ class="pf-c-form-control"
406
+ type="number"
407
+ value="12345"
408
+ name="number-input-sizes4-name"
409
+ aria-label="Number input"
410
+ />
411
+ </div>
412
+ <div class="pf-c-input-group__item">
413
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
414
+ <span class="pf-c-number-input__icon">
415
+ <i class="fas fa-plus" aria-hidden="true"></i>
416
+ </span>
417
+ </button>
418
+ </div>
347
419
  </div>
348
420
  </div>
349
421
 
@@ -353,18 +425,18 @@ cssPrefix: pf-c-number-input
353
425
 
354
426
  ### Accessibility
355
427
 
356
- | Attribute | Applied to | Outcome |
357
- | ----------------------------------------- | ---------------------------------------- | -------------------------------------------------------------------------- |
358
- | `aria-label="Plus"`, `aria-label="Minus"` | `.pf-c-button.pf-m-control` | Provides an accessible name for the outer plus/minus buttons. **Required** |
359
- | `min` | `input[type="number"].pf-c-form-control` | Provides an optional minimum value for the input. |
360
- | `max` | `input[type="number"].pf-c-form-control` | Provides an optional maximum value for the input. |
428
+ | Attribute | Applied to | Outcome |
429
+ | -- | -- | -- |
430
+ | `aria-label="Plus"`, `aria-label="Minus"` | `.pf-c-button.pf-m-control` | Provides an accessible name for the outer plus/minus buttons. **Required** |
431
+ | `min` | `input[type="number"].pf-c-form-control` | Provides an optional minimum value for the input. |
432
+ | `max` | `input[type="number"].pf-c-form-control` | Provides an optional maximum value for the input. |
361
433
 
362
434
  ### Usage
363
435
 
364
- | Class | Applied to | Outcome |
365
- | -------------------------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
366
- | `.pf-c-number-input` | `<div>` | Initiates the number input component. |
367
- | `.pf-c-number-input__icon` | `<span>` | Initiates the number input icon. |
368
- | `.pf-c-number-input__unit` | `<span>` | Initiates the number input unit. |
369
- | `.pf-m-status` | `.pf-c-number-input` | Modifies the width to create enough space for a status icon to be included in the form control portion of the number input. **Required** if a status icon may be shown, even if the icon is not currently shown. |
370
- | `--pf-c-number-input--c-form-control--width-chars` | `.pf-c-number-input` | Specifies the number of characters to show in the input. |
436
+ | Class | Applied to | Outcome |
437
+ | -- | -- | -- |
438
+ | `.pf-c-number-input` | `<div>` | Initiates the number input component. |
439
+ | `.pf-c-number-input__icon` | `<span>` | Initiates the number input icon. |
440
+ | `.pf-c-number-input__unit` | `<span>` | Initiates the number input unit. |
441
+ | `.pf-m-status` | `.pf-c-number-input` | Modifies the width to create enough space for a status icon to be included in the form control portion of the number input. **Required** if a status icon may be shown, even if the icon is not currently shown. |
442
+ | `--pf-c-number-input--c-form-control--width-chars` | `.pf-c-number-input` | Specifies the number of characters to show in the input. |