@patternfly/patternfly 6.0.0-alpha.102 → 6.0.0-alpha.104

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 (40) hide show
  1. package/components/Check/check.css +2 -2
  2. package/components/Check/check.scss +2 -2
  3. package/components/Drawer/drawer.css +5 -4
  4. package/components/Drawer/drawer.scss +7 -6
  5. package/components/Page/page.css +24 -23
  6. package/components/Page/page.scss +24 -23
  7. package/components/Table/table.css +0 -37
  8. package/components/Table/table.scss +0 -49
  9. package/docs/components/Drawer/examples/Drawer.md +2 -1
  10. package/docs/components/Page/deprecated/PageHeader.md +113 -99
  11. package/docs/components/Page/examples/Page.md +114 -100
  12. package/docs/demos/AboutModal/examples/AboutModal.md +81 -79
  13. package/docs/demos/Alert/examples/Alert.md +551 -524
  14. package/docs/demos/BackToTop/examples/BackToTop.md +211 -209
  15. package/docs/demos/Banner/examples/Banner.md +420 -412
  16. package/docs/demos/CardView/examples/CardView.md +1302 -1297
  17. package/docs/demos/ContextSelector/examples/ContextSelector.md +536 -523
  18. package/docs/demos/Dashboard/examples/Dashboard.md +1344 -1314
  19. package/docs/demos/DataList/examples/DataList.md +3006 -2958
  20. package/docs/demos/DescriptionList/examples/DescriptionList.md +532 -518
  21. package/docs/demos/Drawer/examples/Drawer.md +544 -528
  22. package/docs/demos/JumpLinks/examples/JumpLinks.md +915 -897
  23. package/docs/demos/Masthead/examples/Masthead.md +729 -711
  24. package/docs/demos/Modal/examples/Modal.md +486 -474
  25. package/docs/demos/Nav/examples/Nav.md +528 -510
  26. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +440 -435
  27. package/docs/demos/Page/examples/Page.md +1656 -1633
  28. package/docs/demos/Page/examples/Penta.md +632 -577
  29. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5222 -5080
  30. package/docs/demos/Skeleton/examples/Skeleton.md +177 -175
  31. package/docs/demos/Table/examples/Table.md +14137 -13972
  32. package/docs/demos/Tabs/examples/Tabs.md +2206 -2138
  33. package/docs/demos/Toolbar/examples/Toolbar.md +1322 -1269
  34. package/docs/demos/Wizard/examples/Wizard.md +1571 -1553
  35. package/package.json +1 -1
  36. package/patternfly-no-globals.css +31 -66
  37. package/patternfly-theme-dark-unversioned.css +31 -66
  38. package/patternfly.css +31 -66
  39. package/patternfly.min.css +1 -1
  40. package/patternfly.min.css.map +1 -1
@@ -443,77 +443,197 @@ section: components
443
443
  </nav>
444
444
  </div>
445
445
  </div>
446
- <main
447
- class="pf-v6-c-page__main"
448
- tabindex="-1"
449
- id="main-content-toolbar-pagination-management-example"
450
- >
451
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
452
- <div class="pf-v6-c-page__main-body">
453
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
454
- <ol class="pf-v6-c-breadcrumb__list" role="list">
455
- <li class="pf-v6-c-breadcrumb__item">
456
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
457
- </li>
458
- <li class="pf-v6-c-breadcrumb__item">
459
- <span class="pf-v6-c-breadcrumb__item-divider">
460
- <i class="fas fa-angle-right" aria-hidden="true"></i>
461
- </span>
446
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
447
+ <main
448
+ class="pf-v6-c-page__main"
449
+ tabindex="-1"
450
+ id="main-content-toolbar-pagination-management-example"
451
+ >
452
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
453
+ <div class="pf-v6-c-page__main-body">
454
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
455
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
456
+ <li class="pf-v6-c-breadcrumb__item">
457
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
458
+ </li>
459
+ <li class="pf-v6-c-breadcrumb__item">
460
+ <span class="pf-v6-c-breadcrumb__item-divider">
461
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
462
+ </span>
462
463
 
463
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
464
- </li>
465
- <li class="pf-v6-c-breadcrumb__item">
466
- <span class="pf-v6-c-breadcrumb__item-divider">
467
- <i class="fas fa-angle-right" aria-hidden="true"></i>
468
- </span>
464
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
465
+ </li>
466
+ <li class="pf-v6-c-breadcrumb__item">
467
+ <span class="pf-v6-c-breadcrumb__item-divider">
468
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
469
+ </span>
469
470
 
470
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
471
- </li>
472
- <li class="pf-v6-c-breadcrumb__item">
473
- <span class="pf-v6-c-breadcrumb__item-divider">
474
- <i class="fas fa-angle-right" aria-hidden="true"></i>
475
- </span>
471
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
472
+ </li>
473
+ <li class="pf-v6-c-breadcrumb__item">
474
+ <span class="pf-v6-c-breadcrumb__item-divider">
475
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
476
+ </span>
476
477
 
477
- <a
478
- href="#"
479
- class="pf-v6-c-breadcrumb__link pf-m-current"
480
- aria-current="page"
481
- >Section landing</a>
482
- </li>
483
- </ol>
484
- </nav>
485
- </div>
486
- </section>
487
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
488
- <div class="pf-v6-c-page__main-body">
489
- <div class="pf-v6-c-content">
490
- <h1>Main title</h1>
491
- <p>This is a full page demo.</p>
478
+ <a
479
+ href="#"
480
+ class="pf-v6-c-breadcrumb__link pf-m-current"
481
+ aria-current="page"
482
+ >Section landing</a>
483
+ </li>
484
+ </ol>
485
+ </nav>
492
486
  </div>
493
- </div>
494
- </section>
495
- <section class="pf-v6-c-page__main-section">
496
- <div class="pf-v6-c-toolbar" id="toolbar-with-validation-example">
497
- <div class="pf-v6-c-toolbar__content">
498
- <div class="pf-v6-c-toolbar__content-section">
499
- <div
500
- class="pf-v6-c-toolbar__group pf-m-toggle-group pf-m-show-on-lg"
501
- >
502
- <div class="pf-v6-c-toolbar__toggle pf-m-show">
503
- <button
504
- class="pf-v6-c-menu-toggle pf-m-plain"
505
- type="button"
506
- aria-expanded="false"
507
- aria-label="Show filters"
508
- aria-controls="toolbar-with-validation-example-expandable-content"
509
- >
510
- <span class="pf-v6-c-menu-toggle__icon">
511
- <i class="fas fa-filter" aria-hidden="true"></i>
512
- </span>
513
- </button>
514
- </div>
515
- <div class="pf-v6-c-toolbar__group pf-m-filter-group">
516
- <div class="pf-v6-c-toolbar__item">
487
+ </section>
488
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
489
+ <div class="pf-v6-c-page__main-body">
490
+ <div class="pf-v6-c-content">
491
+ <h1>Main title</h1>
492
+ <p>This is a full page demo.</p>
493
+ </div>
494
+ </div>
495
+ </section>
496
+ <section class="pf-v6-c-page__main-section">
497
+ <div class="pf-v6-c-toolbar" id="toolbar-with-validation-example">
498
+ <div class="pf-v6-c-toolbar__content">
499
+ <div class="pf-v6-c-toolbar__content-section">
500
+ <div
501
+ class="pf-v6-c-toolbar__group pf-m-toggle-group pf-m-show-on-lg"
502
+ >
503
+ <div class="pf-v6-c-toolbar__toggle pf-m-show">
504
+ <button
505
+ class="pf-v6-c-menu-toggle pf-m-plain"
506
+ type="button"
507
+ aria-expanded="false"
508
+ aria-label="Show filters"
509
+ aria-controls="toolbar-with-validation-example-expandable-content"
510
+ >
511
+ <span class="pf-v6-c-menu-toggle__icon">
512
+ <i class="fas fa-filter" aria-hidden="true"></i>
513
+ </span>
514
+ </button>
515
+ </div>
516
+ <div class="pf-v6-c-toolbar__group pf-m-filter-group">
517
+ <div class="pf-v6-c-toolbar__item">
518
+ <div
519
+ class="pf-v6-c-input-group"
520
+ aria-label="search filter"
521
+ role="group"
522
+ >
523
+ <div class="pf-v6-c-input-group__item">
524
+ <button
525
+ class="pf-v6-c-menu-toggle"
526
+ type="button"
527
+ aria-expanded="false"
528
+ id="toolbar-with-validation-example-month"
529
+ >
530
+ <span class="pf-v6-c-menu-toggle__icon">
531
+ <i class="fas fa-filter" aria-hidden="true"></i>
532
+ </span>
533
+ <span class="pf-v6-c-menu-toggle__text">Last month</span>
534
+ <span class="pf-v6-c-menu-toggle__controls">
535
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
536
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
537
+ </span>
538
+ </span>
539
+ </button>
540
+ </div>
541
+ <div class="pf-v6-c-input-group__item">
542
+ <div class="pf-v6-c-date-picker">
543
+ <div class="pf-v6-c-date-picker__input">
544
+ <div
545
+ class="pf-v6-c-input-group"
546
+ aria-label="search filter"
547
+ role="group"
548
+ >
549
+ <span class="pf-v6-c-form-control">
550
+ <input
551
+ type="text"
552
+ value="2020-03-05"
553
+ id="toolbar-with-validation-example-helper-text-input"
554
+ name="toolbar-with-validation-example-helper-text-input"
555
+ aria-label="Date picker"
556
+ />
557
+ </span>
558
+ <button
559
+ class="pf-v6-c-button pf-m-control"
560
+ type="button"
561
+ aria-label="Toggle date picker"
562
+ >
563
+ <i
564
+ class="fas fa-calendar-alt"
565
+ aria-hidden="true"
566
+ ></i>
567
+ </button>
568
+ </div>
569
+ </div>
570
+ <div class="pf-v6-c-date-picker__helper-text">
571
+ <div class="pf-v6-c-helper-text">
572
+ <div class="pf-v6-c-helper-text__item">
573
+ <span
574
+ class="pf-v6-c-helper-text__item-text"
575
+ >MM/DD/YYYY</span>
576
+ </div>
577
+ </div>
578
+ </div>
579
+ </div>
580
+ </div>
581
+ <div class="pf-v6-c-input-group__item">
582
+ <div class="pf-v6-c-date-picker">
583
+ <div class="pf-v6-c-date-picker__input">
584
+ <div
585
+ class="pf-v6-c-input-group"
586
+ aria-label="search filter"
587
+ role="group"
588
+ >
589
+ <span class="pf-v6-c-form-control pf-m-error">
590
+ <input
591
+ aria-invalid="true"
592
+ type="text"
593
+ value="2020-03-05"
594
+ id="toolbar-with-validation-example-invalid-input"
595
+ name="toolbar-with-validation-example-invalid-input"
596
+ aria-label="Date picker"
597
+ />
598
+ <span class="pf-v6-c-form-control__utilities">
599
+ <span
600
+ class="pf-v6-c-form-control__icon pf-m-status"
601
+ >
602
+ <i
603
+ class="fas fa-exclamation-circle"
604
+ aria-hidden="true"
605
+ ></i>
606
+ </span>
607
+ </span>
608
+ </span>
609
+ <button
610
+ class="pf-v6-c-button pf-m-control"
611
+ type="button"
612
+ aria-label="Toggle date picker"
613
+ >
614
+ <i
615
+ class="fas fa-calendar-alt"
616
+ aria-hidden="true"
617
+ ></i>
618
+ </button>
619
+ </div>
620
+ <div class="pf-v6-c-date-picker__helper-text"></div>
621
+ </div>
622
+ <div class="pf-v6-c-date-picker__helper-text">
623
+ <div class="pf-v6-c-helper-text">
624
+ <div class="pf-v6-c-helper-text__item">
625
+ <span
626
+ class="pf-v6-c-helper-text__item-text"
627
+ >Max: 08/10/2022</span>
628
+ </div>
629
+ </div>
630
+ </div>
631
+ </div>
632
+ </div>
633
+ </div>
634
+ </div>
635
+ </div>
636
+ <div class="pf-v6-c-toolbar__item pf-m-search-filter">
517
637
  <div
518
638
  class="pf-v6-c-input-group"
519
639
  aria-label="search filter"
@@ -524,12 +644,12 @@ section: components
524
644
  class="pf-v6-c-menu-toggle"
525
645
  type="button"
526
646
  aria-expanded="false"
527
- id="toolbar-with-validation-example-month"
647
+ id="toolbar-with-validation-example-search-filter-menu"
528
648
  >
529
649
  <span class="pf-v6-c-menu-toggle__icon">
530
650
  <i class="fas fa-filter" aria-hidden="true"></i>
531
651
  </span>
532
- <span class="pf-v6-c-menu-toggle__text">Last month</span>
652
+ <span class="pf-v6-c-menu-toggle__text">Description</span>
533
653
  <span class="pf-v6-c-menu-toggle__controls">
534
654
  <span class="pf-v6-c-menu-toggle__toggle-icon">
535
655
  <i class="fas fa-caret-down" aria-hidden="true"></i>
@@ -537,549 +657,457 @@ section: components
537
657
  </span>
538
658
  </button>
539
659
  </div>
540
- <div class="pf-v6-c-input-group__item">
541
- <div class="pf-v6-c-date-picker">
542
- <div class="pf-v6-c-date-picker__input">
543
- <div
544
- class="pf-v6-c-input-group"
545
- aria-label="search filter"
546
- role="group"
547
- >
548
- <span class="pf-v6-c-form-control">
549
- <input
550
- type="text"
551
- value="2020-03-05"
552
- id="toolbar-with-validation-example-helper-text-input"
553
- name="toolbar-with-validation-example-helper-text-input"
554
- aria-label="Date picker"
555
- />
556
- </span>
557
- <button
558
- class="pf-v6-c-button pf-m-control"
559
- type="button"
560
- aria-label="Toggle date picker"
561
- >
562
- <i class="fas fa-calendar-alt" aria-hidden="true"></i>
563
- </button>
564
- </div>
565
- </div>
566
- <div class="pf-v6-c-date-picker__helper-text">
567
- <div class="pf-v6-c-helper-text">
568
- <div class="pf-v6-c-helper-text__item">
569
- <span
570
- class="pf-v6-c-helper-text__item-text"
571
- >MM/DD/YYYY</span>
572
- </div>
573
- </div>
574
- </div>
575
- </div>
576
- </div>
577
- <div class="pf-v6-c-input-group__item">
578
- <div class="pf-v6-c-date-picker">
579
- <div class="pf-v6-c-date-picker__input">
580
- <div
581
- class="pf-v6-c-input-group"
582
- aria-label="search filter"
583
- role="group"
584
- >
585
- <span class="pf-v6-c-form-control pf-m-error">
586
- <input
587
- aria-invalid="true"
588
- type="text"
589
- value="2020-03-05"
590
- id="toolbar-with-validation-example-invalid-input"
591
- name="toolbar-with-validation-example-invalid-input"
592
- aria-label="Date picker"
593
- />
594
- <span class="pf-v6-c-form-control__utilities">
595
- <span
596
- class="pf-v6-c-form-control__icon pf-m-status"
597
- >
598
- <i
599
- class="fas fa-exclamation-circle"
600
- aria-hidden="true"
601
- ></i>
602
- </span>
603
- </span>
660
+ <div class="pf-v6-c-input-group__item pf-m-fill">
661
+ <div class="pf-v6-c-text-input-group">
662
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
663
+ <span class="pf-v6-c-text-input-group__text">
664
+ <span class="pf-v6-c-text-input-group__icon">
665
+ <i class="fas fa-fw fa-search"></i>
604
666
  </span>
605
- <button
606
- class="pf-v6-c-button pf-m-control"
607
- type="button"
608
- aria-label="Toggle date picker"
609
- >
610
- <i class="fas fa-calendar-alt" aria-hidden="true"></i>
611
- </button>
612
- </div>
613
- <div class="pf-v6-c-date-picker__helper-text"></div>
614
- </div>
615
- <div class="pf-v6-c-date-picker__helper-text">
616
- <div class="pf-v6-c-helper-text">
617
- <div class="pf-v6-c-helper-text__item">
618
- <span
619
- class="pf-v6-c-helper-text__item-text"
620
- >Max: 08/10/2022</span>
621
- </div>
622
- </div>
623
- </div>
624
- </div>
625
- </div>
626
- </div>
627
- </div>
628
- </div>
629
- <div class="pf-v6-c-toolbar__item pf-m-search-filter">
630
- <div
631
- class="pf-v6-c-input-group"
632
- aria-label="search filter"
633
- role="group"
634
- >
635
- <div class="pf-v6-c-input-group__item">
636
- <button
637
- class="pf-v6-c-menu-toggle"
638
- type="button"
639
- aria-expanded="false"
640
- id="toolbar-with-validation-example-search-filter-menu"
641
- >
642
- <span class="pf-v6-c-menu-toggle__icon">
643
- <i class="fas fa-filter" aria-hidden="true"></i>
644
- </span>
645
- <span class="pf-v6-c-menu-toggle__text">Description</span>
646
- <span class="pf-v6-c-menu-toggle__controls">
647
- <span class="pf-v6-c-menu-toggle__toggle-icon">
648
- <i class="fas fa-caret-down" aria-hidden="true"></i>
649
- </span>
650
- </span>
651
- </button>
652
- </div>
653
- <div class="pf-v6-c-input-group__item pf-m-fill">
654
- <div class="pf-v6-c-text-input-group">
655
- <div class="pf-v6-c-text-input-group__main pf-m-icon">
656
- <span class="pf-v6-c-text-input-group__text">
657
- <span class="pf-v6-c-text-input-group__icon">
658
- <i class="fas fa-fw fa-search"></i>
667
+ <input
668
+ class="pf-v6-c-text-input-group__text-input"
669
+ type="text"
670
+ placeholder="Description"
671
+ value
672
+ aria-label="Search input"
673
+ />
659
674
  </span>
660
- <input
661
- class="pf-v6-c-text-input-group__text-input"
662
- type="text"
663
- placeholder="Description"
664
- value
665
- aria-label="Search input"
666
- />
667
- </span>
675
+ </div>
668
676
  </div>
669
677
  </div>
670
678
  </div>
671
679
  </div>
672
680
  </div>
681
+ <button class="pf-v6-c-button pf-m-primary" type="button">Download</button>
673
682
  </div>
674
- <button class="pf-v6-c-button pf-m-primary" type="button">Download</button>
683
+ <div
684
+ class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
685
+ id="toolbar-with-validation-example-expandable-content"
686
+ hidden
687
+ ></div>
675
688
  </div>
676
- <div
677
- class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
678
- id="toolbar-with-validation-example-expandable-content"
679
- hidden
680
- ></div>
681
689
  </div>
682
- </div>
683
- <div>
684
- <table
685
- class="pf-v6-c-table pf-m-grid-md"
686
- role="grid"
687
- aria-label="This is a table with checkboxes"
688
- id="-table-table"
689
- >
690
- <thead class="pf-v6-c-table__thead">
691
- <tr class="pf-v6-c-table__tr" role="row">
692
- <td class="pf-v6-c-table__td"></td>
693
-
694
- <th
695
- class="pf-v6-c-table__th"
696
- role="columnheader"
697
- scope="col"
698
- >Repositories</th>
699
-
700
- <th
701
- class="pf-v6-c-table__th"
702
- role="columnheader"
703
- scope="col"
704
- >Branches</th>
705
-
706
- <th
707
- class="pf-v6-c-table__th"
708
- role="columnheader"
709
- scope="col"
710
- >Pull requests</th>
711
-
712
- <th
713
- class="pf-v6-c-table__th"
714
- role="columnheader"
715
- scope="col"
716
- >Workspaces</th>
717
-
718
- <th
719
- class="pf-v6-c-table__th"
720
- role="columnheader"
721
- scope="col"
722
- >Last commit</th>
723
-
724
- <td class="pf-v6-c-table__td"></td>
725
-
726
- <td class="pf-v6-c-table__td"></td>
727
- </tr>
728
- </thead>
729
-
730
- <tbody class="pf-v6-c-table__tbody" role="rowgroup">
731
- <tr class="pf-v6-c-table__tr" role="row">
732
- <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
733
- <label
734
- class="pf-v6-c-check pf-m-standalone"
735
- id="-table-tablecheckrow2check"
736
- for="-table-tablecheckrow2check-input"
737
- >
738
- <input
739
- class="pf-v6-c-check__input"
740
- type="checkbox"
741
- id="-table-tablecheckrow2check-input"
742
- name="-table-tablecheckrow2check-input"
743
- aria-label="Standalone check"
744
- />
745
- </label>
746
- </td>
690
+ <div>
691
+ <table
692
+ class="pf-v6-c-table pf-m-grid-md"
693
+ role="grid"
694
+ aria-label="This is a table with checkboxes"
695
+ id="-table-table"
696
+ >
697
+ <thead class="pf-v6-c-table__thead">
698
+ <tr class="pf-v6-c-table__tr" role="row">
699
+ <td class="pf-v6-c-table__td"></td>
700
+
701
+ <th
702
+ class="pf-v6-c-table__th"
703
+ role="columnheader"
704
+ scope="col"
705
+ >Repositories</th>
706
+
707
+ <th
708
+ class="pf-v6-c-table__th"
709
+ role="columnheader"
710
+ scope="col"
711
+ >Branches</th>
712
+
713
+ <th
714
+ class="pf-v6-c-table__th"
715
+ role="columnheader"
716
+ scope="col"
717
+ >Pull requests</th>
718
+
719
+ <th
720
+ class="pf-v6-c-table__th"
721
+ role="columnheader"
722
+ scope="col"
723
+ >Workspaces</th>
724
+
725
+ <th
726
+ class="pf-v6-c-table__th"
727
+ role="columnheader"
728
+ scope="col"
729
+ >Last commit</th>
730
+
731
+ <td class="pf-v6-c-table__td"></td>
732
+
733
+ <td class="pf-v6-c-table__td"></td>
734
+ </tr>
735
+ </thead>
736
+
737
+ <tbody class="pf-v6-c-table__tbody" role="rowgroup">
738
+ <tr class="pf-v6-c-table__tr" role="row">
739
+ <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
740
+ <label
741
+ class="pf-v6-c-check pf-m-standalone"
742
+ id="-table-tablecheckrow2check"
743
+ for="-table-tablecheckrow2check-input"
744
+ >
745
+ <input
746
+ class="pf-v6-c-check__input"
747
+ type="checkbox"
748
+ id="-table-tablecheckrow2check-input"
749
+ name="-table-tablecheckrow2check-input"
750
+ aria-label="Standalone check"
751
+ />
752
+ </label>
753
+ </td>
747
754
 
748
- <th
749
- class="pf-v6-c-table__th"
750
- role="columnheader"
751
- data-label="Repository name"
752
- >
753
- <div>
754
- <div id="-table-table-node1">Node 1</div>
755
- <a href="#">siemur/test-space</a>
756
- </div>
757
- </th>
755
+ <th
756
+ class="pf-v6-c-table__th"
757
+ role="columnheader"
758
+ data-label="Repository name"
759
+ >
760
+ <div>
761
+ <div id="-table-table-node1">Node 1</div>
762
+ <a href="#">siemur/test-space</a>
763
+ </div>
764
+ </th>
758
765
 
759
- <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
760
- <span>
761
- <i class="fas fa-code-branch"></i> 10
762
- </span>
763
- </td>
764
- <td
765
- class="pf-v6-c-table__td"
766
- role="cell"
767
- data-label="Pull requests"
768
- >
769
- <span>
770
- <i class="fas fa-code"></i> 25
771
- </span>
772
- </td>
773
- <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">
774
- <span>
775
- <i class="fas fa-cube"></i> 5
776
- </span>
777
- </td>
778
- <td
779
- class="pf-v6-c-table__td"
780
- role="cell"
781
- data-label="Last commit"
782
- >2 days ago</td>
783
- <td class="pf-v6-c-table__td" role="cell" data-label="Action">
784
- <a href="#">Action link</a>
785
- </td>
786
-
787
- <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
788
- <button
789
- class="pf-v6-c-menu-toggle pf-m-plain"
790
- type="button"
791
- aria-expanded="false"
792
- aria-label="Table actions"
766
+ <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
767
+ <span>
768
+ <i class="fas fa-code-branch"></i> 10
769
+ </span>
770
+ </td>
771
+ <td
772
+ class="pf-v6-c-table__td"
773
+ role="cell"
774
+ data-label="Pull requests"
793
775
  >
794
- <span class="pf-v6-c-menu-toggle__icon">
795
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
776
+ <span>
777
+ <i class="fas fa-code"></i> 25
796
778
  </span>
797
- </button>
798
- </td>
799
- </tr>
800
-
801
- <tr class="pf-v6-c-table__tr" role="row">
802
- <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
803
- <label
804
- class="pf-v6-c-check pf-m-standalone"
805
- id="-table-tablecheckrow3check"
806
- for="-table-tablecheckrow3check-input"
779
+ </td>
780
+ <td
781
+ class="pf-v6-c-table__td"
782
+ role="cell"
783
+ data-label="Workspaces"
807
784
  >
808
- <input
809
- class="pf-v6-c-check__input"
810
- type="checkbox"
811
- id="-table-tablecheckrow3check-input"
812
- name="-table-tablecheckrow3check-input"
813
- aria-label="Standalone check"
814
- />
815
- </label>
816
- </td>
785
+ <span>
786
+ <i class="fas fa-cube"></i> 5
787
+ </span>
788
+ </td>
789
+ <td
790
+ class="pf-v6-c-table__td"
791
+ role="cell"
792
+ data-label="Last commit"
793
+ >2 days ago</td>
794
+ <td class="pf-v6-c-table__td" role="cell" data-label="Action">
795
+ <a href="#">Action link</a>
796
+ </td>
797
+
798
+ <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
799
+ <button
800
+ class="pf-v6-c-menu-toggle pf-m-plain"
801
+ type="button"
802
+ aria-expanded="false"
803
+ aria-label="Table actions"
804
+ >
805
+ <span class="pf-v6-c-menu-toggle__icon">
806
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
807
+ </span>
808
+ </button>
809
+ </td>
810
+ </tr>
811
+
812
+ <tr class="pf-v6-c-table__tr" role="row">
813
+ <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
814
+ <label
815
+ class="pf-v6-c-check pf-m-standalone"
816
+ id="-table-tablecheckrow3check"
817
+ for="-table-tablecheckrow3check-input"
818
+ >
819
+ <input
820
+ class="pf-v6-c-check__input"
821
+ type="checkbox"
822
+ id="-table-tablecheckrow3check-input"
823
+ name="-table-tablecheckrow3check-input"
824
+ aria-label="Standalone check"
825
+ />
826
+ </label>
827
+ </td>
817
828
 
818
- <th
819
- class="pf-v6-c-table__th"
820
- role="columnheader"
821
- data-label="Repository name"
822
- >
823
- <div>
824
- <div id="-table-table-node2">Node 2</div>
825
- <a href="#">siemur/test-space</a>
826
- </div>
827
- </th>
829
+ <th
830
+ class="pf-v6-c-table__th"
831
+ role="columnheader"
832
+ data-label="Repository name"
833
+ >
834
+ <div>
835
+ <div id="-table-table-node2">Node 2</div>
836
+ <a href="#">siemur/test-space</a>
837
+ </div>
838
+ </th>
828
839
 
829
- <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
830
- <span>
831
- <i class="fas fa-code-branch"></i> 8
832
- </span>
833
- </td>
834
- <td
835
- class="pf-v6-c-table__td"
836
- role="cell"
837
- data-label="Pull requests"
838
- >
839
- <span>
840
- <i class="fas fa-code"></i> 30
841
- </span>
842
- </td>
843
- <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">
844
- <span>
845
- <i class="fas fa-cube"></i> 2
846
- </span>
847
- </td>
848
- <td
849
- class="pf-v6-c-table__td"
850
- role="cell"
851
- data-label="Last commit"
852
- >2 days ago</td>
853
- <td class="pf-v6-c-table__td" role="cell" data-label="Action">
854
- <a href="#">Action link</a>
855
- </td>
856
-
857
- <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
858
- <button
859
- class="pf-v6-c-menu-toggle pf-m-plain"
860
- type="button"
861
- aria-expanded="false"
862
- aria-label="Table actions"
840
+ <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
841
+ <span>
842
+ <i class="fas fa-code-branch"></i> 8
843
+ </span>
844
+ </td>
845
+ <td
846
+ class="pf-v6-c-table__td"
847
+ role="cell"
848
+ data-label="Pull requests"
863
849
  >
864
- <span class="pf-v6-c-menu-toggle__icon">
865
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
850
+ <span>
851
+ <i class="fas fa-code"></i> 30
866
852
  </span>
867
- </button>
868
- </td>
869
- </tr>
870
-
871
- <tr class="pf-v6-c-table__tr" role="row">
872
- <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
873
- <label
874
- class="pf-v6-c-check pf-m-standalone"
875
- id="-table-tablecheckrow4check"
876
- for="-table-tablecheckrow4check-input"
853
+ </td>
854
+ <td
855
+ class="pf-v6-c-table__td"
856
+ role="cell"
857
+ data-label="Workspaces"
877
858
  >
878
- <input
879
- class="pf-v6-c-check__input"
880
- type="checkbox"
881
- id="-table-tablecheckrow4check-input"
882
- name="-table-tablecheckrow4check-input"
883
- aria-label="Standalone check"
884
- />
885
- </label>
886
- </td>
859
+ <span>
860
+ <i class="fas fa-cube"></i> 2
861
+ </span>
862
+ </td>
863
+ <td
864
+ class="pf-v6-c-table__td"
865
+ role="cell"
866
+ data-label="Last commit"
867
+ >2 days ago</td>
868
+ <td class="pf-v6-c-table__td" role="cell" data-label="Action">
869
+ <a href="#">Action link</a>
870
+ </td>
871
+
872
+ <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
873
+ <button
874
+ class="pf-v6-c-menu-toggle pf-m-plain"
875
+ type="button"
876
+ aria-expanded="false"
877
+ aria-label="Table actions"
878
+ >
879
+ <span class="pf-v6-c-menu-toggle__icon">
880
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
881
+ </span>
882
+ </button>
883
+ </td>
884
+ </tr>
885
+
886
+ <tr class="pf-v6-c-table__tr" role="row">
887
+ <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
888
+ <label
889
+ class="pf-v6-c-check pf-m-standalone"
890
+ id="-table-tablecheckrow4check"
891
+ for="-table-tablecheckrow4check-input"
892
+ >
893
+ <input
894
+ class="pf-v6-c-check__input"
895
+ type="checkbox"
896
+ id="-table-tablecheckrow4check-input"
897
+ name="-table-tablecheckrow4check-input"
898
+ aria-label="Standalone check"
899
+ />
900
+ </label>
901
+ </td>
887
902
 
888
- <th
889
- class="pf-v6-c-table__th"
890
- role="columnheader"
891
- data-label="Repository name"
892
- >
893
- <div>
894
- <div id="-table-table-node3">Node 3</div>
895
- <a href="#">siemur/test-space</a>
896
- </div>
897
- </th>
903
+ <th
904
+ class="pf-v6-c-table__th"
905
+ role="columnheader"
906
+ data-label="Repository name"
907
+ >
908
+ <div>
909
+ <div id="-table-table-node3">Node 3</div>
910
+ <a href="#">siemur/test-space</a>
911
+ </div>
912
+ </th>
898
913
 
899
- <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
900
- <span>
901
- <i class="fas fa-code-branch"></i> 12
902
- </span>
903
- </td>
904
- <td
905
- class="pf-v6-c-table__td"
906
- role="cell"
907
- data-label="Pull requests"
908
- >
909
- <span>
910
- <i class="fas fa-code"></i> 48
911
- </span>
912
- </td>
913
- <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">
914
- <span>
915
- <i class="fas fa-cube"></i> 13
916
- </span>
917
- </td>
918
- <td
919
- class="pf-v6-c-table__td"
920
- role="cell"
921
- data-label="Last commit"
922
- >30 days ago</td>
923
- <td class="pf-v6-c-table__td" role="cell" data-label="Action">
924
- <a href="#">Action link</a>
925
- </td>
926
-
927
- <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
928
- <button
929
- class="pf-v6-c-menu-toggle pf-m-plain"
930
- type="button"
931
- aria-expanded="false"
932
- aria-label="Table actions"
914
+ <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
915
+ <span>
916
+ <i class="fas fa-code-branch"></i> 12
917
+ </span>
918
+ </td>
919
+ <td
920
+ class="pf-v6-c-table__td"
921
+ role="cell"
922
+ data-label="Pull requests"
933
923
  >
934
- <span class="pf-v6-c-menu-toggle__icon">
935
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
924
+ <span>
925
+ <i class="fas fa-code"></i> 48
936
926
  </span>
937
- </button>
938
- </td>
939
- </tr>
940
-
941
- <tr class="pf-v6-c-table__tr" role="row">
942
- <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
943
- <label
944
- class="pf-v6-c-check pf-m-standalone"
945
- id="-table-tablecheckrow5check"
946
- for="-table-tablecheckrow5check-input"
927
+ </td>
928
+ <td
929
+ class="pf-v6-c-table__td"
930
+ role="cell"
931
+ data-label="Workspaces"
947
932
  >
948
- <input
949
- class="pf-v6-c-check__input"
950
- type="checkbox"
951
- id="-table-tablecheckrow5check-input"
952
- name="-table-tablecheckrow5check-input"
953
- aria-label="Standalone check"
954
- />
955
- </label>
956
- </td>
933
+ <span>
934
+ <i class="fas fa-cube"></i> 13
935
+ </span>
936
+ </td>
937
+ <td
938
+ class="pf-v6-c-table__td"
939
+ role="cell"
940
+ data-label="Last commit"
941
+ >30 days ago</td>
942
+ <td class="pf-v6-c-table__td" role="cell" data-label="Action">
943
+ <a href="#">Action link</a>
944
+ </td>
945
+
946
+ <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
947
+ <button
948
+ class="pf-v6-c-menu-toggle pf-m-plain"
949
+ type="button"
950
+ aria-expanded="false"
951
+ aria-label="Table actions"
952
+ >
953
+ <span class="pf-v6-c-menu-toggle__icon">
954
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
955
+ </span>
956
+ </button>
957
+ </td>
958
+ </tr>
959
+
960
+ <tr class="pf-v6-c-table__tr" role="row">
961
+ <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
962
+ <label
963
+ class="pf-v6-c-check pf-m-standalone"
964
+ id="-table-tablecheckrow5check"
965
+ for="-table-tablecheckrow5check-input"
966
+ >
967
+ <input
968
+ class="pf-v6-c-check__input"
969
+ type="checkbox"
970
+ id="-table-tablecheckrow5check-input"
971
+ name="-table-tablecheckrow5check-input"
972
+ aria-label="Standalone check"
973
+ />
974
+ </label>
975
+ </td>
957
976
 
958
- <th
959
- class="pf-v6-c-table__th"
960
- role="columnheader"
961
- data-label="Repository name"
962
- >
963
- <div>
964
- <div id="-table-table-node4">Node 4</div>
965
- <a href="#">siemur/test-space</a>
966
- </div>
967
- </th>
977
+ <th
978
+ class="pf-v6-c-table__th"
979
+ role="columnheader"
980
+ data-label="Repository name"
981
+ >
982
+ <div>
983
+ <div id="-table-table-node4">Node 4</div>
984
+ <a href="#">siemur/test-space</a>
985
+ </div>
986
+ </th>
968
987
 
969
- <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
970
- <span>
971
- <i class="fas fa-code-branch"></i> 3
972
- </span>
973
- </td>
974
- <td
975
- class="pf-v6-c-table__td"
976
- role="cell"
977
- data-label="Pull requests"
978
- >
979
- <span>
980
- <i class="fas fa-code"></i> 8
981
- </span>
982
- </td>
983
- <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">
984
- <span>
985
- <i class="fas fa-cube"></i> 20
986
- </span>
987
- </td>
988
- <td
989
- class="pf-v6-c-table__td"
990
- role="cell"
991
- data-label="Last commit"
992
- >8 days ago</td>
993
- <td class="pf-v6-c-table__td" role="cell" data-label="Action">
994
- <a href="#">Action link</a>
995
- </td>
996
-
997
- <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
998
- <button
999
- class="pf-v6-c-menu-toggle pf-m-plain"
1000
- type="button"
1001
- aria-expanded="false"
1002
- aria-label="Table actions"
988
+ <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
989
+ <span>
990
+ <i class="fas fa-code-branch"></i> 3
991
+ </span>
992
+ </td>
993
+ <td
994
+ class="pf-v6-c-table__td"
995
+ role="cell"
996
+ data-label="Pull requests"
1003
997
  >
1004
- <span class="pf-v6-c-menu-toggle__icon">
1005
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
998
+ <span>
999
+ <i class="fas fa-code"></i> 8
1006
1000
  </span>
1007
- </button>
1008
- </td>
1009
- </tr>
1010
-
1011
- <tr class="pf-v6-c-table__tr" role="row">
1012
- <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
1013
- <label
1014
- class="pf-v6-c-check pf-m-standalone"
1015
- id="-table-tablecheckrow6check"
1016
- for="-table-tablecheckrow6check-input"
1001
+ </td>
1002
+ <td
1003
+ class="pf-v6-c-table__td"
1004
+ role="cell"
1005
+ data-label="Workspaces"
1017
1006
  >
1018
- <input
1019
- class="pf-v6-c-check__input"
1020
- type="checkbox"
1021
- id="-table-tablecheckrow6check-input"
1022
- name="-table-tablecheckrow6check-input"
1023
- aria-label="Standalone check"
1024
- />
1025
- </label>
1026
- </td>
1027
- <td
1028
- class="pf-v6-c-table__td"
1029
- role="cell"
1030
- data-label="Repository name"
1031
- >
1032
- <div>
1033
- <div id="-table-table-node5">Node 5</div>
1034
- <a href="#">siemur/test-space</a>
1035
- </div>
1036
- </td>
1037
- <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
1038
- <span>
1039
- <i class="fas fa-code-branch"></i> 34
1040
- </span>
1041
- </td>
1042
- <td
1043
- class="pf-v6-c-table__td"
1044
- role="cell"
1045
- data-label="Pull requests"
1046
- >
1047
- <span>
1048
- <i class="fas fa-code"></i> 21
1049
- </span>
1050
- </td>
1051
- <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">
1052
- <span>
1053
- <i class="fas fa-cube"></i> 26
1054
- </span>
1055
- </td>
1056
- <td
1057
- class="pf-v6-c-table__td"
1058
- role="cell"
1059
- data-label="Last commit"
1060
- >2 days ago</td>
1061
- <td class="pf-v6-c-table__td" role="cell" data-label="Action">
1062
- <a href="#">Action link</a>
1063
- </td>
1064
-
1065
- <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
1066
- <button
1067
- class="pf-v6-c-menu-toggle pf-m-plain"
1068
- type="button"
1069
- aria-expanded="false"
1070
- aria-label="Table actions"
1007
+ <span>
1008
+ <i class="fas fa-cube"></i> 20
1009
+ </span>
1010
+ </td>
1011
+ <td
1012
+ class="pf-v6-c-table__td"
1013
+ role="cell"
1014
+ data-label="Last commit"
1015
+ >8 days ago</td>
1016
+ <td class="pf-v6-c-table__td" role="cell" data-label="Action">
1017
+ <a href="#">Action link</a>
1018
+ </td>
1019
+
1020
+ <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
1021
+ <button
1022
+ class="pf-v6-c-menu-toggle pf-m-plain"
1023
+ type="button"
1024
+ aria-expanded="false"
1025
+ aria-label="Table actions"
1026
+ >
1027
+ <span class="pf-v6-c-menu-toggle__icon">
1028
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1029
+ </span>
1030
+ </button>
1031
+ </td>
1032
+ </tr>
1033
+
1034
+ <tr class="pf-v6-c-table__tr" role="row">
1035
+ <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
1036
+ <label
1037
+ class="pf-v6-c-check pf-m-standalone"
1038
+ id="-table-tablecheckrow6check"
1039
+ for="-table-tablecheckrow6check-input"
1040
+ >
1041
+ <input
1042
+ class="pf-v6-c-check__input"
1043
+ type="checkbox"
1044
+ id="-table-tablecheckrow6check-input"
1045
+ name="-table-tablecheckrow6check-input"
1046
+ aria-label="Standalone check"
1047
+ />
1048
+ </label>
1049
+ </td>
1050
+ <td
1051
+ class="pf-v6-c-table__td"
1052
+ role="cell"
1053
+ data-label="Repository name"
1071
1054
  >
1072
- <span class="pf-v6-c-menu-toggle__icon">
1073
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1055
+ <div>
1056
+ <div id="-table-table-node5">Node 5</div>
1057
+ <a href="#">siemur/test-space</a>
1058
+ </div>
1059
+ </td>
1060
+ <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
1061
+ <span>
1062
+ <i class="fas fa-code-branch"></i> 34
1074
1063
  </span>
1075
- </button>
1076
- </td>
1077
- </tr>
1078
- </tbody>
1079
- </table>
1080
- </div>
1081
- </section>
1082
- </main>
1064
+ </td>
1065
+ <td
1066
+ class="pf-v6-c-table__td"
1067
+ role="cell"
1068
+ data-label="Pull requests"
1069
+ >
1070
+ <span>
1071
+ <i class="fas fa-code"></i> 21
1072
+ </span>
1073
+ </td>
1074
+ <td
1075
+ class="pf-v6-c-table__td"
1076
+ role="cell"
1077
+ data-label="Workspaces"
1078
+ >
1079
+ <span>
1080
+ <i class="fas fa-cube"></i> 26
1081
+ </span>
1082
+ </td>
1083
+ <td
1084
+ class="pf-v6-c-table__td"
1085
+ role="cell"
1086
+ data-label="Last commit"
1087
+ >2 days ago</td>
1088
+ <td class="pf-v6-c-table__td" role="cell" data-label="Action">
1089
+ <a href="#">Action link</a>
1090
+ </td>
1091
+
1092
+ <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
1093
+ <button
1094
+ class="pf-v6-c-menu-toggle pf-m-plain"
1095
+ type="button"
1096
+ aria-expanded="false"
1097
+ aria-label="Table actions"
1098
+ >
1099
+ <span class="pf-v6-c-menu-toggle__icon">
1100
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1101
+ </span>
1102
+ </button>
1103
+ </td>
1104
+ </tr>
1105
+ </tbody>
1106
+ </table>
1107
+ </div>
1108
+ </section>
1109
+ </main>
1110
+ </div>
1083
1111
  </div>
1084
1112
 
1085
1113
  ```
@@ -2873,773 +2901,798 @@ section: components
2873
2901
  </nav>
2874
2902
  </div>
2875
2903
  </div>
2876
- <main
2877
- class="pf-v6-c-page__main"
2878
- tabindex="-1"
2879
- id="main-content-toolbar-pagination-management-example"
2880
- >
2881
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2882
- <div class="pf-v6-c-page__main-body">
2883
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2884
- <ol class="pf-v6-c-breadcrumb__list" role="list">
2885
- <li class="pf-v6-c-breadcrumb__item">
2886
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
2887
- </li>
2888
- <li class="pf-v6-c-breadcrumb__item">
2889
- <span class="pf-v6-c-breadcrumb__item-divider">
2890
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2891
- </span>
2904
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
2905
+ <main
2906
+ class="pf-v6-c-page__main"
2907
+ tabindex="-1"
2908
+ id="main-content-toolbar-pagination-management-example"
2909
+ >
2910
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2911
+ <div class="pf-v6-c-page__main-body">
2912
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2913
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
2914
+ <li class="pf-v6-c-breadcrumb__item">
2915
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
2916
+ </li>
2917
+ <li class="pf-v6-c-breadcrumb__item">
2918
+ <span class="pf-v6-c-breadcrumb__item-divider">
2919
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2920
+ </span>
2892
2921
 
2893
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2894
- </li>
2895
- <li class="pf-v6-c-breadcrumb__item">
2896
- <span class="pf-v6-c-breadcrumb__item-divider">
2897
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2898
- </span>
2922
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2923
+ </li>
2924
+ <li class="pf-v6-c-breadcrumb__item">
2925
+ <span class="pf-v6-c-breadcrumb__item-divider">
2926
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2927
+ </span>
2899
2928
 
2900
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2901
- </li>
2902
- <li class="pf-v6-c-breadcrumb__item">
2903
- <span class="pf-v6-c-breadcrumb__item-divider">
2904
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2905
- </span>
2929
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2930
+ </li>
2931
+ <li class="pf-v6-c-breadcrumb__item">
2932
+ <span class="pf-v6-c-breadcrumb__item-divider">
2933
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2934
+ </span>
2906
2935
 
2907
- <a
2908
- href="#"
2909
- class="pf-v6-c-breadcrumb__link pf-m-current"
2910
- aria-current="page"
2911
- >Section landing</a>
2912
- </li>
2913
- </ol>
2914
- </nav>
2915
- </div>
2916
- </section>
2917
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
2918
- <div class="pf-v6-c-page__main-body">
2919
- <div class="pf-v6-c-content">
2920
- <h1>Main title</h1>
2921
- <p>This is a full page demo.</p>
2936
+ <a
2937
+ href="#"
2938
+ class="pf-v6-c-breadcrumb__link pf-m-current"
2939
+ aria-current="page"
2940
+ >Section landing</a>
2941
+ </li>
2942
+ </ol>
2943
+ </nav>
2922
2944
  </div>
2923
- </div>
2924
- </section>
2925
- <section class="pf-v6-c-page__main-section">
2926
- <div
2927
- class="pf-v6-c-toolbar pf-m-nowrap"
2928
- id="toolbar-pagination-management-example-toolbar"
2929
- >
2930
- <div class="pf-v6-c-toolbar__content">
2931
- <div class="pf-v6-c-toolbar__content-section pf-m-nowrap">
2932
- <div class="pf-v6-c-toolbar__group pf-m-toggle-group pf-m-show">
2933
- <div class="pf-v6-c-toolbar__toggle pf-m-show">
2934
- <button
2935
- class="pf-v6-c-menu-toggle pf-m-plain"
2936
- type="button"
2937
- aria-expanded="false"
2938
- aria-label="Show filters"
2939
- aria-controls="toolbar-pagination-management-example-toolbar-expandable-content"
2940
- >
2941
- <span class="pf-v6-c-menu-toggle__icon">
2942
- <i class="fas fa-filter" aria-hidden="true"></i>
2943
- </span>
2944
- </button>
2945
- </div>
2946
- <div class="pf-v6-c-toolbar__item pf-m-search-filter">
2947
- <div
2948
- class="pf-v6-c-input-group"
2949
- aria-label="search filter"
2950
- role="group"
2951
- >
2952
- <div class="pf-v6-c-input-group__item">
2953
- <button
2954
- class="pf-v6-c-menu-toggle"
2955
- type="button"
2956
- aria-expanded="false"
2957
- id="toolbar-pagination-management-example-toolbar-search-filter-menu"
2958
- >
2959
- <span class="pf-v6-c-menu-toggle__icon">
2960
- <i class="fas fa-filter" aria-hidden="true"></i>
2961
- </span>
2962
- <span class="pf-v6-c-menu-toggle__text">Name</span>
2963
- <span class="pf-v6-c-menu-toggle__controls">
2964
- <span class="pf-v6-c-menu-toggle__toggle-icon">
2965
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2945
+ </section>
2946
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
2947
+ <div class="pf-v6-c-page__main-body">
2948
+ <div class="pf-v6-c-content">
2949
+ <h1>Main title</h1>
2950
+ <p>This is a full page demo.</p>
2951
+ </div>
2952
+ </div>
2953
+ </section>
2954
+ <section class="pf-v6-c-page__main-section">
2955
+ <div
2956
+ class="pf-v6-c-toolbar pf-m-nowrap"
2957
+ id="toolbar-pagination-management-example-toolbar"
2958
+ >
2959
+ <div class="pf-v6-c-toolbar__content">
2960
+ <div class="pf-v6-c-toolbar__content-section pf-m-nowrap">
2961
+ <div class="pf-v6-c-toolbar__group pf-m-toggle-group pf-m-show">
2962
+ <div class="pf-v6-c-toolbar__toggle pf-m-show">
2963
+ <button
2964
+ class="pf-v6-c-menu-toggle pf-m-plain"
2965
+ type="button"
2966
+ aria-expanded="false"
2967
+ aria-label="Show filters"
2968
+ aria-controls="toolbar-pagination-management-example-toolbar-expandable-content"
2969
+ >
2970
+ <span class="pf-v6-c-menu-toggle__icon">
2971
+ <i class="fas fa-filter" aria-hidden="true"></i>
2972
+ </span>
2973
+ </button>
2974
+ </div>
2975
+ <div class="pf-v6-c-toolbar__item pf-m-search-filter">
2976
+ <div
2977
+ class="pf-v6-c-input-group"
2978
+ aria-label="search filter"
2979
+ role="group"
2980
+ >
2981
+ <div class="pf-v6-c-input-group__item">
2982
+ <button
2983
+ class="pf-v6-c-menu-toggle"
2984
+ type="button"
2985
+ aria-expanded="false"
2986
+ id="toolbar-pagination-management-example-toolbar-search-filter-menu"
2987
+ >
2988
+ <span class="pf-v6-c-menu-toggle__icon">
2989
+ <i class="fas fa-filter" aria-hidden="true"></i>
2966
2990
  </span>
2967
- </span>
2968
- </button>
2969
- </div>
2970
- <div class="pf-v6-c-input-group__item pf-m-fill">
2971
- <div class="pf-v6-c-text-input-group">
2972
- <div class="pf-v6-c-text-input-group__main pf-m-icon">
2973
- <span class="pf-v6-c-text-input-group__text">
2974
- <span class="pf-v6-c-text-input-group__icon">
2975
- <i class="fas fa-fw fa-search"></i>
2991
+ <span class="pf-v6-c-menu-toggle__text">Name</span>
2992
+ <span class="pf-v6-c-menu-toggle__controls">
2993
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
2994
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2976
2995
  </span>
2977
- <input
2978
- class="pf-v6-c-text-input-group__text-input"
2979
- type="text"
2980
- placeholder="Filter by name"
2981
- value
2982
- aria-label="Search input"
2983
- />
2984
2996
  </span>
2997
+ </button>
2998
+ </div>
2999
+ <div class="pf-v6-c-input-group__item pf-m-fill">
3000
+ <div class="pf-v6-c-text-input-group">
3001
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
3002
+ <span class="pf-v6-c-text-input-group__text">
3003
+ <span class="pf-v6-c-text-input-group__icon">
3004
+ <i class="fas fa-fw fa-search"></i>
3005
+ </span>
3006
+ <input
3007
+ class="pf-v6-c-text-input-group__text-input"
3008
+ type="text"
3009
+ placeholder="Filter by name"
3010
+ value
3011
+ aria-label="Search input"
3012
+ />
3013
+ </span>
3014
+ </div>
2985
3015
  </div>
2986
3016
  </div>
2987
3017
  </div>
2988
3018
  </div>
2989
3019
  </div>
2990
- </div>
2991
- <div class="pf-v6-c-toolbar__item pf-m-overflow-menu">
2992
- <div
2993
- class="pf-v6-c-overflow-menu"
2994
- id="toolbar-pagination-management-example-toolbar-overflow-menu"
2995
- >
2996
- <div class="pf-v6-c-overflow-menu__control">
2997
- <div class="pf-v6-c-dropdown">
2998
- <button
2999
- class="pf-v6-c-button pf-v5-c-dropdown__toggle pf-m-plain"
3000
- type="button"
3001
- id="toolbar-pagination-management-example-toolbar-overflow-menu-dropdown-toggle"
3002
- aria-label="Overflow menu"
3003
- aria-expanded="false"
3004
- >
3005
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3006
- </button>
3007
- <ul
3008
- class="pf-v6-c-dropdown__menu"
3009
- role="menu"
3010
- aria-labelledby="toolbar-pagination-management-example-toolbar-overflow-menu-dropdown-toggle"
3011
- hidden
3012
- >
3013
- <li role="none">
3014
- <button
3015
- role="menuitem"
3016
- class="pf-v6-c-dropdown__menu-item"
3017
- >Primary</button>
3018
- </li>
3019
- <li role="none">
3020
- <button
3021
- role="menuitem"
3022
- class="pf-v6-c-dropdown__menu-item"
3023
- >Secondary</button>
3024
- </li>
3025
- <li role="none">
3026
- <button
3027
- role="menuitem"
3028
- class="pf-v6-c-dropdown__menu-item"
3029
- >Tertiary</button>
3030
- </li>
3031
- </ul>
3032
- </div>
3033
- </div>
3034
- </div>
3035
- </div>
3036
- <div class="pf-v6-c-toolbar__item pf-m-pagination">
3037
- <div
3038
- class="pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md"
3039
- >
3020
+ <div class="pf-v6-c-toolbar__item pf-m-overflow-menu">
3040
3021
  <div
3041
- class="pf-v6-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
3022
+ class="pf-v6-c-overflow-menu"
3023
+ id="toolbar-pagination-management-example-toolbar-overflow-menu"
3042
3024
  >
3043
- <div class="pf-v6-c-pagination__page-menu">
3044
- <div class="pf-v6-c-options-menu">
3025
+ <div class="pf-v6-c-overflow-menu__control">
3026
+ <div class="pf-v6-c-dropdown">
3045
3027
  <button
3046
- class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
3028
+ class="pf-v6-c-button pf-v5-c-dropdown__toggle pf-m-plain"
3047
3029
  type="button"
3048
- id="toolbar-pagination-management-example-toolbar-pagination-options-menu-toggle"
3049
- aria-haspopup="listbox"
3030
+ id="toolbar-pagination-management-example-toolbar-overflow-menu-dropdown-toggle"
3031
+ aria-label="Overflow menu"
3050
3032
  aria-expanded="false"
3051
3033
  >
3052
- <span class="pf-v6-c-options-menu__toggle-text">
3053
- <b>1 - 10</b>&nbsp;of&nbsp;
3054
- <b>36</b>
3055
- </span>
3056
- <div class="pf-v6-c-options-menu__toggle-icon">
3057
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3058
- </div>
3034
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3059
3035
  </button>
3060
3036
  <ul
3061
- class="pf-v6-c-options-menu__menu"
3037
+ class="pf-v6-c-dropdown__menu"
3062
3038
  role="menu"
3063
- aria-labelledby="toolbar-pagination-management-example-toolbar-pagination-options-menu-toggle"
3039
+ aria-labelledby="toolbar-pagination-management-example-toolbar-overflow-menu-dropdown-toggle"
3064
3040
  hidden
3065
3041
  >
3066
3042
  <li role="none">
3067
3043
  <button
3068
- class="pf-v6-c-options-menu__menu-item"
3069
- type="button"
3070
3044
  role="menuitem"
3071
- >5 per page</button>
3045
+ class="pf-v6-c-dropdown__menu-item"
3046
+ >Primary</button>
3072
3047
  </li>
3073
3048
  <li role="none">
3074
3049
  <button
3075
- class="pf-v6-c-options-menu__menu-item"
3076
- type="button"
3077
3050
  role="menuitem"
3078
- >
3079
- 10 per page
3080
- <div class="pf-v6-c-options-menu__menu-item-icon">
3081
- <i class="fas fa-check" aria-hidden="true"></i>
3082
- </div>
3083
- </button>
3051
+ class="pf-v6-c-dropdown__menu-item"
3052
+ >Secondary</button>
3084
3053
  </li>
3085
3054
  <li role="none">
3086
3055
  <button
3087
- class="pf-v6-c-options-menu__menu-item"
3088
- type="button"
3089
3056
  role="menuitem"
3090
- >20 per page</button>
3057
+ class="pf-v6-c-dropdown__menu-item"
3058
+ >Tertiary</button>
3091
3059
  </li>
3092
3060
  </ul>
3093
3061
  </div>
3094
3062
  </div>
3095
- <nav class="pf-v6-c-pagination__nav" aria-label="Pagination">
3096
- <div class="pf-v6-c-pagination__nav-control pf-m-prev">
3097
- <button
3098
- class="pf-v6-c-button pf-m-plain"
3099
- type="button"
3100
- disabled
3101
- aria-label="Go to previous page"
3102
- >
3103
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3104
- </button>
3105
- </div>
3106
- <div class="pf-v6-c-pagination__nav-control pf-m-next">
3107
- <button
3108
- class="pf-v6-c-button pf-m-plain"
3109
- type="button"
3110
- aria-label="Go to next page"
3111
- >
3112
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3113
- </button>
3063
+ </div>
3064
+ </div>
3065
+ <div class="pf-v6-c-toolbar__item pf-m-pagination">
3066
+ <div
3067
+ class="pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md"
3068
+ >
3069
+ <div
3070
+ class="pf-v6-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
3071
+ >
3072
+ <div class="pf-v6-c-pagination__page-menu">
3073
+ <div class="pf-v6-c-options-menu">
3074
+ <button
3075
+ class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
3076
+ type="button"
3077
+ id="toolbar-pagination-management-example-toolbar-pagination-options-menu-toggle"
3078
+ aria-haspopup="listbox"
3079
+ aria-expanded="false"
3080
+ >
3081
+ <span class="pf-v6-c-options-menu__toggle-text">
3082
+ <b>1 - 10</b>&nbsp;of&nbsp;
3083
+ <b>36</b>
3084
+ </span>
3085
+ <div class="pf-v6-c-options-menu__toggle-icon">
3086
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3087
+ </div>
3088
+ </button>
3089
+ <ul
3090
+ class="pf-v6-c-options-menu__menu"
3091
+ role="menu"
3092
+ aria-labelledby="toolbar-pagination-management-example-toolbar-pagination-options-menu-toggle"
3093
+ hidden
3094
+ >
3095
+ <li role="none">
3096
+ <button
3097
+ class="pf-v6-c-options-menu__menu-item"
3098
+ type="button"
3099
+ role="menuitem"
3100
+ >5 per page</button>
3101
+ </li>
3102
+ <li role="none">
3103
+ <button
3104
+ class="pf-v6-c-options-menu__menu-item"
3105
+ type="button"
3106
+ role="menuitem"
3107
+ >
3108
+ 10 per page
3109
+ <div class="pf-v6-c-options-menu__menu-item-icon">
3110
+ <i class="fas fa-check" aria-hidden="true"></i>
3111
+ </div>
3112
+ </button>
3113
+ </li>
3114
+ <li role="none">
3115
+ <button
3116
+ class="pf-v6-c-options-menu__menu-item"
3117
+ type="button"
3118
+ role="menuitem"
3119
+ >20 per page</button>
3120
+ </li>
3121
+ </ul>
3122
+ </div>
3114
3123
  </div>
3115
- </nav>
3124
+ <nav
3125
+ class="pf-v6-c-pagination__nav"
3126
+ aria-label="Pagination"
3127
+ >
3128
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
3129
+ <button
3130
+ class="pf-v6-c-button pf-m-plain"
3131
+ type="button"
3132
+ disabled
3133
+ aria-label="Go to previous page"
3134
+ >
3135
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
3136
+ </button>
3137
+ </div>
3138
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
3139
+ <button
3140
+ class="pf-v6-c-button pf-m-plain"
3141
+ type="button"
3142
+ aria-label="Go to next page"
3143
+ >
3144
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3145
+ </button>
3146
+ </div>
3147
+ </nav>
3148
+ </div>
3116
3149
  </div>
3117
3150
  </div>
3118
3151
  </div>
3152
+ <div
3153
+ class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
3154
+ id="toolbar-pagination-management-example-toolbar-expandable-content"
3155
+ hidden
3156
+ ></div>
3119
3157
  </div>
3120
- <div
3121
- class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
3122
- id="toolbar-pagination-management-example-toolbar-expandable-content"
3123
- hidden
3124
- ></div>
3125
3158
  </div>
3126
- </div>
3127
- <div>
3128
- <table
3129
- class="pf-v6-c-table pf-m-grid-md"
3130
- role="grid"
3131
- aria-label="This is a table with checkboxes"
3132
- id="toolbar-and-table-static-search-overflow-menu-collapsed-table"
3133
- >
3134
- <thead class="pf-v6-c-table__thead">
3135
- <tr class="pf-v6-c-table__tr" role="row">
3136
- <td class="pf-v6-c-table__td"></td>
3137
-
3138
- <th
3139
- class="pf-v6-c-table__th"
3140
- role="columnheader"
3141
- scope="col"
3142
- >Repositories</th>
3143
-
3144
- <th
3145
- class="pf-v6-c-table__th"
3146
- role="columnheader"
3147
- scope="col"
3148
- >Branches</th>
3149
-
3150
- <th
3151
- class="pf-v6-c-table__th"
3152
- role="columnheader"
3153
- scope="col"
3154
- >Pull requests</th>
3155
-
3156
- <th
3157
- class="pf-v6-c-table__th"
3158
- role="columnheader"
3159
- scope="col"
3160
- >Workspaces</th>
3161
-
3162
- <th
3163
- class="pf-v6-c-table__th"
3164
- role="columnheader"
3165
- scope="col"
3166
- >Last commit</th>
3167
-
3168
- <td class="pf-v6-c-table__td"></td>
3169
-
3170
- <td class="pf-v6-c-table__td"></td>
3171
- </tr>
3172
- </thead>
3173
-
3174
- <tbody class="pf-v6-c-table__tbody" role="rowgroup">
3175
- <tr class="pf-v6-c-table__tr" role="row">
3176
- <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
3177
- <label
3178
- class="pf-v6-c-check pf-m-standalone"
3179
- id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow2check"
3180
- for="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow2check-input"
3181
- >
3182
- <input
3183
- class="pf-v6-c-check__input"
3184
- type="checkbox"
3185
- id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow2check-input"
3186
- name="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow2check-input"
3187
- aria-label="Standalone check"
3188
- />
3189
- </label>
3190
- </td>
3159
+ <div>
3160
+ <table
3161
+ class="pf-v6-c-table pf-m-grid-md"
3162
+ role="grid"
3163
+ aria-label="This is a table with checkboxes"
3164
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-table"
3165
+ >
3166
+ <thead class="pf-v6-c-table__thead">
3167
+ <tr class="pf-v6-c-table__tr" role="row">
3168
+ <td class="pf-v6-c-table__td"></td>
3169
+
3170
+ <th
3171
+ class="pf-v6-c-table__th"
3172
+ role="columnheader"
3173
+ scope="col"
3174
+ >Repositories</th>
3175
+
3176
+ <th
3177
+ class="pf-v6-c-table__th"
3178
+ role="columnheader"
3179
+ scope="col"
3180
+ >Branches</th>
3181
+
3182
+ <th
3183
+ class="pf-v6-c-table__th"
3184
+ role="columnheader"
3185
+ scope="col"
3186
+ >Pull requests</th>
3187
+
3188
+ <th
3189
+ class="pf-v6-c-table__th"
3190
+ role="columnheader"
3191
+ scope="col"
3192
+ >Workspaces</th>
3193
+
3194
+ <th
3195
+ class="pf-v6-c-table__th"
3196
+ role="columnheader"
3197
+ scope="col"
3198
+ >Last commit</th>
3199
+
3200
+ <td class="pf-v6-c-table__td"></td>
3201
+
3202
+ <td class="pf-v6-c-table__td"></td>
3203
+ </tr>
3204
+ </thead>
3205
+
3206
+ <tbody class="pf-v6-c-table__tbody" role="rowgroup">
3207
+ <tr class="pf-v6-c-table__tr" role="row">
3208
+ <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
3209
+ <label
3210
+ class="pf-v6-c-check pf-m-standalone"
3211
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow2check"
3212
+ for="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow2check-input"
3213
+ >
3214
+ <input
3215
+ class="pf-v6-c-check__input"
3216
+ type="checkbox"
3217
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow2check-input"
3218
+ name="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow2check-input"
3219
+ aria-label="Standalone check"
3220
+ />
3221
+ </label>
3222
+ </td>
3191
3223
 
3192
- <th
3193
- class="pf-v6-c-table__th"
3194
- role="columnheader"
3195
- data-label="Repository name"
3196
- >
3197
- <div>
3198
- <div
3199
- id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node1"
3200
- >Node 1</div>
3201
- <a href="#">siemur/test-space</a>
3202
- </div>
3203
- </th>
3224
+ <th
3225
+ class="pf-v6-c-table__th"
3226
+ role="columnheader"
3227
+ data-label="Repository name"
3228
+ >
3229
+ <div>
3230
+ <div
3231
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node1"
3232
+ >Node 1</div>
3233
+ <a href="#">siemur/test-space</a>
3234
+ </div>
3235
+ </th>
3204
3236
 
3205
- <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
3206
- <span>
3207
- <i class="fas fa-code-branch"></i> 10
3208
- </span>
3209
- </td>
3210
- <td
3211
- class="pf-v6-c-table__td"
3212
- role="cell"
3213
- data-label="Pull requests"
3214
- >
3215
- <span>
3216
- <i class="fas fa-code"></i> 25
3217
- </span>
3218
- </td>
3219
- <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">
3220
- <span>
3221
- <i class="fas fa-cube"></i> 5
3222
- </span>
3223
- </td>
3224
- <td
3225
- class="pf-v6-c-table__td"
3226
- role="cell"
3227
- data-label="Last commit"
3228
- >2 days ago</td>
3229
- <td class="pf-v6-c-table__td" role="cell" data-label="Action">
3230
- <a href="#">Action link</a>
3231
- </td>
3232
-
3233
- <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
3234
- <button
3235
- class="pf-v6-c-menu-toggle pf-m-plain"
3236
- type="button"
3237
- aria-expanded="false"
3238
- aria-label="Table actions"
3237
+ <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
3238
+ <span>
3239
+ <i class="fas fa-code-branch"></i> 10
3240
+ </span>
3241
+ </td>
3242
+ <td
3243
+ class="pf-v6-c-table__td"
3244
+ role="cell"
3245
+ data-label="Pull requests"
3239
3246
  >
3240
- <span class="pf-v6-c-menu-toggle__icon">
3241
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3247
+ <span>
3248
+ <i class="fas fa-code"></i> 25
3242
3249
  </span>
3243
- </button>
3244
- </td>
3245
- </tr>
3246
-
3247
- <tr class="pf-v6-c-table__tr" role="row">
3248
- <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
3249
- <label
3250
- class="pf-v6-c-check pf-m-standalone"
3251
- id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow3check"
3252
- for="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow3check-input"
3250
+ </td>
3251
+ <td
3252
+ class="pf-v6-c-table__td"
3253
+ role="cell"
3254
+ data-label="Workspaces"
3253
3255
  >
3254
- <input
3255
- class="pf-v6-c-check__input"
3256
- type="checkbox"
3257
- id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow3check-input"
3258
- name="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow3check-input"
3259
- aria-label="Standalone check"
3260
- />
3261
- </label>
3262
- </td>
3256
+ <span>
3257
+ <i class="fas fa-cube"></i> 5
3258
+ </span>
3259
+ </td>
3260
+ <td
3261
+ class="pf-v6-c-table__td"
3262
+ role="cell"
3263
+ data-label="Last commit"
3264
+ >2 days ago</td>
3265
+ <td class="pf-v6-c-table__td" role="cell" data-label="Action">
3266
+ <a href="#">Action link</a>
3267
+ </td>
3268
+
3269
+ <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
3270
+ <button
3271
+ class="pf-v6-c-menu-toggle pf-m-plain"
3272
+ type="button"
3273
+ aria-expanded="false"
3274
+ aria-label="Table actions"
3275
+ >
3276
+ <span class="pf-v6-c-menu-toggle__icon">
3277
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3278
+ </span>
3279
+ </button>
3280
+ </td>
3281
+ </tr>
3282
+
3283
+ <tr class="pf-v6-c-table__tr" role="row">
3284
+ <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
3285
+ <label
3286
+ class="pf-v6-c-check pf-m-standalone"
3287
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow3check"
3288
+ for="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow3check-input"
3289
+ >
3290
+ <input
3291
+ class="pf-v6-c-check__input"
3292
+ type="checkbox"
3293
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow3check-input"
3294
+ name="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow3check-input"
3295
+ aria-label="Standalone check"
3296
+ />
3297
+ </label>
3298
+ </td>
3263
3299
 
3264
- <th
3265
- class="pf-v6-c-table__th"
3266
- role="columnheader"
3267
- data-label="Repository name"
3268
- >
3269
- <div>
3270
- <div
3271
- id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node2"
3272
- >Node 2</div>
3273
- <a href="#">siemur/test-space</a>
3274
- </div>
3275
- </th>
3300
+ <th
3301
+ class="pf-v6-c-table__th"
3302
+ role="columnheader"
3303
+ data-label="Repository name"
3304
+ >
3305
+ <div>
3306
+ <div
3307
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node2"
3308
+ >Node 2</div>
3309
+ <a href="#">siemur/test-space</a>
3310
+ </div>
3311
+ </th>
3276
3312
 
3277
- <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
3278
- <span>
3279
- <i class="fas fa-code-branch"></i> 8
3280
- </span>
3281
- </td>
3282
- <td
3283
- class="pf-v6-c-table__td"
3284
- role="cell"
3285
- data-label="Pull requests"
3286
- >
3287
- <span>
3288
- <i class="fas fa-code"></i> 30
3289
- </span>
3290
- </td>
3291
- <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">
3292
- <span>
3293
- <i class="fas fa-cube"></i> 2
3294
- </span>
3295
- </td>
3296
- <td
3297
- class="pf-v6-c-table__td"
3298
- role="cell"
3299
- data-label="Last commit"
3300
- >2 days ago</td>
3301
- <td class="pf-v6-c-table__td" role="cell" data-label="Action">
3302
- <a href="#">Action link</a>
3303
- </td>
3304
-
3305
- <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
3306
- <button
3307
- class="pf-v6-c-menu-toggle pf-m-plain"
3308
- type="button"
3309
- aria-expanded="false"
3310
- aria-label="Table actions"
3313
+ <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
3314
+ <span>
3315
+ <i class="fas fa-code-branch"></i> 8
3316
+ </span>
3317
+ </td>
3318
+ <td
3319
+ class="pf-v6-c-table__td"
3320
+ role="cell"
3321
+ data-label="Pull requests"
3311
3322
  >
3312
- <span class="pf-v6-c-menu-toggle__icon">
3313
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3323
+ <span>
3324
+ <i class="fas fa-code"></i> 30
3314
3325
  </span>
3315
- </button>
3316
- </td>
3317
- </tr>
3326
+ </td>
3327
+ <td
3328
+ class="pf-v6-c-table__td"
3329
+ role="cell"
3330
+ data-label="Workspaces"
3331
+ >
3332
+ <span>
3333
+ <i class="fas fa-cube"></i> 2
3334
+ </span>
3335
+ </td>
3336
+ <td
3337
+ class="pf-v6-c-table__td"
3338
+ role="cell"
3339
+ data-label="Last commit"
3340
+ >2 days ago</td>
3341
+ <td class="pf-v6-c-table__td" role="cell" data-label="Action">
3342
+ <a href="#">Action link</a>
3343
+ </td>
3344
+
3345
+ <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
3346
+ <button
3347
+ class="pf-v6-c-menu-toggle pf-m-plain"
3348
+ type="button"
3349
+ aria-expanded="false"
3350
+ aria-label="Table actions"
3351
+ >
3352
+ <span class="pf-v6-c-menu-toggle__icon">
3353
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3354
+ </span>
3355
+ </button>
3356
+ </td>
3357
+ </tr>
3358
+
3359
+ <tr class="pf-v6-c-table__tr" role="row">
3360
+ <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
3361
+ <label
3362
+ class="pf-v6-c-check pf-m-standalone"
3363
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow4check"
3364
+ for="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow4check-input"
3365
+ >
3366
+ <input
3367
+ class="pf-v6-c-check__input"
3368
+ type="checkbox"
3369
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow4check-input"
3370
+ name="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow4check-input"
3371
+ aria-label="Standalone check"
3372
+ />
3373
+ </label>
3374
+ </td>
3318
3375
 
3319
- <tr class="pf-v6-c-table__tr" role="row">
3320
- <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
3321
- <label
3322
- class="pf-v6-c-check pf-m-standalone"
3323
- id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow4check"
3324
- for="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow4check-input"
3376
+ <th
3377
+ class="pf-v6-c-table__th"
3378
+ role="columnheader"
3379
+ data-label="Repository name"
3325
3380
  >
3326
- <input
3327
- class="pf-v6-c-check__input"
3328
- type="checkbox"
3329
- id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow4check-input"
3330
- name="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow4check-input"
3331
- aria-label="Standalone check"
3332
- />
3333
- </label>
3334
- </td>
3381
+ <div>
3382
+ <div
3383
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node3"
3384
+ >Node 3</div>
3385
+ <a href="#">siemur/test-space</a>
3386
+ </div>
3387
+ </th>
3335
3388
 
3336
- <th
3337
- class="pf-v6-c-table__th"
3338
- role="columnheader"
3339
- data-label="Repository name"
3340
- >
3341
- <div>
3342
- <div
3343
- id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node3"
3344
- >Node 3</div>
3345
- <a href="#">siemur/test-space</a>
3346
- </div>
3347
- </th>
3389
+ <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
3390
+ <span>
3391
+ <i class="fas fa-code-branch"></i> 12
3392
+ </span>
3393
+ </td>
3394
+ <td
3395
+ class="pf-v6-c-table__td"
3396
+ role="cell"
3397
+ data-label="Pull requests"
3398
+ >
3399
+ <span>
3400
+ <i class="fas fa-code"></i> 48
3401
+ </span>
3402
+ </td>
3403
+ <td
3404
+ class="pf-v6-c-table__td"
3405
+ role="cell"
3406
+ data-label="Workspaces"
3407
+ >
3408
+ <span>
3409
+ <i class="fas fa-cube"></i> 13
3410
+ </span>
3411
+ </td>
3412
+ <td
3413
+ class="pf-v6-c-table__td"
3414
+ role="cell"
3415
+ data-label="Last commit"
3416
+ >30 days ago</td>
3417
+ <td class="pf-v6-c-table__td" role="cell" data-label="Action">
3418
+ <a href="#">Action link</a>
3419
+ </td>
3420
+
3421
+ <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
3422
+ <button
3423
+ class="pf-v6-c-menu-toggle pf-m-plain"
3424
+ type="button"
3425
+ aria-expanded="false"
3426
+ aria-label="Table actions"
3427
+ >
3428
+ <span class="pf-v6-c-menu-toggle__icon">
3429
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3430
+ </span>
3431
+ </button>
3432
+ </td>
3433
+ </tr>
3434
+
3435
+ <tr class="pf-v6-c-table__tr" role="row">
3436
+ <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
3437
+ <label
3438
+ class="pf-v6-c-check pf-m-standalone"
3439
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow5check"
3440
+ for="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow5check-input"
3441
+ >
3442
+ <input
3443
+ class="pf-v6-c-check__input"
3444
+ type="checkbox"
3445
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow5check-input"
3446
+ name="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow5check-input"
3447
+ aria-label="Standalone check"
3448
+ />
3449
+ </label>
3450
+ </td>
3348
3451
 
3349
- <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
3350
- <span>
3351
- <i class="fas fa-code-branch"></i> 12
3352
- </span>
3353
- </td>
3354
- <td
3355
- class="pf-v6-c-table__td"
3356
- role="cell"
3357
- data-label="Pull requests"
3358
- >
3359
- <span>
3360
- <i class="fas fa-code"></i> 48
3361
- </span>
3362
- </td>
3363
- <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">
3364
- <span>
3365
- <i class="fas fa-cube"></i> 13
3366
- </span>
3367
- </td>
3368
- <td
3369
- class="pf-v6-c-table__td"
3370
- role="cell"
3371
- data-label="Last commit"
3372
- >30 days ago</td>
3373
- <td class="pf-v6-c-table__td" role="cell" data-label="Action">
3374
- <a href="#">Action link</a>
3375
- </td>
3376
-
3377
- <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
3452
+ <th
3453
+ class="pf-v6-c-table__th"
3454
+ role="columnheader"
3455
+ data-label="Repository name"
3456
+ >
3457
+ <div>
3458
+ <div
3459
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node4"
3460
+ >Node 4</div>
3461
+ <a href="#">siemur/test-space</a>
3462
+ </div>
3463
+ </th>
3464
+
3465
+ <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
3466
+ <span>
3467
+ <i class="fas fa-code-branch"></i> 3
3468
+ </span>
3469
+ </td>
3470
+ <td
3471
+ class="pf-v6-c-table__td"
3472
+ role="cell"
3473
+ data-label="Pull requests"
3474
+ >
3475
+ <span>
3476
+ <i class="fas fa-code"></i> 8
3477
+ </span>
3478
+ </td>
3479
+ <td
3480
+ class="pf-v6-c-table__td"
3481
+ role="cell"
3482
+ data-label="Workspaces"
3483
+ >
3484
+ <span>
3485
+ <i class="fas fa-cube"></i> 20
3486
+ </span>
3487
+ </td>
3488
+ <td
3489
+ class="pf-v6-c-table__td"
3490
+ role="cell"
3491
+ data-label="Last commit"
3492
+ >8 days ago</td>
3493
+ <td class="pf-v6-c-table__td" role="cell" data-label="Action">
3494
+ <a href="#">Action link</a>
3495
+ </td>
3496
+
3497
+ <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
3498
+ <button
3499
+ class="pf-v6-c-menu-toggle pf-m-plain"
3500
+ type="button"
3501
+ aria-expanded="false"
3502
+ aria-label="Table actions"
3503
+ >
3504
+ <span class="pf-v6-c-menu-toggle__icon">
3505
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3506
+ </span>
3507
+ </button>
3508
+ </td>
3509
+ </tr>
3510
+
3511
+ <tr class="pf-v6-c-table__tr" role="row">
3512
+ <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
3513
+ <label
3514
+ class="pf-v6-c-check pf-m-standalone"
3515
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow6check"
3516
+ for="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow6check-input"
3517
+ >
3518
+ <input
3519
+ class="pf-v6-c-check__input"
3520
+ type="checkbox"
3521
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow6check-input"
3522
+ name="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow6check-input"
3523
+ aria-label="Standalone check"
3524
+ />
3525
+ </label>
3526
+ </td>
3527
+ <td
3528
+ class="pf-v6-c-table__td"
3529
+ role="cell"
3530
+ data-label="Repository name"
3531
+ >
3532
+ <div>
3533
+ <div
3534
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node5"
3535
+ >Node 5</div>
3536
+ <a href="#">siemur/test-space</a>
3537
+ </div>
3538
+ </td>
3539
+ <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
3540
+ <span>
3541
+ <i class="fas fa-code-branch"></i> 34
3542
+ </span>
3543
+ </td>
3544
+ <td
3545
+ class="pf-v6-c-table__td"
3546
+ role="cell"
3547
+ data-label="Pull requests"
3548
+ >
3549
+ <span>
3550
+ <i class="fas fa-code"></i> 21
3551
+ </span>
3552
+ </td>
3553
+ <td
3554
+ class="pf-v6-c-table__td"
3555
+ role="cell"
3556
+ data-label="Workspaces"
3557
+ >
3558
+ <span>
3559
+ <i class="fas fa-cube"></i> 26
3560
+ </span>
3561
+ </td>
3562
+ <td
3563
+ class="pf-v6-c-table__td"
3564
+ role="cell"
3565
+ data-label="Last commit"
3566
+ >2 days ago</td>
3567
+ <td class="pf-v6-c-table__td" role="cell" data-label="Action">
3568
+ <a href="#">Action link</a>
3569
+ </td>
3570
+
3571
+ <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
3572
+ <button
3573
+ class="pf-v6-c-menu-toggle pf-m-plain"
3574
+ type="button"
3575
+ aria-expanded="false"
3576
+ aria-label="Table actions"
3577
+ >
3578
+ <span class="pf-v6-c-menu-toggle__icon">
3579
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3580
+ </span>
3581
+ </button>
3582
+ </td>
3583
+ </tr>
3584
+ </tbody>
3585
+ </table>
3586
+ <div class="pf-v6-c-pagination pf-m-bottom">
3587
+ <div class="pf-v6-c-pagination__page-menu">
3588
+ <div class="pf-v6-c-options-menu pf-m-top">
3378
3589
  <button
3379
- class="pf-v6-c-menu-toggle pf-m-plain"
3590
+ class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
3380
3591
  type="button"
3592
+ id="pagination-options-menu-bottom-collapsed-example-toggle"
3593
+ aria-haspopup="listbox"
3381
3594
  aria-expanded="false"
3382
- aria-label="Table actions"
3383
3595
  >
3384
- <span class="pf-v6-c-menu-toggle__icon">
3385
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3596
+ <span class="pf-v6-c-options-menu__toggle-text">
3597
+ <b>1 - 10</b>&nbsp;of&nbsp;
3598
+ <b>36</b>
3386
3599
  </span>
3600
+ <div class="pf-v6-c-options-menu__toggle-icon">
3601
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3602
+ </div>
3387
3603
  </button>
3388
- </td>
3389
- </tr>
3390
-
3391
- <tr class="pf-v6-c-table__tr" role="row">
3392
- <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
3393
- <label
3394
- class="pf-v6-c-check pf-m-standalone"
3395
- id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow5check"
3396
- for="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow5check-input"
3604
+ <ul
3605
+ class="pf-v6-c-options-menu__menu pf-m-top"
3606
+ role="menu"
3607
+ aria-labelledby="pagination-options-menu-bottom-collapsed-example-toggle"
3608
+ hidden
3397
3609
  >
3398
- <input
3399
- class="pf-v6-c-check__input"
3400
- type="checkbox"
3401
- id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow5check-input"
3402
- name="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow5check-input"
3403
- aria-label="Standalone check"
3404
- />
3405
- </label>
3406
- </td>
3407
-
3408
- <th
3409
- class="pf-v6-c-table__th"
3410
- role="columnheader"
3411
- data-label="Repository name"
3412
- >
3413
- <div>
3414
- <div
3415
- id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node4"
3416
- >Node 4</div>
3417
- <a href="#">siemur/test-space</a>
3418
- </div>
3419
- </th>
3420
-
3421
- <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
3422
- <span>
3423
- <i class="fas fa-code-branch"></i> 3
3424
- </span>
3425
- </td>
3426
- <td
3427
- class="pf-v6-c-table__td"
3428
- role="cell"
3429
- data-label="Pull requests"
3430
- >
3431
- <span>
3432
- <i class="fas fa-code"></i> 8
3433
- </span>
3434
- </td>
3435
- <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">
3436
- <span>
3437
- <i class="fas fa-cube"></i> 20
3438
- </span>
3439
- </td>
3440
- <td
3441
- class="pf-v6-c-table__td"
3442
- role="cell"
3443
- data-label="Last commit"
3444
- >8 days ago</td>
3445
- <td class="pf-v6-c-table__td" role="cell" data-label="Action">
3446
- <a href="#">Action link</a>
3447
- </td>
3448
-
3449
- <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
3610
+ <li role="none">
3611
+ <button
3612
+ class="pf-v6-c-options-menu__menu-item"
3613
+ type="button"
3614
+ role="menuitem"
3615
+ >5 per page</button>
3616
+ </li>
3617
+ <li role="none">
3618
+ <button
3619
+ class="pf-v6-c-options-menu__menu-item"
3620
+ type="button"
3621
+ role="menuitem"
3622
+ >
3623
+ 10 per page
3624
+ <div class="pf-v6-c-options-menu__menu-item-icon">
3625
+ <i class="fas fa-check" aria-hidden="true"></i>
3626
+ </div>
3627
+ </button>
3628
+ </li>
3629
+ <li role="none">
3630
+ <button
3631
+ class="pf-v6-c-options-menu__menu-item"
3632
+ type="button"
3633
+ role="menuitem"
3634
+ >20 per page</button>
3635
+ </li>
3636
+ </ul>
3637
+ </div>
3638
+ </div>
3639
+ <nav class="pf-v6-c-pagination__nav" aria-label="Pagination">
3640
+ <div class="pf-v6-c-pagination__nav-control pf-m-first">
3450
3641
  <button
3451
- class="pf-v6-c-menu-toggle pf-m-plain"
3642
+ class="pf-v6-c-button pf-m-plain"
3452
3643
  type="button"
3453
- aria-expanded="false"
3454
- aria-label="Table actions"
3644
+ disabled
3645
+ aria-label="Go to first page"
3455
3646
  >
3456
- <span class="pf-v6-c-menu-toggle__icon">
3457
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3458
- </span>
3647
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
3459
3648
  </button>
3460
- </td>
3461
- </tr>
3462
-
3463
- <tr class="pf-v6-c-table__tr" role="row">
3464
- <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
3465
- <label
3466
- class="pf-v6-c-check pf-m-standalone"
3467
- id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow6check"
3468
- for="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow6check-input"
3649
+ </div>
3650
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
3651
+ <button
3652
+ class="pf-v6-c-button pf-m-plain"
3653
+ type="button"
3654
+ disabled
3655
+ aria-label="Go to previous page"
3469
3656
  >
3657
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
3658
+ </button>
3659
+ </div>
3660
+ <div class="pf-v6-c-pagination__nav-page-select">
3661
+ <span class="pf-v6-c-form-control">
3470
3662
  <input
3471
- class="pf-v6-c-check__input"
3472
- type="checkbox"
3473
- id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow6check-input"
3474
- name="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow6check-input"
3475
- aria-label="Standalone check"
3663
+ aria-label="Current page"
3664
+ type="number"
3665
+ min="1"
3666
+ max="4"
3667
+ value="1"
3476
3668
  />
3477
- </label>
3478
- </td>
3479
- <td
3480
- class="pf-v6-c-table__td"
3481
- role="cell"
3482
- data-label="Repository name"
3483
- >
3484
- <div>
3485
- <div
3486
- id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node5"
3487
- >Node 5</div>
3488
- <a href="#">siemur/test-space</a>
3489
- </div>
3490
- </td>
3491
- <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
3492
- <span>
3493
- <i class="fas fa-code-branch"></i> 34
3494
- </span>
3495
- </td>
3496
- <td
3497
- class="pf-v6-c-table__td"
3498
- role="cell"
3499
- data-label="Pull requests"
3500
- >
3501
- <span>
3502
- <i class="fas fa-code"></i> 21
3503
3669
  </span>
3504
- </td>
3505
- <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">
3506
- <span>
3507
- <i class="fas fa-cube"></i> 26
3508
- </span>
3509
- </td>
3510
- <td
3511
- class="pf-v6-c-table__td"
3512
- role="cell"
3513
- data-label="Last commit"
3514
- >2 days ago</td>
3515
- <td class="pf-v6-c-table__td" role="cell" data-label="Action">
3516
- <a href="#">Action link</a>
3517
- </td>
3518
-
3519
- <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
3670
+ <span aria-hidden="true">of 4</span>
3671
+ </div>
3672
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
3520
3673
  <button
3521
- class="pf-v6-c-menu-toggle pf-m-plain"
3674
+ class="pf-v6-c-button pf-m-plain"
3522
3675
  type="button"
3523
- aria-expanded="false"
3524
- aria-label="Table actions"
3676
+ aria-label="Go to next page"
3525
3677
  >
3526
- <span class="pf-v6-c-menu-toggle__icon">
3527
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3528
- </span>
3678
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3529
3679
  </button>
3530
- </td>
3531
- </tr>
3532
- </tbody>
3533
- </table>
3534
- <div class="pf-v6-c-pagination pf-m-bottom">
3535
- <div class="pf-v6-c-pagination__page-menu">
3536
- <div class="pf-v6-c-options-menu pf-m-top">
3537
- <button
3538
- class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
3539
- type="button"
3540
- id="pagination-options-menu-bottom-collapsed-example-toggle"
3541
- aria-haspopup="listbox"
3542
- aria-expanded="false"
3543
- >
3544
- <span class="pf-v6-c-options-menu__toggle-text">
3545
- <b>1 - 10</b>&nbsp;of&nbsp;
3546
- <b>36</b>
3547
- </span>
3548
- <div class="pf-v6-c-options-menu__toggle-icon">
3549
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3550
- </div>
3551
- </button>
3552
- <ul
3553
- class="pf-v6-c-options-menu__menu pf-m-top"
3554
- role="menu"
3555
- aria-labelledby="pagination-options-menu-bottom-collapsed-example-toggle"
3556
- hidden
3557
- >
3558
- <li role="none">
3559
- <button
3560
- class="pf-v6-c-options-menu__menu-item"
3561
- type="button"
3562
- role="menuitem"
3563
- >5 per page</button>
3564
- </li>
3565
- <li role="none">
3566
- <button
3567
- class="pf-v6-c-options-menu__menu-item"
3568
- type="button"
3569
- role="menuitem"
3570
- >
3571
- 10 per page
3572
- <div class="pf-v6-c-options-menu__menu-item-icon">
3573
- <i class="fas fa-check" aria-hidden="true"></i>
3574
- </div>
3575
- </button>
3576
- </li>
3577
- <li role="none">
3578
- <button
3579
- class="pf-v6-c-options-menu__menu-item"
3580
- type="button"
3581
- role="menuitem"
3582
- >20 per page</button>
3583
- </li>
3584
- </ul>
3585
- </div>
3680
+ </div>
3681
+ <div class="pf-v6-c-pagination__nav-control pf-m-last">
3682
+ <button
3683
+ class="pf-v6-c-button pf-m-plain"
3684
+ type="button"
3685
+ aria-label="Go to last page"
3686
+ >
3687
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
3688
+ </button>
3689
+ </div>
3690
+ </nav>
3586
3691
  </div>
3587
- <nav class="pf-v6-c-pagination__nav" aria-label="Pagination">
3588
- <div class="pf-v6-c-pagination__nav-control pf-m-first">
3589
- <button
3590
- class="pf-v6-c-button pf-m-plain"
3591
- type="button"
3592
- disabled
3593
- aria-label="Go to first page"
3594
- >
3595
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
3596
- </button>
3597
- </div>
3598
- <div class="pf-v6-c-pagination__nav-control pf-m-prev">
3599
- <button
3600
- class="pf-v6-c-button pf-m-plain"
3601
- type="button"
3602
- disabled
3603
- aria-label="Go to previous page"
3604
- >
3605
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3606
- </button>
3607
- </div>
3608
- <div class="pf-v6-c-pagination__nav-page-select">
3609
- <span class="pf-v6-c-form-control">
3610
- <input
3611
- aria-label="Current page"
3612
- type="number"
3613
- min="1"
3614
- max="4"
3615
- value="1"
3616
- />
3617
- </span>
3618
- <span aria-hidden="true">of 4</span>
3619
- </div>
3620
- <div class="pf-v6-c-pagination__nav-control pf-m-next">
3621
- <button
3622
- class="pf-v6-c-button pf-m-plain"
3623
- type="button"
3624
- aria-label="Go to next page"
3625
- >
3626
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3627
- </button>
3628
- </div>
3629
- <div class="pf-v6-c-pagination__nav-control pf-m-last">
3630
- <button
3631
- class="pf-v6-c-button pf-m-plain"
3632
- type="button"
3633
- aria-label="Go to last page"
3634
- >
3635
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
3636
- </button>
3637
- </div>
3638
- </nav>
3639
3692
  </div>
3640
- </div>
3641
- </section>
3642
- </main>
3693
+ </section>
3694
+ </main>
3695
+ </div>
3643
3696
  </div>
3644
3697
 
3645
3698
  ```