@patternfly/patternfly 5.2.0-prerelease.3 → 5.2.0-prerelease.4

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 (24) hide show
  1. package/components/Accordion/accordion.css +10 -1
  2. package/components/Accordion/accordion.scss +13 -1
  3. package/docs/components/Accordion/examples/Accordion.md +95 -0
  4. package/docs/components/LogViewer/examples/LogViewer.md +130 -130
  5. package/docs/components/Menu/examples/Menu.md +507 -473
  6. package/docs/components/MenuToggle/examples/MenuToggle.md +106 -114
  7. package/docs/components/Nav/examples/Navigation.md +140 -113
  8. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  9. package/docs/components/Toolbar/examples/Toolbar.md +462 -2791
  10. package/docs/demos/CardView/examples/CardView.md +32 -51
  11. package/docs/demos/DataList/examples/DataList.md +182 -318
  12. package/docs/demos/Masthead/examples/Masthead.md +48 -207
  13. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +2 -1
  14. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +80 -268
  15. package/docs/demos/Table/examples/Table.md +1004 -1787
  16. package/docs/demos/Tabs/examples/Tabs.md +2 -2
  17. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  18. package/docs/demos/Toolbar/examples/Toolbar.md +691 -1015
  19. package/package.json +2 -2
  20. package/patternfly-no-globals.css +10 -1
  21. package/patternfly-theme-dark-unversioned.css +10 -1
  22. package/patternfly.css +10 -1
  23. package/patternfly.min.css +1 -1
  24. package/patternfly.min.css.map +1 -1
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -199,70 +199,54 @@ wrapperTag: div
199
199
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
200
200
  >
201
201
  <div class="pf-v5-c-card">
202
- <div class="pf-v5-c-toolbar">
202
+ <div class="pf-v5-c-toolbar" id="data-list-basic-example-toolbar">
203
203
  <div class="pf-v5-c-toolbar__content">
204
204
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
205
205
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
206
- <div class="pf-v5-c-dropdown">
207
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
208
- <label
209
- class="pf-v5-c-dropdown__toggle-check"
210
- for="-bulk-select-toggle-check"
211
- >
212
- <div class="pf-v5-c-check pf-m-standalone">
213
- <input
214
- class="pf-v5-c-check__input"
215
- type="checkbox"
216
- id="-bulk-select-toggle-check"
217
- aria-label="Select all"
218
- />
219
- </div>
220
- </label>
221
-
222
- <button
223
- class="pf-v5-c-dropdown__toggle-button"
224
- type="button"
225
- aria-expanded="false"
226
- id="-bulk-select-toggle-button"
227
- aria-label="Dropdown toggle"
228
- >
229
- <i class="fas fa-caret-down" aria-hidden="true"></i>
230
- </button>
231
- </div>
232
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
233
- <li role="none">
234
- <button
235
- class="pf-v5-c-dropdown__menu-item"
236
- role="menuitem"
237
- type="button"
238
- >Select all</button>
239
- </li>
240
- <li role="none">
241
- <button
242
- class="pf-v5-c-dropdown__menu-item"
243
- role="menuitem"
244
- type="button"
245
- >Select none</button>
246
- </li>
247
- <li role="none">
248
- <button
249
- class="pf-v5-c-dropdown__menu-item"
250
- role="menuitem"
251
- type="button"
252
- >Other action</button>
253
- </li>
254
- </ul>
206
+ <div
207
+ class="pf-v5-c-menu-toggle pf-m-split-button"
208
+ id="data-list-basic-example-toolbar-check"
209
+ >
210
+ <label
211
+ class="pf-v5-c-check pf-m-standalone"
212
+ id="data-list-basic-example-toolbar-check-check"
213
+ for="data-list-basic-example-toolbar-check-check-input"
214
+ >
215
+ <input
216
+ class="pf-v5-c-check__input"
217
+ type="checkbox"
218
+ id="data-list-basic-example-toolbar-check-check-input"
219
+ name="data-list-basic-example-toolbar-check-check-input"
220
+ aria-label="Standalone check"
221
+ />
222
+ </label>
223
+ <button
224
+ class="pf-v5-c-menu-toggle__button"
225
+ type="button"
226
+ aria-expanded="false"
227
+ id="data-list-basic-example-toolbar-menu-toggle-toggle-button"
228
+ aria-label="Menu toggle"
229
+ >
230
+ <span class="pf-v5-c-menu-toggle__controls">
231
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
232
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
233
+ </span>
234
+ </span>
235
+ </button>
255
236
  </div>
256
237
  </div>
257
238
 
258
239
  <div class="pf-v5-c-toolbar__item">
259
240
  <div class="pf-v5-c-context-selector">
260
- <span id="-context-selector-label" hidden>Selected project:</span>
241
+ <span
242
+ id="data-list-basic-example-toolbar-context-selector-label"
243
+ hidden
244
+ >Selected project:</span>
261
245
  <button
262
246
  class="pf-v5-c-context-selector__toggle"
263
247
  aria-expanded="false"
264
- id="-context-selector-toggle"
265
- aria-labelledby="-context-selector-label -context-selector-toggle"
248
+ id="data-list-basic-example-toolbar-context-selector-toggle"
249
+ aria-labelledby="data-list-basic-example-toolbar-context-selector-label data-list-basic-example-toolbar-context-selector-toggle"
266
250
  >
267
251
  <span
268
252
  class="pf-v5-c-context-selector__toggle-text"
@@ -306,7 +290,10 @@ wrapperTag: div
306
290
  </div>
307
291
  </div>
308
292
 
309
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
293
+ <div
294
+ class="pf-v5-c-overflow-menu"
295
+ id="data-list-basic-example-toolbar-overflow-menu"
296
+ >
310
297
  <div
311
298
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
312
299
  >
@@ -324,7 +311,7 @@ wrapperTag: div
324
311
  <button
325
312
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
326
313
  type="button"
327
- id="-overflow-menu-dropdown-toggle"
314
+ id="data-list-basic-example-toolbar-overflow-menu-dropdown-toggle"
328
315
  aria-label="Dropdown with additional options"
329
316
  aria-expanded="false"
330
317
  >
@@ -333,7 +320,7 @@ wrapperTag: div
333
320
  <ul
334
321
  class="pf-v5-c-dropdown__menu"
335
322
  role="menu"
336
- aria-labelledby="-overflow-menu-dropdown-toggle"
323
+ aria-labelledby="data-list-basic-example-toolbar-overflow-menu-dropdown-toggle"
337
324
  hidden
338
325
  >
339
326
  <li role="none">
@@ -353,7 +340,7 @@ wrapperTag: div
353
340
  <button
354
341
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
355
342
  type="button"
356
- id="-top-pagination-toggle"
343
+ id="data-list-basic-example-toolbar-top-pagination-toggle"
357
344
  aria-haspopup="listbox"
358
345
  aria-expanded="false"
359
346
  >
@@ -368,7 +355,7 @@ wrapperTag: div
368
355
  <ul
369
356
  class="pf-v5-c-options-menu__menu"
370
357
  role="menu"
371
- aria-labelledby="-top-pagination-toggle"
358
+ aria-labelledby="data-list-basic-example-toolbar-top-pagination-toggle"
372
359
  hidden
373
360
  >
374
361
  <li role="none">
@@ -429,7 +416,7 @@ wrapperTag: div
429
416
 
430
417
  <div
431
418
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
432
- id="-expandable-content"
419
+ id="data-list-basic-example-toolbar-expandable-content"
433
420
  hidden
434
421
  ></div>
435
422
  </div>
@@ -1070,7 +1057,7 @@ wrapperTag: div
1070
1057
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
1071
1058
  >
1072
1059
  <div class="pf-v5-c-card">
1073
- <div class="pf-v5-c-toolbar">
1060
+ <div class="pf-v5-c-toolbar" id="data-list-actionable-example-toolbar">
1074
1061
  <div class="pf-v5-c-toolbar__content">
1075
1062
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
1076
1063
  <div
@@ -1078,76 +1065,60 @@ wrapperTag: div
1078
1065
  >
1079
1066
  <div class="pf-v5-c-toolbar__toggle">
1080
1067
  <button
1081
- class="pf-v5-c-button pf-m-plain"
1068
+ class="pf-v5-c-menu-toggle pf-m-plain"
1082
1069
  type="button"
1083
- aria-label="Show filters"
1084
1070
  aria-expanded="false"
1085
- aria-controls="-expandable-content"
1071
+ aria-label="Show filters"
1072
+ aria-controls="data-list-actionable-example-toolbar-expandable-content"
1086
1073
  >
1087
1074
  <i class="fas fa-filter" aria-hidden="true"></i>
1088
1075
  </button>
1089
1076
  </div>
1090
1077
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
1091
- <div class="pf-v5-c-dropdown">
1092
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
1093
- <label
1094
- class="pf-v5-c-dropdown__toggle-check"
1095
- for="-bulk-select-toggle-check"
1096
- >
1097
- <div class="pf-v5-c-check pf-m-standalone">
1098
- <input
1099
- class="pf-v5-c-check__input"
1100
- type="checkbox"
1101
- id="-bulk-select-toggle-check"
1102
- aria-label="Select all"
1103
- />
1104
- </div>
1105
- </label>
1106
-
1107
- <button
1108
- class="pf-v5-c-dropdown__toggle-button"
1109
- type="button"
1110
- aria-expanded="false"
1111
- id="-bulk-select-toggle-button"
1112
- aria-label="Dropdown toggle"
1113
- >
1114
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1115
- </button>
1116
- </div>
1117
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1118
- <li role="none">
1119
- <button
1120
- class="pf-v5-c-dropdown__menu-item"
1121
- role="menuitem"
1122
- type="button"
1123
- >Select all</button>
1124
- </li>
1125
- <li role="none">
1126
- <button
1127
- class="pf-v5-c-dropdown__menu-item"
1128
- role="menuitem"
1129
- type="button"
1130
- >Select none</button>
1131
- </li>
1132
- <li role="none">
1133
- <button
1134
- class="pf-v5-c-dropdown__menu-item"
1135
- role="menuitem"
1136
- type="button"
1137
- >Other action</button>
1138
- </li>
1139
- </ul>
1078
+ <div
1079
+ class="pf-v5-c-menu-toggle pf-m-split-button"
1080
+ id="data-list-actionable-example-toolbar-check"
1081
+ >
1082
+ <label
1083
+ class="pf-v5-c-check pf-m-standalone"
1084
+ id="data-list-actionable-example-toolbar-check-check"
1085
+ for="data-list-actionable-example-toolbar-check-check-input"
1086
+ >
1087
+ <input
1088
+ class="pf-v5-c-check__input"
1089
+ type="checkbox"
1090
+ id="data-list-actionable-example-toolbar-check-check-input"
1091
+ name="data-list-actionable-example-toolbar-check-check-input"
1092
+ aria-label="Standalone check"
1093
+ />
1094
+ </label>
1095
+ <button
1096
+ class="pf-v5-c-menu-toggle__button"
1097
+ type="button"
1098
+ aria-expanded="false"
1099
+ id="data-list-actionable-example-toolbar-menu-toggle-toggle-button"
1100
+ aria-label="Menu toggle"
1101
+ >
1102
+ <span class="pf-v5-c-menu-toggle__controls">
1103
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1104
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1105
+ </span>
1106
+ </span>
1107
+ </button>
1140
1108
  </div>
1141
1109
  </div>
1142
1110
 
1143
1111
  <div class="pf-v5-c-toolbar__item">
1144
1112
  <div class="pf-v5-c-context-selector">
1145
- <span id="-context-selector-label" hidden>Selected project:</span>
1113
+ <span
1114
+ id="data-list-actionable-example-toolbar-context-selector-label"
1115
+ hidden
1116
+ >Selected project:</span>
1146
1117
  <button
1147
1118
  class="pf-v5-c-context-selector__toggle"
1148
1119
  aria-expanded="false"
1149
- id="-context-selector-toggle"
1150
- aria-labelledby="-context-selector-label -context-selector-toggle"
1120
+ id="data-list-actionable-example-toolbar-context-selector-toggle"
1121
+ aria-labelledby="data-list-actionable-example-toolbar-context-selector-label data-list-actionable-example-toolbar-context-selector-toggle"
1151
1122
  >
1152
1123
  <span
1153
1124
  class="pf-v5-c-context-selector__toggle-text"
@@ -1195,7 +1166,10 @@ wrapperTag: div
1195
1166
  </div>
1196
1167
  </div>
1197
1168
 
1198
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
1169
+ <div
1170
+ class="pf-v5-c-overflow-menu"
1171
+ id="data-list-actionable-example-toolbar-overflow-menu"
1172
+ >
1199
1173
  <div
1200
1174
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
1201
1175
  >
@@ -1220,7 +1194,7 @@ wrapperTag: div
1220
1194
  <button
1221
1195
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
1222
1196
  type="button"
1223
- id="-overflow-menu-dropdown-toggle"
1197
+ id="data-list-actionable-example-toolbar-overflow-menu-dropdown-toggle"
1224
1198
  aria-label="Dropdown with additional options"
1225
1199
  aria-expanded="false"
1226
1200
  >
@@ -1229,7 +1203,7 @@ wrapperTag: div
1229
1203
  <ul
1230
1204
  class="pf-v5-c-dropdown__menu"
1231
1205
  role="menu"
1232
- aria-labelledby="-overflow-menu-dropdown-toggle"
1206
+ aria-labelledby="data-list-actionable-example-toolbar-overflow-menu-dropdown-toggle"
1233
1207
  hidden
1234
1208
  >
1235
1209
  <li role="none">
@@ -1249,7 +1223,7 @@ wrapperTag: div
1249
1223
  <button
1250
1224
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1251
1225
  type="button"
1252
- id="-top-pagination-toggle"
1226
+ id="data-list-actionable-example-toolbar-top-pagination-toggle"
1253
1227
  aria-haspopup="listbox"
1254
1228
  aria-expanded="false"
1255
1229
  >
@@ -1264,7 +1238,7 @@ wrapperTag: div
1264
1238
  <ul
1265
1239
  class="pf-v5-c-options-menu__menu"
1266
1240
  role="menu"
1267
- aria-labelledby="-top-pagination-toggle"
1241
+ aria-labelledby="data-list-actionable-example-toolbar-top-pagination-toggle"
1268
1242
  hidden
1269
1243
  >
1270
1244
  <li role="none">
@@ -1325,7 +1299,7 @@ wrapperTag: div
1325
1299
 
1326
1300
  <div
1327
1301
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
1328
- id="-expandable-content"
1302
+ id="data-list-actionable-example-toolbar-expandable-content"
1329
1303
  hidden
1330
1304
  ></div>
1331
1305
  </div>
@@ -1931,7 +1905,7 @@ wrapperTag: div
1931
1905
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
1932
1906
  >
1933
1907
  <div class="pf-v5-c-card">
1934
- <div class="pf-v5-c-toolbar">
1908
+ <div class="pf-v5-c-toolbar" id="data-list-expandable-example-toolbar">
1935
1909
  <div class="pf-v5-c-toolbar__content">
1936
1910
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
1937
1911
  <div class="pf-v5-c-toolbar__item pf-m-expand-all">
@@ -1957,65 +1931,46 @@ wrapperTag: div
1957
1931
  >
1958
1932
  <div class="pf-v5-c-toolbar__toggle">
1959
1933
  <button
1960
- class="pf-v5-c-button pf-m-plain"
1934
+ class="pf-v5-c-menu-toggle pf-m-plain"
1961
1935
  type="button"
1962
- aria-label="Show filters"
1963
1936
  aria-expanded="false"
1964
- aria-controls="-expandable-content"
1937
+ aria-label="Show filters"
1938
+ aria-controls="data-list-expandable-example-toolbar-expandable-content"
1965
1939
  >
1966
1940
  <i class="fas fa-filter" aria-hidden="true"></i>
1967
1941
  </button>
1968
1942
  </div>
1969
1943
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
1970
- <div class="pf-v5-c-dropdown">
1971
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
1972
- <label
1973
- class="pf-v5-c-dropdown__toggle-check"
1974
- for="-bulk-select-toggle-check"
1975
- >
1976
- <div class="pf-v5-c-check pf-m-standalone">
1977
- <input
1978
- class="pf-v5-c-check__input"
1979
- type="checkbox"
1980
- id="-bulk-select-toggle-check"
1981
- aria-label="Select all"
1982
- />
1983
- </div>
1984
- </label>
1985
-
1986
- <button
1987
- class="pf-v5-c-dropdown__toggle-button"
1988
- type="button"
1989
- aria-expanded="false"
1990
- id="-bulk-select-toggle-button"
1991
- aria-label="Dropdown toggle"
1992
- >
1993
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1994
- </button>
1995
- </div>
1996
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1997
- <li role="none">
1998
- <button
1999
- class="pf-v5-c-dropdown__menu-item"
2000
- role="menuitem"
2001
- type="button"
2002
- >Select all</button>
2003
- </li>
2004
- <li role="none">
2005
- <button
2006
- class="pf-v5-c-dropdown__menu-item"
2007
- role="menuitem"
2008
- type="button"
2009
- >Select none</button>
2010
- </li>
2011
- <li role="none">
2012
- <button
2013
- class="pf-v5-c-dropdown__menu-item"
2014
- role="menuitem"
2015
- type="button"
2016
- >Other action</button>
2017
- </li>
2018
- </ul>
1944
+ <div
1945
+ class="pf-v5-c-menu-toggle pf-m-split-button"
1946
+ id="data-list-expandable-example-toolbar-check"
1947
+ >
1948
+ <label
1949
+ class="pf-v5-c-check pf-m-standalone"
1950
+ id="data-list-expandable-example-toolbar-check-check"
1951
+ for="data-list-expandable-example-toolbar-check-check-input"
1952
+ >
1953
+ <input
1954
+ class="pf-v5-c-check__input"
1955
+ type="checkbox"
1956
+ id="data-list-expandable-example-toolbar-check-check-input"
1957
+ name="data-list-expandable-example-toolbar-check-check-input"
1958
+ aria-label="Standalone check"
1959
+ />
1960
+ </label>
1961
+ <button
1962
+ class="pf-v5-c-menu-toggle__button"
1963
+ type="button"
1964
+ aria-expanded="false"
1965
+ id="data-list-expandable-example-toolbar-menu-toggle-toggle-button"
1966
+ aria-label="Menu toggle"
1967
+ >
1968
+ <span class="pf-v5-c-menu-toggle__controls">
1969
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1970
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1971
+ </span>
1972
+ </span>
1973
+ </button>
2019
1974
  </div>
2020
1975
  </div>
2021
1976
 
@@ -2026,72 +1981,22 @@ wrapperTag: div
2026
1981
  role="group"
2027
1982
  >
2028
1983
  <div class="pf-v5-c-input-group__item">
2029
- <div class="pf-v5-c-select" style="width: 124px">
2030
- <span id="-select-name-label" hidden>Choose one</span>
2031
-
2032
- <button
2033
- class="pf-v5-c-select__toggle"
2034
- type="button"
2035
- id="-select-name-toggle"
2036
- aria-haspopup="true"
2037
- aria-expanded="false"
2038
- aria-labelledby="-select-name-label -select-name-toggle"
2039
- >
2040
- <div class="pf-v5-c-select__toggle-wrapper">
2041
- <span class="pf-v5-c-select__toggle-icon">
2042
- <i class="fas fa-filter" aria-hidden="true"></i>
2043
- </span>
2044
- <span class="pf-v5-c-select__toggle-text">Name</span>
2045
- </div>
2046
- <span class="pf-v5-c-select__toggle-arrow">
1984
+ <button
1985
+ class="pf-v5-c-menu-toggle"
1986
+ type="button"
1987
+ aria-expanded="false"
1988
+ id="data-list-expandable-example-toolbar-search-filter-menu"
1989
+ >
1990
+ <span class="pf-v5-c-menu-toggle__icon">
1991
+ <i class="fas fa-filter" aria-hidden="true"></i>
1992
+ </span>
1993
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
1994
+ <span class="pf-v5-c-menu-toggle__controls">
1995
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2047
1996
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2048
1997
  </span>
2049
- </button>
2050
-
2051
- <ul
2052
- class="pf-v5-c-select__menu"
2053
- role="listbox"
2054
- aria-labelledby="-select-name-label"
2055
- hidden
2056
- >
2057
- <li role="presentation">
2058
- <button
2059
- class="pf-v5-c-select__menu-item"
2060
- role="option"
2061
- >Running</button>
2062
- </li>
2063
- <li role="presentation">
2064
- <button
2065
- class="pf-v5-c-select__menu-item pf-m-selected"
2066
- role="option"
2067
- aria-selected="true"
2068
- >
2069
- Stopped
2070
- <span class="pf-v5-c-select__menu-item-icon">
2071
- <i class="fas fa-check" aria-hidden="true"></i>
2072
- </span>
2073
- </button>
2074
- </li>
2075
- <li role="presentation">
2076
- <button
2077
- class="pf-v5-c-select__menu-item"
2078
- role="option"
2079
- >Down</button>
2080
- </li>
2081
- <li role="presentation">
2082
- <button
2083
- class="pf-v5-c-select__menu-item"
2084
- role="option"
2085
- >Degraded</button>
2086
- </li>
2087
- <li role="presentation">
2088
- <button
2089
- class="pf-v5-c-select__menu-item"
2090
- role="option"
2091
- >Needs maintenance</button>
2092
- </li>
2093
- </ul>
2094
- </div>
1998
+ </span>
1999
+ </button>
2095
2000
  </div>
2096
2001
  <div class="pf-v5-c-input-group__item pf-m-fill">
2097
2002
  <div class="pf-v5-c-text-input-group">
@@ -2115,7 +2020,10 @@ wrapperTag: div
2115
2020
  </div>
2116
2021
  </div>
2117
2022
 
2118
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
2023
+ <div
2024
+ class="pf-v5-c-overflow-menu"
2025
+ id="data-list-expandable-example-toolbar-overflow-menu"
2026
+ >
2119
2027
  <div
2120
2028
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
2121
2029
  >
@@ -2133,7 +2041,7 @@ wrapperTag: div
2133
2041
  <button
2134
2042
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
2135
2043
  type="button"
2136
- id="-overflow-menu-dropdown-toggle"
2044
+ id="data-list-expandable-example-toolbar-overflow-menu-dropdown-toggle"
2137
2045
  aria-label="Dropdown with additional options"
2138
2046
  aria-expanded="false"
2139
2047
  >
@@ -2142,7 +2050,7 @@ wrapperTag: div
2142
2050
  <ul
2143
2051
  class="pf-v5-c-dropdown__menu"
2144
2052
  role="menu"
2145
- aria-labelledby="-overflow-menu-dropdown-toggle"
2053
+ aria-labelledby="data-list-expandable-example-toolbar-overflow-menu-dropdown-toggle"
2146
2054
  hidden
2147
2055
  >
2148
2056
  <li role="none">
@@ -2162,7 +2070,7 @@ wrapperTag: div
2162
2070
  <button
2163
2071
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2164
2072
  type="button"
2165
- id="-top-pagination-toggle"
2073
+ id="data-list-expandable-example-toolbar-top-pagination-toggle"
2166
2074
  aria-haspopup="listbox"
2167
2075
  aria-expanded="false"
2168
2076
  >
@@ -2177,7 +2085,7 @@ wrapperTag: div
2177
2085
  <ul
2178
2086
  class="pf-v5-c-options-menu__menu"
2179
2087
  role="menu"
2180
- aria-labelledby="-top-pagination-toggle"
2088
+ aria-labelledby="data-list-expandable-example-toolbar-top-pagination-toggle"
2181
2089
  hidden
2182
2090
  >
2183
2091
  <li role="none">
@@ -2238,7 +2146,7 @@ wrapperTag: div
2238
2146
 
2239
2147
  <div
2240
2148
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
2241
- id="-expandable-content"
2149
+ id="data-list-expandable-example-toolbar-expandable-content"
2242
2150
  hidden
2243
2151
  ></div>
2244
2152
  </div>
@@ -3597,7 +3505,10 @@ wrapperTag: div
3597
3505
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
3598
3506
  >
3599
3507
  <div class="pf-v5-c-card">
3600
- <div class="pf-v5-c-toolbar">
3508
+ <div
3509
+ class="pf-v5-c-toolbar"
3510
+ id="data-list-static-bottom-example-toolbar"
3511
+ >
3601
3512
  <div class="pf-v5-c-toolbar__content">
3602
3513
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
3603
3514
  <div
@@ -3605,11 +3516,11 @@ wrapperTag: div
3605
3516
  >
3606
3517
  <div class="pf-v5-c-toolbar__toggle">
3607
3518
  <button
3608
- class="pf-v5-c-button pf-m-plain"
3519
+ class="pf-v5-c-menu-toggle pf-m-plain"
3609
3520
  type="button"
3610
- aria-label="Show filters"
3611
3521
  aria-expanded="false"
3612
- aria-controls="-expandable-content"
3522
+ aria-label="Show filters"
3523
+ aria-controls="data-list-static-bottom-example-toolbar-expandable-content"
3613
3524
  >
3614
3525
  <i class="fas fa-filter" aria-hidden="true"></i>
3615
3526
  </button>
@@ -3622,72 +3533,22 @@ wrapperTag: div
3622
3533
  role="group"
3623
3534
  >
3624
3535
  <div class="pf-v5-c-input-group__item">
3625
- <div class="pf-v5-c-select" style="width: 124px">
3626
- <span id="-select-name-label" hidden>Choose one</span>
3627
-
3628
- <button
3629
- class="pf-v5-c-select__toggle"
3630
- type="button"
3631
- id="-select-name-toggle"
3632
- aria-haspopup="true"
3633
- aria-expanded="false"
3634
- aria-labelledby="-select-name-label -select-name-toggle"
3635
- >
3636
- <div class="pf-v5-c-select__toggle-wrapper">
3637
- <span class="pf-v5-c-select__toggle-icon">
3638
- <i class="fas fa-filter" aria-hidden="true"></i>
3639
- </span>
3640
- <span class="pf-v5-c-select__toggle-text">Name</span>
3641
- </div>
3642
- <span class="pf-v5-c-select__toggle-arrow">
3536
+ <button
3537
+ class="pf-v5-c-menu-toggle"
3538
+ type="button"
3539
+ aria-expanded="false"
3540
+ id="data-list-static-bottom-example-toolbar-search-filter-menu"
3541
+ >
3542
+ <span class="pf-v5-c-menu-toggle__icon">
3543
+ <i class="fas fa-filter" aria-hidden="true"></i>
3544
+ </span>
3545
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
3546
+ <span class="pf-v5-c-menu-toggle__controls">
3547
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3643
3548
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3644
3549
  </span>
3645
- </button>
3646
-
3647
- <ul
3648
- class="pf-v5-c-select__menu"
3649
- role="listbox"
3650
- aria-labelledby="-select-name-label"
3651
- hidden
3652
- >
3653
- <li role="presentation">
3654
- <button
3655
- class="pf-v5-c-select__menu-item"
3656
- role="option"
3657
- >Running</button>
3658
- </li>
3659
- <li role="presentation">
3660
- <button
3661
- class="pf-v5-c-select__menu-item pf-m-selected"
3662
- role="option"
3663
- aria-selected="true"
3664
- >
3665
- Stopped
3666
- <span class="pf-v5-c-select__menu-item-icon">
3667
- <i class="fas fa-check" aria-hidden="true"></i>
3668
- </span>
3669
- </button>
3670
- </li>
3671
- <li role="presentation">
3672
- <button
3673
- class="pf-v5-c-select__menu-item"
3674
- role="option"
3675
- >Down</button>
3676
- </li>
3677
- <li role="presentation">
3678
- <button
3679
- class="pf-v5-c-select__menu-item"
3680
- role="option"
3681
- >Degraded</button>
3682
- </li>
3683
- <li role="presentation">
3684
- <button
3685
- class="pf-v5-c-select__menu-item"
3686
- role="option"
3687
- >Needs maintenance</button>
3688
- </li>
3689
- </ul>
3690
- </div>
3550
+ </span>
3551
+ </button>
3691
3552
  </div>
3692
3553
  <div class="pf-v5-c-input-group__item pf-m-fill">
3693
3554
  <div class="pf-v5-c-text-input-group">
@@ -3711,7 +3572,10 @@ wrapperTag: div
3711
3572
  </div>
3712
3573
  </div>
3713
3574
 
3714
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
3575
+ <div
3576
+ class="pf-v5-c-overflow-menu"
3577
+ id="data-list-static-bottom-example-toolbar-overflow-menu"
3578
+ >
3715
3579
  <div
3716
3580
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
3717
3581
  >
@@ -3736,7 +3600,7 @@ wrapperTag: div
3736
3600
  <button
3737
3601
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
3738
3602
  type="button"
3739
- id="-overflow-menu-dropdown-toggle"
3603
+ id="data-list-static-bottom-example-toolbar-overflow-menu-dropdown-toggle"
3740
3604
  aria-label="Dropdown with additional options"
3741
3605
  aria-expanded="false"
3742
3606
  >
@@ -3745,7 +3609,7 @@ wrapperTag: div
3745
3609
  <ul
3746
3610
  class="pf-v5-c-dropdown__menu"
3747
3611
  role="menu"
3748
- aria-labelledby="-overflow-menu-dropdown-toggle"
3612
+ aria-labelledby="data-list-static-bottom-example-toolbar-overflow-menu-dropdown-toggle"
3749
3613
  hidden
3750
3614
  >
3751
3615
  <li role="none">
@@ -3765,7 +3629,7 @@ wrapperTag: div
3765
3629
  <button
3766
3630
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3767
3631
  type="button"
3768
- id="-top-pagination-toggle"
3632
+ id="data-list-static-bottom-example-toolbar-top-pagination-toggle"
3769
3633
  aria-haspopup="listbox"
3770
3634
  aria-expanded="false"
3771
3635
  >
@@ -3780,7 +3644,7 @@ wrapperTag: div
3780
3644
  <ul
3781
3645
  class="pf-v5-c-options-menu__menu"
3782
3646
  role="menu"
3783
- aria-labelledby="-top-pagination-toggle"
3647
+ aria-labelledby="data-list-static-bottom-example-toolbar-top-pagination-toggle"
3784
3648
  hidden
3785
3649
  >
3786
3650
  <li role="none">
@@ -3841,7 +3705,7 @@ wrapperTag: div
3841
3705
 
3842
3706
  <div
3843
3707
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
3844
- id="-expandable-content"
3708
+ id="data-list-static-bottom-example-toolbar-expandable-content"
3845
3709
  hidden
3846
3710
  ></div>
3847
3711
  </div>