@patternfly/patternfly 6.0.0-alpha.6 → 6.0.0-alpha.8

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 (261) hide show
  1. package/README.md +13 -3
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  4. package/assets/pficon/pficon.scss +6 -129
  5. package/base/_common.scss +21 -0
  6. package/base/_globals.scss +1 -1
  7. package/base/_variables.scss +7 -0
  8. package/base/patternfly-common.css +16 -2
  9. package/base/patternfly-globals.css +1 -1
  10. package/base/patternfly-icons.css +5 -1
  11. package/base/patternfly-pf-icons.css +5 -1
  12. package/base/patternfly-variables.css +277 -188
  13. package/base/tokens/_tokens-dark.scss +117 -82
  14. package/base/tokens/_tokens-default.scss +145 -109
  15. package/base/tokens/_tokens-font.scss +16 -14
  16. package/base/tokens/_tokens-palette.scss +2 -4
  17. package/components/AboutModalBox/about-modal-box.css +23 -12
  18. package/components/AboutModalBox/about-modal-box.scss +25 -12
  19. package/components/Accordion/accordion.css +33 -20
  20. package/components/Accordion/accordion.scss +32 -20
  21. package/components/ActionList/action-list.css +2 -2
  22. package/components/ActionList/action-list.scss +2 -2
  23. package/components/Alert/alert-group.css +7 -4
  24. package/components/Alert/alert-group.scss +7 -4
  25. package/components/Alert/alert.css +19 -13
  26. package/components/Alert/alert.scss +18 -13
  27. package/components/AppLauncher/app-launcher.css +32 -23
  28. package/components/AppLauncher/app-launcher.scss +32 -23
  29. package/components/BackToTop/back-to-top.css +2 -2
  30. package/components/BackToTop/back-to-top.scss +2 -2
  31. package/components/Backdrop/backdrop.css +2 -2
  32. package/components/Backdrop/backdrop.scss +2 -2
  33. package/components/BackgroundImage/background-image.css +6 -3
  34. package/components/BackgroundImage/background-image.scss +8 -3
  35. package/components/Badge/badge.css +2 -2
  36. package/components/Badge/badge.scss +2 -2
  37. package/components/Banner/banner.css +5 -5
  38. package/components/Banner/banner.scss +5 -2
  39. package/components/Breadcrumb/breadcrumb.css +9 -3
  40. package/components/Breadcrumb/breadcrumb.scss +8 -3
  41. package/components/Button/button.css +33 -21
  42. package/components/Button/button.scss +35 -23
  43. package/components/Button/themes/dark/button.scss +1 -1
  44. package/components/CalendarMonth/calendar-month.css +25 -15
  45. package/components/CalendarMonth/calendar-month.scss +23 -15
  46. package/components/Card/card.css +25 -17
  47. package/components/Card/card.scss +24 -17
  48. package/components/Check/check.css +2 -2
  49. package/components/Check/check.scss +2 -2
  50. package/components/Chip/chip-group.css +6 -6
  51. package/components/Chip/chip-group.scss +6 -6
  52. package/components/Chip/chip.css +16 -9
  53. package/components/Chip/chip.scss +17 -9
  54. package/components/ClipboardCopy/clipboard-copy.css +19 -10
  55. package/components/ClipboardCopy/clipboard-copy.scss +16 -8
  56. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +2 -2
  57. package/components/CodeBlock/code-block.css +6 -3
  58. package/components/CodeBlock/code-block.scss +6 -3
  59. package/components/CodeEditor/code-editor.css +31 -22
  60. package/components/CodeEditor/code-editor.scss +30 -21
  61. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  62. package/components/Content/content.css +33 -30
  63. package/components/Content/content.scss +33 -30
  64. package/components/ContextSelector/context-selector.css +41 -26
  65. package/components/ContextSelector/context-selector.scss +40 -25
  66. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  67. package/components/DataList/data-list-grid.css +21 -21
  68. package/components/DataList/data-list-grid.scss +3 -3
  69. package/components/DataList/data-list.css +69 -56
  70. package/components/DataList/data-list.scss +47 -35
  71. package/components/DatePicker/date-picker.css +8 -8
  72. package/components/DatePicker/date-picker.scss +8 -8
  73. package/components/DescriptionList/description-list.css +8 -5
  74. package/components/DescriptionList/description-list.scss +8 -5
  75. package/components/DragDrop/drag-drop.css +8 -8
  76. package/components/DragDrop/drag-drop.scss +8 -8
  77. package/components/Drawer/drawer.css +120 -61
  78. package/components/Drawer/drawer.scss +92 -43
  79. package/components/Dropdown/dropdown.css +75 -66
  80. package/components/Dropdown/dropdown.scss +65 -56
  81. package/components/DualListSelector/dual-list-selector.css +29 -15
  82. package/components/DualListSelector/dual-list-selector.scss +30 -15
  83. package/components/EmptyState/empty-state.css +7 -4
  84. package/components/EmptyState/empty-state.scss +7 -4
  85. package/components/ExpandableSection/expandable-section.css +17 -10
  86. package/components/ExpandableSection/expandable-section.scss +15 -10
  87. package/components/FileUpload/file-upload.css +9 -15
  88. package/components/FileUpload/file-upload.scss +9 -15
  89. package/components/Form/form.css +53 -50
  90. package/components/Form/form.scss +46 -44
  91. package/components/FormControl/form-control.css +18 -9
  92. package/components/FormControl/form-control.scss +18 -9
  93. package/components/HelperText/helper-text.css +1 -1
  94. package/components/HelperText/helper-text.scss +1 -1
  95. package/components/Hint/hint.css +9 -6
  96. package/components/Hint/hint.scss +9 -6
  97. package/components/Icon/icon.css +1 -1
  98. package/components/Icon/icon.scss +1 -1
  99. package/components/InlineEdit/inline-edit.css +4 -4
  100. package/components/InlineEdit/inline-edit.scss +4 -4
  101. package/components/InputGroup/input-group.css +12 -6
  102. package/components/InputGroup/input-group.scss +11 -5
  103. package/components/InputGroup/themes/dark/input-group.scss +1 -1
  104. package/components/JumpLinks/jump-links.css +27 -24
  105. package/components/JumpLinks/jump-links.scss +26 -24
  106. package/components/Label/label-group.css +13 -10
  107. package/components/Label/label-group.scss +13 -10
  108. package/components/Label/label.css +9 -9
  109. package/components/Label/label.scss +9 -9
  110. package/components/List/list.css +9 -9
  111. package/components/List/list.scss +9 -9
  112. package/components/LogViewer/log-viewer.css +14 -14
  113. package/components/LogViewer/log-viewer.scss +14 -14
  114. package/components/Login/login.css +36 -27
  115. package/components/Login/login.scss +36 -27
  116. package/components/Masthead/masthead.css +32 -30
  117. package/components/Masthead/masthead.scss +32 -30
  118. package/components/Menu/menu.css +79 -65
  119. package/components/Menu/menu.scss +80 -68
  120. package/components/MenuToggle/menu-toggle.css +33 -27
  121. package/components/MenuToggle/menu-toggle.scss +33 -27
  122. package/components/ModalBox/modal-box.css +19 -19
  123. package/components/ModalBox/modal-box.scss +20 -20
  124. package/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  125. package/components/MultipleFileUpload/multiple-file-upload.scss +11 -8
  126. package/components/Nav/nav.css +120 -93
  127. package/components/Nav/nav.scss +120 -93
  128. package/components/Nav/themes/dark/nav.scss +2 -2
  129. package/components/NotificationBadge/notification-badge.css +13 -7
  130. package/components/NotificationBadge/notification-badge.scss +13 -7
  131. package/components/NotificationDrawer/notification-drawer.css +32 -19
  132. package/components/NotificationDrawer/notification-drawer.scss +30 -19
  133. package/components/NumberInput/number-input.css +2 -2
  134. package/components/NumberInput/number-input.scss +2 -2
  135. package/components/OptionsMenu/options-menu.css +43 -31
  136. package/components/OptionsMenu/options-menu.scss +43 -31
  137. package/components/OverflowMenu/overflow-menu.css +2 -2
  138. package/components/OverflowMenu/overflow-menu.scss +2 -2
  139. package/components/Page/page.css +135 -77
  140. package/components/Page/page.scss +81 -52
  141. package/components/Page/themes/dark/page.scss +1 -1
  142. package/components/Pagination/pagination.css +27 -17
  143. package/components/Pagination/pagination.scss +25 -17
  144. package/components/Panel/panel.css +13 -7
  145. package/components/Panel/panel.scss +13 -7
  146. package/components/Popover/popover.css +72 -40
  147. package/components/Popover/popover.scss +95 -75
  148. package/components/Progress/progress.css +9 -7
  149. package/components/Progress/progress.scss +12 -7
  150. package/components/ProgressStepper/progress-stepper.css +26 -20
  151. package/components/ProgressStepper/progress-stepper.scss +25 -19
  152. package/components/Radio/radio.css +3 -3
  153. package/components/Radio/radio.scss +3 -3
  154. package/components/Select/select.css +56 -47
  155. package/components/Select/select.scss +56 -47
  156. package/components/Sidebar/sidebar.css +11 -5
  157. package/components/Sidebar/sidebar.scss +11 -5
  158. package/components/SimpleList/simple-list.css +10 -4
  159. package/components/SimpleList/simple-list.scss +10 -4
  160. package/components/Skeleton/skeleton.css +6 -5
  161. package/components/Skeleton/skeleton.scss +4 -5
  162. package/components/SkipToContent/skip-to-content.css +3 -3
  163. package/components/SkipToContent/skip-to-content.scss +3 -3
  164. package/components/Slider/slider.css +47 -26
  165. package/components/Slider/slider.scss +56 -28
  166. package/components/Switch/switch.css +9 -5
  167. package/components/Switch/switch.scss +10 -6
  168. package/components/TabContent/tab-content.css +4 -1
  169. package/components/TabContent/tab-content.scss +4 -1
  170. package/components/Table/table-grid.css +264 -203
  171. package/components/Table/table-grid.scss +61 -47
  172. package/components/Table/table-scrollable.css +4 -4
  173. package/components/Table/table-scrollable.scss +6 -4
  174. package/components/Table/table-tree-view.css +112 -105
  175. package/components/Table/table-tree-view.scss +38 -33
  176. package/components/Table/table.css +92 -70
  177. package/components/Table/table.scss +90 -70
  178. package/components/Tabs/tabs.css +76 -48
  179. package/components/Tabs/tabs.scss +74 -48
  180. package/components/TextInputGroup/text-input-group.css +15 -15
  181. package/components/TextInputGroup/text-input-group.scss +15 -15
  182. package/components/Tile/tile.css +10 -10
  183. package/components/Tile/tile.scss +10 -10
  184. package/components/ToggleGroup/toggle-group.css +14 -11
  185. package/components/ToggleGroup/toggle-group.scss +14 -11
  186. package/components/Toolbar/toolbar.css +44 -41
  187. package/components/Toolbar/toolbar.scss +26 -21
  188. package/components/Tooltip/tooltip.css +60 -28
  189. package/components/Tooltip/tooltip.scss +76 -56
  190. package/components/TreeView/tree-view.css +48 -27
  191. package/components/TreeView/tree-view.scss +50 -28
  192. package/components/Truncate/truncate.css +9 -0
  193. package/components/Truncate/truncate.scss +16 -3
  194. package/components/Wizard/wizard.css +57 -36
  195. package/components/Wizard/wizard.scss +57 -36
  196. package/docs/components/Button/examples/Button.css +2 -2
  197. package/docs/components/Button/examples/Button.md +15 -3
  198. package/docs/components/Card/examples/Card.md +15 -15
  199. package/docs/components/Check/examples/Check.md +71 -59
  200. package/docs/components/Chip/examples/Chip.md +1 -1
  201. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  202. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  203. package/docs/components/DragDrop/examples/DragDrop.css +2 -2
  204. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  205. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  206. package/docs/components/Label/examples/Label.md +1 -1
  207. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  208. package/docs/components/LogViewer/examples/LogViewer.md +120 -30
  209. package/docs/components/Menu/examples/Menu.css +8 -0
  210. package/docs/components/Menu/examples/Menu.md +90 -73
  211. package/docs/components/MenuToggle/examples/MenuToggle.md +60 -39
  212. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  213. package/docs/components/Nav/examples/Navigation.css +4 -21
  214. package/docs/components/Nav/examples/Navigation.md +99 -0
  215. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  216. package/docs/components/Popover/examples/Popover.css +4 -9
  217. package/docs/components/Radio/examples/Radio.md +63 -55
  218. package/docs/components/Select/deprecated/Select.md +184 -177
  219. package/docs/components/Table/examples/Table.css +2 -2
  220. package/docs/components/Table/examples/Table.md +2 -2
  221. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  222. package/docs/components/Tile/examples/Tile.css +1 -1
  223. package/docs/components/Toolbar/examples/Toolbar.md +525 -431
  224. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  225. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  226. package/docs/components/Truncate/examples/Truncate.md +2 -2
  227. package/docs/demos/Card/examples/Card.css +3 -3
  228. package/docs/demos/Card/examples/Card.md +26 -10
  229. package/docs/demos/CardView/examples/CardView.md +24 -20
  230. package/docs/demos/Dashboard/examples/Dashboard.md +3 -3
  231. package/docs/demos/DataList/examples/DataList.md +8 -2
  232. package/docs/demos/Page/examples/Penta.md +528 -500
  233. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -124
  234. package/docs/demos/Skeleton/examples/Skeleton.md +7 -35
  235. package/docs/demos/Table/examples/Table.md +336 -252
  236. package/docs/demos/Tabs/examples/Tabs.md +28 -21
  237. package/docs/demos/Toolbar/examples/Toolbar.css +5 -0
  238. package/docs/demos/Toolbar/examples/Toolbar.md +44 -44
  239. package/docs/layouts/Flex/examples/Flex.md +5 -5
  240. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  241. package/icons/pficons.mjs +1 -0
  242. package/layouts/Flex/flex.css +115 -43
  243. package/layouts/Flex/flex.scss +20 -8
  244. package/package.json +9 -5
  245. package/patternfly-addons.css +732 -972
  246. package/patternfly-base-no-globals-theme-dark-unversioned.css +298 -191
  247. package/patternfly-base-no-globals.css +298 -191
  248. package/patternfly-base-theme-dark-unversioned.css +299 -192
  249. package/patternfly-base.css +299 -192
  250. package/patternfly-no-globals.css +2977 -2079
  251. package/patternfly-theme-dark-unversioned.css +2978 -2080
  252. package/patternfly.css +2978 -2080
  253. package/patternfly.min.css +1 -1
  254. package/patternfly.min.css.map +1 -1
  255. package/sass-utilities/functions.scss +6 -0
  256. package/sass-utilities/mixins.scss +62 -2
  257. package/sass-utilities/scss-variables.scss +8 -8
  258. package/sass-utilities/themes/dark/mixins.scss +3 -1
  259. package/utilities/Accessibility/accessibility.css +12 -12
  260. package/utilities/Spacing/spacing.css +720 -960
  261. package/utilities/Spacing/spacing.scss +4 -8
package/docs/demos/Page/examples/Penta.md CHANGED
@@ -9,30 +9,32 @@ wrapperTag: div
9
9
  ```html isFullscreen
10
10
  <div class="pf-v5-c-page" id="page-id">
11
11
  <header class="pf-v5-c-masthead" id="masthead-id">
12
- <span class="pf-v5-c-masthead__toggle">
13
- <button
14
- class="pf-v5-c-button pf-m-plain"
15
- type="button"
16
- aria-label="Global navigation"
17
- >
18
- <i class="fas fa-bars" aria-hidden="true"></i>
19
- </button>
20
- </span>
21
- <div class="pf-v5-c-masthead__main">
22
- <a class="pf-v5-c-masthead__brand" href="#">
23
- <img
24
- class="pf-v5-c-brand pf-m-light"
25
- src="/assets/images/PF-IconLogo-color.svg"
26
- style="--pf-v5-c-brand--Width: 37px;"
27
- alt="PatternFly logo"
28
- />
29
- <img
30
- class="pf-v5-c-brand pf-m-dark"
31
- src="/assets/images/PF-IconLogo-Reverse.svg"
32
- style="--pf-v5-c-brand--Width: 37px;"
33
- alt="PatternFly logo"
34
- />
35
- </a>
12
+ <div class="pf-v5-c-masthead__logo">
13
+ <span class="pf-v5-c-masthead__toggle">
14
+ <button
15
+ class="pf-v5-c-button pf-m-plain"
16
+ type="button"
17
+ aria-label="Global navigation"
18
+ >
19
+ <i class="fas fa-bars" aria-hidden="true"></i>
20
+ </button>
21
+ </span>
22
+ <div class="pf-v5-c-masthead__main">
23
+ <a class="pf-v5-c-masthead__brand" href="#">
24
+ <img
25
+ class="pf-v5-c-brand pf-m-light"
26
+ src="/assets/images/PF-IconLogo-color.svg"
27
+ style="--pf-v5-c-brand--Width: 37px;"
28
+ alt="PatternFly logo"
29
+ />
30
+ <img
31
+ class="pf-v5-c-brand pf-m-dark"
32
+ src="/assets/images/PF-IconLogo-Reverse.svg"
33
+ style="--pf-v5-c-brand--Width: 37px;"
34
+ alt="PatternFly logo"
35
+ />
36
+ </a>
37
+ </div>
36
38
  </div>
37
39
  <div class="pf-v5-c-masthead__content">
38
40
  <div class="pf-v5-c-toolbar">
@@ -84,8 +86,12 @@ wrapperTag: div
84
86
  </div>
85
87
  </header>
86
88
  <div class="pf-v5-c-page__sidebar">
87
- PatternFly Navigation
88
- <br />Product Name
89
+ <div class="pf-v5-c-page__sidebar-header">
90
+ <h2 class="pf-v5-c-page__sidebar-title">
91
+ PatternFly Navigation
92
+ <br />Product Name
93
+ </h2>
94
+ </div>
89
95
  <div class="pf-v5-c-page__sidebar-body">
90
96
  <nav class="pf-v5-c-nav" aria-label="Global">
91
97
  <section class="pf-v5-c-nav__section" aria-labelledby="grouped-title1">
@@ -143,525 +149,547 @@ wrapperTag: div
143
149
  </div>
144
150
 
145
151
  <main class="pf-v5-c-page__main" tabindex="-1" id="main-content-page-id">
146
- <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
147
- <div class="pf-v5-c-page__main-body">
148
- <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
149
- <ol class="pf-v5-c-breadcrumb__list" role="list">
150
- <li class="pf-v5-c-breadcrumb__item">
151
- <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
152
- </li>
153
- <li class="pf-v5-c-breadcrumb__item">
154
- <span class="pf-v5-c-breadcrumb__item-divider">
155
- <i class="fas fa-angle-right" aria-hidden="true"></i>
156
- </span>
152
+ <div class="pf-v5-c-page__main-list" tabindex="-1">
153
+ <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
154
+ <div class="pf-v5-c-page__main-body">
155
+ <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
156
+ <ol class="pf-v5-c-breadcrumb__list" role="list">
157
+ <li class="pf-v5-c-breadcrumb__item">
158
+ <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
159
+ </li>
160
+ <li class="pf-v5-c-breadcrumb__item">
161
+ <span class="pf-v5-c-breadcrumb__item-divider">
162
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
163
+ </span>
157
164
 
158
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
159
- </li>
160
- <li class="pf-v5-c-breadcrumb__item">
161
- <span class="pf-v5-c-breadcrumb__item-divider">
162
- <i class="fas fa-angle-right" aria-hidden="true"></i>
163
- </span>
165
+ <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
166
+ </li>
167
+ <li class="pf-v5-c-breadcrumb__item">
168
+ <span class="pf-v5-c-breadcrumb__item-divider">
169
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
170
+ </span>
164
171
 
165
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
166
- </li>
167
- <li class="pf-v5-c-breadcrumb__item">
168
- <span class="pf-v5-c-breadcrumb__item-divider">
169
- <i class="fas fa-angle-right" aria-hidden="true"></i>
170
- </span>
172
+ <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
173
+ </li>
174
+ <li class="pf-v5-c-breadcrumb__item">
175
+ <span class="pf-v5-c-breadcrumb__item-divider">
176
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
177
+ </span>
171
178
 
172
- <a
173
- href="#"
174
- class="pf-v5-c-breadcrumb__link pf-m-current"
175
- aria-current="page"
176
- >Section landing</a>
177
- </li>
178
- </ol>
179
- </nav>
180
- </div>
181
- </section>
182
- <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
183
- <div class="pf-v5-c-page__main-body">
184
- <div class="pf-v5-c-content">
185
- <h3>Penta Hackathon Demo Page</h3>
186
- <p>A showcase of our new tokens being applied to create a new theme.</p>
179
+ <a
180
+ href="#"
181
+ class="pf-v5-c-breadcrumb__link pf-m-current"
182
+ aria-current="page"
183
+ >Section landing</a>
184
+ </li>
185
+ </ol>
186
+ </nav>
187
187
  </div>
188
- </div>
189
- </section>
190
- <section class="pf-v5-c-page__main-section pf-m-limit-width">
191
- <div class="pf-v5-c-page__main-body">
192
- <div
193
- class="pf-v5-c-toolbar pf-m-inset-none"
194
- id="toolbar-simple-example"
195
- >
196
- <div class="pf-v5-c-toolbar__content">
197
- <div class="pf-v5-c-toolbar__content-section">
198
- <div class="pf-v5-c-toolbar__item">
199
- <button
200
- class="pf-v5-c-menu-toggle"
201
- type="button"
202
- aria-expanded="false"
203
- >
204
- <span class="pf-v5-c-menu-toggle__text">Dropdown menu</span>
205
- <span class="pf-v5-c-menu-toggle__controls">
206
- <span class="pf-v5-c-menu-toggle__toggle-icon">
207
- <i class="fas fa-angle-down" aria-hidden="true"></i>
188
+ </section>
189
+ <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
190
+ <div class="pf-v5-c-page__main-body">
191
+ <div class="pf-v5-c-content">
192
+ <h3>Penta Hackathon Demo Page</h3>
193
+ <p>A showcase of our new tokens being applied to create a new theme.</p>
194
+ </div>
195
+ </div>
196
+ </section>
197
+ <section class="pf-v5-c-page__main-section pf-m-limit-width">
198
+ <div class="pf-v5-c-page__main-body">
199
+ <div
200
+ class="pf-v5-c-toolbar pf-m-inset-none"
201
+ id="toolbar-simple-example"
202
+ >
203
+ <div class="pf-v5-c-toolbar__content">
204
+ <div class="pf-v5-c-toolbar__content-section">
205
+ <div class="pf-v5-c-toolbar__item">
206
+ <button
207
+ class="pf-v5-c-menu-toggle"
208
+ type="button"
209
+ aria-expanded="false"
210
+ >
211
+ <span class="pf-v5-c-menu-toggle__text">Dropdown menu</span>
212
+ <span class="pf-v5-c-menu-toggle__controls">
213
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
214
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
215
+ </span>
208
216
  </span>
209
- </span>
210
- </button>
211
- </div>
212
- <div class="pf-v5-c-toolbar__item">
213
- <button
214
- class="pf-v5-c-menu-toggle"
215
- type="button"
216
- aria-expanded="false"
217
- >
218
- <span class="pf-v5-c-menu-toggle__text">Another one</span>
219
- <span class="pf-v5-c-menu-toggle__controls">
220
- <span class="pf-v5-c-menu-toggle__toggle-icon">
221
- <i class="fas fa-angle-down" aria-hidden="true"></i>
217
+ </button>
218
+ </div>
219
+ <div class="pf-v5-c-toolbar__item">
220
+ <button
221
+ class="pf-v5-c-menu-toggle"
222
+ type="button"
223
+ aria-expanded="false"
224
+ >
225
+ <span class="pf-v5-c-menu-toggle__text">Another one</span>
226
+ <span class="pf-v5-c-menu-toggle__controls">
227
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
228
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
229
+ </span>
222
230
  </span>
223
- </span>
224
- </button>
225
- </div>
226
- <div class="pf-v5-c-toolbar__group pf-m-align-right">
227
- <div class="pf-v5-c-toolbar__group pf-m-icon-button-group">
228
- <div class="pf-v5-c-toolbar__item">
229
- <button
230
- class="pf-v5-c-button pf-m-plain"
231
- type="button"
232
- aria-label="Remove"
233
- >
234
- <i class="fas fa-columns" aria-hidden="true"></i>
235
- </button>
231
+ </button>
232
+ </div>
233
+ <div class="pf-v5-c-toolbar__group pf-m-align-right">
234
+ <div class="pf-v5-c-toolbar__group pf-m-icon-button-group">
235
+ <div class="pf-v5-c-toolbar__item">
236
+ <button
237
+ class="pf-v5-c-button pf-m-plain"
238
+ type="button"
239
+ aria-label="Remove"
240
+ >
241
+ <i class="fas fa-columns" aria-hidden="true"></i>
242
+ </button>
243
+ </div>
244
+ <div class="pf-v5-c-toolbar__item">
245
+ <button
246
+ class="pf-v5-c-button pf-m-plain"
247
+ type="button"
248
+ aria-label="Remove"
249
+ >
250
+ <i class="fas fa-cog" aria-hidden="true"></i>
251
+ </button>
252
+ </div>
236
253
  </div>
237
254
  <div class="pf-v5-c-toolbar__item">
238
255
  <button
239
- class="pf-v5-c-button pf-m-plain"
256
+ class="pf-v5-c-button pf-m-primary"
240
257
  type="button"
241
- aria-label="Remove"
242
- >
243
- <i class="fas fa-cog" aria-hidden="true"></i>
244
- </button>
258
+ >Primary</button>
245
259
  </div>
246
260
  </div>
247
- <div class="pf-v5-c-toolbar__item">
248
- <button
249
- class="pf-v5-c-button pf-m-primary"
250
- type="button"
251
- >Primary</button>
252
- </div>
253
261
  </div>
254
262
  </div>
255
263
  </div>
256
- </div>
257
- <table
258
- class="pf-v5-c-table pf-m-grid-md"
259
- role="grid"
260
- aria-label="This is a table with checkboxes"
261
- id="page-id-table"
262
- >
263
- <thead class="pf-v5-c-table__thead">
264
- <tr class="pf-v5-c-table__tr" role="row">
265
- <td class="pf-v5-c-table__td pf-v5-c-table__check" role="cell">
266
- <div class="pf-v5-c-check pf-m-standalone">
267
- <input
268
- class="pf-v5-c-check__input"
269
- type="checkbox"
270
- name="checkrow1"
271
- aria-labelledby="page-id-table-node1"
272
- />
273
- </div>
274
- </td>
275
- <th
276
- class="pf-v5-c-table__th"
277
- role="columnheader"
278
- scope="col"
279
- >Repositories</th>
280
- <th
281
- class="pf-v5-c-table__th"
282
- role="columnheader"
283
- scope="col"
284
- >Branches</th>
285
- <th
286
- class="pf-v5-c-table__th"
287
- role="columnheader"
288
- scope="col"
289
- >Pull requests</th>
290
- <th
291
- class="pf-v5-c-table__th"
292
- role="columnheader"
293
- scope="col"
294
- >Workspaces</th>
295
- <th
296
- class="pf-v5-c-table__th"
297
- role="columnheader"
298
- scope="col"
299
- >Last commit</th>
300
- <td class="pf-v5-c-table__td"></td>
301
- <td class="pf-v5-c-table__td"></td>
302
- </tr>
303
- </thead>
264
+ <table
265
+ class="pf-v5-c-table pf-m-grid-md"
266
+ role="grid"
267
+ aria-label="This is a table with checkboxes"
268
+ id="page-id-table"
269
+ >
270
+ <thead class="pf-v5-c-table__thead">
271
+ <tr class="pf-v5-c-table__tr" role="row">
272
+ <td class="pf-v5-c-table__td pf-v5-c-table__check" role="cell">
273
+ <div class="pf-v5-c-check pf-m-standalone">
274
+ <input
275
+ class="pf-v5-c-check__input"
276
+ type="checkbox"
277
+ name="checkrow1"
278
+ aria-labelledby="page-id-table-node1"
279
+ />
280
+ </div>
281
+ </td>
282
+ <th
283
+ class="pf-v5-c-table__th"
284
+ role="columnheader"
285
+ scope="col"
286
+ >Repositories</th>
287
+ <th
288
+ class="pf-v5-c-table__th"
289
+ role="columnheader"
290
+ scope="col"
291
+ >Branches</th>
292
+ <th
293
+ class="pf-v5-c-table__th"
294
+ role="columnheader"
295
+ scope="col"
296
+ >Pull requests</th>
297
+ <th
298
+ class="pf-v5-c-table__th"
299
+ role="columnheader"
300
+ scope="col"
301
+ >Workspaces</th>
302
+ <th
303
+ class="pf-v5-c-table__th"
304
+ role="columnheader"
305
+ scope="col"
306
+ >Last commit</th>
307
+ <td class="pf-v5-c-table__td"></td>
308
+ <td class="pf-v5-c-table__td"></td>
309
+ </tr>
310
+ </thead>
304
311
 
305
- <tbody class="pf-v5-c-table__tbody" role="rowgroup">
306
- <tr
307
- class="pf-v5-c-table__tr pf-m-clickable"
308
- role="row"
309
- tabindex="0"
310
- >
311
- <td class="pf-v5-c-table__td pf-v5-c-table__check" role="cell">
312
- <div class="pf-v5-c-check pf-m-standalone">
313
- <input
314
- class="pf-v5-c-check__input"
315
- type="checkbox"
316
- name="checkrow1"
317
- aria-labelledby="page-id-table-node1"
318
- />
319
- </div>
320
- </td>
321
- <th
322
- class="pf-v5-c-table__th"
323
- role="columnheader"
324
- data-label="Repository name"
312
+ <tbody class="pf-v5-c-table__tbody" role="rowgroup">
313
+ <tr
314
+ class="pf-v5-c-table__tr pf-m-clickable"
315
+ role="row"
316
+ tabindex="0"
325
317
  >
326
- <div>
327
- <div id="page-id-table-node1">Node 1</div>
328
- </div>
329
- </th>
330
- <td class="pf-v5-c-table__td" role="cell" data-label="Branches">
331
- <div class="pf-v5-l-flex pf-m-space-items-sm">
332
- <div class="pf-v5-l-flex__item">
333
- <i class="fas fa-code-branch"></i>
318
+ <td class="pf-v5-c-table__td pf-v5-c-table__check" role="cell">
319
+ <div class="pf-v5-c-check pf-m-standalone">
320
+ <input
321
+ class="pf-v5-c-check__input"
322
+ type="checkbox"
323
+ name="checkrow1"
324
+ aria-labelledby="page-id-table-node1"
325
+ />
334
326
  </div>
335
- <div class="pf-v5-l-flex__item">10</div>
336
- </div>
337
- </td>
338
- <td
339
- class="pf-v5-c-table__td"
340
- role="cell"
341
- data-label="Pull requests"
342
- >
343
- <div class="pf-v5-l-flex pf-m-space-items-sm">
344
- <div class="pf-v5-l-flex__item">
345
- <i class="fas fa-code"></i>
327
+ </td>
328
+ <th
329
+ class="pf-v5-c-table__th"
330
+ role="columnheader"
331
+ data-label="Repository name"
332
+ >
333
+ <div>
334
+ <div id="page-id-table-node1">Node 1</div>
346
335
  </div>
347
- <div class="pf-v5-l-flex__item">25</div>
348
- </div>
349
- </td>
350
- <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">
351
- <div class="pf-v5-l-flex pf-m-space-items-sm">
352
- <div class="pf-v5-l-flex__item">
353
- <i class="fas fa-cube"></i>
336
+ </th>
337
+ <td class="pf-v5-c-table__td" role="cell" data-label="Branches">
338
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
339
+ <div class="pf-v5-l-flex__item">
340
+ <i class="fas fa-code-branch"></i>
341
+ </div>
342
+ <div class="pf-v5-l-flex__item">10</div>
354
343
  </div>
355
- <div class="pf-v5-l-flex__item">5</div>
356
- </div>
357
- </td>
358
- <td
359
- class="pf-v5-c-table__td"
360
- role="cell"
361
- data-label="Last commit"
362
- >2 days ago</td>
363
- <td class="pf-v5-c-table__td" role="cell" data-label="Action">
364
- <a href="/some/path">Action link</a>
365
- </td>
366
- <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell">
367
- <button
368
- class="pf-v5-c-button pf-m-plain"
369
- type="button"
370
- aria-label="Remove"
344
+ </td>
345
+ <td
346
+ class="pf-v5-c-table__td"
347
+ role="cell"
348
+ data-label="Pull requests"
371
349
  >
372
- <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
373
- </button>
374
- </td>
375
- </tr>
350
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
351
+ <div class="pf-v5-l-flex__item">
352
+ <i class="fas fa-code"></i>
353
+ </div>
354
+ <div class="pf-v5-l-flex__item">25</div>
355
+ </div>
356
+ </td>
357
+ <td
358
+ class="pf-v5-c-table__td"
359
+ role="cell"
360
+ data-label="Workspaces"
361
+ >
362
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
363
+ <div class="pf-v5-l-flex__item">
364
+ <i class="fas fa-cube"></i>
365
+ </div>
366
+ <div class="pf-v5-l-flex__item">5</div>
367
+ </div>
368
+ </td>
369
+ <td
370
+ class="pf-v5-c-table__td"
371
+ role="cell"
372
+ data-label="Last commit"
373
+ >2 days ago</td>
374
+ <td class="pf-v5-c-table__td" role="cell" data-label="Action">
375
+ <a href="/some/path">Action link</a>
376
+ </td>
377
+ <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell">
378
+ <button
379
+ class="pf-v5-c-button pf-m-plain"
380
+ type="button"
381
+ aria-label="Remove"
382
+ >
383
+ <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
384
+ </button>
385
+ </td>
386
+ </tr>
376
387
 
377
- <tr
378
- class="pf-v5-c-table__tr pf-m-clickable pf-m-selected"
379
- role="row"
380
- tabindex="0"
381
- >
382
- <td class="pf-v5-c-table__td pf-v5-c-table__check" role="cell">
383
- <div class="pf-v5-c-check pf-m-standalone">
384
- <input
385
- class="pf-v5-c-check__input"
386
- type="checkbox"
387
- name="checkrow2"
388
- aria-labelledby="page-id-table-node2"
389
- checked
390
- />
391
- </div>
392
- </td>
393
- <th
394
- class="pf-v5-c-table__th"
395
- role="columnheader"
396
- data-label="Repository name"
388
+ <tr
389
+ class="pf-v5-c-table__tr pf-m-clickable pf-m-selected"
390
+ role="row"
391
+ tabindex="0"
397
392
  >
398
- <div>
399
- <div id="page-id-table-node2">Node 2</div>
400
- </div>
401
- </th>
402
- <td class="pf-v5-c-table__td" role="cell" data-label="Branches">
403
- <div class="pf-v5-l-flex pf-m-space-items-sm">
404
- <div class="pf-v5-l-flex__item">
405
- <i class="fas fa-code-branch"></i>
393
+ <td class="pf-v5-c-table__td pf-v5-c-table__check" role="cell">
394
+ <div class="pf-v5-c-check pf-m-standalone">
395
+ <input
396
+ class="pf-v5-c-check__input"
397
+ type="checkbox"
398
+ name="checkrow2"
399
+ aria-labelledby="page-id-table-node2"
400
+ checked
401
+ />
406
402
  </div>
407
- <div class="pf-v5-l-flex__item">8</div>
408
- </div>
409
- </td>
410
- <td
411
- class="pf-v5-c-table__td"
412
- role="cell"
413
- data-label="Pull requests"
414
- >
415
- <div class="pf-v5-l-flex pf-m-space-items-sm">
416
- <div class="pf-v5-l-flex__item">
417
- <i class="fas fa-code"></i>
403
+ </td>
404
+ <th
405
+ class="pf-v5-c-table__th"
406
+ role="columnheader"
407
+ data-label="Repository name"
408
+ >
409
+ <div>
410
+ <div id="page-id-table-node2">Node 2</div>
418
411
  </div>
419
- <div class="pf-v5-l-flex__item">30</div>
420
- </div>
421
- </td>
422
- <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">
423
- <div class="pf-v5-l-flex pf-m-space-items-sm">
424
- <div class="pf-v5-l-flex__item">
425
- <i class="fas fa-cube"></i>
412
+ </th>
413
+ <td class="pf-v5-c-table__td" role="cell" data-label="Branches">
414
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
415
+ <div class="pf-v5-l-flex__item">
416
+ <i class="fas fa-code-branch"></i>
417
+ </div>
418
+ <div class="pf-v5-l-flex__item">8</div>
426
419
  </div>
427
- <div class="pf-v5-l-flex__item">2</div>
428
- </div>
429
- </td>
430
- <td
431
- class="pf-v5-c-table__td"
432
- role="cell"
433
- data-label="Last commit"
434
- >2 days ago</td>
435
- <td class="pf-v5-c-table__td" role="cell" data-label="Action">
436
- <a href="/some/path">Action link</a>
437
- </td>
438
- <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell">
439
- <button
440
- class="pf-v5-c-button pf-m-plain"
441
- type="button"
442
- aria-label="Remove"
420
+ </td>
421
+ <td
422
+ class="pf-v5-c-table__td"
423
+ role="cell"
424
+ data-label="Pull requests"
443
425
  >
444
- <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
445
- </button>
446
- </td>
447
- </tr>
426
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
427
+ <div class="pf-v5-l-flex__item">
428
+ <i class="fas fa-code"></i>
429
+ </div>
430
+ <div class="pf-v5-l-flex__item">30</div>
431
+ </div>
432
+ </td>
433
+ <td
434
+ class="pf-v5-c-table__td"
435
+ role="cell"
436
+ data-label="Workspaces"
437
+ >
438
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
439
+ <div class="pf-v5-l-flex__item">
440
+ <i class="fas fa-cube"></i>
441
+ </div>
442
+ <div class="pf-v5-l-flex__item">2</div>
443
+ </div>
444
+ </td>
445
+ <td
446
+ class="pf-v5-c-table__td"
447
+ role="cell"
448
+ data-label="Last commit"
449
+ >2 days ago</td>
450
+ <td class="pf-v5-c-table__td" role="cell" data-label="Action">
451
+ <a href="/some/path">Action link</a>
452
+ </td>
453
+ <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell">
454
+ <button
455
+ class="pf-v5-c-button pf-m-plain"
456
+ type="button"
457
+ aria-label="Remove"
458
+ >
459
+ <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
460
+ </button>
461
+ </td>
462
+ </tr>
448
463
 
449
- <tr
450
- class="pf-v5-c-table__tr pf-m-clickable"
451
- role="row"
452
- tabindex="0"
453
- >
454
- <td class="pf-v5-c-table__td pf-v5-c-table__check" role="cell">
455
- <div class="pf-v5-c-check pf-m-standalone">
456
- <input
457
- class="pf-v5-c-check__input"
458
- type="checkbox"
459
- name="checkrow3"
460
- aria-labelledby="page-id-table-node3"
461
- />
462
- </div>
463
- </td>
464
- <th
465
- class="pf-v5-c-table__th"
466
- role="columnheader"
467
- data-label="Repository name"
464
+ <tr
465
+ class="pf-v5-c-table__tr pf-m-clickable"
466
+ role="row"
467
+ tabindex="0"
468
468
  >
469
- <div>
470
- <div id="page-id-table-node3">Node 3</div>
471
- </div>
472
- </th>
473
- <td class="pf-v5-c-table__td" role="cell" data-label="Branches">
474
- <div class="pf-v5-l-flex pf-m-space-items-sm">
475
- <div class="pf-v5-l-flex__item">
476
- <i class="fas fa-code-branch"></i>
469
+ <td class="pf-v5-c-table__td pf-v5-c-table__check" role="cell">
470
+ <div class="pf-v5-c-check pf-m-standalone">
471
+ <input
472
+ class="pf-v5-c-check__input"
473
+ type="checkbox"
474
+ name="checkrow3"
475
+ aria-labelledby="page-id-table-node3"
476
+ />
477
477
  </div>
478
- <div class="pf-v5-l-flex__item">12</div>
479
- </div>
480
- </td>
481
- <td
482
- class="pf-v5-c-table__td"
483
- role="cell"
484
- data-label="Pull requests"
485
- >
486
- <div class="pf-v5-l-flex pf-m-space-items-sm">
487
- <div class="pf-v5-l-flex__item">
488
- <i class="fas fa-code"></i>
478
+ </td>
479
+ <th
480
+ class="pf-v5-c-table__th"
481
+ role="columnheader"
482
+ data-label="Repository name"
483
+ >
484
+ <div>
485
+ <div id="page-id-table-node3">Node 3</div>
489
486
  </div>
490
- <div class="pf-v5-l-flex__item">48</div>
491
- </div>
492
- </td>
493
- <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">
494
- <div class="pf-v5-l-flex pf-m-space-items-sm">
495
- <div class="pf-v5-l-flex__item">
496
- <i class="fas fa-cube"></i>
487
+ </th>
488
+ <td class="pf-v5-c-table__td" role="cell" data-label="Branches">
489
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
490
+ <div class="pf-v5-l-flex__item">
491
+ <i class="fas fa-code-branch"></i>
492
+ </div>
493
+ <div class="pf-v5-l-flex__item">12</div>
497
494
  </div>
498
- <div class="pf-v5-l-flex__item">13</div>
499
- </div>
500
- </td>
501
- <td
502
- class="pf-v5-c-table__td"
503
- role="cell"
504
- data-label="Last commit"
505
- >30 days ago</td>
506
- <td class="pf-v5-c-table__td" role="cell" data-label="Action">
507
- <a href="#">Action link</a>
508
- </td>
509
- <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell">
510
- <button
511
- class="pf-v5-c-button pf-m-plain"
512
- type="button"
513
- aria-label="Remove"
495
+ </td>
496
+ <td
497
+ class="pf-v5-c-table__td"
498
+ role="cell"
499
+ data-label="Pull requests"
514
500
  >
515
- <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
516
- </button>
517
- </td>
518
- </tr>
501
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
502
+ <div class="pf-v5-l-flex__item">
503
+ <i class="fas fa-code"></i>
504
+ </div>
505
+ <div class="pf-v5-l-flex__item">48</div>
506
+ </div>
507
+ </td>
508
+ <td
509
+ class="pf-v5-c-table__td"
510
+ role="cell"
511
+ data-label="Workspaces"
512
+ >
513
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
514
+ <div class="pf-v5-l-flex__item">
515
+ <i class="fas fa-cube"></i>
516
+ </div>
517
+ <div class="pf-v5-l-flex__item">13</div>
518
+ </div>
519
+ </td>
520
+ <td
521
+ class="pf-v5-c-table__td"
522
+ role="cell"
523
+ data-label="Last commit"
524
+ >30 days ago</td>
525
+ <td class="pf-v5-c-table__td" role="cell" data-label="Action">
526
+ <a href="#">Action link</a>
527
+ </td>
528
+ <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell">
529
+ <button
530
+ class="pf-v5-c-button pf-m-plain"
531
+ type="button"
532
+ aria-label="Remove"
533
+ >
534
+ <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
535
+ </button>
536
+ </td>
537
+ </tr>
519
538
 
520
- <tr
521
- class="pf-v5-c-table__tr pf-m-clickable"
522
- role="row"
523
- tabindex="0"
524
- >
525
- <td class="pf-v5-c-table__td pf-v5-c-table__check" role="cell">
526
- <div class="pf-v5-c-check pf-m-standalone">
527
- <input
528
- class="pf-v5-c-check__input"
529
- type="checkbox"
530
- name="checkrow4"
531
- aria-labelledby="page-id-table-node4"
532
- />
533
- </div>
534
- </td>
535
- <th
536
- class="pf-v5-c-table__th"
537
- role="columnheader"
538
- data-label="Repository name"
539
+ <tr
540
+ class="pf-v5-c-table__tr pf-m-clickable"
541
+ role="row"
542
+ tabindex="0"
539
543
  >
540
- <div>
541
- <div id="page-id-table-node4">Node 4</div>
542
- </div>
543
- </th>
544
- <td class="pf-v5-c-table__td" role="cell" data-label="Branches">
545
- <div class="pf-v5-l-flex pf-m-space-items-sm">
546
- <div class="pf-v5-l-flex__item">
547
- <i class="fas fa-code-branch"></i>
544
+ <td class="pf-v5-c-table__td pf-v5-c-table__check" role="cell">
545
+ <div class="pf-v5-c-check pf-m-standalone">
546
+ <input
547
+ class="pf-v5-c-check__input"
548
+ type="checkbox"
549
+ name="checkrow4"
550
+ aria-labelledby="page-id-table-node4"
551
+ />
548
552
  </div>
549
- <div class="pf-v5-l-flex__item">3</div>
550
- </div>
551
- </td>
552
- <td
553
- class="pf-v5-c-table__td"
554
- role="cell"
555
- data-label="Pull requests"
556
- >
557
- <div class="pf-v5-l-flex pf-m-space-items-sm">
558
- <div class="pf-v5-l-flex__item">
559
- <i class="fas fa-code"></i>
553
+ </td>
554
+ <th
555
+ class="pf-v5-c-table__th"
556
+ role="columnheader"
557
+ data-label="Repository name"
558
+ >
559
+ <div>
560
+ <div id="page-id-table-node4">Node 4</div>
560
561
  </div>
561
- <div class="pf-v5-l-flex__item">8</div>
562
- </div>
563
- </td>
564
- <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">
565
- <div class="pf-v5-l-flex pf-m-space-items-sm">
566
- <div class="pf-v5-l-flex__item">
567
- <i class="fas fa-cube"></i>
562
+ </th>
563
+ <td class="pf-v5-c-table__td" role="cell" data-label="Branches">
564
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
565
+ <div class="pf-v5-l-flex__item">
566
+ <i class="fas fa-code-branch"></i>
567
+ </div>
568
+ <div class="pf-v5-l-flex__item">3</div>
568
569
  </div>
569
- <div class="pf-v5-l-flex__item">20</div>
570
- </div>
571
- </td>
572
- <td
573
- class="pf-v5-c-table__td"
574
- role="cell"
575
- data-label="Last commit"
576
- >8 days ago</td>
577
- <td class="pf-v5-c-table__td" role="cell" data-label="Action">
578
- <a href="/some/path">Action link</a>
579
- </td>
580
- <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell">
581
- <button
582
- class="pf-v5-c-button pf-m-plain"
583
- type="button"
584
- aria-label="Remove"
570
+ </td>
571
+ <td
572
+ class="pf-v5-c-table__td"
573
+ role="cell"
574
+ data-label="Pull requests"
585
575
  >
586
- <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
587
- </button>
588
- </td>
589
- </tr>
576
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
577
+ <div class="pf-v5-l-flex__item">
578
+ <i class="fas fa-code"></i>
579
+ </div>
580
+ <div class="pf-v5-l-flex__item">8</div>
581
+ </div>
582
+ </td>
583
+ <td
584
+ class="pf-v5-c-table__td"
585
+ role="cell"
586
+ data-label="Workspaces"
587
+ >
588
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
589
+ <div class="pf-v5-l-flex__item">
590
+ <i class="fas fa-cube"></i>
591
+ </div>
592
+ <div class="pf-v5-l-flex__item">20</div>
593
+ </div>
594
+ </td>
595
+ <td
596
+ class="pf-v5-c-table__td"
597
+ role="cell"
598
+ data-label="Last commit"
599
+ >8 days ago</td>
600
+ <td class="pf-v5-c-table__td" role="cell" data-label="Action">
601
+ <a href="/some/path">Action link</a>
602
+ </td>
603
+ <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell">
604
+ <button
605
+ class="pf-v5-c-button pf-m-plain"
606
+ type="button"
607
+ aria-label="Remove"
608
+ >
609
+ <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
610
+ </button>
611
+ </td>
612
+ </tr>
590
613
 
591
- <tr
592
- class="pf-v5-c-table__tr pf-m-clickable"
593
- role="row"
594
- tabindex="0"
595
- >
596
- <td class="pf-v5-c-table__td pf-v5-c-table__check" role="cell">
597
- <div class="pf-v5-c-check pf-m-standalone">
598
- <input
599
- class="pf-v5-c-check__input"
600
- type="checkbox"
601
- name="checkrow5"
602
- aria-labelledby="page-id-table-node5"
603
- />
604
- </div>
605
- </td>
606
- <td
607
- class="pf-v5-c-table__td"
608
- role="cell"
609
- data-label="Repository name"
614
+ <tr
615
+ class="pf-v5-c-table__tr pf-m-clickable"
616
+ role="row"
617
+ tabindex="0"
610
618
  >
611
- <div>
612
- <div id="page-id-table-node5">Node 5</div>
613
- </div>
614
- </td>
615
- <td class="pf-v5-c-table__td" role="cell" data-label="Branches">
616
- <div class="pf-v5-l-flex pf-m-space-items-sm">
617
- <div class="pf-v5-l-flex__item">
618
- <i class="fas fa-code-branch"></i>
619
+ <td class="pf-v5-c-table__td pf-v5-c-table__check" role="cell">
620
+ <div class="pf-v5-c-check pf-m-standalone">
621
+ <input
622
+ class="pf-v5-c-check__input"
623
+ type="checkbox"
624
+ name="checkrow5"
625
+ aria-labelledby="page-id-table-node5"
626
+ />
619
627
  </div>
620
- <div class="pf-v5-l-flex__item">34</div>
621
- </div>
622
- </td>
623
- <td
624
- class="pf-v5-c-table__td"
625
- role="cell"
626
- data-label="Pull requests"
627
- >
628
- <div class="pf-v5-l-flex pf-m-space-items-sm">
629
- <div class="pf-v5-l-flex__item">
630
- <i class="fas fa-code"></i>
628
+ </td>
629
+ <td
630
+ class="pf-v5-c-table__td"
631
+ role="cell"
632
+ data-label="Repository name"
633
+ >
634
+ <div>
635
+ <div id="page-id-table-node5">Node 5</div>
631
636
  </div>
632
- <div class="pf-v5-l-flex__item">21</div>
633
- </div>
634
- </td>
635
- <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">
636
- <div class="pf-v5-l-flex pf-m-space-items-sm">
637
- <div class="pf-v5-l-flex__item">
638
- <i class="fas fa-cube"></i>
637
+ </td>
638
+ <td class="pf-v5-c-table__td" role="cell" data-label="Branches">
639
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
640
+ <div class="pf-v5-l-flex__item">
641
+ <i class="fas fa-code-branch"></i>
642
+ </div>
643
+ <div class="pf-v5-l-flex__item">34</div>
639
644
  </div>
640
- <div class="pf-v5-l-flex__item">26</div>
641
- </div>
642
- </td>
643
- <td
644
- class="pf-v5-c-table__td"
645
- role="cell"
646
- data-label="Last commit"
647
- >2 days ago</td>
648
- <td class="pf-v5-c-table__td" role="cell" data-label="Action">
649
- <a href="/some/path">Action link</a>
650
- </td>
651
- <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell">
652
- <button
653
- class="pf-v5-c-button pf-m-plain"
654
- type="button"
655
- aria-label="Remove"
645
+ </td>
646
+ <td
647
+ class="pf-v5-c-table__td"
648
+ role="cell"
649
+ data-label="Pull requests"
656
650
  >
657
- <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
658
- </button>
659
- </td>
660
- </tr>
661
- </tbody>
662
- </table>
663
- </div>
664
- </section>
651
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
652
+ <div class="pf-v5-l-flex__item">
653
+ <i class="fas fa-code"></i>
654
+ </div>
655
+ <div class="pf-v5-l-flex__item">21</div>
656
+ </div>
657
+ </td>
658
+ <td
659
+ class="pf-v5-c-table__td"
660
+ role="cell"
661
+ data-label="Workspaces"
662
+ >
663
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
664
+ <div class="pf-v5-l-flex__item">
665
+ <i class="fas fa-cube"></i>
666
+ </div>
667
+ <div class="pf-v5-l-flex__item">26</div>
668
+ </div>
669
+ </td>
670
+ <td
671
+ class="pf-v5-c-table__td"
672
+ role="cell"
673
+ data-label="Last commit"
674
+ >2 days ago</td>
675
+ <td class="pf-v5-c-table__td" role="cell" data-label="Action">
676
+ <a href="/some/path">Action link</a>
677
+ </td>
678
+ <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell">
679
+ <button
680
+ class="pf-v5-c-button pf-m-plain"
681
+ type="button"
682
+ aria-label="Remove"
683
+ >
684
+ <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
685
+ </button>
686
+ </td>
687
+ </tr>
688
+ </tbody>
689
+ </table>
690
+ </div>
691
+ </section>
692
+ </div>
665
693
  </main>
666
694
  </div>
667
695