@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/Toolbar/examples/Toolbar.md CHANGED
@@ -463,80 +463,87 @@ In some instances, it may be necessary to adjust spacing explicitly where items
463
463
  </div>
464
464
  <div class="pf-c-toolbar__item pf-m-search-filter">
465
465
  <div class="pf-c-input-group" aria-label="search filter" role="group">
466
- <div class="pf-c-select" style="width: 175px">
467
- <span
468
- id="toolbar-toggle-group-example-select-name-label"
469
- hidden
470
- >Choose one</span>
466
+ <div class="pf-c-input-group__item pf-m-fill">
467
+ <div class="pf-c-select" style="width: 124px">
468
+ <span
469
+ id="toolbar-toggle-group-example-select-name-label"
470
+ hidden
471
+ >Choose one</span>
471
472
 
472
- <button
473
- class="pf-c-select__toggle"
474
- type="button"
475
- id="toolbar-toggle-group-example-select-name-toggle"
476
- aria-haspopup="true"
477
- aria-expanded="false"
478
- aria-labelledby="toolbar-toggle-group-example-select-name-label toolbar-toggle-group-example-select-name-toggle"
479
- >
480
- <div class="pf-c-select__toggle-wrapper">
481
- <span class="pf-c-select__toggle-icon">
482
- <i class="fas fa-filter" aria-hidden="true"></i>
473
+ <button
474
+ class="pf-c-select__toggle"
475
+ type="button"
476
+ id="toolbar-toggle-group-example-select-name-toggle"
477
+ aria-haspopup="true"
478
+ aria-expanded="false"
479
+ aria-labelledby="toolbar-toggle-group-example-select-name-label toolbar-toggle-group-example-select-name-toggle"
480
+ >
481
+ <div class="pf-c-select__toggle-wrapper">
482
+ <span class="pf-c-select__toggle-icon">
483
+ <i class="fas fa-filter" aria-hidden="true"></i>
484
+ </span>
485
+ <span class="pf-c-select__toggle-text">Name</span>
486
+ </div>
487
+ <span class="pf-c-select__toggle-arrow">
488
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
483
489
  </span>
484
- <span class="pf-c-select__toggle-text">Name</span>
485
- </div>
486
- <span class="pf-c-select__toggle-arrow">
487
- <i class="fas fa-caret-down" aria-hidden="true"></i>
488
- </span>
489
- </button>
490
+ </button>
490
491
 
491
- <ul
492
- class="pf-c-select__menu"
493
- role="listbox"
494
- aria-labelledby="toolbar-toggle-group-example-select-name-label"
495
- hidden
496
- >
497
- <li role="presentation">
498
- <button class="pf-c-select__menu-item" role="option">Running</button>
499
- </li>
500
- <li role="presentation">
501
- <button
502
- class="pf-c-select__menu-item pf-m-selected"
503
- role="option"
504
- aria-selected="true"
505
- >
506
- Stopped
507
- <span class="pf-c-select__menu-item-icon">
508
- <i class="fas fa-check" aria-hidden="true"></i>
509
- </span>
510
- </button>
511
- </li>
512
- <li role="presentation">
513
- <button class="pf-c-select__menu-item" role="option">Down</button>
514
- </li>
515
- <li role="presentation">
516
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
517
- </li>
518
- <li role="presentation">
519
- <button
520
- class="pf-c-select__menu-item"
521
- role="option"
522
- >Needs maintenance</button>
523
- </li>
524
- </ul>
492
+ <ul
493
+ class="pf-c-select__menu"
494
+ role="listbox"
495
+ aria-labelledby="toolbar-toggle-group-example-select-name-label"
496
+ hidden
497
+ >
498
+ <li role="presentation">
499
+ <button class="pf-c-select__menu-item" role="option">Running</button>
500
+ </li>
501
+ <li role="presentation">
502
+ <button
503
+ class="pf-c-select__menu-item pf-m-selected"
504
+ role="option"
505
+ aria-selected="true"
506
+ >
507
+ Stopped
508
+ <span class="pf-c-select__menu-item-icon">
509
+ <i class="fas fa-check" aria-hidden="true"></i>
510
+ </span>
511
+ </button>
512
+ </li>
513
+ <li role="presentation">
514
+ <button class="pf-c-select__menu-item" role="option">Down</button>
515
+ </li>
516
+ <li role="presentation">
517
+ <button
518
+ class="pf-c-select__menu-item"
519
+ role="option"
520
+ >Degraded</button>
521
+ </li>
522
+ <li role="presentation">
523
+ <button
524
+ class="pf-c-select__menu-item"
525
+ role="option"
526
+ >Needs maintenance</button>
527
+ </li>
528
+ </ul>
529
+ </div>
525
530
  </div>
526
- <div class="pf-c-text-input-group">
527
- <div class="pf-c-text-input-group__main pf-m-icon">
528
- <span class="pf-c-text-input-group__text">
529
- <span class="pf-c-text-input-group__icon">
530
- <i class="fas fa-fw fa-search"></i>
531
+ <div class="pf-c-input-group__item">
532
+ <div class="pf-c-text-input-group" style="width: auto">
533
+ <div class="pf-c-text-input-group__main pf-m-icon">
534
+ <span class="pf-c-text-input-group__text">
535
+ <span class="pf-c-text-input-group__icon">
536
+ <i class="fas fa-fw fa-search"></i>
537
+ </span>
538
+ <input
539
+ class="pf-c-text-input-group__text-input"
540
+ type="search"
541
+ placeholder="Filter by name"
542
+ value
543
+ aria-label="Type to filter"
544
+ />
531
545
  </span>
532
- <input
533
- class="pf-c-text-input-group__text-input"
534
- type="search"
535
- placeholder="Filter by name"
536
- value
537
- aria-label="Type to filter"
538
- />
539
- </span>
546
+ </div>
540
547
  </div>
541
548
  </div>
542
549
  </div>
@@ -783,80 +790,84 @@ In some instances, it may be necessary to adjust spacing explicitly where items
783
790
  >
784
791
  <div class="pf-c-toolbar__item pf-m-search-filter">
785
792
  <div class="pf-c-input-group" aria-label="search filter" role="group">
786
- <div class="pf-c-select" style="width: 175px">
787
- <span
788
- id="toolbar-toggle-group-collapsed-example-select-name-label"
789
- hidden
790
- >Choose one</span>
793
+ <div class="pf-c-input-group__item pf-m-fill">
794
+ <div class="pf-c-select" style="width: 124px">
795
+ <span
796
+ id="toolbar-toggle-group-collapsed-example-select-name-label"
797
+ hidden
798
+ >Choose one</span>
791
799
 
792
- <button
793
- class="pf-c-select__toggle"
794
- type="button"
795
- id="toolbar-toggle-group-collapsed-example-select-name-toggle"
796
- aria-haspopup="true"
797
- aria-expanded="false"
798
- aria-labelledby="toolbar-toggle-group-collapsed-example-select-name-label toolbar-toggle-group-collapsed-example-select-name-toggle"
799
- >
800
- <div class="pf-c-select__toggle-wrapper">
801
- <span class="pf-c-select__toggle-icon">
802
- <i class="fas fa-filter" aria-hidden="true"></i>
800
+ <button
801
+ class="pf-c-select__toggle"
802
+ type="button"
803
+ id="toolbar-toggle-group-collapsed-example-select-name-toggle"
804
+ aria-haspopup="true"
805
+ aria-expanded="false"
806
+ aria-labelledby="toolbar-toggle-group-collapsed-example-select-name-label toolbar-toggle-group-collapsed-example-select-name-toggle"
807
+ >
808
+ <div class="pf-c-select__toggle-wrapper">
809
+ <span class="pf-c-select__toggle-icon">
810
+ <i class="fas fa-filter" aria-hidden="true"></i>
811
+ </span>
812
+ <span class="pf-c-select__toggle-text">Name</span>
813
+ </div>
814
+ <span class="pf-c-select__toggle-arrow">
815
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
803
816
  </span>
804
- <span class="pf-c-select__toggle-text">Name</span>
805
- </div>
806
- <span class="pf-c-select__toggle-arrow">
807
- <i class="fas fa-caret-down" aria-hidden="true"></i>
808
- </span>
809
- </button>
817
+ </button>
810
818
 
811
- <ul
812
- class="pf-c-select__menu"
813
- role="listbox"
814
- aria-labelledby="toolbar-toggle-group-collapsed-example-select-name-label"
815
- hidden
816
- >
817
- <li role="presentation">
818
- <button class="pf-c-select__menu-item" role="option">Running</button>
819
- </li>
820
- <li role="presentation">
821
- <button
822
- class="pf-c-select__menu-item pf-m-selected"
823
- role="option"
824
- aria-selected="true"
825
- >
826
- Stopped
827
- <span class="pf-c-select__menu-item-icon">
828
- <i class="fas fa-check" aria-hidden="true"></i>
829
- </span>
830
- </button>
831
- </li>
832
- <li role="presentation">
833
- <button class="pf-c-select__menu-item" role="option">Down</button>
834
- </li>
835
- <li role="presentation">
836
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
837
- </li>
838
- <li role="presentation">
839
- <button
840
- class="pf-c-select__menu-item"
841
- role="option"
842
- >Needs maintenance</button>
843
- </li>
844
- </ul>
819
+ <ul
820
+ class="pf-c-select__menu"
821
+ role="listbox"
822
+ aria-labelledby="toolbar-toggle-group-collapsed-example-select-name-label"
823
+ hidden
824
+ >
825
+ <li role="presentation">
826
+ <button class="pf-c-select__menu-item" role="option">Running</button>
827
+ </li>
828
+ <li role="presentation">
829
+ <button
830
+ class="pf-c-select__menu-item pf-m-selected"
831
+ role="option"
832
+ aria-selected="true"
833
+ >
834
+ Stopped
835
+ <span class="pf-c-select__menu-item-icon">
836
+ <i class="fas fa-check" aria-hidden="true"></i>
837
+ </span>
838
+ </button>
839
+ </li>
840
+ <li role="presentation">
841
+ <button class="pf-c-select__menu-item" role="option">Down</button>
842
+ </li>
843
+ <li role="presentation">
844
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
845
+ </li>
846
+ <li role="presentation">
847
+ <button
848
+ class="pf-c-select__menu-item"
849
+ role="option"
850
+ >Needs maintenance</button>
851
+ </li>
852
+ </ul>
853
+ </div>
845
854
  </div>
846
- <div class="pf-c-text-input-group">
847
- <div class="pf-c-text-input-group__main pf-m-icon">
848
- <span class="pf-c-text-input-group__text">
849
- <span class="pf-c-text-input-group__icon">
850
- <i class="fas fa-fw fa-search"></i>
855
+ <div class="pf-c-input-group__item">
856
+ <div class="pf-c-text-input-group" style="width: auto">
857
+ <div class="pf-c-text-input-group__main pf-m-icon">
858
+ <span class="pf-c-text-input-group__text">
859
+ <span class="pf-c-text-input-group__icon">
860
+ <i class="fas fa-fw fa-search"></i>
861
+ </span>
862
+ <input
863
+ class="pf-c-text-input-group__text-input"
864
+ type="search"
865
+ placeholder="Filter by name"
866
+ value
867
+ aria-label="Type to filter"
868
+ />
851
869
  </span>
852
- <input
853
- class="pf-c-text-input-group__text-input"
854
- type="search"
855
- placeholder="Filter by name"
856
- value
857
- aria-label="Type to filter"
858
- />
859
- </span>
870
+ </div>
860
871
  </div>
861
872
  </div>
862
873
  </div>
@@ -1167,80 +1178,87 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1167
1178
  </div>
1168
1179
  <div class="pf-c-toolbar__item pf-m-search-filter">
1169
1180
  <div class="pf-c-input-group" aria-label="search filter" role="group">
1170
- <div class="pf-c-select" style="width: 175px">
1171
- <span
1172
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label"
1173
- hidden
1174
- >Choose one</span>
1181
+ <div class="pf-c-input-group__item pf-m-fill">
1182
+ <div class="pf-c-select" style="width: 124px">
1183
+ <span
1184
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label"
1185
+ hidden
1186
+ >Choose one</span>
1175
1187
 
1176
- <button
1177
- class="pf-c-select__toggle"
1178
- type="button"
1179
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-name-toggle"
1180
- aria-haspopup="true"
1181
- aria-expanded="false"
1182
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label toolbar-selected-filters-toggle-group-collapsed-example-select-name-toggle"
1183
- >
1184
- <div class="pf-c-select__toggle-wrapper">
1185
- <span class="pf-c-select__toggle-icon">
1186
- <i class="fas fa-filter" aria-hidden="true"></i>
1188
+ <button
1189
+ class="pf-c-select__toggle"
1190
+ type="button"
1191
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-name-toggle"
1192
+ aria-haspopup="true"
1193
+ aria-expanded="false"
1194
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label toolbar-selected-filters-toggle-group-collapsed-example-select-name-toggle"
1195
+ >
1196
+ <div class="pf-c-select__toggle-wrapper">
1197
+ <span class="pf-c-select__toggle-icon">
1198
+ <i class="fas fa-filter" aria-hidden="true"></i>
1199
+ </span>
1200
+ <span class="pf-c-select__toggle-text">Name</span>
1201
+ </div>
1202
+ <span class="pf-c-select__toggle-arrow">
1203
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1187
1204
  </span>
1188
- <span class="pf-c-select__toggle-text">Name</span>
1189
- </div>
1190
- <span class="pf-c-select__toggle-arrow">
1191
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1192
- </span>
1193
- </button>
1205
+ </button>
1194
1206
 
1195
- <ul
1196
- class="pf-c-select__menu"
1197
- role="listbox"
1198
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label"
1199
- hidden
1200
- >
1201
- <li role="presentation">
1202
- <button class="pf-c-select__menu-item" role="option">Running</button>
1203
- </li>
1204
- <li role="presentation">
1205
- <button
1206
- class="pf-c-select__menu-item pf-m-selected"
1207
- role="option"
1208
- aria-selected="true"
1209
- >
1210
- Stopped
1211
- <span class="pf-c-select__menu-item-icon">
1212
- <i class="fas fa-check" aria-hidden="true"></i>
1213
- </span>
1214
- </button>
1215
- </li>
1216
- <li role="presentation">
1217
- <button class="pf-c-select__menu-item" role="option">Down</button>
1218
- </li>
1219
- <li role="presentation">
1220
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
1221
- </li>
1222
- <li role="presentation">
1223
- <button
1224
- class="pf-c-select__menu-item"
1225
- role="option"
1226
- >Needs maintenance</button>
1227
- </li>
1228
- </ul>
1207
+ <ul
1208
+ class="pf-c-select__menu"
1209
+ role="listbox"
1210
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label"
1211
+ hidden
1212
+ >
1213
+ <li role="presentation">
1214
+ <button class="pf-c-select__menu-item" role="option">Running</button>
1215
+ </li>
1216
+ <li role="presentation">
1217
+ <button
1218
+ class="pf-c-select__menu-item pf-m-selected"
1219
+ role="option"
1220
+ aria-selected="true"
1221
+ >
1222
+ Stopped
1223
+ <span class="pf-c-select__menu-item-icon">
1224
+ <i class="fas fa-check" aria-hidden="true"></i>
1225
+ </span>
1226
+ </button>
1227
+ </li>
1228
+ <li role="presentation">
1229
+ <button class="pf-c-select__menu-item" role="option">Down</button>
1230
+ </li>
1231
+ <li role="presentation">
1232
+ <button
1233
+ class="pf-c-select__menu-item"
1234
+ role="option"
1235
+ >Degraded</button>
1236
+ </li>
1237
+ <li role="presentation">
1238
+ <button
1239
+ class="pf-c-select__menu-item"
1240
+ role="option"
1241
+ >Needs maintenance</button>
1242
+ </li>
1243
+ </ul>
1244
+ </div>
1229
1245
  </div>
1230
- <div class="pf-c-text-input-group">
1231
- <div class="pf-c-text-input-group__main pf-m-icon">
1232
- <span class="pf-c-text-input-group__text">
1233
- <span class="pf-c-text-input-group__icon">
1234
- <i class="fas fa-fw fa-search"></i>
1246
+ <div class="pf-c-input-group__item">
1247
+ <div class="pf-c-text-input-group" style="width: auto">
1248
+ <div class="pf-c-text-input-group__main pf-m-icon">
1249
+ <span class="pf-c-text-input-group__text">
1250
+ <span class="pf-c-text-input-group__icon">
1251
+ <i class="fas fa-fw fa-search"></i>
1252
+ </span>
1253
+ <input
1254
+ class="pf-c-text-input-group__text-input"
1255
+ type="search"
1256
+ placeholder="Filter by name"
1257
+ value
1258
+ aria-label="Type to filter"
1259
+ />
1235
1260
  </span>
1236
- <input
1237
- class="pf-c-text-input-group__text-input"
1238
- type="search"
1239
- placeholder="Filter by name"
1240
- value
1241
- aria-label="Type to filter"
1242
- />
1243
- </span>
1261
+ </div>
1244
1262
  </div>
1245
1263
  </div>
1246
1264
  </div>
@@ -1775,80 +1793,84 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1775
1793
  >
1776
1794
  <div class="pf-c-toolbar__item pf-m-search-filter">
1777
1795
  <div class="pf-c-input-group" aria-label="search filter" role="group">
1778
- <div class="pf-c-select" style="width: 175px">
1779
- <span
1780
- id="toolbar-selected-filters-toggle-group-expanded-example-select-name-label"
1781
- hidden
1782
- >Choose one</span>
1796
+ <div class="pf-c-input-group__item pf-m-fill">
1797
+ <div class="pf-c-select" style="width: 124px">
1798
+ <span
1799
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-name-label"
1800
+ hidden
1801
+ >Choose one</span>
1783
1802
 
1784
- <button
1785
- class="pf-c-select__toggle"
1786
- type="button"
1787
- id="toolbar-selected-filters-toggle-group-expanded-example-select-name-toggle"
1788
- aria-haspopup="true"
1789
- aria-expanded="false"
1790
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-name-label toolbar-selected-filters-toggle-group-expanded-example-select-name-toggle"
1791
- >
1792
- <div class="pf-c-select__toggle-wrapper">
1793
- <span class="pf-c-select__toggle-icon">
1794
- <i class="fas fa-filter" aria-hidden="true"></i>
1803
+ <button
1804
+ class="pf-c-select__toggle"
1805
+ type="button"
1806
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-name-toggle"
1807
+ aria-haspopup="true"
1808
+ aria-expanded="false"
1809
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-name-label toolbar-selected-filters-toggle-group-expanded-example-select-name-toggle"
1810
+ >
1811
+ <div class="pf-c-select__toggle-wrapper">
1812
+ <span class="pf-c-select__toggle-icon">
1813
+ <i class="fas fa-filter" aria-hidden="true"></i>
1814
+ </span>
1815
+ <span class="pf-c-select__toggle-text">Name</span>
1816
+ </div>
1817
+ <span class="pf-c-select__toggle-arrow">
1818
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1795
1819
  </span>
1796
- <span class="pf-c-select__toggle-text">Name</span>
1797
- </div>
1798
- <span class="pf-c-select__toggle-arrow">
1799
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1800
- </span>
1801
- </button>
1820
+ </button>
1802
1821
 
1803
- <ul
1804
- class="pf-c-select__menu"
1805
- role="listbox"
1806
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-name-label"
1807
- hidden
1808
- >
1809
- <li role="presentation">
1810
- <button class="pf-c-select__menu-item" role="option">Running</button>
1811
- </li>
1812
- <li role="presentation">
1813
- <button
1814
- class="pf-c-select__menu-item pf-m-selected"
1815
- role="option"
1816
- aria-selected="true"
1817
- >
1818
- Stopped
1819
- <span class="pf-c-select__menu-item-icon">
1820
- <i class="fas fa-check" aria-hidden="true"></i>
1821
- </span>
1822
- </button>
1823
- </li>
1824
- <li role="presentation">
1825
- <button class="pf-c-select__menu-item" role="option">Down</button>
1826
- </li>
1827
- <li role="presentation">
1828
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
1829
- </li>
1830
- <li role="presentation">
1831
- <button
1832
- class="pf-c-select__menu-item"
1833
- role="option"
1834
- >Needs maintenance</button>
1835
- </li>
1836
- </ul>
1822
+ <ul
1823
+ class="pf-c-select__menu"
1824
+ role="listbox"
1825
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-name-label"
1826
+ hidden
1827
+ >
1828
+ <li role="presentation">
1829
+ <button class="pf-c-select__menu-item" role="option">Running</button>
1830
+ </li>
1831
+ <li role="presentation">
1832
+ <button
1833
+ class="pf-c-select__menu-item pf-m-selected"
1834
+ role="option"
1835
+ aria-selected="true"
1836
+ >
1837
+ Stopped
1838
+ <span class="pf-c-select__menu-item-icon">
1839
+ <i class="fas fa-check" aria-hidden="true"></i>
1840
+ </span>
1841
+ </button>
1842
+ </li>
1843
+ <li role="presentation">
1844
+ <button class="pf-c-select__menu-item" role="option">Down</button>
1845
+ </li>
1846
+ <li role="presentation">
1847
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
1848
+ </li>
1849
+ <li role="presentation">
1850
+ <button
1851
+ class="pf-c-select__menu-item"
1852
+ role="option"
1853
+ >Needs maintenance</button>
1854
+ </li>
1855
+ </ul>
1856
+ </div>
1837
1857
  </div>
1838
- <div class="pf-c-text-input-group">
1839
- <div class="pf-c-text-input-group__main pf-m-icon">
1840
- <span class="pf-c-text-input-group__text">
1841
- <span class="pf-c-text-input-group__icon">
1842
- <i class="fas fa-fw fa-search"></i>
1858
+ <div class="pf-c-input-group__item">
1859
+ <div class="pf-c-text-input-group" style="width: auto">
1860
+ <div class="pf-c-text-input-group__main pf-m-icon">
1861
+ <span class="pf-c-text-input-group__text">
1862
+ <span class="pf-c-text-input-group__icon">
1863
+ <i class="fas fa-fw fa-search"></i>
1864
+ </span>
1865
+ <input
1866
+ class="pf-c-text-input-group__text-input"
1867
+ type="search"
1868
+ placeholder="Filter by name"
1869
+ value
1870
+ aria-label="Type to filter"
1871
+ />
1843
1872
  </span>
1844
- <input
1845
- class="pf-c-text-input-group__text-input"
1846
- type="search"
1847
- placeholder="Filter by name"
1848
- value
1849
- aria-label="Type to filter"
1850
- />
1851
- </span>
1873
+ </div>
1852
1874
  </div>
1853
1875
  </div>
1854
1876
  </div>
@@ -3902,80 +3924,87 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3902
3924
  </div>
3903
3925
  <div class="pf-c-toolbar__item pf-m-search-filter">
3904
3926
  <div class="pf-c-input-group" aria-label="search filter" role="group">
3905
- <div class="pf-c-select" style="width: 175px">
3906
- <span
3907
- id="toolbar-expanded-elements-example-select-name-label"
3908
- hidden
3909
- >Choose one</span>
3927
+ <div class="pf-c-input-group__item pf-m-fill">
3928
+ <div class="pf-c-select" style="width: 124px">
3929
+ <span
3930
+ id="toolbar-expanded-elements-example-select-name-label"
3931
+ hidden
3932
+ >Choose one</span>
3910
3933
 
3911
- <button
3912
- class="pf-c-select__toggle"
3913
- type="button"
3914
- id="toolbar-expanded-elements-example-select-name-toggle"
3915
- aria-haspopup="true"
3916
- aria-expanded="false"
3917
- aria-labelledby="toolbar-expanded-elements-example-select-name-label toolbar-expanded-elements-example-select-name-toggle"
3918
- >
3919
- <div class="pf-c-select__toggle-wrapper">
3920
- <span class="pf-c-select__toggle-icon">
3921
- <i class="fas fa-filter" aria-hidden="true"></i>
3934
+ <button
3935
+ class="pf-c-select__toggle"
3936
+ type="button"
3937
+ id="toolbar-expanded-elements-example-select-name-toggle"
3938
+ aria-haspopup="true"
3939
+ aria-expanded="false"
3940
+ aria-labelledby="toolbar-expanded-elements-example-select-name-label toolbar-expanded-elements-example-select-name-toggle"
3941
+ >
3942
+ <div class="pf-c-select__toggle-wrapper">
3943
+ <span class="pf-c-select__toggle-icon">
3944
+ <i class="fas fa-filter" aria-hidden="true"></i>
3945
+ </span>
3946
+ <span class="pf-c-select__toggle-text">Name</span>
3947
+ </div>
3948
+ <span class="pf-c-select__toggle-arrow">
3949
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3922
3950
  </span>
3923
- <span class="pf-c-select__toggle-text">Name</span>
3924
- </div>
3925
- <span class="pf-c-select__toggle-arrow">
3926
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3927
- </span>
3928
- </button>
3951
+ </button>
3929
3952
 
3930
- <ul
3931
- class="pf-c-select__menu"
3932
- role="listbox"
3933
- aria-labelledby="toolbar-expanded-elements-example-select-name-label"
3934
- hidden
3935
- >
3936
- <li role="presentation">
3937
- <button class="pf-c-select__menu-item" role="option">Running</button>
3938
- </li>
3939
- <li role="presentation">
3940
- <button
3941
- class="pf-c-select__menu-item pf-m-selected"
3942
- role="option"
3943
- aria-selected="true"
3944
- >
3945
- Stopped
3946
- <span class="pf-c-select__menu-item-icon">
3947
- <i class="fas fa-check" aria-hidden="true"></i>
3948
- </span>
3949
- </button>
3950
- </li>
3951
- <li role="presentation">
3952
- <button class="pf-c-select__menu-item" role="option">Down</button>
3953
- </li>
3954
- <li role="presentation">
3955
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
3956
- </li>
3957
- <li role="presentation">
3958
- <button
3959
- class="pf-c-select__menu-item"
3960
- role="option"
3961
- >Needs maintenance</button>
3962
- </li>
3963
- </ul>
3953
+ <ul
3954
+ class="pf-c-select__menu"
3955
+ role="listbox"
3956
+ aria-labelledby="toolbar-expanded-elements-example-select-name-label"
3957
+ hidden
3958
+ >
3959
+ <li role="presentation">
3960
+ <button class="pf-c-select__menu-item" role="option">Running</button>
3961
+ </li>
3962
+ <li role="presentation">
3963
+ <button
3964
+ class="pf-c-select__menu-item pf-m-selected"
3965
+ role="option"
3966
+ aria-selected="true"
3967
+ >
3968
+ Stopped
3969
+ <span class="pf-c-select__menu-item-icon">
3970
+ <i class="fas fa-check" aria-hidden="true"></i>
3971
+ </span>
3972
+ </button>
3973
+ </li>
3974
+ <li role="presentation">
3975
+ <button class="pf-c-select__menu-item" role="option">Down</button>
3976
+ </li>
3977
+ <li role="presentation">
3978
+ <button
3979
+ class="pf-c-select__menu-item"
3980
+ role="option"
3981
+ >Degraded</button>
3982
+ </li>
3983
+ <li role="presentation">
3984
+ <button
3985
+ class="pf-c-select__menu-item"
3986
+ role="option"
3987
+ >Needs maintenance</button>
3988
+ </li>
3989
+ </ul>
3990
+ </div>
3964
3991
  </div>
3965
- <div class="pf-c-text-input-group">
3966
- <div class="pf-c-text-input-group__main pf-m-icon">
3967
- <span class="pf-c-text-input-group__text">
3968
- <span class="pf-c-text-input-group__icon">
3969
- <i class="fas fa-fw fa-search"></i>
3992
+ <div class="pf-c-input-group__item">
3993
+ <div class="pf-c-text-input-group" style="width: auto">
3994
+ <div class="pf-c-text-input-group__main pf-m-icon">
3995
+ <span class="pf-c-text-input-group__text">
3996
+ <span class="pf-c-text-input-group__icon">
3997
+ <i class="fas fa-fw fa-search"></i>
3998
+ </span>
3999
+ <input
4000
+ class="pf-c-text-input-group__text-input"
4001
+ type="search"
4002
+ placeholder="Filter by name"
4003
+ value
4004
+ aria-label="Type to filter"
4005
+ />
3970
4006
  </span>
3971
- <input
3972
- class="pf-c-text-input-group__text-input"
3973
- type="search"
3974
- placeholder="Filter by name"
3975
- value
3976
- aria-label="Type to filter"
3977
- />
3978
- </span>
4007
+ </div>
3979
4008
  </div>
3980
4009
  </div>
3981
4010
  </div>