@patternfly/patternfly 4.210.2 → 4.212.1

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 (44) hide show
  1. package/components/Card/card.css +1 -0
  2. package/components/Card/card.scss +1 -0
  3. package/components/LogViewer/log-viewer.css +15 -8
  4. package/components/LogViewer/log-viewer.scss +16 -8
  5. package/components/Masthead/masthead.css +1 -1
  6. package/components/Masthead/masthead.scss +1 -1
  7. package/components/NotificationBadge/notification-badge.css +13 -1
  8. package/components/NotificationBadge/notification-badge.scss +13 -1
  9. package/components/NotificationBadge/themes/dark/notification-badge.scss +2 -0
  10. package/components/Page/page.css +1 -0
  11. package/components/Page/page.scss +1 -0
  12. package/docs/components/Dropdown/examples/Dropdown.md +2 -2
  13. package/docs/components/LogViewer/examples/LogViewer.md +553 -1
  14. package/docs/components/NotificationBadge/examples/NotificationBadge.md +81 -24
  15. package/docs/components/Tabs/examples/Tabs.md +866 -139
  16. package/docs/components/TreeView/examples/TreeView.md +181 -130
  17. package/docs/demos/AboutModal/examples/AboutModal.md +1 -12
  18. package/docs/demos/Alert/examples/Alert.md +3 -36
  19. package/docs/demos/BackToTop/examples/BackToTop.md +1 -12
  20. package/docs/demos/Banner/examples/Banner.md +2 -24
  21. package/docs/demos/Card/examples/Card.md +15 -3
  22. package/docs/demos/CardView/examples/CardView.md +1 -12
  23. package/docs/demos/ContextSelector/examples/ContextSelector.md +3 -36
  24. package/docs/demos/Dashboard/examples/Dashboard.md +1 -12
  25. package/docs/demos/DataList/examples/DataList.md +4 -48
  26. package/docs/demos/DescriptionList/examples/DescriptionList.md +5 -36
  27. package/docs/demos/Drawer/examples/Drawer.md +7 -60
  28. package/docs/demos/JumpLinks/examples/JumpLinks.md +6 -72
  29. package/docs/demos/Masthead/examples/Masthead.md +2 -24
  30. package/docs/demos/Modal/examples/Modal.md +6 -72
  31. package/docs/demos/Nav/examples/Nav.md +8 -96
  32. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +30 -23
  33. package/docs/demos/Page/examples/Page.md +9 -108
  34. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +19 -85
  35. package/docs/demos/Skeleton/examples/Skeleton.md +1 -12
  36. package/docs/demos/Table/examples/Table.md +14 -168
  37. package/docs/demos/Tabs/examples/Tabs.md +56 -96
  38. package/docs/demos/Toolbar/examples/Toolbar.md +1 -12
  39. package/docs/demos/Wizard/examples/Wizard.md +8 -96
  40. package/package.json +4 -4
  41. package/patternfly-no-reset.css +31 -10
  42. package/patternfly.css +31 -10
  43. package/patternfly.min.css +1 -1
  44. package/patternfly.min.css.map +1 -1
package/docs/components/TreeView/examples/TreeView.md CHANGED
@@ -536,14 +536,14 @@ beta: true
536
536
  <label
537
537
  class="pf-c-tree-view__node pf-m-selectable"
538
538
  tabindex="0"
539
- for="check-1"
539
+ for="check-tree-view-checkboxes-1"
540
540
  >
541
541
  <span class="pf-c-tree-view__node-container">
542
542
  <button
543
543
  class="pf-c-tree-view__node-toggle"
544
- id="toggle-1"
544
+ id="toggle-tree-view-checkboxes-1"
545
545
  aria-label="Toggle"
546
- aria-labelledby="toggle-1 text-1"
546
+ aria-labelledby="toggle-tree-view-checkboxes-1 text-tree-view-checkboxes-1"
547
547
  >
548
548
  <span class="pf-c-tree-view__node-toggle-icon">
549
549
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -554,15 +554,15 @@ beta: true
554
554
  <input
555
555
  class="pf-c-check__input"
556
556
  type="checkbox"
557
- id="check-1"
557
+ id="check-tree-view-checkboxes-1"
558
558
  aria-label="Select"
559
- aria-labelledby="check-1 text-1"
559
+ aria-labelledby="check-tree-view-checkboxes-1 text-tree-view-checkboxes-1"
560
560
  />
561
561
  </div>
562
562
  </span>
563
563
  <span
564
564
  class="pf-c-tree-view__node-text"
565
- id="text-1"
565
+ id="text-tree-view-checkboxes-1"
566
566
  >Application launcher</span>
567
567
  </span>
568
568
  </label>
@@ -578,14 +578,14 @@ beta: true
578
578
  <label
579
579
  class="pf-c-tree-view__node pf-m-selectable"
580
580
  tabindex="0"
581
- for="check-2"
581
+ for="check-tree-view-checkboxes-2"
582
582
  >
583
583
  <span class="pf-c-tree-view__node-container">
584
584
  <button
585
585
  class="pf-c-tree-view__node-toggle"
586
- id="toggle-2"
586
+ id="toggle-tree-view-checkboxes-2"
587
587
  aria-label="Toggle"
588
- aria-labelledby="toggle-2 text-2"
588
+ aria-labelledby="toggle-tree-view-checkboxes-2 text-tree-view-checkboxes-2"
589
589
  >
590
590
  <span class="pf-c-tree-view__node-toggle-icon">
591
591
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -597,15 +597,15 @@ beta: true
597
597
  class="pf-c-check__input"
598
598
  type="checkbox"
599
599
  checked
600
- id="check-2"
600
+ id="check-tree-view-checkboxes-2"
601
601
  aria-label="Select"
602
- aria-labelledby="check-2 text-2"
602
+ aria-labelledby="check-tree-view-checkboxes-2 text-tree-view-checkboxes-2"
603
603
  />
604
604
  </div>
605
605
  </span>
606
606
  <span
607
607
  class="pf-c-tree-view__node-text"
608
- id="text-2"
608
+ id="text-tree-view-checkboxes-2"
609
609
  >Application 1</span>
610
610
  </span>
611
611
  </label>
@@ -613,7 +613,11 @@ beta: true
613
613
  <ul class="pf-c-tree-view__list" role="group">
614
614
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
615
615
  <div class="pf-c-tree-view__content">
616
- <label class="pf-c-tree-view__node" tabindex="0" for="check-3">
616
+ <label
617
+ class="pf-c-tree-view__node"
618
+ tabindex="0"
619
+ for="check-tree-view-checkboxes-3"
620
+ >
617
621
  <span class="pf-c-tree-view__node-container">
618
622
  <span class="pf-c-tree-view__node-check">
619
623
  <div class="pf-c-check pf-m-standalone">
@@ -621,20 +625,27 @@ beta: true
621
625
  class="pf-c-check__input"
622
626
  type="checkbox"
623
627
  checked
624
- id="check-3"
628
+ id="check-tree-view-checkboxes-3"
625
629
  aria-label="Select"
626
- aria-labelledby="check-3 text-3"
630
+ aria-labelledby="check-tree-view-checkboxes-3 text-tree-view-checkboxes-3"
627
631
  />
628
632
  </div>
629
633
  </span>
630
- <span class="pf-c-tree-view__node-text" id="text-3">Settings</span>
634
+ <span
635
+ class="pf-c-tree-view__node-text"
636
+ id="text-tree-view-checkboxes-3"
637
+ >Settings</span>
631
638
  </span>
632
639
  </label>
633
640
  </div>
634
641
  </li>
635
642
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
636
643
  <div class="pf-c-tree-view__content">
637
- <label class="pf-c-tree-view__node" tabindex="0" for="check-4">
644
+ <label
645
+ class="pf-c-tree-view__node"
646
+ tabindex="0"
647
+ for="check-tree-view-checkboxes-4"
648
+ >
638
649
  <span class="pf-c-tree-view__node-container">
639
650
  <span class="pf-c-tree-view__node-check">
640
651
  <div class="pf-c-check pf-m-standalone">
@@ -642,13 +653,16 @@ beta: true
642
653
  class="pf-c-check__input"
643
654
  type="checkbox"
644
655
  checked
645
- id="check-4"
656
+ id="check-tree-view-checkboxes-4"
646
657
  aria-label="Select"
647
- aria-labelledby="check-4 text-4"
658
+ aria-labelledby="check-tree-view-checkboxes-4 text-tree-view-checkboxes-4"
648
659
  />
649
660
  </div>
650
661
  </span>
651
- <span class="pf-c-tree-view__node-text" id="text-4">Loader</span>
662
+ <span
663
+ class="pf-c-tree-view__node-text"
664
+ id="text-tree-view-checkboxes-4"
665
+ >Loader</span>
652
666
  </span>
653
667
  </label>
654
668
  </div>
@@ -663,14 +677,14 @@ beta: true
663
677
  <label
664
678
  class="pf-c-tree-view__node pf-m-selectable"
665
679
  tabindex="0"
666
- for="check-5"
680
+ for="check-tree-view-checkboxes-5"
667
681
  >
668
682
  <span class="pf-c-tree-view__node-container">
669
683
  <button
670
684
  class="pf-c-tree-view__node-toggle"
671
- id="toggle-5"
685
+ id="toggle-tree-view-checkboxes-5"
672
686
  aria-label="Toggle"
673
- aria-labelledby="toggle-5 text-5"
687
+ aria-labelledby="toggle-tree-view-checkboxes-5 text-tree-view-checkboxes-5"
674
688
  >
675
689
  <span class="pf-c-tree-view__node-toggle-icon">
676
690
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -682,13 +696,16 @@ beta: true
682
696
  class="pf-c-check__input"
683
697
  type="checkbox"
684
698
  checked
685
- id="check-5"
699
+ id="check-tree-view-checkboxes-5"
686
700
  aria-label="Select"
687
- aria-labelledby="check-5 text-5"
701
+ aria-labelledby="check-tree-view-checkboxes-5 text-tree-view-checkboxes-5"
688
702
  />
689
703
  </div>
690
704
  </span>
691
- <span class="pf-c-tree-view__node-text" id="text-5">Loader</span>
705
+ <span
706
+ class="pf-c-tree-view__node-text"
707
+ id="text-tree-view-checkboxes-5"
708
+ >Loader</span>
692
709
  </span>
693
710
  </label>
694
711
  </div>
@@ -705,14 +722,14 @@ beta: true
705
722
  <label
706
723
  class="pf-c-tree-view__node pf-m-selectable"
707
724
  tabindex="0"
708
- for="check-6"
725
+ for="check-tree-view-checkboxes-6"
709
726
  >
710
727
  <span class="pf-c-tree-view__node-container">
711
728
  <button
712
729
  class="pf-c-tree-view__node-toggle"
713
- id="toggle-6"
730
+ id="toggle-tree-view-checkboxes-6"
714
731
  aria-label="Toggle"
715
- aria-labelledby="toggle-6 text-6"
732
+ aria-labelledby="toggle-tree-view-checkboxes-6 text-tree-view-checkboxes-6"
716
733
  >
717
734
  <span class="pf-c-tree-view__node-toggle-icon">
718
735
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -723,15 +740,15 @@ beta: true
723
740
  <input
724
741
  class="pf-c-check__input"
725
742
  type="checkbox"
726
- id="check-6"
743
+ id="check-tree-view-checkboxes-6"
727
744
  aria-label="Select"
728
- aria-labelledby="check-6 text-6"
745
+ aria-labelledby="check-tree-view-checkboxes-6 text-tree-view-checkboxes-6"
729
746
  />
730
747
  </div>
731
748
  </span>
732
749
  <span
733
750
  class="pf-c-tree-view__node-text"
734
- id="text-6"
751
+ id="text-tree-view-checkboxes-6"
735
752
  >Application 2</span>
736
753
  </span>
737
754
  </label>
@@ -747,14 +764,14 @@ beta: true
747
764
  <label
748
765
  class="pf-c-tree-view__node pf-m-selectable"
749
766
  tabindex="0"
750
- for="check-7"
767
+ for="check-tree-view-checkboxes-7"
751
768
  >
752
769
  <span class="pf-c-tree-view__node-container">
753
770
  <button
754
771
  class="pf-c-tree-view__node-toggle"
755
- id="toggle-7"
772
+ id="toggle-tree-view-checkboxes-7"
756
773
  aria-label="Toggle"
757
- aria-labelledby="toggle-7 text-7"
774
+ aria-labelledby="toggle-tree-view-checkboxes-7 text-tree-view-checkboxes-7"
758
775
  >
759
776
  <span class="pf-c-tree-view__node-toggle-icon">
760
777
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -765,33 +782,43 @@ beta: true
765
782
  <input
766
783
  class="pf-c-check__input"
767
784
  type="checkbox"
768
- id="check-7"
785
+ id="check-tree-view-checkboxes-7"
769
786
  aria-label="Select"
770
- aria-labelledby="check-7 text-7"
787
+ aria-labelledby="check-tree-view-checkboxes-7 text-tree-view-checkboxes-7"
771
788
  />
772
789
  </div>
773
790
  </span>
774
- <span class="pf-c-tree-view__node-text" id="text-7">Settings</span>
791
+ <span
792
+ class="pf-c-tree-view__node-text"
793
+ id="text-tree-view-checkboxes-7"
794
+ >Settings</span>
775
795
  </span>
776
796
  </label>
777
797
  </div>
778
798
  </li>
779
799
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
780
800
  <div class="pf-c-tree-view__content">
781
- <label class="pf-c-tree-view__node" tabindex="0" for="check-8">
801
+ <label
802
+ class="pf-c-tree-view__node"
803
+ tabindex="0"
804
+ for="check-tree-view-checkboxes-8"
805
+ >
782
806
  <span class="pf-c-tree-view__node-container">
783
807
  <span class="pf-c-tree-view__node-check">
784
808
  <div class="pf-c-check pf-m-standalone">
785
809
  <input
786
810
  class="pf-c-check__input"
787
811
  type="checkbox"
788
- id="check-8"
812
+ id="check-tree-view-checkboxes-8"
789
813
  aria-label="Select"
790
- aria-labelledby="check-8 text-8"
814
+ aria-labelledby="check-tree-view-checkboxes-8 text-tree-view-checkboxes-8"
791
815
  />
792
816
  </div>
793
817
  </span>
794
- <span class="pf-c-tree-view__node-text" id="text-8">Settings</span>
818
+ <span
819
+ class="pf-c-tree-view__node-text"
820
+ id="text-tree-view-checkboxes-8"
821
+ >Settings</span>
795
822
  </span>
796
823
  </label>
797
824
  </div>
@@ -806,14 +833,14 @@ beta: true
806
833
  <label
807
834
  class="pf-c-tree-view__node pf-m-selectable"
808
835
  tabindex="0"
809
- for="check-9"
836
+ for="check-tree-view-checkboxes-9"
810
837
  >
811
838
  <span class="pf-c-tree-view__node-container">
812
839
  <button
813
840
  class="pf-c-tree-view__node-toggle"
814
- id="toggle-9"
841
+ id="toggle-tree-view-checkboxes-9"
815
842
  aria-label="Toggle"
816
- aria-labelledby="toggle-9 text-9"
843
+ aria-labelledby="toggle-tree-view-checkboxes-9 text-tree-view-checkboxes-9"
817
844
  >
818
845
  <span class="pf-c-tree-view__node-toggle-icon">
819
846
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -824,13 +851,16 @@ beta: true
824
851
  <input
825
852
  class="pf-c-check__input"
826
853
  type="checkbox"
827
- id="check-9"
854
+ id="check-tree-view-checkboxes-9"
828
855
  aria-label="Select"
829
- aria-labelledby="check-9 text-9"
856
+ aria-labelledby="check-tree-view-checkboxes-9 text-tree-view-checkboxes-9"
830
857
  />
831
858
  </div>
832
859
  </span>
833
- <span class="pf-c-tree-view__node-text" id="text-9">Current</span>
860
+ <span
861
+ class="pf-c-tree-view__node-text"
862
+ id="text-tree-view-checkboxes-9"
863
+ >Current</span>
834
864
  </span>
835
865
  </label>
836
866
  </div>
@@ -845,14 +875,14 @@ beta: true
845
875
  <label
846
876
  class="pf-c-tree-view__node pf-m-selectable"
847
877
  tabindex="0"
848
- for="check-10"
878
+ for="check-tree-view-checkboxes-10"
849
879
  >
850
880
  <span class="pf-c-tree-view__node-container">
851
881
  <button
852
882
  class="pf-c-tree-view__node-toggle"
853
- id="toggle-10"
883
+ id="toggle-tree-view-checkboxes-10"
854
884
  aria-label="Toggle"
855
- aria-labelledby="toggle-10 text-10"
885
+ aria-labelledby="toggle-tree-view-checkboxes-10 text-tree-view-checkboxes-10"
856
886
  >
857
887
  <span class="pf-c-tree-view__node-toggle-icon">
858
888
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -863,15 +893,15 @@ beta: true
863
893
  <input
864
894
  class="pf-c-check__input"
865
895
  type="checkbox"
866
- id="check-10"
896
+ id="check-tree-view-checkboxes-10"
867
897
  aria-label="Select"
868
- aria-labelledby="check-10 text-10"
898
+ aria-labelledby="check-tree-view-checkboxes-10 text-tree-view-checkboxes-10"
869
899
  />
870
900
  </div>
871
901
  </span>
872
902
  <span
873
903
  class="pf-c-tree-view__node-text"
874
- id="text-10"
904
+ id="text-tree-view-checkboxes-10"
875
905
  >Loader app 1</span>
876
906
  </span>
877
907
  </label>
@@ -886,7 +916,7 @@ beta: true
886
916
  <label
887
917
  class="pf-c-tree-view__node"
888
918
  tabindex="0"
889
- for="check-11"
919
+ for="check-tree-view-checkboxes-11"
890
920
  >
891
921
  <span class="pf-c-tree-view__node-container">
892
922
  <span class="pf-c-tree-view__node-check">
@@ -895,15 +925,15 @@ beta: true
895
925
  class="pf-c-check__input"
896
926
  type="checkbox"
897
927
  checked
898
- id="check-11"
928
+ id="check-tree-view-checkboxes-11"
899
929
  aria-label="Select"
900
- aria-labelledby="check-11 text-11"
930
+ aria-labelledby="check-tree-view-checkboxes-11 text-tree-view-checkboxes-11"
901
931
  />
902
932
  </div>
903
933
  </span>
904
934
  <span
905
935
  class="pf-c-tree-view__node-text"
906
- id="text-11"
936
+ id="text-tree-view-checkboxes-11"
907
937
  >Loader app 2</span>
908
938
  </span>
909
939
  </label>
@@ -918,7 +948,7 @@ beta: true
918
948
  <label
919
949
  class="pf-c-tree-view__node"
920
950
  tabindex="0"
921
- for="check-12"
951
+ for="check-tree-view-checkboxes-12"
922
952
  >
923
953
  <span class="pf-c-tree-view__node-container">
924
954
  <span class="pf-c-tree-view__node-check">
@@ -926,15 +956,15 @@ beta: true
926
956
  <input
927
957
  class="pf-c-check__input"
928
958
  type="checkbox"
929
- id="check-12"
959
+ id="check-tree-view-checkboxes-12"
930
960
  aria-label="Select"
931
- aria-labelledby="check-12 text-12"
961
+ aria-labelledby="check-tree-view-checkboxes-12 text-tree-view-checkboxes-12"
932
962
  />
933
963
  </div>
934
964
  </span>
935
965
  <span
936
966
  class="pf-c-tree-view__node-text"
937
- id="text-12"
967
+ id="text-tree-view-checkboxes-12"
938
968
  >Loader app 3</span>
939
969
  </span>
940
970
  </label>
@@ -956,14 +986,14 @@ beta: true
956
986
  <label
957
987
  class="pf-c-tree-view__node pf-m-selectable"
958
988
  tabindex="0"
959
- for="check-13"
989
+ for="check-tree-view-checkboxes-13"
960
990
  >
961
991
  <span class="pf-c-tree-view__node-container">
962
992
  <button
963
993
  class="pf-c-tree-view__node-toggle"
964
- id="toggle-13"
994
+ id="toggle-tree-view-checkboxes-13"
965
995
  aria-label="Toggle"
966
- aria-labelledby="toggle-13 text-13"
996
+ aria-labelledby="toggle-tree-view-checkboxes-13 text-tree-view-checkboxes-13"
967
997
  >
968
998
  <span class="pf-c-tree-view__node-toggle-icon">
969
999
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -974,13 +1004,16 @@ beta: true
974
1004
  <input
975
1005
  class="pf-c-check__input"
976
1006
  type="checkbox"
977
- id="check-13"
1007
+ id="check-tree-view-checkboxes-13"
978
1008
  aria-label="Select"
979
- aria-labelledby="check-13 text-13"
1009
+ aria-labelledby="check-tree-view-checkboxes-13 text-tree-view-checkboxes-13"
980
1010
  />
981
1011
  </div>
982
1012
  </span>
983
- <span class="pf-c-tree-view__node-text" id="text-13">Cost management</span>
1013
+ <span
1014
+ class="pf-c-tree-view__node-text"
1015
+ id="text-tree-view-checkboxes-13"
1016
+ >Cost management</span>
984
1017
  </span>
985
1018
  </label>
986
1019
  </div>
@@ -995,14 +1028,14 @@ beta: true
995
1028
  <label
996
1029
  class="pf-c-tree-view__node pf-m-selectable"
997
1030
  tabindex="0"
998
- for="check-14"
1031
+ for="check-tree-view-checkboxes-14"
999
1032
  >
1000
1033
  <span class="pf-c-tree-view__node-container">
1001
1034
  <button
1002
1035
  class="pf-c-tree-view__node-toggle"
1003
- id="toggle-14"
1036
+ id="toggle-tree-view-checkboxes-14"
1004
1037
  aria-label="Toggle"
1005
- aria-labelledby="toggle-14 text-14"
1038
+ aria-labelledby="toggle-tree-view-checkboxes-14 text-tree-view-checkboxes-14"
1006
1039
  >
1007
1040
  <span class="pf-c-tree-view__node-toggle-icon">
1008
1041
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -1013,13 +1046,16 @@ beta: true
1013
1046
  <input
1014
1047
  class="pf-c-check__input"
1015
1048
  type="checkbox"
1016
- id="check-14"
1049
+ id="check-tree-view-checkboxes-14"
1017
1050
  aria-label="Select"
1018
- aria-labelledby="check-14 text-14"
1051
+ aria-labelledby="check-tree-view-checkboxes-14 text-tree-view-checkboxes-14"
1019
1052
  />
1020
1053
  </div>
1021
1054
  </span>
1022
- <span class="pf-c-tree-view__node-text" id="text-14">Sources</span>
1055
+ <span
1056
+ class="pf-c-tree-view__node-text"
1057
+ id="text-tree-view-checkboxes-14"
1058
+ >Sources</span>
1023
1059
  </span>
1024
1060
  </label>
1025
1061
  </div>
@@ -1034,14 +1070,14 @@ beta: true
1034
1070
  <label
1035
1071
  class="pf-c-tree-view__node pf-m-selectable"
1036
1072
  tabindex="0"
1037
- for="check-15"
1073
+ for="check-tree-view-checkboxes-15"
1038
1074
  >
1039
1075
  <span class="pf-c-tree-view__node-container">
1040
1076
  <button
1041
1077
  class="pf-c-tree-view__node-toggle"
1042
- id="toggle-15"
1078
+ id="toggle-tree-view-checkboxes-15"
1043
1079
  aria-label="Toggle"
1044
- aria-labelledby="toggle-15 text-15"
1080
+ aria-labelledby="toggle-tree-view-checkboxes-15 text-tree-view-checkboxes-15"
1045
1081
  >
1046
1082
  <span class="pf-c-tree-view__node-toggle-icon">
1047
1083
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -1053,15 +1089,15 @@ beta: true
1053
1089
  class="pf-c-check__input"
1054
1090
  type="checkbox"
1055
1091
  checked
1056
- id="check-15"
1092
+ id="check-tree-view-checkboxes-15"
1057
1093
  aria-label="Select"
1058
- aria-labelledby="check-15 text-15"
1094
+ aria-labelledby="check-tree-view-checkboxes-15 text-tree-view-checkboxes-15"
1059
1095
  />
1060
1096
  </div>
1061
1097
  </span>
1062
1098
  <span
1063
1099
  class="pf-c-tree-view__node-text"
1064
- id="text-15"
1100
+ id="text-tree-view-checkboxes-15"
1065
1101
  >This is a really really really long folder name that overflows from the width of the container.</span>
1066
1102
  </span>
1067
1103
  </label>
@@ -2176,16 +2212,16 @@ beta: true
2176
2212
  <div
2177
2213
  class="pf-c-tree-view__node pf-m-selectable"
2178
2214
  tabindex="0"
2179
- id="node-1"
2215
+ id="node-tree-view-selectable-expandable-1"
2180
2216
  aria-label="Select"
2181
- aria-labelledby="node-1 text-1"
2217
+ aria-labelledby="node-tree-view-selectable-expandable-1 text-tree-view-selectable-expandable-1"
2182
2218
  >
2183
2219
  <span class="pf-c-tree-view__node-container">
2184
2220
  <button
2185
2221
  class="pf-c-tree-view__node-toggle"
2186
- id="toggle-1"
2222
+ id="toggle-tree-view-selectable-expandable-1"
2187
2223
  aria-label="Toggle"
2188
- aria-labelledby="toggle-1 text-1"
2224
+ aria-labelledby="toggle-tree-view-selectable-expandable-1 text-tree-view-selectable-expandable-1"
2189
2225
  >
2190
2226
  <span class="pf-c-tree-view__node-toggle-icon">
2191
2227
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -2193,7 +2229,7 @@ beta: true
2193
2229
  </button>
2194
2230
  <span
2195
2231
  class="pf-c-tree-view__node-text"
2196
- id="text-1"
2232
+ id="text-tree-view-selectable-expandable-1"
2197
2233
  >Application launcher</span>
2198
2234
  </span>
2199
2235
  </div>
@@ -2209,16 +2245,16 @@ beta: true
2209
2245
  <div
2210
2246
  class="pf-c-tree-view__node pf-m-selectable"
2211
2247
  tabindex="0"
2212
- id="node-2"
2248
+ id="node-tree-view-selectable-expandable-2"
2213
2249
  aria-label="Select"
2214
- aria-labelledby="node-2 text-2"
2250
+ aria-labelledby="node-tree-view-selectable-expandable-2 text-tree-view-selectable-expandable-2"
2215
2251
  >
2216
2252
  <span class="pf-c-tree-view__node-container">
2217
2253
  <button
2218
2254
  class="pf-c-tree-view__node-toggle"
2219
- id="toggle-2"
2255
+ id="toggle-tree-view-selectable-expandable-2"
2220
2256
  aria-label="Toggle"
2221
- aria-labelledby="toggle-2 text-2"
2257
+ aria-labelledby="toggle-tree-view-selectable-expandable-2 text-tree-view-selectable-expandable-2"
2222
2258
  >
2223
2259
  <span class="pf-c-tree-view__node-toggle-icon">
2224
2260
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -2226,7 +2262,7 @@ beta: true
2226
2262
  </button>
2227
2263
  <span
2228
2264
  class="pf-c-tree-view__node-text"
2229
- id="text-2"
2265
+ id="text-tree-view-selectable-expandable-2"
2230
2266
  >Application 1</span>
2231
2267
  </span>
2232
2268
  </div>
@@ -2260,22 +2296,25 @@ beta: true
2260
2296
  <div
2261
2297
  class="pf-c-tree-view__node pf-m-selectable"
2262
2298
  tabindex="0"
2263
- id="node-3"
2299
+ id="node-tree-view-selectable-expandable-3"
2264
2300
  aria-label="Select"
2265
- aria-labelledby="node-3 text-3"
2301
+ aria-labelledby="node-tree-view-selectable-expandable-3 text-tree-view-selectable-expandable-3"
2266
2302
  >
2267
2303
  <span class="pf-c-tree-view__node-container">
2268
2304
  <button
2269
2305
  class="pf-c-tree-view__node-toggle"
2270
- id="toggle-3"
2306
+ id="toggle-tree-view-selectable-expandable-3"
2271
2307
  aria-label="Toggle"
2272
- aria-labelledby="toggle-3 text-3"
2308
+ aria-labelledby="toggle-tree-view-selectable-expandable-3 text-tree-view-selectable-expandable-3"
2273
2309
  >
2274
2310
  <span class="pf-c-tree-view__node-toggle-icon">
2275
2311
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2276
2312
  </span>
2277
2313
  </button>
2278
- <span class="pf-c-tree-view__node-text" id="text-3">Loader</span>
2314
+ <span
2315
+ class="pf-c-tree-view__node-text"
2316
+ id="text-tree-view-selectable-expandable-3"
2317
+ >Loader</span>
2279
2318
  </span>
2280
2319
  </div>
2281
2320
  </div>
@@ -2292,16 +2331,16 @@ beta: true
2292
2331
  <div
2293
2332
  class="pf-c-tree-view__node pf-m-selectable"
2294
2333
  tabindex="0"
2295
- id="node-4"
2334
+ id="node-tree-view-selectable-expandable-4"
2296
2335
  aria-label="Select"
2297
- aria-labelledby="node-4 text-4"
2336
+ aria-labelledby="node-tree-view-selectable-expandable-4 text-tree-view-selectable-expandable-4"
2298
2337
  >
2299
2338
  <span class="pf-c-tree-view__node-container">
2300
2339
  <button
2301
2340
  class="pf-c-tree-view__node-toggle"
2302
- id="toggle-4"
2341
+ id="toggle-tree-view-selectable-expandable-4"
2303
2342
  aria-label="Toggle"
2304
- aria-labelledby="toggle-4 text-4"
2343
+ aria-labelledby="toggle-tree-view-selectable-expandable-4 text-tree-view-selectable-expandable-4"
2305
2344
  >
2306
2345
  <span class="pf-c-tree-view__node-toggle-icon">
2307
2346
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -2309,7 +2348,7 @@ beta: true
2309
2348
  </button>
2310
2349
  <span
2311
2350
  class="pf-c-tree-view__node-text"
2312
- id="text-4"
2351
+ id="text-tree-view-selectable-expandable-4"
2313
2352
  >Application 2</span>
2314
2353
  </span>
2315
2354
  </div>
@@ -2334,22 +2373,25 @@ beta: true
2334
2373
  <div
2335
2374
  class="pf-c-tree-view__node pf-m-selectable"
2336
2375
  tabindex="0"
2337
- id="node-5"
2376
+ id="node-tree-view-selectable-expandable-5"
2338
2377
  aria-label="Select"
2339
- aria-labelledby="node-5 text-5"
2378
+ aria-labelledby="node-tree-view-selectable-expandable-5 text-tree-view-selectable-expandable-5"
2340
2379
  >
2341
2380
  <span class="pf-c-tree-view__node-container">
2342
2381
  <button
2343
2382
  class="pf-c-tree-view__node-toggle"
2344
- id="toggle-5"
2383
+ id="toggle-tree-view-selectable-expandable-5"
2345
2384
  aria-label="Toggle"
2346
- aria-labelledby="toggle-5 text-5"
2385
+ aria-labelledby="toggle-tree-view-selectable-expandable-5 text-tree-view-selectable-expandable-5"
2347
2386
  >
2348
2387
  <span class="pf-c-tree-view__node-toggle-icon">
2349
2388
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2350
2389
  </span>
2351
2390
  </button>
2352
- <span class="pf-c-tree-view__node-text" id="text-5">Settings</span>
2391
+ <span
2392
+ class="pf-c-tree-view__node-text"
2393
+ id="text-tree-view-selectable-expandable-5"
2394
+ >Settings</span>
2353
2395
  </span>
2354
2396
  </div>
2355
2397
  </div>
@@ -2364,22 +2406,25 @@ beta: true
2364
2406
  <div
2365
2407
  class="pf-c-tree-view__node pf-m-selectable"
2366
2408
  tabindex="0"
2367
- id="node-6"
2409
+ id="node-tree-view-selectable-expandable-6"
2368
2410
  aria-label="Select"
2369
- aria-labelledby="node-6 text-6"
2411
+ aria-labelledby="node-tree-view-selectable-expandable-6 text-tree-view-selectable-expandable-6"
2370
2412
  >
2371
2413
  <span class="pf-c-tree-view__node-container">
2372
2414
  <button
2373
2415
  class="pf-c-tree-view__node-toggle"
2374
- id="toggle-6"
2416
+ id="toggle-tree-view-selectable-expandable-6"
2375
2417
  aria-label="Toggle"
2376
- aria-labelledby="toggle-6 text-6"
2418
+ aria-labelledby="toggle-tree-view-selectable-expandable-6 text-tree-view-selectable-expandable-6"
2377
2419
  >
2378
2420
  <span class="pf-c-tree-view__node-toggle-icon">
2379
2421
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2380
2422
  </span>
2381
2423
  </button>
2382
- <span class="pf-c-tree-view__node-text" id="text-6">Loader</span>
2424
+ <span
2425
+ class="pf-c-tree-view__node-text"
2426
+ id="text-tree-view-selectable-expandable-6"
2427
+ >Loader</span>
2383
2428
  </span>
2384
2429
  </div>
2385
2430
  </div>
@@ -2394,16 +2439,16 @@ beta: true
2394
2439
  <div
2395
2440
  class="pf-c-tree-view__node pf-m-selectable pf-m-current"
2396
2441
  tabindex="0"
2397
- id="node-7"
2442
+ id="node-tree-view-selectable-expandable-7"
2398
2443
  aria-label="Select"
2399
- aria-labelledby="node-7 text-7"
2444
+ aria-labelledby="node-tree-view-selectable-expandable-7 text-tree-view-selectable-expandable-7"
2400
2445
  >
2401
2446
  <span class="pf-c-tree-view__node-container">
2402
2447
  <button
2403
2448
  class="pf-c-tree-view__node-toggle"
2404
- id="toggle-7"
2449
+ id="toggle-tree-view-selectable-expandable-7"
2405
2450
  aria-label="Toggle"
2406
- aria-labelledby="toggle-7 text-7"
2451
+ aria-labelledby="toggle-tree-view-selectable-expandable-7 text-tree-view-selectable-expandable-7"
2407
2452
  >
2408
2453
  <span class="pf-c-tree-view__node-toggle-icon">
2409
2454
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -2411,7 +2456,7 @@ beta: true
2411
2456
  </button>
2412
2457
  <span
2413
2458
  class="pf-c-tree-view__node-text"
2414
- id="text-7"
2459
+ id="text-tree-view-selectable-expandable-7"
2415
2460
  >Loader app 1</span>
2416
2461
  </span>
2417
2462
  </div>
@@ -2459,22 +2504,25 @@ beta: true
2459
2504
  <div
2460
2505
  class="pf-c-tree-view__node pf-m-selectable"
2461
2506
  tabindex="0"
2462
- id="node-8"
2507
+ id="node-tree-view-selectable-expandable-8"
2463
2508
  aria-label="Select"
2464
- aria-labelledby="node-8 text-8"
2509
+ aria-labelledby="node-tree-view-selectable-expandable-8 text-tree-view-selectable-expandable-8"
2465
2510
  >
2466
2511
  <span class="pf-c-tree-view__node-container">
2467
2512
  <button
2468
2513
  class="pf-c-tree-view__node-toggle"
2469
- id="toggle-8"
2514
+ id="toggle-tree-view-selectable-expandable-8"
2470
2515
  aria-label="Toggle"
2471
- aria-labelledby="toggle-8 text-8"
2516
+ aria-labelledby="toggle-tree-view-selectable-expandable-8 text-tree-view-selectable-expandable-8"
2472
2517
  >
2473
2518
  <span class="pf-c-tree-view__node-toggle-icon">
2474
2519
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2475
2520
  </span>
2476
2521
  </button>
2477
- <span class="pf-c-tree-view__node-text" id="text-8">Cost management</span>
2522
+ <span
2523
+ class="pf-c-tree-view__node-text"
2524
+ id="text-tree-view-selectable-expandable-8"
2525
+ >Cost management</span>
2478
2526
  </span>
2479
2527
  </div>
2480
2528
  </div>
@@ -2489,22 +2537,25 @@ beta: true
2489
2537
  <div
2490
2538
  class="pf-c-tree-view__node pf-m-selectable"
2491
2539
  tabindex="0"
2492
- id="node-9"
2540
+ id="node-tree-view-selectable-expandable-9"
2493
2541
  aria-label="Select"
2494
- aria-labelledby="node-9 text-9"
2542
+ aria-labelledby="node-tree-view-selectable-expandable-9 text-tree-view-selectable-expandable-9"
2495
2543
  >
2496
2544
  <span class="pf-c-tree-view__node-container">
2497
2545
  <button
2498
2546
  class="pf-c-tree-view__node-toggle"
2499
- id="toggle-9"
2547
+ id="toggle-tree-view-selectable-expandable-9"
2500
2548
  aria-label="Toggle"
2501
- aria-labelledby="toggle-9 text-9"
2549
+ aria-labelledby="toggle-tree-view-selectable-expandable-9 text-tree-view-selectable-expandable-9"
2502
2550
  >
2503
2551
  <span class="pf-c-tree-view__node-toggle-icon">
2504
2552
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2505
2553
  </span>
2506
2554
  </button>
2507
- <span class="pf-c-tree-view__node-text" id="text-9">Sources</span>
2555
+ <span
2556
+ class="pf-c-tree-view__node-text"
2557
+ id="text-tree-view-selectable-expandable-9"
2558
+ >Sources</span>
2508
2559
  </span>
2509
2560
  </div>
2510
2561
  </div>
@@ -2519,16 +2570,16 @@ beta: true
2519
2570
  <div
2520
2571
  class="pf-c-tree-view__node pf-m-selectable"
2521
2572
  tabindex="0"
2522
- id="node-10"
2573
+ id="node-tree-view-selectable-expandable-10"
2523
2574
  aria-label="Select"
2524
- aria-labelledby="node-10 text-10"
2575
+ aria-labelledby="node-tree-view-selectable-expandable-10 text-tree-view-selectable-expandable-10"
2525
2576
  >
2526
2577
  <span class="pf-c-tree-view__node-container">
2527
2578
  <button
2528
2579
  class="pf-c-tree-view__node-toggle"
2529
- id="toggle-10"
2580
+ id="toggle-tree-view-selectable-expandable-10"
2530
2581
  aria-label="Toggle"
2531
- aria-labelledby="toggle-10 text-10"
2582
+ aria-labelledby="toggle-tree-view-selectable-expandable-10 text-tree-view-selectable-expandable-10"
2532
2583
  >
2533
2584
  <span class="pf-c-tree-view__node-toggle-icon">
2534
2585
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -2536,7 +2587,7 @@ beta: true
2536
2587
  </button>
2537
2588
  <span
2538
2589
  class="pf-c-tree-view__node-text"
2539
- id="text-10"
2590
+ id="text-tree-view-selectable-expandable-10"
2540
2591
  >This is a really really really long folder name that overflows from the width of the container.</span>
2541
2592
  </span>
2542
2593
  </div>