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

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