@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/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>
@@ -1267,89 +1274,93 @@ section: components
1267
1274
  aria-label="search filter"
1268
1275
  role="group"
1269
1276
  >
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>
1277
+ <div class="pf-c-input-group__item pf-m-fill">
1278
+ <div class="pf-c-select" style="width: 160px">
1279
+ <span
1280
+ id="toolbar-with-validation-example-select-name-label"
1281
+ hidden
1282
+ >Choose one</span>
1275
1283
 
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>
1284
+ <button
1285
+ class="pf-c-select__toggle"
1286
+ type="button"
1287
+ id="toolbar-with-validation-example-select-name-toggle"
1288
+ aria-haspopup="true"
1289
+ aria-expanded="false"
1290
+ aria-labelledby="toolbar-with-validation-example-select-name-label toolbar-with-validation-example-select-name-toggle"
1291
+ >
1292
+ <div class="pf-c-select__toggle-wrapper">
1293
+ <span class="pf-c-select__toggle-icon">
1294
+ <i class="fas fa-filter" aria-hidden="true"></i>
1295
+ </span>
1296
+ <span class="pf-c-select__toggle-text">Description</span>
1297
+ </div>
1298
+ <span class="pf-c-select__toggle-arrow">
1299
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1287
1300
  </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>
1301
+ </button>
1294
1302
 
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>
1303
+ <ul
1304
+ class="pf-c-select__menu"
1305
+ role="listbox"
1306
+ aria-labelledby="toolbar-with-validation-example-select-name-label"
1307
+ hidden
1308
+ >
1309
+ <li role="presentation">
1310
+ <button
1311
+ class="pf-c-select__menu-item"
1312
+ role="option"
1313
+ >Running</button>
1314
+ </li>
1315
+ <li role="presentation">
1316
+ <button
1317
+ class="pf-c-select__menu-item pf-m-selected"
1318
+ role="option"
1319
+ aria-selected="true"
1320
+ >
1321
+ Stopped
1322
+ <span class="pf-c-select__menu-item-icon">
1323
+ <i class="fas fa-check" aria-hidden="true"></i>
1324
+ </span>
1325
+ </button>
1326
+ </li>
1327
+ <li role="presentation">
1328
+ <button
1329
+ class="pf-c-select__menu-item"
1330
+ role="option"
1331
+ >Down</button>
1332
+ </li>
1333
+ <li role="presentation">
1334
+ <button
1335
+ class="pf-c-select__menu-item"
1336
+ role="option"
1337
+ >Degraded</button>
1338
+ </li>
1339
+ <li role="presentation">
1340
+ <button
1341
+ class="pf-c-select__menu-item"
1342
+ role="option"
1343
+ >Needs maintenance</button>
1344
+ </li>
1345
+ </ul>
1346
+ </div>
1338
1347
  </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>
1348
+ <div class="pf-c-input-group__item">
1349
+ <div class="pf-c-text-input-group" style="width: auto">
1350
+ <div class="pf-c-text-input-group__main pf-m-icon">
1351
+ <span class="pf-c-text-input-group__text">
1352
+ <span class="pf-c-text-input-group__icon">
1353
+ <i class="fas fa-fw fa-search"></i>
1354
+ </span>
1355
+ <input
1356
+ class="pf-c-text-input-group__text-input"
1357
+ type="search"
1358
+ placeholder="Filter by Description"
1359
+ value
1360
+ aria-label="Type to filter"
1361
+ />
1344
1362
  </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>
1363
+ </div>
1353
1364
  </div>
1354
1365
  </div>
1355
1366
  </div>
@@ -1971,80 +1982,84 @@ section: components
1971
1982
  >
1972
1983
  <div class="pf-c-toolbar__item pf-m-search-filter">
1973
1984
  <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>
1985
+ <div class="pf-c-input-group__item pf-m-fill">
1986
+ <div class="pf-c-select" style="width: 124px">
1987
+ <span
1988
+ id="toolbar-attribute-value-search-filter-mobile-example-select-name-label"
1989
+ hidden
1990
+ >Choose one</span>
1979
1991
 
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>
1992
+ <button
1993
+ class="pf-c-select__toggle"
1994
+ type="button"
1995
+ id="toolbar-attribute-value-search-filter-mobile-example-select-name-toggle"
1996
+ aria-haspopup="true"
1997
+ aria-expanded="false"
1998
+ aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-select-name-label toolbar-attribute-value-search-filter-mobile-example-select-name-toggle"
1999
+ >
2000
+ <div class="pf-c-select__toggle-wrapper">
2001
+ <span class="pf-c-select__toggle-icon">
2002
+ <i class="fas fa-filter" aria-hidden="true"></i>
2003
+ </span>
2004
+ <span class="pf-c-select__toggle-text">Name</span>
2005
+ </div>
2006
+ <span class="pf-c-select__toggle-arrow">
2007
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1991
2008
  </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>
2009
+ </button>
1998
2010
 
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>
2011
+ <ul
2012
+ class="pf-c-select__menu"
2013
+ role="listbox"
2014
+ aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-select-name-label"
2015
+ hidden
2016
+ >
2017
+ <li role="presentation">
2018
+ <button class="pf-c-select__menu-item" role="option">Running</button>
2019
+ </li>
2020
+ <li role="presentation">
2021
+ <button
2022
+ class="pf-c-select__menu-item pf-m-selected"
2023
+ role="option"
2024
+ aria-selected="true"
2025
+ >
2026
+ Stopped
2027
+ <span class="pf-c-select__menu-item-icon">
2028
+ <i class="fas fa-check" aria-hidden="true"></i>
2029
+ </span>
2030
+ </button>
2031
+ </li>
2032
+ <li role="presentation">
2033
+ <button class="pf-c-select__menu-item" role="option">Down</button>
2034
+ </li>
2035
+ <li role="presentation">
2036
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
2037
+ </li>
2038
+ <li role="presentation">
2039
+ <button
2040
+ class="pf-c-select__menu-item"
2041
+ role="option"
2042
+ >Needs maintenance</button>
2043
+ </li>
2044
+ </ul>
2045
+ </div>
2033
2046
  </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>
2047
+ <div class="pf-c-input-group__item">
2048
+ <div class="pf-c-text-input-group" style="width: auto">
2049
+ <div class="pf-c-text-input-group__main pf-m-icon">
2050
+ <span class="pf-c-text-input-group__text">
2051
+ <span class="pf-c-text-input-group__icon">
2052
+ <i class="fas fa-fw fa-search"></i>
2053
+ </span>
2054
+ <input
2055
+ class="pf-c-text-input-group__text-input"
2056
+ type="search"
2057
+ placeholder="Filter by name"
2058
+ value
2059
+ aria-label="Type to filter"
2060
+ />
2039
2061
  </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>
2062
+ </div>
2048
2063
  </div>
2049
2064
  </div>
2050
2065
  </div>
@@ -4288,89 +4303,93 @@ section: components
4288
4303
  aria-label="search filter"
4289
4304
  role="group"
4290
4305
  >
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>
4306
+ <div class="pf-c-input-group__item pf-m-fill">
4307
+ <div class="pf-c-select" style="width: 124px">
4308
+ <span
4309
+ id="toolbar-pagination-management-example-toolbar-select-name-label"
4310
+ hidden
4311
+ >Choose one</span>
4296
4312
 
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>
4313
+ <button
4314
+ class="pf-c-select__toggle"
4315
+ type="button"
4316
+ id="toolbar-pagination-management-example-toolbar-select-name-toggle"
4317
+ aria-haspopup="true"
4318
+ aria-expanded="false"
4319
+ aria-labelledby="toolbar-pagination-management-example-toolbar-select-name-label toolbar-pagination-management-example-toolbar-select-name-toggle"
4320
+ >
4321
+ <div class="pf-c-select__toggle-wrapper">
4322
+ <span class="pf-c-select__toggle-icon">
4323
+ <i class="fas fa-filter" aria-hidden="true"></i>
4324
+ </span>
4325
+ <span class="pf-c-select__toggle-text">Name</span>
4326
+ </div>
4327
+ <span class="pf-c-select__toggle-arrow">
4328
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
4308
4329
  </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>
4330
+ </button>
4315
4331
 
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>
4332
+ <ul
4333
+ class="pf-c-select__menu"
4334
+ role="listbox"
4335
+ aria-labelledby="toolbar-pagination-management-example-toolbar-select-name-label"
4336
+ hidden
4337
+ >
4338
+ <li role="presentation">
4339
+ <button
4340
+ class="pf-c-select__menu-item"
4341
+ role="option"
4342
+ >Running</button>
4343
+ </li>
4344
+ <li role="presentation">
4345
+ <button
4346
+ class="pf-c-select__menu-item pf-m-selected"
4347
+ role="option"
4348
+ aria-selected="true"
4349
+ >
4350
+ Stopped
4351
+ <span class="pf-c-select__menu-item-icon">
4352
+ <i class="fas fa-check" aria-hidden="true"></i>
4353
+ </span>
4354
+ </button>
4355
+ </li>
4356
+ <li role="presentation">
4357
+ <button
4358
+ class="pf-c-select__menu-item"
4359
+ role="option"
4360
+ >Down</button>
4361
+ </li>
4362
+ <li role="presentation">
4363
+ <button
4364
+ class="pf-c-select__menu-item"
4365
+ role="option"
4366
+ >Degraded</button>
4367
+ </li>
4368
+ <li role="presentation">
4369
+ <button
4370
+ class="pf-c-select__menu-item"
4371
+ role="option"
4372
+ >Needs maintenance</button>
4373
+ </li>
4374
+ </ul>
4375
+ </div>
4359
4376
  </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>
4377
+ <div class="pf-c-input-group__item">
4378
+ <div class="pf-c-text-input-group" style="width: auto">
4379
+ <div class="pf-c-text-input-group__main pf-m-icon">
4380
+ <span class="pf-c-text-input-group__text">
4381
+ <span class="pf-c-text-input-group__icon">
4382
+ <i class="fas fa-fw fa-search"></i>
4383
+ </span>
4384
+ <input
4385
+ class="pf-c-text-input-group__text-input"
4386
+ type="search"
4387
+ placeholder="Filter by name"
4388
+ value
4389
+ aria-label="Type to filter"
4390
+ />
4365
4391
  </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>
4392
+ </div>
4374
4393
  </div>
4375
4394
  </div>
4376
4395
  </div>