@patternfly/patternfly 5.0.0-alpha.3 → 5.0.0-alpha.31

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 (290) hide show
  1. package/RELEASE-NOTES.md +17 -0
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/pficon/pficon.scss +6 -0
  4. package/assets/pficon/pficon.woff +0 -0
  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/_fonts.scss +22 -22
  10. package/base/_globals.scss +1 -1
  11. package/base/_icons.scss +1 -28
  12. package/base/_svg-icons.scss +6 -0
  13. package/base/_variables.scss +1 -1
  14. package/base/patternfly-common.css +0 -10
  15. package/base/patternfly-fonts.css +17 -17
  16. package/base/patternfly-icons.css +6 -20
  17. package/base/patternfly-pf-icons.css +5 -1
  18. package/base/themes/dark/_globals.scss +1 -1
  19. package/base/themes/dark/_variables.scss +1 -1
  20. package/components/AboutModalBox/about-modal-box.css +7 -7
  21. package/components/AboutModalBox/about-modal-box.scss +7 -7
  22. package/components/Accordion/accordion.css +2 -0
  23. package/components/Accordion/accordion.scss +2 -0
  24. package/components/Alert/alert.css +3 -3
  25. package/components/Alert/alert.scss +3 -3
  26. package/components/AppLauncher/app-launcher.css +2 -0
  27. package/components/AppLauncher/app-launcher.scss +2 -0
  28. package/components/Avatar/avatar.scss +2 -2
  29. package/components/Banner/banner.css +14 -14
  30. package/components/Banner/banner.scss +9 -13
  31. package/components/Breadcrumb/breadcrumb.css +2 -0
  32. package/components/Breadcrumb/breadcrumb.scss +2 -0
  33. package/components/CalendarMonth/calendar-month.css +2 -2
  34. package/components/CalendarMonth/calendar-month.scss +3 -3
  35. package/components/Card/card.css +20 -21
  36. package/components/Card/card.scss +22 -26
  37. package/components/Chip/chip.css +33 -24
  38. package/components/Chip/chip.scss +40 -31
  39. package/components/ChipGroup/chip-group.css +27 -17
  40. package/components/ChipGroup/chip-group.scss +36 -22
  41. package/components/Content/content.css +11 -5
  42. package/components/Content/content.scss +17 -9
  43. package/components/ContextSelector/context-selector.css +5 -1
  44. package/components/ContextSelector/context-selector.scss +6 -2
  45. package/components/DataList/data-list-grid.css +7 -7
  46. package/components/DataList/data-list-grid.scss +1 -1
  47. package/components/DataList/data-list.css +12 -11
  48. package/components/DataList/data-list.scss +5 -4
  49. package/components/DescriptionList/description-list.css +7 -7
  50. package/components/DescriptionList/description-list.scss +7 -7
  51. package/components/Divider/divider.css +2 -2
  52. package/components/Divider/divider.scss +3 -3
  53. package/components/Drawer/drawer.css +15 -16
  54. package/components/Drawer/drawer.scss +2 -3
  55. package/components/Dropdown/dropdown.css +12 -10
  56. package/components/Dropdown/dropdown.scss +2 -0
  57. package/components/DualListSelector/dual-list-selector.css +1 -1
  58. package/components/DualListSelector/dual-list-selector.scss +1 -1
  59. package/components/EmptyState/empty-state.css +46 -52
  60. package/components/EmptyState/empty-state.scss +58 -57
  61. package/components/ExpandableSection/expandable-section.css +2 -0
  62. package/components/ExpandableSection/expandable-section.scss +2 -0
  63. package/components/Form/form.css +12 -12
  64. package/components/Form/form.scss +7 -7
  65. package/components/FormControl/form-control.css +2 -5
  66. package/components/FormControl/themes/dark/form-control.scss +2 -6
  67. package/components/Hint/hint.css +2 -2
  68. package/components/Hint/hint.scss +2 -2
  69. package/components/Label/label.css +43 -30
  70. package/components/Label/label.scss +49 -34
  71. package/components/LabelGroup/label-group.css +26 -22
  72. package/components/LabelGroup/label-group.scss +31 -26
  73. package/components/Login/login.css +11 -11
  74. package/components/Login/login.scss +10 -10
  75. package/components/Masthead/masthead.css +4 -4
  76. package/components/Masthead/masthead.scss +4 -4
  77. package/components/Menu/menu.css +9 -6
  78. package/components/Menu/menu.scss +34 -31
  79. package/components/MenuToggle/menu-toggle.css +3 -1
  80. package/components/MenuToggle/menu-toggle.scss +3 -1
  81. package/components/ModalBox/modal-box.css +9 -8
  82. package/components/ModalBox/modal-box.scss +11 -11
  83. package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
  84. package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
  85. package/components/Nav/nav.css +1 -1
  86. package/components/Nav/nav.scss +2 -2
  87. package/components/NotificationDrawer/notification-drawer.css +3 -3
  88. package/components/NotificationDrawer/notification-drawer.scss +3 -3
  89. package/components/Page/page.css +71 -71
  90. package/components/Page/page.scss +12 -12
  91. package/components/Pagination/pagination.css +2 -2
  92. package/components/Popover/popover.css +25 -31
  93. package/components/Popover/popover.scss +27 -32
  94. package/components/Popover/themes/dark/popover.scss +2 -8
  95. package/components/Progress/progress.css +13 -10
  96. package/components/Progress/progress.scss +13 -10
  97. package/components/ProgressStepper/progress-stepper.css +5 -5
  98. package/components/ProgressStepper/progress-stepper.scss +5 -5
  99. package/components/SearchInput/search-input.css +4 -2
  100. package/components/SearchInput/search-input.scss +4 -2
  101. package/components/Select/select.css +1 -1
  102. package/components/Select/select.scss +1 -1
  103. package/components/Sidebar/sidebar.css +69 -26
  104. package/components/Sidebar/sidebar.scss +84 -27
  105. package/components/SimpleList/simple-list.css +1 -1
  106. package/components/SimpleList/simple-list.scss +2 -2
  107. package/components/Spinner/spinner.css +4 -4
  108. package/components/Spinner/spinner.scss +4 -4
  109. package/components/Table/table-grid.css +28 -28
  110. package/components/Table/table-scrollable.css +31 -26
  111. package/components/Table/table-scrollable.scss +33 -28
  112. package/components/Table/table-tree-view.css +14 -4
  113. package/components/Table/table-tree-view.scss +15 -0
  114. package/components/Table/table.css +7 -2
  115. package/components/Table/table.scss +9 -2
  116. package/components/Tabs/tabs.css +0 -4
  117. package/components/Tabs/tabs.scss +0 -7
  118. package/components/TextInputGroup/text-input-group.css +6 -4
  119. package/components/TextInputGroup/text-input-group.scss +6 -5
  120. package/components/Tile/tile.css +1 -1
  121. package/components/Tile/tile.scss +1 -1
  122. package/components/Timestamp/timestamp.css +3 -3
  123. package/components/Timestamp/timestamp.scss +3 -3
  124. package/components/Toolbar/toolbar.css +78 -43
  125. package/components/Toolbar/toolbar.scss +50 -10
  126. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  127. package/components/Tooltip/tooltip.css +7 -12
  128. package/components/Tooltip/tooltip.scss +6 -3
  129. package/components/TreeView/tree-view.css +7 -15
  130. package/components/TreeView/tree-view.scss +7 -18
  131. package/components/Wizard/wizard.css +16 -1
  132. package/components/Wizard/wizard.scss +20 -2
  133. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -13
  134. package/docs/components/Accordion/examples/Accordion.md +12 -12
  135. package/docs/components/ActionList/examples/ActionList.md +6 -6
  136. package/docs/components/Alert/examples/Alert.md +19 -19
  137. package/docs/components/AlertGroup/examples/AlertGroup.md +12 -12
  138. package/docs/components/AppLauncher/examples/application-launcher.md +51 -46
  139. package/docs/components/Avatar/examples/Avatar.md +11 -11
  140. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  141. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  142. package/docs/components/BackgroundImage/examples/BackgroundImage.md +4 -4
  143. package/docs/components/Badge/examples/Badge.md +5 -5
  144. package/docs/components/Banner/examples/Banner.md +8 -8
  145. package/docs/components/Brand/examples/Brand.md +9 -9
  146. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  147. package/docs/components/Button/examples/Button.md +35 -35
  148. package/docs/components/CalendarMonth/examples/CalendarMonth.md +32 -32
  149. package/docs/components/Card/examples/Card.md +139 -64
  150. package/docs/components/Check/examples/Check.md +15 -19
  151. package/docs/components/Chip/examples/Chip.md +70 -52
  152. package/docs/components/ChipGroup/examples/ChipGroup.md +452 -673
  153. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  154. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  155. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  156. package/docs/components/Content/examples/Content.md +37 -9
  157. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  158. package/docs/components/ContextSelector/examples/context-selector.md +86 -80
  159. package/docs/components/DataList/examples/DataList.md +187 -148
  160. package/docs/components/DatePicker/examples/DatePicker.md +10 -10
  161. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  162. package/docs/components/Divider/examples/Divider.md +10 -10
  163. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  164. package/docs/components/Drawer/examples/Drawer.md +43 -43
  165. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  166. package/docs/components/Dropdown/examples/Dropdown.md +123 -99
  167. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  168. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  169. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  170. package/docs/components/FileUpload/examples/FileUpload.md +8 -8
  171. package/docs/components/Form/examples/Form.md +64 -64
  172. package/docs/components/FormControl/examples/FormControl.md +20 -20
  173. package/docs/components/HelperText/examples/HelperText.md +12 -12
  174. package/docs/components/Hint/examples/Hint.md +7 -7
  175. package/docs/components/Icon/examples/Icon.md +10 -10
  176. package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
  177. package/docs/components/InputGroup/examples/InputGroup.md +10 -10
  178. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  179. package/docs/components/Label/examples/Label.md +1427 -746
  180. package/docs/components/LabelGroup/examples/LabelGroup.md +295 -242
  181. package/docs/components/List/examples/List.md +18 -18
  182. package/docs/components/LogViewer/examples/LogViewer.md +79 -73
  183. package/docs/components/Login/examples/Login.md +32 -32
  184. package/docs/components/Masthead/examples/masthead.md +9 -9
  185. package/docs/components/Menu/examples/Menu.md +82 -80
  186. package/docs/components/MenuToggle/examples/MenuToggle.md +28 -28
  187. package/docs/components/ModalBox/examples/ModalBox.md +106 -85
  188. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +25 -25
  189. package/docs/components/Nav/examples/Navigation.md +69 -69
  190. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  191. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +44 -44
  192. package/docs/components/NumberInput/examples/NumberInput.md +12 -12
  193. package/docs/components/OptionsMenu/examples/options-menu.md +27 -28
  194. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  195. package/docs/components/Page/examples/Page.md +54 -54
  196. package/docs/components/Pagination/examples/Pagination.md +27 -27
  197. package/docs/components/Panel/examples/Panel.md +10 -10
  198. package/docs/components/Popover/examples/Popover.md +201 -144
  199. package/docs/components/Progress/examples/Progress.md +31 -60
  200. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -38
  201. package/docs/components/Radio/examples/Radio.md +11 -11
  202. package/docs/components/SearchInput/examples/SearchInput.md +34 -34
  203. package/docs/components/Select/examples/Select.md +367 -313
  204. package/docs/components/Sidebar/examples/Sidebar.md +70 -14
  205. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  206. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  207. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  208. package/docs/components/Slider/examples/Slider.md +24 -24
  209. package/docs/components/Spinner/examples/Spinner.md +24 -24
  210. package/docs/components/Switch/examples/Switch.md +19 -19
  211. package/docs/components/TabContent/examples/TabContent.md +13 -13
  212. package/docs/components/Table/examples/Table.css +4 -0
  213. package/docs/components/Table/examples/Table.md +3163 -1712
  214. package/docs/components/Tabs/examples/Tabs.md +149 -149
  215. package/docs/components/TextInputGroup/examples/TextInputGroup.md +362 -280
  216. package/docs/components/Tile/examples/Tile.md +15 -15
  217. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  218. package/docs/components/Title/examples/Title.md +17 -17
  219. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  220. package/docs/components/Toolbar/examples/Toolbar.md +466 -373
  221. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  222. package/docs/components/TreeView/examples/TreeView.md +34 -34
  223. package/docs/components/Truncate/examples/Truncate.md +4 -4
  224. package/docs/components/Wizard/examples/Wizard.md +119 -127
  225. package/docs/demos/AboutModal/examples/AboutModal.md +4 -4
  226. package/docs/demos/Alert/examples/Alert.md +13 -13
  227. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  228. package/docs/demos/Banner/examples/Banner.md +8 -9
  229. package/docs/demos/Card/examples/Card.md +219 -156
  230. package/docs/demos/CardView/examples/CardView.md +56 -29
  231. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  232. package/docs/demos/Dashboard/examples/Dashboard.md +51 -35
  233. package/docs/demos/DataList/examples/DataList.md +158 -109
  234. package/docs/demos/DescriptionList/examples/DescriptionList.md +33 -22
  235. package/docs/demos/Drawer/examples/Drawer.md +24 -22
  236. package/docs/demos/Form/examples/BasicForms.md +28 -22
  237. package/docs/demos/HelperText/examples/HelperText.md +8 -9
  238. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  239. package/docs/demos/Masthead/examples/Masthead.md +29 -32
  240. package/docs/demos/Modal/examples/Modal.md +54 -66
  241. package/docs/demos/Nav/examples/Nav.md +47 -47
  242. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +40 -28
  243. package/docs/demos/Page/examples/Page.md +37 -37
  244. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +32 -33
  245. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +74 -64
  246. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  247. package/docs/demos/Table/examples/Table.md +2454 -467
  248. package/docs/demos/Tabs/examples/Tabs.md +141 -90
  249. package/docs/demos/Toolbar/examples/Toolbar.md +1808 -174
  250. package/docs/demos/Wizard/examples/Wizard.md +289 -266
  251. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  252. package/docs/layouts/Flex/examples/Flex.md +98 -98
  253. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  254. package/docs/layouts/Grid/examples/Grid.md +9 -9
  255. package/docs/layouts/Level/examples/Level.md +5 -5
  256. package/docs/layouts/Split/examples/Split.md +7 -7
  257. package/docs/layouts/Stack/examples/Stack.md +6 -6
  258. package/docs/utilities/Accessibility/examples/Accessibility.md +4 -4
  259. package/docs/utilities/Alignment/examples/Alignment.md +6 -6
  260. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +12 -12
  261. package/docs/utilities/BoxShadow/examples/box-shadow.md +22 -22
  262. package/docs/utilities/Display/examples/Display.md +11 -11
  263. package/docs/utilities/Flex/examples/Flex.md +34 -34
  264. package/docs/utilities/Float/examples/Float.md +4 -4
  265. package/docs/utilities/Sizing/examples/Sizing.md +50 -50
  266. package/docs/utilities/Spacing/examples/Spacing.md +34 -34
  267. package/docs/utilities/Text/examples/Text.md +27 -27
  268. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  269. package/layouts/Gallery/gallery.css +1 -1
  270. package/layouts/Gallery/gallery.scss +1 -1
  271. package/layouts/Grid/grid.css +7 -7
  272. package/layouts/Grid/grid.scss +2 -2
  273. package/package.json +59 -65
  274. package/patternfly-base-no-reset.css +23 -47
  275. package/patternfly-base.css +23 -47
  276. package/patternfly-no-reset.css +781 -656
  277. package/patternfly.css +781 -656
  278. package/patternfly.min.css +1 -1
  279. package/patternfly.min.css.map +1 -1
  280. package/sass-utilities/functions.scss +8 -24
  281. package/sass-utilities/mixins.scss +15 -39
  282. package/sass-utilities/scss-variables.scss +1 -1
  283. package/sass-utilities/themes/dark/scss-variables.scss +1 -1
  284. package/utilities/Spacing/spacing.scss +2 -2
  285. package/base/_shield-inheritable.scss +0 -69
  286. package/base/_shield-noninheritable.scss +0 -13
  287. package/base/patternfly-shield-inheritable.css +0 -66
  288. package/base/patternfly-shield-inheritable.scss +0 -4
  289. package/base/patternfly-shield-noninheritable.css +0 -9
  290. package/base/patternfly-shield-noninheritable.scss +0 -4
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
@@ -58,7 +58,6 @@ section: components
58
58
  role="listbox"
59
59
  aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-select-name-label"
60
60
  hidden
61
- style="width: 175px"
62
61
  >
63
62
  <li role="presentation">
64
63
  <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -97,9 +96,9 @@ section: components
97
96
  </span>
98
97
  <input
99
98
  class="pf-c-text-input-group__text-input"
100
- type="text"
101
- value
99
+ type="search"
102
100
  placeholder="Filter by name"
101
+ value
103
102
  aria-label="Type to filter"
104
103
  />
105
104
  </span>
@@ -173,65 +172,1663 @@ section: components
173
172
  <div class="pf-c-options-menu__toggle-icon">
174
173
  <i class="fas fa-caret-down" aria-hidden="true"></i>
175
174
  </div>
176
- </button>
177
- <ul
178
- class="pf-c-options-menu__menu"
179
- aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-pagination-options-menu-toggle"
180
- hidden
181
- >
182
- <li>
175
+ </button>
176
+ <ul
177
+ class="pf-c-options-menu__menu"
178
+ aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-pagination-options-menu-toggle"
179
+ hidden
180
+ >
181
+ <li>
182
+ <button
183
+ class="pf-c-options-menu__menu-item"
184
+ type="button"
185
+ >5 per page</button>
186
+ </li>
187
+ <li>
188
+ <button class="pf-c-options-menu__menu-item" type="button">
189
+ 10 per page
190
+ <div class="pf-c-options-menu__menu-item-icon">
191
+ <i class="fas fa-check" aria-hidden="true"></i>
192
+ </div>
193
+ </button>
194
+ </li>
195
+ <li>
196
+ <button
197
+ class="pf-c-options-menu__menu-item"
198
+ type="button"
199
+ >20 per page</button>
200
+ </li>
201
+ </ul>
202
+ </div>
203
+ <nav class="pf-c-pagination__nav" aria-label="Pagination">
204
+ <div class="pf-c-pagination__nav-control pf-m-prev">
205
+ <button
206
+ class="pf-c-button pf-m-plain"
207
+ type="button"
208
+ disabled
209
+ aria-label="Go to previous page"
210
+ >
211
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
212
+ </button>
213
+ </div>
214
+ <div class="pf-c-pagination__nav-control pf-m-next">
215
+ <button
216
+ class="pf-c-button pf-m-plain"
217
+ type="button"
218
+ aria-label="Go to next page"
219
+ >
220
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
221
+ </button>
222
+ </div>
223
+ </nav>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ <div
229
+ class="pf-c-toolbar__expandable-content pf-m-hidden"
230
+ id="toolbar-attribute-value-search-filter-desktop-example-expandable-content"
231
+ hidden
232
+ ></div>
233
+ </div>
234
+ </div>
235
+
236
+ ```
237
+
238
+ ### Toolbar with validation on desktop
239
+
240
+ ```html isFullscreen
241
+ <div class="pf-c-page" id="toolbar-pagination-management-example">
242
+ <div class="pf-c-skip-to-content">
243
+ <a
244
+ class="pf-c-button pf-m-primary"
245
+ href="#main-content-toolbar-pagination-management-example"
246
+ >Skip to content</a>
247
+ </div>
248
+ <header
249
+ class="pf-c-masthead"
250
+ id="toolbar-pagination-management-example-masthead"
251
+ >
252
+ <span class="pf-c-masthead__toggle">
253
+ <button
254
+ class="pf-c-button pf-m-plain"
255
+ type="button"
256
+ aria-label="Global navigation"
257
+ >
258
+ <i class="fas fa-bars" aria-hidden="true"></i>
259
+ </button>
260
+ </span>
261
+ <div class="pf-c-masthead__main">
262
+ <a class="pf-c-masthead__brand" href="#">
263
+ <picture
264
+ class="pf-c-brand pf-m-picture"
265
+ style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
266
+ >
267
+ <source
268
+ media="(min-width: 768px)"
269
+ srcset="/assets/images/logo__pf--reverse-on-md.svg"
270
+ />
271
+ <source srcset="/assets/images/logo__pf--reverse--base.svg" />
272
+ <img
273
+ src="/assets/images/logo__pf--reverse--base.png"
274
+ alt="Fallback patternFly default logo"
275
+ />
276
+ </picture>
277
+ </a>
278
+ </div>
279
+ <div class="pf-c-masthead__content">
280
+ <div
281
+ class="pf-c-toolbar pf-m-full-height pf-m-static"
282
+ id="toolbar-pagination-management-example-masthead-toolbar"
283
+ >
284
+ <div class="pf-c-toolbar__content">
285
+ <div class="pf-c-toolbar__content-section">
286
+ <div
287
+ class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
288
+ >
289
+ <div
290
+ class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
291
+ >
292
+ <div class="pf-c-toolbar__item">
293
+ <nav
294
+ class="pf-c-app-launcher"
295
+ aria-label="Application launcher"
296
+ id="toolbar-pagination-management-example-masthead-application-launcher"
297
+ >
298
+ <button
299
+ class="pf-c-app-launcher__toggle"
300
+ type="button"
301
+ id="toolbar-pagination-management-example-masthead-application-launcher-button"
302
+ aria-expanded="false"
303
+ aria-label="Application launcher"
304
+ >
305
+ <i class="fas fa-th" aria-hidden="true"></i>
306
+ </button>
307
+ <div
308
+ class="pf-c-app-launcher__menu pf-m-align-right"
309
+ hidden
310
+ >
311
+ <div class="pf-c-app-launcher__menu-search">
312
+ <div class="pf-c-search-input">
313
+ <div class="pf-c-search-input__bar">
314
+ <span class="pf-c-search-input__text">
315
+ <span class="pf-c-search-input__icon">
316
+ <i
317
+ class="fas fa-search fa-fw"
318
+ aria-hidden="true"
319
+ ></i>
320
+ </span>
321
+ <input
322
+ class="pf-c-search-input__text-input"
323
+ type="text"
324
+ placeholder="Filter by name"
325
+ aria-label="Filter by name"
326
+ />
327
+ </span>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ <section class="pf-c-app-launcher__group">
332
+ <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
333
+ <ul role="list">
334
+ <li
335
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
336
+ >
337
+ <a class="pf-c-app-launcher__menu-item">
338
+ Link 1
339
+ <span
340
+ class="pf-c-app-launcher__menu-item-external-icon"
341
+ >
342
+ <i
343
+ class="fas fa-external-link-alt"
344
+ aria-hidden="true"
345
+ ></i>
346
+ </span>
347
+ <span class="pf-screen-reader">(opens new window)</span>
348
+ </a>
349
+ <button
350
+ class="pf-c-app-launcher__menu-item pf-m-action"
351
+ type="button"
352
+ aria-label="Favorite"
353
+ >
354
+ <i class="fas fa-star" aria-hidden="true"></i>
355
+ </button>
356
+ </li>
357
+ <li
358
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
359
+ >
360
+ <a class="pf-c-app-launcher__menu-item">
361
+ Link 2
362
+ <span
363
+ class="pf-c-app-launcher__menu-item-external-icon"
364
+ >
365
+ <i
366
+ class="fas fa-external-link-alt"
367
+ aria-hidden="true"
368
+ ></i>
369
+ </span>
370
+ <span class="pf-screen-reader">(opens new window)</span>
371
+ </a>
372
+ <button
373
+ class="pf-c-app-launcher__menu-item pf-m-action"
374
+ type="button"
375
+ aria-label="Favorite"
376
+ >
377
+ <i class="fas fa-star" aria-hidden="true"></i>
378
+ </button>
379
+ </li>
380
+ </ul>
381
+ </section>
382
+ <hr class="pf-c-divider" />
383
+ <section class="pf-c-app-launcher__group">
384
+ <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
385
+ <ul role="list">
386
+ <li
387
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
388
+ >
389
+ <a class="pf-c-app-launcher__menu-item">
390
+ Link 1
391
+ <span
392
+ class="pf-c-app-launcher__menu-item-external-icon"
393
+ >
394
+ <i
395
+ class="fas fa-external-link-alt"
396
+ aria-hidden="true"
397
+ ></i>
398
+ </span>
399
+ <span class="pf-screen-reader">(opens new window)</span>
400
+ </a>
401
+ <button
402
+ class="pf-c-app-launcher__menu-item pf-m-action"
403
+ type="button"
404
+ aria-label="Favorite"
405
+ >
406
+ <i class="fas fa-star" aria-hidden="true"></i>
407
+ </button>
408
+ </li>
409
+ <li
410
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
411
+ >
412
+ <a class="pf-c-app-launcher__menu-item">
413
+ Link 2
414
+ <span
415
+ class="pf-c-app-launcher__menu-item-external-icon"
416
+ >
417
+ <i
418
+ class="fas fa-external-link-alt"
419
+ aria-hidden="true"
420
+ ></i>
421
+ </span>
422
+ <span class="pf-screen-reader">(opens new window)</span>
423
+ </a>
424
+ <button
425
+ class="pf-c-app-launcher__menu-item pf-m-action"
426
+ type="button"
427
+ aria-label="Favorite"
428
+ >
429
+ <i class="fas fa-star" aria-hidden="true"></i>
430
+ </button>
431
+ </li>
432
+ </ul>
433
+ </section>
434
+ </div>
435
+ </nav>
436
+ </div>
437
+ <div class="pf-c-toolbar__item">
438
+ <div class="pf-c-dropdown">
439
+ <button
440
+ class="pf-c-dropdown__toggle pf-m-plain"
441
+ id="toolbar-pagination-management-example-masthead-settings-button"
442
+ aria-expanded="false"
443
+ type="button"
444
+ aria-label="Settings"
445
+ >
446
+ <i class="fas fa-cog" aria-hidden="true"></i>
447
+ </button>
448
+ <ul
449
+ class="pf-c-dropdown__menu pf-m-align-right"
450
+ aria-labelledby="toolbar-pagination-management-example-masthead-settings-button"
451
+ hidden
452
+ >
453
+ <li>
454
+ <button
455
+ class="pf-c-dropdown__menu-item"
456
+ type="button"
457
+ >Settings</button>
458
+ </li>
459
+ <li>
460
+ <button
461
+ class="pf-c-dropdown__menu-item"
462
+ type="button"
463
+ >Use the beta release</button>
464
+ </li>
465
+ </ul>
466
+ </div>
467
+ </div>
468
+ <div class="pf-c-toolbar__item">
469
+ <div class="pf-c-dropdown">
470
+ <button
471
+ class="pf-c-dropdown__toggle pf-m-plain"
472
+ id="toolbar-pagination-management-example-masthead-help-button"
473
+ aria-expanded="false"
474
+ type="button"
475
+ aria-label="Help"
476
+ >
477
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
478
+ </button>
479
+ <ul
480
+ class="pf-c-dropdown__menu pf-m-align-right"
481
+ aria-labelledby="toolbar-pagination-management-example-masthead-help-button"
482
+ hidden
483
+ >
484
+ <li>
485
+ <button
486
+ class="pf-c-dropdown__menu-item"
487
+ type="button"
488
+ >Support options</button>
489
+ </li>
490
+ <li>
491
+ <button
492
+ class="pf-c-dropdown__menu-item"
493
+ type="button"
494
+ >Open support case</button>
495
+ </li>
496
+ <li>
497
+ <button
498
+ class="pf-c-dropdown__menu-item"
499
+ type="button"
500
+ >API documentation</button>
501
+ </li>
502
+ </ul>
503
+ </div>
504
+ </div>
505
+ </div>
506
+ <div class="pf-c-toolbar__item pf-m-hidden-on-lg">
507
+ <div class="pf-c-dropdown">
508
+ <button
509
+ class="pf-c-menu-toggle pf-m-plain"
510
+ type="button"
511
+ aria-expanded="false"
512
+ aria-label="Actions"
513
+ >
514
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
515
+ </button>
516
+ <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
517
+ <div class="pf-c-menu__content">
518
+ <section class="pf-c-menu__group pf-m-hidden-on-sm">
519
+ <ul class="pf-c-menu__list" role="menu">
520
+ <li
521
+ class="pf-c-menu__list-item pf-m-disabled"
522
+ role="none"
523
+ >
524
+ <button
525
+ class="pf-c-menu__item"
526
+ type="button"
527
+ disabled
528
+ role="menuitem"
529
+ >
530
+ <span class="pf-c-menu__item-description">
531
+ <div class="pf-u-font-size-sm">Username:</div>
532
+ <div class="pf-u-font-size-md">ned_username</div>
533
+ </span>
534
+ </button>
535
+ </li>
536
+ <li
537
+ class="pf-c-menu__list-item pf-m-disabled"
538
+ role="none"
539
+ >
540
+ <button
541
+ class="pf-c-menu__item"
542
+ type="button"
543
+ disabled
544
+ role="menuitem"
545
+ >
546
+ <span class="pf-c-menu__item-description">
547
+ <div class="pf-u-font-size-sm">Account number:</div>
548
+ <div class="pf-u-font-size-md">123456789</div>
549
+ </span>
550
+ </button>
551
+ </li>
552
+ <li class="pf-c-divider" role="separator"></li>
553
+ <li class="pf-c-menu__list-item" role="none">
554
+ <button
555
+ class="pf-c-menu__item"
556
+ type="button"
557
+ role="menuitem"
558
+ >
559
+ <span class="pf-c-menu__item-main">
560
+ <span class="pf-c-menu__item-text">My profile</span>
561
+ </span>
562
+ </button>
563
+ </li>
564
+ <li class="pf-c-menu__list-item" role="none">
565
+ <button
566
+ class="pf-c-menu__item"
567
+ type="button"
568
+ role="menuitem"
569
+ >
570
+ <span class="pf-c-menu__item-main">
571
+ <span
572
+ class="pf-c-menu__item-text"
573
+ >User management</span>
574
+ </span>
575
+ </button>
576
+ </li>
577
+ <li class="pf-c-menu__list-item" role="none">
578
+ <button
579
+ class="pf-c-menu__item"
580
+ type="button"
581
+ role="menuitem"
582
+ >
583
+ <span class="pf-c-menu__item-main">
584
+ <span class="pf-c-menu__item-text">Logout</span>
585
+ </span>
586
+ </button>
587
+ </li>
588
+ </ul>
589
+ </section>
590
+ <hr class="pf-c-divider pf-m-hidden-on-sm" />
591
+ <section class="pf-c-menu__group">
592
+ <ul class="pf-c-menu__list" role="menu">
593
+ <li class="pf-c-menu__list-item" role="none">
594
+ <button
595
+ class="pf-c-menu__item"
596
+ type="button"
597
+ role="menuitem"
598
+ aria-expanded="false"
599
+ >
600
+ <span class="pf-c-menu__item-main">
601
+ <span class="pf-c-menu__item-icon">
602
+ <i
603
+ class="fas fa-fw fa-cog"
604
+ aria-hidden="true"
605
+ ></i>
606
+ </span>
607
+ <span class="pf-c-menu__item-text">Settings</span>
608
+ <span class="pf-c-menu__item-toggle-icon">
609
+ <i class="fas fa-angle-right"></i>
610
+ </span>
611
+ </span>
612
+ </button>
613
+ <div class="pf-c-menu" hidden>
614
+ <div class="pf-c-menu__content">
615
+ <ul class="pf-c-menu__list" role="menu">
616
+ <li
617
+ class="pf-c-menu__list-item pf-m-drill-up"
618
+ role="none"
619
+ >
620
+ <button
621
+ class="pf-c-menu__item"
622
+ type="button"
623
+ role="menuitem"
624
+ >
625
+ <span class="pf-c-menu__item-main">
626
+ <span
627
+ class="pf-c-menu__item-toggle-icon"
628
+ >
629
+ <i class="fas fa-angle-left"></i>
630
+ </span>
631
+ <span class="pf-c-menu__item-icon">
632
+ <i
633
+ class="fas fa-fw fa-cog"
634
+ aria-hidden="true"
635
+ ></i>
636
+ </span>
637
+ <span
638
+ class="pf-c-menu__item-text"
639
+ >Settings</span>
640
+ </span>
641
+ </button>
642
+ </li>
643
+ <li class="pf-c-divider" role="separator"></li>
644
+ <li class="pf-c-menu__list-item" role="none">
645
+ <a
646
+ class="pf-c-menu__item"
647
+ href="#"
648
+ role="menuitem"
649
+ >
650
+ <span class="pf-c-menu__item-main">
651
+ <span
652
+ class="pf-c-menu__item-text"
653
+ >Customer support</span>
654
+ </span>
655
+ </a>
656
+ </li>
657
+ <li class="pf-c-menu__list-item" role="none">
658
+ <a
659
+ class="pf-c-menu__item"
660
+ href="#"
661
+ role="menuitem"
662
+ >
663
+ <span class="pf-c-menu__item-main">
664
+ <span class="pf-c-menu__item-text">About</span>
665
+ </span>
666
+ </a>
667
+ </li>
668
+ </ul>
669
+ </div>
670
+ </div>
671
+ </li>
672
+
673
+ <li class="pf-c-menu__list-item" role="none">
674
+ <button
675
+ class="pf-c-menu__item"
676
+ type="button"
677
+ role="menuitem"
678
+ aria-expanded="false"
679
+ >
680
+ <span class="pf-c-menu__item-main">
681
+ <span class="pf-c-menu__item-icon">
682
+ <i
683
+ class="fas fa-fw fa-pf-icon pf-icon-help"
684
+ aria-hidden="true"
685
+ ></i>
686
+ </span>
687
+ <span class="pf-c-menu__item-text">Help</span>
688
+ <span class="pf-c-menu__item-toggle-icon">
689
+ <i class="fas fa-angle-right"></i>
690
+ </span>
691
+ </span>
692
+ </button>
693
+ <div class="pf-c-menu" hidden>
694
+ <div class="pf-c-menu__content">
695
+ <ul class="pf-c-menu__list" role="menu">
696
+ <li
697
+ class="pf-c-menu__list-item pf-m-drill-up"
698
+ role="none"
699
+ >
700
+ <button
701
+ class="pf-c-menu__item"
702
+ type="button"
703
+ role="menuitem"
704
+ >
705
+ <span class="pf-c-menu__item-main">
706
+ <span
707
+ class="pf-c-menu__item-toggle-icon"
708
+ >
709
+ <i class="fas fa-angle-left"></i>
710
+ </span>
711
+ <span class="pf-c-menu__item-icon">
712
+ <i
713
+ class="fas fa-fw fa-pf-icon pf-icon-help"
714
+ aria-hidden="true"
715
+ ></i>
716
+ </span>
717
+ <span class="pf-c-menu__item-text">Help</span>
718
+ </span>
719
+ </button>
720
+ </li>
721
+ <li class="pf-c-divider" role="separator"></li>
722
+ <li class="pf-c-menu__list-item" role="none">
723
+ <a
724
+ class="pf-c-menu__item"
725
+ href="#"
726
+ role="menuitem"
727
+ >
728
+ <span class="pf-c-menu__item-main">
729
+ <span
730
+ class="pf-c-menu__item-text"
731
+ >Support options</span>
732
+ </span>
733
+ </a>
734
+ </li>
735
+ <li class="pf-c-menu__list-item" role="none">
736
+ <a
737
+ class="pf-c-menu__item"
738
+ href="#"
739
+ role="menuitem"
740
+ >
741
+ <span class="pf-c-menu__item-main">
742
+ <span
743
+ class="pf-c-menu__item-text"
744
+ >Open support case</span>
745
+ </span>
746
+ </a>
747
+ </li>
748
+ <li class="pf-c-menu__list-item" role="none">
749
+ <a
750
+ class="pf-c-menu__item"
751
+ href="#"
752
+ role="menuitem"
753
+ >
754
+ <span class="pf-c-menu__item-main">
755
+ <span
756
+ class="pf-c-menu__item-text"
757
+ >API documentation</span>
758
+ </span>
759
+ </a>
760
+ </li>
761
+ </ul>
762
+ </div>
763
+ </div>
764
+ </li>
765
+
766
+ <li class="pf-c-menu__list-item" role="none">
767
+ <button
768
+ class="pf-c-menu__item"
769
+ type="button"
770
+ role="menuitem"
771
+ >
772
+ <span class="pf-c-menu__item-main">
773
+ <span class="pf-c-menu__item-icon">
774
+ <i class="fas fa-fw fa-th" aria-hidden="true"></i>
775
+ </span>
776
+ <span
777
+ class="pf-c-menu__item-text"
778
+ >Application launcher</span>
779
+ <span class="pf-c-menu__item-toggle-icon">
780
+ <i class="fas fa-angle-right"></i>
781
+ </span>
782
+ </span>
783
+ </button>
784
+ <div class="pf-c-menu" hidden>
785
+ <div class="pf-c-menu__header">
786
+ <button
787
+ class="pf-c-menu__item"
788
+ type="button"
789
+ role="menuitem"
790
+ >
791
+ <span class="pf-c-menu__item-main">
792
+ <span class="pf-c-menu__item-toggle-icon">
793
+ <i class="fas fa-angle-left"></i>
794
+ </span>
795
+ <span class="pf-c-menu__item-icon">
796
+ <i
797
+ class="fas fa-fw fa-th"
798
+ aria-hidden="true"
799
+ ></i>
800
+ </span>
801
+ <span
802
+ class="pf-c-menu__item-text"
803
+ >Application launcher</span>
804
+ </span>
805
+ </button>
806
+ </div>
807
+ <div class="pf-c-menu__search">
808
+ <div class="pf-c-menu__search-input">
809
+ <div class="pf-c-search-input">
810
+ <div class="pf-c-search-input__bar">
811
+ <span class="pf-c-search-input__text">
812
+ <span class="pf-c-search-input__icon">
813
+ <i
814
+ class="fas fa-search fa-fw"
815
+ aria-hidden="true"
816
+ ></i>
817
+ </span>
818
+ <input
819
+ class="pf-c-search-input__text-input"
820
+ type="text"
821
+ placeholder="Search"
822
+ aria-label="Search"
823
+ />
824
+ </span>
825
+ </div>
826
+ </div>
827
+ </div>
828
+ </div>
829
+ <hr class="pf-c-divider" />
830
+ <section class="pf-c-menu__group">
831
+ <h1 class="pf-c-menu__group-title">Favorites</h1>
832
+ <ul class="pf-c-menu__list" role="menu">
833
+ <li class="pf-c-menu__list-item" role="none">
834
+ <a
835
+ class="pf-c-menu__item"
836
+ href="#"
837
+ role="menuitem"
838
+ >
839
+ <span class="pf-c-menu__item-main">
840
+ <span
841
+ class="pf-c-menu__item-text"
842
+ >Link 1</span>
843
+ </span>
844
+ </a>
845
+ <button
846
+ class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
847
+ type="button"
848
+ aria-label="Starred"
849
+ >
850
+ <span class="pf-c-menu__item-action-icon">
851
+ <i
852
+ class="fas fa-star"
853
+ aria-hidden="true"
854
+ ></i>
855
+ </span>
856
+ </button>
857
+ </li>
858
+ <li class="pf-c-menu__list-item" role="none">
859
+ <a
860
+ class="pf-c-menu__item"
861
+ href="#"
862
+ role="menuitem"
863
+ target="_blank"
864
+ >
865
+ <span class="pf-c-menu__item-main">
866
+ <span
867
+ class="pf-c-menu__item-text"
868
+ >Link 2</span>
869
+ <span
870
+ class="pf-c-menu__item-external-icon"
871
+ >
872
+ <i
873
+ class="fas fa-external-link-alt"
874
+ aria-hidden="true"
875
+ ></i>
876
+ </span>
877
+ <span
878
+ class="pf-screen-reader"
879
+ >(opens new window)</span>
880
+ </span>
881
+ </a>
882
+ <button
883
+ class="pf-c-menu__item-action pf-m-favorite"
884
+ type="button"
885
+ aria-label="Not starred"
886
+ >
887
+ <span class="pf-c-menu__item-action-icon">
888
+ <i
889
+ class="fas fa-star"
890
+ aria-hidden="true"
891
+ ></i>
892
+ </span>
893
+ </button>
894
+ </li>
895
+ </ul>
896
+ </section>
897
+ <hr class="pf-c-divider" />
898
+ <section class="pf-c-menu__group">
899
+ <h1 class="pf-c-menu__group-title">Group 1</h1>
900
+ <ul class="pf-c-menu__list" role="menu">
901
+ <li class="pf-c-menu__list-item" role="none">
902
+ <a
903
+ class="pf-c-menu__item"
904
+ href="#"
905
+ role="menuitem"
906
+ >
907
+ <span class="pf-c-menu__item-main">
908
+ <span
909
+ class="pf-c-menu__item-text"
910
+ >Link 1</span>
911
+ </span>
912
+ </a>
913
+ <button
914
+ class="pf-c-menu__item-action pf-m-favorite"
915
+ type="button"
916
+ aria-label="Not starred"
917
+ >
918
+ <span class="pf-c-menu__item-action-icon">
919
+ <i
920
+ class="fas fa-star"
921
+ aria-hidden="true"
922
+ ></i>
923
+ </span>
924
+ </button>
925
+ </li>
926
+ <li class="pf-c-menu__list-item" role="none">
927
+ <a
928
+ class="pf-c-menu__item"
929
+ href="#"
930
+ role="menuitem"
931
+ target="_blank"
932
+ >
933
+ <span class="pf-c-menu__item-main">
934
+ <span
935
+ class="pf-c-menu__item-text"
936
+ >Link 2</span>
937
+ <span
938
+ class="pf-c-menu__item-external-icon"
939
+ >
940
+ <i
941
+ class="fas fa-external-link-alt"
942
+ aria-hidden="true"
943
+ ></i>
944
+ </span>
945
+ <span
946
+ class="pf-screen-reader"
947
+ >(opens new window)</span>
948
+ </span>
949
+ </a>
950
+ <button
951
+ class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
952
+ type="button"
953
+ aria-label="Starred"
954
+ >
955
+ <span class="pf-c-menu__item-action-icon">
956
+ <i
957
+ class="fas fa-star"
958
+ aria-hidden="true"
959
+ ></i>
960
+ </span>
961
+ </button>
962
+ </li>
963
+ </ul>
964
+ </section>
965
+ </div>
966
+ </li>
967
+ </ul>
968
+ </section>
969
+ </div>
970
+ </div>
971
+ </div>
972
+ </div>
973
+ </div>
974
+ <div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
975
+ <div
976
+ class="pf-c-dropdown pf-m-full-height"
977
+ style="--pf-c-dropdown--MaxWidth: 20ch;"
978
+ >
979
+ <button
980
+ class="pf-c-dropdown__toggle"
981
+ id="toolbar-pagination-management-example-masthead-profile-button"
982
+ aria-expanded="false"
983
+ type="button"
984
+ >
985
+ <span class="pf-c-dropdown__toggle-image">
986
+ <img
987
+ class="pf-c-avatar"
988
+ alt="Avatar image"
989
+ src="/assets/images/img_avatar-light.svg"
990
+ />
991
+ </span>
992
+ <span class="pf-c-dropdown__toggle-text">Ned Username</span>
993
+ <span class="pf-c-dropdown__toggle-icon">
994
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
995
+ </span>
996
+ </button>
997
+ <div class="pf-c-dropdown__menu" hidden>
998
+ <section class="pf-c-dropdown__group">
999
+ <div class="pf-c-dropdown__menu-item pf-m-text">
1000
+ <div class="pf-u-font-size-sm">Account number:</div>
1001
+ <div>123456789</div>
1002
+ </div>
1003
+ <div class="pf-c-dropdown__menu-item pf-m-text">
1004
+ <div class="pf-u-font-size-sm">Username:</div>
1005
+ <div>mshaksho@redhat.com</div>
1006
+ </div>
1007
+ </section>
1008
+ <hr class="pf-c-divider" />
1009
+ <section class="pf-c-dropdown__group">
1010
+ <ul>
1011
+ <li>
1012
+ <a class="pf-c-dropdown__menu-item" href="#">My profile</a>
1013
+ </li>
1014
+ <li>
1015
+ <a
1016
+ class="pf-c-dropdown__menu-item"
1017
+ href="#"
1018
+ >User management</a>
1019
+ </li>
1020
+ <li>
1021
+ <a class="pf-c-dropdown__menu-item" href="#">Logout</a>
1022
+ </li>
1023
+ </ul>
1024
+ </section>
1025
+ </div>
1026
+ </div>
1027
+ </div>
1028
+ </div>
1029
+ </div>
1030
+ </div>
1031
+ </div>
1032
+ </header>
1033
+ <div class="pf-c-page__sidebar">
1034
+ <div class="pf-c-page__sidebar-body">
1035
+ <nav
1036
+ class="pf-c-nav"
1037
+ id="toolbar-pagination-management-example-primary-nav"
1038
+ aria-label="Global"
1039
+ >
1040
+ <ul class="pf-c-nav__list" role="list">
1041
+ <li class="pf-c-nav__item">
1042
+ <a href="#" class="pf-c-nav__link">System panel</a>
1043
+ </li>
1044
+ <li class="pf-c-nav__item">
1045
+ <a
1046
+ href="#"
1047
+ class="pf-c-nav__link pf-m-current"
1048
+ aria-current="page"
1049
+ >Policy</a>
1050
+ </li>
1051
+ <li class="pf-c-nav__item">
1052
+ <a href="#" class="pf-c-nav__link">Authentication</a>
1053
+ </li>
1054
+ <li class="pf-c-nav__item">
1055
+ <a href="#" class="pf-c-nav__link">Network services</a>
1056
+ </li>
1057
+ <li class="pf-c-nav__item">
1058
+ <a href="#" class="pf-c-nav__link">Server</a>
1059
+ </li>
1060
+ </ul>
1061
+ </nav>
1062
+ </div>
1063
+ </div>
1064
+ <main
1065
+ class="pf-c-page__main"
1066
+ tabindex="-1"
1067
+ id="main-content-toolbar-pagination-management-example"
1068
+ >
1069
+ <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
1070
+ <div class="pf-c-page__main-body">
1071
+ <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
1072
+ <ol class="pf-c-breadcrumb__list" role="list">
1073
+ <li class="pf-c-breadcrumb__item">
1074
+ <a href="#" class="pf-c-breadcrumb__link">Section home</a>
1075
+ </li>
1076
+ <li class="pf-c-breadcrumb__item">
1077
+ <span class="pf-c-breadcrumb__item-divider">
1078
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1079
+ </span>
1080
+
1081
+ <a href="#" class="pf-c-breadcrumb__link">Section title</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
1096
+ href="#"
1097
+ class="pf-c-breadcrumb__link pf-m-current"
1098
+ aria-current="page"
1099
+ >Section landing</a>
1100
+ </li>
1101
+ </ol>
1102
+ </nav>
1103
+ </div>
1104
+ </section>
1105
+ <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
1106
+ <div class="pf-c-page__main-body">
1107
+ <div class="pf-c-content">
1108
+ <h1>Main title</h1>
1109
+ <p>This is a full page demo.</p>
1110
+ </div>
1111
+ </div>
1112
+ </section>
1113
+ <section class="pf-c-page__main-section">
1114
+ <div class="pf-c-toolbar" id="toolbar-with-validation-example">
1115
+ <div class="pf-c-toolbar__content">
1116
+ <div class="pf-c-toolbar__content-section">
1117
+ <div class="pf-c-toolbar__group pf-m-toggle-group pf-m-show-on-2xl">
1118
+ <div class="pf-c-toolbar__toggle">
1119
+ <button
1120
+ class="pf-c-button pf-m-plain"
1121
+ type="button"
1122
+ aria-label="Show filters"
1123
+ aria-expanded="false"
1124
+ aria-controls="toolbar-with-validation-example-expandable-content"
1125
+ >
1126
+ <i class="fas fa-filter" aria-hidden="true"></i>
1127
+ </button>
1128
+ </div>
1129
+ <div class="pf-c-toolbar__group pf-m-filter-group">
1130
+ <div class="pf-c-toolbar__item">
1131
+ <div
1132
+ class="pf-c-input-group"
1133
+ aria-label="search filter"
1134
+ role="group"
1135
+ >
1136
+ <div class="pf-c-select" style="width: 160px">
1137
+ <span
1138
+ id="toolbar-with-validation-example-select-month-label"
1139
+ hidden
1140
+ >Choose one</span>
1141
+
1142
+ <button
1143
+ class="pf-c-select__toggle"
1144
+ type="button"
1145
+ id="toolbar-with-validation-example-select-month-toggle"
1146
+ aria-haspopup="true"
1147
+ aria-expanded="false"
1148
+ aria-labelledby="toolbar-with-validation-example-select-month-label toolbar-with-validation-example-select-month-toggle"
1149
+ >
1150
+ <div class="pf-c-select__toggle-wrapper">
1151
+ <span class="pf-c-select__toggle-icon">
1152
+ <i class="fas fa-filter" aria-hidden="true"></i>
1153
+ </span>
1154
+ <span class="pf-c-select__toggle-text">Last month</span>
1155
+ </div>
1156
+ <span class="pf-c-select__toggle-arrow">
1157
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1158
+ </span>
1159
+ </button>
1160
+
1161
+ <ul
1162
+ class="pf-c-select__menu"
1163
+ role="listbox"
1164
+ aria-labelledby="toolbar-with-validation-example-select-month-label"
1165
+ hidden
1166
+ >
1167
+ <li role="presentation">
1168
+ <button
1169
+ class="pf-c-select__menu-item"
1170
+ role="option"
1171
+ >Running</button>
1172
+ </li>
1173
+ <li role="presentation">
1174
+ <button
1175
+ class="pf-c-select__menu-item pf-m-selected"
1176
+ role="option"
1177
+ aria-selected="true"
1178
+ >
1179
+ Stopped
1180
+ <span class="pf-c-select__menu-item-icon">
1181
+ <i class="fas fa-check" aria-hidden="true"></i>
1182
+ </span>
1183
+ </button>
1184
+ </li>
1185
+ <li role="presentation">
1186
+ <button
1187
+ class="pf-c-select__menu-item"
1188
+ role="option"
1189
+ >Down</button>
1190
+ </li>
1191
+ <li role="presentation">
1192
+ <button
1193
+ class="pf-c-select__menu-item"
1194
+ role="option"
1195
+ >Degraded</button>
1196
+ </li>
1197
+ <li role="presentation">
1198
+ <button
1199
+ class="pf-c-select__menu-item"
1200
+ role="option"
1201
+ >Needs maintenance</button>
1202
+ </li>
1203
+ </ul>
1204
+ </div>
1205
+ <div class="pf-c-date-picker">
1206
+ <div class="pf-c-date-picker__input">
1207
+ <div
1208
+ class="pf-c-input-group"
1209
+ aria-label="search filter"
1210
+ role="group"
1211
+ >
1212
+ <input
1213
+ class="pf-c-form-control"
1214
+ type="text"
1215
+ value="2020-03-05"
1216
+ id="toolbar-with-validation-example-helper-text-input"
1217
+ name="toolbar-with-validation-example-helper-text-input"
1218
+ aria-label="Date picker"
1219
+ />
1220
+ <button
1221
+ class="pf-c-button pf-m-control"
1222
+ type="button"
1223
+ aria-label="Toggle date picker"
1224
+ >
1225
+ <i class="fas fa-calendar-alt" aria-hidden="true"></i>
1226
+ </button>
1227
+ </div>
1228
+ </div>
1229
+ <div class="pf-c-date-picker__helper-text">MM/DD/YYYY</div>
1230
+ </div>
1231
+ <div class="pf-c-date-picker">
1232
+ <div class="pf-c-date-picker__input">
1233
+ <div
1234
+ class="pf-c-input-group"
1235
+ aria-label="search filter"
1236
+ role="group"
1237
+ >
1238
+ <input
1239
+ class="pf-c-form-control"
1240
+ aria-invalid="true"
1241
+ type="text"
1242
+ value="2020-03-05"
1243
+ id="toolbar-with-validation-example-invalid-input"
1244
+ name="toolbar-with-validation-example-invalid-input"
1245
+ aria-label="Date picker"
1246
+ />
1247
+ <button
1248
+ class="pf-c-button pf-m-control"
1249
+ type="button"
1250
+ aria-label="Toggle date picker"
1251
+ >
1252
+ <i class="fas fa-calendar-alt" aria-hidden="true"></i>
1253
+ </button>
1254
+ </div>
1255
+ <div class="pf-c-date-picker__helper-text">MM/DD/YYYY</div>
1256
+ </div>
1257
+ <div
1258
+ class="pf-c-date-picker__helper-text pf-m-error"
1259
+ >Max: 08/10/2022</div>
1260
+ </div>
1261
+ </div>
1262
+ </div>
1263
+ </div>
1264
+ <div class="pf-c-toolbar__item pf-m-search-filter">
1265
+ <div
1266
+ class="pf-c-input-group"
1267
+ aria-label="search filter"
1268
+ role="group"
1269
+ >
1270
+ <div class="pf-c-select" style="width: 160px">
1271
+ <span
1272
+ id="toolbar-with-validation-example-select-name-label"
1273
+ hidden
1274
+ >Choose one</span>
1275
+
1276
+ <button
1277
+ class="pf-c-select__toggle"
1278
+ type="button"
1279
+ id="toolbar-with-validation-example-select-name-toggle"
1280
+ aria-haspopup="true"
1281
+ aria-expanded="false"
1282
+ aria-labelledby="toolbar-with-validation-example-select-name-label toolbar-with-validation-example-select-name-toggle"
1283
+ >
1284
+ <div class="pf-c-select__toggle-wrapper">
1285
+ <span class="pf-c-select__toggle-icon">
1286
+ <i class="fas fa-filter" aria-hidden="true"></i>
1287
+ </span>
1288
+ <span class="pf-c-select__toggle-text">Description</span>
1289
+ </div>
1290
+ <span class="pf-c-select__toggle-arrow">
1291
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1292
+ </span>
1293
+ </button>
1294
+
1295
+ <ul
1296
+ class="pf-c-select__menu"
1297
+ role="listbox"
1298
+ aria-labelledby="toolbar-with-validation-example-select-name-label"
1299
+ hidden
1300
+ >
1301
+ <li role="presentation">
1302
+ <button
1303
+ class="pf-c-select__menu-item"
1304
+ role="option"
1305
+ >Running</button>
1306
+ </li>
1307
+ <li role="presentation">
1308
+ <button
1309
+ class="pf-c-select__menu-item pf-m-selected"
1310
+ role="option"
1311
+ aria-selected="true"
1312
+ >
1313
+ Stopped
1314
+ <span class="pf-c-select__menu-item-icon">
1315
+ <i class="fas fa-check" aria-hidden="true"></i>
1316
+ </span>
1317
+ </button>
1318
+ </li>
1319
+ <li role="presentation">
1320
+ <button
1321
+ class="pf-c-select__menu-item"
1322
+ role="option"
1323
+ >Down</button>
1324
+ </li>
1325
+ <li role="presentation">
1326
+ <button
1327
+ class="pf-c-select__menu-item"
1328
+ role="option"
1329
+ >Degraded</button>
1330
+ </li>
1331
+ <li role="presentation">
1332
+ <button
1333
+ class="pf-c-select__menu-item"
1334
+ role="option"
1335
+ >Needs maintenance</button>
1336
+ </li>
1337
+ </ul>
1338
+ </div>
1339
+ <div class="pf-c-text-input-group">
1340
+ <div class="pf-c-text-input-group__main pf-m-icon">
1341
+ <span class="pf-c-text-input-group__text">
1342
+ <span class="pf-c-text-input-group__icon">
1343
+ <i class="fas fa-fw fa-search"></i>
1344
+ </span>
1345
+ <input
1346
+ class="pf-c-text-input-group__text-input"
1347
+ type="search"
1348
+ placeholder="Filter by Description"
1349
+ value
1350
+ aria-label="Type to filter"
1351
+ />
1352
+ </span>
1353
+ </div>
1354
+ </div>
1355
+ </div>
1356
+ </div>
1357
+ </div>
1358
+ <button class="pf-c-button pf-m-primary" type="button">Download</button>
1359
+ </div>
1360
+ <div
1361
+ class="pf-c-toolbar__expandable-content pf-m-hidden"
1362
+ id="toolbar-with-validation-example-expandable-content"
1363
+ hidden
1364
+ ></div>
1365
+ </div>
1366
+ </div>
1367
+ <div>
1368
+ <table
1369
+ class="pf-c-table pf-m-grid-md"
1370
+ role="grid"
1371
+ aria-label="This is a table with checkboxes"
1372
+ id="-table-table"
1373
+ >
1374
+ <thead>
1375
+ <tr role="row">
1376
+ <td></td>
1377
+ <th role="columnheader" scope="col">Repositories</th>
1378
+ <th role="columnheader" scope="col">Branches</th>
1379
+ <th role="columnheader" scope="col">Pull requests</th>
1380
+ <th role="columnheader" scope="col">Workspaces</th>
1381
+ <th role="columnheader" scope="col">Last commit</th>
1382
+ <td></td>
1383
+ <td></td>
1384
+ </tr>
1385
+ </thead>
1386
+
1387
+ <tbody role="rowgroup">
1388
+ <tr role="row">
1389
+ <td class="pf-c-table__check" role="cell">
1390
+ <div class="pf-c-check pf-m-standalone">
1391
+ <input
1392
+ class="pf-c-check__input"
1393
+ type="checkbox"
1394
+ name="checkrow1"
1395
+ aria-labelledby="-table-table-node1"
1396
+ />
1397
+ </div>
1398
+ </td>
1399
+ <th role="columnheader" data-label="Repository name">
1400
+ <div>
1401
+ <div id="-table-table-node1">Node 1</div>
1402
+ <a href="#">siemur/test-space</a>
1403
+ </div>
1404
+ </th>
1405
+ <td role="cell" data-label="Branches">
1406
+ <span>
1407
+ <i class="fas fa-code-branch"></i> 10
1408
+ </span>
1409
+ </td>
1410
+ <td role="cell" data-label="Pull requests">
1411
+ <span>
1412
+ <i class="fas fa-code"></i> 25
1413
+ </span>
1414
+ </td>
1415
+ <td role="cell" data-label="Workspaces">
1416
+ <span>
1417
+ <i class="fas fa-cube"></i> 5
1418
+ </span>
1419
+ </td>
1420
+ <td role="cell" data-label="Last commit">2 days ago</td>
1421
+ <td role="cell" data-label="Action">
1422
+ <a href="#">Action link</a>
1423
+ </td>
1424
+ <td class="pf-c-table__action" role="cell">
1425
+ <div class="pf-c-dropdown">
1426
+ <button
1427
+ class="pf-c-dropdown__toggle pf-m-plain"
1428
+ id="-table-table-dropdown-kebab-1-button"
1429
+ aria-expanded="false"
1430
+ type="button"
1431
+ aria-label="Actions"
1432
+ >
1433
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1434
+ </button>
1435
+ <ul
1436
+ class="pf-c-dropdown__menu pf-m-align-right"
1437
+ aria-labelledby="-table-table-dropdown-kebab-1-button"
1438
+ hidden
1439
+ >
1440
+ <li>
1441
+ <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1442
+ </li>
1443
+ <li>
1444
+ <button
1445
+ class="pf-c-dropdown__menu-item"
1446
+ type="button"
1447
+ >Action</button>
1448
+ </li>
1449
+ <li>
1450
+ <a
1451
+ class="pf-c-dropdown__menu-item pf-m-disabled"
1452
+ href="#"
1453
+ aria-disabled="true"
1454
+ tabindex="-1"
1455
+ >Disabled link</a>
1456
+ </li>
1457
+ <li>
1458
+ <button
1459
+ class="pf-c-dropdown__menu-item"
1460
+ type="button"
1461
+ disabled
1462
+ >Disabled action</button>
1463
+ </li>
1464
+ <li class="pf-c-divider" role="separator"></li>
1465
+ <li>
1466
+ <a
1467
+ class="pf-c-dropdown__menu-item"
1468
+ href="#"
1469
+ >Separated link</a>
1470
+ </li>
1471
+ </ul>
1472
+ </div>
1473
+ </td>
1474
+ </tr>
1475
+
1476
+ <tr role="row">
1477
+ <td class="pf-c-table__check" role="cell">
1478
+ <div class="pf-c-check pf-m-standalone">
1479
+ <input
1480
+ class="pf-c-check__input"
1481
+ type="checkbox"
1482
+ name="checkrow2"
1483
+ aria-labelledby="-table-table-node2"
1484
+ />
1485
+ </div>
1486
+ </td>
1487
+ <th role="columnheader" data-label="Repository name">
1488
+ <div>
1489
+ <div id="-table-table-node2">Node 2</div>
1490
+ <a href="#">siemur/test-space</a>
1491
+ </div>
1492
+ </th>
1493
+ <td role="cell" data-label="Branches">
1494
+ <span>
1495
+ <i class="fas fa-code-branch"></i> 8
1496
+ </span>
1497
+ </td>
1498
+ <td role="cell" data-label="Pull requests">
1499
+ <span>
1500
+ <i class="fas fa-code"></i> 30
1501
+ </span>
1502
+ </td>
1503
+ <td role="cell" data-label="Workspaces">
1504
+ <span>
1505
+ <i class="fas fa-cube"></i> 2
1506
+ </span>
1507
+ </td>
1508
+ <td role="cell" data-label="Last commit">2 days ago</td>
1509
+ <td role="cell" data-label="Action">
1510
+ <a href="#">Action link</a>
1511
+ </td>
1512
+ <td class="pf-c-table__action" role="cell">
1513
+ <div class="pf-c-dropdown">
1514
+ <button
1515
+ class="pf-c-dropdown__toggle pf-m-plain"
1516
+ id="-table-table-dropdown-kebab-2-button"
1517
+ aria-expanded="false"
1518
+ type="button"
1519
+ aria-label="Actions"
1520
+ >
1521
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1522
+ </button>
1523
+ <ul
1524
+ class="pf-c-dropdown__menu pf-m-align-right"
1525
+ aria-labelledby="-table-table-dropdown-kebab-2-button"
1526
+ hidden
1527
+ >
1528
+ <li>
1529
+ <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1530
+ </li>
1531
+ <li>
1532
+ <button
1533
+ class="pf-c-dropdown__menu-item"
1534
+ type="button"
1535
+ >Action</button>
1536
+ </li>
1537
+ <li>
1538
+ <a
1539
+ class="pf-c-dropdown__menu-item pf-m-disabled"
1540
+ href="#"
1541
+ aria-disabled="true"
1542
+ tabindex="-1"
1543
+ >Disabled link</a>
1544
+ </li>
1545
+ <li>
1546
+ <button
1547
+ class="pf-c-dropdown__menu-item"
1548
+ type="button"
1549
+ disabled
1550
+ >Disabled action</button>
1551
+ </li>
1552
+ <li class="pf-c-divider" role="separator"></li>
1553
+ <li>
1554
+ <a
1555
+ class="pf-c-dropdown__menu-item"
1556
+ href="#"
1557
+ >Separated link</a>
1558
+ </li>
1559
+ </ul>
1560
+ </div>
1561
+ </td>
1562
+ </tr>
1563
+
1564
+ <tr role="row">
1565
+ <td class="pf-c-table__check" role="cell">
1566
+ <div class="pf-c-check pf-m-standalone">
1567
+ <input
1568
+ class="pf-c-check__input"
1569
+ type="checkbox"
1570
+ name="checkrow3"
1571
+ aria-labelledby="-table-table-node3"
1572
+ />
1573
+ </div>
1574
+ </td>
1575
+ <th role="columnheader" data-label="Repository name">
1576
+ <div>
1577
+ <div id="-table-table-node3">Node 3</div>
1578
+ <a href="#">siemur/test-space</a>
1579
+ </div>
1580
+ </th>
1581
+ <td role="cell" data-label="Branches">
1582
+ <span>
1583
+ <i class="fas fa-code-branch"></i> 12
1584
+ </span>
1585
+ </td>
1586
+ <td role="cell" data-label="Pull requests">
1587
+ <span>
1588
+ <i class="fas fa-code"></i> 48
1589
+ </span>
1590
+ </td>
1591
+ <td role="cell" data-label="Workspaces">
1592
+ <span>
1593
+ <i class="fas fa-cube"></i> 13
1594
+ </span>
1595
+ </td>
1596
+ <td role="cell" data-label="Last commit">30 days ago</td>
1597
+ <td role="cell" data-label="Action">
1598
+ <a href="#">Action link</a>
1599
+ </td>
1600
+ <td class="pf-c-table__action" role="cell">
1601
+ <div class="pf-c-dropdown">
1602
+ <button
1603
+ class="pf-c-dropdown__toggle pf-m-plain"
1604
+ id="-table-table-dropdown-kebab-3-button"
1605
+ aria-expanded="false"
1606
+ type="button"
1607
+ aria-label="Actions"
1608
+ >
1609
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1610
+ </button>
1611
+ <ul
1612
+ class="pf-c-dropdown__menu pf-m-align-right"
1613
+ aria-labelledby="-table-table-dropdown-kebab-3-button"
1614
+ hidden
1615
+ >
1616
+ <li>
1617
+ <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1618
+ </li>
1619
+ <li>
1620
+ <button
1621
+ class="pf-c-dropdown__menu-item"
1622
+ type="button"
1623
+ >Action</button>
1624
+ </li>
1625
+ <li>
1626
+ <a
1627
+ class="pf-c-dropdown__menu-item pf-m-disabled"
1628
+ href="#"
1629
+ aria-disabled="true"
1630
+ tabindex="-1"
1631
+ >Disabled link</a>
1632
+ </li>
1633
+ <li>
1634
+ <button
1635
+ class="pf-c-dropdown__menu-item"
1636
+ type="button"
1637
+ disabled
1638
+ >Disabled action</button>
1639
+ </li>
1640
+ <li class="pf-c-divider" role="separator"></li>
1641
+ <li>
1642
+ <a
1643
+ class="pf-c-dropdown__menu-item"
1644
+ href="#"
1645
+ >Separated link</a>
1646
+ </li>
1647
+ </ul>
1648
+ </div>
1649
+ </td>
1650
+ </tr>
1651
+
1652
+ <tr role="row">
1653
+ <td class="pf-c-table__check" role="cell">
1654
+ <div class="pf-c-check pf-m-standalone">
1655
+ <input
1656
+ class="pf-c-check__input"
1657
+ type="checkbox"
1658
+ name="checkrow4"
1659
+ aria-labelledby="-table-table-node4"
1660
+ />
1661
+ </div>
1662
+ </td>
1663
+ <th role="columnheader" data-label="Repository name">
1664
+ <div>
1665
+ <div id="-table-table-node4">Node 4</div>
1666
+ <a href="#">siemur/test-space</a>
1667
+ </div>
1668
+ </th>
1669
+ <td role="cell" data-label="Branches">
1670
+ <span>
1671
+ <i class="fas fa-code-branch"></i> 3
1672
+ </span>
1673
+ </td>
1674
+ <td role="cell" data-label="Pull requests">
1675
+ <span>
1676
+ <i class="fas fa-code"></i> 8
1677
+ </span>
1678
+ </td>
1679
+ <td role="cell" data-label="Workspaces">
1680
+ <span>
1681
+ <i class="fas fa-cube"></i> 20
1682
+ </span>
1683
+ </td>
1684
+ <td role="cell" data-label="Last commit">8 days ago</td>
1685
+ <td role="cell" data-label="Action">
1686
+ <a href="#">Action link</a>
1687
+ </td>
1688
+ <td class="pf-c-table__action" role="cell">
1689
+ <div class="pf-c-dropdown">
1690
+ <button
1691
+ class="pf-c-dropdown__toggle pf-m-plain"
1692
+ id="-table-table-dropdown-kebab-4-button"
1693
+ aria-expanded="false"
1694
+ type="button"
1695
+ aria-label="Actions"
1696
+ >
1697
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1698
+ </button>
1699
+ <ul
1700
+ class="pf-c-dropdown__menu pf-m-align-right"
1701
+ aria-labelledby="-table-table-dropdown-kebab-4-button"
1702
+ hidden
1703
+ >
1704
+ <li>
1705
+ <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1706
+ </li>
1707
+ <li>
1708
+ <button
1709
+ class="pf-c-dropdown__menu-item"
1710
+ type="button"
1711
+ >Action</button>
1712
+ </li>
1713
+ <li>
1714
+ <a
1715
+ class="pf-c-dropdown__menu-item pf-m-disabled"
1716
+ href="#"
1717
+ aria-disabled="true"
1718
+ tabindex="-1"
1719
+ >Disabled link</a>
1720
+ </li>
1721
+ <li>
1722
+ <button
1723
+ class="pf-c-dropdown__menu-item"
1724
+ type="button"
1725
+ disabled
1726
+ >Disabled action</button>
1727
+ </li>
1728
+ <li class="pf-c-divider" role="separator"></li>
1729
+ <li>
1730
+ <a
1731
+ class="pf-c-dropdown__menu-item"
1732
+ href="#"
1733
+ >Separated link</a>
1734
+ </li>
1735
+ </ul>
1736
+ </div>
1737
+ </td>
1738
+ </tr>
1739
+
1740
+ <tr role="row">
1741
+ <td class="pf-c-table__check" role="cell">
1742
+ <div class="pf-c-check pf-m-standalone">
1743
+ <input
1744
+ class="pf-c-check__input"
1745
+ type="checkbox"
1746
+ name="checkrow5"
1747
+ aria-labelledby="-table-table-node5"
1748
+ />
1749
+ </div>
1750
+ </td>
1751
+ <td role="cell" data-label="Repository name">
1752
+ <div>
1753
+ <div id="-table-table-node5">Node 5</div>
1754
+ <a href="#">siemur/test-space</a>
1755
+ </div>
1756
+ </td>
1757
+ <td role="cell" data-label="Branches">
1758
+ <span>
1759
+ <i class="fas fa-code-branch"></i> 34
1760
+ </span>
1761
+ </td>
1762
+ <td role="cell" data-label="Pull requests">
1763
+ <span>
1764
+ <i class="fas fa-code"></i> 21
1765
+ </span>
1766
+ </td>
1767
+ <td role="cell" data-label="Workspaces">
1768
+ <span>
1769
+ <i class="fas fa-cube"></i> 26
1770
+ </span>
1771
+ </td>
1772
+ <td role="cell" data-label="Last commit">2 days ago</td>
1773
+ <td role="cell" data-label="Action">
1774
+ <a href="#">Action link</a>
1775
+ </td>
1776
+ <td class="pf-c-table__action" role="cell">
1777
+ <div class="pf-c-dropdown">
183
1778
  <button
184
- class="pf-c-options-menu__menu-item"
1779
+ class="pf-c-dropdown__toggle pf-m-plain"
1780
+ id="-table-table-dropdown-kebab-5-button"
1781
+ aria-expanded="false"
185
1782
  type="button"
186
- >5 per page</button>
187
- </li>
188
- <li>
189
- <button class="pf-c-options-menu__menu-item" type="button">
190
- 10 per page
191
- <div class="pf-c-options-menu__menu-item-icon">
192
- <i class="fas fa-check" aria-hidden="true"></i>
193
- </div>
1783
+ aria-label="Actions"
1784
+ >
1785
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
194
1786
  </button>
195
- </li>
196
- <li>
197
- <button
198
- class="pf-c-options-menu__menu-item"
199
- type="button"
200
- >20 per page</button>
201
- </li>
202
- </ul>
203
- </div>
204
- <nav class="pf-c-pagination__nav" aria-label="Pagination">
205
- <div class="pf-c-pagination__nav-control pf-m-prev">
206
- <button
207
- class="pf-c-button pf-m-plain"
208
- type="button"
209
- disabled
210
- aria-label="Go to previous page"
211
- >
212
- <i class="fas fa-angle-left" aria-hidden="true"></i>
213
- </button>
214
- </div>
215
- <div class="pf-c-pagination__nav-control pf-m-next">
216
- <button
217
- class="pf-c-button pf-m-plain"
218
- type="button"
219
- aria-label="Go to next page"
220
- >
221
- <i class="fas fa-angle-right" aria-hidden="true"></i>
222
- </button>
223
- </div>
224
- </nav>
225
- </div>
226
- </div>
1787
+ <ul
1788
+ class="pf-c-dropdown__menu pf-m-align-right"
1789
+ aria-labelledby="-table-table-dropdown-kebab-5-button"
1790
+ hidden
1791
+ >
1792
+ <li>
1793
+ <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1794
+ </li>
1795
+ <li>
1796
+ <button
1797
+ class="pf-c-dropdown__menu-item"
1798
+ type="button"
1799
+ >Action</button>
1800
+ </li>
1801
+ <li>
1802
+ <a
1803
+ class="pf-c-dropdown__menu-item pf-m-disabled"
1804
+ href="#"
1805
+ aria-disabled="true"
1806
+ tabindex="-1"
1807
+ >Disabled link</a>
1808
+ </li>
1809
+ <li>
1810
+ <button
1811
+ class="pf-c-dropdown__menu-item"
1812
+ type="button"
1813
+ disabled
1814
+ >Disabled action</button>
1815
+ </li>
1816
+ <li class="pf-c-divider" role="separator"></li>
1817
+ <li>
1818
+ <a
1819
+ class="pf-c-dropdown__menu-item"
1820
+ href="#"
1821
+ >Separated link</a>
1822
+ </li>
1823
+ </ul>
1824
+ </div>
1825
+ </td>
1826
+ </tr>
1827
+ </tbody>
1828
+ </table>
227
1829
  </div>
228
- </div>
229
- <div
230
- class="pf-c-toolbar__expandable-content pf-m-hidden"
231
- id="toolbar-attribute-value-search-filter-desktop-example-expandable-content"
232
- hidden
233
- ></div>
234
- </div>
1830
+ </section>
1831
+ </main>
235
1832
  </div>
236
1833
 
237
1834
  ```
@@ -404,7 +2001,6 @@ section: components
404
2001
  role="listbox"
405
2002
  aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-select-name-label"
406
2003
  hidden
407
- style="width: 175px"
408
2004
  >
409
2005
  <li role="presentation">
410
2006
  <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -443,9 +2039,9 @@ section: components
443
2039
  </span>
444
2040
  <input
445
2041
  class="pf-c-text-input-group__text-input"
446
- type="text"
447
- value
2042
+ type="search"
448
2043
  placeholder="Filter by name"
2044
+ value
449
2045
  aria-label="Type to filter"
450
2046
  />
451
2047
  </span>
@@ -459,7 +2055,7 @@ section: components
459
2055
 
460
2056
  ```
461
2057
 
462
- ### Toolbar attribute value single select filter desktop
2058
+ ### Toolbar attribute value single select filter on desktop
463
2059
 
464
2060
  ```html
465
2061
  <div
@@ -997,7 +2593,7 @@ section: components
997
2593
 
998
2594
  ```
999
2595
 
1000
- ### Toolbar attribute value checkbox select filter desktop
2596
+ ### Toolbar attribute value checkbox select filter on desktop
1001
2597
 
1002
2598
  ```html
1003
2599
  <div
@@ -1324,53 +2920,65 @@ section: components
1324
2920
  >
1325
2921
  <li class="pf-c-chip-group__list-item">
1326
2922
  <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>
2923
+ <span class="pf-c-chip__content">
2924
+ <span
2925
+ class="pf-c-chip__text"
2926
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-group-chip-one"
2927
+ >Canceled</span>
2928
+ </span>
2929
+ <span class="pf-c-chip__actions">
2930
+ <button
2931
+ class="pf-c-button pf-m-plain"
2932
+ type="button"
2933
+ 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"
2934
+ aria-label="Remove"
2935
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-one"
2936
+ >
2937
+ <i class="fas fa-times" aria-hidden="true"></i>
2938
+ </button>
2939
+ </span>
1340
2940
  </div>
1341
2941
  </li>
1342
2942
  <li class="pf-c-chip-group__list-item">
1343
2943
  <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>
2944
+ <span class="pf-c-chip__content">
2945
+ <span
2946
+ class="pf-c-chip__text"
2947
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-two"
2948
+ >Paused</span>
2949
+ </span>
2950
+ <span class="pf-c-chip__actions">
2951
+ <button
2952
+ class="pf-c-button pf-m-plain"
2953
+ type="button"
2954
+ 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"
2955
+ aria-label="Remove"
2956
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-two"
2957
+ >
2958
+ <i class="fas fa-times" aria-hidden="true"></i>
2959
+ </button>
2960
+ </span>
1357
2961
  </div>
1358
2962
  </li>
1359
2963
  <li class="pf-c-chip-group__list-item">
1360
2964
  <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>
2965
+ <span class="pf-c-chip__content">
2966
+ <span
2967
+ class="pf-c-chip__text"
2968
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-three"
2969
+ >Restarted</span>
2970
+ </span>
2971
+ <span class="pf-c-chip__actions">
2972
+ <button
2973
+ class="pf-c-button pf-m-plain"
2974
+ type="button"
2975
+ 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"
2976
+ aria-label="Remove"
2977
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-three"
2978
+ >
2979
+ <i class="fas fa-times" aria-hidden="true"></i>
2980
+ </button>
2981
+ </span>
1374
2982
  </div>
1375
2983
  </li>
1376
2984
  </ul>
@@ -1702,53 +3310,65 @@ section: components
1702
3310
  >
1703
3311
  <li class="pf-c-chip-group__list-item">
1704
3312
  <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>
3313
+ <span class="pf-c-chip__content">
3314
+ <span
3315
+ class="pf-c-chip__text"
3316
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-one"
3317
+ >Canceled</span>
3318
+ </span>
3319
+ <span class="pf-c-chip__actions">
3320
+ <button
3321
+ class="pf-c-button pf-m-plain"
3322
+ type="button"
3323
+ 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"
3324
+ aria-label="Remove"
3325
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-one"
3326
+ >
3327
+ <i class="fas fa-times" aria-hidden="true"></i>
3328
+ </button>
3329
+ </span>
1718
3330
  </div>
1719
3331
  </li>
1720
3332
  <li class="pf-c-chip-group__list-item">
1721
3333
  <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>
3334
+ <span class="pf-c-chip__content">
3335
+ <span
3336
+ class="pf-c-chip__text"
3337
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-two"
3338
+ >Paused</span>
3339
+ </span>
3340
+ <span class="pf-c-chip__actions">
3341
+ <button
3342
+ class="pf-c-button pf-m-plain"
3343
+ type="button"
3344
+ 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"
3345
+ aria-label="Remove"
3346
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-two"
3347
+ >
3348
+ <i class="fas fa-times" aria-hidden="true"></i>
3349
+ </button>
3350
+ </span>
1735
3351
  </div>
1736
3352
  </li>
1737
3353
  <li class="pf-c-chip-group__list-item">
1738
3354
  <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>
3355
+ <span class="pf-c-chip__content">
3356
+ <span
3357
+ class="pf-c-chip__text"
3358
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-three"
3359
+ >Restarted</span>
3360
+ </span>
3361
+ <span class="pf-c-chip__actions">
3362
+ <button
3363
+ class="pf-c-button pf-m-plain"
3364
+ type="button"
3365
+ 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"
3366
+ aria-label="Remove"
3367
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-three"
3368
+ >
3369
+ <i class="fas fa-times" aria-hidden="true"></i>
3370
+ </button>
3371
+ </span>
1752
3372
  </div>
1753
3373
  </li>
1754
3374
  </ul>
@@ -1863,7 +3483,7 @@ section: components
1863
3483
  </div>
1864
3484
  <section class="pf-c-app-launcher__group">
1865
3485
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
1866
- <ul>
3486
+ <ul role="list">
1867
3487
  <li
1868
3488
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1869
3489
  >
@@ -1915,7 +3535,7 @@ section: components
1915
3535
  <hr class="pf-c-divider" />
1916
3536
  <section class="pf-c-app-launcher__group">
1917
3537
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
1918
- <ul>
3538
+ <ul role="list">
1919
3539
  <li
1920
3540
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
1921
3541
  >
@@ -2570,7 +4190,7 @@ section: components
2570
4190
  id="toolbar-pagination-management-example-primary-nav"
2571
4191
  aria-label="Global"
2572
4192
  >
2573
- <ul class="pf-c-nav__list">
4193
+ <ul class="pf-c-nav__list" role="list">
2574
4194
  <li class="pf-c-nav__item">
2575
4195
  <a href="#" class="pf-c-nav__link">System panel</a>
2576
4196
  </li>
@@ -2602,7 +4222,7 @@ section: components
2602
4222
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
2603
4223
  <div class="pf-c-page__main-body">
2604
4224
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
2605
- <ol class="pf-c-breadcrumb__list">
4225
+ <ol class="pf-c-breadcrumb__list" role="list">
2606
4226
  <li class="pf-c-breadcrumb__item">
2607
4227
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
2608
4228
  </li>
@@ -2698,7 +4318,6 @@ section: components
2698
4318
  role="listbox"
2699
4319
  aria-labelledby="toolbar-pagination-management-example-toolbar-select-name-label"
2700
4320
  hidden
2701
- style="width: 175px"
2702
4321
  >
2703
4322
  <li role="presentation">
2704
4323
  <button
@@ -2746,9 +4365,9 @@ section: components
2746
4365
  </span>
2747
4366
  <input
2748
4367
  class="pf-c-text-input-group__text-input"
2749
- type="text"
2750
- value
4368
+ type="search"
2751
4369
  placeholder="Filter by name"
4370
+ value
2752
4371
  aria-label="Type to filter"
2753
4372
  />
2754
4373
  </span>
@@ -2900,11 +4519,14 @@ section: components
2900
4519
  <tbody role="rowgroup">
2901
4520
  <tr role="row">
2902
4521
  <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
- />
4522
+ <div class="pf-c-check pf-m-standalone">
4523
+ <input
4524
+ class="pf-c-check__input"
4525
+ type="checkbox"
4526
+ name="checkrow1"
4527
+ aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node1"
4528
+ />
4529
+ </div>
2908
4530
  </td>
2909
4531
  <th role="columnheader" data-label="Repository name">
2910
4532
  <div>
@@ -2987,11 +4609,14 @@ section: components
2987
4609
 
2988
4610
  <tr role="row">
2989
4611
  <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
- />
4612
+ <div class="pf-c-check pf-m-standalone">
4613
+ <input
4614
+ class="pf-c-check__input"
4615
+ type="checkbox"
4616
+ name="checkrow2"
4617
+ aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node2"
4618
+ />
4619
+ </div>
2995
4620
  </td>
2996
4621
  <th role="columnheader" data-label="Repository name">
2997
4622
  <div>
@@ -3074,11 +4699,14 @@ section: components
3074
4699
 
3075
4700
  <tr role="row">
3076
4701
  <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
- />
4702
+ <div class="pf-c-check pf-m-standalone">
4703
+ <input
4704
+ class="pf-c-check__input"
4705
+ type="checkbox"
4706
+ name="checkrow3"
4707
+ aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node3"
4708
+ />
4709
+ </div>
3082
4710
  </td>
3083
4711
  <th role="columnheader" data-label="Repository name">
3084
4712
  <div>
@@ -3161,11 +4789,14 @@ section: components
3161
4789
 
3162
4790
  <tr role="row">
3163
4791
  <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
- />
4792
+ <div class="pf-c-check pf-m-standalone">
4793
+ <input
4794
+ class="pf-c-check__input"
4795
+ type="checkbox"
4796
+ name="checkrow4"
4797
+ aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node4"
4798
+ />
4799
+ </div>
3169
4800
  </td>
3170
4801
  <th role="columnheader" data-label="Repository name">
3171
4802
  <div>
@@ -3248,11 +4879,14 @@ section: components
3248
4879
 
3249
4880
  <tr role="row">
3250
4881
  <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
- />
4882
+ <div class="pf-c-check pf-m-standalone">
4883
+ <input
4884
+ class="pf-c-check__input"
4885
+ type="checkbox"
4886
+ name="checkrow5"
4887
+ aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node5"
4888
+ />
4889
+ </div>
3256
4890
  </td>
3257
4891
  <td role="cell" data-label="Repository name">
3258
4892
  <div>