@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/demos/Toolbar/examples/Toolbar.md CHANGED
@@ -5,7 +5,7 @@ section: components
5
5
 
6
6
  ## Demos
7
7
 
8
- ### Toolbar attribute value search filter desktop
8
+ ### Toolbar attribute value search filter on desktop
9
9
 
10
10
  ```html
11
11
  <div
@@ -28,81 +28,87 @@ section: components
28
28
  </div>
29
29
  <div class="pf-c-toolbar__item pf-m-search-filter">
30
30
  <div class="pf-c-input-group" aria-label="search filter" role="group">
31
- <div class="pf-c-select" style="width: 175px">
32
- <span
33
- id="toolbar-attribute-value-search-filter-desktop-example-select-name-label"
34
- hidden
35
- >Choose one</span>
31
+ <div class="pf-c-input-group__item pf-m-fill">
32
+ <div class="pf-c-select" style="width: 124px">
33
+ <span
34
+ id="toolbar-attribute-value-search-filter-desktop-example-select-name-label"
35
+ hidden
36
+ >Choose one</span>
36
37
 
37
- <button
38
- class="pf-c-select__toggle"
39
- type="button"
40
- id="toolbar-attribute-value-search-filter-desktop-example-select-name-toggle"
41
- aria-haspopup="true"
42
- aria-expanded="false"
43
- aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-select-name-label toolbar-attribute-value-search-filter-desktop-example-select-name-toggle"
44
- >
45
- <div class="pf-c-select__toggle-wrapper">
46
- <span class="pf-c-select__toggle-icon">
47
- <i class="fas fa-filter" aria-hidden="true"></i>
38
+ <button
39
+ class="pf-c-select__toggle"
40
+ type="button"
41
+ id="toolbar-attribute-value-search-filter-desktop-example-select-name-toggle"
42
+ aria-haspopup="true"
43
+ aria-expanded="false"
44
+ aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-select-name-label toolbar-attribute-value-search-filter-desktop-example-select-name-toggle"
45
+ >
46
+ <div class="pf-c-select__toggle-wrapper">
47
+ <span class="pf-c-select__toggle-icon">
48
+ <i class="fas fa-filter" aria-hidden="true"></i>
49
+ </span>
50
+ <span class="pf-c-select__toggle-text">Name</span>
51
+ </div>
52
+ <span class="pf-c-select__toggle-arrow">
53
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
48
54
  </span>
49
- <span class="pf-c-select__toggle-text">Name</span>
50
- </div>
51
- <span class="pf-c-select__toggle-arrow">
52
- <i class="fas fa-caret-down" aria-hidden="true"></i>
53
- </span>
54
- </button>
55
+ </button>
55
56
 
56
- <ul
57
- class="pf-c-select__menu"
58
- role="listbox"
59
- aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-select-name-label"
60
- hidden
61
- style="width: 175px"
62
- >
63
- <li role="presentation">
64
- <button class="pf-c-select__menu-item" role="option">Running</button>
65
- </li>
66
- <li role="presentation">
67
- <button
68
- class="pf-c-select__menu-item pf-m-selected"
69
- role="option"
70
- aria-selected="true"
71
- >
72
- Stopped
73
- <span class="pf-c-select__menu-item-icon">
74
- <i class="fas fa-check" aria-hidden="true"></i>
75
- </span>
76
- </button>
77
- </li>
78
- <li role="presentation">
79
- <button class="pf-c-select__menu-item" role="option">Down</button>
80
- </li>
81
- <li role="presentation">
82
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
83
- </li>
84
- <li role="presentation">
85
- <button
86
- class="pf-c-select__menu-item"
87
- role="option"
88
- >Needs maintenance</button>
89
- </li>
90
- </ul>
57
+ <ul
58
+ class="pf-c-select__menu"
59
+ role="listbox"
60
+ aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-select-name-label"
61
+ hidden
62
+ >
63
+ <li role="presentation">
64
+ <button class="pf-c-select__menu-item" role="option">Running</button>
65
+ </li>
66
+ <li role="presentation">
67
+ <button
68
+ class="pf-c-select__menu-item pf-m-selected"
69
+ role="option"
70
+ aria-selected="true"
71
+ >
72
+ Stopped
73
+ <span class="pf-c-select__menu-item-icon">
74
+ <i class="fas fa-check" aria-hidden="true"></i>
75
+ </span>
76
+ </button>
77
+ </li>
78
+ <li role="presentation">
79
+ <button class="pf-c-select__menu-item" role="option">Down</button>
80
+ </li>
81
+ <li role="presentation">
82
+ <button
83
+ class="pf-c-select__menu-item"
84
+ role="option"
85
+ >Degraded</button>
86
+ </li>
87
+ <li role="presentation">
88
+ <button
89
+ class="pf-c-select__menu-item"
90
+ role="option"
91
+ >Needs maintenance</button>
92
+ </li>
93
+ </ul>
94
+ </div>
91
95
  </div>
92
- <div class="pf-c-text-input-group">
93
- <div class="pf-c-text-input-group__main pf-m-icon">
94
- <span class="pf-c-text-input-group__text">
95
- <span class="pf-c-text-input-group__icon">
96
- <i class="fas fa-fw fa-search"></i>
96
+ <div class="pf-c-input-group__item">
97
+ <div class="pf-c-text-input-group" style="width: auto">
98
+ <div class="pf-c-text-input-group__main pf-m-icon">
99
+ <span class="pf-c-text-input-group__text">
100
+ <span class="pf-c-text-input-group__icon">
101
+ <i class="fas fa-fw fa-search"></i>
102
+ </span>
103
+ <input
104
+ class="pf-c-text-input-group__text-input"
105
+ type="search"
106
+ placeholder="Filter by name"
107
+ value
108
+ aria-label="Type to filter"
109
+ />
97
110
  </span>
98
- <input
99
- class="pf-c-text-input-group__text-input"
100
- type="text"
101
- value
102
- placeholder="Filter by name"
103
- aria-label="Type to filter"
104
- />
105
- </span>
111
+ </div>
106
112
  </div>
107
113
  </div>
108
114
  </div>
@@ -236,6 +242,1620 @@ section: components
236
242
 
237
243
  ```
238
244
 
245
+ ### Toolbar with validation on desktop
246
+
247
+ ```html isFullscreen
248
+ <div class="pf-c-page" id="toolbar-pagination-management-example">
249
+ <div class="pf-c-skip-to-content">
250
+ <a
251
+ class="pf-c-button pf-m-primary"
252
+ href="#main-content-toolbar-pagination-management-example"
253
+ >Skip to content</a>
254
+ </div>
255
+ <header
256
+ class="pf-c-masthead"
257
+ id="toolbar-pagination-management-example-masthead"
258
+ >
259
+ <span class="pf-c-masthead__toggle">
260
+ <button
261
+ class="pf-c-button pf-m-plain"
262
+ type="button"
263
+ aria-label="Global navigation"
264
+ >
265
+ <i class="fas fa-bars" aria-hidden="true"></i>
266
+ </button>
267
+ </span>
268
+ <div class="pf-c-masthead__main">
269
+ <a class="pf-c-masthead__brand" href="#">
270
+ <picture
271
+ class="pf-c-brand pf-m-picture"
272
+ style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
273
+ >
274
+ <source
275
+ media="(min-width: 768px)"
276
+ srcset="/assets/images/logo__pf--reverse-on-md.svg"
277
+ />
278
+ <source srcset="/assets/images/logo__pf--reverse--base.svg" />
279
+ <img
280
+ src="/assets/images/logo__pf--reverse--base.png"
281
+ alt="Fallback patternFly default logo"
282
+ />
283
+ </picture>
284
+ </a>
285
+ </div>
286
+ <div class="pf-c-masthead__content">
287
+ <div
288
+ class="pf-c-toolbar pf-m-full-height pf-m-static"
289
+ id="toolbar-pagination-management-example-masthead-toolbar"
290
+ >
291
+ <div class="pf-c-toolbar__content">
292
+ <div class="pf-c-toolbar__content-section">
293
+ <div
294
+ class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
295
+ >
296
+ <div
297
+ class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
298
+ >
299
+ <div class="pf-c-toolbar__item">
300
+ <nav
301
+ class="pf-c-app-launcher"
302
+ aria-label="Application launcher"
303
+ id="toolbar-pagination-management-example-masthead-application-launcher"
304
+ >
305
+ <button
306
+ class="pf-c-app-launcher__toggle"
307
+ type="button"
308
+ id="toolbar-pagination-management-example-masthead-application-launcher-button"
309
+ aria-expanded="false"
310
+ aria-label="Application launcher"
311
+ >
312
+ <i class="fas fa-th" aria-hidden="true"></i>
313
+ </button>
314
+ <div
315
+ class="pf-c-app-launcher__menu pf-m-align-right"
316
+ hidden
317
+ >
318
+ <div class="pf-c-app-launcher__menu-search">
319
+ <div class="pf-c-search-input">
320
+ <div class="pf-c-search-input__bar">
321
+ <span class="pf-c-search-input__text">
322
+ <span class="pf-c-search-input__icon">
323
+ <i
324
+ class="fas fa-search fa-fw"
325
+ aria-hidden="true"
326
+ ></i>
327
+ </span>
328
+ <input
329
+ class="pf-c-search-input__text-input"
330
+ type="text"
331
+ placeholder="Filter by name"
332
+ aria-label="Filter by name"
333
+ />
334
+ </span>
335
+ </div>
336
+ </div>
337
+ </div>
338
+ <section class="pf-c-app-launcher__group">
339
+ <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
340
+ <ul role="list">
341
+ <li
342
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
343
+ >
344
+ <a class="pf-c-app-launcher__menu-item">
345
+ Link 1
346
+ <span
347
+ class="pf-c-app-launcher__menu-item-external-icon"
348
+ >
349
+ <i
350
+ class="fas fa-external-link-alt"
351
+ aria-hidden="true"
352
+ ></i>
353
+ </span>
354
+ <span class="pf-screen-reader">(opens new window)</span>
355
+ </a>
356
+ <button
357
+ class="pf-c-app-launcher__menu-item pf-m-action"
358
+ type="button"
359
+ aria-label="Favorite"
360
+ >
361
+ <i class="fas fa-star" aria-hidden="true"></i>
362
+ </button>
363
+ </li>
364
+ <li
365
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
366
+ >
367
+ <a class="pf-c-app-launcher__menu-item">
368
+ Link 2
369
+ <span
370
+ class="pf-c-app-launcher__menu-item-external-icon"
371
+ >
372
+ <i
373
+ class="fas fa-external-link-alt"
374
+ aria-hidden="true"
375
+ ></i>
376
+ </span>
377
+ <span class="pf-screen-reader">(opens new window)</span>
378
+ </a>
379
+ <button
380
+ class="pf-c-app-launcher__menu-item pf-m-action"
381
+ type="button"
382
+ aria-label="Favorite"
383
+ >
384
+ <i class="fas fa-star" aria-hidden="true"></i>
385
+ </button>
386
+ </li>
387
+ </ul>
388
+ </section>
389
+ <hr class="pf-c-divider" />
390
+ <section class="pf-c-app-launcher__group">
391
+ <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
392
+ <ul role="list">
393
+ <li
394
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
395
+ >
396
+ <a class="pf-c-app-launcher__menu-item">
397
+ Link 1
398
+ <span
399
+ class="pf-c-app-launcher__menu-item-external-icon"
400
+ >
401
+ <i
402
+ class="fas fa-external-link-alt"
403
+ aria-hidden="true"
404
+ ></i>
405
+ </span>
406
+ <span class="pf-screen-reader">(opens new window)</span>
407
+ </a>
408
+ <button
409
+ class="pf-c-app-launcher__menu-item pf-m-action"
410
+ type="button"
411
+ aria-label="Favorite"
412
+ >
413
+ <i class="fas fa-star" aria-hidden="true"></i>
414
+ </button>
415
+ </li>
416
+ <li
417
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
418
+ >
419
+ <a class="pf-c-app-launcher__menu-item">
420
+ Link 2
421
+ <span
422
+ class="pf-c-app-launcher__menu-item-external-icon"
423
+ >
424
+ <i
425
+ class="fas fa-external-link-alt"
426
+ aria-hidden="true"
427
+ ></i>
428
+ </span>
429
+ <span class="pf-screen-reader">(opens new window)</span>
430
+ </a>
431
+ <button
432
+ class="pf-c-app-launcher__menu-item pf-m-action"
433
+ type="button"
434
+ aria-label="Favorite"
435
+ >
436
+ <i class="fas fa-star" aria-hidden="true"></i>
437
+ </button>
438
+ </li>
439
+ </ul>
440
+ </section>
441
+ </div>
442
+ </nav>
443
+ </div>
444
+ <div class="pf-c-toolbar__item">
445
+ <div class="pf-c-dropdown">
446
+ <button
447
+ class="pf-c-dropdown__toggle pf-m-plain"
448
+ id="toolbar-pagination-management-example-masthead-settings-button"
449
+ aria-expanded="false"
450
+ type="button"
451
+ aria-label="Settings"
452
+ >
453
+ <i class="fas fa-cog" aria-hidden="true"></i>
454
+ </button>
455
+ <ul
456
+ class="pf-c-dropdown__menu pf-m-align-right"
457
+ aria-labelledby="toolbar-pagination-management-example-masthead-settings-button"
458
+ hidden
459
+ >
460
+ <li>
461
+ <button
462
+ class="pf-c-dropdown__menu-item"
463
+ type="button"
464
+ >Settings</button>
465
+ </li>
466
+ <li>
467
+ <button
468
+ class="pf-c-dropdown__menu-item"
469
+ type="button"
470
+ >Use the beta release</button>
471
+ </li>
472
+ </ul>
473
+ </div>
474
+ </div>
475
+ <div class="pf-c-toolbar__item">
476
+ <div class="pf-c-dropdown">
477
+ <button
478
+ class="pf-c-dropdown__toggle pf-m-plain"
479
+ id="toolbar-pagination-management-example-masthead-help-button"
480
+ aria-expanded="false"
481
+ type="button"
482
+ aria-label="Help"
483
+ >
484
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
485
+ </button>
486
+ <ul
487
+ class="pf-c-dropdown__menu pf-m-align-right"
488
+ aria-labelledby="toolbar-pagination-management-example-masthead-help-button"
489
+ hidden
490
+ >
491
+ <li>
492
+ <button
493
+ class="pf-c-dropdown__menu-item"
494
+ type="button"
495
+ >Support options</button>
496
+ </li>
497
+ <li>
498
+ <button
499
+ class="pf-c-dropdown__menu-item"
500
+ type="button"
501
+ >Open support case</button>
502
+ </li>
503
+ <li>
504
+ <button
505
+ class="pf-c-dropdown__menu-item"
506
+ type="button"
507
+ >API documentation</button>
508
+ </li>
509
+ </ul>
510
+ </div>
511
+ </div>
512
+ </div>
513
+ <div class="pf-c-toolbar__item pf-m-hidden-on-lg">
514
+ <div class="pf-c-dropdown">
515
+ <button
516
+ class="pf-c-menu-toggle pf-m-plain"
517
+ type="button"
518
+ aria-expanded="false"
519
+ aria-label="Actions"
520
+ >
521
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
522
+ </button>
523
+ <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
524
+ <div class="pf-c-menu__content">
525
+ <section class="pf-c-menu__group pf-m-hidden-on-sm">
526
+ <ul class="pf-c-menu__list" role="menu">
527
+ <li
528
+ class="pf-c-menu__list-item pf-m-disabled"
529
+ role="none"
530
+ >
531
+ <button
532
+ class="pf-c-menu__item"
533
+ type="button"
534
+ disabled
535
+ role="menuitem"
536
+ >
537
+ <span class="pf-c-menu__item-description">
538
+ <div class="pf-u-font-size-sm">Username:</div>
539
+ <div class="pf-u-font-size-md">ned_username</div>
540
+ </span>
541
+ </button>
542
+ </li>
543
+ <li
544
+ class="pf-c-menu__list-item pf-m-disabled"
545
+ role="none"
546
+ >
547
+ <button
548
+ class="pf-c-menu__item"
549
+ type="button"
550
+ disabled
551
+ role="menuitem"
552
+ >
553
+ <span class="pf-c-menu__item-description">
554
+ <div class="pf-u-font-size-sm">Account number:</div>
555
+ <div class="pf-u-font-size-md">123456789</div>
556
+ </span>
557
+ </button>
558
+ </li>
559
+ <li class="pf-c-divider" role="separator"></li>
560
+ <li class="pf-c-menu__list-item" role="none">
561
+ <button
562
+ class="pf-c-menu__item"
563
+ type="button"
564
+ role="menuitem"
565
+ >
566
+ <span class="pf-c-menu__item-main">
567
+ <span class="pf-c-menu__item-text">My profile</span>
568
+ </span>
569
+ </button>
570
+ </li>
571
+ <li class="pf-c-menu__list-item" role="none">
572
+ <button
573
+ class="pf-c-menu__item"
574
+ type="button"
575
+ role="menuitem"
576
+ >
577
+ <span class="pf-c-menu__item-main">
578
+ <span
579
+ class="pf-c-menu__item-text"
580
+ >User management</span>
581
+ </span>
582
+ </button>
583
+ </li>
584
+ <li class="pf-c-menu__list-item" role="none">
585
+ <button
586
+ class="pf-c-menu__item"
587
+ type="button"
588
+ role="menuitem"
589
+ >
590
+ <span class="pf-c-menu__item-main">
591
+ <span class="pf-c-menu__item-text">Logout</span>
592
+ </span>
593
+ </button>
594
+ </li>
595
+ </ul>
596
+ </section>
597
+ <hr class="pf-c-divider pf-m-hidden-on-sm" />
598
+ <section class="pf-c-menu__group">
599
+ <ul class="pf-c-menu__list" role="menu">
600
+ <li class="pf-c-menu__list-item" role="none">
601
+ <button
602
+ class="pf-c-menu__item"
603
+ type="button"
604
+ role="menuitem"
605
+ aria-expanded="false"
606
+ >
607
+ <span class="pf-c-menu__item-main">
608
+ <span class="pf-c-menu__item-icon">
609
+ <i
610
+ class="fas fa-fw fa-cog"
611
+ aria-hidden="true"
612
+ ></i>
613
+ </span>
614
+ <span class="pf-c-menu__item-text">Settings</span>
615
+ <span class="pf-c-menu__item-toggle-icon">
616
+ <i class="fas fa-angle-right"></i>
617
+ </span>
618
+ </span>
619
+ </button>
620
+ <div class="pf-c-menu" hidden>
621
+ <div class="pf-c-menu__content">
622
+ <ul class="pf-c-menu__list" role="menu">
623
+ <li
624
+ class="pf-c-menu__list-item pf-m-drill-up"
625
+ role="none"
626
+ >
627
+ <button
628
+ class="pf-c-menu__item"
629
+ type="button"
630
+ role="menuitem"
631
+ >
632
+ <span class="pf-c-menu__item-main">
633
+ <span
634
+ class="pf-c-menu__item-toggle-icon"
635
+ >
636
+ <i class="fas fa-angle-left"></i>
637
+ </span>
638
+ <span class="pf-c-menu__item-icon">
639
+ <i
640
+ class="fas fa-fw fa-cog"
641
+ aria-hidden="true"
642
+ ></i>
643
+ </span>
644
+ <span
645
+ class="pf-c-menu__item-text"
646
+ >Settings</span>
647
+ </span>
648
+ </button>
649
+ </li>
650
+ <li class="pf-c-divider" role="separator"></li>
651
+ <li class="pf-c-menu__list-item" role="none">
652
+ <a
653
+ class="pf-c-menu__item"
654
+ href="#"
655
+ role="menuitem"
656
+ >
657
+ <span class="pf-c-menu__item-main">
658
+ <span
659
+ class="pf-c-menu__item-text"
660
+ >Customer support</span>
661
+ </span>
662
+ </a>
663
+ </li>
664
+ <li class="pf-c-menu__list-item" role="none">
665
+ <a
666
+ class="pf-c-menu__item"
667
+ href="#"
668
+ role="menuitem"
669
+ >
670
+ <span class="pf-c-menu__item-main">
671
+ <span class="pf-c-menu__item-text">About</span>
672
+ </span>
673
+ </a>
674
+ </li>
675
+ </ul>
676
+ </div>
677
+ </div>
678
+ </li>
679
+
680
+ <li class="pf-c-menu__list-item" role="none">
681
+ <button
682
+ class="pf-c-menu__item"
683
+ type="button"
684
+ role="menuitem"
685
+ aria-expanded="false"
686
+ >
687
+ <span class="pf-c-menu__item-main">
688
+ <span class="pf-c-menu__item-icon">
689
+ <i
690
+ class="fas fa-fw fa-pf-icon pf-icon-help"
691
+ aria-hidden="true"
692
+ ></i>
693
+ </span>
694
+ <span class="pf-c-menu__item-text">Help</span>
695
+ <span class="pf-c-menu__item-toggle-icon">
696
+ <i class="fas fa-angle-right"></i>
697
+ </span>
698
+ </span>
699
+ </button>
700
+ <div class="pf-c-menu" hidden>
701
+ <div class="pf-c-menu__content">
702
+ <ul class="pf-c-menu__list" role="menu">
703
+ <li
704
+ class="pf-c-menu__list-item pf-m-drill-up"
705
+ role="none"
706
+ >
707
+ <button
708
+ class="pf-c-menu__item"
709
+ type="button"
710
+ role="menuitem"
711
+ >
712
+ <span class="pf-c-menu__item-main">
713
+ <span
714
+ class="pf-c-menu__item-toggle-icon"
715
+ >
716
+ <i class="fas fa-angle-left"></i>
717
+ </span>
718
+ <span class="pf-c-menu__item-icon">
719
+ <i
720
+ class="fas fa-fw fa-pf-icon pf-icon-help"
721
+ aria-hidden="true"
722
+ ></i>
723
+ </span>
724
+ <span class="pf-c-menu__item-text">Help</span>
725
+ </span>
726
+ </button>
727
+ </li>
728
+ <li class="pf-c-divider" role="separator"></li>
729
+ <li class="pf-c-menu__list-item" role="none">
730
+ <a
731
+ class="pf-c-menu__item"
732
+ href="#"
733
+ role="menuitem"
734
+ >
735
+ <span class="pf-c-menu__item-main">
736
+ <span
737
+ class="pf-c-menu__item-text"
738
+ >Support options</span>
739
+ </span>
740
+ </a>
741
+ </li>
742
+ <li class="pf-c-menu__list-item" role="none">
743
+ <a
744
+ class="pf-c-menu__item"
745
+ href="#"
746
+ role="menuitem"
747
+ >
748
+ <span class="pf-c-menu__item-main">
749
+ <span
750
+ class="pf-c-menu__item-text"
751
+ >Open support case</span>
752
+ </span>
753
+ </a>
754
+ </li>
755
+ <li class="pf-c-menu__list-item" role="none">
756
+ <a
757
+ class="pf-c-menu__item"
758
+ href="#"
759
+ role="menuitem"
760
+ >
761
+ <span class="pf-c-menu__item-main">
762
+ <span
763
+ class="pf-c-menu__item-text"
764
+ >API documentation</span>
765
+ </span>
766
+ </a>
767
+ </li>
768
+ </ul>
769
+ </div>
770
+ </div>
771
+ </li>
772
+
773
+ <li class="pf-c-menu__list-item" role="none">
774
+ <button
775
+ class="pf-c-menu__item"
776
+ type="button"
777
+ role="menuitem"
778
+ >
779
+ <span class="pf-c-menu__item-main">
780
+ <span class="pf-c-menu__item-icon">
781
+ <i class="fas fa-fw fa-th" aria-hidden="true"></i>
782
+ </span>
783
+ <span
784
+ class="pf-c-menu__item-text"
785
+ >Application launcher</span>
786
+ <span class="pf-c-menu__item-toggle-icon">
787
+ <i class="fas fa-angle-right"></i>
788
+ </span>
789
+ </span>
790
+ </button>
791
+ <div class="pf-c-menu" hidden>
792
+ <div class="pf-c-menu__header">
793
+ <button
794
+ class="pf-c-menu__item"
795
+ type="button"
796
+ role="menuitem"
797
+ >
798
+ <span class="pf-c-menu__item-main">
799
+ <span class="pf-c-menu__item-toggle-icon">
800
+ <i class="fas fa-angle-left"></i>
801
+ </span>
802
+ <span class="pf-c-menu__item-icon">
803
+ <i
804
+ class="fas fa-fw fa-th"
805
+ aria-hidden="true"
806
+ ></i>
807
+ </span>
808
+ <span
809
+ class="pf-c-menu__item-text"
810
+ >Application launcher</span>
811
+ </span>
812
+ </button>
813
+ </div>
814
+ <div class="pf-c-menu__search">
815
+ <div class="pf-c-menu__search-input">
816
+ <div class="pf-c-search-input">
817
+ <div class="pf-c-search-input__bar">
818
+ <span class="pf-c-search-input__text">
819
+ <span class="pf-c-search-input__icon">
820
+ <i
821
+ class="fas fa-search fa-fw"
822
+ aria-hidden="true"
823
+ ></i>
824
+ </span>
825
+ <input
826
+ class="pf-c-search-input__text-input"
827
+ type="text"
828
+ placeholder="Search"
829
+ aria-label="Search"
830
+ />
831
+ </span>
832
+ </div>
833
+ </div>
834
+ </div>
835
+ </div>
836
+ <hr class="pf-c-divider" />
837
+ <section class="pf-c-menu__group">
838
+ <h1 class="pf-c-menu__group-title">Favorites</h1>
839
+ <ul class="pf-c-menu__list" role="menu">
840
+ <li class="pf-c-menu__list-item" role="none">
841
+ <a
842
+ class="pf-c-menu__item"
843
+ href="#"
844
+ role="menuitem"
845
+ >
846
+ <span class="pf-c-menu__item-main">
847
+ <span
848
+ class="pf-c-menu__item-text"
849
+ >Link 1</span>
850
+ </span>
851
+ </a>
852
+ <button
853
+ class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
854
+ type="button"
855
+ aria-label="Starred"
856
+ >
857
+ <span class="pf-c-menu__item-action-icon">
858
+ <i
859
+ class="fas fa-star"
860
+ aria-hidden="true"
861
+ ></i>
862
+ </span>
863
+ </button>
864
+ </li>
865
+ <li class="pf-c-menu__list-item" role="none">
866
+ <a
867
+ class="pf-c-menu__item"
868
+ href="#"
869
+ role="menuitem"
870
+ target="_blank"
871
+ >
872
+ <span class="pf-c-menu__item-main">
873
+ <span
874
+ class="pf-c-menu__item-text"
875
+ >Link 2</span>
876
+ <span
877
+ class="pf-c-menu__item-external-icon"
878
+ >
879
+ <i
880
+ class="fas fa-external-link-alt"
881
+ aria-hidden="true"
882
+ ></i>
883
+ </span>
884
+ <span
885
+ class="pf-screen-reader"
886
+ >(opens new window)</span>
887
+ </span>
888
+ </a>
889
+ <button
890
+ class="pf-c-menu__item-action pf-m-favorite"
891
+ type="button"
892
+ aria-label="Not starred"
893
+ >
894
+ <span class="pf-c-menu__item-action-icon">
895
+ <i
896
+ class="fas fa-star"
897
+ aria-hidden="true"
898
+ ></i>
899
+ </span>
900
+ </button>
901
+ </li>
902
+ </ul>
903
+ </section>
904
+ <hr class="pf-c-divider" />
905
+ <section class="pf-c-menu__group">
906
+ <h1 class="pf-c-menu__group-title">Group 1</h1>
907
+ <ul class="pf-c-menu__list" role="menu">
908
+ <li class="pf-c-menu__list-item" role="none">
909
+ <a
910
+ class="pf-c-menu__item"
911
+ href="#"
912
+ role="menuitem"
913
+ >
914
+ <span class="pf-c-menu__item-main">
915
+ <span
916
+ class="pf-c-menu__item-text"
917
+ >Link 1</span>
918
+ </span>
919
+ </a>
920
+ <button
921
+ class="pf-c-menu__item-action pf-m-favorite"
922
+ type="button"
923
+ aria-label="Not starred"
924
+ >
925
+ <span class="pf-c-menu__item-action-icon">
926
+ <i
927
+ class="fas fa-star"
928
+ aria-hidden="true"
929
+ ></i>
930
+ </span>
931
+ </button>
932
+ </li>
933
+ <li class="pf-c-menu__list-item" role="none">
934
+ <a
935
+ class="pf-c-menu__item"
936
+ href="#"
937
+ role="menuitem"
938
+ target="_blank"
939
+ >
940
+ <span class="pf-c-menu__item-main">
941
+ <span
942
+ class="pf-c-menu__item-text"
943
+ >Link 2</span>
944
+ <span
945
+ class="pf-c-menu__item-external-icon"
946
+ >
947
+ <i
948
+ class="fas fa-external-link-alt"
949
+ aria-hidden="true"
950
+ ></i>
951
+ </span>
952
+ <span
953
+ class="pf-screen-reader"
954
+ >(opens new window)</span>
955
+ </span>
956
+ </a>
957
+ <button
958
+ class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
959
+ type="button"
960
+ aria-label="Starred"
961
+ >
962
+ <span class="pf-c-menu__item-action-icon">
963
+ <i
964
+ class="fas fa-star"
965
+ aria-hidden="true"
966
+ ></i>
967
+ </span>
968
+ </button>
969
+ </li>
970
+ </ul>
971
+ </section>
972
+ </div>
973
+ </li>
974
+ </ul>
975
+ </section>
976
+ </div>
977
+ </div>
978
+ </div>
979
+ </div>
980
+ </div>
981
+ <div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
982
+ <div
983
+ class="pf-c-dropdown pf-m-full-height"
984
+ style="--pf-c-dropdown--MaxWidth: 20ch;"
985
+ >
986
+ <button
987
+ class="pf-c-dropdown__toggle"
988
+ id="toolbar-pagination-management-example-masthead-profile-button"
989
+ aria-expanded="false"
990
+ type="button"
991
+ >
992
+ <span class="pf-c-dropdown__toggle-image">
993
+ <img
994
+ class="pf-c-avatar"
995
+ alt="Avatar image"
996
+ src="/assets/images/img_avatar-light.svg"
997
+ />
998
+ </span>
999
+ <span class="pf-c-dropdown__toggle-text">Ned Username</span>
1000
+ <span class="pf-c-dropdown__toggle-icon">
1001
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1002
+ </span>
1003
+ </button>
1004
+ <div class="pf-c-dropdown__menu" hidden>
1005
+ <section class="pf-c-dropdown__group">
1006
+ <div class="pf-c-dropdown__menu-item pf-m-text">
1007
+ <div class="pf-u-font-size-sm">Account number:</div>
1008
+ <div>123456789</div>
1009
+ </div>
1010
+ <div class="pf-c-dropdown__menu-item pf-m-text">
1011
+ <div class="pf-u-font-size-sm">Username:</div>
1012
+ <div>mshaksho@redhat.com</div>
1013
+ </div>
1014
+ </section>
1015
+ <hr class="pf-c-divider" />
1016
+ <section class="pf-c-dropdown__group">
1017
+ <ul>
1018
+ <li>
1019
+ <a class="pf-c-dropdown__menu-item" href="#">My profile</a>
1020
+ </li>
1021
+ <li>
1022
+ <a
1023
+ class="pf-c-dropdown__menu-item"
1024
+ href="#"
1025
+ >User management</a>
1026
+ </li>
1027
+ <li>
1028
+ <a class="pf-c-dropdown__menu-item" href="#">Logout</a>
1029
+ </li>
1030
+ </ul>
1031
+ </section>
1032
+ </div>
1033
+ </div>
1034
+ </div>
1035
+ </div>
1036
+ </div>
1037
+ </div>
1038
+ </div>
1039
+ </header>
1040
+ <div class="pf-c-page__sidebar">
1041
+ <div class="pf-c-page__sidebar-body">
1042
+ <nav
1043
+ class="pf-c-nav"
1044
+ id="toolbar-pagination-management-example-primary-nav"
1045
+ aria-label="Global"
1046
+ >
1047
+ <ul class="pf-c-nav__list" role="list">
1048
+ <li class="pf-c-nav__item">
1049
+ <a href="#" class="pf-c-nav__link">System panel</a>
1050
+ </li>
1051
+ <li class="pf-c-nav__item">
1052
+ <a
1053
+ href="#"
1054
+ class="pf-c-nav__link pf-m-current"
1055
+ aria-current="page"
1056
+ >Policy</a>
1057
+ </li>
1058
+ <li class="pf-c-nav__item">
1059
+ <a href="#" class="pf-c-nav__link">Authentication</a>
1060
+ </li>
1061
+ <li class="pf-c-nav__item">
1062
+ <a href="#" class="pf-c-nav__link">Network services</a>
1063
+ </li>
1064
+ <li class="pf-c-nav__item">
1065
+ <a href="#" class="pf-c-nav__link">Server</a>
1066
+ </li>
1067
+ </ul>
1068
+ </nav>
1069
+ </div>
1070
+ </div>
1071
+ <main
1072
+ class="pf-c-page__main"
1073
+ tabindex="-1"
1074
+ id="main-content-toolbar-pagination-management-example"
1075
+ >
1076
+ <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
1077
+ <div class="pf-c-page__main-body">
1078
+ <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
1079
+ <ol class="pf-c-breadcrumb__list" role="list">
1080
+ <li class="pf-c-breadcrumb__item">
1081
+ <a href="#" class="pf-c-breadcrumb__link">Section home</a>
1082
+ </li>
1083
+ <li class="pf-c-breadcrumb__item">
1084
+ <span class="pf-c-breadcrumb__item-divider">
1085
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1086
+ </span>
1087
+
1088
+ <a href="#" class="pf-c-breadcrumb__link">Section title</a>
1089
+ </li>
1090
+ <li class="pf-c-breadcrumb__item">
1091
+ <span class="pf-c-breadcrumb__item-divider">
1092
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1093
+ </span>
1094
+
1095
+ <a href="#" class="pf-c-breadcrumb__link">Section title</a>
1096
+ </li>
1097
+ <li class="pf-c-breadcrumb__item">
1098
+ <span class="pf-c-breadcrumb__item-divider">
1099
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1100
+ </span>
1101
+
1102
+ <a
1103
+ href="#"
1104
+ class="pf-c-breadcrumb__link pf-m-current"
1105
+ aria-current="page"
1106
+ >Section landing</a>
1107
+ </li>
1108
+ </ol>
1109
+ </nav>
1110
+ </div>
1111
+ </section>
1112
+ <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
1113
+ <div class="pf-c-page__main-body">
1114
+ <div class="pf-c-content">
1115
+ <h1>Main title</h1>
1116
+ <p>This is a full page demo.</p>
1117
+ </div>
1118
+ </div>
1119
+ </section>
1120
+ <section class="pf-c-page__main-section">
1121
+ <div class="pf-c-toolbar" id="toolbar-with-validation-example">
1122
+ <div class="pf-c-toolbar__content">
1123
+ <div class="pf-c-toolbar__content-section">
1124
+ <div class="pf-c-toolbar__group pf-m-toggle-group pf-m-show-on-2xl">
1125
+ <div class="pf-c-toolbar__toggle">
1126
+ <button
1127
+ class="pf-c-button pf-m-plain"
1128
+ type="button"
1129
+ aria-label="Show filters"
1130
+ aria-expanded="false"
1131
+ aria-controls="toolbar-with-validation-example-expandable-content"
1132
+ >
1133
+ <i class="fas fa-filter" aria-hidden="true"></i>
1134
+ </button>
1135
+ </div>
1136
+ <div class="pf-c-toolbar__group pf-m-filter-group">
1137
+ <div class="pf-c-toolbar__item">
1138
+ <div
1139
+ class="pf-c-input-group"
1140
+ aria-label="search filter"
1141
+ role="group"
1142
+ >
1143
+ <div class="pf-c-select" style="width: 160px">
1144
+ <span
1145
+ id="toolbar-with-validation-example-select-month-label"
1146
+ hidden
1147
+ >Choose one</span>
1148
+
1149
+ <button
1150
+ class="pf-c-select__toggle"
1151
+ type="button"
1152
+ id="toolbar-with-validation-example-select-month-toggle"
1153
+ aria-haspopup="true"
1154
+ aria-expanded="false"
1155
+ aria-labelledby="toolbar-with-validation-example-select-month-label toolbar-with-validation-example-select-month-toggle"
1156
+ >
1157
+ <div class="pf-c-select__toggle-wrapper">
1158
+ <span class="pf-c-select__toggle-icon">
1159
+ <i class="fas fa-filter" aria-hidden="true"></i>
1160
+ </span>
1161
+ <span class="pf-c-select__toggle-text">Last month</span>
1162
+ </div>
1163
+ <span class="pf-c-select__toggle-arrow">
1164
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1165
+ </span>
1166
+ </button>
1167
+
1168
+ <ul
1169
+ class="pf-c-select__menu"
1170
+ role="listbox"
1171
+ aria-labelledby="toolbar-with-validation-example-select-month-label"
1172
+ hidden
1173
+ >
1174
+ <li role="presentation">
1175
+ <button
1176
+ class="pf-c-select__menu-item"
1177
+ role="option"
1178
+ >Running</button>
1179
+ </li>
1180
+ <li role="presentation">
1181
+ <button
1182
+ class="pf-c-select__menu-item pf-m-selected"
1183
+ role="option"
1184
+ aria-selected="true"
1185
+ >
1186
+ Stopped
1187
+ <span class="pf-c-select__menu-item-icon">
1188
+ <i class="fas fa-check" aria-hidden="true"></i>
1189
+ </span>
1190
+ </button>
1191
+ </li>
1192
+ <li role="presentation">
1193
+ <button
1194
+ class="pf-c-select__menu-item"
1195
+ role="option"
1196
+ >Down</button>
1197
+ </li>
1198
+ <li role="presentation">
1199
+ <button
1200
+ class="pf-c-select__menu-item"
1201
+ role="option"
1202
+ >Degraded</button>
1203
+ </li>
1204
+ <li role="presentation">
1205
+ <button
1206
+ class="pf-c-select__menu-item"
1207
+ role="option"
1208
+ >Needs maintenance</button>
1209
+ </li>
1210
+ </ul>
1211
+ </div>
1212
+ <div class="pf-c-date-picker">
1213
+ <div class="pf-c-date-picker__input">
1214
+ <div
1215
+ class="pf-c-input-group"
1216
+ aria-label="search filter"
1217
+ role="group"
1218
+ >
1219
+ <input
1220
+ class="pf-c-form-control"
1221
+ type="text"
1222
+ value="2020-03-05"
1223
+ id="toolbar-with-validation-example-helper-text-input"
1224
+ name="toolbar-with-validation-example-helper-text-input"
1225
+ aria-label="Date picker"
1226
+ />
1227
+ <button
1228
+ class="pf-c-button pf-m-control"
1229
+ type="button"
1230
+ aria-label="Toggle date picker"
1231
+ >
1232
+ <i class="fas fa-calendar-alt" aria-hidden="true"></i>
1233
+ </button>
1234
+ </div>
1235
+ </div>
1236
+ <div class="pf-c-date-picker__helper-text">
1237
+ <div class="pf-c-helper-text">
1238
+ <div class="pf-c-helper-text__item">
1239
+ <span class="pf-c-helper-text__item-text">MM/DD/YYYY</span>
1240
+ </div>
1241
+ </div>
1242
+ </div>
1243
+ </div>
1244
+ <div class="pf-c-date-picker">
1245
+ <div class="pf-c-date-picker__input">
1246
+ <div
1247
+ class="pf-c-input-group"
1248
+ aria-label="search filter"
1249
+ role="group"
1250
+ >
1251
+ <input
1252
+ class="pf-c-form-control"
1253
+ aria-invalid="true"
1254
+ type="text"
1255
+ value="2020-03-05"
1256
+ id="toolbar-with-validation-example-invalid-input"
1257
+ name="toolbar-with-validation-example-invalid-input"
1258
+ aria-label="Date picker"
1259
+ />
1260
+ <button
1261
+ class="pf-c-button pf-m-control"
1262
+ type="button"
1263
+ aria-label="Toggle date picker"
1264
+ >
1265
+ <i class="fas fa-calendar-alt" aria-hidden="true"></i>
1266
+ </button>
1267
+ </div>
1268
+ <div class="pf-c-date-picker__helper-text"></div>
1269
+ </div>
1270
+ <div class="pf-c-date-picker__helper-text">
1271
+ <div class="pf-c-helper-text">
1272
+ <div class="pf-c-helper-text__item">
1273
+ <span
1274
+ class="pf-c-helper-text__item-text"
1275
+ >Max: 08/10/2022</span>
1276
+ </div>
1277
+ </div>
1278
+ </div>
1279
+ </div>
1280
+ </div>
1281
+ </div>
1282
+ </div>
1283
+ <div class="pf-c-toolbar__item pf-m-search-filter">
1284
+ <div
1285
+ class="pf-c-input-group"
1286
+ aria-label="search filter"
1287
+ role="group"
1288
+ >
1289
+ <div class="pf-c-input-group__item pf-m-fill">
1290
+ <div class="pf-c-select" style="width: 160px">
1291
+ <span
1292
+ id="toolbar-with-validation-example-select-name-label"
1293
+ hidden
1294
+ >Choose one</span>
1295
+
1296
+ <button
1297
+ class="pf-c-select__toggle"
1298
+ type="button"
1299
+ id="toolbar-with-validation-example-select-name-toggle"
1300
+ aria-haspopup="true"
1301
+ aria-expanded="false"
1302
+ aria-labelledby="toolbar-with-validation-example-select-name-label toolbar-with-validation-example-select-name-toggle"
1303
+ >
1304
+ <div class="pf-c-select__toggle-wrapper">
1305
+ <span class="pf-c-select__toggle-icon">
1306
+ <i class="fas fa-filter" aria-hidden="true"></i>
1307
+ </span>
1308
+ <span class="pf-c-select__toggle-text">Description</span>
1309
+ </div>
1310
+ <span class="pf-c-select__toggle-arrow">
1311
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1312
+ </span>
1313
+ </button>
1314
+
1315
+ <ul
1316
+ class="pf-c-select__menu"
1317
+ role="listbox"
1318
+ aria-labelledby="toolbar-with-validation-example-select-name-label"
1319
+ hidden
1320
+ >
1321
+ <li role="presentation">
1322
+ <button
1323
+ class="pf-c-select__menu-item"
1324
+ role="option"
1325
+ >Running</button>
1326
+ </li>
1327
+ <li role="presentation">
1328
+ <button
1329
+ class="pf-c-select__menu-item pf-m-selected"
1330
+ role="option"
1331
+ aria-selected="true"
1332
+ >
1333
+ Stopped
1334
+ <span class="pf-c-select__menu-item-icon">
1335
+ <i class="fas fa-check" aria-hidden="true"></i>
1336
+ </span>
1337
+ </button>
1338
+ </li>
1339
+ <li role="presentation">
1340
+ <button
1341
+ class="pf-c-select__menu-item"
1342
+ role="option"
1343
+ >Down</button>
1344
+ </li>
1345
+ <li role="presentation">
1346
+ <button
1347
+ class="pf-c-select__menu-item"
1348
+ role="option"
1349
+ >Degraded</button>
1350
+ </li>
1351
+ <li role="presentation">
1352
+ <button
1353
+ class="pf-c-select__menu-item"
1354
+ role="option"
1355
+ >Needs maintenance</button>
1356
+ </li>
1357
+ </ul>
1358
+ </div>
1359
+ </div>
1360
+ <div class="pf-c-input-group__item">
1361
+ <div class="pf-c-text-input-group" style="width: auto">
1362
+ <div class="pf-c-text-input-group__main pf-m-icon">
1363
+ <span class="pf-c-text-input-group__text">
1364
+ <span class="pf-c-text-input-group__icon">
1365
+ <i class="fas fa-fw fa-search"></i>
1366
+ </span>
1367
+ <input
1368
+ class="pf-c-text-input-group__text-input"
1369
+ type="search"
1370
+ placeholder="Filter by Description"
1371
+ value
1372
+ aria-label="Type to filter"
1373
+ />
1374
+ </span>
1375
+ </div>
1376
+ </div>
1377
+ </div>
1378
+ </div>
1379
+ </div>
1380
+ </div>
1381
+ <button class="pf-c-button pf-m-primary" type="button">Download</button>
1382
+ </div>
1383
+ <div
1384
+ class="pf-c-toolbar__expandable-content pf-m-hidden"
1385
+ id="toolbar-with-validation-example-expandable-content"
1386
+ hidden
1387
+ ></div>
1388
+ </div>
1389
+ </div>
1390
+ <div>
1391
+ <table
1392
+ class="pf-c-table pf-m-grid-md"
1393
+ role="grid"
1394
+ aria-label="This is a table with checkboxes"
1395
+ id="-table-table"
1396
+ >
1397
+ <thead>
1398
+ <tr role="row">
1399
+ <td></td>
1400
+ <th role="columnheader" scope="col">Repositories</th>
1401
+ <th role="columnheader" scope="col">Branches</th>
1402
+ <th role="columnheader" scope="col">Pull requests</th>
1403
+ <th role="columnheader" scope="col">Workspaces</th>
1404
+ <th role="columnheader" scope="col">Last commit</th>
1405
+ <td></td>
1406
+ <td></td>
1407
+ </tr>
1408
+ </thead>
1409
+
1410
+ <tbody role="rowgroup">
1411
+ <tr role="row">
1412
+ <td class="pf-c-table__check" role="cell">
1413
+ <div class="pf-c-check pf-m-standalone">
1414
+ <input
1415
+ class="pf-c-check__input"
1416
+ type="checkbox"
1417
+ name="checkrow1"
1418
+ aria-labelledby="-table-table-node1"
1419
+ />
1420
+ </div>
1421
+ </td>
1422
+ <th role="columnheader" data-label="Repository name">
1423
+ <div>
1424
+ <div id="-table-table-node1">Node 1</div>
1425
+ <a href="#">siemur/test-space</a>
1426
+ </div>
1427
+ </th>
1428
+ <td role="cell" data-label="Branches">
1429
+ <span>
1430
+ <i class="fas fa-code-branch"></i> 10
1431
+ </span>
1432
+ </td>
1433
+ <td role="cell" data-label="Pull requests">
1434
+ <span>
1435
+ <i class="fas fa-code"></i> 25
1436
+ </span>
1437
+ </td>
1438
+ <td role="cell" data-label="Workspaces">
1439
+ <span>
1440
+ <i class="fas fa-cube"></i> 5
1441
+ </span>
1442
+ </td>
1443
+ <td role="cell" data-label="Last commit">2 days ago</td>
1444
+ <td role="cell" data-label="Action">
1445
+ <a href="#">Action link</a>
1446
+ </td>
1447
+ <td class="pf-c-table__action" role="cell">
1448
+ <div class="pf-c-dropdown">
1449
+ <button
1450
+ class="pf-c-dropdown__toggle pf-m-plain"
1451
+ id="-table-table-dropdown-kebab-1-button"
1452
+ aria-expanded="false"
1453
+ type="button"
1454
+ aria-label="Actions"
1455
+ >
1456
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1457
+ </button>
1458
+ <ul
1459
+ class="pf-c-dropdown__menu pf-m-align-right"
1460
+ aria-labelledby="-table-table-dropdown-kebab-1-button"
1461
+ hidden
1462
+ >
1463
+ <li>
1464
+ <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1465
+ </li>
1466
+ <li>
1467
+ <button
1468
+ class="pf-c-dropdown__menu-item"
1469
+ type="button"
1470
+ >Action</button>
1471
+ </li>
1472
+ <li>
1473
+ <a
1474
+ class="pf-c-dropdown__menu-item pf-m-disabled"
1475
+ href="#"
1476
+ aria-disabled="true"
1477
+ tabindex="-1"
1478
+ >Disabled link</a>
1479
+ </li>
1480
+ <li>
1481
+ <button
1482
+ class="pf-c-dropdown__menu-item"
1483
+ type="button"
1484
+ disabled
1485
+ >Disabled action</button>
1486
+ </li>
1487
+ <li class="pf-c-divider" role="separator"></li>
1488
+ <li>
1489
+ <a
1490
+ class="pf-c-dropdown__menu-item"
1491
+ href="#"
1492
+ >Separated link</a>
1493
+ </li>
1494
+ </ul>
1495
+ </div>
1496
+ </td>
1497
+ </tr>
1498
+
1499
+ <tr role="row">
1500
+ <td class="pf-c-table__check" role="cell">
1501
+ <div class="pf-c-check pf-m-standalone">
1502
+ <input
1503
+ class="pf-c-check__input"
1504
+ type="checkbox"
1505
+ name="checkrow2"
1506
+ aria-labelledby="-table-table-node2"
1507
+ />
1508
+ </div>
1509
+ </td>
1510
+ <th role="columnheader" data-label="Repository name">
1511
+ <div>
1512
+ <div id="-table-table-node2">Node 2</div>
1513
+ <a href="#">siemur/test-space</a>
1514
+ </div>
1515
+ </th>
1516
+ <td role="cell" data-label="Branches">
1517
+ <span>
1518
+ <i class="fas fa-code-branch"></i> 8
1519
+ </span>
1520
+ </td>
1521
+ <td role="cell" data-label="Pull requests">
1522
+ <span>
1523
+ <i class="fas fa-code"></i> 30
1524
+ </span>
1525
+ </td>
1526
+ <td role="cell" data-label="Workspaces">
1527
+ <span>
1528
+ <i class="fas fa-cube"></i> 2
1529
+ </span>
1530
+ </td>
1531
+ <td role="cell" data-label="Last commit">2 days ago</td>
1532
+ <td role="cell" data-label="Action">
1533
+ <a href="#">Action link</a>
1534
+ </td>
1535
+ <td class="pf-c-table__action" role="cell">
1536
+ <div class="pf-c-dropdown">
1537
+ <button
1538
+ class="pf-c-dropdown__toggle pf-m-plain"
1539
+ id="-table-table-dropdown-kebab-2-button"
1540
+ aria-expanded="false"
1541
+ type="button"
1542
+ aria-label="Actions"
1543
+ >
1544
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1545
+ </button>
1546
+ <ul
1547
+ class="pf-c-dropdown__menu pf-m-align-right"
1548
+ aria-labelledby="-table-table-dropdown-kebab-2-button"
1549
+ hidden
1550
+ >
1551
+ <li>
1552
+ <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1553
+ </li>
1554
+ <li>
1555
+ <button
1556
+ class="pf-c-dropdown__menu-item"
1557
+ type="button"
1558
+ >Action</button>
1559
+ </li>
1560
+ <li>
1561
+ <a
1562
+ class="pf-c-dropdown__menu-item pf-m-disabled"
1563
+ href="#"
1564
+ aria-disabled="true"
1565
+ tabindex="-1"
1566
+ >Disabled link</a>
1567
+ </li>
1568
+ <li>
1569
+ <button
1570
+ class="pf-c-dropdown__menu-item"
1571
+ type="button"
1572
+ disabled
1573
+ >Disabled action</button>
1574
+ </li>
1575
+ <li class="pf-c-divider" role="separator"></li>
1576
+ <li>
1577
+ <a
1578
+ class="pf-c-dropdown__menu-item"
1579
+ href="#"
1580
+ >Separated link</a>
1581
+ </li>
1582
+ </ul>
1583
+ </div>
1584
+ </td>
1585
+ </tr>
1586
+
1587
+ <tr role="row">
1588
+ <td class="pf-c-table__check" role="cell">
1589
+ <div class="pf-c-check pf-m-standalone">
1590
+ <input
1591
+ class="pf-c-check__input"
1592
+ type="checkbox"
1593
+ name="checkrow3"
1594
+ aria-labelledby="-table-table-node3"
1595
+ />
1596
+ </div>
1597
+ </td>
1598
+ <th role="columnheader" data-label="Repository name">
1599
+ <div>
1600
+ <div id="-table-table-node3">Node 3</div>
1601
+ <a href="#">siemur/test-space</a>
1602
+ </div>
1603
+ </th>
1604
+ <td role="cell" data-label="Branches">
1605
+ <span>
1606
+ <i class="fas fa-code-branch"></i> 12
1607
+ </span>
1608
+ </td>
1609
+ <td role="cell" data-label="Pull requests">
1610
+ <span>
1611
+ <i class="fas fa-code"></i> 48
1612
+ </span>
1613
+ </td>
1614
+ <td role="cell" data-label="Workspaces">
1615
+ <span>
1616
+ <i class="fas fa-cube"></i> 13
1617
+ </span>
1618
+ </td>
1619
+ <td role="cell" data-label="Last commit">30 days ago</td>
1620
+ <td role="cell" data-label="Action">
1621
+ <a href="#">Action link</a>
1622
+ </td>
1623
+ <td class="pf-c-table__action" role="cell">
1624
+ <div class="pf-c-dropdown">
1625
+ <button
1626
+ class="pf-c-dropdown__toggle pf-m-plain"
1627
+ id="-table-table-dropdown-kebab-3-button"
1628
+ aria-expanded="false"
1629
+ type="button"
1630
+ aria-label="Actions"
1631
+ >
1632
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1633
+ </button>
1634
+ <ul
1635
+ class="pf-c-dropdown__menu pf-m-align-right"
1636
+ aria-labelledby="-table-table-dropdown-kebab-3-button"
1637
+ hidden
1638
+ >
1639
+ <li>
1640
+ <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1641
+ </li>
1642
+ <li>
1643
+ <button
1644
+ class="pf-c-dropdown__menu-item"
1645
+ type="button"
1646
+ >Action</button>
1647
+ </li>
1648
+ <li>
1649
+ <a
1650
+ class="pf-c-dropdown__menu-item pf-m-disabled"
1651
+ href="#"
1652
+ aria-disabled="true"
1653
+ tabindex="-1"
1654
+ >Disabled link</a>
1655
+ </li>
1656
+ <li>
1657
+ <button
1658
+ class="pf-c-dropdown__menu-item"
1659
+ type="button"
1660
+ disabled
1661
+ >Disabled action</button>
1662
+ </li>
1663
+ <li class="pf-c-divider" role="separator"></li>
1664
+ <li>
1665
+ <a
1666
+ class="pf-c-dropdown__menu-item"
1667
+ href="#"
1668
+ >Separated link</a>
1669
+ </li>
1670
+ </ul>
1671
+ </div>
1672
+ </td>
1673
+ </tr>
1674
+
1675
+ <tr role="row">
1676
+ <td class="pf-c-table__check" role="cell">
1677
+ <div class="pf-c-check pf-m-standalone">
1678
+ <input
1679
+ class="pf-c-check__input"
1680
+ type="checkbox"
1681
+ name="checkrow4"
1682
+ aria-labelledby="-table-table-node4"
1683
+ />
1684
+ </div>
1685
+ </td>
1686
+ <th role="columnheader" data-label="Repository name">
1687
+ <div>
1688
+ <div id="-table-table-node4">Node 4</div>
1689
+ <a href="#">siemur/test-space</a>
1690
+ </div>
1691
+ </th>
1692
+ <td role="cell" data-label="Branches">
1693
+ <span>
1694
+ <i class="fas fa-code-branch"></i> 3
1695
+ </span>
1696
+ </td>
1697
+ <td role="cell" data-label="Pull requests">
1698
+ <span>
1699
+ <i class="fas fa-code"></i> 8
1700
+ </span>
1701
+ </td>
1702
+ <td role="cell" data-label="Workspaces">
1703
+ <span>
1704
+ <i class="fas fa-cube"></i> 20
1705
+ </span>
1706
+ </td>
1707
+ <td role="cell" data-label="Last commit">8 days ago</td>
1708
+ <td role="cell" data-label="Action">
1709
+ <a href="#">Action link</a>
1710
+ </td>
1711
+ <td class="pf-c-table__action" role="cell">
1712
+ <div class="pf-c-dropdown">
1713
+ <button
1714
+ class="pf-c-dropdown__toggle pf-m-plain"
1715
+ id="-table-table-dropdown-kebab-4-button"
1716
+ aria-expanded="false"
1717
+ type="button"
1718
+ aria-label="Actions"
1719
+ >
1720
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1721
+ </button>
1722
+ <ul
1723
+ class="pf-c-dropdown__menu pf-m-align-right"
1724
+ aria-labelledby="-table-table-dropdown-kebab-4-button"
1725
+ hidden
1726
+ >
1727
+ <li>
1728
+ <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1729
+ </li>
1730
+ <li>
1731
+ <button
1732
+ class="pf-c-dropdown__menu-item"
1733
+ type="button"
1734
+ >Action</button>
1735
+ </li>
1736
+ <li>
1737
+ <a
1738
+ class="pf-c-dropdown__menu-item pf-m-disabled"
1739
+ href="#"
1740
+ aria-disabled="true"
1741
+ tabindex="-1"
1742
+ >Disabled link</a>
1743
+ </li>
1744
+ <li>
1745
+ <button
1746
+ class="pf-c-dropdown__menu-item"
1747
+ type="button"
1748
+ disabled
1749
+ >Disabled action</button>
1750
+ </li>
1751
+ <li class="pf-c-divider" role="separator"></li>
1752
+ <li>
1753
+ <a
1754
+ class="pf-c-dropdown__menu-item"
1755
+ href="#"
1756
+ >Separated link</a>
1757
+ </li>
1758
+ </ul>
1759
+ </div>
1760
+ </td>
1761
+ </tr>
1762
+
1763
+ <tr role="row">
1764
+ <td class="pf-c-table__check" role="cell">
1765
+ <div class="pf-c-check pf-m-standalone">
1766
+ <input
1767
+ class="pf-c-check__input"
1768
+ type="checkbox"
1769
+ name="checkrow5"
1770
+ aria-labelledby="-table-table-node5"
1771
+ />
1772
+ </div>
1773
+ </td>
1774
+ <td role="cell" data-label="Repository name">
1775
+ <div>
1776
+ <div id="-table-table-node5">Node 5</div>
1777
+ <a href="#">siemur/test-space</a>
1778
+ </div>
1779
+ </td>
1780
+ <td role="cell" data-label="Branches">
1781
+ <span>
1782
+ <i class="fas fa-code-branch"></i> 34
1783
+ </span>
1784
+ </td>
1785
+ <td role="cell" data-label="Pull requests">
1786
+ <span>
1787
+ <i class="fas fa-code"></i> 21
1788
+ </span>
1789
+ </td>
1790
+ <td role="cell" data-label="Workspaces">
1791
+ <span>
1792
+ <i class="fas fa-cube"></i> 26
1793
+ </span>
1794
+ </td>
1795
+ <td role="cell" data-label="Last commit">2 days ago</td>
1796
+ <td role="cell" data-label="Action">
1797
+ <a href="#">Action link</a>
1798
+ </td>
1799
+ <td class="pf-c-table__action" role="cell">
1800
+ <div class="pf-c-dropdown">
1801
+ <button
1802
+ class="pf-c-dropdown__toggle pf-m-plain"
1803
+ id="-table-table-dropdown-kebab-5-button"
1804
+ aria-expanded="false"
1805
+ type="button"
1806
+ aria-label="Actions"
1807
+ >
1808
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1809
+ </button>
1810
+ <ul
1811
+ class="pf-c-dropdown__menu pf-m-align-right"
1812
+ aria-labelledby="-table-table-dropdown-kebab-5-button"
1813
+ hidden
1814
+ >
1815
+ <li>
1816
+ <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1817
+ </li>
1818
+ <li>
1819
+ <button
1820
+ class="pf-c-dropdown__menu-item"
1821
+ type="button"
1822
+ >Action</button>
1823
+ </li>
1824
+ <li>
1825
+ <a
1826
+ class="pf-c-dropdown__menu-item pf-m-disabled"
1827
+ href="#"
1828
+ aria-disabled="true"
1829
+ tabindex="-1"
1830
+ >Disabled link</a>
1831
+ </li>
1832
+ <li>
1833
+ <button
1834
+ class="pf-c-dropdown__menu-item"
1835
+ type="button"
1836
+ disabled
1837
+ >Disabled action</button>
1838
+ </li>
1839
+ <li class="pf-c-divider" role="separator"></li>
1840
+ <li>
1841
+ <a
1842
+ class="pf-c-dropdown__menu-item"
1843
+ href="#"
1844
+ >Separated link</a>
1845
+ </li>
1846
+ </ul>
1847
+ </div>
1848
+ </td>
1849
+ </tr>
1850
+ </tbody>
1851
+ </table>
1852
+ </div>
1853
+ </section>
1854
+ </main>
1855
+ </div>
1856
+
1857
+ ```
1858
+
239
1859
  ### Toolbar attribute value search filter on mobile
240
1860
 
241
1861
  ```html
@@ -374,81 +1994,84 @@ section: components
374
1994
  >
375
1995
  <div class="pf-c-toolbar__item pf-m-search-filter">
376
1996
  <div class="pf-c-input-group" aria-label="search filter" role="group">
377
- <div class="pf-c-select" style="width: 175px">
378
- <span
379
- id="toolbar-attribute-value-search-filter-mobile-example-select-name-label"
380
- hidden
381
- >Choose one</span>
1997
+ <div class="pf-c-input-group__item pf-m-fill">
1998
+ <div class="pf-c-select" style="width: 124px">
1999
+ <span
2000
+ id="toolbar-attribute-value-search-filter-mobile-example-select-name-label"
2001
+ hidden
2002
+ >Choose one</span>
382
2003
 
383
- <button
384
- class="pf-c-select__toggle"
385
- type="button"
386
- id="toolbar-attribute-value-search-filter-mobile-example-select-name-toggle"
387
- aria-haspopup="true"
388
- aria-expanded="false"
389
- aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-select-name-label toolbar-attribute-value-search-filter-mobile-example-select-name-toggle"
390
- >
391
- <div class="pf-c-select__toggle-wrapper">
392
- <span class="pf-c-select__toggle-icon">
393
- <i class="fas fa-filter" aria-hidden="true"></i>
2004
+ <button
2005
+ class="pf-c-select__toggle"
2006
+ type="button"
2007
+ id="toolbar-attribute-value-search-filter-mobile-example-select-name-toggle"
2008
+ aria-haspopup="true"
2009
+ aria-expanded="false"
2010
+ aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-select-name-label toolbar-attribute-value-search-filter-mobile-example-select-name-toggle"
2011
+ >
2012
+ <div class="pf-c-select__toggle-wrapper">
2013
+ <span class="pf-c-select__toggle-icon">
2014
+ <i class="fas fa-filter" aria-hidden="true"></i>
2015
+ </span>
2016
+ <span class="pf-c-select__toggle-text">Name</span>
2017
+ </div>
2018
+ <span class="pf-c-select__toggle-arrow">
2019
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
394
2020
  </span>
395
- <span class="pf-c-select__toggle-text">Name</span>
396
- </div>
397
- <span class="pf-c-select__toggle-arrow">
398
- <i class="fas fa-caret-down" aria-hidden="true"></i>
399
- </span>
400
- </button>
2021
+ </button>
401
2022
 
402
- <ul
403
- class="pf-c-select__menu"
404
- role="listbox"
405
- aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-select-name-label"
406
- hidden
407
- style="width: 175px"
408
- >
409
- <li role="presentation">
410
- <button class="pf-c-select__menu-item" role="option">Running</button>
411
- </li>
412
- <li role="presentation">
413
- <button
414
- class="pf-c-select__menu-item pf-m-selected"
415
- role="option"
416
- aria-selected="true"
417
- >
418
- Stopped
419
- <span class="pf-c-select__menu-item-icon">
420
- <i class="fas fa-check" aria-hidden="true"></i>
421
- </span>
422
- </button>
423
- </li>
424
- <li role="presentation">
425
- <button class="pf-c-select__menu-item" role="option">Down</button>
426
- </li>
427
- <li role="presentation">
428
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
429
- </li>
430
- <li role="presentation">
431
- <button
432
- class="pf-c-select__menu-item"
433
- role="option"
434
- >Needs maintenance</button>
435
- </li>
436
- </ul>
2023
+ <ul
2024
+ class="pf-c-select__menu"
2025
+ role="listbox"
2026
+ aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-select-name-label"
2027
+ hidden
2028
+ >
2029
+ <li role="presentation">
2030
+ <button class="pf-c-select__menu-item" role="option">Running</button>
2031
+ </li>
2032
+ <li role="presentation">
2033
+ <button
2034
+ class="pf-c-select__menu-item pf-m-selected"
2035
+ role="option"
2036
+ aria-selected="true"
2037
+ >
2038
+ Stopped
2039
+ <span class="pf-c-select__menu-item-icon">
2040
+ <i class="fas fa-check" aria-hidden="true"></i>
2041
+ </span>
2042
+ </button>
2043
+ </li>
2044
+ <li role="presentation">
2045
+ <button class="pf-c-select__menu-item" role="option">Down</button>
2046
+ </li>
2047
+ <li role="presentation">
2048
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
2049
+ </li>
2050
+ <li role="presentation">
2051
+ <button
2052
+ class="pf-c-select__menu-item"
2053
+ role="option"
2054
+ >Needs maintenance</button>
2055
+ </li>
2056
+ </ul>
2057
+ </div>
437
2058
  </div>
438
- <div class="pf-c-text-input-group">
439
- <div class="pf-c-text-input-group__main pf-m-icon">
440
- <span class="pf-c-text-input-group__text">
441
- <span class="pf-c-text-input-group__icon">
442
- <i class="fas fa-fw fa-search"></i>
2059
+ <div class="pf-c-input-group__item">
2060
+ <div class="pf-c-text-input-group" style="width: auto">
2061
+ <div class="pf-c-text-input-group__main pf-m-icon">
2062
+ <span class="pf-c-text-input-group__text">
2063
+ <span class="pf-c-text-input-group__icon">
2064
+ <i class="fas fa-fw fa-search"></i>
2065
+ </span>
2066
+ <input
2067
+ class="pf-c-text-input-group__text-input"
2068
+ type="search"
2069
+ placeholder="Filter by name"
2070
+ value
2071
+ aria-label="Type to filter"
2072
+ />
443
2073
  </span>
444
- <input
445
- class="pf-c-text-input-group__text-input"
446
- type="text"
447
- value
448
- placeholder="Filter by name"
449
- aria-label="Type to filter"
450
- />
451
- </span>
2074
+ </div>
452
2075
  </div>
453
2076
  </div>
454
2077
  </div>
@@ -459,7 +2082,7 @@ section: components
459
2082
 
460
2083
  ```
461
2084
 
462
- ### Toolbar attribute value single select filter desktop
2085
+ ### Toolbar attribute value single select filter on desktop
463
2086
 
464
2087
  ```html
465
2088
  <div
@@ -997,7 +2620,7 @@ section: components
997
2620
 
998
2621
  ```
999
2622
 
1000
- ### Toolbar attribute value checkbox select filter desktop
2623
+ ### Toolbar attribute value checkbox select filter on desktop
1001
2624
 
1002
2625
  ```html
1003
2626
  <div
@@ -1324,53 +2947,65 @@ section: components
1324
2947
  >
1325
2948
  <li class="pf-c-chip-group__list-item">
1326
2949
  <div class="pf-c-chip">
1327
- <span
1328
- class="pf-c-chip__text"
1329
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-group-chip-one"
1330
- >Canceled</span>
1331
- <button
1332
- class="pf-c-button pf-m-plain"
1333
- type="button"
1334
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-one toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-one"
1335
- aria-label="Remove"
1336
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-one"
1337
- >
1338
- <i class="fas fa-times" aria-hidden="true"></i>
1339
- </button>
2950
+ <span class="pf-c-chip__content">
2951
+ <span
2952
+ class="pf-c-chip__text"
2953
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-group-chip-one"
2954
+ >Canceled</span>
2955
+ </span>
2956
+ <span class="pf-c-chip__actions">
2957
+ <button
2958
+ class="pf-c-button pf-m-plain"
2959
+ type="button"
2960
+ aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-one toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-one"
2961
+ aria-label="Remove"
2962
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-one"
2963
+ >
2964
+ <i class="fas fa-times" aria-hidden="true"></i>
2965
+ </button>
2966
+ </span>
1340
2967
  </div>
1341
2968
  </li>
1342
2969
  <li class="pf-c-chip-group__list-item">
1343
2970
  <div class="pf-c-chip">
1344
- <span
1345
- class="pf-c-chip__text"
1346
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-two"
1347
- >Paused</span>
1348
- <button
1349
- class="pf-c-button pf-m-plain"
1350
- type="button"
1351
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-two toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-two"
1352
- aria-label="Remove"
1353
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-two"
1354
- >
1355
- <i class="fas fa-times" aria-hidden="true"></i>
1356
- </button>
2971
+ <span class="pf-c-chip__content">
2972
+ <span
2973
+ class="pf-c-chip__text"
2974
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-two"
2975
+ >Paused</span>
2976
+ </span>
2977
+ <span class="pf-c-chip__actions">
2978
+ <button
2979
+ class="pf-c-button pf-m-plain"
2980
+ type="button"
2981
+ aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-two toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-two"
2982
+ aria-label="Remove"
2983
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-two"
2984
+ >
2985
+ <i class="fas fa-times" aria-hidden="true"></i>
2986
+ </button>
2987
+ </span>
1357
2988
  </div>
1358
2989
  </li>
1359
2990
  <li class="pf-c-chip-group__list-item">
1360
2991
  <div class="pf-c-chip">
1361
- <span
1362
- class="pf-c-chip__text"
1363
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-three"
1364
- >Restarted</span>
1365
- <button
1366
- class="pf-c-button pf-m-plain"
1367
- type="button"
1368
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-three toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-three"
1369
- aria-label="Remove"
1370
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-three"
1371
- >
1372
- <i class="fas fa-times" aria-hidden="true"></i>
1373
- </button>
2992
+ <span class="pf-c-chip__content">
2993
+ <span
2994
+ class="pf-c-chip__text"
2995
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-three"
2996
+ >Restarted</span>
2997
+ </span>
2998
+ <span class="pf-c-chip__actions">
2999
+ <button
3000
+ class="pf-c-button pf-m-plain"
3001
+ type="button"
3002
+ aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-three toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-three"
3003
+ aria-label="Remove"
3004
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-three"
3005
+ >
3006
+ <i class="fas fa-times" aria-hidden="true"></i>
3007
+ </button>
3008
+ </span>
1374
3009
  </div>
1375
3010
  </li>
1376
3011
  </ul>
@@ -1702,53 +3337,65 @@ section: components
1702
3337
  >
1703
3338
  <li class="pf-c-chip-group__list-item">
1704
3339
  <div class="pf-c-chip">
1705
- <span
1706
- class="pf-c-chip__text"
1707
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-one"
1708
- >Canceled</span>
1709
- <button
1710
- class="pf-c-button pf-m-plain"
1711
- type="button"
1712
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-one toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-one"
1713
- aria-label="Remove"
1714
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-one"
1715
- >
1716
- <i class="fas fa-times" aria-hidden="true"></i>
1717
- </button>
3340
+ <span class="pf-c-chip__content">
3341
+ <span
3342
+ class="pf-c-chip__text"
3343
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-one"
3344
+ >Canceled</span>
3345
+ </span>
3346
+ <span class="pf-c-chip__actions">
3347
+ <button
3348
+ class="pf-c-button pf-m-plain"
3349
+ type="button"
3350
+ aria-labelledby="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-one toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-one"
3351
+ aria-label="Remove"
3352
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-one"
3353
+ >
3354
+ <i class="fas fa-times" aria-hidden="true"></i>
3355
+ </button>
3356
+ </span>
1718
3357
  </div>
1719
3358
  </li>
1720
3359
  <li class="pf-c-chip-group__list-item">
1721
3360
  <div class="pf-c-chip">
1722
- <span
1723
- class="pf-c-chip__text"
1724
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-two"
1725
- >Paused</span>
1726
- <button
1727
- class="pf-c-button pf-m-plain"
1728
- type="button"
1729
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-two toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-two"
1730
- aria-label="Remove"
1731
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-two"
1732
- >
1733
- <i class="fas fa-times" aria-hidden="true"></i>
1734
- </button>
3361
+ <span class="pf-c-chip__content">
3362
+ <span
3363
+ class="pf-c-chip__text"
3364
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-two"
3365
+ >Paused</span>
3366
+ </span>
3367
+ <span class="pf-c-chip__actions">
3368
+ <button
3369
+ class="pf-c-button pf-m-plain"
3370
+ type="button"
3371
+ aria-labelledby="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-two toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-two"
3372
+ aria-label="Remove"
3373
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-two"
3374
+ >
3375
+ <i class="fas fa-times" aria-hidden="true"></i>
3376
+ </button>
3377
+ </span>
1735
3378
  </div>
1736
3379
  </li>
1737
3380
  <li class="pf-c-chip-group__list-item">
1738
3381
  <div class="pf-c-chip">
1739
- <span
1740
- class="pf-c-chip__text"
1741
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-three"
1742
- >Restarted</span>
1743
- <button
1744
- class="pf-c-button pf-m-plain"
1745
- type="button"
1746
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-three toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-three"
1747
- aria-label="Remove"
1748
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-three"
1749
- >
1750
- <i class="fas fa-times" aria-hidden="true"></i>
1751
- </button>
3382
+ <span class="pf-c-chip__content">
3383
+ <span
3384
+ class="pf-c-chip__text"
3385
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-three"
3386
+ >Restarted</span>
3387
+ </span>
3388
+ <span class="pf-c-chip__actions">
3389
+ <button
3390
+ class="pf-c-button pf-m-plain"
3391
+ type="button"
3392
+ aria-labelledby="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-three toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-three"
3393
+ aria-label="Remove"
3394
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-three"
3395
+ >
3396
+ <i class="fas fa-times" aria-hidden="true"></i>
3397
+ </button>
3398
+ </span>
1752
3399
  </div>
1753
3400
  </li>
1754
3401
  </ul>
@@ -1863,7 +3510,7 @@ section: components
1863
3510
  </div>
1864
3511
  <section class="pf-c-app-launcher__group">
1865
3512
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
1866
- <ul>
3513
+ <ul role="list">
1867
3514
  <li
1868
3515
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1869
3516
  >
@@ -1915,7 +3562,7 @@ section: components
1915
3562
  <hr class="pf-c-divider" />
1916
3563
  <section class="pf-c-app-launcher__group">
1917
3564
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
1918
- <ul>
3565
+ <ul role="list">
1919
3566
  <li
1920
3567
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
1921
3568
  >
@@ -2570,7 +4217,7 @@ section: components
2570
4217
  id="toolbar-pagination-management-example-primary-nav"
2571
4218
  aria-label="Global"
2572
4219
  >
2573
- <ul class="pf-c-nav__list">
4220
+ <ul class="pf-c-nav__list" role="list">
2574
4221
  <li class="pf-c-nav__item">
2575
4222
  <a href="#" class="pf-c-nav__link">System panel</a>
2576
4223
  </li>
@@ -2602,7 +4249,7 @@ section: components
2602
4249
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
2603
4250
  <div class="pf-c-page__main-body">
2604
4251
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
2605
- <ol class="pf-c-breadcrumb__list">
4252
+ <ol class="pf-c-breadcrumb__list" role="list">
2606
4253
  <li class="pf-c-breadcrumb__item">
2607
4254
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
2608
4255
  </li>
@@ -2668,90 +4315,93 @@ section: components
2668
4315
  aria-label="search filter"
2669
4316
  role="group"
2670
4317
  >
2671
- <div class="pf-c-select" style="width: 175px">
2672
- <span
2673
- id="toolbar-pagination-management-example-toolbar-select-name-label"
2674
- hidden
2675
- >Choose one</span>
4318
+ <div class="pf-c-input-group__item pf-m-fill">
4319
+ <div class="pf-c-select" style="width: 124px">
4320
+ <span
4321
+ id="toolbar-pagination-management-example-toolbar-select-name-label"
4322
+ hidden
4323
+ >Choose one</span>
2676
4324
 
2677
- <button
2678
- class="pf-c-select__toggle"
2679
- type="button"
2680
- id="toolbar-pagination-management-example-toolbar-select-name-toggle"
2681
- aria-haspopup="true"
2682
- aria-expanded="false"
2683
- aria-labelledby="toolbar-pagination-management-example-toolbar-select-name-label toolbar-pagination-management-example-toolbar-select-name-toggle"
2684
- >
2685
- <div class="pf-c-select__toggle-wrapper">
2686
- <span class="pf-c-select__toggle-icon">
2687
- <i class="fas fa-filter" aria-hidden="true"></i>
4325
+ <button
4326
+ class="pf-c-select__toggle"
4327
+ type="button"
4328
+ id="toolbar-pagination-management-example-toolbar-select-name-toggle"
4329
+ aria-haspopup="true"
4330
+ aria-expanded="false"
4331
+ aria-labelledby="toolbar-pagination-management-example-toolbar-select-name-label toolbar-pagination-management-example-toolbar-select-name-toggle"
4332
+ >
4333
+ <div class="pf-c-select__toggle-wrapper">
4334
+ <span class="pf-c-select__toggle-icon">
4335
+ <i class="fas fa-filter" aria-hidden="true"></i>
4336
+ </span>
4337
+ <span class="pf-c-select__toggle-text">Name</span>
4338
+ </div>
4339
+ <span class="pf-c-select__toggle-arrow">
4340
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2688
4341
  </span>
2689
- <span class="pf-c-select__toggle-text">Name</span>
2690
- </div>
2691
- <span class="pf-c-select__toggle-arrow">
2692
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2693
- </span>
2694
- </button>
4342
+ </button>
2695
4343
 
2696
- <ul
2697
- class="pf-c-select__menu"
2698
- role="listbox"
2699
- aria-labelledby="toolbar-pagination-management-example-toolbar-select-name-label"
2700
- hidden
2701
- style="width: 175px"
2702
- >
2703
- <li role="presentation">
2704
- <button
2705
- class="pf-c-select__menu-item"
2706
- role="option"
2707
- >Running</button>
2708
- </li>
2709
- <li role="presentation">
2710
- <button
2711
- class="pf-c-select__menu-item pf-m-selected"
2712
- role="option"
2713
- aria-selected="true"
2714
- >
2715
- Stopped
2716
- <span class="pf-c-select__menu-item-icon">
2717
- <i class="fas fa-check" aria-hidden="true"></i>
2718
- </span>
2719
- </button>
2720
- </li>
2721
- <li role="presentation">
2722
- <button
2723
- class="pf-c-select__menu-item"
2724
- role="option"
2725
- >Down</button>
2726
- </li>
2727
- <li role="presentation">
2728
- <button
2729
- class="pf-c-select__menu-item"
2730
- role="option"
2731
- >Degraded</button>
2732
- </li>
2733
- <li role="presentation">
2734
- <button
2735
- class="pf-c-select__menu-item"
2736
- role="option"
2737
- >Needs maintenance</button>
2738
- </li>
2739
- </ul>
4344
+ <ul
4345
+ class="pf-c-select__menu"
4346
+ role="listbox"
4347
+ aria-labelledby="toolbar-pagination-management-example-toolbar-select-name-label"
4348
+ hidden
4349
+ >
4350
+ <li role="presentation">
4351
+ <button
4352
+ class="pf-c-select__menu-item"
4353
+ role="option"
4354
+ >Running</button>
4355
+ </li>
4356
+ <li role="presentation">
4357
+ <button
4358
+ class="pf-c-select__menu-item pf-m-selected"
4359
+ role="option"
4360
+ aria-selected="true"
4361
+ >
4362
+ Stopped
4363
+ <span class="pf-c-select__menu-item-icon">
4364
+ <i class="fas fa-check" aria-hidden="true"></i>
4365
+ </span>
4366
+ </button>
4367
+ </li>
4368
+ <li role="presentation">
4369
+ <button
4370
+ class="pf-c-select__menu-item"
4371
+ role="option"
4372
+ >Down</button>
4373
+ </li>
4374
+ <li role="presentation">
4375
+ <button
4376
+ class="pf-c-select__menu-item"
4377
+ role="option"
4378
+ >Degraded</button>
4379
+ </li>
4380
+ <li role="presentation">
4381
+ <button
4382
+ class="pf-c-select__menu-item"
4383
+ role="option"
4384
+ >Needs maintenance</button>
4385
+ </li>
4386
+ </ul>
4387
+ </div>
2740
4388
  </div>
2741
- <div class="pf-c-text-input-group">
2742
- <div class="pf-c-text-input-group__main pf-m-icon">
2743
- <span class="pf-c-text-input-group__text">
2744
- <span class="pf-c-text-input-group__icon">
2745
- <i class="fas fa-fw fa-search"></i>
4389
+ <div class="pf-c-input-group__item">
4390
+ <div class="pf-c-text-input-group" style="width: auto">
4391
+ <div class="pf-c-text-input-group__main pf-m-icon">
4392
+ <span class="pf-c-text-input-group__text">
4393
+ <span class="pf-c-text-input-group__icon">
4394
+ <i class="fas fa-fw fa-search"></i>
4395
+ </span>
4396
+ <input
4397
+ class="pf-c-text-input-group__text-input"
4398
+ type="search"
4399
+ placeholder="Filter by name"
4400
+ value
4401
+ aria-label="Type to filter"
4402
+ />
2746
4403
  </span>
2747
- <input
2748
- class="pf-c-text-input-group__text-input"
2749
- type="text"
2750
- value
2751
- placeholder="Filter by name"
2752
- aria-label="Type to filter"
2753
- />
2754
- </span>
4404
+ </div>
2755
4405
  </div>
2756
4406
  </div>
2757
4407
  </div>
@@ -2900,11 +4550,14 @@ section: components
2900
4550
  <tbody role="rowgroup">
2901
4551
  <tr role="row">
2902
4552
  <td class="pf-c-table__check" role="cell">
2903
- <input
2904
- type="checkbox"
2905
- name="checkrow1"
2906
- aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node1"
2907
- />
4553
+ <div class="pf-c-check pf-m-standalone">
4554
+ <input
4555
+ class="pf-c-check__input"
4556
+ type="checkbox"
4557
+ name="checkrow1"
4558
+ aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node1"
4559
+ />
4560
+ </div>
2908
4561
  </td>
2909
4562
  <th role="columnheader" data-label="Repository name">
2910
4563
  <div>
@@ -2987,11 +4640,14 @@ section: components
2987
4640
 
2988
4641
  <tr role="row">
2989
4642
  <td class="pf-c-table__check" role="cell">
2990
- <input
2991
- type="checkbox"
2992
- name="checkrow2"
2993
- aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node2"
2994
- />
4643
+ <div class="pf-c-check pf-m-standalone">
4644
+ <input
4645
+ class="pf-c-check__input"
4646
+ type="checkbox"
4647
+ name="checkrow2"
4648
+ aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node2"
4649
+ />
4650
+ </div>
2995
4651
  </td>
2996
4652
  <th role="columnheader" data-label="Repository name">
2997
4653
  <div>
@@ -3074,11 +4730,14 @@ section: components
3074
4730
 
3075
4731
  <tr role="row">
3076
4732
  <td class="pf-c-table__check" role="cell">
3077
- <input
3078
- type="checkbox"
3079
- name="checkrow3"
3080
- aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node3"
3081
- />
4733
+ <div class="pf-c-check pf-m-standalone">
4734
+ <input
4735
+ class="pf-c-check__input"
4736
+ type="checkbox"
4737
+ name="checkrow3"
4738
+ aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node3"
4739
+ />
4740
+ </div>
3082
4741
  </td>
3083
4742
  <th role="columnheader" data-label="Repository name">
3084
4743
  <div>
@@ -3161,11 +4820,14 @@ section: components
3161
4820
 
3162
4821
  <tr role="row">
3163
4822
  <td class="pf-c-table__check" role="cell">
3164
- <input
3165
- type="checkbox"
3166
- name="checkrow4"
3167
- aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node4"
3168
- />
4823
+ <div class="pf-c-check pf-m-standalone">
4824
+ <input
4825
+ class="pf-c-check__input"
4826
+ type="checkbox"
4827
+ name="checkrow4"
4828
+ aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node4"
4829
+ />
4830
+ </div>
3169
4831
  </td>
3170
4832
  <th role="columnheader" data-label="Repository name">
3171
4833
  <div>
@@ -3248,11 +4910,14 @@ section: components
3248
4910
 
3249
4911
  <tr role="row">
3250
4912
  <td class="pf-c-table__check" role="cell">
3251
- <input
3252
- type="checkbox"
3253
- name="checkrow5"
3254
- aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node5"
3255
- />
4913
+ <div class="pf-c-check pf-m-standalone">
4914
+ <input
4915
+ class="pf-c-check__input"
4916
+ type="checkbox"
4917
+ name="checkrow5"
4918
+ aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node5"
4919
+ />
4920
+ </div>
3256
4921
  </td>
3257
4922
  <td role="cell" data-label="Repository name">
3258
4923
  <div>