@patternfly/patternfly 6.0.0-alpha.103 → 6.0.0-alpha.105

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 (49) hide show
  1. package/base/patternfly-variables.css +22 -19
  2. package/base/tokens/_tokens-charts.scss +6 -6
  3. package/base/tokens/_tokens-dark.scss +4 -3
  4. package/base/tokens/_tokens-default.scss +20 -18
  5. package/base/tokens/_tokens-palette.scss +1 -1
  6. package/components/Drawer/drawer.css +5 -4
  7. package/components/Drawer/drawer.scss +7 -6
  8. package/components/FormControl/form-control.scss +1 -1
  9. package/components/MenuToggle/menu-toggle.css +24 -0
  10. package/components/MenuToggle/menu-toggle.scss +36 -0
  11. package/components/Page/page.css +24 -23
  12. package/components/Page/page.scss +24 -23
  13. package/docs/components/Drawer/examples/Drawer.md +2 -1
  14. package/docs/components/MenuToggle/examples/MenuToggle.md +64 -0
  15. package/docs/components/Page/deprecated/PageHeader.md +113 -99
  16. package/docs/components/Page/examples/Page.md +114 -100
  17. package/docs/demos/AboutModal/examples/AboutModal.md +81 -79
  18. package/docs/demos/Alert/examples/Alert.md +551 -524
  19. package/docs/demos/BackToTop/examples/BackToTop.md +211 -209
  20. package/docs/demos/Banner/examples/Banner.md +420 -412
  21. package/docs/demos/CardView/examples/CardView.md +1302 -1297
  22. package/docs/demos/ContextSelector/examples/ContextSelector.md +536 -523
  23. package/docs/demos/Dashboard/examples/Dashboard.md +1344 -1314
  24. package/docs/demos/DataList/examples/DataList.md +3006 -2958
  25. package/docs/demos/DescriptionList/examples/DescriptionList.md +532 -518
  26. package/docs/demos/Drawer/examples/Drawer.md +544 -528
  27. package/docs/demos/JumpLinks/examples/JumpLinks.md +915 -897
  28. package/docs/demos/Masthead/examples/Masthead.md +729 -711
  29. package/docs/demos/Modal/examples/Modal.md +486 -474
  30. package/docs/demos/Nav/examples/Nav.md +528 -510
  31. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +440 -435
  32. package/docs/demos/Page/examples/Page.md +1656 -1633
  33. package/docs/demos/Page/examples/Penta.md +632 -577
  34. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5222 -5080
  35. package/docs/demos/Skeleton/examples/Skeleton.md +177 -175
  36. package/docs/demos/Table/examples/Table.md +14137 -13972
  37. package/docs/demos/Tabs/examples/Tabs.md +2206 -2138
  38. package/docs/demos/Toolbar/examples/Toolbar.md +1322 -1269
  39. package/docs/demos/Wizard/examples/Wizard.md +1571 -1553
  40. package/package.json +1 -1
  41. package/patternfly-base-no-globals-theme-dark-unversioned.css +22 -19
  42. package/patternfly-base-no-globals.css +22 -19
  43. package/patternfly-base-theme-dark-unversioned.css +22 -19
  44. package/patternfly-base.css +22 -19
  45. package/patternfly-no-globals.css +75 -46
  46. package/patternfly-theme-dark-unversioned.css +75 -46
  47. package/patternfly.css +75 -46
  48. package/patternfly.min.css +1 -1
  49. package/patternfly.min.css.map +1 -1
package/docs/demos/Page/examples/Penta.md CHANGED
@@ -190,628 +190,683 @@ wrapperTag: div
190
190
  </div>
191
191
  </div>
192
192
 
193
- <main class="pf-v6-c-page__main" tabindex="-1" id="main-content-page-id">
194
- <div class="pf-v6-c-page__main-list" tabindex="-1">
195
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
196
- <div class="pf-v6-c-page__main-body">
197
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
198
- <ol class="pf-v6-c-breadcrumb__list" role="list">
199
- <li class="pf-v6-c-breadcrumb__item">
200
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
201
- </li>
202
- <li class="pf-v6-c-breadcrumb__item">
203
- <span class="pf-v6-c-breadcrumb__item-divider">
204
- <i class="fas fa-angle-right" aria-hidden="true"></i>
205
- </span>
193
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
194
+ <main class="pf-v6-c-page__main" tabindex="-1" id="main-content-page-id">
195
+ <div class="pf-v6-c-page__main-list" tabindex="-1">
196
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
197
+ <div class="pf-v6-c-page__main-body">
198
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
199
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
200
+ <li class="pf-v6-c-breadcrumb__item">
201
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
202
+ </li>
203
+ <li class="pf-v6-c-breadcrumb__item">
204
+ <span class="pf-v6-c-breadcrumb__item-divider">
205
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
206
+ </span>
206
207
 
207
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
208
- </li>
209
- <li class="pf-v6-c-breadcrumb__item">
210
- <span class="pf-v6-c-breadcrumb__item-divider">
211
- <i class="fas fa-angle-right" aria-hidden="true"></i>
212
- </span>
208
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
209
+ </li>
210
+ <li class="pf-v6-c-breadcrumb__item">
211
+ <span class="pf-v6-c-breadcrumb__item-divider">
212
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
213
+ </span>
213
214
 
214
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
215
- </li>
216
- <li class="pf-v6-c-breadcrumb__item">
217
- <span class="pf-v6-c-breadcrumb__item-divider">
218
- <i class="fas fa-angle-right" aria-hidden="true"></i>
219
- </span>
215
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
216
+ </li>
217
+ <li class="pf-v6-c-breadcrumb__item">
218
+ <span class="pf-v6-c-breadcrumb__item-divider">
219
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
220
+ </span>
220
221
 
221
- <a
222
- href="#"
223
- class="pf-v6-c-breadcrumb__link pf-m-current"
224
- aria-current="page"
225
- >Section landing</a>
226
- </li>
227
- </ol>
228
- </nav>
229
- </div>
230
- </section>
231
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
232
- <div class="pf-v6-c-page__main-body">
233
- <div class="pf-v6-c-content">
234
- <h3>Penta Hackathon Demo Page</h3>
235
- <p>A showcase of our new tokens being applied to create a new theme.</p>
222
+ <a
223
+ href="#"
224
+ class="pf-v6-c-breadcrumb__link pf-m-current"
225
+ aria-current="page"
226
+ >Section landing</a>
227
+ </li>
228
+ </ol>
229
+ </nav>
236
230
  </div>
237
- </div>
238
- </section>
239
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
240
- <div class="pf-v6-c-page__main-body">
241
- <div
242
- class="pf-v6-c-toolbar pf-m-inset-none"
243
- id="toolbar-simple-example"
244
- >
245
- <div class="pf-v6-c-toolbar__content">
246
- <div class="pf-v6-c-toolbar__content-section">
247
- <div class="pf-v6-c-toolbar__item">
248
- <button
249
- class="pf-v6-c-menu-toggle"
250
- type="button"
251
- aria-expanded="false"
252
- >
253
- <span class="pf-v6-c-menu-toggle__text">Dropdown menu</span>
254
- <span class="pf-v6-c-menu-toggle__controls">
255
- <span class="pf-v6-c-menu-toggle__toggle-icon">
256
- <i class="fas fa-caret-down" aria-hidden="true"></i>
231
+ </section>
232
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
233
+ <div class="pf-v6-c-page__main-body">
234
+ <div class="pf-v6-c-content">
235
+ <h3>Penta Hackathon Demo Page</h3>
236
+ <p>A showcase of our new tokens being applied to create a new theme.</p>
237
+ </div>
238
+ </div>
239
+ </section>
240
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
241
+ <div class="pf-v6-c-page__main-body">
242
+ <div
243
+ class="pf-v6-c-toolbar pf-m-inset-none"
244
+ id="toolbar-simple-example"
245
+ >
246
+ <div class="pf-v6-c-toolbar__content">
247
+ <div class="pf-v6-c-toolbar__content-section">
248
+ <div class="pf-v6-c-toolbar__item">
249
+ <button
250
+ class="pf-v6-c-menu-toggle"
251
+ type="button"
252
+ aria-expanded="false"
253
+ >
254
+ <span class="pf-v6-c-menu-toggle__text">Dropdown menu</span>
255
+ <span class="pf-v6-c-menu-toggle__controls">
256
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
257
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
258
+ </span>
257
259
  </span>
258
- </span>
259
- </button>
260
- </div>
261
- <div class="pf-v6-c-toolbar__item">
262
- <button
263
- class="pf-v6-c-menu-toggle"
264
- type="button"
265
- aria-expanded="false"
266
- >
267
- <span class="pf-v6-c-menu-toggle__text">Another one</span>
268
- <span class="pf-v6-c-menu-toggle__controls">
269
- <span class="pf-v6-c-menu-toggle__toggle-icon">
270
- <i class="fas fa-caret-down" aria-hidden="true"></i>
260
+ </button>
261
+ </div>
262
+ <div class="pf-v6-c-toolbar__item">
263
+ <button
264
+ class="pf-v6-c-menu-toggle"
265
+ type="button"
266
+ aria-expanded="false"
267
+ >
268
+ <span class="pf-v6-c-menu-toggle__text">Another one</span>
269
+ <span class="pf-v6-c-menu-toggle__controls">
270
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
271
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
272
+ </span>
271
273
  </span>
272
- </span>
273
- </button>
274
- </div>
275
- <div class="pf-v6-c-toolbar__group pf-m-align-end">
276
- <div class="pf-v6-c-toolbar__group pf-m-icon-button-group">
277
- <div class="pf-v6-c-toolbar__item">
278
- <button
279
- class="pf-v6-c-button pf-m-plain"
280
- type="button"
281
- aria-label="Remove"
282
- >
283
- <i class="fas fa-columns" aria-hidden="true"></i>
284
- </button>
274
+ </button>
275
+ </div>
276
+ <div class="pf-v6-c-toolbar__group pf-m-align-end">
277
+ <div class="pf-v6-c-toolbar__group pf-m-icon-button-group">
278
+ <div class="pf-v6-c-toolbar__item">
279
+ <button
280
+ class="pf-v6-c-button pf-m-plain"
281
+ type="button"
282
+ aria-label="Remove"
283
+ >
284
+ <i class="fas fa-columns" aria-hidden="true"></i>
285
+ </button>
286
+ </div>
287
+ <div class="pf-v6-c-toolbar__item">
288
+ <button
289
+ class="pf-v6-c-button pf-m-plain"
290
+ type="button"
291
+ aria-label="Remove"
292
+ >
293
+ <i class="fas fa-cog" aria-hidden="true"></i>
294
+ </button>
295
+ </div>
285
296
  </div>
286
297
  <div class="pf-v6-c-toolbar__item">
287
298
  <button
288
- class="pf-v6-c-button pf-m-plain"
299
+ class="pf-v6-c-button pf-m-primary"
289
300
  type="button"
290
- aria-label="Remove"
291
- >
292
- <i class="fas fa-cog" aria-hidden="true"></i>
293
- </button>
301
+ >Primary</button>
294
302
  </div>
295
303
  </div>
296
- <div class="pf-v6-c-toolbar__item">
297
- <button
298
- class="pf-v6-c-button pf-m-primary"
299
- type="button"
300
- >Primary</button>
301
- </div>
302
304
  </div>
303
305
  </div>
304
306
  </div>
305
- </div>
306
- <table
307
- class="pf-v6-c-table pf-m-grid-md"
308
- role="grid"
309
- aria-label="This is a table with checkboxes"
310
- id="page-id-table"
311
- >
312
- <thead class="pf-v6-c-table__thead">
313
- <tr class="pf-v6-c-table__tr" role="row">
314
- <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
315
- <label
316
- class="pf-v6-c-check pf-m-standalone"
317
- id="page-id-tablecheckrowheadcheck"
318
- for="page-id-tablecheckrowheadcheck-input"
319
- >
320
- <input
321
- class="pf-v6-c-check__input"
322
- type="checkbox"
323
- id="page-id-tablecheckrowheadcheck-input"
324
- name="page-id-tablecheckrowheadcheck-input"
325
- aria-label="Standalone check"
326
- />
327
- </label>
328
- </td>
329
-
330
- <th
331
- class="pf-v6-c-table__th"
332
- role="columnheader"
333
- scope="col"
334
- >Repositories</th>
335
-
336
- <th
337
- class="pf-v6-c-table__th"
338
- role="columnheader"
339
- scope="col"
340
- >Branches</th>
341
-
342
- <th
343
- class="pf-v6-c-table__th"
344
- role="columnheader"
345
- scope="col"
346
- >Pull requests</th>
347
-
348
- <th
349
- class="pf-v6-c-table__th"
350
- role="columnheader"
351
- scope="col"
352
- >Workspaces</th>
353
-
354
- <th
355
- class="pf-v6-c-table__th"
356
- role="columnheader"
357
- scope="col"
358
- >Last commit</th>
359
-
360
- <td class="pf-v6-c-table__td"></td>
361
-
362
- <td class="pf-v6-c-table__td"></td>
363
- </tr>
364
- </thead>
365
-
366
- <tbody class="pf-v6-c-table__tbody" role="rowgroup">
367
- <tr
368
- class="pf-v6-c-table__tr pf-m-clickable"
369
- role="row"
370
- tabindex="0"
371
- >
372
- <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
373
- <label
374
- class="pf-v6-c-check pf-m-standalone"
375
- id="page-id-tablecheckrow1check"
376
- for="page-id-tablecheckrow1check-input"
307
+ <table
308
+ class="pf-v6-c-table pf-m-grid-md"
309
+ role="grid"
310
+ aria-label="This is a table with checkboxes"
311
+ id="page-id-table"
312
+ >
313
+ <thead class="pf-v6-c-table__thead">
314
+ <tr class="pf-v6-c-table__tr" role="row">
315
+ <td
316
+ class="pf-v6-c-table__td pf-v6-c-table__check"
317
+ role="cell"
377
318
  >
378
- <input
379
- class="pf-v6-c-check__input"
380
- type="checkbox"
381
- id="page-id-tablecheckrow1check-input"
382
- name="page-id-tablecheckrow1check-input"
383
- aria-label="Standalone check"
384
- />
385
- </label>
386
- </td>
387
-
388
- <th
389
- class="pf-v6-c-table__th"
390
- role="columnheader"
391
- data-label="Repository name"
319
+ <label
320
+ class="pf-v6-c-check pf-m-standalone"
321
+ id="page-id-tablecheckrowheadcheck"
322
+ for="page-id-tablecheckrowheadcheck-input"
323
+ >
324
+ <input
325
+ class="pf-v6-c-check__input"
326
+ type="checkbox"
327
+ id="page-id-tablecheckrowheadcheck-input"
328
+ name="page-id-tablecheckrowheadcheck-input"
329
+ aria-label="Standalone check"
330
+ />
331
+ </label>
332
+ </td>
333
+
334
+ <th
335
+ class="pf-v6-c-table__th"
336
+ role="columnheader"
337
+ scope="col"
338
+ >Repositories</th>
339
+
340
+ <th
341
+ class="pf-v6-c-table__th"
342
+ role="columnheader"
343
+ scope="col"
344
+ >Branches</th>
345
+
346
+ <th
347
+ class="pf-v6-c-table__th"
348
+ role="columnheader"
349
+ scope="col"
350
+ >Pull requests</th>
351
+
352
+ <th
353
+ class="pf-v6-c-table__th"
354
+ role="columnheader"
355
+ scope="col"
356
+ >Workspaces</th>
357
+
358
+ <th
359
+ class="pf-v6-c-table__th"
360
+ role="columnheader"
361
+ scope="col"
362
+ >Last commit</th>
363
+
364
+ <td class="pf-v6-c-table__td"></td>
365
+
366
+ <td class="pf-v6-c-table__td"></td>
367
+ </tr>
368
+ </thead>
369
+
370
+ <tbody class="pf-v6-c-table__tbody" role="rowgroup">
371
+ <tr
372
+ class="pf-v6-c-table__tr pf-m-clickable"
373
+ role="row"
374
+ tabindex="0"
392
375
  >
393
- <div>
394
- <div id="page-id-table-node1">Node 1</div>
395
- </div>
396
- </th>
397
-
398
- <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
399
- <div class="pf-v6-l-flex pf-m-space-items-sm">
400
- <div class="pf-v6-l-flex__item">
401
- <i class="fas fa-code-branch"></i>
376
+ <td
377
+ class="pf-v6-c-table__td pf-v6-c-table__check"
378
+ role="cell"
379
+ >
380
+ <label
381
+ class="pf-v6-c-check pf-m-standalone"
382
+ id="page-id-tablecheckrow1check"
383
+ for="page-id-tablecheckrow1check-input"
384
+ >
385
+ <input
386
+ class="pf-v6-c-check__input"
387
+ type="checkbox"
388
+ id="page-id-tablecheckrow1check-input"
389
+ name="page-id-tablecheckrow1check-input"
390
+ aria-label="Standalone check"
391
+ />
392
+ </label>
393
+ </td>
394
+
395
+ <th
396
+ class="pf-v6-c-table__th"
397
+ role="columnheader"
398
+ data-label="Repository name"
399
+ >
400
+ <div>
401
+ <div id="page-id-table-node1">Node 1</div>
402
402
  </div>
403
- <div class="pf-v6-l-flex__item">10</div>
404
- </div>
405
- </td>
406
- <td
407
- class="pf-v6-c-table__td"
408
- role="cell"
409
- data-label="Pull requests"
410
- >
411
- <div class="pf-v6-l-flex pf-m-space-items-sm">
412
- <div class="pf-v6-l-flex__item">
413
- <i class="fas fa-code"></i>
403
+ </th>
404
+
405
+ <td
406
+ class="pf-v6-c-table__td"
407
+ role="cell"
408
+ data-label="Branches"
409
+ >
410
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
411
+ <div class="pf-v6-l-flex__item">
412
+ <i class="fas fa-code-branch"></i>
413
+ </div>
414
+ <div class="pf-v6-l-flex__item">10</div>
414
415
  </div>
415
- <div class="pf-v6-l-flex__item">25</div>
416
- </div>
417
- </td>
418
- <td
419
- class="pf-v6-c-table__td"
420
- role="cell"
421
- data-label="Workspaces"
422
- >
423
- <div class="pf-v6-l-flex pf-m-space-items-sm">
424
- <div class="pf-v6-l-flex__item">
425
- <i class="fas fa-cube"></i>
416
+ </td>
417
+ <td
418
+ class="pf-v6-c-table__td"
419
+ role="cell"
420
+ data-label="Pull requests"
421
+ >
422
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
423
+ <div class="pf-v6-l-flex__item">
424
+ <i class="fas fa-code"></i>
425
+ </div>
426
+ <div class="pf-v6-l-flex__item">25</div>
426
427
  </div>
427
- <div class="pf-v6-l-flex__item">5</div>
428
- </div>
429
- </td>
430
- <td
431
- class="pf-v6-c-table__td"
432
- role="cell"
433
- data-label="Last commit"
434
- >2 days ago</td>
435
- <td class="pf-v6-c-table__td" role="cell" data-label="Action">
436
- <a href="/some/path">Action link</a>
437
- </td>
438
-
439
- <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
440
- <button
441
- class="pf-v6-c-menu-toggle pf-m-plain"
442
- type="button"
443
- aria-expanded="false"
444
- aria-label="Table actions"
428
+ </td>
429
+ <td
430
+ class="pf-v6-c-table__td"
431
+ role="cell"
432
+ data-label="Workspaces"
445
433
  >
446
- <span class="pf-v6-c-menu-toggle__icon">
447
- <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
448
- </span>
449
- <span class="pf-v6-c-menu-toggle__icon">
450
- <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
451
- </span>
452
- </button>
453
- </td>
454
- </tr>
455
-
456
- <tr
457
- class="pf-v6-c-table__tr pf-m-clickable pf-m-selected"
458
- role="row"
459
- tabindex="0"
460
- >
461
- <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
462
- <label
463
- class="pf-v6-c-check pf-m-standalone"
464
- id="page-id-tablecheckrow2check"
465
- for="page-id-tablecheckrow2check-input"
434
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
435
+ <div class="pf-v6-l-flex__item">
436
+ <i class="fas fa-cube"></i>
437
+ </div>
438
+ <div class="pf-v6-l-flex__item">5</div>
439
+ </div>
440
+ </td>
441
+ <td
442
+ class="pf-v6-c-table__td"
443
+ role="cell"
444
+ data-label="Last commit"
445
+ >2 days ago</td>
446
+ <td class="pf-v6-c-table__td" role="cell" data-label="Action">
447
+ <a href="/some/path">Action link</a>
448
+ </td>
449
+
450
+ <td
451
+ class="pf-v6-c-table__td pf-v6-c-table__action"
452
+ role="cell"
466
453
  >
467
- <input
468
- class="pf-v6-c-check__input"
469
- type="checkbox"
470
- id="page-id-tablecheckrow2check-input"
471
- name="page-id-tablecheckrow2check-input"
472
- aria-label="Standalone check"
473
- />
474
- </label>
475
- </td>
476
-
477
- <th
478
- class="pf-v6-c-table__th"
479
- role="columnheader"
480
- data-label="Repository name"
454
+ <button
455
+ class="pf-v6-c-menu-toggle pf-m-plain"
456
+ type="button"
457
+ aria-expanded="false"
458
+ aria-label="Table actions"
459
+ >
460
+ <span class="pf-v6-c-menu-toggle__icon">
461
+ <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
462
+ </span>
463
+ <span class="pf-v6-c-menu-toggle__icon">
464
+ <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
465
+ </span>
466
+ </button>
467
+ </td>
468
+ </tr>
469
+
470
+ <tr
471
+ class="pf-v6-c-table__tr pf-m-clickable pf-m-selected"
472
+ role="row"
473
+ tabindex="0"
481
474
  >
482
- <div>
483
- <div id="page-id-table-node2">Node 2</div>
484
- </div>
485
- </th>
486
-
487
- <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
488
- <div class="pf-v6-l-flex pf-m-space-items-sm">
489
- <div class="pf-v6-l-flex__item">
490
- <i class="fas fa-code-branch"></i>
475
+ <td
476
+ class="pf-v6-c-table__td pf-v6-c-table__check"
477
+ role="cell"
478
+ >
479
+ <label
480
+ class="pf-v6-c-check pf-m-standalone"
481
+ id="page-id-tablecheckrow2check"
482
+ for="page-id-tablecheckrow2check-input"
483
+ >
484
+ <input
485
+ class="pf-v6-c-check__input"
486
+ type="checkbox"
487
+ id="page-id-tablecheckrow2check-input"
488
+ name="page-id-tablecheckrow2check-input"
489
+ aria-label="Standalone check"
490
+ />
491
+ </label>
492
+ </td>
493
+
494
+ <th
495
+ class="pf-v6-c-table__th"
496
+ role="columnheader"
497
+ data-label="Repository name"
498
+ >
499
+ <div>
500
+ <div id="page-id-table-node2">Node 2</div>
491
501
  </div>
492
- <div class="pf-v6-l-flex__item">8</div>
493
- </div>
494
- </td>
495
- <td
496
- class="pf-v6-c-table__td"
497
- role="cell"
498
- data-label="Pull requests"
499
- >
500
- <div class="pf-v6-l-flex pf-m-space-items-sm">
501
- <div class="pf-v6-l-flex__item">
502
- <i class="fas fa-code"></i>
502
+ </th>
503
+
504
+ <td
505
+ class="pf-v6-c-table__td"
506
+ role="cell"
507
+ data-label="Branches"
508
+ >
509
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
510
+ <div class="pf-v6-l-flex__item">
511
+ <i class="fas fa-code-branch"></i>
512
+ </div>
513
+ <div class="pf-v6-l-flex__item">8</div>
503
514
  </div>
504
- <div class="pf-v6-l-flex__item">30</div>
505
- </div>
506
- </td>
507
- <td
508
- class="pf-v6-c-table__td"
509
- role="cell"
510
- data-label="Workspaces"
511
- >
512
- <div class="pf-v6-l-flex pf-m-space-items-sm">
513
- <div class="pf-v6-l-flex__item">
514
- <i class="fas fa-cube"></i>
515
+ </td>
516
+ <td
517
+ class="pf-v6-c-table__td"
518
+ role="cell"
519
+ data-label="Pull requests"
520
+ >
521
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
522
+ <div class="pf-v6-l-flex__item">
523
+ <i class="fas fa-code"></i>
524
+ </div>
525
+ <div class="pf-v6-l-flex__item">30</div>
515
526
  </div>
516
- <div class="pf-v6-l-flex__item">2</div>
517
- </div>
518
- </td>
519
- <td
520
- class="pf-v6-c-table__td"
521
- role="cell"
522
- data-label="Last commit"
523
- >2 days ago</td>
524
- <td class="pf-v6-c-table__td" role="cell" data-label="Action">
525
- <a href="/some/path">Action link</a>
526
- </td>
527
-
528
- <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
529
- <button
530
- class="pf-v6-c-menu-toggle pf-m-plain"
531
- type="button"
532
- aria-expanded="false"
533
- aria-label="Table actions"
527
+ </td>
528
+ <td
529
+ class="pf-v6-c-table__td"
530
+ role="cell"
531
+ data-label="Workspaces"
534
532
  >
535
- <span class="pf-v6-c-menu-toggle__icon">
536
- <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
537
- </span>
538
- <span class="pf-v6-c-menu-toggle__icon">
539
- <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
540
- </span>
541
- </button>
542
- </td>
543
- </tr>
544
-
545
- <tr
546
- class="pf-v6-c-table__tr pf-m-clickable"
547
- role="row"
548
- tabindex="0"
549
- >
550
- <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
551
- <label
552
- class="pf-v6-c-check pf-m-standalone"
553
- id="page-id-tablecheckrow3check"
554
- for="page-id-tablecheckrow3check-input"
533
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
534
+ <div class="pf-v6-l-flex__item">
535
+ <i class="fas fa-cube"></i>
536
+ </div>
537
+ <div class="pf-v6-l-flex__item">2</div>
538
+ </div>
539
+ </td>
540
+ <td
541
+ class="pf-v6-c-table__td"
542
+ role="cell"
543
+ data-label="Last commit"
544
+ >2 days ago</td>
545
+ <td class="pf-v6-c-table__td" role="cell" data-label="Action">
546
+ <a href="/some/path">Action link</a>
547
+ </td>
548
+
549
+ <td
550
+ class="pf-v6-c-table__td pf-v6-c-table__action"
551
+ role="cell"
555
552
  >
556
- <input
557
- class="pf-v6-c-check__input"
558
- type="checkbox"
559
- id="page-id-tablecheckrow3check-input"
560
- name="page-id-tablecheckrow3check-input"
561
- aria-label="Standalone check"
562
- />
563
- </label>
564
- </td>
565
-
566
- <th
567
- class="pf-v6-c-table__th"
568
- role="columnheader"
569
- data-label="Repository name"
553
+ <button
554
+ class="pf-v6-c-menu-toggle pf-m-plain"
555
+ type="button"
556
+ aria-expanded="false"
557
+ aria-label="Table actions"
558
+ >
559
+ <span class="pf-v6-c-menu-toggle__icon">
560
+ <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
561
+ </span>
562
+ <span class="pf-v6-c-menu-toggle__icon">
563
+ <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
564
+ </span>
565
+ </button>
566
+ </td>
567
+ </tr>
568
+
569
+ <tr
570
+ class="pf-v6-c-table__tr pf-m-clickable"
571
+ role="row"
572
+ tabindex="0"
570
573
  >
571
- <div>
572
- <div id="page-id-table-node3">Node 3</div>
573
- </div>
574
- </th>
575
-
576
- <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
577
- <div class="pf-v6-l-flex pf-m-space-items-sm">
578
- <div class="pf-v6-l-flex__item">
579
- <i class="fas fa-code-branch"></i>
574
+ <td
575
+ class="pf-v6-c-table__td pf-v6-c-table__check"
576
+ role="cell"
577
+ >
578
+ <label
579
+ class="pf-v6-c-check pf-m-standalone"
580
+ id="page-id-tablecheckrow3check"
581
+ for="page-id-tablecheckrow3check-input"
582
+ >
583
+ <input
584
+ class="pf-v6-c-check__input"
585
+ type="checkbox"
586
+ id="page-id-tablecheckrow3check-input"
587
+ name="page-id-tablecheckrow3check-input"
588
+ aria-label="Standalone check"
589
+ />
590
+ </label>
591
+ </td>
592
+
593
+ <th
594
+ class="pf-v6-c-table__th"
595
+ role="columnheader"
596
+ data-label="Repository name"
597
+ >
598
+ <div>
599
+ <div id="page-id-table-node3">Node 3</div>
580
600
  </div>
581
- <div class="pf-v6-l-flex__item">12</div>
582
- </div>
583
- </td>
584
- <td
585
- class="pf-v6-c-table__td"
586
- role="cell"
587
- data-label="Pull requests"
588
- >
589
- <div class="pf-v6-l-flex pf-m-space-items-sm">
590
- <div class="pf-v6-l-flex__item">
591
- <i class="fas fa-code"></i>
601
+ </th>
602
+
603
+ <td
604
+ class="pf-v6-c-table__td"
605
+ role="cell"
606
+ data-label="Branches"
607
+ >
608
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
609
+ <div class="pf-v6-l-flex__item">
610
+ <i class="fas fa-code-branch"></i>
611
+ </div>
612
+ <div class="pf-v6-l-flex__item">12</div>
592
613
  </div>
593
- <div class="pf-v6-l-flex__item">48</div>
594
- </div>
595
- </td>
596
- <td
597
- class="pf-v6-c-table__td"
598
- role="cell"
599
- data-label="Workspaces"
600
- >
601
- <div class="pf-v6-l-flex pf-m-space-items-sm">
602
- <div class="pf-v6-l-flex__item">
603
- <i class="fas fa-cube"></i>
614
+ </td>
615
+ <td
616
+ class="pf-v6-c-table__td"
617
+ role="cell"
618
+ data-label="Pull requests"
619
+ >
620
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
621
+ <div class="pf-v6-l-flex__item">
622
+ <i class="fas fa-code"></i>
623
+ </div>
624
+ <div class="pf-v6-l-flex__item">48</div>
604
625
  </div>
605
- <div class="pf-v6-l-flex__item">13</div>
606
- </div>
607
- </td>
608
- <td
609
- class="pf-v6-c-table__td"
610
- role="cell"
611
- data-label="Last commit"
612
- >30 days ago</td>
613
- <td class="pf-v6-c-table__td" role="cell" data-label="Action">
614
- <a href="#">Action link</a>
615
- </td>
616
-
617
- <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
618
- <button
619
- class="pf-v6-c-menu-toggle pf-m-plain"
620
- type="button"
621
- aria-expanded="false"
622
- aria-label="Table actions"
626
+ </td>
627
+ <td
628
+ class="pf-v6-c-table__td"
629
+ role="cell"
630
+ data-label="Workspaces"
623
631
  >
624
- <span class="pf-v6-c-menu-toggle__icon">
625
- <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
626
- </span>
627
- <span class="pf-v6-c-menu-toggle__icon">
628
- <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
629
- </span>
630
- </button>
631
- </td>
632
- </tr>
633
-
634
- <tr
635
- class="pf-v6-c-table__tr pf-m-clickable"
636
- role="row"
637
- tabindex="0"
638
- >
639
- <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
640
- <label
641
- class="pf-v6-c-check pf-m-standalone"
642
- id="page-id-tablecheckrow4check"
643
- for="page-id-tablecheckrow4check-input"
632
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
633
+ <div class="pf-v6-l-flex__item">
634
+ <i class="fas fa-cube"></i>
635
+ </div>
636
+ <div class="pf-v6-l-flex__item">13</div>
637
+ </div>
638
+ </td>
639
+ <td
640
+ class="pf-v6-c-table__td"
641
+ role="cell"
642
+ data-label="Last commit"
643
+ >30 days ago</td>
644
+ <td class="pf-v6-c-table__td" role="cell" data-label="Action">
645
+ <a href="#">Action link</a>
646
+ </td>
647
+
648
+ <td
649
+ class="pf-v6-c-table__td pf-v6-c-table__action"
650
+ role="cell"
644
651
  >
645
- <input
646
- class="pf-v6-c-check__input"
647
- type="checkbox"
648
- id="page-id-tablecheckrow4check-input"
649
- name="page-id-tablecheckrow4check-input"
650
- aria-label="Standalone check"
651
- />
652
- </label>
653
- </td>
654
-
655
- <th
656
- class="pf-v6-c-table__th"
657
- role="columnheader"
658
- data-label="Repository name"
652
+ <button
653
+ class="pf-v6-c-menu-toggle pf-m-plain"
654
+ type="button"
655
+ aria-expanded="false"
656
+ aria-label="Table actions"
657
+ >
658
+ <span class="pf-v6-c-menu-toggle__icon">
659
+ <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
660
+ </span>
661
+ <span class="pf-v6-c-menu-toggle__icon">
662
+ <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
663
+ </span>
664
+ </button>
665
+ </td>
666
+ </tr>
667
+
668
+ <tr
669
+ class="pf-v6-c-table__tr pf-m-clickable"
670
+ role="row"
671
+ tabindex="0"
659
672
  >
660
- <div>
661
- <div id="page-id-table-node4">Node 4</div>
662
- </div>
663
- </th>
664
-
665
- <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
666
- <div class="pf-v6-l-flex pf-m-space-items-sm">
667
- <div class="pf-v6-l-flex__item">
668
- <i class="fas fa-code-branch"></i>
673
+ <td
674
+ class="pf-v6-c-table__td pf-v6-c-table__check"
675
+ role="cell"
676
+ >
677
+ <label
678
+ class="pf-v6-c-check pf-m-standalone"
679
+ id="page-id-tablecheckrow4check"
680
+ for="page-id-tablecheckrow4check-input"
681
+ >
682
+ <input
683
+ class="pf-v6-c-check__input"
684
+ type="checkbox"
685
+ id="page-id-tablecheckrow4check-input"
686
+ name="page-id-tablecheckrow4check-input"
687
+ aria-label="Standalone check"
688
+ />
689
+ </label>
690
+ </td>
691
+
692
+ <th
693
+ class="pf-v6-c-table__th"
694
+ role="columnheader"
695
+ data-label="Repository name"
696
+ >
697
+ <div>
698
+ <div id="page-id-table-node4">Node 4</div>
669
699
  </div>
670
- <div class="pf-v6-l-flex__item">3</div>
671
- </div>
672
- </td>
673
- <td
674
- class="pf-v6-c-table__td"
675
- role="cell"
676
- data-label="Pull requests"
677
- >
678
- <div class="pf-v6-l-flex pf-m-space-items-sm">
679
- <div class="pf-v6-l-flex__item">
680
- <i class="fas fa-code"></i>
700
+ </th>
701
+
702
+ <td
703
+ class="pf-v6-c-table__td"
704
+ role="cell"
705
+ data-label="Branches"
706
+ >
707
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
708
+ <div class="pf-v6-l-flex__item">
709
+ <i class="fas fa-code-branch"></i>
710
+ </div>
711
+ <div class="pf-v6-l-flex__item">3</div>
681
712
  </div>
682
- <div class="pf-v6-l-flex__item">8</div>
683
- </div>
684
- </td>
685
- <td
686
- class="pf-v6-c-table__td"
687
- role="cell"
688
- data-label="Workspaces"
689
- >
690
- <div class="pf-v6-l-flex pf-m-space-items-sm">
691
- <div class="pf-v6-l-flex__item">
692
- <i class="fas fa-cube"></i>
713
+ </td>
714
+ <td
715
+ class="pf-v6-c-table__td"
716
+ role="cell"
717
+ data-label="Pull requests"
718
+ >
719
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
720
+ <div class="pf-v6-l-flex__item">
721
+ <i class="fas fa-code"></i>
722
+ </div>
723
+ <div class="pf-v6-l-flex__item">8</div>
693
724
  </div>
694
- <div class="pf-v6-l-flex__item">20</div>
695
- </div>
696
- </td>
697
- <td
698
- class="pf-v6-c-table__td"
699
- role="cell"
700
- data-label="Last commit"
701
- >8 days ago</td>
702
- <td class="pf-v6-c-table__td" role="cell" data-label="Action">
703
- <a href="/some/path">Action link</a>
704
- </td>
705
-
706
- <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
707
- <button
708
- class="pf-v6-c-menu-toggle pf-m-plain"
709
- type="button"
710
- aria-expanded="false"
711
- aria-label="Table actions"
725
+ </td>
726
+ <td
727
+ class="pf-v6-c-table__td"
728
+ role="cell"
729
+ data-label="Workspaces"
712
730
  >
713
- <span class="pf-v6-c-menu-toggle__icon">
714
- <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
715
- </span>
716
- <span class="pf-v6-c-menu-toggle__icon">
717
- <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
718
- </span>
719
- </button>
720
- </td>
721
- </tr>
722
-
723
- <tr
724
- class="pf-v6-c-table__tr pf-m-clickable"
725
- role="row"
726
- tabindex="0"
727
- >
728
- <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
729
- <label
730
- class="pf-v6-c-check pf-m-standalone"
731
- id="page-id-tablecheckrow5check"
732
- for="page-id-tablecheckrow5check-input"
731
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
732
+ <div class="pf-v6-l-flex__item">
733
+ <i class="fas fa-cube"></i>
734
+ </div>
735
+ <div class="pf-v6-l-flex__item">20</div>
736
+ </div>
737
+ </td>
738
+ <td
739
+ class="pf-v6-c-table__td"
740
+ role="cell"
741
+ data-label="Last commit"
742
+ >8 days ago</td>
743
+ <td class="pf-v6-c-table__td" role="cell" data-label="Action">
744
+ <a href="/some/path">Action link</a>
745
+ </td>
746
+
747
+ <td
748
+ class="pf-v6-c-table__td pf-v6-c-table__action"
749
+ role="cell"
733
750
  >
734
- <input
735
- class="pf-v6-c-check__input"
736
- type="checkbox"
737
- id="page-id-tablecheckrow5check-input"
738
- name="page-id-tablecheckrow5check-input"
739
- aria-label="Standalone check"
740
- />
741
- </label>
742
- </td>
743
- <td
744
- class="pf-v6-c-table__td"
745
- role="cell"
746
- data-label="Repository name"
751
+ <button
752
+ class="pf-v6-c-menu-toggle pf-m-plain"
753
+ type="button"
754
+ aria-expanded="false"
755
+ aria-label="Table actions"
756
+ >
757
+ <span class="pf-v6-c-menu-toggle__icon">
758
+ <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
759
+ </span>
760
+ <span class="pf-v6-c-menu-toggle__icon">
761
+ <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
762
+ </span>
763
+ </button>
764
+ </td>
765
+ </tr>
766
+
767
+ <tr
768
+ class="pf-v6-c-table__tr pf-m-clickable"
769
+ role="row"
770
+ tabindex="0"
747
771
  >
748
- <div>
749
- <div id="page-id-table-node5">Node 5</div>
750
- </div>
751
- </td>
752
- <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
753
- <div class="pf-v6-l-flex pf-m-space-items-sm">
754
- <div class="pf-v6-l-flex__item">
755
- <i class="fas fa-code-branch"></i>
772
+ <td
773
+ class="pf-v6-c-table__td pf-v6-c-table__check"
774
+ role="cell"
775
+ >
776
+ <label
777
+ class="pf-v6-c-check pf-m-standalone"
778
+ id="page-id-tablecheckrow5check"
779
+ for="page-id-tablecheckrow5check-input"
780
+ >
781
+ <input
782
+ class="pf-v6-c-check__input"
783
+ type="checkbox"
784
+ id="page-id-tablecheckrow5check-input"
785
+ name="page-id-tablecheckrow5check-input"
786
+ aria-label="Standalone check"
787
+ />
788
+ </label>
789
+ </td>
790
+ <td
791
+ class="pf-v6-c-table__td"
792
+ role="cell"
793
+ data-label="Repository name"
794
+ >
795
+ <div>
796
+ <div id="page-id-table-node5">Node 5</div>
756
797
  </div>
757
- <div class="pf-v6-l-flex__item">34</div>
758
- </div>
759
- </td>
760
- <td
761
- class="pf-v6-c-table__td"
762
- role="cell"
763
- data-label="Pull requests"
764
- >
765
- <div class="pf-v6-l-flex pf-m-space-items-sm">
766
- <div class="pf-v6-l-flex__item">
767
- <i class="fas fa-code"></i>
798
+ </td>
799
+ <td
800
+ class="pf-v6-c-table__td"
801
+ role="cell"
802
+ data-label="Branches"
803
+ >
804
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
805
+ <div class="pf-v6-l-flex__item">
806
+ <i class="fas fa-code-branch"></i>
807
+ </div>
808
+ <div class="pf-v6-l-flex__item">34</div>
768
809
  </div>
769
- <div class="pf-v6-l-flex__item">21</div>
770
- </div>
771
- </td>
772
- <td
773
- class="pf-v6-c-table__td"
774
- role="cell"
775
- data-label="Workspaces"
776
- >
777
- <div class="pf-v6-l-flex pf-m-space-items-sm">
778
- <div class="pf-v6-l-flex__item">
779
- <i class="fas fa-cube"></i>
810
+ </td>
811
+ <td
812
+ class="pf-v6-c-table__td"
813
+ role="cell"
814
+ data-label="Pull requests"
815
+ >
816
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
817
+ <div class="pf-v6-l-flex__item">
818
+ <i class="fas fa-code"></i>
819
+ </div>
820
+ <div class="pf-v6-l-flex__item">21</div>
780
821
  </div>
781
- <div class="pf-v6-l-flex__item">26</div>
782
- </div>
783
- </td>
784
- <td
785
- class="pf-v6-c-table__td"
786
- role="cell"
787
- data-label="Last commit"
788
- >2 days ago</td>
789
- <td class="pf-v6-c-table__td" role="cell" data-label="Action">
790
- <a href="/some/path">Action link</a>
791
- </td>
792
-
793
- <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
794
- <button
795
- class="pf-v6-c-menu-toggle pf-m-plain"
796
- type="button"
797
- aria-expanded="false"
798
- aria-label="Table actions"
822
+ </td>
823
+ <td
824
+ class="pf-v6-c-table__td"
825
+ role="cell"
826
+ data-label="Workspaces"
799
827
  >
800
- <span class="pf-v6-c-menu-toggle__icon">
801
- <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
802
- </span>
803
- <span class="pf-v6-c-menu-toggle__icon">
804
- <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
805
- </span>
806
- </button>
807
- </td>
808
- </tr>
809
- </tbody>
810
- </table>
811
- </div>
812
- </section>
813
- </div>
814
- </main>
828
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
829
+ <div class="pf-v6-l-flex__item">
830
+ <i class="fas fa-cube"></i>
831
+ </div>
832
+ <div class="pf-v6-l-flex__item">26</div>
833
+ </div>
834
+ </td>
835
+ <td
836
+ class="pf-v6-c-table__td"
837
+ role="cell"
838
+ data-label="Last commit"
839
+ >2 days ago</td>
840
+ <td class="pf-v6-c-table__td" role="cell" data-label="Action">
841
+ <a href="/some/path">Action link</a>
842
+ </td>
843
+
844
+ <td
845
+ class="pf-v6-c-table__td pf-v6-c-table__action"
846
+ role="cell"
847
+ >
848
+ <button
849
+ class="pf-v6-c-menu-toggle pf-m-plain"
850
+ type="button"
851
+ aria-expanded="false"
852
+ aria-label="Table actions"
853
+ >
854
+ <span class="pf-v6-c-menu-toggle__icon">
855
+ <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
856
+ </span>
857
+ <span class="pf-v6-c-menu-toggle__icon">
858
+ <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
859
+ </span>
860
+ </button>
861
+ </td>
862
+ </tr>
863
+ </tbody>
864
+ </table>
865
+ </div>
866
+ </section>
867
+ </div>
868
+ </main>
869
+ </div>
815
870
  </div>
816
871
 
817
872
  ```