@patternfly/patternfly 4.157.1 → 4.159.2

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 (26) hide show
  1. package/README.md +2 -2
  2. package/RELEASE-NOTES.md +30 -0
  3. package/components/Dropdown/dropdown.css +46 -11
  4. package/components/Dropdown/dropdown.scss +60 -11
  5. package/components/Menu/menu.css +84 -0
  6. package/components/Menu/menu.scss +109 -0
  7. package/components/MenuToggle/menu-toggle.css +48 -1
  8. package/components/MenuToggle/menu-toggle.scss +62 -1
  9. package/components/Nav/nav.css +3 -3
  10. package/components/Nav/nav.scss +2 -1
  11. package/components/Table/table.css +2 -2
  12. package/components/Table/table.scss +2 -2
  13. package/docs/components/Dropdown/examples/Dropdown.css +1 -0
  14. package/docs/components/Dropdown/examples/Dropdown.md +94 -0
  15. package/docs/components/Menu/examples/Menu.md +1 -0
  16. package/docs/components/MenuToggle/examples/MenuToggle.md +79 -14
  17. package/docs/components/Nav/examples/Navigation.css +12 -4
  18. package/docs/components/Nav/examples/Navigation.md +51 -232
  19. package/docs/components/Table/examples/Table.md +2168 -76
  20. package/docs/demos/Button/examples/Button.md +176 -0
  21. package/docs/demos/Table/examples/Table.md +3734 -95
  22. package/package.json +1 -1
  23. package/patternfly-no-reset.css +183 -17
  24. package/patternfly.css +183 -17
  25. package/patternfly.min.css +1 -1
  26. package/patternfly.min.css.map +1 -1
package/docs/components/Nav/examples/Navigation.md CHANGED
@@ -726,7 +726,7 @@ cssPrefix: pf-c-nav
726
726
  <li class="pf-c-nav__item pf-m-flyout">
727
727
  <a
728
728
  href="#"
729
- class="pf-c-nav__link"
729
+ class="pf-c-nav__link pf-m-hover"
730
730
  aria-haspopup="true"
731
731
  aria-expanded="true"
732
732
  >
@@ -737,64 +737,6 @@ cssPrefix: pf-c-nav
737
737
  </span>
738
738
  </span>
739
739
  </a>
740
- <div class="pf-c-menu pf-m-flyout">
741
- <div class="pf-c-menu__content">
742
- <ul class="pf-c-menu__list">
743
- <li class="pf-c-menu__list-item">
744
- <a class="pf-c-menu__item" href="#">
745
- <span class="pf-c-menu__item-main">
746
- <span class="pf-c-menu__item-text">Container platform</span>
747
- </span>
748
- </a>
749
- </li>
750
- <li class="pf-c-menu__list-item">
751
- <button
752
- class="pf-c-menu__item"
753
- type="button"
754
- aria-expanded="true"
755
- >
756
- <span class="pf-c-menu__item-main">
757
- <span class="pf-c-menu__item-text">Dedicated</span>
758
- <span class="pf-c-menu__item-toggle-icon">
759
- <i class="fas fa-angle-right"></i>
760
- </span>
761
- </span>
762
- </button>
763
- <div class="pf-c-menu">
764
- <div class="pf-c-menu__content">
765
- <ul class="pf-c-menu__list">
766
- <li class="pf-c-menu__list-item">
767
- <a class="pf-c-menu__item" href="#">
768
- <span class="pf-c-menu__item-main">
769
- <span class="pf-c-menu__item-text">Dedicated (Annual)</span>
770
- </span>
771
- </a>
772
- </li>
773
- <li class="pf-c-menu__list-item">
774
- <a class="pf-c-menu__item" href="#">
775
- <span class="pf-c-menu__item-main">
776
- <span
777
- class="pf-c-menu__item-text"
778
- >Dedicated (On-Demand)</span>
779
- </span>
780
- </a>
781
- </li>
782
- <li class="pf-c-menu__list-item">
783
- <a class="pf-c-menu__item" href="#">
784
- <span class="pf-c-menu__item-main">
785
- <span
786
- class="pf-c-menu__item-text"
787
- >Dedicated (On-Demand limits)</span>
788
- </span>
789
- </a>
790
- </li>
791
- </ul>
792
- </div>
793
- </div>
794
- </li>
795
- </ul>
796
- </div>
797
- </div>
798
740
  </li>
799
741
  <li class="pf-c-nav__item">
800
742
  <a href="#" class="pf-c-nav__link">Support cases</a>
@@ -810,182 +752,58 @@ cssPrefix: pf-c-nav
810
752
  </li>
811
753
  </ul>
812
754
  </nav>
813
-
814
- ```
815
-
816
- ### Nav with menu and flyout
817
-
818
- ```html isBeta
819
- <nav class="pf-c-nav" aria-label="Flyout menu example">
820
- <div class="pf-c-menu">
821
- <div class="pf-c-menu__content">
822
- <ul class="pf-c-menu__list">
823
- <li class="pf-c-menu__list-item">
824
- <button class="pf-c-menu__item" type="button">
825
- <span class="pf-c-menu__item-main">
826
- <span class="pf-c-menu__item-text">Start rollout</span>
827
- </span>
828
- </button>
829
- </li>
830
- <li class="pf-c-menu__list-item">
831
- <button class="pf-c-menu__item" type="button">
832
- <span class="pf-c-menu__item-main">
833
- <span class="pf-c-menu__item-text">Pause rollouts</span>
834
- </span>
835
- </button>
836
- </li>
837
- <li class="pf-c-menu__list-item">
838
- <button class="pf-c-menu__item" type="button" aria-expanded="false">
839
- <span class="pf-c-menu__item-main">
840
- <span class="pf-c-menu__item-text">Add storage</span>
841
- <span class="pf-c-menu__item-toggle-icon">
842
- <i class="fas fa-angle-right"></i>
843
- </span>
844
- </span>
845
- </button>
846
- <div class="pf-c-menu pf-m-flyout" hidden>
847
- <div class="pf-c-menu__content">
848
- <ul class="pf-c-menu__list">
849
- <li class="pf-c-menu__list-item">
850
- <a class="pf-c-menu__item" href="#">
851
- <span class="pf-c-menu__item-main">
852
- <span class="pf-c-menu__item-text">Container platform</span>
853
- </span>
854
- </a>
855
- </li>
856
- <li class="pf-c-menu__list-item">
857
- <button
858
- class="pf-c-menu__item"
859
- type="button"
860
- aria-expanded="true"
861
- >
862
- <span class="pf-c-menu__item-main">
863
- <span class="pf-c-menu__item-text">Dedicated</span>
864
- <span class="pf-c-menu__item-toggle-icon">
865
- <i class="fas fa-angle-right"></i>
866
- </span>
867
- </span>
868
- </button>
869
- <div class="pf-c-menu">
870
- <div class="pf-c-menu__content">
871
- <ul class="pf-c-menu__list">
872
- <li class="pf-c-menu__list-item">
873
- <a class="pf-c-menu__item" href="#">
874
- <span class="pf-c-menu__item-main">
875
- <span
876
- class="pf-c-menu__item-text"
877
- >Dedicated (Annual)</span>
878
- </span>
879
- </a>
880
- </li>
881
- <li class="pf-c-menu__list-item">
882
- <a class="pf-c-menu__item" href="#">
883
- <span class="pf-c-menu__item-main">
884
- <span
885
- class="pf-c-menu__item-text"
886
- >Dedicated (On-Demand)</span>
887
- </span>
888
- </a>
889
- </li>
890
- <li class="pf-c-menu__list-item">
891
- <a class="pf-c-menu__item" href="#">
892
- <span class="pf-c-menu__item-main">
893
- <span
894
- class="pf-c-menu__item-text"
895
- >Dedicated (On-Demand limits)</span>
896
- </span>
897
- </a>
898
- </li>
899
- </ul>
900
- </div>
901
- </div>
902
- </li>
903
- </ul>
904
- </div>
905
- </div>
906
- </li>
907
- <li class="pf-c-menu__list-item">
908
- <button class="pf-c-menu__item" type="button" aria-expanded="true">
909
- <span class="pf-c-menu__item-main">
910
- <span class="pf-c-menu__item-text">Edit</span>
911
- <span class="pf-c-menu__item-toggle-icon">
912
- <i class="fas fa-angle-right"></i>
913
- </span>
755
+ <div class="pf-c-menu pf-m-flyout pf-m-nav">
756
+ <div class="pf-c-menu__content">
757
+ <ul class="pf-c-menu__list">
758
+ <li class="pf-c-menu__list-item">
759
+ <a class="pf-c-menu__item" href="#">
760
+ <span class="pf-c-menu__item-main">
761
+ <span class="pf-c-menu__item-text">Container platform</span>
762
+ </span>
763
+ </a>
764
+ </li>
765
+ <li class="pf-c-menu__list-item">
766
+ <button class="pf-c-menu__item" type="button" aria-expanded="true">
767
+ <span class="pf-c-menu__item-main">
768
+ <span class="pf-c-menu__item-text">Dedicated</span>
769
+ <span class="pf-c-menu__item-toggle-icon">
770
+ <i class="fas fa-angle-right"></i>
914
771
  </span>
915
- <span class="pf-c-menu__item-description">Description</span>
916
- </button>
917
- <div class="pf-c-menu pf-m-flyout">
918
- <div class="pf-c-menu__content">
919
- <ul class="pf-c-menu__list">
920
- <li class="pf-c-menu__list-item">
921
- <a class="pf-c-menu__item" href="#">
922
- <span class="pf-c-menu__item-main">
923
- <span class="pf-c-menu__item-text">Container platform</span>
924
- </span>
925
- </a>
926
- </li>
927
- <li class="pf-c-menu__list-item">
928
- <button
929
- class="pf-c-menu__item"
930
- type="button"
931
- aria-expanded="true"
932
- >
933
- <span class="pf-c-menu__item-main">
934
- <span class="pf-c-menu__item-text">Dedicated</span>
935
- <span class="pf-c-menu__item-toggle-icon">
936
- <i class="fas fa-angle-right"></i>
937
- </span>
938
- </span>
939
- </button>
940
- <div class="pf-c-menu">
941
- <div class="pf-c-menu__content">
942
- <ul class="pf-c-menu__list">
943
- <li class="pf-c-menu__list-item">
944
- <a class="pf-c-menu__item" href="#">
945
- <span class="pf-c-menu__item-main">
946
- <span
947
- class="pf-c-menu__item-text"
948
- >Dedicated (Annual)</span>
949
- </span>
950
- </a>
951
- </li>
952
- <li class="pf-c-menu__list-item">
953
- <a class="pf-c-menu__item" href="#">
954
- <span class="pf-c-menu__item-main">
955
- <span
956
- class="pf-c-menu__item-text"
957
- >Dedicated (On-Demand)</span>
958
- </span>
959
- </a>
960
- </li>
961
- <li class="pf-c-menu__list-item">
962
- <a class="pf-c-menu__item" href="#">
963
- <span class="pf-c-menu__item-main">
964
- <span
965
- class="pf-c-menu__item-text"
966
- >Dedicated (On-Demand limits)</span>
967
- </span>
968
- </a>
969
- </li>
970
- </ul>
971
- </div>
972
- </div>
973
- </li>
974
- </ul>
975
- </div>
772
+ </span>
773
+ </button>
774
+ <div class="pf-c-menu">
775
+ <div class="pf-c-menu__content">
776
+ <ul class="pf-c-menu__list">
777
+ <li class="pf-c-menu__list-item">
778
+ <a class="pf-c-menu__item" href="#">
779
+ <span class="pf-c-menu__item-main">
780
+ <span class="pf-c-menu__item-text">Dedicated (Annual)</span>
781
+ </span>
782
+ </a>
783
+ </li>
784
+ <li class="pf-c-menu__list-item">
785
+ <a class="pf-c-menu__item" href="#">
786
+ <span class="pf-c-menu__item-main">
787
+ <span class="pf-c-menu__item-text">Dedicated (On-Demand)</span>
788
+ </span>
789
+ </a>
790
+ </li>
791
+ <li class="pf-c-menu__list-item">
792
+ <a class="pf-c-menu__item" href="#">
793
+ <span class="pf-c-menu__item-main">
794
+ <span
795
+ class="pf-c-menu__item-text"
796
+ >Dedicated (On-Demand limits)</span>
797
+ </span>
798
+ </a>
799
+ </li>
800
+ </ul>
976
801
  </div>
977
- </li>
978
- <li class="pf-c-menu__list-item">
979
- <button class="pf-c-menu__item" type="button">
980
- <span class="pf-c-menu__item-main">
981
- <span class="pf-c-menu__item-text">Delete deployment config</span>
982
- </span>
983
- </button>
984
- </li>
985
- </ul>
986
- </div>
802
+ </div>
803
+ </li>
804
+ </ul>
987
805
  </div>
988
- </nav>
806
+ </div>
989
807
 
990
808
  ```
991
809
 
@@ -2230,4 +2048,5 @@ The navigation system relies on several different sub-components:
2230
2048
  | `.pf-m-expandable` | `.pf-c-nav__item` | Modifies for the expandable state. |
2231
2049
  | `.pf-m-expanded` | `.pf-c-nav__item` | Modifies for the expanded state. |
2232
2050
  | `.pf-m-current` | `.pf-c-nav__link` | Modifies for the current state. |
2051
+ | `.pf-m-hover` | `.pf-c-nav__link` | Modifies for the hover state. |
2233
2052
  | `.pf-m-start` | `.pf-c-nav__toggle` | Modifies nav toggle to align left. |