@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/LogViewer/examples/LogViewer.md CHANGED
@@ -562,7 +562,557 @@ cssPrefix: pf-c-log-viewer
562
562
  ```html
563
563
  <div
564
564
  class="pf-c-log-viewer pf-m-line-numbers"
565
- style="--pf-c-log-viewer__index--Width: 75px"
565
+ style
566
+ tabindex="0"
567
+ role="region"
568
+ aria-label="Log viewer with line numbers"
569
+ >
570
+ <div class="pf-c-log-viewer__header">
571
+ <div
572
+ class="pf-c-toolbar"
573
+ id="log-viewer-line-number-example-toolbar"
574
+ role="toolbar"
575
+ >
576
+ <div class="pf-c-toolbar__content">
577
+ <div class="pf-c-toolbar__content-section pf-m-nowrap">
578
+ <div class="pf-c-toolbar__item pf-m-search-filter">
579
+ <div class="pf-c-select">
580
+ <span
581
+ id="log-viewer-line-number-example-select-menu-label"
582
+ hidden
583
+ >Choose one</span>
584
+
585
+ <button
586
+ class="pf-c-select__toggle"
587
+ type="button"
588
+ id="log-viewer-line-number-example-select-menu-toggle"
589
+ aria-haspopup="true"
590
+ aria-expanded="false"
591
+ aria-labelledby="log-viewer-line-number-example-select-menu-label log-viewer-line-number-example-select-menu-toggle"
592
+ >
593
+ <div class="pf-c-select__toggle-wrapper">
594
+ <span class="pf-c-select__toggle-text">System log</span>
595
+ </div>
596
+ <span class="pf-c-select__toggle-arrow">
597
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
598
+ </span>
599
+ </button>
600
+ <ul
601
+ class="pf-c-select__menu"
602
+ role="listbox"
603
+ aria-labelledby="log-viewer-line-number-example-select-menu-label"
604
+ hidden
605
+ >
606
+ <li role="presentation">
607
+ <button class="pf-c-select__menu-item" role="option">Dataset 1</button>
608
+ </li>
609
+ <li role="presentation">
610
+ <button
611
+ class="pf-c-select__menu-item pf-m-selected"
612
+ role="option"
613
+ aria-selected="true"
614
+ >
615
+ System log
616
+ <span class="pf-c-select__menu-item-icon">
617
+ <i class="fas fa-check" aria-hidden="true"></i>
618
+ </span>
619
+ </button>
620
+ </li>
621
+ <li role="presentation">
622
+ <button class="pf-c-select__menu-item" role="option">Dataset 3</button>
623
+ </li>
624
+ </ul>
625
+ </div>
626
+ </div>
627
+ <div class="pf-c-toolbar__group pf-m-toggle-group pf-m-show-on-lg">
628
+ <div class="pf-c-toolbar__toggle">
629
+ <button
630
+ class="pf-c-button pf-m-plain"
631
+ type="button"
632
+ aria-label="Show filters"
633
+ aria-expanded="false"
634
+ aria-controls="log-viewer-line-number-example-toolbar-expandable-content"
635
+ >
636
+ <i class="fas fa-search" aria-hidden="true"></i>
637
+ </button>
638
+ </div>
639
+ <div
640
+ class="pf-c-toolbar__item pf-m-search-filter"
641
+ style="--pf-c-toolbar__item--Width: 268px"
642
+ >
643
+ <div class="pf-c-search-input">
644
+ <div class="pf-c-search-input__bar">
645
+ <span class="pf-c-search-input__text">
646
+ <span class="pf-c-search-input__icon">
647
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
648
+ </span>
649
+ <input
650
+ class="pf-c-search-input__text-input"
651
+ type="text"
652
+ placeholder="Find"
653
+ aria-label="Find"
654
+ />
655
+ </span>
656
+ </div>
657
+ </div>
658
+ </div>
659
+ </div>
660
+ <div class="pf-c-toolbar__item pf-m-spacer-none">
661
+ <button class="pf-c-button pf-m-link" type="button">
662
+ <span class="pf-c-button__icon pf-m-start">
663
+ <i class="fas fa-pause" aria-hidden="true"></i>
664
+ </span>
665
+ Pause
666
+ </button>
667
+ </div>
668
+ <div
669
+ class="pf-c-toolbar__item pf-m-align-right pf-m-hidden-on-lg pf-m-spacer-none"
670
+ >
671
+ <div class="pf-c-dropdown">
672
+ <button
673
+ class="pf-c-dropdown__toggle pf-m-plain"
674
+ id="log-viewer-line-number-example-dropdown-button"
675
+ aria-expanded="false"
676
+ type="button"
677
+ aria-label="Actions"
678
+ >
679
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
680
+ </button>
681
+ <div
682
+ class="pf-c-menu pf-m-drilldown pf-m-align-right"
683
+ style="--pf-c-menu--Width: 200px;"
684
+ hidden
685
+ >
686
+ <div class="pf-c-menu__content">
687
+ <ul class="pf-c-menu__list" role="menu">
688
+ <li class="pf-c-menu__list-item" role="none">
689
+ <button
690
+ class="pf-c-menu__item"
691
+ type="button"
692
+ role="menuitem"
693
+ >
694
+ <span class="pf-c-menu__item-main">
695
+ <span class="pf-c-menu__item-text">Clear log</span>
696
+ </span>
697
+ </button>
698
+ </li>
699
+ <hr class="pf-c-divider" />
700
+ <li class="pf-c-menu__list-item" role="none">
701
+ <div
702
+ class="pf-c-menu__item"
703
+ type="button"
704
+ role="menuitem"
705
+ >
706
+ <span class="pf-c-menu__item-main">
707
+ <div class="pf-c-check">
708
+ <input
709
+ class="pf-c-check__input"
710
+ type="checkbox"
711
+ id="log-viewer-line-number-example-desktop-check-wrap-lines"
712
+ name="log-viewer-line-number-example-desktop-check-wrap-lines"
713
+ />
714
+
715
+ <label
716
+ class="pf-c-check__label"
717
+ for="log-viewer-line-number-example-desktop-check-wrap-lines"
718
+ >Wrap lines</label>
719
+ </div>
720
+ </span>
721
+ </div>
722
+ </li>
723
+ <li class="pf-c-menu__list-item" role="none">
724
+ <div
725
+ class="pf-c-menu__item"
726
+ type="button"
727
+ role="menuitem"
728
+ >
729
+ <span class="pf-c-menu__item-main">
730
+ <div class="pf-c-check">
731
+ <input
732
+ class="pf-c-check__input"
733
+ type="checkbox"
734
+ id="log-viewer-line-number-example-desktop-check-show-timestamps"
735
+ name="log-viewer-line-number-example-desktop-check-show-timestamps"
736
+ />
737
+
738
+ <label
739
+ class="pf-c-check__label"
740
+ for="log-viewer-line-number-example-desktop-check-show-timestamps"
741
+ >Show timestamps</label>
742
+ </div>
743
+ </span>
744
+ </div>
745
+ </li>
746
+ <li class="pf-c-menu__list-item" role="none">
747
+ <div
748
+ class="pf-c-menu__item"
749
+ type="button"
750
+ role="menuitem"
751
+ >
752
+ <span class="pf-c-menu__item-main">
753
+ <div class="pf-c-check">
754
+ <input
755
+ class="pf-c-check__input"
756
+ type="checkbox"
757
+ id="log-viewer-line-number-example-desktop-check-line-number"
758
+ name="log-viewer-line-number-example-desktop-check-line-number"
759
+ />
760
+
761
+ <label
762
+ class="pf-c-check__label"
763
+ for="log-viewer-line-number-example-desktop-check-line-number"
764
+ >Display line number</label>
765
+ </div>
766
+ </span>
767
+ </div>
768
+ </li>
769
+ <hr class="pf-c-divider" />
770
+ <li class="pf-c-menu__list-item" role="none">
771
+ <button
772
+ class="pf-c-menu__item"
773
+ type="button"
774
+ role="menuitem"
775
+ aria-expanded="false"
776
+ >
777
+ <span class="pf-c-menu__item-main">
778
+ <span class="pf-c-menu__item-text">Launch</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__content">
786
+ <ul class="pf-c-menu__list" role="menu">
787
+ <li
788
+ class="pf-c-menu__list-item pf-m-drill-up"
789
+ role="none"
790
+ >
791
+ <button
792
+ class="pf-c-menu__item"
793
+ type="button"
794
+ role="menuitem"
795
+ tabindex="0"
796
+ >
797
+ <span class="pf-c-menu__item-main">
798
+ <span class="pf-c-menu__item-toggle-icon">
799
+ <i class="fas fa-angle-left"></i>
800
+ </span>
801
+ <span class="pf-c-menu__item-text">Launch</span>
802
+ </span>
803
+ </button>
804
+ </li>
805
+ <li class="pf-c-divider" role="separator"></li>
806
+ <li class="pf-c-menu__list-item" role="none">
807
+ <button
808
+ class="pf-c-menu__item"
809
+ type="button"
810
+ role="menuitem"
811
+ >
812
+ <span class="pf-c-menu__item-main">
813
+ <span
814
+ class="pf-c-menu__item-text"
815
+ >Launch option 1</span>
816
+ </span>
817
+ </button>
818
+ </li>
819
+ <li class="pf-c-menu__list-item" role="none">
820
+ <button
821
+ class="pf-c-menu__item"
822
+ type="button"
823
+ role="menuitem"
824
+ >
825
+ <span class="pf-c-menu__item-main">
826
+ <span
827
+ class="pf-c-menu__item-text"
828
+ >Launch option 2</span>
829
+ </span>
830
+ </button>
831
+ </li>
832
+ <li class="pf-c-menu__list-item" role="none">
833
+ <button
834
+ class="pf-c-menu__item"
835
+ type="button"
836
+ role="menuitem"
837
+ >
838
+ <span class="pf-c-menu__item-main">
839
+ <span
840
+ class="pf-c-menu__item-text"
841
+ >Launch option 3</span>
842
+ </span>
843
+ </button>
844
+ </li>
845
+ </ul>
846
+ </div>
847
+ </div>
848
+ </li>
849
+ <li class="pf-c-menu__list-item" role="none">
850
+ <button
851
+ class="pf-c-menu__item"
852
+ type="button"
853
+ role="menuitem"
854
+ >
855
+ <span class="pf-c-menu__item-main">
856
+ <span class="pf-c-menu__item-text">Download</span>
857
+ </span>
858
+ </button>
859
+ </li>
860
+ <li class="pf-c-menu__list-item" role="none">
861
+ <button
862
+ class="pf-c-menu__item"
863
+ type="button"
864
+ role="menuitem"
865
+ >
866
+ <span class="pf-c-menu__item-main">
867
+ <span class="pf-c-menu__item-text">Full screen</span>
868
+ </span>
869
+ </button>
870
+ </li>
871
+ </ul>
872
+ </div>
873
+ </div>
874
+ </div>
875
+ </div>
876
+ <div
877
+ class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-hidden pf-m-visible-on-lg"
878
+ >
879
+ <div class="pf-c-toolbar__item">
880
+ <button class="pf-c-button pf-m-link" type="button">Clear log</button>
881
+ </div>
882
+ <div class="pf-c-toolbar__item">
883
+ <div class="pf-c-dropdown">
884
+ <button
885
+ class="pf-c-dropdown__toggle pf-m-plain"
886
+ id="log-viewer-line-number-example-settings-dropdown-button"
887
+ aria-expanded="false"
888
+ type="button"
889
+ aria-label="Settings"
890
+ >
891
+ <i class="fas fa-cog" aria-hidden="true"></i>
892
+ </button>
893
+ <ul
894
+ class="pf-c-dropdown__menu pf-m-align-right"
895
+ aria-labelledby="log-viewer-line-number-example-settings-dropdown-button"
896
+ hidden
897
+ >
898
+ <li>
899
+ <div class="pf-c-dropdown__menu-item">
900
+ <label
901
+ class="pf-c-check"
902
+ for="log-viewer-line-number-example-check-wrap-lines"
903
+ >
904
+ <input
905
+ class="pf-c-check__input"
906
+ type="checkbox"
907
+ id="log-viewer-line-number-example-check-wrap-lines"
908
+ name="log-viewer-line-number-example-check-wrap-lines"
909
+ />
910
+
911
+ <span class="pf-c-check__label">Wrap lines</span>
912
+ </label>
913
+ </div>
914
+ </li>
915
+ <li>
916
+ <div class="pf-c-dropdown__menu-item">
917
+ <label
918
+ class="pf-c-check"
919
+ for="log-viewer-line-number-example-check-show-timestamps"
920
+ >
921
+ <input
922
+ class="pf-c-check__input"
923
+ type="checkbox"
924
+ id="log-viewer-line-number-example-check-show-timestamps"
925
+ name="log-viewer-line-number-example-check-show-timestamps"
926
+ />
927
+
928
+ <span class="pf-c-check__label">Show timestamps</span>
929
+ </label>
930
+ </div>
931
+ </li>
932
+ <li>
933
+ <div class="pf-c-dropdown__menu-item">
934
+ <label
935
+ class="pf-c-check"
936
+ for="log-viewer-line-number-example-check-line-number"
937
+ >
938
+ <input
939
+ class="pf-c-check__input"
940
+ type="checkbox"
941
+ id="log-viewer-line-number-example-check-line-number"
942
+ name="log-viewer-line-number-example-check-line-number"
943
+ />
944
+
945
+ <span class="pf-c-check__label">Display line number</span>
946
+ </label>
947
+ </div>
948
+ </li>
949
+ </ul>
950
+ </div>
951
+ </div>
952
+ <div class="pf-c-toolbar__item">
953
+ <button
954
+ class="pf-c-button pf-m-plain"
955
+ type="button"
956
+ aria-label="Open external link"
957
+ >
958
+ <i class="fas fa-external-link-alt" aria-hidden="true"></i>
959
+ </button>
960
+ </div>
961
+ <div class="pf-c-toolbar__item">
962
+ <button
963
+ class="pf-c-button pf-m-plain"
964
+ type="button"
965
+ aria-label="Download"
966
+ >
967
+ <i class="fas fa-download" aria-hidden="true"></i>
968
+ </button>
969
+ </div>
970
+ <div class="pf-c-toolbar__item">
971
+ <button
972
+ class="pf-c-button pf-m-plain"
973
+ type="button"
974
+ aria-label="Full screen"
975
+ >
976
+ <i class="fas fa-expand" aria-hidden="true"></i>
977
+ </button>
978
+ </div>
979
+ </div>
980
+ </div>
981
+ <div
982
+ class="pf-c-toolbar__expandable-content pf-m-hidden"
983
+ id="log-viewer-line-number-example-toolbar-expandable-content"
984
+ hidden
985
+ >
986
+ <div
987
+ class="pf-c-toolbar__item pf-m-search-filter"
988
+ style="--pf-c-toolbar__item--Width: 24ch"
989
+ >
990
+ <div class="pf-c-search-input">
991
+ <div class="pf-c-search-input__bar">
992
+ <span class="pf-c-search-input__text">
993
+ <span class="pf-c-search-input__icon">
994
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
995
+ </span>
996
+ <input
997
+ class="pf-c-search-input__text-input"
998
+ type="text"
999
+ placeholder="Find"
1000
+ aria-label="Find"
1001
+ />
1002
+ </span>
1003
+ </div>
1004
+ </div>
1005
+ </div>
1006
+ </div>
1007
+ </div>
1008
+ </div>
1009
+ </div>
1010
+ <div class="pf-c-log-viewer__main" role="log">
1011
+ <div class="pf-c-log-viewer__scroll-container" tabindex="0">
1012
+ <!--prettyhtml-ignore-start-->
1013
+ <div class="pf-c-log-viewer__list" style="--pf-c-log-viewer__list--Height: 301080px;">
1014
+ <div class="pf-c-log-viewer__list-item" style="top: 0px;">
1015
+ <span class="pf-c-log-viewer__index">1</span>
1016
+ <span class="pf-c-log-viewer__text">Copying system trust bundle</span>
1017
+ </div>
1018
+ <div class="pf-c-log-viewer__list-item" style="top: 21px;">
1019
+ <span class="pf-c-log-viewer__index">2</span>
1020
+ <span
1021
+ class="pf-c-log-viewer__text"
1022
+ >Waiting for port :6443 to be released.</span>
1023
+ </div>
1024
+ <div class="pf-c-log-viewer__list-item" style="top: 42px;">
1025
+ <span class="pf-c-log-viewer__index">3</span>
1026
+ <span
1027
+ class="pf-c-log-viewer__text"
1028
+ >I0223 20:04:25.084507 1 loader.go:379] Config loaded from file: /etc/kubernetes/static-pod-resources/configmaps/kube-apiserver-cert-syncer-kubeconfig/kubeconfig</span>
1029
+ </div>
1030
+ <div class="pf-c-log-viewer__list-item" style="top: 84px;">
1031
+ <span class="pf-c-log-viewer__index">4</span>
1032
+ <span
1033
+ class="pf-c-log-viewer__text"
1034
+ >Copying termination logs to "/var/log/kube-apiserver/termination.log"</span>
1035
+ </div>
1036
+ <div class="pf-c-log-viewer__list-item" style="top: 105px;">
1037
+ <span class="pf-c-log-viewer__index">5</span>
1038
+ <span
1039
+ class="pf-c-log-viewer__text"
1040
+ >I0223 20:04:25.087543 1 main.go:124] Touching termination lock file "/var/log/kube-apiserver/.terminating"</span>
1041
+ </div>
1042
+ <div class="pf-c-log-viewer__list-item" style="top: 147px;">
1043
+ <span class="pf-c-log-viewer__index">6</span>
1044
+ <span
1045
+ class="pf-c-log-viewer__text"
1046
+ >I0223 20:04:25.088797 1 main.go:182] Launching sub-process "/usr/bin/hyperkube kube-apiserver --openshift-config=/etc/kubernetes/static-pod-resources/configmaps/config/config.yaml --advertise-address=10.0.171.12 -v=2"</span>
1047
+ </div>
1048
+ <div class="pf-c-log-viewer__list-item" style="top: 210px;">
1049
+ <span class="pf-c-log-viewer__index">7</span>
1050
+ <span
1051
+ class="pf-c-log-viewer__text"
1052
+ >Flag --openshift-config has been deprecated, to be removed</span>
1053
+ </div>
1054
+ <div class="pf-c-log-viewer__list-item" style="top: 231px;">
1055
+ <span class="pf-c-log-viewer__index">8</span>
1056
+ <span
1057
+ class="pf-c-log-viewer__text"
1058
+ >I0223 20:04:25.238681 17 plugins.go:84] Registered admission plugin "authorization.openshift.io/RestrictSubjectBindings"</span>
1059
+ </div>
1060
+ <div class="pf-c-log-viewer__list-item" style="top: 273px;">
1061
+ <span class="pf-c-log-viewer__index">9</span>
1062
+ <span
1063
+ class="pf-c-log-viewer__text"
1064
+ >I0223 20:04:25.238763 17 plugins.go:84] Registered admission plugin "image.openshift.io/ImagePolicy"</span>
1065
+ </div>
1066
+ <div class="pf-c-log-viewer__list-item" style="top: 315px;">
1067
+ <span class="pf-c-log-viewer__index">10</span>
1068
+ <span
1069
+ class="pf-c-log-viewer__text"
1070
+ >I0223 20:04:25.238775 17 plugins.go:84] Registered admission plugin "route.openshift.io/IngressAdmission"</span>
1071
+ </div>
1072
+ <div class="pf-c-log-viewer__list-item" style="top: 357px;">
1073
+ <span class="pf-c-log-viewer__index">11</span>
1074
+ <span
1075
+ class="pf-c-log-viewer__text"
1076
+ >I0223 20:04:25.238783 17 plugins.go:84] Registered admission plugin "scheduling.openshift.io/OriginPodNodeEnvironment"</span>
1077
+ </div>
1078
+ <div class="pf-c-log-viewer__list-item" style="top: 399px;">
1079
+ <span class="pf-c-log-viewer__index">12</span>
1080
+ <span
1081
+ class="pf-c-log-viewer__text"
1082
+ >I0223 20:04:25.238792 17 plugins.go:84] Registered admission plugin "autoscaling.openshift.io/ClusterResourceOverride"</span>
1083
+ </div>
1084
+ <div class="pf-c-log-viewer__list-item" style="top: 441px;">
1085
+ <span class="pf-c-log-viewer__index">13</span>
1086
+ <span
1087
+ class="pf-c-log-viewer__text"
1088
+ >I0223 20:04:25.238801 17 plugins.go:84] Registered admission plugin "quota.openshift.io/ClusterResourceQuota"</span>
1089
+ </div>
1090
+ <div class="pf-c-log-viewer__list-item" style="top: 483px;">
1091
+ <span class="pf-c-log-viewer__index">14</span>
1092
+ <span
1093
+ class="pf-c-log-viewer__text"
1094
+ >I0223 20:04:25.238810 17 plugins.go:84] Registered admission plugin "autoscaling.openshift.io/RunOnceDuration"</span>
1095
+ </div>
1096
+ <div class="pf-c-log-viewer__list-item" style="top: 525px;">
1097
+ <span class="pf-c-log-viewer__index">15</span>
1098
+ <span
1099
+ class="pf-c-log-viewer__text"
1100
+ >I0223 20:04:25.238819 17 plugins.go:84] Registered admission plugin "scheduling.openshift.io/PodNodeConstraints"</span>
1101
+ </div>
1102
+ </div>
1103
+ <!--prettyhtml-ignore-end-->
1104
+ </div>
1105
+ </div>
1106
+ </div>
1107
+
1108
+ ```
1109
+
1110
+ ### With line number chars specified
1111
+
1112
+ ```html
1113
+ <div
1114
+ class="pf-c-log-viewer pf-m-line-numbers pf-m-line-number-chars"
1115
+ style="--pf-c-log-viewer--line-number-chars: 6"
566
1116
  tabindex="0"
567
1117
  role="region"
568
1118
  aria-label="Log viewer with line numbers"
@@ -5169,7 +5719,9 @@ cssPrefix: pf-c-log-viewer
5169
5719
  | `.pf-m-wrap-text` | `.pf-c-log-viewer` | Modifies the log viewer text to wrap. |
5170
5720
  | `.pf-m-nowrap` | `.pf-c-log-viewer` | Modifies the log viewer text to not wrap. |
5171
5721
  | `.pf-m-line-numbers` | `.pf-c-log-viewer` | Modifies the log viewer to display line numbers. |
5722
+ | `.pf-m-line-number-chars` | `.pf-c-log-viewer` | Modifies the log viewer allow for a custom line number column size. Use with `--pf-c-log-viewer--line-number-chars`. |
5172
5723
  | `.pf-m-dark` | `.pf-c-log-viewer` | Modifies the log viewer content for dark theme. |
5173
5724
  | `.pf-m-match` | `.pf-c-log-viewer__string` | Indicates a string is a search result. |
5174
5725
  | `.pf-m-current` | `.pf-c-log-viewer__string` | Indicates a string is the current search result. |
5726
+ | `--pf-c-log-viewer--line-number-chars` | `.pf-c-log-viewer` | With a number passed as the value, modifies the width of the line number column to show the specified number of characters. |
5175
5727
  | `--pf-c-log-viewer--MaxHeight{-on-[breakpoint]}: {height}` | `.pf-c-log-viewer` | Modifies the height value of a log viewer at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |