@patternfly/patternfly 4.158.0 → 4.160.0

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 (25) hide show
  1. package/README.md +2 -2
  2. package/RELEASE-NOTES.md +30 -0
  3. package/components/Menu/menu.css +84 -0
  4. package/components/Menu/menu.scss +109 -0
  5. package/components/Nav/nav.css +3 -3
  6. package/components/Nav/nav.scss +2 -1
  7. package/components/Table/table.css +3 -3
  8. package/components/Table/table.scss +3 -3
  9. package/components/Toolbar/toolbar.css +4 -2
  10. package/components/Toolbar/toolbar.scss +6 -2
  11. package/docs/components/Menu/examples/Menu.md +1 -0
  12. package/docs/components/Nav/examples/Navigation.css +12 -4
  13. package/docs/components/Nav/examples/Navigation.md +51 -232
  14. package/docs/components/Select/examples/Select.md +12 -11
  15. package/docs/components/Table/examples/Table.md +2168 -76
  16. package/docs/demos/Button/examples/Button.md +176 -0
  17. package/docs/demos/Card/examples/Card.md +164 -112
  18. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +79 -0
  19. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
  20. package/docs/demos/Table/examples/Table.md +3734 -95
  21. package/package.json +1 -1
  22. package/patternfly-no-reset.css +94 -8
  23. package/patternfly.css +94 -8
  24. package/patternfly.min.css +1 -1
  25. 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. |
package/docs/components/Select/examples/Select.md CHANGED
@@ -235,17 +235,18 @@ The single select should be used when the user is selecting an option from a lis
235
235
 
236
236
  ### Usage
237
237
 
238
- | Class | Applied to | Outcome |
239
- | ------------------------------ | -------------- | ------------------------------------------------------- |
240
- | `.pf-c-select` | `<div>` | Initiates a custom select. |
241
- | `.pf-c-select__toggle` | `<button>` | Initiates a custom toggle. |
242
- | `.pf-c-select__toggle-wrapper` | `<div>` | Initiates a custom select toggle wrapper. |
243
- | `.pf-c-select__toggle-arrow` | `<span>` | Initiates the caret to toggle the dropdown. |
244
- | `.pf-c-select__menu` | `<ul>` | Initiates the custom select dropdown menu. |
245
- | `.pf-c-select__menu-item` | `<li>` | Initiates the items in the custom select dropdown menu. |
246
- | `.pf-c-select__menu-item-icon` | `<i>` | Initiates the selected item icon. |
247
- | `.pf-m-top` | `.pf-c-select` | Modifies the select menu to display above the toggle. |
248
- | `.pf-m-active` | `.pf-c-select` | Forces display of the active state of the toggle. |
238
+ | Class | Applied to | Outcome |
239
+ | ------------------------------ | -------------------- | ---------------------------------------------------------------- |
240
+ | `.pf-c-select` | `<div>` | Initiates a custom select. |
241
+ | `.pf-c-select__toggle` | `<button>` | Initiates a custom toggle. |
242
+ | `.pf-c-select__toggle-wrapper` | `<div>` | Initiates a custom select toggle wrapper. |
243
+ | `.pf-c-select__toggle-arrow` | `<span>` | Initiates the caret to toggle the dropdown. |
244
+ | `.pf-c-select__menu` | `<ul>` | Initiates the custom select dropdown menu. |
245
+ | `.pf-c-select__menu-item` | `<li>` | Initiates the items in the custom select dropdown menu. |
246
+ | `.pf-c-select__menu-item-icon` | `<i>` | Initiates the selected item icon. |
247
+ | `.pf-m-top` | `.pf-c-select` | Modifies the select menu to display above the toggle. |
248
+ | `.pf-m-align-right` | `.pf-c-select__menu` | Modifies the select menu to display right aligned to the toggle. |
249
+ | `.pf-m-active` | `.pf-c-select` | Forces display of the active state of the toggle. |
249
250
 
250
251
  ## States
251
252