@patternfly/patternfly 5.0.0-alpha.5 → 5.0.0-alpha.6

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 (13) hide show
  1. package/components/Toolbar/toolbar.css +30 -2
  2. package/components/Toolbar/toolbar.scss +37 -3
  3. package/docs/components/Toolbar/examples/Toolbar.md +19 -16
  4. package/docs/demos/DataList/examples/DataList.md +2 -4
  5. package/docs/demos/Masthead/examples/Masthead.md +3 -6
  6. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +9 -6
  7. package/docs/demos/Table/examples/Table.md +11 -22
  8. package/docs/demos/Toolbar/examples/Toolbar.md +1589 -9
  9. package/package.json +1 -1
  10. package/patternfly-no-reset.css +30 -2
  11. package/patternfly.css +30 -2
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
package/docs/demos/Toolbar/examples/Toolbar.md CHANGED
@@ -5,7 +5,7 @@ section: components
5
5
 
6
6
  ## Demos
7
7
 
8
- ### Toolbar attribute value search filter desktop
8
+ ### Toolbar attribute value search filter on desktop
9
9
 
10
10
  ```html
11
11
  <div
@@ -58,7 +58,6 @@ section: components
58
58
  role="listbox"
59
59
  aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-select-name-label"
60
60
  hidden
61
- style="width: 175px"
62
61
  >
63
62
  <li role="presentation">
64
63
  <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -89,7 +88,7 @@ section: components
89
88
  </li>
90
89
  </ul>
91
90
  </div>
92
- <div class="pf-c-text-input-group">
91
+ <div class="pf-c-text-input-group" style="width: auto">
93
92
  <div class="pf-c-text-input-group__main pf-m-icon">
94
93
  <span class="pf-c-text-input-group__text">
95
94
  <span class="pf-c-text-input-group__icon">
@@ -236,6 +235,1589 @@ section: components
236
235
 
237
236
  ```
238
237
 
238
+ ### Toolbar with validation on desktop
239
+
240
+ ```html isFullscreen
241
+ <div class="pf-c-page" id="toolbar-pagination-management-example">
242
+ <div class="pf-c-skip-to-content">
243
+ <a
244
+ class="pf-c-button pf-m-primary"
245
+ href="#main-content-toolbar-pagination-management-example"
246
+ >Skip to content</a>
247
+ </div>
248
+ <header
249
+ class="pf-c-masthead"
250
+ id="toolbar-pagination-management-example-masthead"
251
+ >
252
+ <span class="pf-c-masthead__toggle">
253
+ <button
254
+ class="pf-c-button pf-m-plain"
255
+ type="button"
256
+ aria-label="Global navigation"
257
+ >
258
+ <i class="fas fa-bars" aria-hidden="true"></i>
259
+ </button>
260
+ </span>
261
+ <div class="pf-c-masthead__main">
262
+ <a class="pf-c-masthead__brand" href="#">
263
+ <picture
264
+ class="pf-c-brand pf-m-picture"
265
+ style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
266
+ >
267
+ <source
268
+ media="(min-width: 768px)"
269
+ srcset="/assets/images/logo__pf--reverse-on-md.svg"
270
+ />
271
+ <source srcset="/assets/images/logo__pf--reverse--base.svg" />
272
+ <img
273
+ src="/assets/images/logo__pf--reverse--base.png"
274
+ alt="Fallback patternFly default logo"
275
+ />
276
+ </picture>
277
+ </a>
278
+ </div>
279
+ <div class="pf-c-masthead__content">
280
+ <div
281
+ class="pf-c-toolbar pf-m-full-height pf-m-static"
282
+ id="toolbar-pagination-management-example-masthead-toolbar"
283
+ >
284
+ <div class="pf-c-toolbar__content">
285
+ <div class="pf-c-toolbar__content-section">
286
+ <div
287
+ class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
288
+ >
289
+ <div
290
+ class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
291
+ >
292
+ <div class="pf-c-toolbar__item">
293
+ <nav
294
+ class="pf-c-app-launcher"
295
+ aria-label="Application launcher"
296
+ id="toolbar-pagination-management-example-masthead-application-launcher"
297
+ >
298
+ <button
299
+ class="pf-c-app-launcher__toggle"
300
+ type="button"
301
+ id="toolbar-pagination-management-example-masthead-application-launcher-button"
302
+ aria-expanded="false"
303
+ aria-label="Application launcher"
304
+ >
305
+ <i class="fas fa-th" aria-hidden="true"></i>
306
+ </button>
307
+ <div
308
+ class="pf-c-app-launcher__menu pf-m-align-right"
309
+ hidden
310
+ >
311
+ <div class="pf-c-app-launcher__menu-search">
312
+ <div class="pf-c-search-input">
313
+ <div class="pf-c-search-input__bar">
314
+ <span class="pf-c-search-input__text">
315
+ <span class="pf-c-search-input__icon">
316
+ <i
317
+ class="fas fa-search fa-fw"
318
+ aria-hidden="true"
319
+ ></i>
320
+ </span>
321
+ <input
322
+ class="pf-c-search-input__text-input"
323
+ type="text"
324
+ placeholder="Filter by name"
325
+ aria-label="Filter by name"
326
+ />
327
+ </span>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ <section class="pf-c-app-launcher__group">
332
+ <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
333
+ <ul>
334
+ <li
335
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
336
+ >
337
+ <a class="pf-c-app-launcher__menu-item">
338
+ Link 1
339
+ <span
340
+ class="pf-c-app-launcher__menu-item-external-icon"
341
+ >
342
+ <i
343
+ class="fas fa-external-link-alt"
344
+ aria-hidden="true"
345
+ ></i>
346
+ </span>
347
+ <span class="pf-screen-reader">(opens new window)</span>
348
+ </a>
349
+ <button
350
+ class="pf-c-app-launcher__menu-item pf-m-action"
351
+ type="button"
352
+ aria-label="Favorite"
353
+ >
354
+ <i class="fas fa-star" aria-hidden="true"></i>
355
+ </button>
356
+ </li>
357
+ <li
358
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
359
+ >
360
+ <a class="pf-c-app-launcher__menu-item">
361
+ Link 2
362
+ <span
363
+ class="pf-c-app-launcher__menu-item-external-icon"
364
+ >
365
+ <i
366
+ class="fas fa-external-link-alt"
367
+ aria-hidden="true"
368
+ ></i>
369
+ </span>
370
+ <span class="pf-screen-reader">(opens new window)</span>
371
+ </a>
372
+ <button
373
+ class="pf-c-app-launcher__menu-item pf-m-action"
374
+ type="button"
375
+ aria-label="Favorite"
376
+ >
377
+ <i class="fas fa-star" aria-hidden="true"></i>
378
+ </button>
379
+ </li>
380
+ </ul>
381
+ </section>
382
+ <hr class="pf-c-divider" />
383
+ <section class="pf-c-app-launcher__group">
384
+ <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
385
+ <ul>
386
+ <li
387
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
388
+ >
389
+ <a class="pf-c-app-launcher__menu-item">
390
+ Link 1
391
+ <span
392
+ class="pf-c-app-launcher__menu-item-external-icon"
393
+ >
394
+ <i
395
+ class="fas fa-external-link-alt"
396
+ aria-hidden="true"
397
+ ></i>
398
+ </span>
399
+ <span class="pf-screen-reader">(opens new window)</span>
400
+ </a>
401
+ <button
402
+ class="pf-c-app-launcher__menu-item pf-m-action"
403
+ type="button"
404
+ aria-label="Favorite"
405
+ >
406
+ <i class="fas fa-star" aria-hidden="true"></i>
407
+ </button>
408
+ </li>
409
+ <li
410
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
411
+ >
412
+ <a class="pf-c-app-launcher__menu-item">
413
+ Link 2
414
+ <span
415
+ class="pf-c-app-launcher__menu-item-external-icon"
416
+ >
417
+ <i
418
+ class="fas fa-external-link-alt"
419
+ aria-hidden="true"
420
+ ></i>
421
+ </span>
422
+ <span class="pf-screen-reader">(opens new window)</span>
423
+ </a>
424
+ <button
425
+ class="pf-c-app-launcher__menu-item pf-m-action"
426
+ type="button"
427
+ aria-label="Favorite"
428
+ >
429
+ <i class="fas fa-star" aria-hidden="true"></i>
430
+ </button>
431
+ </li>
432
+ </ul>
433
+ </section>
434
+ </div>
435
+ </nav>
436
+ </div>
437
+ <div class="pf-c-toolbar__item">
438
+ <div class="pf-c-dropdown">
439
+ <button
440
+ class="pf-c-dropdown__toggle pf-m-plain"
441
+ id="toolbar-pagination-management-example-masthead-settings-button"
442
+ aria-expanded="false"
443
+ type="button"
444
+ aria-label="Settings"
445
+ >
446
+ <i class="fas fa-cog" aria-hidden="true"></i>
447
+ </button>
448
+ <ul
449
+ class="pf-c-dropdown__menu pf-m-align-right"
450
+ aria-labelledby="toolbar-pagination-management-example-masthead-settings-button"
451
+ hidden
452
+ >
453
+ <li>
454
+ <button
455
+ class="pf-c-dropdown__menu-item"
456
+ type="button"
457
+ >Settings</button>
458
+ </li>
459
+ <li>
460
+ <button
461
+ class="pf-c-dropdown__menu-item"
462
+ type="button"
463
+ >Use the beta release</button>
464
+ </li>
465
+ </ul>
466
+ </div>
467
+ </div>
468
+ <div class="pf-c-toolbar__item">
469
+ <div class="pf-c-dropdown">
470
+ <button
471
+ class="pf-c-dropdown__toggle pf-m-plain"
472
+ id="toolbar-pagination-management-example-masthead-help-button"
473
+ aria-expanded="false"
474
+ type="button"
475
+ aria-label="Help"
476
+ >
477
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
478
+ </button>
479
+ <ul
480
+ class="pf-c-dropdown__menu pf-m-align-right"
481
+ aria-labelledby="toolbar-pagination-management-example-masthead-help-button"
482
+ hidden
483
+ >
484
+ <li>
485
+ <button
486
+ class="pf-c-dropdown__menu-item"
487
+ type="button"
488
+ >Support options</button>
489
+ </li>
490
+ <li>
491
+ <button
492
+ class="pf-c-dropdown__menu-item"
493
+ type="button"
494
+ >Open support case</button>
495
+ </li>
496
+ <li>
497
+ <button
498
+ class="pf-c-dropdown__menu-item"
499
+ type="button"
500
+ >API documentation</button>
501
+ </li>
502
+ </ul>
503
+ </div>
504
+ </div>
505
+ </div>
506
+ <div class="pf-c-toolbar__item pf-m-hidden-on-lg">
507
+ <div class="pf-c-dropdown">
508
+ <button
509
+ class="pf-c-menu-toggle pf-m-plain"
510
+ type="button"
511
+ aria-expanded="false"
512
+ aria-label="Actions"
513
+ >
514
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
515
+ </button>
516
+ <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
517
+ <div class="pf-c-menu__content">
518
+ <section class="pf-c-menu__group pf-m-hidden-on-sm">
519
+ <ul class="pf-c-menu__list" role="menu">
520
+ <li
521
+ class="pf-c-menu__list-item pf-m-disabled"
522
+ role="none"
523
+ >
524
+ <button
525
+ class="pf-c-menu__item"
526
+ type="button"
527
+ disabled
528
+ role="menuitem"
529
+ >
530
+ <span class="pf-c-menu__item-description">
531
+ <div class="pf-u-font-size-sm">Username:</div>
532
+ <div class="pf-u-font-size-md">ned_username</div>
533
+ </span>
534
+ </button>
535
+ </li>
536
+ <li
537
+ class="pf-c-menu__list-item pf-m-disabled"
538
+ role="none"
539
+ >
540
+ <button
541
+ class="pf-c-menu__item"
542
+ type="button"
543
+ disabled
544
+ role="menuitem"
545
+ >
546
+ <span class="pf-c-menu__item-description">
547
+ <div class="pf-u-font-size-sm">Account number:</div>
548
+ <div class="pf-u-font-size-md">123456789</div>
549
+ </span>
550
+ </button>
551
+ </li>
552
+ <li class="pf-c-divider" role="separator"></li>
553
+ <li class="pf-c-menu__list-item" role="none">
554
+ <button
555
+ class="pf-c-menu__item"
556
+ type="button"
557
+ role="menuitem"
558
+ >
559
+ <span class="pf-c-menu__item-main">
560
+ <span class="pf-c-menu__item-text">My profile</span>
561
+ </span>
562
+ </button>
563
+ </li>
564
+ <li class="pf-c-menu__list-item" role="none">
565
+ <button
566
+ class="pf-c-menu__item"
567
+ type="button"
568
+ role="menuitem"
569
+ >
570
+ <span class="pf-c-menu__item-main">
571
+ <span
572
+ class="pf-c-menu__item-text"
573
+ >User management</span>
574
+ </span>
575
+ </button>
576
+ </li>
577
+ <li class="pf-c-menu__list-item" role="none">
578
+ <button
579
+ class="pf-c-menu__item"
580
+ type="button"
581
+ role="menuitem"
582
+ >
583
+ <span class="pf-c-menu__item-main">
584
+ <span class="pf-c-menu__item-text">Logout</span>
585
+ </span>
586
+ </button>
587
+ </li>
588
+ </ul>
589
+ </section>
590
+ <hr class="pf-c-divider pf-m-hidden-on-sm" />
591
+ <section class="pf-c-menu__group">
592
+ <ul class="pf-c-menu__list" role="menu">
593
+ <li class="pf-c-menu__list-item" role="none">
594
+ <button
595
+ class="pf-c-menu__item"
596
+ type="button"
597
+ role="menuitem"
598
+ aria-expanded="false"
599
+ >
600
+ <span class="pf-c-menu__item-main">
601
+ <span class="pf-c-menu__item-icon">
602
+ <i
603
+ class="fas fa-fw fa-cog"
604
+ aria-hidden="true"
605
+ ></i>
606
+ </span>
607
+ <span class="pf-c-menu__item-text">Settings</span>
608
+ <span class="pf-c-menu__item-toggle-icon">
609
+ <i class="fas fa-angle-right"></i>
610
+ </span>
611
+ </span>
612
+ </button>
613
+ <div class="pf-c-menu" hidden>
614
+ <div class="pf-c-menu__content">
615
+ <ul class="pf-c-menu__list" role="menu">
616
+ <li
617
+ class="pf-c-menu__list-item pf-m-drill-up"
618
+ role="none"
619
+ >
620
+ <button
621
+ class="pf-c-menu__item"
622
+ type="button"
623
+ role="menuitem"
624
+ >
625
+ <span class="pf-c-menu__item-main">
626
+ <span
627
+ class="pf-c-menu__item-toggle-icon"
628
+ >
629
+ <i class="fas fa-angle-left"></i>
630
+ </span>
631
+ <span class="pf-c-menu__item-icon">
632
+ <i
633
+ class="fas fa-fw fa-cog"
634
+ aria-hidden="true"
635
+ ></i>
636
+ </span>
637
+ <span
638
+ class="pf-c-menu__item-text"
639
+ >Settings</span>
640
+ </span>
641
+ </button>
642
+ </li>
643
+ <li class="pf-c-divider" role="separator"></li>
644
+ <li class="pf-c-menu__list-item" role="none">
645
+ <a
646
+ class="pf-c-menu__item"
647
+ href="#"
648
+ role="menuitem"
649
+ >
650
+ <span class="pf-c-menu__item-main">
651
+ <span
652
+ class="pf-c-menu__item-text"
653
+ >Customer support</span>
654
+ </span>
655
+ </a>
656
+ </li>
657
+ <li class="pf-c-menu__list-item" role="none">
658
+ <a
659
+ class="pf-c-menu__item"
660
+ href="#"
661
+ role="menuitem"
662
+ >
663
+ <span class="pf-c-menu__item-main">
664
+ <span class="pf-c-menu__item-text">About</span>
665
+ </span>
666
+ </a>
667
+ </li>
668
+ </ul>
669
+ </div>
670
+ </div>
671
+ </li>
672
+
673
+ <li class="pf-c-menu__list-item" role="none">
674
+ <button
675
+ class="pf-c-menu__item"
676
+ type="button"
677
+ role="menuitem"
678
+ aria-expanded="false"
679
+ >
680
+ <span class="pf-c-menu__item-main">
681
+ <span class="pf-c-menu__item-icon">
682
+ <i
683
+ class="fas fa-fw fa-pf-icon pf-icon-help"
684
+ aria-hidden="true"
685
+ ></i>
686
+ </span>
687
+ <span class="pf-c-menu__item-text">Help</span>
688
+ <span class="pf-c-menu__item-toggle-icon">
689
+ <i class="fas fa-angle-right"></i>
690
+ </span>
691
+ </span>
692
+ </button>
693
+ <div class="pf-c-menu" hidden>
694
+ <div class="pf-c-menu__content">
695
+ <ul class="pf-c-menu__list" role="menu">
696
+ <li
697
+ class="pf-c-menu__list-item pf-m-drill-up"
698
+ role="none"
699
+ >
700
+ <button
701
+ class="pf-c-menu__item"
702
+ type="button"
703
+ role="menuitem"
704
+ >
705
+ <span class="pf-c-menu__item-main">
706
+ <span
707
+ class="pf-c-menu__item-toggle-icon"
708
+ >
709
+ <i class="fas fa-angle-left"></i>
710
+ </span>
711
+ <span class="pf-c-menu__item-icon">
712
+ <i
713
+ class="fas fa-fw fa-pf-icon pf-icon-help"
714
+ aria-hidden="true"
715
+ ></i>
716
+ </span>
717
+ <span class="pf-c-menu__item-text">Help</span>
718
+ </span>
719
+ </button>
720
+ </li>
721
+ <li class="pf-c-divider" role="separator"></li>
722
+ <li class="pf-c-menu__list-item" role="none">
723
+ <a
724
+ class="pf-c-menu__item"
725
+ href="#"
726
+ role="menuitem"
727
+ >
728
+ <span class="pf-c-menu__item-main">
729
+ <span
730
+ class="pf-c-menu__item-text"
731
+ >Support options</span>
732
+ </span>
733
+ </a>
734
+ </li>
735
+ <li class="pf-c-menu__list-item" role="none">
736
+ <a
737
+ class="pf-c-menu__item"
738
+ href="#"
739
+ role="menuitem"
740
+ >
741
+ <span class="pf-c-menu__item-main">
742
+ <span
743
+ class="pf-c-menu__item-text"
744
+ >Open support case</span>
745
+ </span>
746
+ </a>
747
+ </li>
748
+ <li class="pf-c-menu__list-item" role="none">
749
+ <a
750
+ class="pf-c-menu__item"
751
+ href="#"
752
+ role="menuitem"
753
+ >
754
+ <span class="pf-c-menu__item-main">
755
+ <span
756
+ class="pf-c-menu__item-text"
757
+ >API documentation</span>
758
+ </span>
759
+ </a>
760
+ </li>
761
+ </ul>
762
+ </div>
763
+ </div>
764
+ </li>
765
+
766
+ <li class="pf-c-menu__list-item" role="none">
767
+ <button
768
+ class="pf-c-menu__item"
769
+ type="button"
770
+ role="menuitem"
771
+ >
772
+ <span class="pf-c-menu__item-main">
773
+ <span class="pf-c-menu__item-icon">
774
+ <i class="fas fa-fw fa-th" aria-hidden="true"></i>
775
+ </span>
776
+ <span
777
+ class="pf-c-menu__item-text"
778
+ >Application launcher</span>
779
+ <span class="pf-c-menu__item-toggle-icon">
780
+ <i class="fas fa-angle-right"></i>
781
+ </span>
782
+ </span>
783
+ </button>
784
+ <div class="pf-c-menu" hidden>
785
+ <div class="pf-c-menu__header">
786
+ <button
787
+ class="pf-c-menu__item"
788
+ type="button"
789
+ role="menuitem"
790
+ >
791
+ <span class="pf-c-menu__item-main">
792
+ <span class="pf-c-menu__item-toggle-icon">
793
+ <i class="fas fa-angle-left"></i>
794
+ </span>
795
+ <span class="pf-c-menu__item-icon">
796
+ <i
797
+ class="fas fa-fw fa-th"
798
+ aria-hidden="true"
799
+ ></i>
800
+ </span>
801
+ <span
802
+ class="pf-c-menu__item-text"
803
+ >Application launcher</span>
804
+ </span>
805
+ </button>
806
+ </div>
807
+ <div class="pf-c-menu__search">
808
+ <div class="pf-c-menu__search-input">
809
+ <div class="pf-c-search-input">
810
+ <div class="pf-c-search-input__bar">
811
+ <span class="pf-c-search-input__text">
812
+ <span class="pf-c-search-input__icon">
813
+ <i
814
+ class="fas fa-search fa-fw"
815
+ aria-hidden="true"
816
+ ></i>
817
+ </span>
818
+ <input
819
+ class="pf-c-search-input__text-input"
820
+ type="text"
821
+ placeholder="Search"
822
+ aria-label="Search"
823
+ />
824
+ </span>
825
+ </div>
826
+ </div>
827
+ </div>
828
+ </div>
829
+ <hr class="pf-c-divider" />
830
+ <section class="pf-c-menu__group">
831
+ <h1 class="pf-c-menu__group-title">Favorites</h1>
832
+ <ul class="pf-c-menu__list" role="menu">
833
+ <li class="pf-c-menu__list-item" role="none">
834
+ <a
835
+ class="pf-c-menu__item"
836
+ href="#"
837
+ role="menuitem"
838
+ >
839
+ <span class="pf-c-menu__item-main">
840
+ <span
841
+ class="pf-c-menu__item-text"
842
+ >Link 1</span>
843
+ </span>
844
+ </a>
845
+ <button
846
+ class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
847
+ type="button"
848
+ aria-label="Starred"
849
+ >
850
+ <span class="pf-c-menu__item-action-icon">
851
+ <i
852
+ class="fas fa-star"
853
+ aria-hidden="true"
854
+ ></i>
855
+ </span>
856
+ </button>
857
+ </li>
858
+ <li class="pf-c-menu__list-item" role="none">
859
+ <a
860
+ class="pf-c-menu__item"
861
+ href="#"
862
+ role="menuitem"
863
+ target="_blank"
864
+ >
865
+ <span class="pf-c-menu__item-main">
866
+ <span
867
+ class="pf-c-menu__item-text"
868
+ >Link 2</span>
869
+ <span
870
+ class="pf-c-menu__item-external-icon"
871
+ >
872
+ <i
873
+ class="fas fa-external-link-alt"
874
+ aria-hidden="true"
875
+ ></i>
876
+ </span>
877
+ <span
878
+ class="pf-screen-reader"
879
+ >(opens new window)</span>
880
+ </span>
881
+ </a>
882
+ <button
883
+ class="pf-c-menu__item-action pf-m-favorite"
884
+ type="button"
885
+ aria-label="Not starred"
886
+ >
887
+ <span class="pf-c-menu__item-action-icon">
888
+ <i
889
+ class="fas fa-star"
890
+ aria-hidden="true"
891
+ ></i>
892
+ </span>
893
+ </button>
894
+ </li>
895
+ </ul>
896
+ </section>
897
+ <hr class="pf-c-divider" />
898
+ <section class="pf-c-menu__group">
899
+ <h1 class="pf-c-menu__group-title">Group 1</h1>
900
+ <ul class="pf-c-menu__list" role="menu">
901
+ <li class="pf-c-menu__list-item" role="none">
902
+ <a
903
+ class="pf-c-menu__item"
904
+ href="#"
905
+ role="menuitem"
906
+ >
907
+ <span class="pf-c-menu__item-main">
908
+ <span
909
+ class="pf-c-menu__item-text"
910
+ >Link 1</span>
911
+ </span>
912
+ </a>
913
+ <button
914
+ class="pf-c-menu__item-action pf-m-favorite"
915
+ type="button"
916
+ aria-label="Not starred"
917
+ >
918
+ <span class="pf-c-menu__item-action-icon">
919
+ <i
920
+ class="fas fa-star"
921
+ aria-hidden="true"
922
+ ></i>
923
+ </span>
924
+ </button>
925
+ </li>
926
+ <li class="pf-c-menu__list-item" role="none">
927
+ <a
928
+ class="pf-c-menu__item"
929
+ href="#"
930
+ role="menuitem"
931
+ target="_blank"
932
+ >
933
+ <span class="pf-c-menu__item-main">
934
+ <span
935
+ class="pf-c-menu__item-text"
936
+ >Link 2</span>
937
+ <span
938
+ class="pf-c-menu__item-external-icon"
939
+ >
940
+ <i
941
+ class="fas fa-external-link-alt"
942
+ aria-hidden="true"
943
+ ></i>
944
+ </span>
945
+ <span
946
+ class="pf-screen-reader"
947
+ >(opens new window)</span>
948
+ </span>
949
+ </a>
950
+ <button
951
+ class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
952
+ type="button"
953
+ aria-label="Starred"
954
+ >
955
+ <span class="pf-c-menu__item-action-icon">
956
+ <i
957
+ class="fas fa-star"
958
+ aria-hidden="true"
959
+ ></i>
960
+ </span>
961
+ </button>
962
+ </li>
963
+ </ul>
964
+ </section>
965
+ </div>
966
+ </li>
967
+ </ul>
968
+ </section>
969
+ </div>
970
+ </div>
971
+ </div>
972
+ </div>
973
+ </div>
974
+ <div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
975
+ <div
976
+ class="pf-c-dropdown pf-m-full-height"
977
+ style="--pf-c-dropdown--MaxWidth: 20ch;"
978
+ >
979
+ <button
980
+ class="pf-c-dropdown__toggle"
981
+ id="toolbar-pagination-management-example-masthead-profile-button"
982
+ aria-expanded="false"
983
+ type="button"
984
+ >
985
+ <span class="pf-c-dropdown__toggle-image">
986
+ <img
987
+ class="pf-c-avatar"
988
+ alt="Avatar image"
989
+ src="/assets/images/img_avatar-light.svg"
990
+ />
991
+ </span>
992
+ <span class="pf-c-dropdown__toggle-text">Ned Username</span>
993
+ <span class="pf-c-dropdown__toggle-icon">
994
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
995
+ </span>
996
+ </button>
997
+ <div class="pf-c-dropdown__menu" hidden>
998
+ <section class="pf-c-dropdown__group">
999
+ <div class="pf-c-dropdown__menu-item pf-m-text">
1000
+ <div class="pf-u-font-size-sm">Account number:</div>
1001
+ <div>123456789</div>
1002
+ </div>
1003
+ <div class="pf-c-dropdown__menu-item pf-m-text">
1004
+ <div class="pf-u-font-size-sm">Username:</div>
1005
+ <div>mshaksho@redhat.com</div>
1006
+ </div>
1007
+ </section>
1008
+ <hr class="pf-c-divider" />
1009
+ <section class="pf-c-dropdown__group">
1010
+ <ul>
1011
+ <li>
1012
+ <a class="pf-c-dropdown__menu-item" href="#">My profile</a>
1013
+ </li>
1014
+ <li>
1015
+ <a
1016
+ class="pf-c-dropdown__menu-item"
1017
+ href="#"
1018
+ >User management</a>
1019
+ </li>
1020
+ <li>
1021
+ <a class="pf-c-dropdown__menu-item" href="#">Logout</a>
1022
+ </li>
1023
+ </ul>
1024
+ </section>
1025
+ </div>
1026
+ </div>
1027
+ </div>
1028
+ </div>
1029
+ </div>
1030
+ </div>
1031
+ </div>
1032
+ </header>
1033
+ <div class="pf-c-page__sidebar">
1034
+ <div class="pf-c-page__sidebar-body">
1035
+ <nav
1036
+ class="pf-c-nav"
1037
+ id="toolbar-pagination-management-example-primary-nav"
1038
+ aria-label="Global"
1039
+ >
1040
+ <ul class="pf-c-nav__list">
1041
+ <li class="pf-c-nav__item">
1042
+ <a href="#" class="pf-c-nav__link">System panel</a>
1043
+ </li>
1044
+ <li class="pf-c-nav__item">
1045
+ <a
1046
+ href="#"
1047
+ class="pf-c-nav__link pf-m-current"
1048
+ aria-current="page"
1049
+ >Policy</a>
1050
+ </li>
1051
+ <li class="pf-c-nav__item">
1052
+ <a href="#" class="pf-c-nav__link">Authentication</a>
1053
+ </li>
1054
+ <li class="pf-c-nav__item">
1055
+ <a href="#" class="pf-c-nav__link">Network services</a>
1056
+ </li>
1057
+ <li class="pf-c-nav__item">
1058
+ <a href="#" class="pf-c-nav__link">Server</a>
1059
+ </li>
1060
+ </ul>
1061
+ </nav>
1062
+ </div>
1063
+ </div>
1064
+ <main
1065
+ class="pf-c-page__main"
1066
+ tabindex="-1"
1067
+ id="main-content-toolbar-pagination-management-example"
1068
+ >
1069
+ <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
1070
+ <div class="pf-c-page__main-body">
1071
+ <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
1072
+ <ol class="pf-c-breadcrumb__list">
1073
+ <li class="pf-c-breadcrumb__item">
1074
+ <a href="#" class="pf-c-breadcrumb__link">Section home</a>
1075
+ </li>
1076
+ <li class="pf-c-breadcrumb__item">
1077
+ <span class="pf-c-breadcrumb__item-divider">
1078
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1079
+ </span>
1080
+
1081
+ <a href="#" class="pf-c-breadcrumb__link">Section title</a>
1082
+ </li>
1083
+ <li class="pf-c-breadcrumb__item">
1084
+ <span class="pf-c-breadcrumb__item-divider">
1085
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1086
+ </span>
1087
+
1088
+ <a href="#" class="pf-c-breadcrumb__link">Section title</a>
1089
+ </li>
1090
+ <li class="pf-c-breadcrumb__item">
1091
+ <span class="pf-c-breadcrumb__item-divider">
1092
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1093
+ </span>
1094
+
1095
+ <a
1096
+ href="#"
1097
+ class="pf-c-breadcrumb__link pf-m-current"
1098
+ aria-current="page"
1099
+ >Section landing</a>
1100
+ </li>
1101
+ </ol>
1102
+ </nav>
1103
+ </div>
1104
+ </section>
1105
+ <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
1106
+ <div class="pf-c-page__main-body">
1107
+ <div class="pf-c-content">
1108
+ <h1>Main title</h1>
1109
+ <p>This is a full page demo.</p>
1110
+ </div>
1111
+ </div>
1112
+ </section>
1113
+ <section class="pf-c-page__main-section">
1114
+ <div class="pf-c-toolbar" id="toolbar-with-validation-example">
1115
+ <div class="pf-c-toolbar__content">
1116
+ <div class="pf-c-toolbar__content-section">
1117
+ <div class="pf-c-toolbar__group pf-m-toggle-group pf-m-show-on-2xl">
1118
+ <div class="pf-c-toolbar__toggle">
1119
+ <button
1120
+ class="pf-c-button pf-m-plain"
1121
+ type="button"
1122
+ aria-label="Show filters"
1123
+ aria-expanded="false"
1124
+ aria-controls="toolbar-with-validation-example-expandable-content"
1125
+ >
1126
+ <i class="fas fa-filter" aria-hidden="true"></i>
1127
+ </button>
1128
+ </div>
1129
+ <div class="pf-c-toolbar__group pf-m-filter-group">
1130
+ <div class="pf-c-toolbar__item">
1131
+ <div
1132
+ class="pf-c-input-group"
1133
+ aria-label="search filter"
1134
+ role="group"
1135
+ >
1136
+ <div class="pf-c-select" style="width: 160px">
1137
+ <span
1138
+ id="toolbar-with-validation-example-select-month-label"
1139
+ hidden
1140
+ >Choose one</span>
1141
+
1142
+ <button
1143
+ class="pf-c-select__toggle"
1144
+ type="button"
1145
+ id="toolbar-with-validation-example-select-month-toggle"
1146
+ aria-haspopup="true"
1147
+ aria-expanded="false"
1148
+ aria-labelledby="toolbar-with-validation-example-select-month-label toolbar-with-validation-example-select-month-toggle"
1149
+ >
1150
+ <div class="pf-c-select__toggle-wrapper">
1151
+ <span class="pf-c-select__toggle-icon">
1152
+ <i class="fas fa-filter" aria-hidden="true"></i>
1153
+ </span>
1154
+ <span class="pf-c-select__toggle-text">Last month</span>
1155
+ </div>
1156
+ <span class="pf-c-select__toggle-arrow">
1157
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1158
+ </span>
1159
+ </button>
1160
+
1161
+ <ul
1162
+ class="pf-c-select__menu"
1163
+ role="listbox"
1164
+ aria-labelledby="toolbar-with-validation-example-select-month-label"
1165
+ hidden
1166
+ >
1167
+ <li role="presentation">
1168
+ <button
1169
+ class="pf-c-select__menu-item"
1170
+ role="option"
1171
+ >Running</button>
1172
+ </li>
1173
+ <li role="presentation">
1174
+ <button
1175
+ class="pf-c-select__menu-item pf-m-selected"
1176
+ role="option"
1177
+ aria-selected="true"
1178
+ >
1179
+ Stopped
1180
+ <span class="pf-c-select__menu-item-icon">
1181
+ <i class="fas fa-check" aria-hidden="true"></i>
1182
+ </span>
1183
+ </button>
1184
+ </li>
1185
+ <li role="presentation">
1186
+ <button
1187
+ class="pf-c-select__menu-item"
1188
+ role="option"
1189
+ >Down</button>
1190
+ </li>
1191
+ <li role="presentation">
1192
+ <button
1193
+ class="pf-c-select__menu-item"
1194
+ role="option"
1195
+ >Degraded</button>
1196
+ </li>
1197
+ <li role="presentation">
1198
+ <button
1199
+ class="pf-c-select__menu-item"
1200
+ role="option"
1201
+ >Needs maintenance</button>
1202
+ </li>
1203
+ </ul>
1204
+ </div>
1205
+ <div class="pf-c-date-picker">
1206
+ <div class="pf-c-date-picker__input">
1207
+ <div
1208
+ class="pf-c-input-group"
1209
+ aria-label="search filter"
1210
+ role="group"
1211
+ >
1212
+ <input
1213
+ class="pf-c-form-control"
1214
+ type="text"
1215
+ value="2020-03-05"
1216
+ id="toolbar-with-validation-example-helper-text-input"
1217
+ name="toolbar-with-validation-example-helper-text-input"
1218
+ aria-label="Date picker"
1219
+ />
1220
+ <button
1221
+ class="pf-c-button pf-m-control"
1222
+ type="button"
1223
+ aria-label="Toggle date picker"
1224
+ >
1225
+ <i class="fas fa-calendar-alt" aria-hidden="true"></i>
1226
+ </button>
1227
+ </div>
1228
+ </div>
1229
+ <div class="pf-c-date-picker__helper-text">MM/DD/YYYY</div>
1230
+ </div>
1231
+ <div class="pf-c-date-picker">
1232
+ <div class="pf-c-date-picker__input">
1233
+ <div
1234
+ class="pf-c-input-group"
1235
+ aria-label="search filter"
1236
+ role="group"
1237
+ >
1238
+ <input
1239
+ class="pf-c-form-control"
1240
+ aria-invalid="true"
1241
+ type="text"
1242
+ value="2020-03-05"
1243
+ id="toolbar-with-validation-example-invalid-input"
1244
+ name="toolbar-with-validation-example-invalid-input"
1245
+ aria-label="Date picker"
1246
+ />
1247
+ <button
1248
+ class="pf-c-button pf-m-control"
1249
+ type="button"
1250
+ aria-label="Toggle date picker"
1251
+ >
1252
+ <i class="fas fa-calendar-alt" aria-hidden="true"></i>
1253
+ </button>
1254
+ </div>
1255
+ <div class="pf-c-date-picker__helper-text">MM/DD/YYYY</div>
1256
+ </div>
1257
+ <div
1258
+ class="pf-c-date-picker__helper-text pf-m-error"
1259
+ >Max: 08/10/2022</div>
1260
+ </div>
1261
+ </div>
1262
+ </div>
1263
+ </div>
1264
+ <div class="pf-c-toolbar__item pf-m-search-filter">
1265
+ <div
1266
+ class="pf-c-input-group"
1267
+ aria-label="search filter"
1268
+ role="group"
1269
+ >
1270
+ <div class="pf-c-select" style="width: 160px">
1271
+ <span
1272
+ id="toolbar-with-validation-example-select-name-label"
1273
+ hidden
1274
+ >Choose one</span>
1275
+
1276
+ <button
1277
+ class="pf-c-select__toggle"
1278
+ type="button"
1279
+ id="toolbar-with-validation-example-select-name-toggle"
1280
+ aria-haspopup="true"
1281
+ aria-expanded="false"
1282
+ aria-labelledby="toolbar-with-validation-example-select-name-label toolbar-with-validation-example-select-name-toggle"
1283
+ >
1284
+ <div class="pf-c-select__toggle-wrapper">
1285
+ <span class="pf-c-select__toggle-icon">
1286
+ <i class="fas fa-filter" aria-hidden="true"></i>
1287
+ </span>
1288
+ <span class="pf-c-select__toggle-text">Description</span>
1289
+ </div>
1290
+ <span class="pf-c-select__toggle-arrow">
1291
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1292
+ </span>
1293
+ </button>
1294
+
1295
+ <ul
1296
+ class="pf-c-select__menu"
1297
+ role="listbox"
1298
+ aria-labelledby="toolbar-with-validation-example-select-name-label"
1299
+ hidden
1300
+ >
1301
+ <li role="presentation">
1302
+ <button
1303
+ class="pf-c-select__menu-item"
1304
+ role="option"
1305
+ >Running</button>
1306
+ </li>
1307
+ <li role="presentation">
1308
+ <button
1309
+ class="pf-c-select__menu-item pf-m-selected"
1310
+ role="option"
1311
+ aria-selected="true"
1312
+ >
1313
+ Stopped
1314
+ <span class="pf-c-select__menu-item-icon">
1315
+ <i class="fas fa-check" aria-hidden="true"></i>
1316
+ </span>
1317
+ </button>
1318
+ </li>
1319
+ <li role="presentation">
1320
+ <button
1321
+ class="pf-c-select__menu-item"
1322
+ role="option"
1323
+ >Down</button>
1324
+ </li>
1325
+ <li role="presentation">
1326
+ <button
1327
+ class="pf-c-select__menu-item"
1328
+ role="option"
1329
+ >Degraded</button>
1330
+ </li>
1331
+ <li role="presentation">
1332
+ <button
1333
+ class="pf-c-select__menu-item"
1334
+ role="option"
1335
+ >Needs maintenance</button>
1336
+ </li>
1337
+ </ul>
1338
+ </div>
1339
+ <div class="pf-c-text-input-group" style="width: auto">
1340
+ <div class="pf-c-text-input-group__main pf-m-icon">
1341
+ <span class="pf-c-text-input-group__text">
1342
+ <span class="pf-c-text-input-group__icon">
1343
+ <i class="fas fa-fw fa-search"></i>
1344
+ </span>
1345
+ <input
1346
+ class="pf-c-text-input-group__text-input"
1347
+ type="text"
1348
+ value
1349
+ placeholder="Filter by Description"
1350
+ aria-label="Type to filter"
1351
+ />
1352
+ </span>
1353
+ </div>
1354
+ </div>
1355
+ </div>
1356
+ </div>
1357
+ </div>
1358
+ <button class="pf-c-button pf-m-primary" type="button">Download</button>
1359
+ </div>
1360
+ <div
1361
+ class="pf-c-toolbar__expandable-content pf-m-hidden"
1362
+ id="toolbar-with-validation-example-expandable-content"
1363
+ hidden
1364
+ ></div>
1365
+ </div>
1366
+ </div>
1367
+ <div>
1368
+ <table
1369
+ class="pf-c-table pf-m-grid-md"
1370
+ role="grid"
1371
+ aria-label="This is a table with checkboxes"
1372
+ id="-table-table"
1373
+ >
1374
+ <thead>
1375
+ <tr role="row">
1376
+ <td></td>
1377
+ <th role="columnheader" scope="col">Repositories</th>
1378
+ <th role="columnheader" scope="col">Branches</th>
1379
+ <th role="columnheader" scope="col">Pull requests</th>
1380
+ <th role="columnheader" scope="col">Workspaces</th>
1381
+ <th role="columnheader" scope="col">Last commit</th>
1382
+ <td></td>
1383
+ <td></td>
1384
+ </tr>
1385
+ </thead>
1386
+
1387
+ <tbody role="rowgroup">
1388
+ <tr role="row">
1389
+ <td class="pf-c-table__check" role="cell">
1390
+ <input
1391
+ type="checkbox"
1392
+ name="checkrow1"
1393
+ aria-labelledby="-table-table-node1"
1394
+ />
1395
+ </td>
1396
+ <th role="columnheader" data-label="Repository name">
1397
+ <div>
1398
+ <div id="-table-table-node1">Node 1</div>
1399
+ <a href="#">siemur/test-space</a>
1400
+ </div>
1401
+ </th>
1402
+ <td role="cell" data-label="Branches">
1403
+ <span>
1404
+ <i class="fas fa-code-branch"></i> 10
1405
+ </span>
1406
+ </td>
1407
+ <td role="cell" data-label="Pull requests">
1408
+ <span>
1409
+ <i class="fas fa-code"></i> 25
1410
+ </span>
1411
+ </td>
1412
+ <td role="cell" data-label="Workspaces">
1413
+ <span>
1414
+ <i class="fas fa-cube"></i> 5
1415
+ </span>
1416
+ </td>
1417
+ <td role="cell" data-label="Last commit">2 days ago</td>
1418
+ <td role="cell" data-label="Action">
1419
+ <a href="#">Action link</a>
1420
+ </td>
1421
+ <td class="pf-c-table__action" role="cell">
1422
+ <div class="pf-c-dropdown">
1423
+ <button
1424
+ class="pf-c-dropdown__toggle pf-m-plain"
1425
+ id="-table-table-dropdown-kebab-1-button"
1426
+ aria-expanded="false"
1427
+ type="button"
1428
+ aria-label="Actions"
1429
+ >
1430
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1431
+ </button>
1432
+ <ul
1433
+ class="pf-c-dropdown__menu pf-m-align-right"
1434
+ aria-labelledby="-table-table-dropdown-kebab-1-button"
1435
+ hidden
1436
+ >
1437
+ <li>
1438
+ <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1439
+ </li>
1440
+ <li>
1441
+ <button
1442
+ class="pf-c-dropdown__menu-item"
1443
+ type="button"
1444
+ >Action</button>
1445
+ </li>
1446
+ <li>
1447
+ <a
1448
+ class="pf-c-dropdown__menu-item pf-m-disabled"
1449
+ href="#"
1450
+ aria-disabled="true"
1451
+ tabindex="-1"
1452
+ >Disabled link</a>
1453
+ </li>
1454
+ <li>
1455
+ <button
1456
+ class="pf-c-dropdown__menu-item"
1457
+ type="button"
1458
+ disabled
1459
+ >Disabled action</button>
1460
+ </li>
1461
+ <li class="pf-c-divider" role="separator"></li>
1462
+ <li>
1463
+ <a
1464
+ class="pf-c-dropdown__menu-item"
1465
+ href="#"
1466
+ >Separated link</a>
1467
+ </li>
1468
+ </ul>
1469
+ </div>
1470
+ </td>
1471
+ </tr>
1472
+
1473
+ <tr role="row">
1474
+ <td class="pf-c-table__check" role="cell">
1475
+ <input
1476
+ type="checkbox"
1477
+ name="checkrow2"
1478
+ aria-labelledby="-table-table-node2"
1479
+ />
1480
+ </td>
1481
+ <th role="columnheader" data-label="Repository name">
1482
+ <div>
1483
+ <div id="-table-table-node2">Node 2</div>
1484
+ <a href="#">siemur/test-space</a>
1485
+ </div>
1486
+ </th>
1487
+ <td role="cell" data-label="Branches">
1488
+ <span>
1489
+ <i class="fas fa-code-branch"></i> 8
1490
+ </span>
1491
+ </td>
1492
+ <td role="cell" data-label="Pull requests">
1493
+ <span>
1494
+ <i class="fas fa-code"></i> 30
1495
+ </span>
1496
+ </td>
1497
+ <td role="cell" data-label="Workspaces">
1498
+ <span>
1499
+ <i class="fas fa-cube"></i> 2
1500
+ </span>
1501
+ </td>
1502
+ <td role="cell" data-label="Last commit">2 days ago</td>
1503
+ <td role="cell" data-label="Action">
1504
+ <a href="#">Action link</a>
1505
+ </td>
1506
+ <td class="pf-c-table__action" role="cell">
1507
+ <div class="pf-c-dropdown">
1508
+ <button
1509
+ class="pf-c-dropdown__toggle pf-m-plain"
1510
+ id="-table-table-dropdown-kebab-2-button"
1511
+ aria-expanded="false"
1512
+ type="button"
1513
+ aria-label="Actions"
1514
+ >
1515
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1516
+ </button>
1517
+ <ul
1518
+ class="pf-c-dropdown__menu pf-m-align-right"
1519
+ aria-labelledby="-table-table-dropdown-kebab-2-button"
1520
+ hidden
1521
+ >
1522
+ <li>
1523
+ <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1524
+ </li>
1525
+ <li>
1526
+ <button
1527
+ class="pf-c-dropdown__menu-item"
1528
+ type="button"
1529
+ >Action</button>
1530
+ </li>
1531
+ <li>
1532
+ <a
1533
+ class="pf-c-dropdown__menu-item pf-m-disabled"
1534
+ href="#"
1535
+ aria-disabled="true"
1536
+ tabindex="-1"
1537
+ >Disabled link</a>
1538
+ </li>
1539
+ <li>
1540
+ <button
1541
+ class="pf-c-dropdown__menu-item"
1542
+ type="button"
1543
+ disabled
1544
+ >Disabled action</button>
1545
+ </li>
1546
+ <li class="pf-c-divider" role="separator"></li>
1547
+ <li>
1548
+ <a
1549
+ class="pf-c-dropdown__menu-item"
1550
+ href="#"
1551
+ >Separated link</a>
1552
+ </li>
1553
+ </ul>
1554
+ </div>
1555
+ </td>
1556
+ </tr>
1557
+
1558
+ <tr role="row">
1559
+ <td class="pf-c-table__check" role="cell">
1560
+ <input
1561
+ type="checkbox"
1562
+ name="checkrow3"
1563
+ aria-labelledby="-table-table-node3"
1564
+ />
1565
+ </td>
1566
+ <th role="columnheader" data-label="Repository name">
1567
+ <div>
1568
+ <div id="-table-table-node3">Node 3</div>
1569
+ <a href="#">siemur/test-space</a>
1570
+ </div>
1571
+ </th>
1572
+ <td role="cell" data-label="Branches">
1573
+ <span>
1574
+ <i class="fas fa-code-branch"></i> 12
1575
+ </span>
1576
+ </td>
1577
+ <td role="cell" data-label="Pull requests">
1578
+ <span>
1579
+ <i class="fas fa-code"></i> 48
1580
+ </span>
1581
+ </td>
1582
+ <td role="cell" data-label="Workspaces">
1583
+ <span>
1584
+ <i class="fas fa-cube"></i> 13
1585
+ </span>
1586
+ </td>
1587
+ <td role="cell" data-label="Last commit">30 days ago</td>
1588
+ <td role="cell" data-label="Action">
1589
+ <a href="#">Action link</a>
1590
+ </td>
1591
+ <td class="pf-c-table__action" role="cell">
1592
+ <div class="pf-c-dropdown">
1593
+ <button
1594
+ class="pf-c-dropdown__toggle pf-m-plain"
1595
+ id="-table-table-dropdown-kebab-3-button"
1596
+ aria-expanded="false"
1597
+ type="button"
1598
+ aria-label="Actions"
1599
+ >
1600
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1601
+ </button>
1602
+ <ul
1603
+ class="pf-c-dropdown__menu pf-m-align-right"
1604
+ aria-labelledby="-table-table-dropdown-kebab-3-button"
1605
+ hidden
1606
+ >
1607
+ <li>
1608
+ <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1609
+ </li>
1610
+ <li>
1611
+ <button
1612
+ class="pf-c-dropdown__menu-item"
1613
+ type="button"
1614
+ >Action</button>
1615
+ </li>
1616
+ <li>
1617
+ <a
1618
+ class="pf-c-dropdown__menu-item pf-m-disabled"
1619
+ href="#"
1620
+ aria-disabled="true"
1621
+ tabindex="-1"
1622
+ >Disabled link</a>
1623
+ </li>
1624
+ <li>
1625
+ <button
1626
+ class="pf-c-dropdown__menu-item"
1627
+ type="button"
1628
+ disabled
1629
+ >Disabled action</button>
1630
+ </li>
1631
+ <li class="pf-c-divider" role="separator"></li>
1632
+ <li>
1633
+ <a
1634
+ class="pf-c-dropdown__menu-item"
1635
+ href="#"
1636
+ >Separated link</a>
1637
+ </li>
1638
+ </ul>
1639
+ </div>
1640
+ </td>
1641
+ </tr>
1642
+
1643
+ <tr role="row">
1644
+ <td class="pf-c-table__check" role="cell">
1645
+ <input
1646
+ type="checkbox"
1647
+ name="checkrow4"
1648
+ aria-labelledby="-table-table-node4"
1649
+ />
1650
+ </td>
1651
+ <th role="columnheader" data-label="Repository name">
1652
+ <div>
1653
+ <div id="-table-table-node4">Node 4</div>
1654
+ <a href="#">siemur/test-space</a>
1655
+ </div>
1656
+ </th>
1657
+ <td role="cell" data-label="Branches">
1658
+ <span>
1659
+ <i class="fas fa-code-branch"></i> 3
1660
+ </span>
1661
+ </td>
1662
+ <td role="cell" data-label="Pull requests">
1663
+ <span>
1664
+ <i class="fas fa-code"></i> 8
1665
+ </span>
1666
+ </td>
1667
+ <td role="cell" data-label="Workspaces">
1668
+ <span>
1669
+ <i class="fas fa-cube"></i> 20
1670
+ </span>
1671
+ </td>
1672
+ <td role="cell" data-label="Last commit">8 days ago</td>
1673
+ <td role="cell" data-label="Action">
1674
+ <a href="#">Action link</a>
1675
+ </td>
1676
+ <td class="pf-c-table__action" role="cell">
1677
+ <div class="pf-c-dropdown">
1678
+ <button
1679
+ class="pf-c-dropdown__toggle pf-m-plain"
1680
+ id="-table-table-dropdown-kebab-4-button"
1681
+ aria-expanded="false"
1682
+ type="button"
1683
+ aria-label="Actions"
1684
+ >
1685
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1686
+ </button>
1687
+ <ul
1688
+ class="pf-c-dropdown__menu pf-m-align-right"
1689
+ aria-labelledby="-table-table-dropdown-kebab-4-button"
1690
+ hidden
1691
+ >
1692
+ <li>
1693
+ <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1694
+ </li>
1695
+ <li>
1696
+ <button
1697
+ class="pf-c-dropdown__menu-item"
1698
+ type="button"
1699
+ >Action</button>
1700
+ </li>
1701
+ <li>
1702
+ <a
1703
+ class="pf-c-dropdown__menu-item pf-m-disabled"
1704
+ href="#"
1705
+ aria-disabled="true"
1706
+ tabindex="-1"
1707
+ >Disabled link</a>
1708
+ </li>
1709
+ <li>
1710
+ <button
1711
+ class="pf-c-dropdown__menu-item"
1712
+ type="button"
1713
+ disabled
1714
+ >Disabled action</button>
1715
+ </li>
1716
+ <li class="pf-c-divider" role="separator"></li>
1717
+ <li>
1718
+ <a
1719
+ class="pf-c-dropdown__menu-item"
1720
+ href="#"
1721
+ >Separated link</a>
1722
+ </li>
1723
+ </ul>
1724
+ </div>
1725
+ </td>
1726
+ </tr>
1727
+
1728
+ <tr role="row">
1729
+ <td class="pf-c-table__check" role="cell">
1730
+ <input
1731
+ type="checkbox"
1732
+ name="checkrow5"
1733
+ aria-labelledby="-table-table-node5"
1734
+ />
1735
+ </td>
1736
+ <td role="cell" data-label="Repository name">
1737
+ <div>
1738
+ <div id="-table-table-node5">Node 5</div>
1739
+ <a href="#">siemur/test-space</a>
1740
+ </div>
1741
+ </td>
1742
+ <td role="cell" data-label="Branches">
1743
+ <span>
1744
+ <i class="fas fa-code-branch"></i> 34
1745
+ </span>
1746
+ </td>
1747
+ <td role="cell" data-label="Pull requests">
1748
+ <span>
1749
+ <i class="fas fa-code"></i> 21
1750
+ </span>
1751
+ </td>
1752
+ <td role="cell" data-label="Workspaces">
1753
+ <span>
1754
+ <i class="fas fa-cube"></i> 26
1755
+ </span>
1756
+ </td>
1757
+ <td role="cell" data-label="Last commit">2 days ago</td>
1758
+ <td role="cell" data-label="Action">
1759
+ <a href="#">Action link</a>
1760
+ </td>
1761
+ <td class="pf-c-table__action" role="cell">
1762
+ <div class="pf-c-dropdown">
1763
+ <button
1764
+ class="pf-c-dropdown__toggle pf-m-plain"
1765
+ id="-table-table-dropdown-kebab-5-button"
1766
+ aria-expanded="false"
1767
+ type="button"
1768
+ aria-label="Actions"
1769
+ >
1770
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1771
+ </button>
1772
+ <ul
1773
+ class="pf-c-dropdown__menu pf-m-align-right"
1774
+ aria-labelledby="-table-table-dropdown-kebab-5-button"
1775
+ hidden
1776
+ >
1777
+ <li>
1778
+ <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1779
+ </li>
1780
+ <li>
1781
+ <button
1782
+ class="pf-c-dropdown__menu-item"
1783
+ type="button"
1784
+ >Action</button>
1785
+ </li>
1786
+ <li>
1787
+ <a
1788
+ class="pf-c-dropdown__menu-item pf-m-disabled"
1789
+ href="#"
1790
+ aria-disabled="true"
1791
+ tabindex="-1"
1792
+ >Disabled link</a>
1793
+ </li>
1794
+ <li>
1795
+ <button
1796
+ class="pf-c-dropdown__menu-item"
1797
+ type="button"
1798
+ disabled
1799
+ >Disabled action</button>
1800
+ </li>
1801
+ <li class="pf-c-divider" role="separator"></li>
1802
+ <li>
1803
+ <a
1804
+ class="pf-c-dropdown__menu-item"
1805
+ href="#"
1806
+ >Separated link</a>
1807
+ </li>
1808
+ </ul>
1809
+ </div>
1810
+ </td>
1811
+ </tr>
1812
+ </tbody>
1813
+ </table>
1814
+ </div>
1815
+ </section>
1816
+ </main>
1817
+ </div>
1818
+
1819
+ ```
1820
+
239
1821
  ### Toolbar attribute value search filter on mobile
240
1822
 
241
1823
  ```html
@@ -404,7 +1986,6 @@ section: components
404
1986
  role="listbox"
405
1987
  aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-select-name-label"
406
1988
  hidden
407
- style="width: 175px"
408
1989
  >
409
1990
  <li role="presentation">
410
1991
  <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -435,7 +2016,7 @@ section: components
435
2016
  </li>
436
2017
  </ul>
437
2018
  </div>
438
- <div class="pf-c-text-input-group">
2019
+ <div class="pf-c-text-input-group" style="width: auto">
439
2020
  <div class="pf-c-text-input-group__main pf-m-icon">
440
2021
  <span class="pf-c-text-input-group__text">
441
2022
  <span class="pf-c-text-input-group__icon">
@@ -459,7 +2040,7 @@ section: components
459
2040
 
460
2041
  ```
461
2042
 
462
- ### Toolbar attribute value single select filter desktop
2043
+ ### Toolbar attribute value single select filter on desktop
463
2044
 
464
2045
  ```html
465
2046
  <div
@@ -997,7 +2578,7 @@ section: components
997
2578
 
998
2579
  ```
999
2580
 
1000
- ### Toolbar attribute value checkbox select filter desktop
2581
+ ### Toolbar attribute value checkbox select filter on desktop
1001
2582
 
1002
2583
  ```html
1003
2584
  <div
@@ -2698,7 +4279,6 @@ section: components
2698
4279
  role="listbox"
2699
4280
  aria-labelledby="toolbar-pagination-management-example-toolbar-select-name-label"
2700
4281
  hidden
2701
- style="width: 175px"
2702
4282
  >
2703
4283
  <li role="presentation">
2704
4284
  <button
@@ -2738,7 +4318,7 @@ section: components
2738
4318
  </li>
2739
4319
  </ul>
2740
4320
  </div>
2741
- <div class="pf-c-text-input-group">
4321
+ <div class="pf-c-text-input-group" style="width: auto">
2742
4322
  <div class="pf-c-text-input-group__main pf-m-icon">
2743
4323
  <span class="pf-c-text-input-group__text">
2744
4324
  <span class="pf-c-text-input-group__icon">