@patternfly/patternfly 5.0.0-alpha.2 → 5.0.0-alpha.21

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 (224) hide show
  1. package/README.md +1 -1
  2. package/RELEASE-NOTES.md +47 -0
  3. package/assets/icons/iconUnicodes.json +1 -0
  4. package/assets/pficon/pficon.scss +6 -0
  5. package/assets/pficon/pficon.woff +0 -0
  6. package/assets/pficon/pficon.woff2 +0 -0
  7. package/base/_chart-globals.scss +0 -4
  8. package/base/_common.scss +0 -22
  9. package/base/patternfly-common.css +0 -10
  10. package/base/patternfly-icons.css +5 -1
  11. package/base/patternfly-pf-icons.css +5 -1
  12. package/components/Accordion/accordion.css +2 -0
  13. package/components/Accordion/accordion.scss +2 -0
  14. package/components/AppLauncher/app-launcher.css +2 -0
  15. package/components/AppLauncher/app-launcher.scss +2 -0
  16. package/components/Breadcrumb/breadcrumb.css +2 -0
  17. package/components/Breadcrumb/breadcrumb.scss +2 -0
  18. package/components/CalendarMonth/calendar-month.css +1 -1
  19. package/components/CalendarMonth/calendar-month.scss +1 -1
  20. package/components/Card/card.css +9 -12
  21. package/components/Card/card.scss +11 -17
  22. package/components/ChipGroup/chip-group.css +27 -17
  23. package/components/ChipGroup/chip-group.scss +36 -22
  24. package/components/Content/content.css +6 -0
  25. package/components/Content/content.scss +8 -0
  26. package/components/ContextSelector/context-selector.css +5 -1
  27. package/components/ContextSelector/context-selector.scss +6 -2
  28. package/components/DataList/data-list.css +2 -1
  29. package/components/DataList/data-list.scss +2 -1
  30. package/components/Drawer/drawer.css +13 -14
  31. package/components/Drawer/drawer.scss +0 -1
  32. package/components/Dropdown/dropdown.css +27 -10
  33. package/components/Dropdown/dropdown.scss +22 -0
  34. package/components/EmptyState/empty-state.css +46 -52
  35. package/components/EmptyState/empty-state.scss +58 -57
  36. package/components/ExpandableSection/expandable-section.css +2 -0
  37. package/components/ExpandableSection/expandable-section.scss +2 -0
  38. package/components/FormControl/form-control.css +1 -1
  39. package/components/FormControl/themes/dark/form-control.scss +1 -1
  40. package/components/InputGroup/input-group.css +14 -0
  41. package/components/InputGroup/input-group.scss +9 -0
  42. package/components/InputGroup/themes/dark/input-group.scss +8 -0
  43. package/components/Label/label.css +2 -0
  44. package/components/Label/label.scss +2 -0
  45. package/components/LabelGroup/label-group.css +26 -22
  46. package/components/LabelGroup/label-group.scss +31 -26
  47. package/components/Login/login.css +1 -1
  48. package/components/Menu/menu.css +7 -0
  49. package/components/Menu/menu.scss +8 -0
  50. package/components/MenuToggle/menu-toggle.css +2 -0
  51. package/components/MenuToggle/menu-toggle.scss +2 -0
  52. package/components/ModalBox/modal-box.css +9 -8
  53. package/components/ModalBox/modal-box.scss +11 -11
  54. package/components/Page/page.css +60 -60
  55. package/components/Pagination/pagination.css +122 -2
  56. package/components/Pagination/pagination.scss +24 -1
  57. package/components/Popover/popover.css +2 -7
  58. package/components/Popover/themes/dark/popover.scss +2 -8
  59. package/components/Progress/progress.css +5 -2
  60. package/components/Progress/progress.scss +5 -2
  61. package/components/SearchInput/search-input.css +2 -0
  62. package/components/SearchInput/search-input.scss +2 -0
  63. package/components/Slider/slider.css +0 -7
  64. package/components/Slider/slider.scss +0 -9
  65. package/components/Table/table-grid.css +28 -28
  66. package/components/Table/table-tree-view.css +4 -4
  67. package/components/Table/table.css +4 -0
  68. package/components/Table/table.scss +4 -0
  69. package/components/Tabs/tabs.css +0 -4
  70. package/components/Tabs/tabs.scss +0 -7
  71. package/components/TextInputGroup/text-input-group.css +4 -2
  72. package/components/TextInputGroup/text-input-group.scss +4 -3
  73. package/components/Toolbar/toolbar.css +65 -37
  74. package/components/Toolbar/toolbar.scss +37 -3
  75. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  76. package/components/Tooltip/tooltip.css +7 -12
  77. package/components/Tooltip/tooltip.scss +6 -3
  78. package/components/TreeView/tree-view.css +7 -15
  79. package/components/TreeView/tree-view.scss +7 -18
  80. package/components/Wizard/wizard.css +2 -0
  81. package/components/Wizard/wizard.scss +2 -0
  82. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -13
  83. package/docs/components/Accordion/examples/Accordion.md +12 -12
  84. package/docs/components/ActionList/examples/ActionList.md +6 -6
  85. package/docs/components/Alert/examples/Alert.md +19 -19
  86. package/docs/components/AlertGroup/examples/AlertGroup.md +12 -12
  87. package/docs/components/AppLauncher/examples/application-launcher.md +51 -46
  88. package/docs/components/Avatar/examples/Avatar.md +11 -11
  89. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  90. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  91. package/docs/components/BackgroundImage/examples/BackgroundImage.md +4 -4
  92. package/docs/components/Badge/examples/Badge.md +5 -5
  93. package/docs/components/Banner/examples/Banner.md +8 -8
  94. package/docs/components/Brand/examples/Brand.md +9 -9
  95. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  96. package/docs/components/Button/examples/Button.md +35 -35
  97. package/docs/components/CalendarMonth/examples/CalendarMonth.md +32 -32
  98. package/docs/components/Card/examples/Card.md +61 -44
  99. package/docs/components/Check/examples/Check.md +15 -19
  100. package/docs/components/Chip/examples/Chip.md +13 -13
  101. package/docs/components/ChipGroup/examples/ChipGroup.md +15 -344
  102. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  103. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  104. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  105. package/docs/components/Content/examples/Content.md +37 -9
  106. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  107. package/docs/components/ContextSelector/examples/context-selector.md +86 -80
  108. package/docs/components/DataList/examples/DataList.md +187 -148
  109. package/docs/components/DatePicker/examples/DatePicker.md +10 -10
  110. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  111. package/docs/components/Divider/examples/Divider.md +10 -10
  112. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  113. package/docs/components/Drawer/examples/Drawer.md +43 -43
  114. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  115. package/docs/components/Dropdown/examples/Dropdown.md +311 -71
  116. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  117. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  118. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  119. package/docs/components/FileUpload/examples/FileUpload.md +8 -8
  120. package/docs/components/Form/examples/Form.md +64 -64
  121. package/docs/components/FormControl/examples/FormControl.md +20 -20
  122. package/docs/components/HelperText/examples/HelperText.md +12 -12
  123. package/docs/components/Hint/examples/Hint.md +7 -7
  124. package/docs/components/Icon/examples/Icon.md +10 -10
  125. package/docs/components/InlineEdit/examples/InlineEdit.md +24 -24
  126. package/docs/components/InputGroup/examples/InputGroup.md +10 -9
  127. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  128. package/docs/components/Label/examples/Label.md +31 -31
  129. package/docs/components/LabelGroup/examples/LabelGroup.md +24 -36
  130. package/docs/components/List/examples/List.md +18 -18
  131. package/docs/components/LogViewer/examples/LogViewer.md +69 -69
  132. package/docs/components/Login/examples/Login.md +32 -32
  133. package/docs/components/Masthead/examples/masthead.md +9 -9
  134. package/docs/components/Menu/examples/Menu.md +82 -80
  135. package/docs/components/MenuToggle/examples/MenuToggle.md +28 -28
  136. package/docs/components/ModalBox/examples/ModalBox.md +106 -85
  137. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +25 -25
  138. package/docs/components/Nav/examples/Navigation.md +69 -69
  139. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  140. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +44 -44
  141. package/docs/components/NumberInput/examples/NumberInput.md +12 -12
  142. package/docs/components/OptionsMenu/examples/options-menu.md +27 -28
  143. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  144. package/docs/components/Page/examples/Page.md +54 -54
  145. package/docs/components/Pagination/examples/Pagination.md +129 -30
  146. package/docs/components/Panel/examples/Panel.md +10 -10
  147. package/docs/components/Popover/examples/Popover.md +34 -34
  148. package/docs/components/Progress/examples/Progress.md +31 -60
  149. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -38
  150. package/docs/components/Radio/examples/Radio.md +11 -11
  151. package/docs/components/SearchInput/examples/SearchInput.md +34 -34
  152. package/docs/components/Select/examples/Select.md +143 -143
  153. package/docs/components/Sidebar/examples/Sidebar.md +14 -14
  154. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  155. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  156. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  157. package/docs/components/Slider/examples/Slider.md +30 -30
  158. package/docs/components/Spinner/examples/Spinner.md +24 -24
  159. package/docs/components/Switch/examples/Switch.md +19 -19
  160. package/docs/components/TabContent/examples/TabContent.md +13 -13
  161. package/docs/components/Table/examples/Table.md +1272 -855
  162. package/docs/components/Tabs/examples/Tabs.md +149 -149
  163. package/docs/components/TextInputGroup/examples/TextInputGroup.md +19 -19
  164. package/docs/components/Tile/examples/Tile.md +15 -15
  165. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  166. package/docs/components/Title/examples/Title.md +17 -17
  167. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  168. package/docs/components/Toolbar/examples/Toolbar.md +165 -144
  169. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  170. package/docs/components/TreeView/examples/TreeView.md +34 -34
  171. package/docs/components/Truncate/examples/Truncate.md +4 -4
  172. package/docs/components/Wizard/examples/Wizard.md +63 -70
  173. package/docs/demos/AboutModal/examples/AboutModal.md +4 -4
  174. package/docs/demos/Alert/examples/Alert.md +13 -13
  175. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  176. package/docs/demos/Banner/examples/Banner.md +10 -11
  177. package/docs/demos/Card/examples/Card.md +151 -116
  178. package/docs/demos/CardView/examples/CardView.md +16 -15
  179. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  180. package/docs/demos/Dashboard/examples/Dashboard.md +10 -9
  181. package/docs/demos/DataList/examples/DataList.md +160 -111
  182. package/docs/demos/DescriptionList/examples/DescriptionList.md +12 -13
  183. package/docs/demos/Drawer/examples/Drawer.md +20 -20
  184. package/docs/demos/HelperText/examples/HelperText.md +8 -9
  185. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  186. package/docs/demos/Masthead/examples/Masthead.md +32 -35
  187. package/docs/demos/Modal/examples/Modal.md +54 -66
  188. package/docs/demos/Nav/examples/Nav.md +720 -767
  189. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +40 -28
  190. package/docs/demos/Page/examples/Page.md +37 -37
  191. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +32 -33
  192. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +53 -49
  193. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  194. package/docs/demos/Table/examples/Table.md +522 -378
  195. package/docs/demos/Tabs/examples/Tabs.md +120 -601
  196. package/docs/demos/Toolbar/examples/Toolbar.md +1781 -171
  197. package/docs/demos/Wizard/examples/Wizard.md +229 -225
  198. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  199. package/docs/layouts/Flex/examples/Flex.md +98 -98
  200. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  201. package/docs/layouts/Grid/examples/Grid.md +9 -9
  202. package/docs/layouts/Level/examples/Level.md +5 -5
  203. package/docs/layouts/Split/examples/Split.md +7 -7
  204. package/docs/layouts/Stack/examples/Stack.md +6 -6
  205. package/docs/utilities/Accessibility/examples/Accessibility.md +4 -4
  206. package/docs/utilities/Alignment/examples/Alignment.md +6 -6
  207. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +12 -12
  208. package/docs/utilities/BoxShadow/examples/box-shadow.md +22 -22
  209. package/docs/utilities/Display/examples/Display.md +11 -11
  210. package/docs/utilities/Flex/examples/Flex.md +34 -34
  211. package/docs/utilities/Float/examples/Float.md +4 -4
  212. package/docs/utilities/Sizing/examples/Sizing.md +50 -50
  213. package/docs/utilities/Spacing/examples/Spacing.md +34 -34
  214. package/docs/utilities/Text/examples/Text.md +27 -27
  215. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  216. package/layouts/Grid/grid.css +5 -5
  217. package/package.json +59 -64
  218. package/patternfly-base-no-reset.css +5 -11
  219. package/patternfly-base.css +5 -11
  220. package/patternfly-no-reset.css +528 -336
  221. package/patternfly.css +528 -336
  222. package/patternfly.min.css +1 -1
  223. package/patternfly.min.css.map +1 -1
  224. package/sass-utilities/scss-variables.scss +0 -1
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>
@@ -89,149 +88,1747 @@ section: components
89
88
  </li>
90
89
  </ul>
91
90
  </div>
92
- <div class="pf-c-text-input-group">
91
+ <div class="pf-c-text-input-group" style="width: auto">
93
92
  <div class="pf-c-text-input-group__main pf-m-icon">
94
93
  <span class="pf-c-text-input-group__text">
95
94
  <span class="pf-c-text-input-group__icon">
96
95
  <i class="fas fa-fw fa-search"></i>
97
96
  </span>
98
97
  <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"
98
+ class="pf-c-text-input-group__text-input"
99
+ type="search"
100
+ placeholder="Filter by name"
101
+ value
102
+ aria-label="Type to filter"
103
+ />
104
+ </span>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ <div class="pf-c-toolbar__item pf-m-overflow-menu">
111
+ <div
112
+ class="pf-c-overflow-menu"
113
+ id="toolbar-attribute-value-search-filter-desktop-example-overflow-menu"
114
+ >
115
+ <div class="pf-c-overflow-menu__content">
116
+ <div class="pf-c-overflow-menu__group pf-m-button-group">
117
+ <div class="pf-c-overflow-menu__item">
118
+ <button class="pf-c-button pf-m-primary" type="button">Primary</button>
119
+ </div>
120
+ <div class="pf-c-overflow-menu__item">
121
+ <button
122
+ class="pf-c-button pf-m-secondary"
123
+ type="button"
124
+ >Secondary</button>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <div class="pf-c-overflow-menu__control">
130
+ <div class="pf-c-dropdown">
131
+ <button
132
+ class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
133
+ type="button"
134
+ id="toolbar-attribute-value-search-filter-desktop-example-overflow-menu-dropdown-toggle"
135
+ aria-label="Overflow menu"
136
+ aria-expanded="false"
137
+ >
138
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
139
+ </button>
140
+ <ul
141
+ class="pf-c-dropdown__menu"
142
+ aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-overflow-menu-dropdown-toggle"
143
+ hidden
144
+ >
145
+ <li>
146
+ <button class="pf-c-dropdown__menu-item">Tertiary</button>
147
+ </li>
148
+ </ul>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ <div class="pf-c-toolbar__item pf-m-pagination">
154
+ <div
155
+ class="pf-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md"
156
+ >
157
+ <div
158
+ class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
159
+ >
160
+ <div class="pf-c-options-menu">
161
+ <button
162
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
163
+ type="button"
164
+ id="toolbar-attribute-value-search-filter-desktop-example-pagination-options-menu-toggle"
165
+ aria-haspopup="listbox"
166
+ aria-expanded="false"
167
+ >
168
+ <span class="pf-c-options-menu__toggle-text">
169
+ <b>1 - 10</b>&nbsp;of&nbsp;
170
+ <b>36</b>
171
+ </span>
172
+ <div class="pf-c-options-menu__toggle-icon">
173
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
174
+ </div>
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" style="width: auto">
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"
104
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
105
1760
  </span>
106
- </div>
107
- </div>
108
- </div>
109
- </div>
110
- </div>
111
- <div class="pf-c-toolbar__item pf-m-overflow-menu">
112
- <div
113
- class="pf-c-overflow-menu"
114
- id="toolbar-attribute-value-search-filter-desktop-example-overflow-menu"
115
- >
116
- <div class="pf-c-overflow-menu__content">
117
- <div class="pf-c-overflow-menu__group pf-m-button-group">
118
- <div class="pf-c-overflow-menu__item">
119
- <button class="pf-c-button pf-m-primary" type="button">Primary</button>
120
- </div>
121
- <div class="pf-c-overflow-menu__item">
122
- <button
123
- class="pf-c-button pf-m-secondary"
124
- type="button"
125
- >Secondary</button>
126
- </div>
127
- </div>
128
- </div>
129
-
130
- <div class="pf-c-overflow-menu__control">
131
- <div class="pf-c-dropdown">
132
- <button
133
- class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
134
- type="button"
135
- id="toolbar-attribute-value-search-filter-desktop-example-overflow-menu-dropdown-toggle"
136
- aria-label="Overflow menu"
137
- aria-expanded="false"
138
- >
139
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
140
- </button>
141
- <ul
142
- class="pf-c-dropdown__menu"
143
- aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-overflow-menu-dropdown-toggle"
144
- hidden
145
- >
146
- <li>
147
- <button class="pf-c-dropdown__menu-item">Tertiary</button>
148
- </li>
149
- </ul>
150
- </div>
151
- </div>
152
- </div>
153
- </div>
154
- <div class="pf-c-toolbar__item pf-m-pagination">
155
- <div
156
- class="pf-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md"
157
- >
158
- <div
159
- class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
160
- >
161
- <div class="pf-c-options-menu">
162
- <button
163
- class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
164
- type="button"
165
- id="toolbar-attribute-value-search-filter-desktop-example-pagination-options-menu-toggle"
166
- aria-haspopup="listbox"
167
- aria-expanded="false"
168
- >
169
- <span class="pf-c-options-menu__toggle-text">
170
- <b>1 - 10</b>&nbsp;of&nbsp;
171
- <b>36</b>
1761
+ </td>
1762
+ <td role="cell" data-label="Pull requests">
1763
+ <span>
1764
+ <i class="fas fa-code"></i> 21
172
1765
  </span>
173
- <div class="pf-c-options-menu__toggle-icon">
174
- <i class="fas fa-caret-down" aria-hidden="true"></i>
175
- </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>
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>
@@ -435,7 +2031,7 @@ section: components
435
2031
  </li>
436
2032
  </ul>
437
2033
  </div>
438
- <div class="pf-c-text-input-group">
2034
+ <div class="pf-c-text-input-group" style="width: auto">
439
2035
  <div class="pf-c-text-input-group__main pf-m-icon">
440
2036
  <span class="pf-c-text-input-group__text">
441
2037
  <span class="pf-c-text-input-group__icon">
@@ -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
@@ -1863,7 +3459,7 @@ section: components
1863
3459
  </div>
1864
3460
  <section class="pf-c-app-launcher__group">
1865
3461
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
1866
- <ul>
3462
+ <ul role="list">
1867
3463
  <li
1868
3464
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1869
3465
  >
@@ -1915,7 +3511,7 @@ section: components
1915
3511
  <hr class="pf-c-divider" />
1916
3512
  <section class="pf-c-app-launcher__group">
1917
3513
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
1918
- <ul>
3514
+ <ul role="list">
1919
3515
  <li
1920
3516
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
1921
3517
  >
@@ -2570,7 +4166,7 @@ section: components
2570
4166
  id="toolbar-pagination-management-example-primary-nav"
2571
4167
  aria-label="Global"
2572
4168
  >
2573
- <ul class="pf-c-nav__list">
4169
+ <ul class="pf-c-nav__list" role="list">
2574
4170
  <li class="pf-c-nav__item">
2575
4171
  <a href="#" class="pf-c-nav__link">System panel</a>
2576
4172
  </li>
@@ -2602,7 +4198,7 @@ section: components
2602
4198
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
2603
4199
  <div class="pf-c-page__main-body">
2604
4200
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
2605
- <ol class="pf-c-breadcrumb__list">
4201
+ <ol class="pf-c-breadcrumb__list" role="list">
2606
4202
  <li class="pf-c-breadcrumb__item">
2607
4203
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
2608
4204
  </li>
@@ -2698,7 +4294,6 @@ section: components
2698
4294
  role="listbox"
2699
4295
  aria-labelledby="toolbar-pagination-management-example-toolbar-select-name-label"
2700
4296
  hidden
2701
- style="width: 175px"
2702
4297
  >
2703
4298
  <li role="presentation">
2704
4299
  <button
@@ -2738,7 +4333,7 @@ section: components
2738
4333
  </li>
2739
4334
  </ul>
2740
4335
  </div>
2741
- <div class="pf-c-text-input-group">
4336
+ <div class="pf-c-text-input-group" style="width: auto">
2742
4337
  <div class="pf-c-text-input-group__main pf-m-icon">
2743
4338
  <span class="pf-c-text-input-group__text">
2744
4339
  <span class="pf-c-text-input-group__icon">
@@ -2746,9 +4341,9 @@ section: components
2746
4341
  </span>
2747
4342
  <input
2748
4343
  class="pf-c-text-input-group__text-input"
2749
- type="text"
2750
- value
4344
+ type="search"
2751
4345
  placeholder="Filter by name"
4346
+ value
2752
4347
  aria-label="Type to filter"
2753
4348
  />
2754
4349
  </span>
@@ -2900,11 +4495,14 @@ section: components
2900
4495
  <tbody role="rowgroup">
2901
4496
  <tr role="row">
2902
4497
  <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
- />
4498
+ <div class="pf-c-check pf-m-standalone">
4499
+ <input
4500
+ class="pf-c-check__input"
4501
+ type="checkbox"
4502
+ name="checkrow1"
4503
+ aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node1"
4504
+ />
4505
+ </div>
2908
4506
  </td>
2909
4507
  <th role="columnheader" data-label="Repository name">
2910
4508
  <div>
@@ -2987,11 +4585,14 @@ section: components
2987
4585
 
2988
4586
  <tr role="row">
2989
4587
  <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
- />
4588
+ <div class="pf-c-check pf-m-standalone">
4589
+ <input
4590
+ class="pf-c-check__input"
4591
+ type="checkbox"
4592
+ name="checkrow2"
4593
+ aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node2"
4594
+ />
4595
+ </div>
2995
4596
  </td>
2996
4597
  <th role="columnheader" data-label="Repository name">
2997
4598
  <div>
@@ -3074,11 +4675,14 @@ section: components
3074
4675
 
3075
4676
  <tr role="row">
3076
4677
  <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
- />
4678
+ <div class="pf-c-check pf-m-standalone">
4679
+ <input
4680
+ class="pf-c-check__input"
4681
+ type="checkbox"
4682
+ name="checkrow3"
4683
+ aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node3"
4684
+ />
4685
+ </div>
3082
4686
  </td>
3083
4687
  <th role="columnheader" data-label="Repository name">
3084
4688
  <div>
@@ -3161,11 +4765,14 @@ section: components
3161
4765
 
3162
4766
  <tr role="row">
3163
4767
  <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
- />
4768
+ <div class="pf-c-check pf-m-standalone">
4769
+ <input
4770
+ class="pf-c-check__input"
4771
+ type="checkbox"
4772
+ name="checkrow4"
4773
+ aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node4"
4774
+ />
4775
+ </div>
3169
4776
  </td>
3170
4777
  <th role="columnheader" data-label="Repository name">
3171
4778
  <div>
@@ -3248,11 +4855,14 @@ section: components
3248
4855
 
3249
4856
  <tr role="row">
3250
4857
  <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
- />
4858
+ <div class="pf-c-check pf-m-standalone">
4859
+ <input
4860
+ class="pf-c-check__input"
4861
+ type="checkbox"
4862
+ name="checkrow5"
4863
+ aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node5"
4864
+ />
4865
+ </div>
3256
4866
  </td>
3257
4867
  <td role="cell" data-label="Repository name">
3258
4868
  <div>