@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/SearchInput/examples/SearchInput.md CHANGED
@@ -1,6 +1,5 @@
1
1
  ---
2
2
  id: 'Search input'
3
- beta: true
4
3
  section: components
5
4
  cssPrefix: pf-c-search-input
6
5
  ---import './SearchInput.css'
@@ -139,22 +138,30 @@ cssPrefix: pf-c-search-input
139
138
  ```html
140
139
  <div class="pf-c-search-input">
141
140
  <div class="pf-c-input-group">
142
- <div class="pf-c-search-input__bar">
143
- <span class="pf-c-search-input__text">
144
- <span class="pf-c-search-input__icon">
145
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
141
+ <div class="pf-c-input-group__item pf-m-fill">
142
+ <div class="pf-c-search-input__bar">
143
+ <span class="pf-c-search-input__text">
144
+ <span class="pf-c-search-input__icon">
145
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
146
+ </span>
147
+ <input
148
+ class="pf-c-search-input__text-input"
149
+ type="text"
150
+ placeholder="Find by name"
151
+ aria-label="Find by name"
152
+ />
146
153
  </span>
147
- <input
148
- class="pf-c-search-input__text-input"
149
- type="text"
150
- placeholder="Find by name"
151
- aria-label="Find by name"
152
- />
153
- </span>
154
+ </div>
155
+ </div>
156
+ <div class="pf-c-input-group__item">
157
+ <button
158
+ class="pf-c-button pf-m-control"
159
+ type="submit"
160
+ aria-label="Search"
161
+ >
162
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
163
+ </button>
154
164
  </div>
155
- <button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
156
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
157
- </button>
158
165
  </div>
159
166
  </div>
160
167
 
@@ -165,42 +172,52 @@ cssPrefix: pf-c-search-input
165
172
  ```html
166
173
  <div class="pf-c-search-input">
167
174
  <div class="pf-c-input-group">
168
- <div class="pf-c-search-input__bar">
169
- <span class="pf-c-search-input__text">
170
- <span class="pf-c-search-input__icon">
171
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
175
+ <div class="pf-c-input-group__item pf-m-fill">
176
+ <div class="pf-c-search-input__bar">
177
+ <span class="pf-c-search-input__text">
178
+ <span class="pf-c-search-input__icon">
179
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
180
+ </span>
181
+ <input
182
+ class="pf-c-search-input__text-input"
183
+ type="text"
184
+ placeholder="username:admin firstname:joe"
185
+ aria-label="username:admin firstname:joe"
186
+ value="username:root firstname:ned"
187
+ />
172
188
  </span>
173
- <input
174
- class="pf-c-search-input__text-input"
175
- type="text"
176
- placeholder="username:admin firstname:joe"
177
- aria-label="username:admin firstname:joe"
178
- value="username:root firstname:ned"
179
- />
180
- </span>
181
- <span class="pf-c-search-input__utilities">
182
- <span class="pf-c-search-input__clear">
183
- <button
184
- class="pf-c-button pf-m-plain"
185
- type="button"
186
- aria-label="Clear"
187
- >
188
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
189
- </button>
189
+ <span class="pf-c-search-input__utilities">
190
+ <span class="pf-c-search-input__clear">
191
+ <button
192
+ class="pf-c-button pf-m-plain"
193
+ type="button"
194
+ aria-label="Clear"
195
+ >
196
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
197
+ </button>
198
+ </span>
190
199
  </span>
191
- </span>
200
+ </div>
201
+ </div>
202
+ <div class="pf-c-input-group__item">
203
+ <button
204
+ class="pf-c-button pf-m-control"
205
+ type="button"
206
+ aria-expanded="false"
207
+ aria-label="Advanced search"
208
+ >
209
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
210
+ </button>
211
+ </div>
212
+ <div class="pf-c-input-group__item">
213
+ <button
214
+ class="pf-c-button pf-m-control"
215
+ type="submit"
216
+ aria-label="Search"
217
+ >
218
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
219
+ </button>
192
220
  </div>
193
- <button
194
- class="pf-c-button pf-m-control"
195
- type="button"
196
- aria-expanded="false"
197
- aria-label="Advanced search"
198
- >
199
- <i class="fas fa-caret-down" aria-hidden="true"></i>
200
- </button>
201
- <button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
202
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
203
- </button>
204
221
  </div>
205
222
  </div>
206
223
 
@@ -211,42 +228,52 @@ cssPrefix: pf-c-search-input
211
228
  ```html
212
229
  <div class="pf-c-search-input">
213
230
  <div class="pf-c-input-group">
214
- <div class="pf-c-search-input__bar">
215
- <span class="pf-c-search-input__text">
216
- <span class="pf-c-search-input__icon">
217
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
231
+ <div class="pf-c-input-group__item pf-m-fill">
232
+ <div class="pf-c-search-input__bar">
233
+ <span class="pf-c-search-input__text">
234
+ <span class="pf-c-search-input__icon">
235
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
236
+ </span>
237
+ <input
238
+ class="pf-c-search-input__text-input"
239
+ type="text"
240
+ placeholder="username:admin firstname:joe"
241
+ aria-label="username:admin firstname:joe"
242
+ value="username:root firstname:ned"
243
+ />
218
244
  </span>
219
- <input
220
- class="pf-c-search-input__text-input"
221
- type="text"
222
- placeholder="username:admin firstname:joe"
223
- aria-label="username:admin firstname:joe"
224
- value="username:root firstname:ned"
225
- />
226
- </span>
227
- <span class="pf-c-search-input__utilities">
228
- <span class="pf-c-search-input__clear">
229
- <button
230
- class="pf-c-button pf-m-plain"
231
- type="button"
232
- aria-label="Clear"
233
- >
234
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
235
- </button>
245
+ <span class="pf-c-search-input__utilities">
246
+ <span class="pf-c-search-input__clear">
247
+ <button
248
+ class="pf-c-button pf-m-plain"
249
+ type="button"
250
+ aria-label="Clear"
251
+ >
252
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
253
+ </button>
254
+ </span>
236
255
  </span>
237
- </span>
256
+ </div>
257
+ </div>
258
+ <div class="pf-c-input-group__item">
259
+ <button
260
+ class="pf-c-button pf-m-control pf-m-expanded"
261
+ type="button"
262
+ aria-expanded="true"
263
+ aria-label="Advanced search"
264
+ >
265
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
266
+ </button>
267
+ </div>
268
+ <div class="pf-c-input-group__item">
269
+ <button
270
+ class="pf-c-button pf-m-control"
271
+ type="submit"
272
+ aria-label="Search"
273
+ >
274
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
275
+ </button>
238
276
  </div>
239
- <button
240
- class="pf-c-button pf-m-control pf-m-expanded"
241
- type="button"
242
- aria-expanded="true"
243
- aria-label="Advanced search"
244
- >
245
- <i class="fas fa-caret-down" aria-hidden="true"></i>
246
- </button>
247
- <button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
248
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
249
- </button>
250
277
  </div>
251
278
  <div class="pf-c-search-input__menu">
252
279
  <div class="pf-c-search-input__menu-body">
@@ -436,42 +463,52 @@ cssPrefix: pf-c-search-input
436
463
  ```html
437
464
  <div class="pf-c-search-input">
438
465
  <div class="pf-c-input-group">
439
- <div class="pf-c-search-input__bar">
440
- <span class="pf-c-search-input__text">
441
- <span class="pf-c-search-input__icon">
442
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
466
+ <div class="pf-c-input-group__item pf-m-fill">
467
+ <div class="pf-c-search-input__bar">
468
+ <span class="pf-c-search-input__text">
469
+ <span class="pf-c-search-input__icon">
470
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
471
+ </span>
472
+ <input
473
+ class="pf-c-search-input__text-input"
474
+ type="text"
475
+ placeholder="username:admin firstname:joe"
476
+ aria-label="username:admin firstname:joe"
477
+ value="username:root firstname:n"
478
+ />
443
479
  </span>
444
- <input
445
- class="pf-c-search-input__text-input"
446
- type="text"
447
- placeholder="username:admin firstname:joe"
448
- aria-label="username:admin firstname:joe"
449
- value="username:root firstname:n"
450
- />
451
- </span>
452
- <span class="pf-c-search-input__utilities">
453
- <span class="pf-c-search-input__clear">
454
- <button
455
- class="pf-c-button pf-m-plain"
456
- type="button"
457
- aria-label="Clear"
458
- >
459
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
460
- </button>
480
+ <span class="pf-c-search-input__utilities">
481
+ <span class="pf-c-search-input__clear">
482
+ <button
483
+ class="pf-c-button pf-m-plain"
484
+ type="button"
485
+ aria-label="Clear"
486
+ >
487
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
488
+ </button>
489
+ </span>
461
490
  </span>
462
- </span>
491
+ </div>
492
+ </div>
493
+ <div class="pf-c-input-group__item">
494
+ <button
495
+ class="pf-c-button pf-m-control pf-m-expanded"
496
+ type="button"
497
+ aria-expanded="true"
498
+ aria-label="Advanced search"
499
+ >
500
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
501
+ </button>
502
+ </div>
503
+ <div class="pf-c-input-group__item">
504
+ <button
505
+ class="pf-c-button pf-m-control"
506
+ type="submit"
507
+ aria-label="Search"
508
+ >
509
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
510
+ </button>
463
511
  </div>
464
- <button
465
- class="pf-c-button pf-m-control pf-m-expanded"
466
- type="button"
467
- aria-expanded="true"
468
- aria-label="Advanced search"
469
- >
470
- <i class="fas fa-caret-down" aria-hidden="true"></i>
471
- </button>
472
- <button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
473
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
474
- </button>
475
512
  </div>
476
513
  <div class="pf-c-search-input__menu">
477
514
  <div class="pf-c-search-input__menu-body">
@@ -581,40 +618,40 @@ cssPrefix: pf-c-search-input
581
618
 
582
619
  ### Accessibility
583
620
 
584
- | Attributes | Applied to | Outcome |
585
- | -------------------------------------- | ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
586
- | `aria-hidden="true"` | `.pf-c-search-input__icon > *` | Hides the search icon from assistive technologies. **Required** |
587
- | `aria-label="Previous"` | `.pf-c-search-input__nav > .pf-c-button` | Provides an accessible label for the previous nav button. **Required** |
588
- | `aria-label="Next"` | `.pf-c-search-input__nav > .pf-c-button` | Provides an accessible label for the next nav button. **Required** |
589
- | `aria-label="[descriptive text]"` | `.pf-c-search-input__text-input` | Provides an accessible label for the search input. **Required** |
590
- | `aria-label="Clear"` | `.pf-c-search-input__clear > .pf-c-button` | Provides an accessible label for the clear button. **Required** |
591
- | `aria-label="Search"` | `.pf-c-button` | Provides an accessible label for the search button. **Required** |
592
- | `aria-label="Advanced search"` | `.pf-c-button` | Provides an accessible label for the advanced search toggle. **Required** |
593
- | `aria-expanded="[true/false]"` | `.pf-c-button` | Indicates whether the advanced search menu is expanded or collapsed. **Required** |
594
- | `id` | `.pf-c-search-input__text-input` | Assigns an ID that is used with `aria-labelledby` on `.pf-c-search-input__menu-list`. **Required when using autocomplete** |
595
- | `aria-labelledby="[id of text input]"` | `.pf-c-search-input__menu-list` | Gives the menu list an accessible label. **Required when using autocomplete** |
596
- | `disabled` | `.pf-c-search-input__text-input.pf-m-hint` | Disables the hint text input from being submitted with the search input. **Required when using hint text** |
597
- | `aria-hidden="true"` | `.pf-c-search-input__text-input.pf-m-hint` | Hides the hint text input from assistive technology. **Required when using hint text** |
621
+ | Attributes | Applied to | Outcome |
622
+ | -- | -- | -- |
623
+ | `aria-hidden="true"` | `.pf-c-search-input__icon > *` | Hides the search icon from assistive technologies. **Required** |
624
+ | `aria-label="Previous"` | `.pf-c-search-input__nav > .pf-c-button` | Provides an accessible label for the previous nav button. **Required** |
625
+ | `aria-label="Next"` | `.pf-c-search-input__nav > .pf-c-button` | Provides an accessible label for the next nav button. **Required** |
626
+ | `aria-label="[descriptive text]"` | `.pf-c-search-input__text-input` | Provides an accessible label for the search input. **Required** |
627
+ | `aria-label="Clear"` | `.pf-c-search-input__clear > .pf-c-button` | Provides an accessible label for the clear button. **Required** |
628
+ | `aria-label="Search"` | `.pf-c-button` | Provides an accessible label for the search button. **Required** |
629
+ | `aria-label="Advanced search"` | `.pf-c-button` | Provides an accessible label for the advanced search toggle. **Required** |
630
+ | `aria-expanded="[true/false]"` | `.pf-c-button` | Indicates whether the advanced search menu is expanded or collapsed. **Required** |
631
+ | `id` | `.pf-c-search-input__text-input` | Assigns an ID that is used with `aria-labelledby` on `.pf-c-search-input__menu-list`. **Required when using autocomplete** |
632
+ | `aria-labelledby="[id of text input]"` | `.pf-c-search-input__menu-list` | Gives the menu list an accessible label. **Required when using autocomplete** |
633
+ | `disabled` | `.pf-c-search-input__text-input.pf-m-hint` | Disables the hint text input from being submitted with the search input. **Required when using hint text** |
634
+ | `aria-hidden="true"` | `.pf-c-search-input__text-input.pf-m-hint` | Hides the hint text input from assistive technology. **Required when using hint text** |
598
635
 
599
636
  ### Usage
600
637
 
601
- | Class | Applied to | Outcome |
602
- | ------------------------------------ | -------------------------------- | ----------------------------------------------------------------------------------------- |
603
- | `.pf-c-search-input` | `<div>` | Initiates the custom search input component. **Required** |
604
- | `.pf-c-search-input__bar` | `<div>` | Initiates the custom search input bar. **Required** |
605
- | `.pf-c-search-input__text` | `<span>` | Initiates the text area. **Required** |
606
- | `.pf-c-search-input__text-input` | `<input>` | Initiates the search input. **Required** |
607
- | `.pf-c-search-input__icon` | `<span>` | Initiates the search icon container. **Required** |
608
- | `.pf-c-search-input__utilities` | `<span>` | Initiates the utilities area beside the search input. |
609
- | `.pf-c-search-input__count` | `<span>` | Initiates the item count container. |
610
- | `.pf-c-search-input__nav` | `<span>` | Initiates the navigable buttons container. |
611
- | `.pf-c-search-input__clear` | `<span>` | Initiates the clear button container. **Required when there is text in the search input** |
612
- | `.pf-c-search-input__menu` | `<div>` | Initiates the search input dropdown menu. |
613
- | `.pf-c-search-input__menu-body` | `<div>` | Initiates the search input dropdown menu body element. |
614
- | `.pf-c-search-input__menu-list` | `<div>` | Initiates the search input dropdown menu list. |
615
- | `.pf-c-search-input__menu-list-item` | `<div>` | Initiates the search input dropdown menu list item. |
616
- | `.pf-c-search-input__menu-item` | `<div>` | Initiates the search input dropdown menu item. |
617
- | `.pf-c-search-input__menu-item-text` | `<span>` | Initiates the search input dropdown menu item text. |
618
- | `.pf-m-top` | `.pf-c-search-input__menu` | Modifies the menu to display above the toggle. |
619
- | `.pf-m-static` | `.pf-c-search-input__menu` | Modifies the menu to be statically positioned to support custom positioning. |
620
- | `.pf-m-hint` | `.pf-c-search-input__text-input` | Modifies the text input for hint text styles. |
638
+ | Class | Applied to | Outcome |
639
+ | -- | -- | -- |
640
+ | `.pf-c-search-input` | `<div>` | Initiates the custom search input component. **Required** |
641
+ | `.pf-c-search-input__bar` | `<div>` | Initiates the custom search input bar. **Required** |
642
+ | `.pf-c-search-input__text` | `<span>` | Initiates the text area. **Required** |
643
+ | `.pf-c-search-input__text-input` | `<input>` | Initiates the search input. **Required** |
644
+ | `.pf-c-search-input__icon` | `<span>` | Initiates the search icon container. **Required** |
645
+ | `.pf-c-search-input__utilities` | `<span>` | Initiates the utilities area beside the search input. |
646
+ | `.pf-c-search-input__count` | `<span>` | Initiates the item count container. |
647
+ | `.pf-c-search-input__nav` | `<span>` | Initiates the navigable buttons container. |
648
+ | `.pf-c-search-input__clear` | `<span>` | Initiates the clear button container. **Required when there is text in the search input** |
649
+ | `.pf-c-search-input__menu` | `<div>` | Initiates the search input dropdown menu. |
650
+ | `.pf-c-search-input__menu-body` | `<div>` | Initiates the search input dropdown menu body element. |
651
+ | `.pf-c-search-input__menu-list` | `<div>` | Initiates the search input dropdown menu list. |
652
+ | `.pf-c-search-input__menu-list-item` | `<div>` | Initiates the search input dropdown menu list item. |
653
+ | `.pf-c-search-input__menu-item` | `<div>` | Initiates the search input dropdown menu item. |
654
+ | `.pf-c-search-input__menu-item-text` | `<span>` | Initiates the search input dropdown menu item text. |
655
+ | `.pf-m-top` | `.pf-c-search-input__menu` | Modifies the menu to display above the toggle. |
656
+ | `.pf-m-static` | `.pf-c-search-input__menu` | Modifies the menu to be statically positioned to support custom positioning. |
657
+ | `.pf-m-hint` | `.pf-c-search-input__text-input` | Modifies the text input for hint text styles. |