@patternfly/patternfly 5.0.0-alpha.31 → 5.0.0-alpha.33

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 (37) hide show
  1. package/components/DatePicker/date-picker.css +0 -8
  2. package/components/DatePicker/date-picker.scss +0 -9
  3. package/components/HelperText/helper-text.css +4 -0
  4. package/components/HelperText/helper-text.scss +5 -0
  5. package/components/InputGroup/input-group.css +61 -85
  6. package/components/InputGroup/input-group.scss +55 -61
  7. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  8. package/components/OptionsMenu/options-menu.css +0 -5
  9. package/components/OptionsMenu/options-menu.scss +0 -6
  10. package/docs/components/CalendarMonth/examples/CalendarMonth.md +268 -252
  11. package/docs/components/DatePicker/examples/DatePicker.md +129 -94
  12. package/docs/components/FileUpload/examples/FileUpload.md +136 -96
  13. package/docs/components/Form/examples/Form.md +94 -73
  14. package/docs/components/HelperText/examples/HelperText.md +13 -24
  15. package/docs/components/InputGroup/examples/InputGroup.md +219 -169
  16. package/docs/components/Login/examples/Login.md +67 -30
  17. package/docs/components/NumberInput/examples/NumberInput.md +299 -227
  18. package/docs/components/Progress/examples/Progress.md +1 -1
  19. package/docs/components/SearchInput/examples/SearchInput.md +151 -113
  20. package/docs/components/Slider/examples/Slider.md +60 -38
  21. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -132
  22. package/docs/components/Toolbar/examples/Toolbar.md +374 -345
  23. package/docs/demos/Alert/examples/Alert.md +105 -58
  24. package/docs/demos/DataList/examples/DataList.md +158 -150
  25. package/docs/demos/Form/examples/BasicForms.md +191 -191
  26. package/docs/demos/HelperText/examples/HelperText.md +11 -8
  27. package/docs/demos/Masthead/examples/Masthead.md +279 -258
  28. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +21 -17
  29. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +100 -84
  30. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +266 -232
  31. package/docs/demos/Table/examples/Table.md +950 -902
  32. package/docs/demos/Toolbar/examples/Toolbar.md +330 -299
  33. package/package.json +2 -2
  34. package/patternfly-no-reset.css +64 -87
  35. package/patternfly.css +64 -87
  36. package/patternfly.min.css +1 -1
  37. package/patternfly.min.css.map +1 -1
package/docs/components/TextInputGroup/examples/TextInputGroup.md CHANGED
@@ -56,9 +56,9 @@ cssPrefix: pf-c-text-input-group
56
56
  <input
57
57
  class="pf-c-text-input-group__text-input"
58
58
  type="text"
59
+ placeholder="placeholder"
59
60
  value
60
61
  aria-label="Type to filter"
61
- placeholder="placeholder"
62
62
  />
63
63
  </span>
64
64
  </div>
@@ -724,34 +724,44 @@ cssPrefix: pf-c-text-input-group
724
724
  <h3>Collapsed</h3>
725
725
  <br />
726
726
  <div class="pf-c-input-group pf-m-plain">
727
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Open search">
728
- <i class="fas fa-fw fa-search" aria-hidden="true"></i>
729
- </button>
727
+ <div class="pf-c-input-group__item pf-m-plain">
728
+ <button
729
+ class="pf-c-button pf-m-plain"
730
+ type="button"
731
+ aria-label="Open search"
732
+ >
733
+ <i class="fas fa-fw fa-search" aria-hidden="true"></i>
734
+ </button>
735
+ </div>
730
736
  </div>
731
737
  <br />
732
738
  <br />
733
739
  <h3>Expanded</h3>
734
740
  <br />
735
741
  <div class="pf-c-input-group pf-m-plain">
736
- <div class="pf-c-text-input-group">
737
- <div class="pf-c-text-input-group__main pf-m-icon">
738
- <span class="pf-c-text-input-group__text">
739
- <span class="pf-c-text-input-group__icon">
740
- <i class="fas fa-fw fa-search"></i>
742
+ <div class="pf-c-input-group__item pf-m-fill">
743
+ <div class="pf-c-text-input-group">
744
+ <div class="pf-c-text-input-group__main pf-m-icon">
745
+ <span class="pf-c-text-input-group__text">
746
+ <span class="pf-c-text-input-group__icon">
747
+ <i class="fas fa-fw fa-search"></i>
748
+ </span>
749
+ <input
750
+ class="pf-c-text-input-group__text-input"
751
+ type="search"
752
+ placeholder="Search"
753
+ value
754
+ aria-label="Type to filter"
755
+ />
741
756
  </span>
742
- <input
743
- class="pf-c-text-input-group__text-input"
744
- type="search"
745
- placeholder="Search"
746
- value
747
- aria-label="Type to filter"
748
- />
749
- </span>
757
+ </div>
750
758
  </div>
751
759
  </div>
752
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
753
- <i class="fas fa-times" aria-hidden="true"></i>
754
- </button>
760
+ <div class="pf-c-input-group__item pf-m-plain">
761
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
762
+ <i class="fas fa-times" aria-hidden="true"></i>
763
+ </button>
764
+ </div>
755
765
  </div>
756
766
 
757
767
  ```
@@ -760,25 +770,29 @@ cssPrefix: pf-c-text-input-group
760
770
 
761
771
  ```html
762
772
  <div class="pf-c-input-group">
763
- <div class="pf-c-text-input-group">
764
- <div class="pf-c-text-input-group__main pf-m-icon">
765
- <span class="pf-c-text-input-group__text">
766
- <span class="pf-c-text-input-group__icon">
767
- <i class="fas fa-fw fa-search"></i>
773
+ <div class="pf-c-input-group__item pf-m-fill">
774
+ <div class="pf-c-text-input-group">
775
+ <div class="pf-c-text-input-group__main pf-m-icon">
776
+ <span class="pf-c-text-input-group__text">
777
+ <span class="pf-c-text-input-group__icon">
778
+ <i class="fas fa-fw fa-search"></i>
779
+ </span>
780
+ <input
781
+ class="pf-c-text-input-group__text-input"
782
+ type="search"
783
+ placeholder="Find by name"
784
+ value
785
+ aria-label="Type to filter"
786
+ />
768
787
  </span>
769
- <input
770
- class="pf-c-text-input-group__text-input"
771
- type="search"
772
- placeholder="Find by name"
773
- value
774
- aria-label="Type to filter"
775
- />
776
- </span>
788
+ </div>
777
789
  </div>
778
790
  </div>
779
- <button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
780
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
781
- </button>
791
+ <div class="pf-c-input-group__item">
792
+ <button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
793
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
794
+ </button>
795
+ </div>
782
796
  </div>
783
797
 
784
798
  ```
@@ -787,41 +801,47 @@ cssPrefix: pf-c-text-input-group
787
801
 
788
802
  ```html
789
803
  <div class="pf-c-input-group">
790
- <div class="pf-c-text-input-group">
791
- <div class="pf-c-text-input-group__main pf-m-icon">
792
- <span class="pf-c-text-input-group__text">
793
- <span class="pf-c-text-input-group__icon">
794
- <i class="fas fa-fw fa-search"></i>
804
+ <div class="pf-c-input-group__item pf-m-fill">
805
+ <div class="pf-c-text-input-group">
806
+ <div class="pf-c-text-input-group__main pf-m-icon">
807
+ <span class="pf-c-text-input-group__text">
808
+ <span class="pf-c-text-input-group__icon">
809
+ <i class="fas fa-fw fa-search"></i>
810
+ </span>
811
+ <input
812
+ class="pf-c-text-input-group__text-input"
813
+ type="search"
814
+ value="username:root firstname:ned"
815
+ aria-label="Type to filter"
816
+ />
795
817
  </span>
796
- <input
797
- class="pf-c-text-input-group__text-input"
798
- type="search"
799
- value="username:root firstname:ned"
800
- aria-label="Type to filter"
801
- />
802
- </span>
803
- </div>
804
- <div class="pf-c-text-input-group__utilities">
805
- <button
806
- class="pf-c-button pf-m-plain"
807
- type="button"
808
- aria-label="Clear input"
809
- >
810
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
811
- </button>
818
+ </div>
819
+ <div class="pf-c-text-input-group__utilities">
820
+ <button
821
+ class="pf-c-button pf-m-plain"
822
+ type="button"
823
+ aria-label="Clear input"
824
+ >
825
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
826
+ </button>
827
+ </div>
812
828
  </div>
813
829
  </div>
814
- <button
815
- class="pf-c-button pf-m-control"
816
- type="button"
817
- aria-expanded="false"
818
- aria-label="Advanced search"
819
- >
820
- <i class="fas fa-caret-down" aria-hidden="true"></i>
821
- </button>
822
- <button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
823
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
824
- </button>
830
+ <div class="pf-c-input-group__item">
831
+ <button
832
+ class="pf-c-button pf-m-control"
833
+ type="button"
834
+ aria-expanded="false"
835
+ aria-label="Advanced search"
836
+ >
837
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
838
+ </button>
839
+ </div>
840
+ <div class="pf-c-input-group__item">
841
+ <button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
842
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
843
+ </button>
844
+ </div>
825
845
  </div>
826
846
 
827
847
  ```
@@ -830,41 +850,47 @@ cssPrefix: pf-c-text-input-group
830
850
 
831
851
  ```html
832
852
  <div class="pf-c-input-group">
833
- <div class="pf-c-text-input-group">
834
- <div class="pf-c-text-input-group__main pf-m-icon">
835
- <span class="pf-c-text-input-group__text">
836
- <span class="pf-c-text-input-group__icon">
837
- <i class="fas fa-fw fa-search"></i>
853
+ <div class="pf-c-input-group__item pf-m-fill">
854
+ <div class="pf-c-text-input-group">
855
+ <div class="pf-c-text-input-group__main pf-m-icon">
856
+ <span class="pf-c-text-input-group__text">
857
+ <span class="pf-c-text-input-group__icon">
858
+ <i class="fas fa-fw fa-search"></i>
859
+ </span>
860
+ <input
861
+ class="pf-c-text-input-group__text-input"
862
+ type="search"
863
+ value="username:root firstname:ned"
864
+ aria-label="Type to filter"
865
+ />
838
866
  </span>
839
- <input
840
- class="pf-c-text-input-group__text-input"
841
- type="search"
842
- value="username:root firstname:ned"
843
- aria-label="Type to filter"
844
- />
845
- </span>
846
- </div>
847
- <div class="pf-c-text-input-group__utilities">
848
- <button
849
- class="pf-c-button pf-m-plain"
850
- type="button"
851
- aria-label="Clear input"
852
- >
853
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
854
- </button>
867
+ </div>
868
+ <div class="pf-c-text-input-group__utilities">
869
+ <button
870
+ class="pf-c-button pf-m-plain"
871
+ type="button"
872
+ aria-label="Clear input"
873
+ >
874
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
875
+ </button>
876
+ </div>
855
877
  </div>
856
878
  </div>
857
- <button
858
- class="pf-c-button pf-m-control pf-m-expanded"
859
- type="button"
860
- aria-expanded="true"
861
- aria-label="Advanced search"
862
- >
863
- <i class="fas fa-caret-down" aria-hidden="true"></i>
864
- </button>
865
- <button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
866
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
867
- </button>
879
+ <div class="pf-c-input-group__item">
880
+ <button
881
+ class="pf-c-button pf-m-control pf-m-expanded"
882
+ type="button"
883
+ aria-expanded="true"
884
+ aria-label="Advanced search"
885
+ >
886
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
887
+ </button>
888
+ </div>
889
+ <div class="pf-c-input-group__item">
890
+ <button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
891
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
892
+ </button>
893
+ </div>
868
894
  </div>
869
895
 
870
896
  <div class="pf-c-panel pf-m-raised">
@@ -1065,41 +1091,51 @@ cssPrefix: pf-c-text-input-group
1065
1091
  ```html
1066
1092
  <div class="ws-example-wrapper">
1067
1093
  <div class="pf-c-input-group">
1068
- <div class="pf-c-text-input-group">
1069
- <div class="pf-c-text-input-group__main pf-m-icon">
1070
- <span class="pf-c-text-input-group__text">
1071
- <span class="pf-c-text-input-group__icon">
1072
- <i class="fas fa-fw fa-search"></i>
1094
+ <div class="pf-c-input-group__item pf-m-fill">
1095
+ <div class="pf-c-text-input-group">
1096
+ <div class="pf-c-text-input-group__main pf-m-icon">
1097
+ <span class="pf-c-text-input-group__text">
1098
+ <span class="pf-c-text-input-group__icon">
1099
+ <i class="fas fa-fw fa-search"></i>
1100
+ </span>
1101
+ <input
1102
+ class="pf-c-text-input-group__text-input"
1103
+ type="search"
1104
+ value="username:root firstname:n"
1105
+ aria-label="Type to filter"
1106
+ />
1073
1107
  </span>
1074
- <input
1075
- class="pf-c-text-input-group__text-input"
1076
- type="search"
1077
- value="username:root firstname:n"
1078
- aria-label="Type to filter"
1079
- />
1080
- </span>
1081
- </div>
1082
- <div class="pf-c-text-input-group__utilities">
1083
- <button
1084
- class="pf-c-button pf-m-plain"
1085
- type="button"
1086
- aria-label="Clear input"
1087
- >
1088
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1089
- </button>
1108
+ </div>
1109
+ <div class="pf-c-text-input-group__utilities">
1110
+ <button
1111
+ class="pf-c-button pf-m-plain"
1112
+ type="button"
1113
+ aria-label="Clear input"
1114
+ >
1115
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1116
+ </button>
1117
+ </div>
1090
1118
  </div>
1091
1119
  </div>
1092
- <button
1093
- class="pf-c-button pf-m-control pf-m-expanded"
1094
- type="button"
1095
- aria-expanded="true"
1096
- aria-label="Advanced search"
1097
- >
1098
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1099
- </button>
1100
- <button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
1101
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
1102
- </button>
1120
+ <div class="pf-c-input-group__item">
1121
+ <button
1122
+ class="pf-c-button pf-m-control pf-m-expanded"
1123
+ type="button"
1124
+ aria-expanded="true"
1125
+ aria-label="Advanced search"
1126
+ >
1127
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1128
+ </button>
1129
+ </div>
1130
+ <div class="pf-c-input-group__item">
1131
+ <button
1132
+ class="pf-c-button pf-m-control"
1133
+ type="submit"
1134
+ aria-label="Search"
1135
+ >
1136
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
1137
+ </button>
1138
+ </div>
1103
1139
  </div>
1104
1140
 
1105
1141
  <div class="pf-c-panel pf-m-raised">