@patternfly/patternfly 5.0.0-prerelease.2 → 5.0.0-prerelease.4

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 (53) hide show
  1. package/base/_common.scss +7 -0
  2. package/base/_variables.scss +0 -7
  3. package/base/patternfly-common.css +6 -0
  4. package/base/patternfly-themes.css +6 -0
  5. package/base/patternfly-variables.css +0 -6
  6. package/components/AboutModalBox/about-modal-box.css +6 -0
  7. package/components/Banner/banner.css +6 -0
  8. package/components/LogViewer/log-viewer.css +6 -0
  9. package/components/Login/login.css +7 -0
  10. package/components/Masthead/masthead.css +8 -6
  11. package/components/Masthead/masthead.scss +1 -7
  12. package/components/Masthead/themes/dark/masthead.scss +1 -0
  13. package/components/MenuToggle/menu-toggle.css +13 -11
  14. package/components/MenuToggle/menu-toggle.scss +14 -12
  15. package/components/MenuToggle/themes/dark/menu-toggle.scss +2 -1
  16. package/components/Page/page.css +8 -0
  17. package/components/Wizard/wizard.css +6 -0
  18. package/docs/demos/AboutModal/examples/AboutModal.md +42 -774
  19. package/docs/demos/Alert/examples/Alert.md +126 -2322
  20. package/docs/demos/BackToTop/examples/BackToTop.md +42 -774
  21. package/docs/demos/Banner/examples/Banner.md +84 -1588
  22. package/docs/demos/CardView/examples/CardView.md +42 -774
  23. package/docs/demos/ContextSelector/examples/ContextSelector.md +136 -2448
  24. package/docs/demos/Dashboard/examples/Dashboard.md +42 -774
  25. package/docs/demos/DataList/examples/DataList.md +191 -3119
  26. package/docs/demos/DescriptionList/examples/DescriptionList.md +126 -2322
  27. package/docs/demos/Drawer/examples/Drawer.md +210 -3870
  28. package/docs/demos/JumpLinks/examples/JumpLinks.md +252 -4644
  29. package/docs/demos/Masthead/examples/Masthead.md +144 -1962
  30. package/docs/demos/Modal/examples/Modal.md +252 -4644
  31. package/docs/demos/Nav/examples/Nav.md +336 -6192
  32. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +231 -3891
  33. package/docs/demos/Page/examples/Page.md +378 -6966
  34. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +426 -5550
  35. package/docs/demos/Skeleton/examples/Skeleton.md +42 -774
  36. package/docs/demos/Table/examples/Table.md +752 -11732
  37. package/docs/demos/Tabs/examples/Tabs.md +252 -4644
  38. package/docs/demos/Toolbar/examples/Toolbar.md +84 -1548
  39. package/docs/demos/Wizard/examples/Wizard.md +378 -6966
  40. package/package.json +1 -1
  41. package/patternfly-base-no-globals-theme-dark-unversioned.css +9 -6
  42. package/patternfly-base-no-globals.css +9 -6
  43. package/patternfly-base-theme-dark-unversioned.css +9 -6
  44. package/patternfly-base.css +9 -6
  45. package/patternfly-no-globals.css +342 -23
  46. package/patternfly-theme-dark-unversioned.css +342 -23
  47. package/patternfly.css +342 -23
  48. package/patternfly.min.css +1 -1
  49. package/patternfly.min.css.map +1 -1
  50. package/sass-utilities/placeholders.scss +4 -0
  51. package/sass-utilities/themes/dark/placeholders.scss +4 -0
  52. package/RELEASE-NOTES.md +0 -1815
  53. package/UPGRADE-GUIDE.md +0 -1298
package/docs/demos/Toolbar/examples/Toolbar.md CHANGED
@@ -307,800 +307,68 @@ section: components
307
307
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
308
308
  >
309
309
  <div class="pf-v5-c-toolbar__item">
310
- <nav
311
- class="pf-v5-c-app-launcher"
310
+ <button
311
+ class="pf-v5-c-menu-toggle pf-m-plain"
312
+ type="button"
313
+ aria-expanded="false"
312
314
  aria-label="Application launcher"
313
- id="toolbar-pagination-management-example-masthead-application-launcher"
314
315
  >
315
- <button
316
- class="pf-v5-c-app-launcher__toggle"
317
- type="button"
318
- id="toolbar-pagination-management-example-masthead-application-launcher-button"
319
- aria-expanded="false"
320
- aria-label="Application launcher"
321
- >
322
- <i class="fas fa-th" aria-hidden="true"></i>
323
- </button>
324
- <div
325
- class="pf-v5-c-app-launcher__menu pf-m-align-right"
326
- hidden
327
- >
328
- <div class="pf-v5-c-app-launcher__menu-search">
329
- <div class="pf-v5-c-text-input-group">
330
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
331
- <span class="pf-v5-c-text-input-group__text">
332
- <span class="pf-v5-c-text-input-group__icon">
333
- <i class="fas fa-fw fa-search"></i>
334
- </span>
335
- <input
336
- class="pf-v5-c-text-input-group__text-input"
337
- type="text"
338
- placeholder="Filer by name"
339
- value
340
- aria-label="Search input"
341
- />
342
- </span>
343
- </div>
344
- </div>
345
- </div>
346
- <section class="pf-v5-c-app-launcher__group">
347
- <h1 class="pf-v5-c-app-launcher__group-title">Favorites</h1>
348
- <ul role="list">
349
- <li
350
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
351
- >
352
- <a class="pf-v5-c-app-launcher__menu-item">
353
- Link 1
354
- <span
355
- class="pf-v5-c-app-launcher__menu-item-external-icon"
356
- >
357
- <i
358
- class="fas fa-external-link-alt"
359
- aria-hidden="true"
360
- ></i>
361
- </span>
362
- <span
363
- class="pf-v5-screen-reader"
364
- >(opens new window)</span>
365
- </a>
366
- <button
367
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
368
- type="button"
369
- aria-label="Favorite"
370
- >
371
- <i class="fas fa-star" aria-hidden="true"></i>
372
- </button>
373
- </li>
374
- <li
375
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
376
- >
377
- <a class="pf-v5-c-app-launcher__menu-item">
378
- Link 2
379
- <span
380
- class="pf-v5-c-app-launcher__menu-item-external-icon"
381
- >
382
- <i
383
- class="fas fa-external-link-alt"
384
- aria-hidden="true"
385
- ></i>
386
- </span>
387
- <span
388
- class="pf-v5-screen-reader"
389
- >(opens new window)</span>
390
- </a>
391
- <button
392
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
393
- type="button"
394
- aria-label="Favorite"
395
- >
396
- <i class="fas fa-star" aria-hidden="true"></i>
397
- </button>
398
- </li>
399
- </ul>
400
- </section>
401
- <hr class="pf-v5-c-divider" />
402
- <section class="pf-v5-c-app-launcher__group">
403
- <h1 class="pf-v5-c-app-launcher__group-title">Group 1</h1>
404
- <ul role="list">
405
- <li
406
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
407
- >
408
- <a class="pf-v5-c-app-launcher__menu-item">
409
- Link 1
410
- <span
411
- class="pf-v5-c-app-launcher__menu-item-external-icon"
412
- >
413
- <i
414
- class="fas fa-external-link-alt"
415
- aria-hidden="true"
416
- ></i>
417
- </span>
418
- <span
419
- class="pf-v5-screen-reader"
420
- >(opens new window)</span>
421
- </a>
422
- <button
423
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
424
- type="button"
425
- aria-label="Favorite"
426
- >
427
- <i class="fas fa-star" aria-hidden="true"></i>
428
- </button>
429
- </li>
430
- <li
431
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
432
- >
433
- <a class="pf-v5-c-app-launcher__menu-item">
434
- Link 2
435
- <span
436
- class="pf-v5-c-app-launcher__menu-item-external-icon"
437
- >
438
- <i
439
- class="fas fa-external-link-alt"
440
- aria-hidden="true"
441
- ></i>
442
- </span>
443
- <span
444
- class="pf-v5-screen-reader"
445
- >(opens new window)</span>
446
- </a>
447
- <button
448
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
449
- type="button"
450
- aria-label="Favorite"
451
- >
452
- <i class="fas fa-star" aria-hidden="true"></i>
453
- </button>
454
- </li>
455
- </ul>
456
- </section>
457
- </div>
458
- </nav>
316
+ <i class="fas fa-th" aria-hidden="true"></i>
317
+ </button>
459
318
  </div>
460
319
  <div class="pf-v5-c-toolbar__item">
461
- <div class="pf-v5-c-dropdown">
462
- <button
463
- class="pf-v5-c-dropdown__toggle pf-m-plain"
464
- id="toolbar-pagination-management-example-masthead-settings-button"
465
- aria-expanded="false"
466
- type="button"
467
- aria-label="Settings"
468
- >
469
- <i class="fas fa-cog" aria-hidden="true"></i>
470
- </button>
471
- <ul
472
- class="pf-v5-c-dropdown__menu pf-m-align-right"
473
- aria-labelledby="toolbar-pagination-management-example-masthead-settings-button"
474
- hidden
475
- >
476
- <li>
477
- <button
478
- class="pf-v5-c-dropdown__menu-item"
479
- type="button"
480
- >Settings</button>
481
- </li>
482
- <li>
483
- <button
484
- class="pf-v5-c-dropdown__menu-item"
485
- type="button"
486
- >Use the beta release</button>
487
- </li>
488
- </ul>
489
- </div>
320
+ <button
321
+ class="pf-v5-c-menu-toggle pf-m-plain"
322
+ type="button"
323
+ aria-expanded="false"
324
+ aria-label="Settings"
325
+ >
326
+ <i class="fas fa-cog" aria-hidden="true"></i>
327
+ </button>
490
328
  </div>
491
329
  <div class="pf-v5-c-toolbar__item">
492
- <div class="pf-v5-c-dropdown">
493
- <button
494
- class="pf-v5-c-dropdown__toggle pf-m-plain"
495
- id="toolbar-pagination-management-example-masthead-help-button"
496
- aria-expanded="false"
497
- type="button"
498
- aria-label="Help"
499
- >
500
- <i class="fas fa-question-circle" aria-hidden="true"></i>
501
- </button>
502
- <ul
503
- class="pf-v5-c-dropdown__menu pf-m-align-right"
504
- aria-labelledby="toolbar-pagination-management-example-masthead-help-button"
505
- hidden
506
- >
507
- <li>
508
- <button
509
- class="pf-v5-c-dropdown__menu-item"
510
- type="button"
511
- >Support options</button>
512
- </li>
513
- <li>
514
- <button
515
- class="pf-v5-c-dropdown__menu-item"
516
- type="button"
517
- >Open support case</button>
518
- </li>
519
- <li>
520
- <button
521
- class="pf-v5-c-dropdown__menu-item"
522
- type="button"
523
- >API documentation</button>
524
- </li>
525
- </ul>
526
- </div>
527
- </div>
528
- </div>
529
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
530
- <div class="pf-v5-c-dropdown">
531
330
  <button
532
331
  class="pf-v5-c-menu-toggle pf-m-plain"
533
332
  type="button"
534
333
  aria-expanded="false"
535
- aria-label="Actions"
334
+ aria-label="Help"
536
335
  >
537
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
336
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
538
337
  </button>
539
- <div
540
- class="pf-v5-c-menu pf-m-drilldown pf-m-align-right"
541
- hidden
542
- >
543
- <div class="pf-v5-c-menu__content">
544
- <section class="pf-v5-c-menu__group pf-m-hidden-on-sm">
545
- <ul class="pf-v5-c-menu__list" role="menu">
546
- <li
547
- class="pf-v5-c-menu__list-item pf-m-disabled"
548
- role="none"
549
- >
550
- <button
551
- class="pf-v5-c-menu__item"
552
- type="button"
553
- disabled
554
- role="menuitem"
555
- >
556
- <span class="pf-v5-c-menu__item-description">
557
- <div class="pf-v5-u-font-size-sm">Username:</div>
558
- <div class="pf-v5-u-font-size-md">ned_username</div>
559
- </span>
560
- </button>
561
- </li>
562
- <li
563
- class="pf-v5-c-menu__list-item pf-m-disabled"
564
- role="none"
565
- >
566
- <button
567
- class="pf-v5-c-menu__item"
568
- type="button"
569
- disabled
570
- role="menuitem"
571
- >
572
- <span class="pf-v5-c-menu__item-description">
573
- <div
574
- class="pf-v5-u-font-size-sm"
575
- >Account number:</div>
576
- <div class="pf-v5-u-font-size-md">123456789</div>
577
- </span>
578
- </button>
579
- </li>
580
- <li class="pf-v5-c-divider" role="separator"></li>
581
- <li class="pf-v5-c-menu__list-item" role="none">
582
- <button
583
- class="pf-v5-c-menu__item"
584
- type="button"
585
- role="menuitem"
586
- >
587
- <span class="pf-v5-c-menu__item-main">
588
- <span class="pf-v5-c-menu__item-text">My profile</span>
589
- </span>
590
- </button>
591
- </li>
592
- <li class="pf-v5-c-menu__list-item" role="none">
593
- <button
594
- class="pf-v5-c-menu__item"
595
- type="button"
596
- role="menuitem"
597
- >
598
- <span class="pf-v5-c-menu__item-main">
599
- <span
600
- class="pf-v5-c-menu__item-text"
601
- >User management</span>
602
- </span>
603
- </button>
604
- </li>
605
- <li class="pf-v5-c-menu__list-item" role="none">
606
- <button
607
- class="pf-v5-c-menu__item"
608
- type="button"
609
- role="menuitem"
610
- >
611
- <span class="pf-v5-c-menu__item-main">
612
- <span class="pf-v5-c-menu__item-text">Logout</span>
613
- </span>
614
- </button>
615
- </li>
616
- </ul>
617
- </section>
618
- <hr class="pf-v5-c-divider pf-m-hidden-on-sm" />
619
- <section class="pf-v5-c-menu__group">
620
- <ul class="pf-v5-c-menu__list" role="menu">
621
- <li class="pf-v5-c-menu__list-item" role="none">
622
- <button
623
- class="pf-v5-c-menu__item"
624
- type="button"
625
- role="menuitem"
626
- aria-expanded="false"
627
- >
628
- <span class="pf-v5-c-menu__item-main">
629
- <span class="pf-v5-c-menu__item-icon">
630
- <i
631
- class="fas fa-fw fa-cog"
632
- aria-hidden="true"
633
- ></i>
634
- </span>
635
- <span class="pf-v5-c-menu__item-text">Settings</span>
636
- <span class="pf-v5-c-menu__item-toggle-icon">
637
- <i class="fas fa-angle-right"></i>
638
- </span>
639
- </span>
640
- </button>
641
- <div class="pf-v5-c-menu" hidden>
642
- <div class="pf-v5-c-menu__content">
643
- <ul class="pf-v5-c-menu__list" role="menu">
644
- <li
645
- class="pf-v5-c-menu__list-item pf-m-drill-up"
646
- role="none"
647
- >
648
- <button
649
- class="pf-v5-c-menu__item"
650
- type="button"
651
- role="menuitem"
652
- >
653
- <span class="pf-v5-c-menu__item-main">
654
- <span
655
- class="pf-v5-c-menu__item-toggle-icon"
656
- >
657
- <i class="fas fa-angle-left"></i>
658
- </span>
659
- <span class="pf-v5-c-menu__item-icon">
660
- <i
661
- class="fas fa-fw fa-cog"
662
- aria-hidden="true"
663
- ></i>
664
- </span>
665
- <span
666
- class="pf-v5-c-menu__item-text"
667
- >Settings</span>
668
- </span>
669
- </button>
670
- </li>
671
- <li class="pf-v5-c-divider" role="separator"></li>
672
- <li
673
- class="pf-v5-c-menu__list-item"
674
- role="none"
675
- >
676
- <a
677
- class="pf-v5-c-menu__item"
678
- href="#"
679
- role="menuitem"
680
- >
681
- <span class="pf-v5-c-menu__item-main">
682
- <span
683
- class="pf-v5-c-menu__item-text"
684
- >Customer support</span>
685
- </span>
686
- </a>
687
- </li>
688
- <li
689
- class="pf-v5-c-menu__list-item"
690
- role="none"
691
- >
692
- <a
693
- class="pf-v5-c-menu__item"
694
- href="#"
695
- role="menuitem"
696
- >
697
- <span class="pf-v5-c-menu__item-main">
698
- <span
699
- class="pf-v5-c-menu__item-text"
700
- >About</span>
701
- </span>
702
- </a>
703
- </li>
704
- </ul>
705
- </div>
706
- </div>
707
- </li>
708
-
709
- <li class="pf-v5-c-menu__list-item" role="none">
710
- <button
711
- class="pf-v5-c-menu__item"
712
- type="button"
713
- role="menuitem"
714
- aria-expanded="false"
715
- >
716
- <span class="pf-v5-c-menu__item-main">
717
- <span class="pf-v5-c-menu__item-icon">
718
- <i
719
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
720
- aria-hidden="true"
721
- ></i>
722
- </span>
723
- <span class="pf-v5-c-menu__item-text">Help</span>
724
- <span class="pf-v5-c-menu__item-toggle-icon">
725
- <i class="fas fa-angle-right"></i>
726
- </span>
727
- </span>
728
- </button>
729
- <div class="pf-v5-c-menu" hidden>
730
- <div class="pf-v5-c-menu__content">
731
- <ul class="pf-v5-c-menu__list" role="menu">
732
- <li
733
- class="pf-v5-c-menu__list-item pf-m-drill-up"
734
- role="none"
735
- >
736
- <button
737
- class="pf-v5-c-menu__item"
738
- type="button"
739
- role="menuitem"
740
- >
741
- <span class="pf-v5-c-menu__item-main">
742
- <span
743
- class="pf-v5-c-menu__item-toggle-icon"
744
- >
745
- <i class="fas fa-angle-left"></i>
746
- </span>
747
- <span class="pf-v5-c-menu__item-icon">
748
- <i
749
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
750
- aria-hidden="true"
751
- ></i>
752
- </span>
753
- <span
754
- class="pf-v5-c-menu__item-text"
755
- >Help</span>
756
- </span>
757
- </button>
758
- </li>
759
- <li class="pf-v5-c-divider" role="separator"></li>
760
- <li
761
- class="pf-v5-c-menu__list-item"
762
- role="none"
763
- >
764
- <a
765
- class="pf-v5-c-menu__item"
766
- href="#"
767
- role="menuitem"
768
- >
769
- <span class="pf-v5-c-menu__item-main">
770
- <span
771
- class="pf-v5-c-menu__item-text"
772
- >Support options</span>
773
- </span>
774
- </a>
775
- </li>
776
- <li
777
- class="pf-v5-c-menu__list-item"
778
- role="none"
779
- >
780
- <a
781
- class="pf-v5-c-menu__item"
782
- href="#"
783
- role="menuitem"
784
- >
785
- <span class="pf-v5-c-menu__item-main">
786
- <span
787
- class="pf-v5-c-menu__item-text"
788
- >Open support case</span>
789
- </span>
790
- </a>
791
- </li>
792
- <li
793
- class="pf-v5-c-menu__list-item"
794
- role="none"
795
- >
796
- <a
797
- class="pf-v5-c-menu__item"
798
- href="#"
799
- role="menuitem"
800
- >
801
- <span class="pf-v5-c-menu__item-main">
802
- <span
803
- class="pf-v5-c-menu__item-text"
804
- >API documentation</span>
805
- </span>
806
- </a>
807
- </li>
808
- </ul>
809
- </div>
810
- </div>
811
- </li>
812
-
813
- <li class="pf-v5-c-menu__list-item" role="none">
814
- <button
815
- class="pf-v5-c-menu__item"
816
- type="button"
817
- role="menuitem"
818
- >
819
- <span class="pf-v5-c-menu__item-main">
820
- <span class="pf-v5-c-menu__item-icon">
821
- <i class="fas fa-fw fa-th" aria-hidden="true"></i>
822
- </span>
823
- <span
824
- class="pf-v5-c-menu__item-text"
825
- >Application launcher</span>
826
- <span class="pf-v5-c-menu__item-toggle-icon">
827
- <i class="fas fa-angle-right"></i>
828
- </span>
829
- </span>
830
- </button>
831
- <div class="pf-v5-c-menu" hidden>
832
- <div class="pf-v5-c-menu__header">
833
- <button
834
- class="pf-v5-c-menu__item"
835
- type="button"
836
- role="menuitem"
837
- >
838
- <span class="pf-v5-c-menu__item-main">
839
- <span
840
- class="pf-v5-c-menu__item-toggle-icon"
841
- >
842
- <i class="fas fa-angle-left"></i>
843
- </span>
844
- <span class="pf-v5-c-menu__item-icon">
845
- <i
846
- class="fas fa-fw fa-th"
847
- aria-hidden="true"
848
- ></i>
849
- </span>
850
- <span
851
- class="pf-v5-c-menu__item-text"
852
- >Application launcher</span>
853
- </span>
854
- </button>
855
- </div>
856
- <div class="pf-v5-c-menu__search">
857
- <div class="pf-v5-c-menu__search-input">
858
- <div class="pf-v5-c-text-input-group">
859
- <div
860
- class="pf-v5-c-text-input-group__main pf-m-icon"
861
- >
862
- <span
863
- class="pf-v5-c-text-input-group__text"
864
- >
865
- <span
866
- class="pf-v5-c-text-input-group__icon"
867
- >
868
- <i class="fas fa-fw fa-search"></i>
869
- </span>
870
- <input
871
- class="pf-v5-c-text-input-group__text-input"
872
- type="text"
873
- placeholder="Search"
874
- value
875
- aria-label="Search input"
876
- />
877
- </span>
878
- </div>
879
- </div>
880
- </div>
881
- </div>
882
- <hr class="pf-v5-c-divider" />
883
- <section class="pf-v5-c-menu__group">
884
- <h1 class="pf-v5-c-menu__group-title">Favorites</h1>
885
- <ul class="pf-v5-c-menu__list" role="menu">
886
- <li
887
- class="pf-v5-c-menu__list-item"
888
- role="none"
889
- >
890
- <a
891
- class="pf-v5-c-menu__item"
892
- href="#"
893
- role="menuitem"
894
- >
895
- <span class="pf-v5-c-menu__item-main">
896
- <span
897
- class="pf-v5-c-menu__item-text"
898
- >Link 1</span>
899
- </span>
900
- </a>
901
- <button
902
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
903
- type="button"
904
- aria-label="Starred"
905
- >
906
- <span
907
- class="pf-v5-c-menu__item-action-icon"
908
- >
909
- <i
910
- class="fas fa-star"
911
- aria-hidden="true"
912
- ></i>
913
- </span>
914
- </button>
915
- </li>
916
- <li
917
- class="pf-v5-c-menu__list-item"
918
- role="none"
919
- >
920
- <a
921
- class="pf-v5-c-menu__item"
922
- href="#"
923
- role="menuitem"
924
- target="_blank"
925
- >
926
- <span class="pf-v5-c-menu__item-main">
927
- <span
928
- class="pf-v5-c-menu__item-text"
929
- >Link 2</span>
930
- <span
931
- class="pf-v5-c-menu__item-external-icon"
932
- >
933
- <i
934
- class="fas fa-external-link-alt"
935
- aria-hidden="true"
936
- ></i>
937
- </span>
938
- <span
939
- class="pf-v5-screen-reader"
940
- >(opens new window)</span>
941
- </span>
942
- </a>
943
- <button
944
- class="pf-v5-c-menu__item-action pf-m-favorite"
945
- type="button"
946
- aria-label="Not starred"
947
- >
948
- <span
949
- class="pf-v5-c-menu__item-action-icon"
950
- >
951
- <i
952
- class="fas fa-star"
953
- aria-hidden="true"
954
- ></i>
955
- </span>
956
- </button>
957
- </li>
958
- </ul>
959
- </section>
960
- <hr class="pf-v5-c-divider" />
961
- <section class="pf-v5-c-menu__group">
962
- <h1 class="pf-v5-c-menu__group-title">Group 1</h1>
963
- <ul class="pf-v5-c-menu__list" role="menu">
964
- <li
965
- class="pf-v5-c-menu__list-item"
966
- role="none"
967
- >
968
- <a
969
- class="pf-v5-c-menu__item"
970
- href="#"
971
- role="menuitem"
972
- >
973
- <span class="pf-v5-c-menu__item-main">
974
- <span
975
- class="pf-v5-c-menu__item-text"
976
- >Link 1</span>
977
- </span>
978
- </a>
979
- <button
980
- class="pf-v5-c-menu__item-action pf-m-favorite"
981
- type="button"
982
- aria-label="Not starred"
983
- >
984
- <span
985
- class="pf-v5-c-menu__item-action-icon"
986
- >
987
- <i
988
- class="fas fa-star"
989
- aria-hidden="true"
990
- ></i>
991
- </span>
992
- </button>
993
- </li>
994
- <li
995
- class="pf-v5-c-menu__list-item"
996
- role="none"
997
- >
998
- <a
999
- class="pf-v5-c-menu__item"
1000
- href="#"
1001
- role="menuitem"
1002
- target="_blank"
1003
- >
1004
- <span class="pf-v5-c-menu__item-main">
1005
- <span
1006
- class="pf-v5-c-menu__item-text"
1007
- >Link 2</span>
1008
- <span
1009
- class="pf-v5-c-menu__item-external-icon"
1010
- >
1011
- <i
1012
- class="fas fa-external-link-alt"
1013
- aria-hidden="true"
1014
- ></i>
1015
- </span>
1016
- <span
1017
- class="pf-v5-screen-reader"
1018
- >(opens new window)</span>
1019
- </span>
1020
- </a>
1021
- <button
1022
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
1023
- type="button"
1024
- aria-label="Starred"
1025
- >
1026
- <span
1027
- class="pf-v5-c-menu__item-action-icon"
1028
- >
1029
- <i
1030
- class="fas fa-star"
1031
- aria-hidden="true"
1032
- ></i>
1033
- </span>
1034
- </button>
1035
- </li>
1036
- </ul>
1037
- </section>
1038
- </div>
1039
- </li>
1040
- </ul>
1041
- </section>
1042
- </div>
1043
- </div>
1044
338
  </div>
1045
339
  </div>
1046
- </div>
1047
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1048
- <div
1049
- class="pf-v5-c-dropdown pf-m-full-height"
1050
- style="--pf-v5-c-dropdown--MaxWidth: 20ch;"
1051
- >
340
+ <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
1052
341
  <button
1053
- class="pf-v5-c-dropdown__toggle"
1054
- id="toolbar-pagination-management-example-masthead-profile-button"
1055
- aria-expanded="false"
342
+ class="pf-v5-c-menu-toggle pf-m-plain"
1056
343
  type="button"
344
+ aria-expanded="false"
345
+ aria-label="Actions"
1057
346
  >
1058
- <span class="pf-v5-c-dropdown__toggle-image">
1059
- <img
1060
- class="pf-v5-c-avatar"
1061
- alt="Avatar image"
1062
- src="/assets/images/img_avatar-light.svg"
1063
- />
1064
- </span>
1065
- <span class="pf-v5-c-dropdown__toggle-text">Ned Username</span>
1066
- <span class="pf-v5-c-dropdown__toggle-icon">
1067
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1068
- </span>
347
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1069
348
  </button>
1070
- <div class="pf-v5-c-dropdown__menu" hidden>
1071
- <section class="pf-v5-c-dropdown__group">
1072
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
1073
- <div class="pf-v5-u-font-size-sm">Account number:</div>
1074
- <div>123456789</div>
1075
- </div>
1076
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
1077
- <div class="pf-v5-u-font-size-sm">Username:</div>
1078
- <div>mshaksho@redhat.com</div>
1079
- </div>
1080
- </section>
1081
- <hr class="pf-v5-c-divider" />
1082
- <section class="pf-v5-c-dropdown__group">
1083
- <ul>
1084
- <li>
1085
- <a
1086
- class="pf-v5-c-dropdown__menu-item"
1087
- href="#"
1088
- >My profile</a>
1089
- </li>
1090
- <li>
1091
- <a
1092
- class="pf-v5-c-dropdown__menu-item"
1093
- href="#"
1094
- >User management</a>
1095
- </li>
1096
- <li>
1097
- <a class="pf-v5-c-dropdown__menu-item" href="#">Logout</a>
1098
- </li>
1099
- </ul>
1100
- </section>
1101
- </div>
1102
349
  </div>
1103
350
  </div>
351
+ <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
352
+ <button
353
+ class="pf-v5-c-menu-toggle pf-m-full-height"
354
+ type="button"
355
+ aria-expanded="false"
356
+ >
357
+ <span class="pf-v5-c-menu-toggle__icon">
358
+ <img
359
+ class="pf-v5-c-avatar"
360
+ alt="Avatar image"
361
+ src="/assets/images/img_avatar-light.svg"
362
+ />
363
+ </span>
364
+ <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
365
+ <span class="pf-v5-c-menu-toggle__controls">
366
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
367
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
368
+ </span>
369
+ </span>
370
+ </button>
371
+ </div>
1104
372
  </div>
1105
373
  </div>
1106
374
  </div>
@@ -3669,800 +2937,68 @@ section: components
3669
2937
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
3670
2938
  >
3671
2939
  <div class="pf-v5-c-toolbar__item">
3672
- <nav
3673
- class="pf-v5-c-app-launcher"
2940
+ <button
2941
+ class="pf-v5-c-menu-toggle pf-m-plain"
2942
+ type="button"
2943
+ aria-expanded="false"
3674
2944
  aria-label="Application launcher"
3675
- id="toolbar-pagination-management-example-masthead-application-launcher"
3676
2945
  >
3677
- <button
3678
- class="pf-v5-c-app-launcher__toggle"
3679
- type="button"
3680
- id="toolbar-pagination-management-example-masthead-application-launcher-button"
3681
- aria-expanded="false"
3682
- aria-label="Application launcher"
3683
- >
3684
- <i class="fas fa-th" aria-hidden="true"></i>
3685
- </button>
3686
- <div
3687
- class="pf-v5-c-app-launcher__menu pf-m-align-right"
3688
- hidden
3689
- >
3690
- <div class="pf-v5-c-app-launcher__menu-search">
3691
- <div class="pf-v5-c-text-input-group">
3692
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
3693
- <span class="pf-v5-c-text-input-group__text">
3694
- <span class="pf-v5-c-text-input-group__icon">
3695
- <i class="fas fa-fw fa-search"></i>
3696
- </span>
3697
- <input
3698
- class="pf-v5-c-text-input-group__text-input"
3699
- type="text"
3700
- placeholder="Filer by name"
3701
- value
3702
- aria-label="Search input"
3703
- />
3704
- </span>
3705
- </div>
3706
- </div>
3707
- </div>
3708
- <section class="pf-v5-c-app-launcher__group">
3709
- <h1 class="pf-v5-c-app-launcher__group-title">Favorites</h1>
3710
- <ul role="list">
3711
- <li
3712
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
3713
- >
3714
- <a class="pf-v5-c-app-launcher__menu-item">
3715
- Link 1
3716
- <span
3717
- class="pf-v5-c-app-launcher__menu-item-external-icon"
3718
- >
3719
- <i
3720
- class="fas fa-external-link-alt"
3721
- aria-hidden="true"
3722
- ></i>
3723
- </span>
3724
- <span
3725
- class="pf-v5-screen-reader"
3726
- >(opens new window)</span>
3727
- </a>
3728
- <button
3729
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
3730
- type="button"
3731
- aria-label="Favorite"
3732
- >
3733
- <i class="fas fa-star" aria-hidden="true"></i>
3734
- </button>
3735
- </li>
3736
- <li
3737
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
3738
- >
3739
- <a class="pf-v5-c-app-launcher__menu-item">
3740
- Link 2
3741
- <span
3742
- class="pf-v5-c-app-launcher__menu-item-external-icon"
3743
- >
3744
- <i
3745
- class="fas fa-external-link-alt"
3746
- aria-hidden="true"
3747
- ></i>
3748
- </span>
3749
- <span
3750
- class="pf-v5-screen-reader"
3751
- >(opens new window)</span>
3752
- </a>
3753
- <button
3754
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
3755
- type="button"
3756
- aria-label="Favorite"
3757
- >
3758
- <i class="fas fa-star" aria-hidden="true"></i>
3759
- </button>
3760
- </li>
3761
- </ul>
3762
- </section>
3763
- <hr class="pf-v5-c-divider" />
3764
- <section class="pf-v5-c-app-launcher__group">
3765
- <h1 class="pf-v5-c-app-launcher__group-title">Group 1</h1>
3766
- <ul role="list">
3767
- <li
3768
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
3769
- >
3770
- <a class="pf-v5-c-app-launcher__menu-item">
3771
- Link 1
3772
- <span
3773
- class="pf-v5-c-app-launcher__menu-item-external-icon"
3774
- >
3775
- <i
3776
- class="fas fa-external-link-alt"
3777
- aria-hidden="true"
3778
- ></i>
3779
- </span>
3780
- <span
3781
- class="pf-v5-screen-reader"
3782
- >(opens new window)</span>
3783
- </a>
3784
- <button
3785
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
3786
- type="button"
3787
- aria-label="Favorite"
3788
- >
3789
- <i class="fas fa-star" aria-hidden="true"></i>
3790
- </button>
3791
- </li>
3792
- <li
3793
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
3794
- >
3795
- <a class="pf-v5-c-app-launcher__menu-item">
3796
- Link 2
3797
- <span
3798
- class="pf-v5-c-app-launcher__menu-item-external-icon"
3799
- >
3800
- <i
3801
- class="fas fa-external-link-alt"
3802
- aria-hidden="true"
3803
- ></i>
3804
- </span>
3805
- <span
3806
- class="pf-v5-screen-reader"
3807
- >(opens new window)</span>
3808
- </a>
3809
- <button
3810
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
3811
- type="button"
3812
- aria-label="Favorite"
3813
- >
3814
- <i class="fas fa-star" aria-hidden="true"></i>
3815
- </button>
3816
- </li>
3817
- </ul>
3818
- </section>
3819
- </div>
3820
- </nav>
2946
+ <i class="fas fa-th" aria-hidden="true"></i>
2947
+ </button>
3821
2948
  </div>
3822
2949
  <div class="pf-v5-c-toolbar__item">
3823
- <div class="pf-v5-c-dropdown">
3824
- <button
3825
- class="pf-v5-c-dropdown__toggle pf-m-plain"
3826
- id="toolbar-pagination-management-example-masthead-settings-button"
3827
- aria-expanded="false"
3828
- type="button"
3829
- aria-label="Settings"
3830
- >
3831
- <i class="fas fa-cog" aria-hidden="true"></i>
3832
- </button>
3833
- <ul
3834
- class="pf-v5-c-dropdown__menu pf-m-align-right"
3835
- aria-labelledby="toolbar-pagination-management-example-masthead-settings-button"
3836
- hidden
3837
- >
3838
- <li>
3839
- <button
3840
- class="pf-v5-c-dropdown__menu-item"
3841
- type="button"
3842
- >Settings</button>
3843
- </li>
3844
- <li>
3845
- <button
3846
- class="pf-v5-c-dropdown__menu-item"
3847
- type="button"
3848
- >Use the beta release</button>
3849
- </li>
3850
- </ul>
3851
- </div>
2950
+ <button
2951
+ class="pf-v5-c-menu-toggle pf-m-plain"
2952
+ type="button"
2953
+ aria-expanded="false"
2954
+ aria-label="Settings"
2955
+ >
2956
+ <i class="fas fa-cog" aria-hidden="true"></i>
2957
+ </button>
3852
2958
  </div>
3853
2959
  <div class="pf-v5-c-toolbar__item">
3854
- <div class="pf-v5-c-dropdown">
3855
- <button
3856
- class="pf-v5-c-dropdown__toggle pf-m-plain"
3857
- id="toolbar-pagination-management-example-masthead-help-button"
3858
- aria-expanded="false"
3859
- type="button"
3860
- aria-label="Help"
3861
- >
3862
- <i class="fas fa-question-circle" aria-hidden="true"></i>
3863
- </button>
3864
- <ul
3865
- class="pf-v5-c-dropdown__menu pf-m-align-right"
3866
- aria-labelledby="toolbar-pagination-management-example-masthead-help-button"
3867
- hidden
3868
- >
3869
- <li>
3870
- <button
3871
- class="pf-v5-c-dropdown__menu-item"
3872
- type="button"
3873
- >Support options</button>
3874
- </li>
3875
- <li>
3876
- <button
3877
- class="pf-v5-c-dropdown__menu-item"
3878
- type="button"
3879
- >Open support case</button>
3880
- </li>
3881
- <li>
3882
- <button
3883
- class="pf-v5-c-dropdown__menu-item"
3884
- type="button"
3885
- >API documentation</button>
3886
- </li>
3887
- </ul>
3888
- </div>
3889
- </div>
3890
- </div>
3891
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
3892
- <div class="pf-v5-c-dropdown">
3893
2960
  <button
3894
2961
  class="pf-v5-c-menu-toggle pf-m-plain"
3895
2962
  type="button"
3896
2963
  aria-expanded="false"
3897
- aria-label="Actions"
2964
+ aria-label="Help"
3898
2965
  >
3899
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2966
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
3900
2967
  </button>
3901
- <div
3902
- class="pf-v5-c-menu pf-m-drilldown pf-m-align-right"
3903
- hidden
3904
- >
3905
- <div class="pf-v5-c-menu__content">
3906
- <section class="pf-v5-c-menu__group pf-m-hidden-on-sm">
3907
- <ul class="pf-v5-c-menu__list" role="menu">
3908
- <li
3909
- class="pf-v5-c-menu__list-item pf-m-disabled"
3910
- role="none"
3911
- >
3912
- <button
3913
- class="pf-v5-c-menu__item"
3914
- type="button"
3915
- disabled
3916
- role="menuitem"
3917
- >
3918
- <span class="pf-v5-c-menu__item-description">
3919
- <div class="pf-v5-u-font-size-sm">Username:</div>
3920
- <div class="pf-v5-u-font-size-md">ned_username</div>
3921
- </span>
3922
- </button>
3923
- </li>
3924
- <li
3925
- class="pf-v5-c-menu__list-item pf-m-disabled"
3926
- role="none"
3927
- >
3928
- <button
3929
- class="pf-v5-c-menu__item"
3930
- type="button"
3931
- disabled
3932
- role="menuitem"
3933
- >
3934
- <span class="pf-v5-c-menu__item-description">
3935
- <div
3936
- class="pf-v5-u-font-size-sm"
3937
- >Account number:</div>
3938
- <div class="pf-v5-u-font-size-md">123456789</div>
3939
- </span>
3940
- </button>
3941
- </li>
3942
- <li class="pf-v5-c-divider" role="separator"></li>
3943
- <li class="pf-v5-c-menu__list-item" role="none">
3944
- <button
3945
- class="pf-v5-c-menu__item"
3946
- type="button"
3947
- role="menuitem"
3948
- >
3949
- <span class="pf-v5-c-menu__item-main">
3950
- <span class="pf-v5-c-menu__item-text">My profile</span>
3951
- </span>
3952
- </button>
3953
- </li>
3954
- <li class="pf-v5-c-menu__list-item" role="none">
3955
- <button
3956
- class="pf-v5-c-menu__item"
3957
- type="button"
3958
- role="menuitem"
3959
- >
3960
- <span class="pf-v5-c-menu__item-main">
3961
- <span
3962
- class="pf-v5-c-menu__item-text"
3963
- >User management</span>
3964
- </span>
3965
- </button>
3966
- </li>
3967
- <li class="pf-v5-c-menu__list-item" role="none">
3968
- <button
3969
- class="pf-v5-c-menu__item"
3970
- type="button"
3971
- role="menuitem"
3972
- >
3973
- <span class="pf-v5-c-menu__item-main">
3974
- <span class="pf-v5-c-menu__item-text">Logout</span>
3975
- </span>
3976
- </button>
3977
- </li>
3978
- </ul>
3979
- </section>
3980
- <hr class="pf-v5-c-divider pf-m-hidden-on-sm" />
3981
- <section class="pf-v5-c-menu__group">
3982
- <ul class="pf-v5-c-menu__list" role="menu">
3983
- <li class="pf-v5-c-menu__list-item" role="none">
3984
- <button
3985
- class="pf-v5-c-menu__item"
3986
- type="button"
3987
- role="menuitem"
3988
- aria-expanded="false"
3989
- >
3990
- <span class="pf-v5-c-menu__item-main">
3991
- <span class="pf-v5-c-menu__item-icon">
3992
- <i
3993
- class="fas fa-fw fa-cog"
3994
- aria-hidden="true"
3995
- ></i>
3996
- </span>
3997
- <span class="pf-v5-c-menu__item-text">Settings</span>
3998
- <span class="pf-v5-c-menu__item-toggle-icon">
3999
- <i class="fas fa-angle-right"></i>
4000
- </span>
4001
- </span>
4002
- </button>
4003
- <div class="pf-v5-c-menu" hidden>
4004
- <div class="pf-v5-c-menu__content">
4005
- <ul class="pf-v5-c-menu__list" role="menu">
4006
- <li
4007
- class="pf-v5-c-menu__list-item pf-m-drill-up"
4008
- role="none"
4009
- >
4010
- <button
4011
- class="pf-v5-c-menu__item"
4012
- type="button"
4013
- role="menuitem"
4014
- >
4015
- <span class="pf-v5-c-menu__item-main">
4016
- <span
4017
- class="pf-v5-c-menu__item-toggle-icon"
4018
- >
4019
- <i class="fas fa-angle-left"></i>
4020
- </span>
4021
- <span class="pf-v5-c-menu__item-icon">
4022
- <i
4023
- class="fas fa-fw fa-cog"
4024
- aria-hidden="true"
4025
- ></i>
4026
- </span>
4027
- <span
4028
- class="pf-v5-c-menu__item-text"
4029
- >Settings</span>
4030
- </span>
4031
- </button>
4032
- </li>
4033
- <li class="pf-v5-c-divider" role="separator"></li>
4034
- <li
4035
- class="pf-v5-c-menu__list-item"
4036
- role="none"
4037
- >
4038
- <a
4039
- class="pf-v5-c-menu__item"
4040
- href="#"
4041
- role="menuitem"
4042
- >
4043
- <span class="pf-v5-c-menu__item-main">
4044
- <span
4045
- class="pf-v5-c-menu__item-text"
4046
- >Customer support</span>
4047
- </span>
4048
- </a>
4049
- </li>
4050
- <li
4051
- class="pf-v5-c-menu__list-item"
4052
- role="none"
4053
- >
4054
- <a
4055
- class="pf-v5-c-menu__item"
4056
- href="#"
4057
- role="menuitem"
4058
- >
4059
- <span class="pf-v5-c-menu__item-main">
4060
- <span
4061
- class="pf-v5-c-menu__item-text"
4062
- >About</span>
4063
- </span>
4064
- </a>
4065
- </li>
4066
- </ul>
4067
- </div>
4068
- </div>
4069
- </li>
4070
-
4071
- <li class="pf-v5-c-menu__list-item" role="none">
4072
- <button
4073
- class="pf-v5-c-menu__item"
4074
- type="button"
4075
- role="menuitem"
4076
- aria-expanded="false"
4077
- >
4078
- <span class="pf-v5-c-menu__item-main">
4079
- <span class="pf-v5-c-menu__item-icon">
4080
- <i
4081
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
4082
- aria-hidden="true"
4083
- ></i>
4084
- </span>
4085
- <span class="pf-v5-c-menu__item-text">Help</span>
4086
- <span class="pf-v5-c-menu__item-toggle-icon">
4087
- <i class="fas fa-angle-right"></i>
4088
- </span>
4089
- </span>
4090
- </button>
4091
- <div class="pf-v5-c-menu" hidden>
4092
- <div class="pf-v5-c-menu__content">
4093
- <ul class="pf-v5-c-menu__list" role="menu">
4094
- <li
4095
- class="pf-v5-c-menu__list-item pf-m-drill-up"
4096
- role="none"
4097
- >
4098
- <button
4099
- class="pf-v5-c-menu__item"
4100
- type="button"
4101
- role="menuitem"
4102
- >
4103
- <span class="pf-v5-c-menu__item-main">
4104
- <span
4105
- class="pf-v5-c-menu__item-toggle-icon"
4106
- >
4107
- <i class="fas fa-angle-left"></i>
4108
- </span>
4109
- <span class="pf-v5-c-menu__item-icon">
4110
- <i
4111
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
4112
- aria-hidden="true"
4113
- ></i>
4114
- </span>
4115
- <span
4116
- class="pf-v5-c-menu__item-text"
4117
- >Help</span>
4118
- </span>
4119
- </button>
4120
- </li>
4121
- <li class="pf-v5-c-divider" role="separator"></li>
4122
- <li
4123
- class="pf-v5-c-menu__list-item"
4124
- role="none"
4125
- >
4126
- <a
4127
- class="pf-v5-c-menu__item"
4128
- href="#"
4129
- role="menuitem"
4130
- >
4131
- <span class="pf-v5-c-menu__item-main">
4132
- <span
4133
- class="pf-v5-c-menu__item-text"
4134
- >Support options</span>
4135
- </span>
4136
- </a>
4137
- </li>
4138
- <li
4139
- class="pf-v5-c-menu__list-item"
4140
- role="none"
4141
- >
4142
- <a
4143
- class="pf-v5-c-menu__item"
4144
- href="#"
4145
- role="menuitem"
4146
- >
4147
- <span class="pf-v5-c-menu__item-main">
4148
- <span
4149
- class="pf-v5-c-menu__item-text"
4150
- >Open support case</span>
4151
- </span>
4152
- </a>
4153
- </li>
4154
- <li
4155
- class="pf-v5-c-menu__list-item"
4156
- role="none"
4157
- >
4158
- <a
4159
- class="pf-v5-c-menu__item"
4160
- href="#"
4161
- role="menuitem"
4162
- >
4163
- <span class="pf-v5-c-menu__item-main">
4164
- <span
4165
- class="pf-v5-c-menu__item-text"
4166
- >API documentation</span>
4167
- </span>
4168
- </a>
4169
- </li>
4170
- </ul>
4171
- </div>
4172
- </div>
4173
- </li>
4174
-
4175
- <li class="pf-v5-c-menu__list-item" role="none">
4176
- <button
4177
- class="pf-v5-c-menu__item"
4178
- type="button"
4179
- role="menuitem"
4180
- >
4181
- <span class="pf-v5-c-menu__item-main">
4182
- <span class="pf-v5-c-menu__item-icon">
4183
- <i class="fas fa-fw fa-th" aria-hidden="true"></i>
4184
- </span>
4185
- <span
4186
- class="pf-v5-c-menu__item-text"
4187
- >Application launcher</span>
4188
- <span class="pf-v5-c-menu__item-toggle-icon">
4189
- <i class="fas fa-angle-right"></i>
4190
- </span>
4191
- </span>
4192
- </button>
4193
- <div class="pf-v5-c-menu" hidden>
4194
- <div class="pf-v5-c-menu__header">
4195
- <button
4196
- class="pf-v5-c-menu__item"
4197
- type="button"
4198
- role="menuitem"
4199
- >
4200
- <span class="pf-v5-c-menu__item-main">
4201
- <span
4202
- class="pf-v5-c-menu__item-toggle-icon"
4203
- >
4204
- <i class="fas fa-angle-left"></i>
4205
- </span>
4206
- <span class="pf-v5-c-menu__item-icon">
4207
- <i
4208
- class="fas fa-fw fa-th"
4209
- aria-hidden="true"
4210
- ></i>
4211
- </span>
4212
- <span
4213
- class="pf-v5-c-menu__item-text"
4214
- >Application launcher</span>
4215
- </span>
4216
- </button>
4217
- </div>
4218
- <div class="pf-v5-c-menu__search">
4219
- <div class="pf-v5-c-menu__search-input">
4220
- <div class="pf-v5-c-text-input-group">
4221
- <div
4222
- class="pf-v5-c-text-input-group__main pf-m-icon"
4223
- >
4224
- <span
4225
- class="pf-v5-c-text-input-group__text"
4226
- >
4227
- <span
4228
- class="pf-v5-c-text-input-group__icon"
4229
- >
4230
- <i class="fas fa-fw fa-search"></i>
4231
- </span>
4232
- <input
4233
- class="pf-v5-c-text-input-group__text-input"
4234
- type="text"
4235
- placeholder="Search"
4236
- value
4237
- aria-label="Search input"
4238
- />
4239
- </span>
4240
- </div>
4241
- </div>
4242
- </div>
4243
- </div>
4244
- <hr class="pf-v5-c-divider" />
4245
- <section class="pf-v5-c-menu__group">
4246
- <h1 class="pf-v5-c-menu__group-title">Favorites</h1>
4247
- <ul class="pf-v5-c-menu__list" role="menu">
4248
- <li
4249
- class="pf-v5-c-menu__list-item"
4250
- role="none"
4251
- >
4252
- <a
4253
- class="pf-v5-c-menu__item"
4254
- href="#"
4255
- role="menuitem"
4256
- >
4257
- <span class="pf-v5-c-menu__item-main">
4258
- <span
4259
- class="pf-v5-c-menu__item-text"
4260
- >Link 1</span>
4261
- </span>
4262
- </a>
4263
- <button
4264
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
4265
- type="button"
4266
- aria-label="Starred"
4267
- >
4268
- <span
4269
- class="pf-v5-c-menu__item-action-icon"
4270
- >
4271
- <i
4272
- class="fas fa-star"
4273
- aria-hidden="true"
4274
- ></i>
4275
- </span>
4276
- </button>
4277
- </li>
4278
- <li
4279
- class="pf-v5-c-menu__list-item"
4280
- role="none"
4281
- >
4282
- <a
4283
- class="pf-v5-c-menu__item"
4284
- href="#"
4285
- role="menuitem"
4286
- target="_blank"
4287
- >
4288
- <span class="pf-v5-c-menu__item-main">
4289
- <span
4290
- class="pf-v5-c-menu__item-text"
4291
- >Link 2</span>
4292
- <span
4293
- class="pf-v5-c-menu__item-external-icon"
4294
- >
4295
- <i
4296
- class="fas fa-external-link-alt"
4297
- aria-hidden="true"
4298
- ></i>
4299
- </span>
4300
- <span
4301
- class="pf-v5-screen-reader"
4302
- >(opens new window)</span>
4303
- </span>
4304
- </a>
4305
- <button
4306
- class="pf-v5-c-menu__item-action pf-m-favorite"
4307
- type="button"
4308
- aria-label="Not starred"
4309
- >
4310
- <span
4311
- class="pf-v5-c-menu__item-action-icon"
4312
- >
4313
- <i
4314
- class="fas fa-star"
4315
- aria-hidden="true"
4316
- ></i>
4317
- </span>
4318
- </button>
4319
- </li>
4320
- </ul>
4321
- </section>
4322
- <hr class="pf-v5-c-divider" />
4323
- <section class="pf-v5-c-menu__group">
4324
- <h1 class="pf-v5-c-menu__group-title">Group 1</h1>
4325
- <ul class="pf-v5-c-menu__list" role="menu">
4326
- <li
4327
- class="pf-v5-c-menu__list-item"
4328
- role="none"
4329
- >
4330
- <a
4331
- class="pf-v5-c-menu__item"
4332
- href="#"
4333
- role="menuitem"
4334
- >
4335
- <span class="pf-v5-c-menu__item-main">
4336
- <span
4337
- class="pf-v5-c-menu__item-text"
4338
- >Link 1</span>
4339
- </span>
4340
- </a>
4341
- <button
4342
- class="pf-v5-c-menu__item-action pf-m-favorite"
4343
- type="button"
4344
- aria-label="Not starred"
4345
- >
4346
- <span
4347
- class="pf-v5-c-menu__item-action-icon"
4348
- >
4349
- <i
4350
- class="fas fa-star"
4351
- aria-hidden="true"
4352
- ></i>
4353
- </span>
4354
- </button>
4355
- </li>
4356
- <li
4357
- class="pf-v5-c-menu__list-item"
4358
- role="none"
4359
- >
4360
- <a
4361
- class="pf-v5-c-menu__item"
4362
- href="#"
4363
- role="menuitem"
4364
- target="_blank"
4365
- >
4366
- <span class="pf-v5-c-menu__item-main">
4367
- <span
4368
- class="pf-v5-c-menu__item-text"
4369
- >Link 2</span>
4370
- <span
4371
- class="pf-v5-c-menu__item-external-icon"
4372
- >
4373
- <i
4374
- class="fas fa-external-link-alt"
4375
- aria-hidden="true"
4376
- ></i>
4377
- </span>
4378
- <span
4379
- class="pf-v5-screen-reader"
4380
- >(opens new window)</span>
4381
- </span>
4382
- </a>
4383
- <button
4384
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
4385
- type="button"
4386
- aria-label="Starred"
4387
- >
4388
- <span
4389
- class="pf-v5-c-menu__item-action-icon"
4390
- >
4391
- <i
4392
- class="fas fa-star"
4393
- aria-hidden="true"
4394
- ></i>
4395
- </span>
4396
- </button>
4397
- </li>
4398
- </ul>
4399
- </section>
4400
- </div>
4401
- </li>
4402
- </ul>
4403
- </section>
4404
- </div>
4405
- </div>
4406
2968
  </div>
4407
2969
  </div>
4408
- </div>
4409
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
4410
- <div
4411
- class="pf-v5-c-dropdown pf-m-full-height"
4412
- style="--pf-v5-c-dropdown--MaxWidth: 20ch;"
4413
- >
2970
+ <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
4414
2971
  <button
4415
- class="pf-v5-c-dropdown__toggle"
4416
- id="toolbar-pagination-management-example-masthead-profile-button"
4417
- aria-expanded="false"
2972
+ class="pf-v5-c-menu-toggle pf-m-plain"
4418
2973
  type="button"
2974
+ aria-expanded="false"
2975
+ aria-label="Actions"
4419
2976
  >
4420
- <span class="pf-v5-c-dropdown__toggle-image">
4421
- <img
4422
- class="pf-v5-c-avatar"
4423
- alt="Avatar image"
4424
- src="/assets/images/img_avatar-light.svg"
4425
- />
4426
- </span>
4427
- <span class="pf-v5-c-dropdown__toggle-text">Ned Username</span>
4428
- <span class="pf-v5-c-dropdown__toggle-icon">
4429
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4430
- </span>
2977
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4431
2978
  </button>
4432
- <div class="pf-v5-c-dropdown__menu" hidden>
4433
- <section class="pf-v5-c-dropdown__group">
4434
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
4435
- <div class="pf-v5-u-font-size-sm">Account number:</div>
4436
- <div>123456789</div>
4437
- </div>
4438
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
4439
- <div class="pf-v5-u-font-size-sm">Username:</div>
4440
- <div>mshaksho@redhat.com</div>
4441
- </div>
4442
- </section>
4443
- <hr class="pf-v5-c-divider" />
4444
- <section class="pf-v5-c-dropdown__group">
4445
- <ul>
4446
- <li>
4447
- <a
4448
- class="pf-v5-c-dropdown__menu-item"
4449
- href="#"
4450
- >My profile</a>
4451
- </li>
4452
- <li>
4453
- <a
4454
- class="pf-v5-c-dropdown__menu-item"
4455
- href="#"
4456
- >User management</a>
4457
- </li>
4458
- <li>
4459
- <a class="pf-v5-c-dropdown__menu-item" href="#">Logout</a>
4460
- </li>
4461
- </ul>
4462
- </section>
4463
- </div>
4464
2979
  </div>
4465
2980
  </div>
2981
+ <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2982
+ <button
2983
+ class="pf-v5-c-menu-toggle pf-m-full-height"
2984
+ type="button"
2985
+ aria-expanded="false"
2986
+ >
2987
+ <span class="pf-v5-c-menu-toggle__icon">
2988
+ <img
2989
+ class="pf-v5-c-avatar"
2990
+ alt="Avatar image"
2991
+ src="/assets/images/img_avatar-light.svg"
2992
+ />
2993
+ </span>
2994
+ <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
2995
+ <span class="pf-v5-c-menu-toggle__controls">
2996
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2997
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2998
+ </span>
2999
+ </span>
3000
+ </button>
3001
+ </div>
4466
3002
  </div>
4467
3003
  </div>
4468
3004
  </div>