@patternfly/patternfly 6.0.0-alpha.161 → 6.0.0-alpha.163

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 (25) hide show
  1. package/components/ClipboardCopy/clipboard-copy.css +11 -19
  2. package/components/ClipboardCopy/clipboard-copy.scss +12 -20
  3. package/components/Page/page.css +38 -54
  4. package/components/Page/page.scss +19 -32
  5. package/components/Toolbar/toolbar.css +1 -0
  6. package/components/Toolbar/toolbar.scss +1 -0
  7. package/components/_index.css +50 -73
  8. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +7 -7
  9. package/docs/components/Page/examples/Page.css +5 -9
  10. package/docs/components/Page/examples/Page.md +71 -32
  11. package/docs/demos/Alert/examples/Alert.md +393 -374
  12. package/docs/demos/CardView/examples/CardView.md +717 -708
  13. package/docs/demos/DataList/examples/DataList.md +2574 -2500
  14. package/docs/demos/Drawer/examples/Drawer.md +190 -182
  15. package/docs/demos/JumpLinks/examples/JumpLinks.md +642 -612
  16. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +3608 -3490
  17. package/docs/demos/Skeleton/examples/Skeleton.md +128 -126
  18. package/docs/demos/Table/examples/Table.md +9458 -9105
  19. package/docs/demos/Tabs/examples/Tabs.md +889 -885
  20. package/docs/demos/Toolbar/examples/Toolbar.md +1254 -1147
  21. package/package.json +1 -1
  22. package/patternfly-no-globals.css +50 -73
  23. package/patternfly.css +50 -73
  24. package/patternfly.min.css +1 -1
  25. package/patternfly.min.css.map +1 -1
package/docs/demos/Toolbar/examples/Toolbar.md CHANGED
@@ -458,27 +458,147 @@ section: components
458
458
  </div>
459
459
  </section>
460
460
  <section class="pf-v6-c-page__main-section">
461
- <div class="pf-v6-c-toolbar" id="toolbar-with-validation-example">
462
- <div class="pf-v6-c-toolbar__content">
463
- <div class="pf-v6-c-toolbar__content-section">
464
- <div
465
- class="pf-v6-c-toolbar__group pf-m-toggle-group pf-m-show-on-lg"
466
- >
467
- <div class="pf-v6-c-toolbar__toggle pf-m-show">
468
- <button
469
- class="pf-v6-c-menu-toggle pf-m-plain"
470
- type="button"
471
- aria-expanded="false"
472
- aria-label="Show filters"
473
- aria-controls="toolbar-with-validation-example-expandable-content"
474
- >
475
- <span class="pf-v6-c-menu-toggle__icon">
476
- <i class="fas fa-filter" aria-hidden="true"></i>
477
- </span>
478
- </button>
479
- </div>
480
- <div class="pf-v6-c-toolbar__group pf-m-filter-group">
481
- <div class="pf-v6-c-toolbar__item">
461
+ <div class="pf-v6-c-page__main-body">
462
+ <div class="pf-v6-c-toolbar" id="toolbar-with-validation-example">
463
+ <div class="pf-v6-c-toolbar__content">
464
+ <div class="pf-v6-c-toolbar__content-section">
465
+ <div
466
+ class="pf-v6-c-toolbar__group pf-m-toggle-group pf-m-show-on-lg"
467
+ >
468
+ <div class="pf-v6-c-toolbar__toggle pf-m-show">
469
+ <button
470
+ class="pf-v6-c-menu-toggle pf-m-plain"
471
+ type="button"
472
+ aria-expanded="false"
473
+ aria-label="Show filters"
474
+ aria-controls="toolbar-with-validation-example-expandable-content"
475
+ >
476
+ <span class="pf-v6-c-menu-toggle__icon">
477
+ <i class="fas fa-filter" aria-hidden="true"></i>
478
+ </span>
479
+ </button>
480
+ </div>
481
+ <div class="pf-v6-c-toolbar__group pf-m-filter-group">
482
+ <div class="pf-v6-c-toolbar__item">
483
+ <div
484
+ class="pf-v6-c-input-group"
485
+ aria-label="search filter"
486
+ role="group"
487
+ >
488
+ <div class="pf-v6-c-input-group__item">
489
+ <button
490
+ class="pf-v6-c-menu-toggle"
491
+ type="button"
492
+ aria-expanded="false"
493
+ id="toolbar-with-validation-example-month"
494
+ >
495
+ <span class="pf-v6-c-menu-toggle__icon">
496
+ <i class="fas fa-filter" aria-hidden="true"></i>
497
+ </span>
498
+ <span class="pf-v6-c-menu-toggle__text">Last month</span>
499
+ <span class="pf-v6-c-menu-toggle__controls">
500
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
501
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
502
+ </span>
503
+ </span>
504
+ </button>
505
+ </div>
506
+ <div class="pf-v6-c-input-group__item">
507
+ <div class="pf-v6-c-date-picker">
508
+ <div class="pf-v6-c-date-picker__input">
509
+ <div
510
+ class="pf-v6-c-input-group"
511
+ aria-label="search filter"
512
+ role="group"
513
+ >
514
+ <span class="pf-v6-c-form-control">
515
+ <input
516
+ type="text"
517
+ value="2020-03-05"
518
+ id="toolbar-with-validation-example-helper-text-input"
519
+ name="toolbar-with-validation-example-helper-text-input"
520
+ aria-label="Date picker"
521
+ />
522
+ </span>
523
+ <button
524
+ class="pf-v6-c-button pf-m-control"
525
+ type="button"
526
+ aria-label="Toggle date picker"
527
+ >
528
+ <i
529
+ class="fas fa-calendar-alt"
530
+ aria-hidden="true"
531
+ ></i>
532
+ </button>
533
+ </div>
534
+ </div>
535
+ <div class="pf-v6-c-date-picker__helper-text">
536
+ <div class="pf-v6-c-helper-text">
537
+ <div class="pf-v6-c-helper-text__item">
538
+ <span
539
+ class="pf-v6-c-helper-text__item-text"
540
+ >MM/DD/YYYY</span>
541
+ </div>
542
+ </div>
543
+ </div>
544
+ </div>
545
+ </div>
546
+ <div class="pf-v6-c-input-group__item">
547
+ <div class="pf-v6-c-date-picker">
548
+ <div class="pf-v6-c-date-picker__input">
549
+ <div
550
+ class="pf-v6-c-input-group"
551
+ aria-label="search filter"
552
+ role="group"
553
+ >
554
+ <span class="pf-v6-c-form-control pf-m-error">
555
+ <input
556
+ aria-invalid="true"
557
+ type="text"
558
+ value="2020-03-05"
559
+ id="toolbar-with-validation-example-invalid-input"
560
+ name="toolbar-with-validation-example-invalid-input"
561
+ aria-label="Date picker"
562
+ />
563
+ <span class="pf-v6-c-form-control__utilities">
564
+ <span
565
+ class="pf-v6-c-form-control__icon pf-m-status"
566
+ >
567
+ <i
568
+ class="fas fa-exclamation-circle"
569
+ aria-hidden="true"
570
+ ></i>
571
+ </span>
572
+ </span>
573
+ </span>
574
+ <button
575
+ class="pf-v6-c-button pf-m-control"
576
+ type="button"
577
+ aria-label="Toggle date picker"
578
+ >
579
+ <i
580
+ class="fas fa-calendar-alt"
581
+ aria-hidden="true"
582
+ ></i>
583
+ </button>
584
+ </div>
585
+ <div class="pf-v6-c-date-picker__helper-text"></div>
586
+ </div>
587
+ <div class="pf-v6-c-date-picker__helper-text">
588
+ <div class="pf-v6-c-helper-text">
589
+ <div class="pf-v6-c-helper-text__item">
590
+ <span
591
+ class="pf-v6-c-helper-text__item-text"
592
+ >Max: 08/10/2022</span>
593
+ </div>
594
+ </div>
595
+ </div>
596
+ </div>
597
+ </div>
598
+ </div>
599
+ </div>
600
+ </div>
601
+ <div class="pf-v6-c-toolbar__item pf-m-search-filter">
482
602
  <div
483
603
  class="pf-v6-c-input-group"
484
604
  aria-label="search filter"
@@ -489,12 +609,12 @@ section: components
489
609
  class="pf-v6-c-menu-toggle"
490
610
  type="button"
491
611
  aria-expanded="false"
492
- id="toolbar-with-validation-example-month"
612
+ id="toolbar-with-validation-example-search-filter-menu"
493
613
  >
494
614
  <span class="pf-v6-c-menu-toggle__icon">
495
615
  <i class="fas fa-filter" aria-hidden="true"></i>
496
616
  </span>
497
- <span class="pf-v6-c-menu-toggle__text">Last month</span>
617
+ <span class="pf-v6-c-menu-toggle__text">Description</span>
498
618
  <span class="pf-v6-c-menu-toggle__controls">
499
619
  <span class="pf-v6-c-menu-toggle__toggle-icon">
500
620
  <i class="fas fa-caret-down" aria-hidden="true"></i>
@@ -502,583 +622,518 @@ section: components
502
622
  </span>
503
623
  </button>
504
624
  </div>
505
- <div class="pf-v6-c-input-group__item">
506
- <div class="pf-v6-c-date-picker">
507
- <div class="pf-v6-c-date-picker__input">
508
- <div
509
- class="pf-v6-c-input-group"
510
- aria-label="search filter"
511
- role="group"
512
- >
513
- <span class="pf-v6-c-form-control">
514
- <input
515
- type="text"
516
- value="2020-03-05"
517
- id="toolbar-with-validation-example-helper-text-input"
518
- name="toolbar-with-validation-example-helper-text-input"
519
- aria-label="Date picker"
520
- />
521
- </span>
522
- <button
523
- class="pf-v6-c-button pf-m-control"
524
- type="button"
525
- aria-label="Toggle date picker"
526
- >
527
- <i
528
- class="fas fa-calendar-alt"
529
- aria-hidden="true"
530
- ></i>
531
- </button>
532
- </div>
533
- </div>
534
- <div class="pf-v6-c-date-picker__helper-text">
535
- <div class="pf-v6-c-helper-text">
536
- <div class="pf-v6-c-helper-text__item">
537
- <span
538
- class="pf-v6-c-helper-text__item-text"
539
- >MM/DD/YYYY</span>
540
- </div>
541
- </div>
542
- </div>
543
- </div>
544
- </div>
545
- <div class="pf-v6-c-input-group__item">
546
- <div class="pf-v6-c-date-picker">
547
- <div class="pf-v6-c-date-picker__input">
548
- <div
549
- class="pf-v6-c-input-group"
550
- aria-label="search filter"
551
- role="group"
552
- >
553
- <span class="pf-v6-c-form-control pf-m-error">
554
- <input
555
- aria-invalid="true"
556
- type="text"
557
- value="2020-03-05"
558
- id="toolbar-with-validation-example-invalid-input"
559
- name="toolbar-with-validation-example-invalid-input"
560
- aria-label="Date picker"
561
- />
562
- <span class="pf-v6-c-form-control__utilities">
563
- <span
564
- class="pf-v6-c-form-control__icon pf-m-status"
565
- >
566
- <i
567
- class="fas fa-exclamation-circle"
568
- aria-hidden="true"
569
- ></i>
570
- </span>
571
- </span>
625
+ <div class="pf-v6-c-input-group__item pf-m-fill">
626
+ <div class="pf-v6-c-text-input-group">
627
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
628
+ <span class="pf-v6-c-text-input-group__text">
629
+ <span class="pf-v6-c-text-input-group__icon">
630
+ <i class="fas fa-fw fa-search"></i>
572
631
  </span>
573
- <button
574
- class="pf-v6-c-button pf-m-control"
575
- type="button"
576
- aria-label="Toggle date picker"
577
- >
578
- <i
579
- class="fas fa-calendar-alt"
580
- aria-hidden="true"
581
- ></i>
582
- </button>
583
- </div>
584
- <div class="pf-v6-c-date-picker__helper-text"></div>
585
- </div>
586
- <div class="pf-v6-c-date-picker__helper-text">
587
- <div class="pf-v6-c-helper-text">
588
- <div class="pf-v6-c-helper-text__item">
589
- <span
590
- class="pf-v6-c-helper-text__item-text"
591
- >Max: 08/10/2022</span>
592
- </div>
593
- </div>
594
- </div>
595
- </div>
596
- </div>
597
- </div>
598
- </div>
599
- </div>
600
- <div class="pf-v6-c-toolbar__item pf-m-search-filter">
601
- <div
602
- class="pf-v6-c-input-group"
603
- aria-label="search filter"
604
- role="group"
605
- >
606
- <div class="pf-v6-c-input-group__item">
607
- <button
608
- class="pf-v6-c-menu-toggle"
609
- type="button"
610
- aria-expanded="false"
611
- id="toolbar-with-validation-example-search-filter-menu"
612
- >
613
- <span class="pf-v6-c-menu-toggle__icon">
614
- <i class="fas fa-filter" aria-hidden="true"></i>
615
- </span>
616
- <span class="pf-v6-c-menu-toggle__text">Description</span>
617
- <span class="pf-v6-c-menu-toggle__controls">
618
- <span class="pf-v6-c-menu-toggle__toggle-icon">
619
- <i class="fas fa-caret-down" aria-hidden="true"></i>
620
- </span>
621
- </span>
622
- </button>
623
- </div>
624
- <div class="pf-v6-c-input-group__item pf-m-fill">
625
- <div class="pf-v6-c-text-input-group">
626
- <div class="pf-v6-c-text-input-group__main pf-m-icon">
627
- <span class="pf-v6-c-text-input-group__text">
628
- <span class="pf-v6-c-text-input-group__icon">
629
- <i class="fas fa-fw fa-search"></i>
632
+ <input
633
+ class="pf-v6-c-text-input-group__text-input"
634
+ type="text"
635
+ placeholder="Description"
636
+ value
637
+ aria-label="Search input"
638
+ />
630
639
  </span>
631
- <input
632
- class="pf-v6-c-text-input-group__text-input"
633
- type="text"
634
- placeholder="Description"
635
- value
636
- aria-label="Search input"
637
- />
638
- </span>
640
+ </div>
639
641
  </div>
640
642
  </div>
641
643
  </div>
642
644
  </div>
643
645
  </div>
646
+ <button
647
+ class="pf-v6-c-button pf-m-primary"
648
+ type="button"
649
+ >Download</button>
644
650
  </div>
645
- <button class="pf-v6-c-button pf-m-primary" type="button">Download</button>
651
+ <div
652
+ class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
653
+ id="toolbar-with-validation-example-expandable-content"
654
+ hidden
655
+ ></div>
646
656
  </div>
647
- <div
648
- class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
649
- id="toolbar-with-validation-example-expandable-content"
650
- hidden
651
- ></div>
652
657
  </div>
653
- </div>
654
- <div>
655
- <table
656
- class="pf-v6-c-table pf-m-grid-md"
657
- role="grid"
658
- aria-label="This is a table with checkboxes"
659
- id="-table-table"
660
- >
661
- <thead class="pf-v6-c-table__thead">
662
- <tr class="pf-v6-c-table__tr" role="row">
663
- <td class="pf-v6-c-table__td"></td>
664
-
665
- <th
666
- class="pf-v6-c-table__th"
667
- role="columnheader"
668
- scope="col"
669
- >Repositories</th>
670
-
671
- <th
672
- class="pf-v6-c-table__th"
673
- role="columnheader"
674
- scope="col"
675
- >Branches</th>
676
-
677
- <th
678
- class="pf-v6-c-table__th"
679
- role="columnheader"
680
- scope="col"
681
- >Pull requests</th>
682
-
683
- <th
684
- class="pf-v6-c-table__th"
685
- role="columnheader"
686
- scope="col"
687
- >Workspaces</th>
688
-
689
- <th
690
- class="pf-v6-c-table__th"
691
- role="columnheader"
692
- scope="col"
693
- >Last commit</th>
694
-
695
- <td class="pf-v6-c-table__td"></td>
696
-
697
- <td class="pf-v6-c-table__td"></td>
698
- </tr>
699
- </thead>
700
-
701
- <tbody class="pf-v6-c-table__tbody" role="rowgroup">
702
- <tr class="pf-v6-c-table__tr" role="row">
703
- <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
704
- <label
705
- class="pf-v6-c-check pf-m-standalone"
706
- id="-table-tablecheckrow2check"
707
- for="-table-tablecheckrow2check-input"
658
+ <div>
659
+ <table
660
+ class="pf-v6-c-table pf-m-grid-md"
661
+ role="grid"
662
+ aria-label="This is a table with checkboxes"
663
+ id="-table-table"
664
+ >
665
+ <thead class="pf-v6-c-table__thead">
666
+ <tr class="pf-v6-c-table__tr" role="row">
667
+ <td class="pf-v6-c-table__td"></td>
668
+
669
+ <th
670
+ class="pf-v6-c-table__th"
671
+ role="columnheader"
672
+ scope="col"
673
+ >Repositories</th>
674
+
675
+ <th
676
+ class="pf-v6-c-table__th"
677
+ role="columnheader"
678
+ scope="col"
679
+ >Branches</th>
680
+
681
+ <th
682
+ class="pf-v6-c-table__th"
683
+ role="columnheader"
684
+ scope="col"
685
+ >Pull requests</th>
686
+
687
+ <th
688
+ class="pf-v6-c-table__th"
689
+ role="columnheader"
690
+ scope="col"
691
+ >Workspaces</th>
692
+
693
+ <th
694
+ class="pf-v6-c-table__th"
695
+ role="columnheader"
696
+ scope="col"
697
+ >Last commit</th>
698
+
699
+ <td class="pf-v6-c-table__td"></td>
700
+
701
+ <td class="pf-v6-c-table__td"></td>
702
+ </tr>
703
+ </thead>
704
+
705
+ <tbody class="pf-v6-c-table__tbody" role="rowgroup">
706
+ <tr class="pf-v6-c-table__tr" role="row">
707
+ <td
708
+ class="pf-v6-c-table__td pf-v6-c-table__check"
709
+ role="cell"
708
710
  >
709
- <input
710
- class="pf-v6-c-check__input"
711
- type="checkbox"
712
- id="-table-tablecheckrow2check-input"
713
- name="-table-tablecheckrow2check-input"
714
- aria-label="Standalone check"
715
- />
716
- </label>
717
- </td>
718
-
719
- <th
720
- class="pf-v6-c-table__th"
721
- role="columnheader"
722
- data-label="Repository name"
723
- >
724
- <div>
725
- <div id="-table-table-node1">Node 1</div>
726
- <a href="#">siemur/test-space</a>
727
- </div>
728
- </th>
711
+ <label
712
+ class="pf-v6-c-check pf-m-standalone"
713
+ id="-table-tablecheckrow2check"
714
+ for="-table-tablecheckrow2check-input"
715
+ >
716
+ <input
717
+ class="pf-v6-c-check__input"
718
+ type="checkbox"
719
+ id="-table-tablecheckrow2check-input"
720
+ name="-table-tablecheckrow2check-input"
721
+ aria-label="Standalone check"
722
+ />
723
+ </label>
724
+ </td>
725
+
726
+ <th
727
+ class="pf-v6-c-table__th"
728
+ role="columnheader"
729
+ data-label="Repository name"
730
+ >
731
+ <div>
732
+ <div id="-table-table-node1">Node 1</div>
733
+ <a href="#">siemur/test-space</a>
734
+ </div>
735
+ </th>
729
736
 
730
- <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
731
- <span>
732
- <i class="fas fa-code-branch"></i> 10
733
- </span>
734
- </td>
735
- <td
736
- class="pf-v6-c-table__td"
737
- role="cell"
738
- data-label="Pull requests"
739
- >
740
- <span>
741
- <i class="fas fa-code"></i> 25
742
- </span>
743
- </td>
744
- <td
745
- class="pf-v6-c-table__td"
746
- role="cell"
747
- data-label="Workspaces"
748
- >
749
- <span>
750
- <i class="fas fa-cube"></i> 5
751
- </span>
752
- </td>
753
- <td
754
- class="pf-v6-c-table__td"
755
- role="cell"
756
- data-label="Last commit"
757
- >2 days ago</td>
758
- <td class="pf-v6-c-table__td" role="cell" data-label="Action">
759
- <a href="#">Action link</a>
760
- </td>
761
-
762
- <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
763
- <button
764
- class="pf-v6-c-menu-toggle pf-m-plain"
765
- type="button"
766
- aria-expanded="false"
767
- aria-label="Menu toggle"
737
+ <td
738
+ class="pf-v6-c-table__td"
739
+ role="cell"
740
+ data-label="Branches"
768
741
  >
769
- <span class="pf-v6-c-menu-toggle__icon">
770
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
742
+ <span>
743
+ <i class="fas fa-code-branch"></i> 10
771
744
  </span>
772
- </button>
773
- </td>
774
- </tr>
775
-
776
- <tr class="pf-v6-c-table__tr" role="row">
777
- <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
778
- <label
779
- class="pf-v6-c-check pf-m-standalone"
780
- id="-table-tablecheckrow3check"
781
- for="-table-tablecheckrow3check-input"
745
+ </td>
746
+ <td
747
+ class="pf-v6-c-table__td"
748
+ role="cell"
749
+ data-label="Pull requests"
782
750
  >
783
- <input
784
- class="pf-v6-c-check__input"
785
- type="checkbox"
786
- id="-table-tablecheckrow3check-input"
787
- name="-table-tablecheckrow3check-input"
788
- aria-label="Standalone check"
789
- />
790
- </label>
791
- </td>
792
-
793
- <th
794
- class="pf-v6-c-table__th"
795
- role="columnheader"
796
- data-label="Repository name"
797
- >
798
- <div>
799
- <div id="-table-table-node2">Node 2</div>
800
- <a href="#">siemur/test-space</a>
801
- </div>
802
- </th>
803
-
804
- <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
805
- <span>
806
- <i class="fas fa-code-branch"></i> 8
807
- </span>
808
- </td>
809
- <td
810
- class="pf-v6-c-table__td"
811
- role="cell"
812
- data-label="Pull requests"
813
- >
814
- <span>
815
- <i class="fas fa-code"></i> 30
816
- </span>
817
- </td>
818
- <td
819
- class="pf-v6-c-table__td"
820
- role="cell"
821
- data-label="Workspaces"
822
- >
823
- <span>
824
- <i class="fas fa-cube"></i> 2
825
- </span>
826
- </td>
827
- <td
828
- class="pf-v6-c-table__td"
829
- role="cell"
830
- data-label="Last commit"
831
- >2 days ago</td>
832
- <td class="pf-v6-c-table__td" role="cell" data-label="Action">
833
- <a href="#">Action link</a>
834
- </td>
835
-
836
- <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
837
- <button
838
- class="pf-v6-c-menu-toggle pf-m-plain"
839
- type="button"
840
- aria-expanded="false"
841
- aria-label="Menu toggle"
751
+ <span>
752
+ <i class="fas fa-code"></i> 25
753
+ </span>
754
+ </td>
755
+ <td
756
+ class="pf-v6-c-table__td"
757
+ role="cell"
758
+ data-label="Workspaces"
842
759
  >
843
- <span class="pf-v6-c-menu-toggle__icon">
844
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
760
+ <span>
761
+ <i class="fas fa-cube"></i> 5
845
762
  </span>
846
- </button>
847
- </td>
848
- </tr>
849
-
850
- <tr class="pf-v6-c-table__tr" role="row">
851
- <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
852
- <label
853
- class="pf-v6-c-check pf-m-standalone"
854
- id="-table-tablecheckrow4check"
855
- for="-table-tablecheckrow4check-input"
763
+ </td>
764
+ <td
765
+ class="pf-v6-c-table__td"
766
+ role="cell"
767
+ data-label="Last commit"
768
+ >2 days ago</td>
769
+ <td class="pf-v6-c-table__td" role="cell" data-label="Action">
770
+ <a href="#">Action link</a>
771
+ </td>
772
+
773
+ <td
774
+ class="pf-v6-c-table__td pf-v6-c-table__action"
775
+ role="cell"
856
776
  >
857
- <input
858
- class="pf-v6-c-check__input"
859
- type="checkbox"
860
- id="-table-tablecheckrow4check-input"
861
- name="-table-tablecheckrow4check-input"
862
- aria-label="Standalone check"
863
- />
864
- </label>
865
- </td>
777
+ <button
778
+ class="pf-v6-c-menu-toggle pf-m-plain"
779
+ type="button"
780
+ aria-expanded="false"
781
+ aria-label="Menu toggle"
782
+ >
783
+ <span class="pf-v6-c-menu-toggle__icon">
784
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
785
+ </span>
786
+ </button>
787
+ </td>
788
+ </tr>
866
789
 
867
- <th
868
- class="pf-v6-c-table__th"
869
- role="columnheader"
870
- data-label="Repository name"
871
- >
872
- <div>
873
- <div id="-table-table-node3">Node 3</div>
874
- <a href="#">siemur/test-space</a>
875
- </div>
876
- </th>
790
+ <tr class="pf-v6-c-table__tr" role="row">
791
+ <td
792
+ class="pf-v6-c-table__td pf-v6-c-table__check"
793
+ role="cell"
794
+ >
795
+ <label
796
+ class="pf-v6-c-check pf-m-standalone"
797
+ id="-table-tablecheckrow3check"
798
+ for="-table-tablecheckrow3check-input"
799
+ >
800
+ <input
801
+ class="pf-v6-c-check__input"
802
+ type="checkbox"
803
+ id="-table-tablecheckrow3check-input"
804
+ name="-table-tablecheckrow3check-input"
805
+ aria-label="Standalone check"
806
+ />
807
+ </label>
808
+ </td>
809
+
810
+ <th
811
+ class="pf-v6-c-table__th"
812
+ role="columnheader"
813
+ data-label="Repository name"
814
+ >
815
+ <div>
816
+ <div id="-table-table-node2">Node 2</div>
817
+ <a href="#">siemur/test-space</a>
818
+ </div>
819
+ </th>
877
820
 
878
- <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
879
- <span>
880
- <i class="fas fa-code-branch"></i> 12
881
- </span>
882
- </td>
883
- <td
884
- class="pf-v6-c-table__td"
885
- role="cell"
886
- data-label="Pull requests"
887
- >
888
- <span>
889
- <i class="fas fa-code"></i> 48
890
- </span>
891
- </td>
892
- <td
893
- class="pf-v6-c-table__td"
894
- role="cell"
895
- data-label="Workspaces"
896
- >
897
- <span>
898
- <i class="fas fa-cube"></i> 13
899
- </span>
900
- </td>
901
- <td
902
- class="pf-v6-c-table__td"
903
- role="cell"
904
- data-label="Last commit"
905
- >30 days ago</td>
906
- <td class="pf-v6-c-table__td" role="cell" data-label="Action">
907
- <a href="#">Action link</a>
908
- </td>
909
-
910
- <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
911
- <button
912
- class="pf-v6-c-menu-toggle pf-m-plain"
913
- type="button"
914
- aria-expanded="false"
915
- aria-label="Menu toggle"
821
+ <td
822
+ class="pf-v6-c-table__td"
823
+ role="cell"
824
+ data-label="Branches"
916
825
  >
917
- <span class="pf-v6-c-menu-toggle__icon">
918
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
826
+ <span>
827
+ <i class="fas fa-code-branch"></i> 8
919
828
  </span>
920
- </button>
921
- </td>
922
- </tr>
923
-
924
- <tr class="pf-v6-c-table__tr" role="row">
925
- <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
926
- <label
927
- class="pf-v6-c-check pf-m-standalone"
928
- id="-table-tablecheckrow5check"
929
- for="-table-tablecheckrow5check-input"
829
+ </td>
830
+ <td
831
+ class="pf-v6-c-table__td"
832
+ role="cell"
833
+ data-label="Pull requests"
930
834
  >
931
- <input
932
- class="pf-v6-c-check__input"
933
- type="checkbox"
934
- id="-table-tablecheckrow5check-input"
935
- name="-table-tablecheckrow5check-input"
936
- aria-label="Standalone check"
937
- />
938
- </label>
939
- </td>
835
+ <span>
836
+ <i class="fas fa-code"></i> 30
837
+ </span>
838
+ </td>
839
+ <td
840
+ class="pf-v6-c-table__td"
841
+ role="cell"
842
+ data-label="Workspaces"
843
+ >
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
858
+ class="pf-v6-c-table__td pf-v6-c-table__action"
859
+ role="cell"
860
+ >
861
+ <button
862
+ class="pf-v6-c-menu-toggle pf-m-plain"
863
+ type="button"
864
+ aria-expanded="false"
865
+ aria-label="Menu toggle"
866
+ >
867
+ <span class="pf-v6-c-menu-toggle__icon">
868
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
869
+ </span>
870
+ </button>
871
+ </td>
872
+ </tr>
940
873
 
941
- <th
942
- class="pf-v6-c-table__th"
943
- role="columnheader"
944
- data-label="Repository name"
945
- >
946
- <div>
947
- <div id="-table-table-node4">Node 4</div>
948
- <a href="#">siemur/test-space</a>
949
- </div>
950
- </th>
874
+ <tr class="pf-v6-c-table__tr" role="row">
875
+ <td
876
+ class="pf-v6-c-table__td pf-v6-c-table__check"
877
+ role="cell"
878
+ >
879
+ <label
880
+ class="pf-v6-c-check pf-m-standalone"
881
+ id="-table-tablecheckrow4check"
882
+ for="-table-tablecheckrow4check-input"
883
+ >
884
+ <input
885
+ class="pf-v6-c-check__input"
886
+ type="checkbox"
887
+ id="-table-tablecheckrow4check-input"
888
+ name="-table-tablecheckrow4check-input"
889
+ aria-label="Standalone check"
890
+ />
891
+ </label>
892
+ </td>
893
+
894
+ <th
895
+ class="pf-v6-c-table__th"
896
+ role="columnheader"
897
+ data-label="Repository name"
898
+ >
899
+ <div>
900
+ <div id="-table-table-node3">Node 3</div>
901
+ <a href="#">siemur/test-space</a>
902
+ </div>
903
+ </th>
951
904
 
952
- <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
953
- <span>
954
- <i class="fas fa-code-branch"></i> 3
955
- </span>
956
- </td>
957
- <td
958
- class="pf-v6-c-table__td"
959
- role="cell"
960
- data-label="Pull requests"
961
- >
962
- <span>
963
- <i class="fas fa-code"></i> 8
964
- </span>
965
- </td>
966
- <td
967
- class="pf-v6-c-table__td"
968
- role="cell"
969
- data-label="Workspaces"
970
- >
971
- <span>
972
- <i class="fas fa-cube"></i> 20
973
- </span>
974
- </td>
975
- <td
976
- class="pf-v6-c-table__td"
977
- role="cell"
978
- data-label="Last commit"
979
- >8 days ago</td>
980
- <td class="pf-v6-c-table__td" role="cell" data-label="Action">
981
- <a href="#">Action link</a>
982
- </td>
983
-
984
- <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
985
- <button
986
- class="pf-v6-c-menu-toggle pf-m-plain"
987
- type="button"
988
- aria-expanded="false"
989
- aria-label="Menu toggle"
905
+ <td
906
+ class="pf-v6-c-table__td"
907
+ role="cell"
908
+ data-label="Branches"
990
909
  >
991
- <span class="pf-v6-c-menu-toggle__icon">
992
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
910
+ <span>
911
+ <i class="fas fa-code-branch"></i> 12
993
912
  </span>
994
- </button>
995
- </td>
996
- </tr>
997
-
998
- <tr class="pf-v6-c-table__tr" role="row">
999
- <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
1000
- <label
1001
- class="pf-v6-c-check pf-m-standalone"
1002
- id="-table-tablecheckrow6check"
1003
- for="-table-tablecheckrow6check-input"
913
+ </td>
914
+ <td
915
+ class="pf-v6-c-table__td"
916
+ role="cell"
917
+ data-label="Pull requests"
1004
918
  >
1005
- <input
1006
- class="pf-v6-c-check__input"
1007
- type="checkbox"
1008
- id="-table-tablecheckrow6check-input"
1009
- name="-table-tablecheckrow6check-input"
1010
- aria-label="Standalone check"
1011
- />
1012
- </label>
1013
- </td>
1014
- <td
1015
- class="pf-v6-c-table__td"
1016
- role="cell"
1017
- data-label="Repository name"
1018
- >
1019
- <div>
1020
- <div id="-table-table-node5">Node 5</div>
1021
- <a href="#">siemur/test-space</a>
1022
- </div>
1023
- </td>
1024
- <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
1025
- <span>
1026
- <i class="fas fa-code-branch"></i> 34
1027
- </span>
1028
- </td>
1029
- <td
1030
- class="pf-v6-c-table__td"
1031
- role="cell"
1032
- data-label="Pull requests"
1033
- >
1034
- <span>
1035
- <i class="fas fa-code"></i> 21
1036
- </span>
1037
- </td>
1038
- <td
1039
- class="pf-v6-c-table__td"
1040
- role="cell"
1041
- data-label="Workspaces"
1042
- >
1043
- <span>
1044
- <i class="fas fa-cube"></i> 26
1045
- </span>
1046
- </td>
1047
- <td
1048
- class="pf-v6-c-table__td"
1049
- role="cell"
1050
- data-label="Last commit"
1051
- >2 days ago</td>
1052
- <td class="pf-v6-c-table__td" role="cell" data-label="Action">
1053
- <a href="#">Action link</a>
1054
- </td>
1055
-
1056
- <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
1057
- <button
1058
- class="pf-v6-c-menu-toggle pf-m-plain"
1059
- type="button"
1060
- aria-expanded="false"
1061
- aria-label="Menu toggle"
919
+ <span>
920
+ <i class="fas fa-code"></i> 48
921
+ </span>
922
+ </td>
923
+ <td
924
+ class="pf-v6-c-table__td"
925
+ role="cell"
926
+ data-label="Workspaces"
1062
927
  >
1063
- <span class="pf-v6-c-menu-toggle__icon">
1064
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
928
+ <span>
929
+ <i class="fas fa-cube"></i> 13
1065
930
  </span>
1066
- </button>
1067
- </td>
1068
- </tr>
1069
- </tbody>
1070
- </table>
1071
- </div>
1072
- </section>
1073
- </main>
1074
- </div>
1075
- </div>
931
+ </td>
932
+ <td
933
+ class="pf-v6-c-table__td"
934
+ role="cell"
935
+ data-label="Last commit"
936
+ >30 days ago</td>
937
+ <td class="pf-v6-c-table__td" role="cell" data-label="Action">
938
+ <a href="#">Action link</a>
939
+ </td>
940
+
941
+ <td
942
+ class="pf-v6-c-table__td pf-v6-c-table__action"
943
+ role="cell"
944
+ >
945
+ <button
946
+ class="pf-v6-c-menu-toggle pf-m-plain"
947
+ type="button"
948
+ aria-expanded="false"
949
+ aria-label="Menu toggle"
950
+ >
951
+ <span class="pf-v6-c-menu-toggle__icon">
952
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
953
+ </span>
954
+ </button>
955
+ </td>
956
+ </tr>
1076
957
 
1077
- ```
958
+ <tr class="pf-v6-c-table__tr" role="row">
959
+ <td
960
+ class="pf-v6-c-table__td pf-v6-c-table__check"
961
+ role="cell"
962
+ >
963
+ <label
964
+ class="pf-v6-c-check pf-m-standalone"
965
+ id="-table-tablecheckrow5check"
966
+ for="-table-tablecheckrow5check-input"
967
+ >
968
+ <input
969
+ class="pf-v6-c-check__input"
970
+ type="checkbox"
971
+ id="-table-tablecheckrow5check-input"
972
+ name="-table-tablecheckrow5check-input"
973
+ aria-label="Standalone check"
974
+ />
975
+ </label>
976
+ </td>
977
+
978
+ <th
979
+ class="pf-v6-c-table__th"
980
+ role="columnheader"
981
+ data-label="Repository name"
982
+ >
983
+ <div>
984
+ <div id="-table-table-node4">Node 4</div>
985
+ <a href="#">siemur/test-space</a>
986
+ </div>
987
+ </th>
1078
988
 
1079
- ### Toolbar attribute value search filter on mobile
989
+ <td
990
+ class="pf-v6-c-table__td"
991
+ role="cell"
992
+ data-label="Branches"
993
+ >
994
+ <span>
995
+ <i class="fas fa-code-branch"></i> 3
996
+ </span>
997
+ </td>
998
+ <td
999
+ class="pf-v6-c-table__td"
1000
+ role="cell"
1001
+ data-label="Pull requests"
1002
+ >
1003
+ <span>
1004
+ <i class="fas fa-code"></i> 8
1005
+ </span>
1006
+ </td>
1007
+ <td
1008
+ class="pf-v6-c-table__td"
1009
+ role="cell"
1010
+ data-label="Workspaces"
1011
+ >
1012
+ <span>
1013
+ <i class="fas fa-cube"></i> 20
1014
+ </span>
1015
+ </td>
1016
+ <td
1017
+ class="pf-v6-c-table__td"
1018
+ role="cell"
1019
+ data-label="Last commit"
1020
+ >8 days ago</td>
1021
+ <td class="pf-v6-c-table__td" role="cell" data-label="Action">
1022
+ <a href="#">Action link</a>
1023
+ </td>
1024
+
1025
+ <td
1026
+ class="pf-v6-c-table__td pf-v6-c-table__action"
1027
+ role="cell"
1028
+ >
1029
+ <button
1030
+ class="pf-v6-c-menu-toggle pf-m-plain"
1031
+ type="button"
1032
+ aria-expanded="false"
1033
+ aria-label="Menu toggle"
1034
+ >
1035
+ <span class="pf-v6-c-menu-toggle__icon">
1036
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1037
+ </span>
1038
+ </button>
1039
+ </td>
1040
+ </tr>
1080
1041
 
1081
- ```html
1042
+ <tr class="pf-v6-c-table__tr" role="row">
1043
+ <td
1044
+ class="pf-v6-c-table__td pf-v6-c-table__check"
1045
+ role="cell"
1046
+ >
1047
+ <label
1048
+ class="pf-v6-c-check pf-m-standalone"
1049
+ id="-table-tablecheckrow6check"
1050
+ for="-table-tablecheckrow6check-input"
1051
+ >
1052
+ <input
1053
+ class="pf-v6-c-check__input"
1054
+ type="checkbox"
1055
+ id="-table-tablecheckrow6check-input"
1056
+ name="-table-tablecheckrow6check-input"
1057
+ aria-label="Standalone check"
1058
+ />
1059
+ </label>
1060
+ </td>
1061
+ <td
1062
+ class="pf-v6-c-table__td"
1063
+ role="cell"
1064
+ data-label="Repository name"
1065
+ >
1066
+ <div>
1067
+ <div id="-table-table-node5">Node 5</div>
1068
+ <a href="#">siemur/test-space</a>
1069
+ </div>
1070
+ </td>
1071
+ <td
1072
+ class="pf-v6-c-table__td"
1073
+ role="cell"
1074
+ data-label="Branches"
1075
+ >
1076
+ <span>
1077
+ <i class="fas fa-code-branch"></i> 34
1078
+ </span>
1079
+ </td>
1080
+ <td
1081
+ class="pf-v6-c-table__td"
1082
+ role="cell"
1083
+ data-label="Pull requests"
1084
+ >
1085
+ <span>
1086
+ <i class="fas fa-code"></i> 21
1087
+ </span>
1088
+ </td>
1089
+ <td
1090
+ class="pf-v6-c-table__td"
1091
+ role="cell"
1092
+ data-label="Workspaces"
1093
+ >
1094
+ <span>
1095
+ <i class="fas fa-cube"></i> 26
1096
+ </span>
1097
+ </td>
1098
+ <td
1099
+ class="pf-v6-c-table__td"
1100
+ role="cell"
1101
+ data-label="Last commit"
1102
+ >2 days ago</td>
1103
+ <td class="pf-v6-c-table__td" role="cell" data-label="Action">
1104
+ <a href="#">Action link</a>
1105
+ </td>
1106
+
1107
+ <td
1108
+ class="pf-v6-c-table__td pf-v6-c-table__action"
1109
+ role="cell"
1110
+ >
1111
+ <button
1112
+ class="pf-v6-c-menu-toggle pf-m-plain"
1113
+ type="button"
1114
+ aria-expanded="false"
1115
+ aria-label="Menu toggle"
1116
+ >
1117
+ <span class="pf-v6-c-menu-toggle__icon">
1118
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1119
+ </span>
1120
+ </button>
1121
+ </td>
1122
+ </tr>
1123
+ </tbody>
1124
+ </table>
1125
+ </div>
1126
+ </div>
1127
+ </section>
1128
+ </main>
1129
+ </div>
1130
+ </div>
1131
+
1132
+ ```
1133
+
1134
+ ### Toolbar attribute value search filter on mobile
1135
+
1136
+ ```html
1082
1137
  <div
1083
1138
  class="pf-v6-c-toolbar"
1084
1139
  id="toolbar-attribute-value-search-filter-mobile-example"
@@ -2292,651 +2347,703 @@ section: components
2292
2347
  </div>
2293
2348
  </section>
2294
2349
  <section class="pf-v6-c-page__main-section">
2295
- <div
2296
- class="pf-v6-c-toolbar pf-m-nowrap"
2297
- id="toolbar-pagination-management-example-toolbar"
2298
- >
2299
- <div class="pf-v6-c-toolbar__content">
2300
- <div class="pf-v6-c-toolbar__content-section pf-m-nowrap">
2301
- <div class="pf-v6-c-toolbar__group pf-m-toggle-group pf-m-show">
2302
- <div class="pf-v6-c-toolbar__toggle pf-m-show">
2303
- <button
2304
- class="pf-v6-c-menu-toggle pf-m-plain"
2305
- type="button"
2306
- aria-expanded="false"
2307
- aria-label="Show filters"
2308
- aria-controls="toolbar-pagination-management-example-toolbar-expandable-content"
2309
- >
2310
- <span class="pf-v6-c-menu-toggle__icon">
2311
- <i class="fas fa-filter" aria-hidden="true"></i>
2312
- </span>
2313
- </button>
2314
- </div>
2315
- <div class="pf-v6-c-toolbar__item pf-m-search-filter">
2316
- <div
2317
- class="pf-v6-c-input-group"
2318
- aria-label="search filter"
2319
- role="group"
2320
- >
2321
- <div class="pf-v6-c-input-group__item">
2322
- <button
2323
- class="pf-v6-c-menu-toggle"
2324
- type="button"
2325
- aria-expanded="false"
2326
- id="toolbar-pagination-management-example-toolbar-search-filter-menu"
2327
- >
2328
- <span class="pf-v6-c-menu-toggle__icon">
2329
- <i class="fas fa-filter" aria-hidden="true"></i>
2330
- </span>
2331
- <span class="pf-v6-c-menu-toggle__text">Name</span>
2332
- <span class="pf-v6-c-menu-toggle__controls">
2333
- <span class="pf-v6-c-menu-toggle__toggle-icon">
2334
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2335
- </span>
2336
- </span>
2337
- </button>
2338
- </div>
2339
- <div class="pf-v6-c-input-group__item pf-m-fill">
2340
- <div class="pf-v6-c-text-input-group">
2341
- <div class="pf-v6-c-text-input-group__main pf-m-icon">
2342
- <span class="pf-v6-c-text-input-group__text">
2343
- <span class="pf-v6-c-text-input-group__icon">
2344
- <i class="fas fa-fw fa-search"></i>
2345
- </span>
2346
- <input
2347
- class="pf-v6-c-text-input-group__text-input"
2348
- type="text"
2349
- placeholder="Filter by name"
2350
- value
2351
- aria-label="Search input"
2352
- />
2353
- </span>
2354
- </div>
2355
- </div>
2356
- </div>
2357
- </div>
2358
- </div>
2359
- </div>
2360
- <div class="pf-v6-c-toolbar__item pf-m-overflow-menu">
2361
- <div
2362
- class="pf-v6-c-overflow-menu"
2363
- id="toolbar-pagination-management-example-toolbar-overflow-menu"
2364
- >
2365
- <div class="pf-v6-c-overflow-menu__control">
2350
+ <div class="pf-v6-c-page__main-body">
2351
+ <div
2352
+ class="pf-v6-c-toolbar pf-m-nowrap"
2353
+ id="toolbar-pagination-management-example-toolbar"
2354
+ >
2355
+ <div class="pf-v6-c-toolbar__content">
2356
+ <div class="pf-v6-c-toolbar__content-section pf-m-nowrap">
2357
+ <div class="pf-v6-c-toolbar__group pf-m-toggle-group pf-m-show">
2358
+ <div class="pf-v6-c-toolbar__toggle pf-m-show">
2366
2359
  <button
2367
2360
  class="pf-v6-c-menu-toggle pf-m-plain"
2368
2361
  type="button"
2369
2362
  aria-expanded="false"
2370
- aria-label="Menu toggle"
2371
- id="toolbar-pagination-management-example-toolbar-overflow-menutoggle"
2363
+ aria-label="Show filters"
2364
+ aria-controls="toolbar-pagination-management-example-toolbar-expandable-content"
2372
2365
  >
2373
2366
  <span class="pf-v6-c-menu-toggle__icon">
2374
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2367
+ <i class="fas fa-filter" aria-hidden="true"></i>
2375
2368
  </span>
2376
2369
  </button>
2377
2370
  </div>
2371
+ <div class="pf-v6-c-toolbar__item pf-m-search-filter">
2372
+ <div
2373
+ class="pf-v6-c-input-group"
2374
+ aria-label="search filter"
2375
+ role="group"
2376
+ >
2377
+ <div class="pf-v6-c-input-group__item">
2378
+ <button
2379
+ class="pf-v6-c-menu-toggle"
2380
+ type="button"
2381
+ aria-expanded="false"
2382
+ id="toolbar-pagination-management-example-toolbar-search-filter-menu"
2383
+ >
2384
+ <span class="pf-v6-c-menu-toggle__icon">
2385
+ <i class="fas fa-filter" aria-hidden="true"></i>
2386
+ </span>
2387
+ <span class="pf-v6-c-menu-toggle__text">Name</span>
2388
+ <span class="pf-v6-c-menu-toggle__controls">
2389
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
2390
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2391
+ </span>
2392
+ </span>
2393
+ </button>
2394
+ </div>
2395
+ <div class="pf-v6-c-input-group__item pf-m-fill">
2396
+ <div class="pf-v6-c-text-input-group">
2397
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
2398
+ <span class="pf-v6-c-text-input-group__text">
2399
+ <span class="pf-v6-c-text-input-group__icon">
2400
+ <i class="fas fa-fw fa-search"></i>
2401
+ </span>
2402
+ <input
2403
+ class="pf-v6-c-text-input-group__text-input"
2404
+ type="text"
2405
+ placeholder="Filter by name"
2406
+ value
2407
+ aria-label="Search input"
2408
+ />
2409
+ </span>
2410
+ </div>
2411
+ </div>
2412
+ </div>
2413
+ </div>
2414
+ </div>
2378
2415
  </div>
2379
- </div>
2380
- <div class="pf-v6-c-toolbar__item pf-m-pagination">
2381
- <div
2382
- class="pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md"
2383
- >
2416
+ <div class="pf-v6-c-toolbar__item pf-m-overflow-menu">
2384
2417
  <div
2385
- class="pf-v6-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
2418
+ class="pf-v6-c-overflow-menu"
2419
+ id="toolbar-pagination-management-example-toolbar-overflow-menu"
2386
2420
  >
2387
- <div class="pf-v6-c-pagination__page-menu">
2421
+ <div class="pf-v6-c-overflow-menu__control">
2388
2422
  <button
2389
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
2423
+ class="pf-v6-c-menu-toggle pf-m-plain"
2390
2424
  type="button"
2391
2425
  aria-expanded="false"
2392
2426
  aria-label="Menu toggle"
2393
- id="toolbar-pagination-management-example-toolbar-pagination-menu-toggle"
2427
+ id="toolbar-pagination-management-example-toolbar-overflow-menutoggle"
2394
2428
  >
2395
- <span class="pf-v6-c-menu-toggle__text">
2396
- <b>1 - 10</b>&nbsp;of&nbsp;
2397
- <b>36</b>
2398
- </span>
2399
- <span class="pf-v6-c-menu-toggle__controls">
2400
- <span class="pf-v6-c-menu-toggle__toggle-icon">
2401
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2402
- </span>
2429
+ <span class="pf-v6-c-menu-toggle__icon">
2430
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2403
2431
  </span>
2404
2432
  </button>
2405
2433
  </div>
2406
- <nav
2407
- class="pf-v6-c-pagination__nav"
2408
- aria-label="Pagination"
2434
+ </div>
2435
+ </div>
2436
+ <div class="pf-v6-c-toolbar__item pf-m-pagination">
2437
+ <div
2438
+ class="pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md"
2439
+ >
2440
+ <div
2441
+ class="pf-v6-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
2409
2442
  >
2410
- <div class="pf-v6-c-pagination__nav-control pf-m-prev">
2411
- <button
2412
- class="pf-v6-c-button pf-m-plain"
2413
- type="button"
2414
- disabled
2415
- aria-label="Go to previous page"
2416
- >
2417
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2418
- </button>
2419
- </div>
2420
- <div class="pf-v6-c-pagination__nav-control pf-m-next">
2443
+ <div class="pf-v6-c-pagination__page-menu">
2421
2444
  <button
2422
- class="pf-v6-c-button pf-m-plain"
2445
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
2423
2446
  type="button"
2424
- aria-label="Go to next page"
2447
+ aria-expanded="false"
2448
+ aria-label="Menu toggle"
2449
+ id="toolbar-pagination-management-example-toolbar-pagination-menu-toggle"
2425
2450
  >
2426
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2451
+ <span class="pf-v6-c-menu-toggle__text">
2452
+ <b>1 - 10</b>&nbsp;of&nbsp;
2453
+ <b>36</b>
2454
+ </span>
2455
+ <span class="pf-v6-c-menu-toggle__controls">
2456
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
2457
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2458
+ </span>
2459
+ </span>
2427
2460
  </button>
2428
2461
  </div>
2429
- </nav>
2462
+ <nav
2463
+ class="pf-v6-c-pagination__nav"
2464
+ aria-label="Pagination"
2465
+ >
2466
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
2467
+ <button
2468
+ class="pf-v6-c-button pf-m-plain"
2469
+ type="button"
2470
+ disabled
2471
+ aria-label="Go to previous page"
2472
+ >
2473
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
2474
+ </button>
2475
+ </div>
2476
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
2477
+ <button
2478
+ class="pf-v6-c-button pf-m-plain"
2479
+ type="button"
2480
+ aria-label="Go to next page"
2481
+ >
2482
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2483
+ </button>
2484
+ </div>
2485
+ </nav>
2486
+ </div>
2430
2487
  </div>
2431
2488
  </div>
2432
2489
  </div>
2490
+ <div
2491
+ class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
2492
+ id="toolbar-pagination-management-example-toolbar-expandable-content"
2493
+ hidden
2494
+ ></div>
2433
2495
  </div>
2434
- <div
2435
- class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
2436
- id="toolbar-pagination-management-example-toolbar-expandable-content"
2437
- hidden
2438
- ></div>
2439
2496
  </div>
2440
- </div>
2441
- <div>
2442
- <table
2443
- class="pf-v6-c-table pf-m-grid-md"
2444
- role="grid"
2445
- aria-label="This is a table with checkboxes"
2446
- id="toolbar-and-table-static-search-overflow-menu-collapsed-table"
2447
- >
2448
- <thead class="pf-v6-c-table__thead">
2449
- <tr class="pf-v6-c-table__tr" role="row">
2450
- <td class="pf-v6-c-table__td"></td>
2451
-
2452
- <th
2453
- class="pf-v6-c-table__th"
2454
- role="columnheader"
2455
- scope="col"
2456
- >Repositories</th>
2457
-
2458
- <th
2459
- class="pf-v6-c-table__th"
2460
- role="columnheader"
2461
- scope="col"
2462
- >Branches</th>
2463
-
2464
- <th
2465
- class="pf-v6-c-table__th"
2466
- role="columnheader"
2467
- scope="col"
2468
- >Pull requests</th>
2469
-
2470
- <th
2471
- class="pf-v6-c-table__th"
2472
- role="columnheader"
2473
- scope="col"
2474
- >Workspaces</th>
2475
-
2476
- <th
2477
- class="pf-v6-c-table__th"
2478
- role="columnheader"
2479
- scope="col"
2480
- >Last commit</th>
2481
-
2482
- <td class="pf-v6-c-table__td"></td>
2483
-
2484
- <td class="pf-v6-c-table__td"></td>
2485
- </tr>
2486
- </thead>
2487
-
2488
- <tbody class="pf-v6-c-table__tbody" role="rowgroup">
2489
- <tr class="pf-v6-c-table__tr" role="row">
2490
- <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
2491
- <label
2492
- class="pf-v6-c-check pf-m-standalone"
2493
- id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow2check"
2494
- for="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow2check-input"
2497
+ <div>
2498
+ <table
2499
+ class="pf-v6-c-table pf-m-grid-md"
2500
+ role="grid"
2501
+ aria-label="This is a table with checkboxes"
2502
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-table"
2503
+ >
2504
+ <thead class="pf-v6-c-table__thead">
2505
+ <tr class="pf-v6-c-table__tr" role="row">
2506
+ <td class="pf-v6-c-table__td"></td>
2507
+
2508
+ <th
2509
+ class="pf-v6-c-table__th"
2510
+ role="columnheader"
2511
+ scope="col"
2512
+ >Repositories</th>
2513
+
2514
+ <th
2515
+ class="pf-v6-c-table__th"
2516
+ role="columnheader"
2517
+ scope="col"
2518
+ >Branches</th>
2519
+
2520
+ <th
2521
+ class="pf-v6-c-table__th"
2522
+ role="columnheader"
2523
+ scope="col"
2524
+ >Pull requests</th>
2525
+
2526
+ <th
2527
+ class="pf-v6-c-table__th"
2528
+ role="columnheader"
2529
+ scope="col"
2530
+ >Workspaces</th>
2531
+
2532
+ <th
2533
+ class="pf-v6-c-table__th"
2534
+ role="columnheader"
2535
+ scope="col"
2536
+ >Last commit</th>
2537
+
2538
+ <td class="pf-v6-c-table__td"></td>
2539
+
2540
+ <td class="pf-v6-c-table__td"></td>
2541
+ </tr>
2542
+ </thead>
2543
+
2544
+ <tbody class="pf-v6-c-table__tbody" role="rowgroup">
2545
+ <tr class="pf-v6-c-table__tr" role="row">
2546
+ <td
2547
+ class="pf-v6-c-table__td pf-v6-c-table__check"
2548
+ role="cell"
2495
2549
  >
2496
- <input
2497
- class="pf-v6-c-check__input"
2498
- type="checkbox"
2499
- id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow2check-input"
2500
- name="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow2check-input"
2501
- aria-label="Standalone check"
2502
- />
2503
- </label>
2504
- </td>
2505
-
2506
- <th
2507
- class="pf-v6-c-table__th"
2508
- role="columnheader"
2509
- data-label="Repository name"
2510
- >
2511
- <div>
2512
- <div
2513
- id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node1"
2514
- >Node 1</div>
2515
- <a href="#">siemur/test-space</a>
2516
- </div>
2517
- </th>
2550
+ <label
2551
+ class="pf-v6-c-check pf-m-standalone"
2552
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow2check"
2553
+ for="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow2check-input"
2554
+ >
2555
+ <input
2556
+ class="pf-v6-c-check__input"
2557
+ type="checkbox"
2558
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow2check-input"
2559
+ name="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow2check-input"
2560
+ aria-label="Standalone check"
2561
+ />
2562
+ </label>
2563
+ </td>
2564
+
2565
+ <th
2566
+ class="pf-v6-c-table__th"
2567
+ role="columnheader"
2568
+ data-label="Repository name"
2569
+ >
2570
+ <div>
2571
+ <div
2572
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node1"
2573
+ >Node 1</div>
2574
+ <a href="#">siemur/test-space</a>
2575
+ </div>
2576
+ </th>
2518
2577
 
2519
- <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
2520
- <span>
2521
- <i class="fas fa-code-branch"></i> 10
2522
- </span>
2523
- </td>
2524
- <td
2525
- class="pf-v6-c-table__td"
2526
- role="cell"
2527
- data-label="Pull requests"
2528
- >
2529
- <span>
2530
- <i class="fas fa-code"></i> 25
2531
- </span>
2532
- </td>
2533
- <td
2534
- class="pf-v6-c-table__td"
2535
- role="cell"
2536
- data-label="Workspaces"
2537
- >
2538
- <span>
2539
- <i class="fas fa-cube"></i> 5
2540
- </span>
2541
- </td>
2542
- <td
2543
- class="pf-v6-c-table__td"
2544
- role="cell"
2545
- data-label="Last commit"
2546
- >2 days ago</td>
2547
- <td class="pf-v6-c-table__td" role="cell" data-label="Action">
2548
- <a href="#">Action link</a>
2549
- </td>
2550
-
2551
- <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
2552
- <button
2553
- class="pf-v6-c-menu-toggle pf-m-plain"
2554
- type="button"
2555
- aria-expanded="false"
2556
- aria-label="Menu toggle"
2578
+ <td
2579
+ class="pf-v6-c-table__td"
2580
+ role="cell"
2581
+ data-label="Branches"
2557
2582
  >
2558
- <span class="pf-v6-c-menu-toggle__icon">
2559
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2583
+ <span>
2584
+ <i class="fas fa-code-branch"></i> 10
2560
2585
  </span>
2561
- </button>
2562
- </td>
2563
- </tr>
2564
-
2565
- <tr class="pf-v6-c-table__tr" role="row">
2566
- <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
2567
- <label
2568
- class="pf-v6-c-check pf-m-standalone"
2569
- id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow3check"
2570
- for="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow3check-input"
2586
+ </td>
2587
+ <td
2588
+ class="pf-v6-c-table__td"
2589
+ role="cell"
2590
+ data-label="Pull requests"
2571
2591
  >
2572
- <input
2573
- class="pf-v6-c-check__input"
2574
- type="checkbox"
2575
- id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow3check-input"
2576
- name="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow3check-input"
2577
- aria-label="Standalone check"
2578
- />
2579
- </label>
2580
- </td>
2592
+ <span>
2593
+ <i class="fas fa-code"></i> 25
2594
+ </span>
2595
+ </td>
2596
+ <td
2597
+ class="pf-v6-c-table__td"
2598
+ role="cell"
2599
+ data-label="Workspaces"
2600
+ >
2601
+ <span>
2602
+ <i class="fas fa-cube"></i> 5
2603
+ </span>
2604
+ </td>
2605
+ <td
2606
+ class="pf-v6-c-table__td"
2607
+ role="cell"
2608
+ data-label="Last commit"
2609
+ >2 days ago</td>
2610
+ <td class="pf-v6-c-table__td" role="cell" data-label="Action">
2611
+ <a href="#">Action link</a>
2612
+ </td>
2613
+
2614
+ <td
2615
+ class="pf-v6-c-table__td pf-v6-c-table__action"
2616
+ role="cell"
2617
+ >
2618
+ <button
2619
+ class="pf-v6-c-menu-toggle pf-m-plain"
2620
+ type="button"
2621
+ aria-expanded="false"
2622
+ aria-label="Menu toggle"
2623
+ >
2624
+ <span class="pf-v6-c-menu-toggle__icon">
2625
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2626
+ </span>
2627
+ </button>
2628
+ </td>
2629
+ </tr>
2581
2630
 
2582
- <th
2583
- class="pf-v6-c-table__th"
2584
- role="columnheader"
2585
- data-label="Repository name"
2586
- >
2587
- <div>
2588
- <div
2589
- id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node2"
2590
- >Node 2</div>
2591
- <a href="#">siemur/test-space</a>
2592
- </div>
2593
- </th>
2631
+ <tr class="pf-v6-c-table__tr" role="row">
2632
+ <td
2633
+ class="pf-v6-c-table__td pf-v6-c-table__check"
2634
+ role="cell"
2635
+ >
2636
+ <label
2637
+ class="pf-v6-c-check pf-m-standalone"
2638
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow3check"
2639
+ for="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow3check-input"
2640
+ >
2641
+ <input
2642
+ class="pf-v6-c-check__input"
2643
+ type="checkbox"
2644
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow3check-input"
2645
+ name="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow3check-input"
2646
+ aria-label="Standalone check"
2647
+ />
2648
+ </label>
2649
+ </td>
2650
+
2651
+ <th
2652
+ class="pf-v6-c-table__th"
2653
+ role="columnheader"
2654
+ data-label="Repository name"
2655
+ >
2656
+ <div>
2657
+ <div
2658
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node2"
2659
+ >Node 2</div>
2660
+ <a href="#">siemur/test-space</a>
2661
+ </div>
2662
+ </th>
2594
2663
 
2595
- <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
2596
- <span>
2597
- <i class="fas fa-code-branch"></i> 8
2598
- </span>
2599
- </td>
2600
- <td
2601
- class="pf-v6-c-table__td"
2602
- role="cell"
2603
- data-label="Pull requests"
2604
- >
2605
- <span>
2606
- <i class="fas fa-code"></i> 30
2607
- </span>
2608
- </td>
2609
- <td
2610
- class="pf-v6-c-table__td"
2611
- role="cell"
2612
- data-label="Workspaces"
2613
- >
2614
- <span>
2615
- <i class="fas fa-cube"></i> 2
2616
- </span>
2617
- </td>
2618
- <td
2619
- class="pf-v6-c-table__td"
2620
- role="cell"
2621
- data-label="Last commit"
2622
- >2 days ago</td>
2623
- <td class="pf-v6-c-table__td" role="cell" data-label="Action">
2624
- <a href="#">Action link</a>
2625
- </td>
2626
-
2627
- <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
2628
- <button
2629
- class="pf-v6-c-menu-toggle pf-m-plain"
2630
- type="button"
2631
- aria-expanded="false"
2632
- aria-label="Menu toggle"
2664
+ <td
2665
+ class="pf-v6-c-table__td"
2666
+ role="cell"
2667
+ data-label="Branches"
2633
2668
  >
2634
- <span class="pf-v6-c-menu-toggle__icon">
2635
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2669
+ <span>
2670
+ <i class="fas fa-code-branch"></i> 8
2636
2671
  </span>
2637
- </button>
2638
- </td>
2639
- </tr>
2640
-
2641
- <tr class="pf-v6-c-table__tr" role="row">
2642
- <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
2643
- <label
2644
- class="pf-v6-c-check pf-m-standalone"
2645
- id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow4check"
2646
- for="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow4check-input"
2672
+ </td>
2673
+ <td
2674
+ class="pf-v6-c-table__td"
2675
+ role="cell"
2676
+ data-label="Pull requests"
2647
2677
  >
2648
- <input
2649
- class="pf-v6-c-check__input"
2650
- type="checkbox"
2651
- id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow4check-input"
2652
- name="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow4check-input"
2653
- aria-label="Standalone check"
2654
- />
2655
- </label>
2656
- </td>
2678
+ <span>
2679
+ <i class="fas fa-code"></i> 30
2680
+ </span>
2681
+ </td>
2682
+ <td
2683
+ class="pf-v6-c-table__td"
2684
+ role="cell"
2685
+ data-label="Workspaces"
2686
+ >
2687
+ <span>
2688
+ <i class="fas fa-cube"></i> 2
2689
+ </span>
2690
+ </td>
2691
+ <td
2692
+ class="pf-v6-c-table__td"
2693
+ role="cell"
2694
+ data-label="Last commit"
2695
+ >2 days ago</td>
2696
+ <td class="pf-v6-c-table__td" role="cell" data-label="Action">
2697
+ <a href="#">Action link</a>
2698
+ </td>
2699
+
2700
+ <td
2701
+ class="pf-v6-c-table__td pf-v6-c-table__action"
2702
+ role="cell"
2703
+ >
2704
+ <button
2705
+ class="pf-v6-c-menu-toggle pf-m-plain"
2706
+ type="button"
2707
+ aria-expanded="false"
2708
+ aria-label="Menu toggle"
2709
+ >
2710
+ <span class="pf-v6-c-menu-toggle__icon">
2711
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2712
+ </span>
2713
+ </button>
2714
+ </td>
2715
+ </tr>
2657
2716
 
2658
- <th
2659
- class="pf-v6-c-table__th"
2660
- role="columnheader"
2661
- data-label="Repository name"
2662
- >
2663
- <div>
2664
- <div
2665
- id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node3"
2666
- >Node 3</div>
2667
- <a href="#">siemur/test-space</a>
2668
- </div>
2669
- </th>
2717
+ <tr class="pf-v6-c-table__tr" role="row">
2718
+ <td
2719
+ class="pf-v6-c-table__td pf-v6-c-table__check"
2720
+ role="cell"
2721
+ >
2722
+ <label
2723
+ class="pf-v6-c-check pf-m-standalone"
2724
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow4check"
2725
+ for="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow4check-input"
2726
+ >
2727
+ <input
2728
+ class="pf-v6-c-check__input"
2729
+ type="checkbox"
2730
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow4check-input"
2731
+ name="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow4check-input"
2732
+ aria-label="Standalone check"
2733
+ />
2734
+ </label>
2735
+ </td>
2736
+
2737
+ <th
2738
+ class="pf-v6-c-table__th"
2739
+ role="columnheader"
2740
+ data-label="Repository name"
2741
+ >
2742
+ <div>
2743
+ <div
2744
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node3"
2745
+ >Node 3</div>
2746
+ <a href="#">siemur/test-space</a>
2747
+ </div>
2748
+ </th>
2670
2749
 
2671
- <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
2672
- <span>
2673
- <i class="fas fa-code-branch"></i> 12
2674
- </span>
2675
- </td>
2676
- <td
2677
- class="pf-v6-c-table__td"
2678
- role="cell"
2679
- data-label="Pull requests"
2680
- >
2681
- <span>
2682
- <i class="fas fa-code"></i> 48
2683
- </span>
2684
- </td>
2685
- <td
2686
- class="pf-v6-c-table__td"
2687
- role="cell"
2688
- data-label="Workspaces"
2689
- >
2690
- <span>
2691
- <i class="fas fa-cube"></i> 13
2692
- </span>
2693
- </td>
2694
- <td
2695
- class="pf-v6-c-table__td"
2696
- role="cell"
2697
- data-label="Last commit"
2698
- >30 days ago</td>
2699
- <td class="pf-v6-c-table__td" role="cell" data-label="Action">
2700
- <a href="#">Action link</a>
2701
- </td>
2702
-
2703
- <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
2704
- <button
2705
- class="pf-v6-c-menu-toggle pf-m-plain"
2706
- type="button"
2707
- aria-expanded="false"
2708
- aria-label="Menu toggle"
2750
+ <td
2751
+ class="pf-v6-c-table__td"
2752
+ role="cell"
2753
+ data-label="Branches"
2709
2754
  >
2710
- <span class="pf-v6-c-menu-toggle__icon">
2711
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2755
+ <span>
2756
+ <i class="fas fa-code-branch"></i> 12
2712
2757
  </span>
2713
- </button>
2714
- </td>
2715
- </tr>
2758
+ </td>
2759
+ <td
2760
+ class="pf-v6-c-table__td"
2761
+ role="cell"
2762
+ data-label="Pull requests"
2763
+ >
2764
+ <span>
2765
+ <i class="fas fa-code"></i> 48
2766
+ </span>
2767
+ </td>
2768
+ <td
2769
+ class="pf-v6-c-table__td"
2770
+ role="cell"
2771
+ data-label="Workspaces"
2772
+ >
2773
+ <span>
2774
+ <i class="fas fa-cube"></i> 13
2775
+ </span>
2776
+ </td>
2777
+ <td
2778
+ class="pf-v6-c-table__td"
2779
+ role="cell"
2780
+ data-label="Last commit"
2781
+ >30 days ago</td>
2782
+ <td class="pf-v6-c-table__td" role="cell" data-label="Action">
2783
+ <a href="#">Action link</a>
2784
+ </td>
2785
+
2786
+ <td
2787
+ class="pf-v6-c-table__td pf-v6-c-table__action"
2788
+ role="cell"
2789
+ >
2790
+ <button
2791
+ class="pf-v6-c-menu-toggle pf-m-plain"
2792
+ type="button"
2793
+ aria-expanded="false"
2794
+ aria-label="Menu toggle"
2795
+ >
2796
+ <span class="pf-v6-c-menu-toggle__icon">
2797
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2798
+ </span>
2799
+ </button>
2800
+ </td>
2801
+ </tr>
2716
2802
 
2717
- <tr class="pf-v6-c-table__tr" role="row">
2718
- <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
2719
- <label
2720
- class="pf-v6-c-check pf-m-standalone"
2721
- id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow5check"
2722
- for="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow5check-input"
2803
+ <tr class="pf-v6-c-table__tr" role="row">
2804
+ <td
2805
+ class="pf-v6-c-table__td pf-v6-c-table__check"
2806
+ role="cell"
2723
2807
  >
2724
- <input
2725
- class="pf-v6-c-check__input"
2726
- type="checkbox"
2727
- id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow5check-input"
2728
- name="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow5check-input"
2729
- aria-label="Standalone check"
2730
- />
2731
- </label>
2732
- </td>
2808
+ <label
2809
+ class="pf-v6-c-check pf-m-standalone"
2810
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow5check"
2811
+ for="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow5check-input"
2812
+ >
2813
+ <input
2814
+ class="pf-v6-c-check__input"
2815
+ type="checkbox"
2816
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow5check-input"
2817
+ name="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow5check-input"
2818
+ aria-label="Standalone check"
2819
+ />
2820
+ </label>
2821
+ </td>
2822
+
2823
+ <th
2824
+ class="pf-v6-c-table__th"
2825
+ role="columnheader"
2826
+ data-label="Repository name"
2827
+ >
2828
+ <div>
2829
+ <div
2830
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node4"
2831
+ >Node 4</div>
2832
+ <a href="#">siemur/test-space</a>
2833
+ </div>
2834
+ </th>
2733
2835
 
2734
- <th
2735
- class="pf-v6-c-table__th"
2736
- role="columnheader"
2737
- data-label="Repository name"
2738
- >
2739
- <div>
2740
- <div
2741
- id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node4"
2742
- >Node 4</div>
2743
- <a href="#">siemur/test-space</a>
2744
- </div>
2745
- </th>
2836
+ <td
2837
+ class="pf-v6-c-table__td"
2838
+ role="cell"
2839
+ data-label="Branches"
2840
+ >
2841
+ <span>
2842
+ <i class="fas fa-code-branch"></i> 3
2843
+ </span>
2844
+ </td>
2845
+ <td
2846
+ class="pf-v6-c-table__td"
2847
+ role="cell"
2848
+ data-label="Pull requests"
2849
+ >
2850
+ <span>
2851
+ <i class="fas fa-code"></i> 8
2852
+ </span>
2853
+ </td>
2854
+ <td
2855
+ class="pf-v6-c-table__td"
2856
+ role="cell"
2857
+ data-label="Workspaces"
2858
+ >
2859
+ <span>
2860
+ <i class="fas fa-cube"></i> 20
2861
+ </span>
2862
+ </td>
2863
+ <td
2864
+ class="pf-v6-c-table__td"
2865
+ role="cell"
2866
+ data-label="Last commit"
2867
+ >8 days ago</td>
2868
+ <td class="pf-v6-c-table__td" role="cell" data-label="Action">
2869
+ <a href="#">Action link</a>
2870
+ </td>
2871
+
2872
+ <td
2873
+ class="pf-v6-c-table__td pf-v6-c-table__action"
2874
+ role="cell"
2875
+ >
2876
+ <button
2877
+ class="pf-v6-c-menu-toggle pf-m-plain"
2878
+ type="button"
2879
+ aria-expanded="false"
2880
+ aria-label="Menu toggle"
2881
+ >
2882
+ <span class="pf-v6-c-menu-toggle__icon">
2883
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2884
+ </span>
2885
+ </button>
2886
+ </td>
2887
+ </tr>
2746
2888
 
2747
- <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
2748
- <span>
2749
- <i class="fas fa-code-branch"></i> 3
2750
- </span>
2751
- </td>
2752
- <td
2753
- class="pf-v6-c-table__td"
2754
- role="cell"
2755
- data-label="Pull requests"
2889
+ <tr class="pf-v6-c-table__tr" role="row">
2890
+ <td
2891
+ class="pf-v6-c-table__td pf-v6-c-table__check"
2892
+ role="cell"
2893
+ >
2894
+ <label
2895
+ class="pf-v6-c-check pf-m-standalone"
2896
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow6check"
2897
+ for="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow6check-input"
2898
+ >
2899
+ <input
2900
+ class="pf-v6-c-check__input"
2901
+ type="checkbox"
2902
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow6check-input"
2903
+ name="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow6check-input"
2904
+ aria-label="Standalone check"
2905
+ />
2906
+ </label>
2907
+ </td>
2908
+ <td
2909
+ class="pf-v6-c-table__td"
2910
+ role="cell"
2911
+ data-label="Repository name"
2912
+ >
2913
+ <div>
2914
+ <div
2915
+ id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node5"
2916
+ >Node 5</div>
2917
+ <a href="#">siemur/test-space</a>
2918
+ </div>
2919
+ </td>
2920
+ <td
2921
+ class="pf-v6-c-table__td"
2922
+ role="cell"
2923
+ data-label="Branches"
2924
+ >
2925
+ <span>
2926
+ <i class="fas fa-code-branch"></i> 34
2927
+ </span>
2928
+ </td>
2929
+ <td
2930
+ class="pf-v6-c-table__td"
2931
+ role="cell"
2932
+ data-label="Pull requests"
2933
+ >
2934
+ <span>
2935
+ <i class="fas fa-code"></i> 21
2936
+ </span>
2937
+ </td>
2938
+ <td
2939
+ class="pf-v6-c-table__td"
2940
+ role="cell"
2941
+ data-label="Workspaces"
2942
+ >
2943
+ <span>
2944
+ <i class="fas fa-cube"></i> 26
2945
+ </span>
2946
+ </td>
2947
+ <td
2948
+ class="pf-v6-c-table__td"
2949
+ role="cell"
2950
+ data-label="Last commit"
2951
+ >2 days ago</td>
2952
+ <td class="pf-v6-c-table__td" role="cell" data-label="Action">
2953
+ <a href="#">Action link</a>
2954
+ </td>
2955
+
2956
+ <td
2957
+ class="pf-v6-c-table__td pf-v6-c-table__action"
2958
+ role="cell"
2959
+ >
2960
+ <button
2961
+ class="pf-v6-c-menu-toggle pf-m-plain"
2962
+ type="button"
2963
+ aria-expanded="false"
2964
+ aria-label="Menu toggle"
2965
+ >
2966
+ <span class="pf-v6-c-menu-toggle__icon">
2967
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2968
+ </span>
2969
+ </button>
2970
+ </td>
2971
+ </tr>
2972
+ </tbody>
2973
+ </table>
2974
+ <div class="pf-v6-c-pagination pf-m-bottom">
2975
+ <div class="pf-v6-c-pagination__page-menu">
2976
+ <button
2977
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
2978
+ type="button"
2979
+ aria-expanded="false"
2980
+ aria-label="Menu toggle"
2981
+ id="pagination-menu-toggle-bottom-collapsed-example"
2756
2982
  >
2757
- <span>
2758
- <i class="fas fa-code"></i> 8
2983
+ <span class="pf-v6-c-menu-toggle__text">
2984
+ <b>1 - 10</b>&nbsp;of&nbsp;
2985
+ <b>36</b>
2759
2986
  </span>
2760
- </td>
2761
- <td
2762
- class="pf-v6-c-table__td"
2763
- role="cell"
2764
- data-label="Workspaces"
2765
- >
2766
- <span>
2767
- <i class="fas fa-cube"></i> 20
2987
+ <span class="pf-v6-c-menu-toggle__controls">
2988
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
2989
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2990
+ </span>
2768
2991
  </span>
2769
- </td>
2770
- <td
2771
- class="pf-v6-c-table__td"
2772
- role="cell"
2773
- data-label="Last commit"
2774
- >8 days ago</td>
2775
- <td class="pf-v6-c-table__td" role="cell" data-label="Action">
2776
- <a href="#">Action link</a>
2777
- </td>
2778
-
2779
- <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
2992
+ </button>
2993
+ </div>
2994
+ <nav class="pf-v6-c-pagination__nav" aria-label="Pagination">
2995
+ <div class="pf-v6-c-pagination__nav-control pf-m-first">
2780
2996
  <button
2781
- class="pf-v6-c-menu-toggle pf-m-plain"
2997
+ class="pf-v6-c-button pf-m-plain"
2782
2998
  type="button"
2783
- aria-expanded="false"
2784
- aria-label="Menu toggle"
2999
+ disabled
3000
+ aria-label="Go to first page"
2785
3001
  >
2786
- <span class="pf-v6-c-menu-toggle__icon">
2787
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2788
- </span>
3002
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
2789
3003
  </button>
2790
- </td>
2791
- </tr>
2792
-
2793
- <tr class="pf-v6-c-table__tr" role="row">
2794
- <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
2795
- <label
2796
- class="pf-v6-c-check pf-m-standalone"
2797
- id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow6check"
2798
- for="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow6check-input"
3004
+ </div>
3005
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
3006
+ <button
3007
+ class="pf-v6-c-button pf-m-plain"
3008
+ type="button"
3009
+ disabled
3010
+ aria-label="Go to previous page"
2799
3011
  >
3012
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
3013
+ </button>
3014
+ </div>
3015
+ <div class="pf-v6-c-pagination__nav-page-select">
3016
+ <span class="pf-v6-c-form-control">
2800
3017
  <input
2801
- class="pf-v6-c-check__input"
2802
- type="checkbox"
2803
- id="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow6check-input"
2804
- name="toolbar-and-table-static-search-overflow-menu-collapsed-tablecheckrow6check-input"
2805
- aria-label="Standalone check"
3018
+ aria-label="Current page"
3019
+ type="number"
3020
+ min="1"
3021
+ max="4"
3022
+ value="1"
2806
3023
  />
2807
- </label>
2808
- </td>
2809
- <td
2810
- class="pf-v6-c-table__td"
2811
- role="cell"
2812
- data-label="Repository name"
2813
- >
2814
- <div>
2815
- <div
2816
- id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node5"
2817
- >Node 5</div>
2818
- <a href="#">siemur/test-space</a>
2819
- </div>
2820
- </td>
2821
- <td class="pf-v6-c-table__td" role="cell" data-label="Branches">
2822
- <span>
2823
- <i class="fas fa-code-branch"></i> 34
2824
3024
  </span>
2825
- </td>
2826
- <td
2827
- class="pf-v6-c-table__td"
2828
- role="cell"
2829
- data-label="Pull requests"
2830
- >
2831
- <span>
2832
- <i class="fas fa-code"></i> 21
2833
- </span>
2834
- </td>
2835
- <td
2836
- class="pf-v6-c-table__td"
2837
- role="cell"
2838
- data-label="Workspaces"
2839
- >
2840
- <span>
2841
- <i class="fas fa-cube"></i> 26
2842
- </span>
2843
- </td>
2844
- <td
2845
- class="pf-v6-c-table__td"
2846
- role="cell"
2847
- data-label="Last commit"
2848
- >2 days ago</td>
2849
- <td class="pf-v6-c-table__td" role="cell" data-label="Action">
2850
- <a href="#">Action link</a>
2851
- </td>
2852
-
2853
- <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
3025
+ <span aria-hidden="true">of 4</span>
3026
+ </div>
3027
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
2854
3028
  <button
2855
- class="pf-v6-c-menu-toggle pf-m-plain"
3029
+ class="pf-v6-c-button pf-m-plain"
2856
3030
  type="button"
2857
- aria-expanded="false"
2858
- aria-label="Menu toggle"
3031
+ aria-label="Go to next page"
2859
3032
  >
2860
- <span class="pf-v6-c-menu-toggle__icon">
2861
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2862
- </span>
3033
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2863
3034
  </button>
2864
- </td>
2865
- </tr>
2866
- </tbody>
2867
- </table>
2868
- <div class="pf-v6-c-pagination pf-m-bottom">
2869
- <div class="pf-v6-c-pagination__page-menu">
2870
- <button
2871
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
2872
- type="button"
2873
- aria-expanded="false"
2874
- aria-label="Menu toggle"
2875
- id="pagination-menu-toggle-bottom-collapsed-example"
2876
- >
2877
- <span class="pf-v6-c-menu-toggle__text">
2878
- <b>1 - 10</b>&nbsp;of&nbsp;
2879
- <b>36</b>
2880
- </span>
2881
- <span class="pf-v6-c-menu-toggle__controls">
2882
- <span class="pf-v6-c-menu-toggle__toggle-icon">
2883
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2884
- </span>
2885
- </span>
2886
- </button>
3035
+ </div>
3036
+ <div class="pf-v6-c-pagination__nav-control pf-m-last">
3037
+ <button
3038
+ class="pf-v6-c-button pf-m-plain"
3039
+ type="button"
3040
+ aria-label="Go to last page"
3041
+ >
3042
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
3043
+ </button>
3044
+ </div>
3045
+ </nav>
2887
3046
  </div>
2888
- <nav class="pf-v6-c-pagination__nav" aria-label="Pagination">
2889
- <div class="pf-v6-c-pagination__nav-control pf-m-first">
2890
- <button
2891
- class="pf-v6-c-button pf-m-plain"
2892
- type="button"
2893
- disabled
2894
- aria-label="Go to first page"
2895
- >
2896
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
2897
- </button>
2898
- </div>
2899
- <div class="pf-v6-c-pagination__nav-control pf-m-prev">
2900
- <button
2901
- class="pf-v6-c-button pf-m-plain"
2902
- type="button"
2903
- disabled
2904
- aria-label="Go to previous page"
2905
- >
2906
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2907
- </button>
2908
- </div>
2909
- <div class="pf-v6-c-pagination__nav-page-select">
2910
- <span class="pf-v6-c-form-control">
2911
- <input
2912
- aria-label="Current page"
2913
- type="number"
2914
- min="1"
2915
- max="4"
2916
- value="1"
2917
- />
2918
- </span>
2919
- <span aria-hidden="true">of 4</span>
2920
- </div>
2921
- <div class="pf-v6-c-pagination__nav-control pf-m-next">
2922
- <button
2923
- class="pf-v6-c-button pf-m-plain"
2924
- type="button"
2925
- aria-label="Go to next page"
2926
- >
2927
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2928
- </button>
2929
- </div>
2930
- <div class="pf-v6-c-pagination__nav-control pf-m-last">
2931
- <button
2932
- class="pf-v6-c-button pf-m-plain"
2933
- type="button"
2934
- aria-label="Go to last page"
2935
- >
2936
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
2937
- </button>
2938
- </div>
2939
- </nav>
2940
3047
  </div>
2941
3048
  </div>
2942
3049
  </section>