@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/FileUpload/examples/FileUpload.md CHANGED
@@ -1,6 +1,7 @@
1
1
  ---
2
- id: File upload
2
+ id: Text file upload
3
3
  section: components
4
+ subsection: file-upload
4
5
  cssPrefix: pf-c-file-upload
5
6
  ---## Examples
6
7
 
@@ -10,21 +11,27 @@ cssPrefix: pf-c-file-upload
10
11
  <div class="pf-c-file-upload">
11
12
  <div class="pf-c-file-upload__file-select">
12
13
  <div class="pf-c-input-group">
13
- <input
14
- class="pf-c-form-control"
15
- id="basic-file-upload-text-input"
16
- name="basic-file-upload-text-input"
17
- aria-label="Drag and drop a file or upload one"
18
- readonly
19
- placeholder="Drag and drop a file or upload one"
20
- aria-describedby="basic-file-upload-browse"
21
- />
22
- <button
23
- class="pf-c-button pf-m-control"
24
- type="button"
25
- id="basic-file-upload-browse"
26
- >Upload</button>
27
- <button class="pf-c-button pf-m-control" type="button" disabled>Clear</button>
14
+ <div class="pf-c-input-group__item pf-m-fill">
15
+ <input
16
+ class="pf-c-form-control"
17
+ id="basic-file-upload-text-input"
18
+ name="basic-file-upload-text-input"
19
+ aria-label="Drag and drop a file or upload one"
20
+ readonly
21
+ placeholder="Drag and drop a file or upload one"
22
+ aria-describedby="basic-file-upload-browse"
23
+ />
24
+ </div>
25
+ <div class="pf-c-input-group__item">
26
+ <button
27
+ class="pf-c-button pf-m-control"
28
+ type="button"
29
+ id="basic-file-upload-browse"
30
+ >Upload</button>
31
+ </div>
32
+ <div class="pf-c-input-group__item">
33
+ <button class="pf-c-button pf-m-control" type="button" disabled>Clear</button>
34
+ </div>
28
35
  </div>
29
36
  </div>
30
37
  <div class="pf-c-file-upload__file-details">
@@ -45,21 +52,27 @@ cssPrefix: pf-c-file-upload
45
52
  <div class="pf-c-file-upload">
46
53
  <div class="pf-c-file-upload__file-select">
47
54
  <div class="pf-c-input-group">
48
- <input
49
- class="pf-c-form-control"
50
- id="browsed-file-upload-complete-text-input"
51
- name="browsed-file-upload-complete-text-input"
52
- aria-label="Read only filename"
53
- readonly
54
- value="Read only filename"
55
- aria-describedby="browsed-file-upload-complete-browse"
56
- />
57
- <button
58
- class="pf-c-button pf-m-control"
59
- type="button"
60
- id="browsed-file-upload-complete-browse"
61
- >Upload</button>
62
- <button class="pf-c-button pf-m-control" type="button">Clear</button>
55
+ <div class="pf-c-input-group__item pf-m-fill">
56
+ <input
57
+ class="pf-c-form-control"
58
+ id="browsed-file-upload-complete-text-input"
59
+ name="browsed-file-upload-complete-text-input"
60
+ aria-label="Read only filename"
61
+ readonly
62
+ value="Read only filename"
63
+ aria-describedby="browsed-file-upload-complete-browse"
64
+ />
65
+ </div>
66
+ <div class="pf-c-input-group__item">
67
+ <button
68
+ class="pf-c-button pf-m-control"
69
+ type="button"
70
+ id="browsed-file-upload-complete-browse"
71
+ >Upload</button>
72
+ </div>
73
+ <div class="pf-c-input-group__item">
74
+ <button class="pf-c-button pf-m-control" type="button">Clear</button>
75
+ </div>
63
76
  </div>
64
77
  </div>
65
78
  <div class="pf-c-file-upload__file-details" readonly>
@@ -83,21 +96,27 @@ cssPrefix: pf-c-file-upload
83
96
  <div class="pf-c-file-upload">
84
97
  <div class="pf-c-file-upload__file-select">
85
98
  <div class="pf-c-input-group">
86
- <input
87
- class="pf-c-form-control"
88
- id="drop-file-text-input"
89
- name="drop-file-text-input"
90
- aria-label="Read only filename"
91
- readonly
92
- value="Sample.txt"
93
- aria-describedby="drop-file-browse"
94
- />
95
- <button
96
- class="pf-c-button pf-m-control"
97
- type="button"
98
- id="drop-file-browse"
99
- >Upload</button>
100
- <button class="pf-c-button pf-m-control" type="button">Clear</button>
99
+ <div class="pf-c-input-group__item pf-m-fill">
100
+ <input
101
+ class="pf-c-form-control"
102
+ id="drop-file-text-input"
103
+ name="drop-file-text-input"
104
+ aria-label="Read only filename"
105
+ readonly
106
+ value="Sample.txt"
107
+ aria-describedby="drop-file-browse"
108
+ />
109
+ </div>
110
+ <div class="pf-c-input-group__item">
111
+ <button
112
+ class="pf-c-button pf-m-control"
113
+ type="button"
114
+ id="drop-file-browse"
115
+ >Upload</button>
116
+ </div>
117
+ <div class="pf-c-input-group__item">
118
+ <button class="pf-c-button pf-m-control" type="button">Clear</button>
119
+ </div>
101
120
  </div>
102
121
  </div>
103
122
  <div class="pf-c-file-upload__file-details">
@@ -120,21 +139,27 @@ cssPrefix: pf-c-file-upload
120
139
  <div class="pf-c-file-upload pf-m-drag-hover">
121
140
  <div class="pf-c-file-upload__file-select">
122
141
  <div class="pf-c-input-group">
123
- <input
124
- class="pf-c-form-control"
125
- id="drag-file-hover-component-text-input"
126
- name="drag-file-hover-component-text-input"
127
- aria-label="Drag and drop a file or upload one"
128
- readonly
129
- placeholder="Drag and drop a file or upload one"
130
- aria-describedby="drag-file-hover-component-browse"
131
- />
132
- <button
133
- class="pf-c-button pf-m-control"
134
- type="button"
135
- id="drag-file-hover-component-browse"
136
- >Upload</button>
137
- <button class="pf-c-button pf-m-control" type="button" disabled>Clear</button>
142
+ <div class="pf-c-input-group__item pf-m-fill">
143
+ <input
144
+ class="pf-c-form-control"
145
+ id="drag-file-hover-component-text-input"
146
+ name="drag-file-hover-component-text-input"
147
+ aria-label="Drag and drop a file or upload one"
148
+ readonly
149
+ placeholder="Drag and drop a file or upload one"
150
+ aria-describedby="drag-file-hover-component-browse"
151
+ />
152
+ </div>
153
+ <div class="pf-c-input-group__item">
154
+ <button
155
+ class="pf-c-button pf-m-control"
156
+ type="button"
157
+ id="drag-file-hover-component-browse"
158
+ >Upload</button>
159
+ </div>
160
+ <div class="pf-c-input-group__item">
161
+ <button class="pf-c-button pf-m-control" type="button" disabled>Clear</button>
162
+ </div>
138
163
  </div>
139
164
  </div>
140
165
  <div class="pf-c-file-upload__file-details">
@@ -157,21 +182,27 @@ cssPrefix: pf-c-file-upload
157
182
  <div class="pf-c-file-upload">
158
183
  <div class="pf-c-file-upload__file-select">
159
184
  <div class="pf-c-input-group">
160
- <input
161
- class="pf-c-form-control"
162
- id="file-upload-error-text-input"
163
- name="file-upload-error-text-input"
164
- aria-label="File upload error"
165
- required
166
- value="Sample.png"
167
- aria-describedby="file-upload-error-browse"
168
- />
169
- <button
170
- class="pf-c-button pf-m-control"
171
- type="button"
172
- id="file-upload-error-browse"
173
- >Upload</button>
174
- <button class="pf-c-button pf-m-control" type="button">Clear</button>
185
+ <div class="pf-c-input-group__item pf-m-fill">
186
+ <input
187
+ class="pf-c-form-control"
188
+ id="file-upload-error-text-input"
189
+ name="file-upload-error-text-input"
190
+ aria-label="File upload error"
191
+ required
192
+ value="Sample.png"
193
+ aria-describedby="file-upload-error-browse"
194
+ />
195
+ </div>
196
+ <div class="pf-c-input-group__item">
197
+ <button
198
+ class="pf-c-button pf-m-control"
199
+ type="button"
200
+ id="file-upload-error-browse"
201
+ >Upload</button>
202
+ </div>
203
+ <div class="pf-c-input-group__item">
204
+ <button class="pf-c-button pf-m-control" type="button">Clear</button>
205
+ </div>
175
206
  </div>
176
207
  </div>
177
208
  <div
@@ -189,11 +220,15 @@ cssPrefix: pf-c-file-upload
189
220
  ></textarea>
190
221
  </div>
191
222
  </div>
192
- <p
193
- class="pf-c-form__helper-text pf-m-error"
194
- id="textAreaHelperText1"
195
- aria-live="polite"
196
- >We don't support this file type. Try again with a different file type.</p>
223
+ <div class="pf-c-form__helper-text" aria-live="polite">
224
+ <div class="pf-c-helper-text">
225
+ <div class="pf-c-helper-text__item pf-m-error" id="textAreaHelperText1">
226
+ <span
227
+ class="pf-c-helper-text__item-text"
228
+ >We don't support this file type. Try again with a different file type.</span>
229
+ </div>
230
+ </div>
231
+ </div>
197
232
  </div>
198
233
  </form>
199
234
 
@@ -205,22 +240,28 @@ cssPrefix: pf-c-file-upload
205
240
  <div class="pf-c-file-upload pf-m-loading">
206
241
  <div class="pf-c-file-upload__file-select">
207
242
  <div class="pf-c-input-group">
208
- <input
209
- class="pf-c-form-control"
210
- id="file-upload-loading-text-input"
211
- name="file-upload-loading"
212
- aria-label="Read only filename"
213
- readonly
214
- value="Sample.png"
215
- aria-describedby="file-upload-loading-browse"
216
- />
217
- <button
218
- class="pf-c-button pf-m-control"
219
- type="button"
220
- disabled
221
- id="file-upload-loading-browse"
222
- >Upload</button>
223
- <button class="pf-c-button pf-m-control" type="button">Clear</button>
243
+ <div class="pf-c-input-group__item pf-m-fill">
244
+ <input
245
+ class="pf-c-form-control"
246
+ id="file-upload-loading-text-input"
247
+ name="file-upload-loading"
248
+ aria-label="Read only filename"
249
+ readonly
250
+ value="Sample.png"
251
+ aria-describedby="file-upload-loading-browse"
252
+ />
253
+ </div>
254
+ <div class="pf-c-input-group__item">
255
+ <button
256
+ class="pf-c-button pf-m-control"
257
+ type="button"
258
+ disabled
259
+ id="file-upload-loading-browse"
260
+ >Upload</button>
261
+ </div>
262
+ <div class="pf-c-input-group__item">
263
+ <button class="pf-c-button pf-m-control" type="button">Clear</button>
264
+ </div>
224
265
  </div>
225
266
  </div>
226
267
  <div class="pf-c-file-upload__file-details">
@@ -255,11 +296,11 @@ cssPrefix: pf-c-file-upload
255
296
 
256
297
  ### Usage
257
298
 
258
- | Class | Applied to | Outcome |
259
- | ----------------------------------------- | ------------------- | --------------------------------------------------------------------------------------- |
260
- | `.pf-c-file-upload` | `<div>`, `<form>` | Initiates the file upload component. **Required**. |
261
- | `.pf-c-file-upload__file-select` | `<div>` | Initiates the file select element. **Required** |
262
- | `.pf-c-file-upload__file-details` | `<div>` | Initiates the file details element. **Required** |
263
- | `.pf-c-file-upload__file-details-spinner` | `<div>` | Initiates the file details element. **Required** |
264
- | `.pf-m-drag-hover` | `.pf-c-file-upload` | Modifies file upload for when an element is dragged or dropped inside of its container. |
265
- | `.pf-m-loading` | `.pf-c-file-upload` | Modifies file upload for the loading state. |
299
+ | Class | Applied to | Outcome |
300
+ | -- | -- | -- |
301
+ | `.pf-c-file-upload` | `<div>`, `<form>` | Initiates the file upload component. **Required**. |
302
+ | `.pf-c-file-upload__file-select` | `<div>` | Initiates the file select element. **Required** |
303
+ | `.pf-c-file-upload__file-details` | `<div>` | Initiates the file details element. **Required** |
304
+ | `.pf-c-file-upload__file-details-spinner` | `<div>` | Initiates the file details element. **Required** |
305
+ | `.pf-m-drag-hover` | `.pf-c-file-upload` | Modifies file upload for when an element is dragged or dropped inside of its container. |
306
+ | `.pf-m-loading` | `.pf-c-file-upload` | Modifies file upload for the loading state. |