@patternfly/patternfly 5.0.0-alpha.31 → 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 (27) 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/docs/components/CalendarMonth/examples/CalendarMonth.md +268 -252
  7. package/docs/components/DatePicker/examples/DatePicker.md +115 -91
  8. package/docs/components/FileUpload/examples/FileUpload.md +127 -91
  9. package/docs/components/InputGroup/examples/InputGroup.md +219 -169
  10. package/docs/components/NumberInput/examples/NumberInput.md +299 -227
  11. package/docs/components/SearchInput/examples/SearchInput.md +151 -113
  12. package/docs/components/Slider/examples/Slider.md +60 -38
  13. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -132
  14. package/docs/components/Toolbar/examples/Toolbar.md +374 -345
  15. package/docs/demos/DataList/examples/DataList.md +158 -150
  16. package/docs/demos/Form/examples/BasicForms.md +77 -66
  17. package/docs/demos/Masthead/examples/Masthead.md +279 -258
  18. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +21 -17
  19. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +103 -121
  20. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +266 -232
  21. package/docs/demos/Table/examples/Table.md +950 -902
  22. package/docs/demos/Toolbar/examples/Toolbar.md +313 -294
  23. package/package.json +1 -1
  24. package/patternfly-no-reset.css +60 -79
  25. package/patternfly.css +60 -79
  26. package/patternfly.min.css +1 -1
  27. package/patternfly.min.css.map +1 -1
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -914,89 +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 class="pf-c-text-input-group">
987
- <div class="pf-c-text-input-group__main pf-m-icon">
988
- <span class="pf-c-text-input-group__text">
989
- <span class="pf-c-text-input-group__icon">
990
- <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
+ />
991
1013
  </span>
992
- <input
993
- class="pf-c-text-input-group__text-input"
994
- type="search"
995
- placeholder="Filter by name"
996
- value
997
- aria-label="Type to filter"
998
- />
999
- </span>
1014
+ </div>
1000
1015
  </div>
1001
1016
  </div>
1002
1017
  </div>
@@ -2790,89 +2805,104 @@ wrapperTag: div
2790
2805
  aria-label="search filter"
2791
2806
  role="group"
2792
2807
  >
2793
- <div class="pf-c-select" style="width: 175px">
2794
- <span
2795
- id="primary-detail-collapsed-example-drawer-toolbar-select-name-label"
2796
- hidden
2797
- >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>
2798
2814
 
2799
- <button
2800
- class="pf-c-select__toggle"
2801
- type="button"
2802
- id="primary-detail-collapsed-example-drawer-toolbar-select-name-toggle"
2803
- aria-haspopup="true"
2804
- aria-expanded="false"
2805
- aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-select-name-label primary-detail-collapsed-example-drawer-toolbar-select-name-toggle"
2806
- >
2807
- <div class="pf-c-select__toggle-wrapper">
2808
- <span class="pf-c-select__toggle-icon">
2809
- <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>
2810
2834
  </span>
2811
- <span class="pf-c-select__toggle-text">Name</span>
2812
- </div>
2813
- <span class="pf-c-select__toggle-arrow">
2814
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2815
- </span>
2816
- </button>
2835
+ </button>
2817
2836
 
2818
- <ul
2819
- class="pf-c-select__menu"
2820
- role="listbox"
2821
- aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-select-name-label"
2822
- 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"
2823
2889
  >
2824
- <li role="presentation">
2825
- <button
2826
- class="pf-c-select__menu-item"
2827
- role="option"
2828
- >Running</button>
2829
- </li>
2830
- <li role="presentation">
2831
- <button
2832
- class="pf-c-select__menu-item pf-m-selected"
2833
- role="option"
2834
- aria-selected="true"
2835
- >
2836
- Stopped
2837
- <span class="pf-c-select__menu-item-icon">
2838
- <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>
2839
2896
  </span>
2840
- </button>
2841
- </li>
2842
- <li role="presentation">
2843
- <button
2844
- class="pf-c-select__menu-item"
2845
- role="option"
2846
- >Down</button>
2847
- </li>
2848
- <li role="presentation">
2849
- <button
2850
- class="pf-c-select__menu-item"
2851
- role="option"
2852
- >Degraded</button>
2853
- </li>
2854
- <li role="presentation">
2855
- <button
2856
- class="pf-c-select__menu-item"
2857
- role="option"
2858
- >Needs maintenance</button>
2859
- </li>
2860
- </ul>
2861
- </div>
2862
- <div class="pf-c-text-input-group">
2863
- <div class="pf-c-text-input-group__main pf-m-icon">
2864
- <span class="pf-c-text-input-group__text">
2865
- <span class="pf-c-text-input-group__icon">
2866
- <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
+ />
2867
2904
  </span>
2868
- <input
2869
- class="pf-c-text-input-group__text-input"
2870
- type="search"
2871
- placeholder="Filter by name"
2872
- value
2873
- aria-label="Type to filter"
2874
- />
2875
- </span>
2905
+ </div>
2876
2906
  </div>
2877
2907
  </div>
2878
2908
  </div>
@@ -6347,89 +6377,93 @@ wrapperTag: div
6347
6377
  aria-label="search filter"
6348
6378
  role="group"
6349
6379
  >
6350
- <div class="pf-c-select" style="width: 175px">
6351
- <span
6352
- id="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label"
6353
- hidden
6354
- >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>
6355
6386
 
6356
- <button
6357
- class="pf-c-select__toggle"
6358
- type="button"
6359
- id="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-toggle"
6360
- aria-haspopup="true"
6361
- aria-expanded="false"
6362
- aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label primary-detail-card-view-expanded-example-drawer-toolbar-select-name-toggle"
6363
- >
6364
- <div class="pf-c-select__toggle-wrapper">
6365
- <span class="pf-c-select__toggle-icon">
6366
- <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>
6367
6403
  </span>
6368
- <span class="pf-c-select__toggle-text">Name</span>
6369
- </div>
6370
- <span class="pf-c-select__toggle-arrow">
6371
- <i class="fas fa-caret-down" aria-hidden="true"></i>
6372
- </span>
6373
- </button>
6404
+ </button>
6374
6405
 
6375
- <ul
6376
- class="pf-c-select__menu"
6377
- role="listbox"
6378
- aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label"
6379
- hidden
6380
- >
6381
- <li role="presentation">
6382
- <button
6383
- class="pf-c-select__menu-item"
6384
- role="option"
6385
- >Running</button>
6386
- </li>
6387
- <li role="presentation">
6388
- <button
6389
- class="pf-c-select__menu-item pf-m-selected"
6390
- role="option"
6391
- aria-selected="true"
6392
- >
6393
- Stopped
6394
- <span class="pf-c-select__menu-item-icon">
6395
- <i class="fas fa-check" aria-hidden="true"></i>
6396
- </span>
6397
- </button>
6398
- </li>
6399
- <li role="presentation">
6400
- <button
6401
- class="pf-c-select__menu-item"
6402
- role="option"
6403
- >Down</button>
6404
- </li>
6405
- <li role="presentation">
6406
- <button
6407
- class="pf-c-select__menu-item"
6408
- role="option"
6409
- >Degraded</button>
6410
- </li>
6411
- <li role="presentation">
6412
- <button
6413
- class="pf-c-select__menu-item"
6414
- role="option"
6415
- >Needs maintenance</button>
6416
- </li>
6417
- </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>
6418
6450
  </div>
6419
- <div class="pf-c-text-input-group">
6420
- <div class="pf-c-text-input-group__main pf-m-icon">
6421
- <span class="pf-c-text-input-group__text">
6422
- <span class="pf-c-text-input-group__icon">
6423
- <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
+ />
6424
6465
  </span>
6425
- <input
6426
- class="pf-c-text-input-group__text-input"
6427
- type="search"
6428
- placeholder="Filter by name"
6429
- value
6430
- aria-label="Type to filter"
6431
- />
6432
- </span>
6466
+ </div>
6433
6467
  </div>
6434
6468
  </div>
6435
6469
  </div>