@patternfly/patternfly 5.0.0-alpha.30 → 5.0.0-alpha.32

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 (29) hide show
  1. package/components/InputGroup/input-group.css +61 -85
  2. package/components/InputGroup/input-group.scss +55 -61
  3. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  4. package/components/OptionsMenu/options-menu.css +0 -5
  5. package/components/OptionsMenu/options-menu.scss +0 -6
  6. package/components/Toolbar/toolbar.css +11 -4
  7. package/components/Toolbar/toolbar.scss +11 -5
  8. package/docs/components/CalendarMonth/examples/CalendarMonth.md +268 -252
  9. package/docs/components/DatePicker/examples/DatePicker.md +115 -91
  10. package/docs/components/FileUpload/examples/FileUpload.md +127 -91
  11. package/docs/components/InputGroup/examples/InputGroup.md +219 -169
  12. package/docs/components/NumberInput/examples/NumberInput.md +299 -227
  13. package/docs/components/SearchInput/examples/SearchInput.md +151 -113
  14. package/docs/components/Slider/examples/Slider.md +60 -38
  15. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -132
  16. package/docs/components/Toolbar/examples/Toolbar.md +374 -345
  17. package/docs/demos/DataList/examples/DataList.md +158 -150
  18. package/docs/demos/Form/examples/BasicForms.md +77 -66
  19. package/docs/demos/Masthead/examples/Masthead.md +279 -258
  20. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +21 -17
  21. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +103 -121
  22. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +266 -238
  23. package/docs/demos/Table/examples/Table.md +949 -901
  24. package/docs/demos/Toolbar/examples/Toolbar.md +313 -294
  25. package/package.json +1 -1
  26. package/patternfly-no-reset.css +71 -83
  27. package/patternfly.css +71 -83
  28. package/patternfly.min.css +1 -1
  29. package/patternfly.min.css.map +1 -1
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -914,92 +914,104 @@ wrapperTag: div
914
914
  aria-label="search filter"
915
915
  role="group"
916
916
  >
917
- <div class="pf-c-select" style="width: 175px">
918
- <span
919
- id="primary-detail-expanded-example-drawer-toolbar-select-name-label"
920
- hidden
921
- >Choose one</span>
917
+ <div class="pf-c-input-group__item pf-m-fill">
918
+ <div class="pf-c-select" style="width: 124px">
919
+ <span
920
+ id="primary-detail-expanded-example-drawer-toolbar-select-name-label"
921
+ hidden
922
+ >Choose one</span>
922
923
 
923
- <button
924
- class="pf-c-select__toggle"
925
- type="button"
926
- id="primary-detail-expanded-example-drawer-toolbar-select-name-toggle"
927
- aria-haspopup="true"
928
- aria-expanded="false"
929
- aria-labelledby="primary-detail-expanded-example-drawer-toolbar-select-name-label primary-detail-expanded-example-drawer-toolbar-select-name-toggle"
930
- >
931
- <div class="pf-c-select__toggle-wrapper">
932
- <span class="pf-c-select__toggle-icon">
933
- <i class="fas fa-filter" aria-hidden="true"></i>
924
+ <button
925
+ class="pf-c-select__toggle"
926
+ type="button"
927
+ id="primary-detail-expanded-example-drawer-toolbar-select-name-toggle"
928
+ aria-haspopup="true"
929
+ aria-expanded="false"
930
+ aria-labelledby="primary-detail-expanded-example-drawer-toolbar-select-name-label primary-detail-expanded-example-drawer-toolbar-select-name-toggle"
931
+ >
932
+ <div class="pf-c-select__toggle-wrapper">
933
+ <span class="pf-c-select__toggle-icon">
934
+ <i class="fas fa-filter" aria-hidden="true"></i>
935
+ </span>
936
+ <span class="pf-c-select__toggle-text">Name</span>
937
+ </div>
938
+ <span class="pf-c-select__toggle-arrow">
939
+ <i
940
+ class="fas fa-caret-down"
941
+ aria-hidden="true"
942
+ ></i>
934
943
  </span>
935
- <span class="pf-c-select__toggle-text">Name</span>
936
- </div>
937
- <span class="pf-c-select__toggle-arrow">
938
- <i class="fas fa-caret-down" aria-hidden="true"></i>
939
- </span>
940
- </button>
944
+ </button>
941
945
 
942
- <ul
943
- class="pf-c-select__menu"
944
- role="listbox"
945
- aria-labelledby="primary-detail-expanded-example-drawer-toolbar-select-name-label"
946
- hidden
946
+ <ul
947
+ class="pf-c-select__menu"
948
+ role="listbox"
949
+ aria-labelledby="primary-detail-expanded-example-drawer-toolbar-select-name-label"
950
+ hidden
951
+ >
952
+ <li role="presentation">
953
+ <button
954
+ class="pf-c-select__menu-item"
955
+ role="option"
956
+ >Running</button>
957
+ </li>
958
+ <li role="presentation">
959
+ <button
960
+ class="pf-c-select__menu-item pf-m-selected"
961
+ role="option"
962
+ aria-selected="true"
963
+ >
964
+ Stopped
965
+ <span class="pf-c-select__menu-item-icon">
966
+ <i
967
+ class="fas fa-check"
968
+ aria-hidden="true"
969
+ ></i>
970
+ </span>
971
+ </button>
972
+ </li>
973
+ <li role="presentation">
974
+ <button
975
+ class="pf-c-select__menu-item"
976
+ role="option"
977
+ >Down</button>
978
+ </li>
979
+ <li role="presentation">
980
+ <button
981
+ class="pf-c-select__menu-item"
982
+ role="option"
983
+ >Degraded</button>
984
+ </li>
985
+ <li role="presentation">
986
+ <button
987
+ class="pf-c-select__menu-item"
988
+ role="option"
989
+ >Needs maintenance</button>
990
+ </li>
991
+ </ul>
992
+ </div>
993
+ </div>
994
+ <div class="pf-c-input-group__item">
995
+ <div
996
+ class="pf-c-text-input-group"
997
+ style="width: auto"
947
998
  >
948
- <li role="presentation">
949
- <button
950
- class="pf-c-select__menu-item"
951
- role="option"
952
- >Running</button>
953
- </li>
954
- <li role="presentation">
955
- <button
956
- class="pf-c-select__menu-item pf-m-selected"
957
- role="option"
958
- aria-selected="true"
959
- >
960
- Stopped
961
- <span class="pf-c-select__menu-item-icon">
962
- <i class="fas fa-check" aria-hidden="true"></i>
999
+ <div
1000
+ class="pf-c-text-input-group__main pf-m-icon"
1001
+ >
1002
+ <span class="pf-c-text-input-group__text">
1003
+ <span class="pf-c-text-input-group__icon">
1004
+ <i class="fas fa-fw fa-search"></i>
963
1005
  </span>
964
- </button>
965
- </li>
966
- <li role="presentation">
967
- <button
968
- class="pf-c-select__menu-item"
969
- role="option"
970
- >Down</button>
971
- </li>
972
- <li role="presentation">
973
- <button
974
- class="pf-c-select__menu-item"
975
- role="option"
976
- >Degraded</button>
977
- </li>
978
- <li role="presentation">
979
- <button
980
- class="pf-c-select__menu-item"
981
- role="option"
982
- >Needs maintenance</button>
983
- </li>
984
- </ul>
985
- </div>
986
- <div
987
- class="pf-c-text-input-group"
988
- style="width: auto"
989
- >
990
- <div class="pf-c-text-input-group__main pf-m-icon">
991
- <span class="pf-c-text-input-group__text">
992
- <span class="pf-c-text-input-group__icon">
993
- <i class="fas fa-fw fa-search"></i>
1006
+ <input
1007
+ class="pf-c-text-input-group__text-input"
1008
+ type="search"
1009
+ placeholder="Filter by name"
1010
+ value
1011
+ aria-label="Type to filter"
1012
+ />
994
1013
  </span>
995
- <input
996
- class="pf-c-text-input-group__text-input"
997
- type="search"
998
- placeholder="Filter by name"
999
- value
1000
- aria-label="Type to filter"
1001
- />
1002
- </span>
1014
+ </div>
1003
1015
  </div>
1004
1016
  </div>
1005
1017
  </div>
@@ -2793,92 +2805,104 @@ wrapperTag: div
2793
2805
  aria-label="search filter"
2794
2806
  role="group"
2795
2807
  >
2796
- <div class="pf-c-select" style="width: 175px">
2797
- <span
2798
- id="primary-detail-collapsed-example-drawer-toolbar-select-name-label"
2799
- hidden
2800
- >Choose one</span>
2808
+ <div class="pf-c-input-group__item pf-m-fill">
2809
+ <div class="pf-c-select" style="width: 124px">
2810
+ <span
2811
+ id="primary-detail-collapsed-example-drawer-toolbar-select-name-label"
2812
+ hidden
2813
+ >Choose one</span>
2801
2814
 
2802
- <button
2803
- class="pf-c-select__toggle"
2804
- type="button"
2805
- id="primary-detail-collapsed-example-drawer-toolbar-select-name-toggle"
2806
- aria-haspopup="true"
2807
- aria-expanded="false"
2808
- aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-select-name-label primary-detail-collapsed-example-drawer-toolbar-select-name-toggle"
2809
- >
2810
- <div class="pf-c-select__toggle-wrapper">
2811
- <span class="pf-c-select__toggle-icon">
2812
- <i class="fas fa-filter" aria-hidden="true"></i>
2815
+ <button
2816
+ class="pf-c-select__toggle"
2817
+ type="button"
2818
+ id="primary-detail-collapsed-example-drawer-toolbar-select-name-toggle"
2819
+ aria-haspopup="true"
2820
+ aria-expanded="false"
2821
+ aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-select-name-label primary-detail-collapsed-example-drawer-toolbar-select-name-toggle"
2822
+ >
2823
+ <div class="pf-c-select__toggle-wrapper">
2824
+ <span class="pf-c-select__toggle-icon">
2825
+ <i class="fas fa-filter" aria-hidden="true"></i>
2826
+ </span>
2827
+ <span class="pf-c-select__toggle-text">Name</span>
2828
+ </div>
2829
+ <span class="pf-c-select__toggle-arrow">
2830
+ <i
2831
+ class="fas fa-caret-down"
2832
+ aria-hidden="true"
2833
+ ></i>
2813
2834
  </span>
2814
- <span class="pf-c-select__toggle-text">Name</span>
2815
- </div>
2816
- <span class="pf-c-select__toggle-arrow">
2817
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2818
- </span>
2819
- </button>
2835
+ </button>
2820
2836
 
2821
- <ul
2822
- class="pf-c-select__menu"
2823
- role="listbox"
2824
- aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-select-name-label"
2825
- hidden
2837
+ <ul
2838
+ class="pf-c-select__menu"
2839
+ role="listbox"
2840
+ aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-select-name-label"
2841
+ hidden
2842
+ >
2843
+ <li role="presentation">
2844
+ <button
2845
+ class="pf-c-select__menu-item"
2846
+ role="option"
2847
+ >Running</button>
2848
+ </li>
2849
+ <li role="presentation">
2850
+ <button
2851
+ class="pf-c-select__menu-item pf-m-selected"
2852
+ role="option"
2853
+ aria-selected="true"
2854
+ >
2855
+ Stopped
2856
+ <span class="pf-c-select__menu-item-icon">
2857
+ <i
2858
+ class="fas fa-check"
2859
+ aria-hidden="true"
2860
+ ></i>
2861
+ </span>
2862
+ </button>
2863
+ </li>
2864
+ <li role="presentation">
2865
+ <button
2866
+ class="pf-c-select__menu-item"
2867
+ role="option"
2868
+ >Down</button>
2869
+ </li>
2870
+ <li role="presentation">
2871
+ <button
2872
+ class="pf-c-select__menu-item"
2873
+ role="option"
2874
+ >Degraded</button>
2875
+ </li>
2876
+ <li role="presentation">
2877
+ <button
2878
+ class="pf-c-select__menu-item"
2879
+ role="option"
2880
+ >Needs maintenance</button>
2881
+ </li>
2882
+ </ul>
2883
+ </div>
2884
+ </div>
2885
+ <div class="pf-c-input-group__item">
2886
+ <div
2887
+ class="pf-c-text-input-group"
2888
+ style="width: auto"
2826
2889
  >
2827
- <li role="presentation">
2828
- <button
2829
- class="pf-c-select__menu-item"
2830
- role="option"
2831
- >Running</button>
2832
- </li>
2833
- <li role="presentation">
2834
- <button
2835
- class="pf-c-select__menu-item pf-m-selected"
2836
- role="option"
2837
- aria-selected="true"
2838
- >
2839
- Stopped
2840
- <span class="pf-c-select__menu-item-icon">
2841
- <i class="fas fa-check" aria-hidden="true"></i>
2890
+ <div
2891
+ class="pf-c-text-input-group__main pf-m-icon"
2892
+ >
2893
+ <span class="pf-c-text-input-group__text">
2894
+ <span class="pf-c-text-input-group__icon">
2895
+ <i class="fas fa-fw fa-search"></i>
2842
2896
  </span>
2843
- </button>
2844
- </li>
2845
- <li role="presentation">
2846
- <button
2847
- class="pf-c-select__menu-item"
2848
- role="option"
2849
- >Down</button>
2850
- </li>
2851
- <li role="presentation">
2852
- <button
2853
- class="pf-c-select__menu-item"
2854
- role="option"
2855
- >Degraded</button>
2856
- </li>
2857
- <li role="presentation">
2858
- <button
2859
- class="pf-c-select__menu-item"
2860
- role="option"
2861
- >Needs maintenance</button>
2862
- </li>
2863
- </ul>
2864
- </div>
2865
- <div
2866
- class="pf-c-text-input-group"
2867
- style="width: auto"
2868
- >
2869
- <div class="pf-c-text-input-group__main pf-m-icon">
2870
- <span class="pf-c-text-input-group__text">
2871
- <span class="pf-c-text-input-group__icon">
2872
- <i class="fas fa-fw fa-search"></i>
2897
+ <input
2898
+ class="pf-c-text-input-group__text-input"
2899
+ type="search"
2900
+ placeholder="Filter by name"
2901
+ value
2902
+ aria-label="Type to filter"
2903
+ />
2873
2904
  </span>
2874
- <input
2875
- class="pf-c-text-input-group__text-input"
2876
- type="search"
2877
- placeholder="Filter by name"
2878
- value
2879
- aria-label="Type to filter"
2880
- />
2881
- </span>
2905
+ </div>
2882
2906
  </div>
2883
2907
  </div>
2884
2908
  </div>
@@ -6353,89 +6377,93 @@ wrapperTag: div
6353
6377
  aria-label="search filter"
6354
6378
  role="group"
6355
6379
  >
6356
- <div class="pf-c-select" style="width: 175px">
6357
- <span
6358
- id="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label"
6359
- hidden
6360
- >Choose one</span>
6380
+ <div class="pf-c-input-group__item pf-m-fill">
6381
+ <div class="pf-c-select" style="width: 124px">
6382
+ <span
6383
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label"
6384
+ hidden
6385
+ >Choose one</span>
6361
6386
 
6362
- <button
6363
- class="pf-c-select__toggle"
6364
- type="button"
6365
- id="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-toggle"
6366
- aria-haspopup="true"
6367
- aria-expanded="false"
6368
- aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label primary-detail-card-view-expanded-example-drawer-toolbar-select-name-toggle"
6369
- >
6370
- <div class="pf-c-select__toggle-wrapper">
6371
- <span class="pf-c-select__toggle-icon">
6372
- <i class="fas fa-filter" aria-hidden="true"></i>
6387
+ <button
6388
+ class="pf-c-select__toggle"
6389
+ type="button"
6390
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-toggle"
6391
+ aria-haspopup="true"
6392
+ aria-expanded="false"
6393
+ aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label primary-detail-card-view-expanded-example-drawer-toolbar-select-name-toggle"
6394
+ >
6395
+ <div class="pf-c-select__toggle-wrapper">
6396
+ <span class="pf-c-select__toggle-icon">
6397
+ <i class="fas fa-filter" aria-hidden="true"></i>
6398
+ </span>
6399
+ <span class="pf-c-select__toggle-text">Name</span>
6400
+ </div>
6401
+ <span class="pf-c-select__toggle-arrow">
6402
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
6373
6403
  </span>
6374
- <span class="pf-c-select__toggle-text">Name</span>
6375
- </div>
6376
- <span class="pf-c-select__toggle-arrow">
6377
- <i class="fas fa-caret-down" aria-hidden="true"></i>
6378
- </span>
6379
- </button>
6404
+ </button>
6380
6405
 
6381
- <ul
6382
- class="pf-c-select__menu"
6383
- role="listbox"
6384
- aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label"
6385
- hidden
6386
- >
6387
- <li role="presentation">
6388
- <button
6389
- class="pf-c-select__menu-item"
6390
- role="option"
6391
- >Running</button>
6392
- </li>
6393
- <li role="presentation">
6394
- <button
6395
- class="pf-c-select__menu-item pf-m-selected"
6396
- role="option"
6397
- aria-selected="true"
6398
- >
6399
- Stopped
6400
- <span class="pf-c-select__menu-item-icon">
6401
- <i class="fas fa-check" aria-hidden="true"></i>
6402
- </span>
6403
- </button>
6404
- </li>
6405
- <li role="presentation">
6406
- <button
6407
- class="pf-c-select__menu-item"
6408
- role="option"
6409
- >Down</button>
6410
- </li>
6411
- <li role="presentation">
6412
- <button
6413
- class="pf-c-select__menu-item"
6414
- role="option"
6415
- >Degraded</button>
6416
- </li>
6417
- <li role="presentation">
6418
- <button
6419
- class="pf-c-select__menu-item"
6420
- role="option"
6421
- >Needs maintenance</button>
6422
- </li>
6423
- </ul>
6406
+ <ul
6407
+ class="pf-c-select__menu"
6408
+ role="listbox"
6409
+ aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label"
6410
+ hidden
6411
+ >
6412
+ <li role="presentation">
6413
+ <button
6414
+ class="pf-c-select__menu-item"
6415
+ role="option"
6416
+ >Running</button>
6417
+ </li>
6418
+ <li role="presentation">
6419
+ <button
6420
+ class="pf-c-select__menu-item pf-m-selected"
6421
+ role="option"
6422
+ aria-selected="true"
6423
+ >
6424
+ Stopped
6425
+ <span class="pf-c-select__menu-item-icon">
6426
+ <i class="fas fa-check" aria-hidden="true"></i>
6427
+ </span>
6428
+ </button>
6429
+ </li>
6430
+ <li role="presentation">
6431
+ <button
6432
+ class="pf-c-select__menu-item"
6433
+ role="option"
6434
+ >Down</button>
6435
+ </li>
6436
+ <li role="presentation">
6437
+ <button
6438
+ class="pf-c-select__menu-item"
6439
+ role="option"
6440
+ >Degraded</button>
6441
+ </li>
6442
+ <li role="presentation">
6443
+ <button
6444
+ class="pf-c-select__menu-item"
6445
+ role="option"
6446
+ >Needs maintenance</button>
6447
+ </li>
6448
+ </ul>
6449
+ </div>
6424
6450
  </div>
6425
- <div class="pf-c-text-input-group" style="width: auto">
6426
- <div class="pf-c-text-input-group__main pf-m-icon">
6427
- <span class="pf-c-text-input-group__text">
6428
- <span class="pf-c-text-input-group__icon">
6429
- <i class="fas fa-fw fa-search"></i>
6451
+ <div class="pf-c-input-group__item">
6452
+ <div class="pf-c-text-input-group" style="width: auto">
6453
+ <div class="pf-c-text-input-group__main pf-m-icon">
6454
+ <span class="pf-c-text-input-group__text">
6455
+ <span class="pf-c-text-input-group__icon">
6456
+ <i class="fas fa-fw fa-search"></i>
6457
+ </span>
6458
+ <input
6459
+ class="pf-c-text-input-group__text-input"
6460
+ type="search"
6461
+ placeholder="Filter by name"
6462
+ value
6463
+ aria-label="Type to filter"
6464
+ />
6430
6465
  </span>
6431
- <input
6432
- class="pf-c-text-input-group__text-input"
6433
- type="search"
6434
- placeholder="Filter by name"
6435
- value
6436
- aria-label="Type to filter"
6437
- />
6438
- </span>
6466
+ </div>
6439
6467
  </div>
6440
6468
  </div>
6441
6469
  </div>