@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/demos/Toolbar/examples/Toolbar.md CHANGED
@@ -28,80 +28,87 @@ section: components
28
28
  </div>
29
29
  <div class="pf-c-toolbar__item pf-m-search-filter">
30
30
  <div class="pf-c-input-group" aria-label="search filter" role="group">
31
- <div class="pf-c-select" style="width: 175px">
32
- <span
33
- id="toolbar-attribute-value-search-filter-desktop-example-select-name-label"
34
- hidden
35
- >Choose one</span>
31
+ <div class="pf-c-input-group__item pf-m-fill">
32
+ <div class="pf-c-select" style="width: 124px">
33
+ <span
34
+ id="toolbar-attribute-value-search-filter-desktop-example-select-name-label"
35
+ hidden
36
+ >Choose one</span>
36
37
 
37
- <button
38
- class="pf-c-select__toggle"
39
- type="button"
40
- id="toolbar-attribute-value-search-filter-desktop-example-select-name-toggle"
41
- aria-haspopup="true"
42
- aria-expanded="false"
43
- aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-select-name-label toolbar-attribute-value-search-filter-desktop-example-select-name-toggle"
44
- >
45
- <div class="pf-c-select__toggle-wrapper">
46
- <span class="pf-c-select__toggle-icon">
47
- <i class="fas fa-filter" aria-hidden="true"></i>
38
+ <button
39
+ class="pf-c-select__toggle"
40
+ type="button"
41
+ id="toolbar-attribute-value-search-filter-desktop-example-select-name-toggle"
42
+ aria-haspopup="true"
43
+ aria-expanded="false"
44
+ aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-select-name-label toolbar-attribute-value-search-filter-desktop-example-select-name-toggle"
45
+ >
46
+ <div class="pf-c-select__toggle-wrapper">
47
+ <span class="pf-c-select__toggle-icon">
48
+ <i class="fas fa-filter" aria-hidden="true"></i>
49
+ </span>
50
+ <span class="pf-c-select__toggle-text">Name</span>
51
+ </div>
52
+ <span class="pf-c-select__toggle-arrow">
53
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
48
54
  </span>
49
- <span class="pf-c-select__toggle-text">Name</span>
50
- </div>
51
- <span class="pf-c-select__toggle-arrow">
52
- <i class="fas fa-caret-down" aria-hidden="true"></i>
53
- </span>
54
- </button>
55
+ </button>
55
56
 
56
- <ul
57
- class="pf-c-select__menu"
58
- role="listbox"
59
- aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-select-name-label"
60
- hidden
61
- >
62
- <li role="presentation">
63
- <button class="pf-c-select__menu-item" role="option">Running</button>
64
- </li>
65
- <li role="presentation">
66
- <button
67
- class="pf-c-select__menu-item pf-m-selected"
68
- role="option"
69
- aria-selected="true"
70
- >
71
- Stopped
72
- <span class="pf-c-select__menu-item-icon">
73
- <i class="fas fa-check" aria-hidden="true"></i>
74
- </span>
75
- </button>
76
- </li>
77
- <li role="presentation">
78
- <button class="pf-c-select__menu-item" role="option">Down</button>
79
- </li>
80
- <li role="presentation">
81
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
82
- </li>
83
- <li role="presentation">
84
- <button
85
- class="pf-c-select__menu-item"
86
- role="option"
87
- >Needs maintenance</button>
88
- </li>
89
- </ul>
57
+ <ul
58
+ class="pf-c-select__menu"
59
+ role="listbox"
60
+ aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-select-name-label"
61
+ hidden
62
+ >
63
+ <li role="presentation">
64
+ <button class="pf-c-select__menu-item" role="option">Running</button>
65
+ </li>
66
+ <li role="presentation">
67
+ <button
68
+ class="pf-c-select__menu-item pf-m-selected"
69
+ role="option"
70
+ aria-selected="true"
71
+ >
72
+ Stopped
73
+ <span class="pf-c-select__menu-item-icon">
74
+ <i class="fas fa-check" aria-hidden="true"></i>
75
+ </span>
76
+ </button>
77
+ </li>
78
+ <li role="presentation">
79
+ <button class="pf-c-select__menu-item" role="option">Down</button>
80
+ </li>
81
+ <li role="presentation">
82
+ <button
83
+ class="pf-c-select__menu-item"
84
+ role="option"
85
+ >Degraded</button>
86
+ </li>
87
+ <li role="presentation">
88
+ <button
89
+ class="pf-c-select__menu-item"
90
+ role="option"
91
+ >Needs maintenance</button>
92
+ </li>
93
+ </ul>
94
+ </div>
90
95
  </div>
91
- <div class="pf-c-text-input-group">
92
- <div class="pf-c-text-input-group__main pf-m-icon">
93
- <span class="pf-c-text-input-group__text">
94
- <span class="pf-c-text-input-group__icon">
95
- <i class="fas fa-fw fa-search"></i>
96
+ <div class="pf-c-input-group__item">
97
+ <div class="pf-c-text-input-group" style="width: auto">
98
+ <div class="pf-c-text-input-group__main pf-m-icon">
99
+ <span class="pf-c-text-input-group__text">
100
+ <span class="pf-c-text-input-group__icon">
101
+ <i class="fas fa-fw fa-search"></i>
102
+ </span>
103
+ <input
104
+ class="pf-c-text-input-group__text-input"
105
+ type="search"
106
+ placeholder="Filter by name"
107
+ value
108
+ aria-label="Type to filter"
109
+ />
96
110
  </span>
97
- <input
98
- class="pf-c-text-input-group__text-input"
99
- type="search"
100
- placeholder="Filter by name"
101
- value
102
- aria-label="Type to filter"
103
- />
104
- </span>
111
+ </div>
105
112
  </div>
106
113
  </div>
107
114
  </div>
@@ -1226,7 +1233,13 @@ section: components
1226
1233
  </button>
1227
1234
  </div>
1228
1235
  </div>
1229
- <div class="pf-c-date-picker__helper-text">MM/DD/YYYY</div>
1236
+ <div class="pf-c-date-picker__helper-text">
1237
+ <div class="pf-c-helper-text">
1238
+ <div class="pf-c-helper-text__item">
1239
+ <span class="pf-c-helper-text__item-text">MM/DD/YYYY</span>
1240
+ </div>
1241
+ </div>
1242
+ </div>
1230
1243
  </div>
1231
1244
  <div class="pf-c-date-picker">
1232
1245
  <div class="pf-c-date-picker__input">
@@ -1252,11 +1265,17 @@ section: components
1252
1265
  <i class="fas fa-calendar-alt" aria-hidden="true"></i>
1253
1266
  </button>
1254
1267
  </div>
1255
- <div class="pf-c-date-picker__helper-text">MM/DD/YYYY</div>
1268
+ <div class="pf-c-date-picker__helper-text"></div>
1269
+ </div>
1270
+ <div class="pf-c-date-picker__helper-text">
1271
+ <div class="pf-c-helper-text">
1272
+ <div class="pf-c-helper-text__item">
1273
+ <span
1274
+ class="pf-c-helper-text__item-text"
1275
+ >Max: 08/10/2022</span>
1276
+ </div>
1277
+ </div>
1256
1278
  </div>
1257
- <div
1258
- class="pf-c-date-picker__helper-text pf-m-error"
1259
- >Max: 08/10/2022</div>
1260
1279
  </div>
1261
1280
  </div>
1262
1281
  </div>
@@ -1267,89 +1286,93 @@ section: components
1267
1286
  aria-label="search filter"
1268
1287
  role="group"
1269
1288
  >
1270
- <div class="pf-c-select" style="width: 160px">
1271
- <span
1272
- id="toolbar-with-validation-example-select-name-label"
1273
- hidden
1274
- >Choose one</span>
1289
+ <div class="pf-c-input-group__item pf-m-fill">
1290
+ <div class="pf-c-select" style="width: 160px">
1291
+ <span
1292
+ id="toolbar-with-validation-example-select-name-label"
1293
+ hidden
1294
+ >Choose one</span>
1275
1295
 
1276
- <button
1277
- class="pf-c-select__toggle"
1278
- type="button"
1279
- id="toolbar-with-validation-example-select-name-toggle"
1280
- aria-haspopup="true"
1281
- aria-expanded="false"
1282
- aria-labelledby="toolbar-with-validation-example-select-name-label toolbar-with-validation-example-select-name-toggle"
1283
- >
1284
- <div class="pf-c-select__toggle-wrapper">
1285
- <span class="pf-c-select__toggle-icon">
1286
- <i class="fas fa-filter" aria-hidden="true"></i>
1296
+ <button
1297
+ class="pf-c-select__toggle"
1298
+ type="button"
1299
+ id="toolbar-with-validation-example-select-name-toggle"
1300
+ aria-haspopup="true"
1301
+ aria-expanded="false"
1302
+ aria-labelledby="toolbar-with-validation-example-select-name-label toolbar-with-validation-example-select-name-toggle"
1303
+ >
1304
+ <div class="pf-c-select__toggle-wrapper">
1305
+ <span class="pf-c-select__toggle-icon">
1306
+ <i class="fas fa-filter" aria-hidden="true"></i>
1307
+ </span>
1308
+ <span class="pf-c-select__toggle-text">Description</span>
1309
+ </div>
1310
+ <span class="pf-c-select__toggle-arrow">
1311
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1287
1312
  </span>
1288
- <span class="pf-c-select__toggle-text">Description</span>
1289
- </div>
1290
- <span class="pf-c-select__toggle-arrow">
1291
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1292
- </span>
1293
- </button>
1313
+ </button>
1294
1314
 
1295
- <ul
1296
- class="pf-c-select__menu"
1297
- role="listbox"
1298
- aria-labelledby="toolbar-with-validation-example-select-name-label"
1299
- hidden
1300
- >
1301
- <li role="presentation">
1302
- <button
1303
- class="pf-c-select__menu-item"
1304
- role="option"
1305
- >Running</button>
1306
- </li>
1307
- <li role="presentation">
1308
- <button
1309
- class="pf-c-select__menu-item pf-m-selected"
1310
- role="option"
1311
- aria-selected="true"
1312
- >
1313
- Stopped
1314
- <span class="pf-c-select__menu-item-icon">
1315
- <i class="fas fa-check" aria-hidden="true"></i>
1316
- </span>
1317
- </button>
1318
- </li>
1319
- <li role="presentation">
1320
- <button
1321
- class="pf-c-select__menu-item"
1322
- role="option"
1323
- >Down</button>
1324
- </li>
1325
- <li role="presentation">
1326
- <button
1327
- class="pf-c-select__menu-item"
1328
- role="option"
1329
- >Degraded</button>
1330
- </li>
1331
- <li role="presentation">
1332
- <button
1333
- class="pf-c-select__menu-item"
1334
- role="option"
1335
- >Needs maintenance</button>
1336
- </li>
1337
- </ul>
1315
+ <ul
1316
+ class="pf-c-select__menu"
1317
+ role="listbox"
1318
+ aria-labelledby="toolbar-with-validation-example-select-name-label"
1319
+ hidden
1320
+ >
1321
+ <li role="presentation">
1322
+ <button
1323
+ class="pf-c-select__menu-item"
1324
+ role="option"
1325
+ >Running</button>
1326
+ </li>
1327
+ <li role="presentation">
1328
+ <button
1329
+ class="pf-c-select__menu-item pf-m-selected"
1330
+ role="option"
1331
+ aria-selected="true"
1332
+ >
1333
+ Stopped
1334
+ <span class="pf-c-select__menu-item-icon">
1335
+ <i class="fas fa-check" aria-hidden="true"></i>
1336
+ </span>
1337
+ </button>
1338
+ </li>
1339
+ <li role="presentation">
1340
+ <button
1341
+ class="pf-c-select__menu-item"
1342
+ role="option"
1343
+ >Down</button>
1344
+ </li>
1345
+ <li role="presentation">
1346
+ <button
1347
+ class="pf-c-select__menu-item"
1348
+ role="option"
1349
+ >Degraded</button>
1350
+ </li>
1351
+ <li role="presentation">
1352
+ <button
1353
+ class="pf-c-select__menu-item"
1354
+ role="option"
1355
+ >Needs maintenance</button>
1356
+ </li>
1357
+ </ul>
1358
+ </div>
1338
1359
  </div>
1339
- <div class="pf-c-text-input-group">
1340
- <div class="pf-c-text-input-group__main pf-m-icon">
1341
- <span class="pf-c-text-input-group__text">
1342
- <span class="pf-c-text-input-group__icon">
1343
- <i class="fas fa-fw fa-search"></i>
1360
+ <div class="pf-c-input-group__item">
1361
+ <div class="pf-c-text-input-group" style="width: auto">
1362
+ <div class="pf-c-text-input-group__main pf-m-icon">
1363
+ <span class="pf-c-text-input-group__text">
1364
+ <span class="pf-c-text-input-group__icon">
1365
+ <i class="fas fa-fw fa-search"></i>
1366
+ </span>
1367
+ <input
1368
+ class="pf-c-text-input-group__text-input"
1369
+ type="search"
1370
+ placeholder="Filter by Description"
1371
+ value
1372
+ aria-label="Type to filter"
1373
+ />
1344
1374
  </span>
1345
- <input
1346
- class="pf-c-text-input-group__text-input"
1347
- type="search"
1348
- placeholder="Filter by Description"
1349
- value
1350
- aria-label="Type to filter"
1351
- />
1352
- </span>
1375
+ </div>
1353
1376
  </div>
1354
1377
  </div>
1355
1378
  </div>
@@ -1971,80 +1994,84 @@ section: components
1971
1994
  >
1972
1995
  <div class="pf-c-toolbar__item pf-m-search-filter">
1973
1996
  <div class="pf-c-input-group" aria-label="search filter" role="group">
1974
- <div class="pf-c-select" style="width: 175px">
1975
- <span
1976
- id="toolbar-attribute-value-search-filter-mobile-example-select-name-label"
1977
- hidden
1978
- >Choose one</span>
1997
+ <div class="pf-c-input-group__item pf-m-fill">
1998
+ <div class="pf-c-select" style="width: 124px">
1999
+ <span
2000
+ id="toolbar-attribute-value-search-filter-mobile-example-select-name-label"
2001
+ hidden
2002
+ >Choose one</span>
1979
2003
 
1980
- <button
1981
- class="pf-c-select__toggle"
1982
- type="button"
1983
- id="toolbar-attribute-value-search-filter-mobile-example-select-name-toggle"
1984
- aria-haspopup="true"
1985
- aria-expanded="false"
1986
- aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-select-name-label toolbar-attribute-value-search-filter-mobile-example-select-name-toggle"
1987
- >
1988
- <div class="pf-c-select__toggle-wrapper">
1989
- <span class="pf-c-select__toggle-icon">
1990
- <i class="fas fa-filter" aria-hidden="true"></i>
2004
+ <button
2005
+ class="pf-c-select__toggle"
2006
+ type="button"
2007
+ id="toolbar-attribute-value-search-filter-mobile-example-select-name-toggle"
2008
+ aria-haspopup="true"
2009
+ aria-expanded="false"
2010
+ aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-select-name-label toolbar-attribute-value-search-filter-mobile-example-select-name-toggle"
2011
+ >
2012
+ <div class="pf-c-select__toggle-wrapper">
2013
+ <span class="pf-c-select__toggle-icon">
2014
+ <i class="fas fa-filter" aria-hidden="true"></i>
2015
+ </span>
2016
+ <span class="pf-c-select__toggle-text">Name</span>
2017
+ </div>
2018
+ <span class="pf-c-select__toggle-arrow">
2019
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1991
2020
  </span>
1992
- <span class="pf-c-select__toggle-text">Name</span>
1993
- </div>
1994
- <span class="pf-c-select__toggle-arrow">
1995
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1996
- </span>
1997
- </button>
2021
+ </button>
1998
2022
 
1999
- <ul
2000
- class="pf-c-select__menu"
2001
- role="listbox"
2002
- aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-select-name-label"
2003
- hidden
2004
- >
2005
- <li role="presentation">
2006
- <button class="pf-c-select__menu-item" role="option">Running</button>
2007
- </li>
2008
- <li role="presentation">
2009
- <button
2010
- class="pf-c-select__menu-item pf-m-selected"
2011
- role="option"
2012
- aria-selected="true"
2013
- >
2014
- Stopped
2015
- <span class="pf-c-select__menu-item-icon">
2016
- <i class="fas fa-check" aria-hidden="true"></i>
2017
- </span>
2018
- </button>
2019
- </li>
2020
- <li role="presentation">
2021
- <button class="pf-c-select__menu-item" role="option">Down</button>
2022
- </li>
2023
- <li role="presentation">
2024
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
2025
- </li>
2026
- <li role="presentation">
2027
- <button
2028
- class="pf-c-select__menu-item"
2029
- role="option"
2030
- >Needs maintenance</button>
2031
- </li>
2032
- </ul>
2023
+ <ul
2024
+ class="pf-c-select__menu"
2025
+ role="listbox"
2026
+ aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-select-name-label"
2027
+ hidden
2028
+ >
2029
+ <li role="presentation">
2030
+ <button class="pf-c-select__menu-item" role="option">Running</button>
2031
+ </li>
2032
+ <li role="presentation">
2033
+ <button
2034
+ class="pf-c-select__menu-item pf-m-selected"
2035
+ role="option"
2036
+ aria-selected="true"
2037
+ >
2038
+ Stopped
2039
+ <span class="pf-c-select__menu-item-icon">
2040
+ <i class="fas fa-check" aria-hidden="true"></i>
2041
+ </span>
2042
+ </button>
2043
+ </li>
2044
+ <li role="presentation">
2045
+ <button class="pf-c-select__menu-item" role="option">Down</button>
2046
+ </li>
2047
+ <li role="presentation">
2048
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
2049
+ </li>
2050
+ <li role="presentation">
2051
+ <button
2052
+ class="pf-c-select__menu-item"
2053
+ role="option"
2054
+ >Needs maintenance</button>
2055
+ </li>
2056
+ </ul>
2057
+ </div>
2033
2058
  </div>
2034
- <div class="pf-c-text-input-group">
2035
- <div class="pf-c-text-input-group__main pf-m-icon">
2036
- <span class="pf-c-text-input-group__text">
2037
- <span class="pf-c-text-input-group__icon">
2038
- <i class="fas fa-fw fa-search"></i>
2059
+ <div class="pf-c-input-group__item">
2060
+ <div class="pf-c-text-input-group" style="width: auto">
2061
+ <div class="pf-c-text-input-group__main pf-m-icon">
2062
+ <span class="pf-c-text-input-group__text">
2063
+ <span class="pf-c-text-input-group__icon">
2064
+ <i class="fas fa-fw fa-search"></i>
2065
+ </span>
2066
+ <input
2067
+ class="pf-c-text-input-group__text-input"
2068
+ type="search"
2069
+ placeholder="Filter by name"
2070
+ value
2071
+ aria-label="Type to filter"
2072
+ />
2039
2073
  </span>
2040
- <input
2041
- class="pf-c-text-input-group__text-input"
2042
- type="search"
2043
- placeholder="Filter by name"
2044
- value
2045
- aria-label="Type to filter"
2046
- />
2047
- </span>
2074
+ </div>
2048
2075
  </div>
2049
2076
  </div>
2050
2077
  </div>
@@ -4288,89 +4315,93 @@ section: components
4288
4315
  aria-label="search filter"
4289
4316
  role="group"
4290
4317
  >
4291
- <div class="pf-c-select" style="width: 175px">
4292
- <span
4293
- id="toolbar-pagination-management-example-toolbar-select-name-label"
4294
- hidden
4295
- >Choose one</span>
4318
+ <div class="pf-c-input-group__item pf-m-fill">
4319
+ <div class="pf-c-select" style="width: 124px">
4320
+ <span
4321
+ id="toolbar-pagination-management-example-toolbar-select-name-label"
4322
+ hidden
4323
+ >Choose one</span>
4296
4324
 
4297
- <button
4298
- class="pf-c-select__toggle"
4299
- type="button"
4300
- id="toolbar-pagination-management-example-toolbar-select-name-toggle"
4301
- aria-haspopup="true"
4302
- aria-expanded="false"
4303
- aria-labelledby="toolbar-pagination-management-example-toolbar-select-name-label toolbar-pagination-management-example-toolbar-select-name-toggle"
4304
- >
4305
- <div class="pf-c-select__toggle-wrapper">
4306
- <span class="pf-c-select__toggle-icon">
4307
- <i class="fas fa-filter" aria-hidden="true"></i>
4325
+ <button
4326
+ class="pf-c-select__toggle"
4327
+ type="button"
4328
+ id="toolbar-pagination-management-example-toolbar-select-name-toggle"
4329
+ aria-haspopup="true"
4330
+ aria-expanded="false"
4331
+ aria-labelledby="toolbar-pagination-management-example-toolbar-select-name-label toolbar-pagination-management-example-toolbar-select-name-toggle"
4332
+ >
4333
+ <div class="pf-c-select__toggle-wrapper">
4334
+ <span class="pf-c-select__toggle-icon">
4335
+ <i class="fas fa-filter" aria-hidden="true"></i>
4336
+ </span>
4337
+ <span class="pf-c-select__toggle-text">Name</span>
4338
+ </div>
4339
+ <span class="pf-c-select__toggle-arrow">
4340
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
4308
4341
  </span>
4309
- <span class="pf-c-select__toggle-text">Name</span>
4310
- </div>
4311
- <span class="pf-c-select__toggle-arrow">
4312
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4313
- </span>
4314
- </button>
4342
+ </button>
4315
4343
 
4316
- <ul
4317
- class="pf-c-select__menu"
4318
- role="listbox"
4319
- aria-labelledby="toolbar-pagination-management-example-toolbar-select-name-label"
4320
- hidden
4321
- >
4322
- <li role="presentation">
4323
- <button
4324
- class="pf-c-select__menu-item"
4325
- role="option"
4326
- >Running</button>
4327
- </li>
4328
- <li role="presentation">
4329
- <button
4330
- class="pf-c-select__menu-item pf-m-selected"
4331
- role="option"
4332
- aria-selected="true"
4333
- >
4334
- Stopped
4335
- <span class="pf-c-select__menu-item-icon">
4336
- <i class="fas fa-check" aria-hidden="true"></i>
4337
- </span>
4338
- </button>
4339
- </li>
4340
- <li role="presentation">
4341
- <button
4342
- class="pf-c-select__menu-item"
4343
- role="option"
4344
- >Down</button>
4345
- </li>
4346
- <li role="presentation">
4347
- <button
4348
- class="pf-c-select__menu-item"
4349
- role="option"
4350
- >Degraded</button>
4351
- </li>
4352
- <li role="presentation">
4353
- <button
4354
- class="pf-c-select__menu-item"
4355
- role="option"
4356
- >Needs maintenance</button>
4357
- </li>
4358
- </ul>
4344
+ <ul
4345
+ class="pf-c-select__menu"
4346
+ role="listbox"
4347
+ aria-labelledby="toolbar-pagination-management-example-toolbar-select-name-label"
4348
+ hidden
4349
+ >
4350
+ <li role="presentation">
4351
+ <button
4352
+ class="pf-c-select__menu-item"
4353
+ role="option"
4354
+ >Running</button>
4355
+ </li>
4356
+ <li role="presentation">
4357
+ <button
4358
+ class="pf-c-select__menu-item pf-m-selected"
4359
+ role="option"
4360
+ aria-selected="true"
4361
+ >
4362
+ Stopped
4363
+ <span class="pf-c-select__menu-item-icon">
4364
+ <i class="fas fa-check" aria-hidden="true"></i>
4365
+ </span>
4366
+ </button>
4367
+ </li>
4368
+ <li role="presentation">
4369
+ <button
4370
+ class="pf-c-select__menu-item"
4371
+ role="option"
4372
+ >Down</button>
4373
+ </li>
4374
+ <li role="presentation">
4375
+ <button
4376
+ class="pf-c-select__menu-item"
4377
+ role="option"
4378
+ >Degraded</button>
4379
+ </li>
4380
+ <li role="presentation">
4381
+ <button
4382
+ class="pf-c-select__menu-item"
4383
+ role="option"
4384
+ >Needs maintenance</button>
4385
+ </li>
4386
+ </ul>
4387
+ </div>
4359
4388
  </div>
4360
- <div class="pf-c-text-input-group">
4361
- <div class="pf-c-text-input-group__main pf-m-icon">
4362
- <span class="pf-c-text-input-group__text">
4363
- <span class="pf-c-text-input-group__icon">
4364
- <i class="fas fa-fw fa-search"></i>
4389
+ <div class="pf-c-input-group__item">
4390
+ <div class="pf-c-text-input-group" style="width: auto">
4391
+ <div class="pf-c-text-input-group__main pf-m-icon">
4392
+ <span class="pf-c-text-input-group__text">
4393
+ <span class="pf-c-text-input-group__icon">
4394
+ <i class="fas fa-fw fa-search"></i>
4395
+ </span>
4396
+ <input
4397
+ class="pf-c-text-input-group__text-input"
4398
+ type="search"
4399
+ placeholder="Filter by name"
4400
+ value
4401
+ aria-label="Type to filter"
4402
+ />
4365
4403
  </span>
4366
- <input
4367
- class="pf-c-text-input-group__text-input"
4368
- type="search"
4369
- placeholder="Filter by name"
4370
- value
4371
- aria-label="Type to filter"
4372
- />
4373
- </span>
4404
+ </div>
4374
4405
  </div>
4375
4406
  </div>
4376
4407
  </div>