@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/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">
@@ -234,15 +275,14 @@ cssPrefix: pf-c-file-upload
234
275
  </textarea>
235
276
 
236
277
  <div class="pf-c-file-upload__file-details-spinner">
237
- <span
278
+ <svg
238
279
  class="pf-c-spinner pf-m-lg"
239
280
  role="progressbar"
281
+ viewBox="0 0 100 100"
240
282
  aria-label="Loading..."
241
283
  >
242
- <span class="pf-c-spinner__clipper"></span>
243
- <span class="pf-c-spinner__lead-ball"></span>
244
- <span class="pf-c-spinner__tail-ball"></span>
245
- </span>
284
+ <circle class="pf-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
285
+ </svg>
246
286
  </div>
247
287
  </div>
248
288
  </div>
@@ -255,11 +295,11 @@ cssPrefix: pf-c-file-upload
255
295
 
256
296
  ### Usage
257
297
 
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. |
298
+ | Class | Applied to | Outcome |
299
+ | -- | -- | -- |
300
+ | `.pf-c-file-upload` | `<div>`, `<form>` | Initiates the file upload component. **Required**. |
301
+ | `.pf-c-file-upload__file-select` | `<div>` | Initiates the file select element. **Required** |
302
+ | `.pf-c-file-upload__file-details` | `<div>` | Initiates the file details element. **Required** |
303
+ | `.pf-c-file-upload__file-details-spinner` | `<div>` | Initiates the file details element. **Required** |
304
+ | `.pf-m-drag-hover` | `.pf-c-file-upload` | Modifies file upload for when an element is dragged or dropped inside of its container. |
305
+ | `.pf-m-loading` | `.pf-c-file-upload` | Modifies file upload for the loading state. |