@patternfly/patternfly 6.0.0-alpha.16 → 6.0.0-alpha.18

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 (64) hide show
  1. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  2. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  3. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  4. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  5. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  6. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  7. package/assets/images/pf_logo_white.hbs +35 -0
  8. package/assets/images/pf_logo_white.svg +38 -0
  9. package/base/_globals.scss +1 -1
  10. package/base/patternfly-variables.css +1 -1
  11. package/base/tokens/_tokens-font.scss +2 -2
  12. package/components/Accordion/accordion.css +10 -1
  13. package/components/Accordion/accordion.scss +13 -1
  14. package/components/Alert/alert.css +1 -1
  15. package/components/Alert/alert.scss +1 -1
  16. package/components/Button/button.css +1 -1
  17. package/components/Button/button.scss +1 -3
  18. package/components/Check/check.css +10 -8
  19. package/components/Check/check.scss +15 -10
  20. package/components/Dropdown/dropdown.css +1 -3
  21. package/components/Dropdown/dropdown.scss +2 -6
  22. package/components/Menu/menu.css +3 -0
  23. package/components/Menu/menu.scss +7 -3
  24. package/components/MenuToggle/menu-toggle.css +2 -3
  25. package/components/MenuToggle/menu-toggle.scss +2 -6
  26. package/components/Page/page.css +6 -4
  27. package/components/Page/page.scss +6 -4
  28. package/components/Radio/radio.css +13 -10
  29. package/components/Radio/radio.scss +17 -11
  30. package/components/Switch/switch.css +1 -1
  31. package/components/Switch/switch.scss +1 -1
  32. package/components/Table/table.css +6 -2
  33. package/components/Table/table.scss +7 -2
  34. package/components/Toolbar/toolbar.css +9 -1
  35. package/components/Toolbar/toolbar.scss +16 -3
  36. package/docs/components/Accordion/examples/Accordion.md +95 -0
  37. package/docs/components/Brand/examples/Brand.css +12 -0
  38. package/docs/components/Brand/examples/Brand.md +75 -32
  39. package/docs/components/Card/examples/Card.md +110 -2
  40. package/docs/components/LogViewer/examples/LogViewer.md +130 -130
  41. package/docs/components/Menu/examples/Menu.md +507 -473
  42. package/docs/components/MenuToggle/examples/MenuToggle.md +106 -114
  43. package/docs/components/Nav/examples/Navigation.md +140 -113
  44. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  45. package/docs/components/Toolbar/examples/Toolbar.md +480 -2807
  46. package/docs/demos/CardView/examples/CardView.md +32 -51
  47. package/docs/demos/DataList/examples/DataList.md +184 -320
  48. package/docs/demos/Masthead/examples/Masthead.md +51 -210
  49. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +2 -1
  50. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +83 -271
  51. package/docs/demos/Table/examples/Table.md +1017 -1800
  52. package/docs/demos/Tabs/examples/Tabs.md +2 -2
  53. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  54. package/docs/demos/Toolbar/examples/Toolbar.md +703 -1027
  55. package/package.json +2 -2
  56. package/patternfly-base-no-globals-theme-dark-unversioned.css +1 -1
  57. package/patternfly-base-no-globals.css +1 -1
  58. package/patternfly-base-theme-dark-unversioned.css +1 -1
  59. package/patternfly-base.css +1 -1
  60. package/patternfly-no-globals.css +64 -36
  61. package/patternfly-theme-dark-unversioned.css +64 -36
  62. package/patternfly.css +64 -36
  63. package/patternfly.min.css +1 -1
  64. package/patternfly.min.css.map +1 -1
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -274,70 +274,54 @@ wrapperTag: div
274
274
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
275
275
  >
276
276
  <div class="pf-v5-c-card">
277
- <div class="pf-v5-c-toolbar">
277
+ <div class="pf-v5-c-toolbar" id="data-list-basic-example-toolbar">
278
278
  <div class="pf-v5-c-toolbar__content">
279
279
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
280
280
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
281
- <div class="pf-v5-c-dropdown">
282
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
283
- <label
284
- class="pf-v5-c-dropdown__toggle-check"
285
- for="-bulk-select-toggle-check"
286
- >
287
- <div class="pf-v5-c-check pf-m-standalone">
288
- <input
289
- class="pf-v5-c-check__input"
290
- type="checkbox"
291
- id="-bulk-select-toggle-check"
292
- aria-label="Select all"
293
- />
294
- </div>
295
- </label>
296
-
297
- <button
298
- class="pf-v5-c-dropdown__toggle-button"
299
- type="button"
300
- aria-expanded="false"
301
- id="-bulk-select-toggle-button"
302
- aria-label="Dropdown toggle"
303
- >
304
- <i class="fas fa-caret-down" aria-hidden="true"></i>
305
- </button>
306
- </div>
307
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
308
- <li role="none">
309
- <button
310
- class="pf-v5-c-dropdown__menu-item"
311
- role="menuitem"
312
- type="button"
313
- >Select all</button>
314
- </li>
315
- <li role="none">
316
- <button
317
- class="pf-v5-c-dropdown__menu-item"
318
- role="menuitem"
319
- type="button"
320
- >Select none</button>
321
- </li>
322
- <li role="none">
323
- <button
324
- class="pf-v5-c-dropdown__menu-item"
325
- role="menuitem"
326
- type="button"
327
- >Other action</button>
328
- </li>
329
- </ul>
281
+ <div
282
+ class="pf-v5-c-menu-toggle pf-m-split-button"
283
+ id="data-list-basic-example-toolbar-check"
284
+ >
285
+ <label
286
+ class="pf-v5-c-check pf-m-standalone"
287
+ id="data-list-basic-example-toolbar-check-check"
288
+ for="data-list-basic-example-toolbar-check-check-input"
289
+ >
290
+ <input
291
+ class="pf-v5-c-check__input"
292
+ type="checkbox"
293
+ id="data-list-basic-example-toolbar-check-check-input"
294
+ name="data-list-basic-example-toolbar-check-check-input"
295
+ aria-label="Standalone check"
296
+ />
297
+ </label>
298
+ <button
299
+ class="pf-v5-c-menu-toggle__button"
300
+ type="button"
301
+ aria-expanded="false"
302
+ id="data-list-basic-example-toolbar-menu-toggle-toggle-button"
303
+ aria-label="Menu toggle"
304
+ >
305
+ <span class="pf-v5-c-menu-toggle__controls">
306
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
307
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
308
+ </span>
309
+ </span>
310
+ </button>
330
311
  </div>
331
312
  </div>
332
313
 
333
314
  <div class="pf-v5-c-toolbar__item">
334
315
  <div class="pf-v5-c-context-selector">
335
- <span id="-context-selector-label" hidden>Selected project:</span>
316
+ <span
317
+ id="data-list-basic-example-toolbar-context-selector-label"
318
+ hidden
319
+ >Selected project:</span>
336
320
  <button
337
321
  class="pf-v5-c-context-selector__toggle"
338
322
  aria-expanded="false"
339
- id="-context-selector-toggle"
340
- aria-labelledby="-context-selector-label -context-selector-toggle"
323
+ id="data-list-basic-example-toolbar-context-selector-toggle"
324
+ aria-labelledby="data-list-basic-example-toolbar-context-selector-label data-list-basic-example-toolbar-context-selector-toggle"
341
325
  >
342
326
  <span
343
327
  class="pf-v5-c-context-selector__toggle-text"
@@ -381,7 +365,10 @@ wrapperTag: div
381
365
  </div>
382
366
  </div>
383
367
 
384
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
368
+ <div
369
+ class="pf-v5-c-overflow-menu"
370
+ id="data-list-basic-example-toolbar-overflow-menu"
371
+ >
385
372
  <div
386
373
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
387
374
  >
@@ -399,7 +386,7 @@ wrapperTag: div
399
386
  <button
400
387
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
401
388
  type="button"
402
- id="-overflow-menu-dropdown-toggle"
389
+ id="data-list-basic-example-toolbar-overflow-menu-dropdown-toggle"
403
390
  aria-label="Dropdown with additional options"
404
391
  aria-expanded="false"
405
392
  >
@@ -408,7 +395,7 @@ wrapperTag: div
408
395
  <ul
409
396
  class="pf-v5-c-dropdown__menu"
410
397
  role="menu"
411
- aria-labelledby="-overflow-menu-dropdown-toggle"
398
+ aria-labelledby="data-list-basic-example-toolbar-overflow-menu-dropdown-toggle"
412
399
  hidden
413
400
  >
414
401
  <li role="none">
@@ -428,7 +415,7 @@ wrapperTag: div
428
415
  <button
429
416
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
430
417
  type="button"
431
- id="-top-pagination-toggle"
418
+ id="data-list-basic-example-toolbar-top-pagination-toggle"
432
419
  aria-haspopup="listbox"
433
420
  aria-expanded="false"
434
421
  >
@@ -443,7 +430,7 @@ wrapperTag: div
443
430
  <ul
444
431
  class="pf-v5-c-options-menu__menu"
445
432
  role="menu"
446
- aria-labelledby="-top-pagination-toggle"
433
+ aria-labelledby="data-list-basic-example-toolbar-top-pagination-toggle"
447
434
  hidden
448
435
  >
449
436
  <li role="none">
@@ -504,7 +491,7 @@ wrapperTag: div
504
491
 
505
492
  <div
506
493
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
507
- id="-expandable-content"
494
+ id="data-list-basic-example-toolbar-expandable-content"
508
495
  hidden
509
496
  ></div>
510
497
  </div>
@@ -1220,7 +1207,7 @@ wrapperTag: div
1220
1207
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
1221
1208
  >
1222
1209
  <div class="pf-v5-c-card">
1223
- <div class="pf-v5-c-toolbar">
1210
+ <div class="pf-v5-c-toolbar" id="data-list-actionable-example-toolbar">
1224
1211
  <div class="pf-v5-c-toolbar__content">
1225
1212
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
1226
1213
  <div
@@ -1228,76 +1215,60 @@ wrapperTag: div
1228
1215
  >
1229
1216
  <div class="pf-v5-c-toolbar__toggle">
1230
1217
  <button
1231
- class="pf-v5-c-button pf-m-plain"
1218
+ class="pf-v5-c-menu-toggle pf-m-plain"
1232
1219
  type="button"
1233
- aria-label="Show filters"
1234
1220
  aria-expanded="false"
1235
- aria-controls="-expandable-content"
1221
+ aria-label="Show filters"
1222
+ aria-controls="data-list-actionable-example-toolbar-expandable-content"
1236
1223
  >
1237
1224
  <i class="fas fa-filter" aria-hidden="true"></i>
1238
1225
  </button>
1239
1226
  </div>
1240
1227
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
1241
- <div class="pf-v5-c-dropdown">
1242
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
1243
- <label
1244
- class="pf-v5-c-dropdown__toggle-check"
1245
- for="-bulk-select-toggle-check"
1246
- >
1247
- <div class="pf-v5-c-check pf-m-standalone">
1248
- <input
1249
- class="pf-v5-c-check__input"
1250
- type="checkbox"
1251
- id="-bulk-select-toggle-check"
1252
- aria-label="Select all"
1253
- />
1254
- </div>
1255
- </label>
1256
-
1257
- <button
1258
- class="pf-v5-c-dropdown__toggle-button"
1259
- type="button"
1260
- aria-expanded="false"
1261
- id="-bulk-select-toggle-button"
1262
- aria-label="Dropdown toggle"
1263
- >
1264
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1265
- </button>
1266
- </div>
1267
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1268
- <li role="none">
1269
- <button
1270
- class="pf-v5-c-dropdown__menu-item"
1271
- role="menuitem"
1272
- type="button"
1273
- >Select all</button>
1274
- </li>
1275
- <li role="none">
1276
- <button
1277
- class="pf-v5-c-dropdown__menu-item"
1278
- role="menuitem"
1279
- type="button"
1280
- >Select none</button>
1281
- </li>
1282
- <li role="none">
1283
- <button
1284
- class="pf-v5-c-dropdown__menu-item"
1285
- role="menuitem"
1286
- type="button"
1287
- >Other action</button>
1288
- </li>
1289
- </ul>
1228
+ <div
1229
+ class="pf-v5-c-menu-toggle pf-m-split-button"
1230
+ id="data-list-actionable-example-toolbar-check"
1231
+ >
1232
+ <label
1233
+ class="pf-v5-c-check pf-m-standalone"
1234
+ id="data-list-actionable-example-toolbar-check-check"
1235
+ for="data-list-actionable-example-toolbar-check-check-input"
1236
+ >
1237
+ <input
1238
+ class="pf-v5-c-check__input"
1239
+ type="checkbox"
1240
+ id="data-list-actionable-example-toolbar-check-check-input"
1241
+ name="data-list-actionable-example-toolbar-check-check-input"
1242
+ aria-label="Standalone check"
1243
+ />
1244
+ </label>
1245
+ <button
1246
+ class="pf-v5-c-menu-toggle__button"
1247
+ type="button"
1248
+ aria-expanded="false"
1249
+ id="data-list-actionable-example-toolbar-menu-toggle-toggle-button"
1250
+ aria-label="Menu toggle"
1251
+ >
1252
+ <span class="pf-v5-c-menu-toggle__controls">
1253
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1254
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1255
+ </span>
1256
+ </span>
1257
+ </button>
1290
1258
  </div>
1291
1259
  </div>
1292
1260
 
1293
1261
  <div class="pf-v5-c-toolbar__item">
1294
1262
  <div class="pf-v5-c-context-selector">
1295
- <span id="-context-selector-label" hidden>Selected project:</span>
1263
+ <span
1264
+ id="data-list-actionable-example-toolbar-context-selector-label"
1265
+ hidden
1266
+ >Selected project:</span>
1296
1267
  <button
1297
1268
  class="pf-v5-c-context-selector__toggle"
1298
1269
  aria-expanded="false"
1299
- id="-context-selector-toggle"
1300
- aria-labelledby="-context-selector-label -context-selector-toggle"
1270
+ id="data-list-actionable-example-toolbar-context-selector-toggle"
1271
+ aria-labelledby="data-list-actionable-example-toolbar-context-selector-label data-list-actionable-example-toolbar-context-selector-toggle"
1301
1272
  >
1302
1273
  <span
1303
1274
  class="pf-v5-c-context-selector__toggle-text"
@@ -1345,7 +1316,10 @@ wrapperTag: div
1345
1316
  </div>
1346
1317
  </div>
1347
1318
 
1348
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
1319
+ <div
1320
+ class="pf-v5-c-overflow-menu"
1321
+ id="data-list-actionable-example-toolbar-overflow-menu"
1322
+ >
1349
1323
  <div
1350
1324
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
1351
1325
  >
@@ -1370,7 +1344,7 @@ wrapperTag: div
1370
1344
  <button
1371
1345
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
1372
1346
  type="button"
1373
- id="-overflow-menu-dropdown-toggle"
1347
+ id="data-list-actionable-example-toolbar-overflow-menu-dropdown-toggle"
1374
1348
  aria-label="Dropdown with additional options"
1375
1349
  aria-expanded="false"
1376
1350
  >
@@ -1379,7 +1353,7 @@ wrapperTag: div
1379
1353
  <ul
1380
1354
  class="pf-v5-c-dropdown__menu"
1381
1355
  role="menu"
1382
- aria-labelledby="-overflow-menu-dropdown-toggle"
1356
+ aria-labelledby="data-list-actionable-example-toolbar-overflow-menu-dropdown-toggle"
1383
1357
  hidden
1384
1358
  >
1385
1359
  <li role="none">
@@ -1399,7 +1373,7 @@ wrapperTag: div
1399
1373
  <button
1400
1374
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1401
1375
  type="button"
1402
- id="-top-pagination-toggle"
1376
+ id="data-list-actionable-example-toolbar-top-pagination-toggle"
1403
1377
  aria-haspopup="listbox"
1404
1378
  aria-expanded="false"
1405
1379
  >
@@ -1414,7 +1388,7 @@ wrapperTag: div
1414
1388
  <ul
1415
1389
  class="pf-v5-c-options-menu__menu"
1416
1390
  role="menu"
1417
- aria-labelledby="-top-pagination-toggle"
1391
+ aria-labelledby="data-list-actionable-example-toolbar-top-pagination-toggle"
1418
1392
  hidden
1419
1393
  >
1420
1394
  <li role="none">
@@ -1475,7 +1449,7 @@ wrapperTag: div
1475
1449
 
1476
1450
  <div
1477
1451
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
1478
- id="-expandable-content"
1452
+ id="data-list-actionable-example-toolbar-expandable-content"
1479
1453
  hidden
1480
1454
  ></div>
1481
1455
  </div>
@@ -2156,7 +2130,7 @@ wrapperTag: div
2156
2130
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
2157
2131
  >
2158
2132
  <div class="pf-v5-c-card">
2159
- <div class="pf-v5-c-toolbar">
2133
+ <div class="pf-v5-c-toolbar" id="data-list-expandable-example-toolbar">
2160
2134
  <div class="pf-v5-c-toolbar__content">
2161
2135
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
2162
2136
  <div class="pf-v5-c-toolbar__item pf-m-expand-all">
@@ -2182,65 +2156,46 @@ wrapperTag: div
2182
2156
  >
2183
2157
  <div class="pf-v5-c-toolbar__toggle">
2184
2158
  <button
2185
- class="pf-v5-c-button pf-m-plain"
2159
+ class="pf-v5-c-menu-toggle pf-m-plain"
2186
2160
  type="button"
2187
- aria-label="Show filters"
2188
2161
  aria-expanded="false"
2189
- aria-controls="-expandable-content"
2162
+ aria-label="Show filters"
2163
+ aria-controls="data-list-expandable-example-toolbar-expandable-content"
2190
2164
  >
2191
2165
  <i class="fas fa-filter" aria-hidden="true"></i>
2192
2166
  </button>
2193
2167
  </div>
2194
2168
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
2195
- <div class="pf-v5-c-dropdown">
2196
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
2197
- <label
2198
- class="pf-v5-c-dropdown__toggle-check"
2199
- for="-bulk-select-toggle-check"
2200
- >
2201
- <div class="pf-v5-c-check pf-m-standalone">
2202
- <input
2203
- class="pf-v5-c-check__input"
2204
- type="checkbox"
2205
- id="-bulk-select-toggle-check"
2206
- aria-label="Select all"
2207
- />
2208
- </div>
2209
- </label>
2210
-
2211
- <button
2212
- class="pf-v5-c-dropdown__toggle-button"
2213
- type="button"
2214
- aria-expanded="false"
2215
- id="-bulk-select-toggle-button"
2216
- aria-label="Dropdown toggle"
2217
- >
2218
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2219
- </button>
2220
- </div>
2221
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
2222
- <li role="none">
2223
- <button
2224
- class="pf-v5-c-dropdown__menu-item"
2225
- role="menuitem"
2226
- type="button"
2227
- >Select all</button>
2228
- </li>
2229
- <li role="none">
2230
- <button
2231
- class="pf-v5-c-dropdown__menu-item"
2232
- role="menuitem"
2233
- type="button"
2234
- >Select none</button>
2235
- </li>
2236
- <li role="none">
2237
- <button
2238
- class="pf-v5-c-dropdown__menu-item"
2239
- role="menuitem"
2240
- type="button"
2241
- >Other action</button>
2242
- </li>
2243
- </ul>
2169
+ <div
2170
+ class="pf-v5-c-menu-toggle pf-m-split-button"
2171
+ id="data-list-expandable-example-toolbar-check"
2172
+ >
2173
+ <label
2174
+ class="pf-v5-c-check pf-m-standalone"
2175
+ id="data-list-expandable-example-toolbar-check-check"
2176
+ for="data-list-expandable-example-toolbar-check-check-input"
2177
+ >
2178
+ <input
2179
+ class="pf-v5-c-check__input"
2180
+ type="checkbox"
2181
+ id="data-list-expandable-example-toolbar-check-check-input"
2182
+ name="data-list-expandable-example-toolbar-check-check-input"
2183
+ aria-label="Standalone check"
2184
+ />
2185
+ </label>
2186
+ <button
2187
+ class="pf-v5-c-menu-toggle__button"
2188
+ type="button"
2189
+ aria-expanded="false"
2190
+ id="data-list-expandable-example-toolbar-menu-toggle-toggle-button"
2191
+ aria-label="Menu toggle"
2192
+ >
2193
+ <span class="pf-v5-c-menu-toggle__controls">
2194
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2195
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2196
+ </span>
2197
+ </span>
2198
+ </button>
2244
2199
  </div>
2245
2200
  </div>
2246
2201
 
@@ -2251,72 +2206,22 @@ wrapperTag: div
2251
2206
  role="group"
2252
2207
  >
2253
2208
  <div class="pf-v5-c-input-group__item">
2254
- <div class="pf-v5-c-select" style="width: 124px">
2255
- <span id="-select-name-label" hidden>Choose one</span>
2256
-
2257
- <button
2258
- class="pf-v5-c-select__toggle"
2259
- type="button"
2260
- id="-select-name-toggle"
2261
- aria-haspopup="true"
2262
- aria-expanded="false"
2263
- aria-labelledby="-select-name-label -select-name-toggle"
2264
- >
2265
- <div class="pf-v5-c-select__toggle-wrapper">
2266
- <span class="pf-v5-c-select__toggle-icon">
2267
- <i class="fas fa-filter" aria-hidden="true"></i>
2268
- </span>
2269
- <span class="pf-v5-c-select__toggle-text">Name</span>
2270
- </div>
2271
- <span class="pf-v5-c-select__toggle-arrow">
2272
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2209
+ <button
2210
+ class="pf-v5-c-menu-toggle"
2211
+ type="button"
2212
+ aria-expanded="false"
2213
+ id="data-list-expandable-example-toolbar-search-filter-menu"
2214
+ >
2215
+ <span class="pf-v5-c-menu-toggle__icon">
2216
+ <i class="fas fa-filter" aria-hidden="true"></i>
2217
+ </span>
2218
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
2219
+ <span class="pf-v5-c-menu-toggle__controls">
2220
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2221
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2273
2222
  </span>
2274
- </button>
2275
-
2276
- <ul
2277
- class="pf-v5-c-select__menu"
2278
- role="listbox"
2279
- aria-labelledby="-select-name-label"
2280
- hidden
2281
- >
2282
- <li role="presentation">
2283
- <button
2284
- class="pf-v5-c-select__menu-item"
2285
- role="option"
2286
- >Running</button>
2287
- </li>
2288
- <li role="presentation">
2289
- <button
2290
- class="pf-v5-c-select__menu-item pf-m-selected"
2291
- role="option"
2292
- aria-selected="true"
2293
- >
2294
- Stopped
2295
- <span class="pf-v5-c-select__menu-item-icon">
2296
- <i class="fas fa-check" aria-hidden="true"></i>
2297
- </span>
2298
- </button>
2299
- </li>
2300
- <li role="presentation">
2301
- <button
2302
- class="pf-v5-c-select__menu-item"
2303
- role="option"
2304
- >Down</button>
2305
- </li>
2306
- <li role="presentation">
2307
- <button
2308
- class="pf-v5-c-select__menu-item"
2309
- role="option"
2310
- >Degraded</button>
2311
- </li>
2312
- <li role="presentation">
2313
- <button
2314
- class="pf-v5-c-select__menu-item"
2315
- role="option"
2316
- >Needs maintenance</button>
2317
- </li>
2318
- </ul>
2319
- </div>
2223
+ </span>
2224
+ </button>
2320
2225
  </div>
2321
2226
  <div class="pf-v5-c-input-group__item pf-m-fill">
2322
2227
  <div class="pf-v5-c-text-input-group">
@@ -2340,7 +2245,10 @@ wrapperTag: div
2340
2245
  </div>
2341
2246
  </div>
2342
2247
 
2343
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
2248
+ <div
2249
+ class="pf-v5-c-overflow-menu"
2250
+ id="data-list-expandable-example-toolbar-overflow-menu"
2251
+ >
2344
2252
  <div
2345
2253
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
2346
2254
  >
@@ -2358,7 +2266,7 @@ wrapperTag: div
2358
2266
  <button
2359
2267
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
2360
2268
  type="button"
2361
- id="-overflow-menu-dropdown-toggle"
2269
+ id="data-list-expandable-example-toolbar-overflow-menu-dropdown-toggle"
2362
2270
  aria-label="Dropdown with additional options"
2363
2271
  aria-expanded="false"
2364
2272
  >
@@ -2367,7 +2275,7 @@ wrapperTag: div
2367
2275
  <ul
2368
2276
  class="pf-v5-c-dropdown__menu"
2369
2277
  role="menu"
2370
- aria-labelledby="-overflow-menu-dropdown-toggle"
2278
+ aria-labelledby="data-list-expandable-example-toolbar-overflow-menu-dropdown-toggle"
2371
2279
  hidden
2372
2280
  >
2373
2281
  <li role="none">
@@ -2387,7 +2295,7 @@ wrapperTag: div
2387
2295
  <button
2388
2296
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2389
2297
  type="button"
2390
- id="-top-pagination-toggle"
2298
+ id="data-list-expandable-example-toolbar-top-pagination-toggle"
2391
2299
  aria-haspopup="listbox"
2392
2300
  aria-expanded="false"
2393
2301
  >
@@ -2402,7 +2310,7 @@ wrapperTag: div
2402
2310
  <ul
2403
2311
  class="pf-v5-c-options-menu__menu"
2404
2312
  role="menu"
2405
- aria-labelledby="-top-pagination-toggle"
2313
+ aria-labelledby="data-list-expandable-example-toolbar-top-pagination-toggle"
2406
2314
  hidden
2407
2315
  >
2408
2316
  <li role="none">
@@ -2463,7 +2371,7 @@ wrapperTag: div
2463
2371
 
2464
2372
  <div
2465
2373
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
2466
- id="-expandable-content"
2374
+ id="data-list-expandable-example-toolbar-expandable-content"
2467
2375
  hidden
2468
2376
  ></div>
2469
2377
  </div>
@@ -3897,7 +3805,10 @@ wrapperTag: div
3897
3805
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
3898
3806
  >
3899
3807
  <div class="pf-v5-c-card">
3900
- <div class="pf-v5-c-toolbar">
3808
+ <div
3809
+ class="pf-v5-c-toolbar"
3810
+ id="data-list-static-bottom-example-toolbar"
3811
+ >
3901
3812
  <div class="pf-v5-c-toolbar__content">
3902
3813
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
3903
3814
  <div
@@ -3905,11 +3816,11 @@ wrapperTag: div
3905
3816
  >
3906
3817
  <div class="pf-v5-c-toolbar__toggle">
3907
3818
  <button
3908
- class="pf-v5-c-button pf-m-plain"
3819
+ class="pf-v5-c-menu-toggle pf-m-plain"
3909
3820
  type="button"
3910
- aria-label="Show filters"
3911
3821
  aria-expanded="false"
3912
- aria-controls="-expandable-content"
3822
+ aria-label="Show filters"
3823
+ aria-controls="data-list-static-bottom-example-toolbar-expandable-content"
3913
3824
  >
3914
3825
  <i class="fas fa-filter" aria-hidden="true"></i>
3915
3826
  </button>
@@ -3922,72 +3833,22 @@ wrapperTag: div
3922
3833
  role="group"
3923
3834
  >
3924
3835
  <div class="pf-v5-c-input-group__item">
3925
- <div class="pf-v5-c-select" style="width: 124px">
3926
- <span id="-select-name-label" hidden>Choose one</span>
3927
-
3928
- <button
3929
- class="pf-v5-c-select__toggle"
3930
- type="button"
3931
- id="-select-name-toggle"
3932
- aria-haspopup="true"
3933
- aria-expanded="false"
3934
- aria-labelledby="-select-name-label -select-name-toggle"
3935
- >
3936
- <div class="pf-v5-c-select__toggle-wrapper">
3937
- <span class="pf-v5-c-select__toggle-icon">
3938
- <i class="fas fa-filter" aria-hidden="true"></i>
3939
- </span>
3940
- <span class="pf-v5-c-select__toggle-text">Name</span>
3941
- </div>
3942
- <span class="pf-v5-c-select__toggle-arrow">
3943
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3836
+ <button
3837
+ class="pf-v5-c-menu-toggle"
3838
+ type="button"
3839
+ aria-expanded="false"
3840
+ id="data-list-static-bottom-example-toolbar-search-filter-menu"
3841
+ >
3842
+ <span class="pf-v5-c-menu-toggle__icon">
3843
+ <i class="fas fa-filter" aria-hidden="true"></i>
3844
+ </span>
3845
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
3846
+ <span class="pf-v5-c-menu-toggle__controls">
3847
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3848
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3944
3849
  </span>
3945
- </button>
3946
-
3947
- <ul
3948
- class="pf-v5-c-select__menu"
3949
- role="listbox"
3950
- aria-labelledby="-select-name-label"
3951
- hidden
3952
- >
3953
- <li role="presentation">
3954
- <button
3955
- class="pf-v5-c-select__menu-item"
3956
- role="option"
3957
- >Running</button>
3958
- </li>
3959
- <li role="presentation">
3960
- <button
3961
- class="pf-v5-c-select__menu-item pf-m-selected"
3962
- role="option"
3963
- aria-selected="true"
3964
- >
3965
- Stopped
3966
- <span class="pf-v5-c-select__menu-item-icon">
3967
- <i class="fas fa-check" aria-hidden="true"></i>
3968
- </span>
3969
- </button>
3970
- </li>
3971
- <li role="presentation">
3972
- <button
3973
- class="pf-v5-c-select__menu-item"
3974
- role="option"
3975
- >Down</button>
3976
- </li>
3977
- <li role="presentation">
3978
- <button
3979
- class="pf-v5-c-select__menu-item"
3980
- role="option"
3981
- >Degraded</button>
3982
- </li>
3983
- <li role="presentation">
3984
- <button
3985
- class="pf-v5-c-select__menu-item"
3986
- role="option"
3987
- >Needs maintenance</button>
3988
- </li>
3989
- </ul>
3990
- </div>
3850
+ </span>
3851
+ </button>
3991
3852
  </div>
3992
3853
  <div class="pf-v5-c-input-group__item pf-m-fill">
3993
3854
  <div class="pf-v5-c-text-input-group">
@@ -4011,7 +3872,10 @@ wrapperTag: div
4011
3872
  </div>
4012
3873
  </div>
4013
3874
 
4014
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
3875
+ <div
3876
+ class="pf-v5-c-overflow-menu"
3877
+ id="data-list-static-bottom-example-toolbar-overflow-menu"
3878
+ >
4015
3879
  <div
4016
3880
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
4017
3881
  >
@@ -4036,7 +3900,7 @@ wrapperTag: div
4036
3900
  <button
4037
3901
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
4038
3902
  type="button"
4039
- id="-overflow-menu-dropdown-toggle"
3903
+ id="data-list-static-bottom-example-toolbar-overflow-menu-dropdown-toggle"
4040
3904
  aria-label="Dropdown with additional options"
4041
3905
  aria-expanded="false"
4042
3906
  >
@@ -4045,7 +3909,7 @@ wrapperTag: div
4045
3909
  <ul
4046
3910
  class="pf-v5-c-dropdown__menu"
4047
3911
  role="menu"
4048
- aria-labelledby="-overflow-menu-dropdown-toggle"
3912
+ aria-labelledby="data-list-static-bottom-example-toolbar-overflow-menu-dropdown-toggle"
4049
3913
  hidden
4050
3914
  >
4051
3915
  <li role="none">
@@ -4065,7 +3929,7 @@ wrapperTag: div
4065
3929
  <button
4066
3930
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
4067
3931
  type="button"
4068
- id="-top-pagination-toggle"
3932
+ id="data-list-static-bottom-example-toolbar-top-pagination-toggle"
4069
3933
  aria-haspopup="listbox"
4070
3934
  aria-expanded="false"
4071
3935
  >
@@ -4080,7 +3944,7 @@ wrapperTag: div
4080
3944
  <ul
4081
3945
  class="pf-v5-c-options-menu__menu"
4082
3946
  role="menu"
4083
- aria-labelledby="-top-pagination-toggle"
3947
+ aria-labelledby="data-list-static-bottom-example-toolbar-top-pagination-toggle"
4084
3948
  hidden
4085
3949
  >
4086
3950
  <li role="none">
@@ -4141,7 +4005,7 @@ wrapperTag: div
4141
4005
 
4142
4006
  <div
4143
4007
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
4144
- id="-expandable-content"
4008
+ id="data-list-static-bottom-example-toolbar-expandable-content"
4145
4009
  hidden
4146
4010
  ></div>
4147
4011
  </div>