@patternfly/patternfly 6.0.0-alpha.31 → 6.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 (16) hide show
  1. package/components/Pagination/pagination.css +61 -121
  2. package/components/Pagination/pagination.scss +48 -127
  3. package/docs/components/Pagination/examples/Pagination.md +663 -637
  4. package/docs/components/Toolbar/examples/Toolbar.md +102 -100
  5. package/docs/demos/CardView/examples/CardView.md +102 -98
  6. package/docs/demos/DataList/examples/DataList.md +408 -392
  7. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +319 -299
  8. package/docs/demos/Table/examples/Table.md +1239 -1193
  9. package/docs/demos/Toolbar/examples/Toolbar.md +408 -392
  10. package/package.json +1 -1
  11. package/patternfly-no-globals.css +61 -125
  12. package/patternfly-theme-dark-unversioned.css +61 -125
  13. package/patternfly.css +61 -125
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
  16. package/components/Pagination/themes/dark/pagination.scss +0 -7
package/docs/demos/Toolbar/examples/Toolbar.md CHANGED
@@ -128,55 +128,57 @@ section: components
128
128
  <div
129
129
  class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
130
130
  >
131
- <div class="pf-v5-c-options-menu">
132
- <button
133
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
134
- type="button"
135
- id="toolbar-attribute-value-search-filter-desktop-example-pagination-options-menu-toggle"
136
- aria-haspopup="listbox"
137
- aria-expanded="false"
138
- >
139
- <span class="pf-v5-c-options-menu__toggle-text">
140
- <b>1 - 10</b>&nbsp;of&nbsp;
141
- <b>36</b>
142
- </span>
143
- <div class="pf-v5-c-options-menu__toggle-icon">
144
- <i class="fas fa-caret-down" aria-hidden="true"></i>
145
- </div>
146
- </button>
147
- <ul
148
- class="pf-v5-c-options-menu__menu"
149
- role="menu"
150
- aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-pagination-options-menu-toggle"
151
- hidden
152
- >
153
- <li role="none">
154
- <button
155
- class="pf-v5-c-options-menu__menu-item"
156
- type="button"
157
- role="menuitem"
158
- >5 per page</button>
159
- </li>
160
- <li role="none">
161
- <button
162
- class="pf-v5-c-options-menu__menu-item"
163
- type="button"
164
- role="menuitem"
165
- >
166
- 10 per page
167
- <div class="pf-v5-c-options-menu__menu-item-icon">
168
- <i class="fas fa-check" aria-hidden="true"></i>
169
- </div>
170
- </button>
171
- </li>
172
- <li role="none">
173
- <button
174
- class="pf-v5-c-options-menu__menu-item"
175
- type="button"
176
- role="menuitem"
177
- >20 per page</button>
178
- </li>
179
- </ul>
131
+ <div class="pf-v5-c-pagination__page-menu">
132
+ <div class="pf-v5-c-options-menu">
133
+ <button
134
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
135
+ type="button"
136
+ id="toolbar-attribute-value-search-filter-desktop-example-pagination-options-menu-toggle"
137
+ aria-haspopup="listbox"
138
+ aria-expanded="false"
139
+ >
140
+ <span class="pf-v5-c-options-menu__toggle-text">
141
+ <b>1 - 10</b>&nbsp;of&nbsp;
142
+ <b>36</b>
143
+ </span>
144
+ <div class="pf-v5-c-options-menu__toggle-icon">
145
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
146
+ </div>
147
+ </button>
148
+ <ul
149
+ class="pf-v5-c-options-menu__menu"
150
+ role="menu"
151
+ aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-pagination-options-menu-toggle"
152
+ hidden
153
+ >
154
+ <li role="none">
155
+ <button
156
+ class="pf-v5-c-options-menu__menu-item"
157
+ type="button"
158
+ role="menuitem"
159
+ >5 per page</button>
160
+ </li>
161
+ <li role="none">
162
+ <button
163
+ class="pf-v5-c-options-menu__menu-item"
164
+ type="button"
165
+ role="menuitem"
166
+ >
167
+ 10 per page
168
+ <div class="pf-v5-c-options-menu__menu-item-icon">
169
+ <i class="fas fa-check" aria-hidden="true"></i>
170
+ </div>
171
+ </button>
172
+ </li>
173
+ <li role="none">
174
+ <button
175
+ class="pf-v5-c-options-menu__menu-item"
176
+ type="button"
177
+ role="menuitem"
178
+ >20 per page</button>
179
+ </li>
180
+ </ul>
181
+ </div>
180
182
  </div>
181
183
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
182
184
  <div class="pf-v5-c-pagination__nav-control pf-m-prev">
@@ -1336,55 +1338,57 @@ section: components
1336
1338
  <div
1337
1339
  class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
1338
1340
  >
1339
- <div class="pf-v5-c-options-menu">
1340
- <button
1341
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1342
- type="button"
1343
- id="toolbar-attribute-value-search-filter-mobile-example-pagination-options-menu-toggle"
1344
- aria-haspopup="listbox"
1345
- aria-expanded="false"
1346
- >
1347
- <span class="pf-v5-c-options-menu__toggle-text">
1348
- <b>1 - 10</b>&nbsp;of&nbsp;
1349
- <b>36</b>
1350
- </span>
1351
- <div class="pf-v5-c-options-menu__toggle-icon">
1352
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1353
- </div>
1354
- </button>
1355
- <ul
1356
- class="pf-v5-c-options-menu__menu"
1357
- role="menu"
1358
- aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-pagination-options-menu-toggle"
1359
- hidden
1360
- >
1361
- <li role="none">
1362
- <button
1363
- class="pf-v5-c-options-menu__menu-item"
1364
- type="button"
1365
- role="menuitem"
1366
- >5 per page</button>
1367
- </li>
1368
- <li role="none">
1369
- <button
1370
- class="pf-v5-c-options-menu__menu-item"
1371
- type="button"
1372
- role="menuitem"
1373
- >
1374
- 10 per page
1375
- <div class="pf-v5-c-options-menu__menu-item-icon">
1376
- <i class="fas fa-check" aria-hidden="true"></i>
1377
- </div>
1378
- </button>
1379
- </li>
1380
- <li role="none">
1381
- <button
1382
- class="pf-v5-c-options-menu__menu-item"
1383
- type="button"
1384
- role="menuitem"
1385
- >20 per page</button>
1386
- </li>
1387
- </ul>
1341
+ <div class="pf-v5-c-pagination__page-menu">
1342
+ <div class="pf-v5-c-options-menu">
1343
+ <button
1344
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1345
+ type="button"
1346
+ id="toolbar-attribute-value-search-filter-mobile-example-pagination-options-menu-toggle"
1347
+ aria-haspopup="listbox"
1348
+ aria-expanded="false"
1349
+ >
1350
+ <span class="pf-v5-c-options-menu__toggle-text">
1351
+ <b>1 - 10</b>&nbsp;of&nbsp;
1352
+ <b>36</b>
1353
+ </span>
1354
+ <div class="pf-v5-c-options-menu__toggle-icon">
1355
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1356
+ </div>
1357
+ </button>
1358
+ <ul
1359
+ class="pf-v5-c-options-menu__menu"
1360
+ role="menu"
1361
+ aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-pagination-options-menu-toggle"
1362
+ hidden
1363
+ >
1364
+ <li role="none">
1365
+ <button
1366
+ class="pf-v5-c-options-menu__menu-item"
1367
+ type="button"
1368
+ role="menuitem"
1369
+ >5 per page</button>
1370
+ </li>
1371
+ <li role="none">
1372
+ <button
1373
+ class="pf-v5-c-options-menu__menu-item"
1374
+ type="button"
1375
+ role="menuitem"
1376
+ >
1377
+ 10 per page
1378
+ <div class="pf-v5-c-options-menu__menu-item-icon">
1379
+ <i class="fas fa-check" aria-hidden="true"></i>
1380
+ </div>
1381
+ </button>
1382
+ </li>
1383
+ <li role="none">
1384
+ <button
1385
+ class="pf-v5-c-options-menu__menu-item"
1386
+ type="button"
1387
+ role="menuitem"
1388
+ >20 per page</button>
1389
+ </li>
1390
+ </ul>
1391
+ </div>
1388
1392
  </div>
1389
1393
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
1390
1394
  <div class="pf-v5-c-pagination__nav-control pf-m-prev">
@@ -1641,55 +1645,57 @@ section: components
1641
1645
  <div
1642
1646
  class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
1643
1647
  >
1644
- <div class="pf-v5-c-options-menu">
1645
- <button
1646
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1647
- type="button"
1648
- id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-pagination-options-menu-toggle"
1649
- aria-haspopup="listbox"
1650
- aria-expanded="false"
1651
- >
1652
- <span class="pf-v5-c-options-menu__toggle-text">
1653
- <b>1 - 10</b>&nbsp;of&nbsp;
1654
- <b>36</b>
1655
- </span>
1656
- <div class="pf-v5-c-options-menu__toggle-icon">
1657
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1658
- </div>
1659
- </button>
1660
- <ul
1661
- class="pf-v5-c-options-menu__menu"
1662
- role="menu"
1663
- aria-labelledby="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-pagination-options-menu-toggle"
1664
- hidden
1665
- >
1666
- <li role="none">
1667
- <button
1668
- class="pf-v5-c-options-menu__menu-item"
1669
- type="button"
1670
- role="menuitem"
1671
- >5 per page</button>
1672
- </li>
1673
- <li role="none">
1674
- <button
1675
- class="pf-v5-c-options-menu__menu-item"
1676
- type="button"
1677
- role="menuitem"
1678
- >
1679
- 10 per page
1680
- <div class="pf-v5-c-options-menu__menu-item-icon">
1681
- <i class="fas fa-check" aria-hidden="true"></i>
1682
- </div>
1683
- </button>
1684
- </li>
1685
- <li role="none">
1686
- <button
1687
- class="pf-v5-c-options-menu__menu-item"
1688
- type="button"
1689
- role="menuitem"
1690
- >20 per page</button>
1691
- </li>
1692
- </ul>
1648
+ <div class="pf-v5-c-pagination__page-menu">
1649
+ <div class="pf-v5-c-options-menu">
1650
+ <button
1651
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1652
+ type="button"
1653
+ id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-pagination-options-menu-toggle"
1654
+ aria-haspopup="listbox"
1655
+ aria-expanded="false"
1656
+ >
1657
+ <span class="pf-v5-c-options-menu__toggle-text">
1658
+ <b>1 - 10</b>&nbsp;of&nbsp;
1659
+ <b>36</b>
1660
+ </span>
1661
+ <div class="pf-v5-c-options-menu__toggle-icon">
1662
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1663
+ </div>
1664
+ </button>
1665
+ <ul
1666
+ class="pf-v5-c-options-menu__menu"
1667
+ role="menu"
1668
+ aria-labelledby="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-pagination-options-menu-toggle"
1669
+ hidden
1670
+ >
1671
+ <li role="none">
1672
+ <button
1673
+ class="pf-v5-c-options-menu__menu-item"
1674
+ type="button"
1675
+ role="menuitem"
1676
+ >5 per page</button>
1677
+ </li>
1678
+ <li role="none">
1679
+ <button
1680
+ class="pf-v5-c-options-menu__menu-item"
1681
+ type="button"
1682
+ role="menuitem"
1683
+ >
1684
+ 10 per page
1685
+ <div class="pf-v5-c-options-menu__menu-item-icon">
1686
+ <i class="fas fa-check" aria-hidden="true"></i>
1687
+ </div>
1688
+ </button>
1689
+ </li>
1690
+ <li role="none">
1691
+ <button
1692
+ class="pf-v5-c-options-menu__menu-item"
1693
+ type="button"
1694
+ role="menuitem"
1695
+ >20 per page</button>
1696
+ </li>
1697
+ </ul>
1698
+ </div>
1693
1699
  </div>
1694
1700
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
1695
1701
  <div class="pf-v5-c-pagination__nav-control pf-m-prev">
@@ -1800,55 +1806,57 @@ section: components
1800
1806
  <div
1801
1807
  class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
1802
1808
  >
1803
- <div class="pf-v5-c-options-menu">
1804
- <button
1805
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1806
- type="button"
1807
- id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-pagination-options-menu-toggle"
1808
- aria-haspopup="listbox"
1809
- aria-expanded="false"
1810
- >
1811
- <span class="pf-v5-c-options-menu__toggle-text">
1812
- <b>1 - 10</b>&nbsp;of&nbsp;
1813
- <b>36</b>
1814
- </span>
1815
- <div class="pf-v5-c-options-menu__toggle-icon">
1816
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1817
- </div>
1818
- </button>
1819
- <ul
1820
- class="pf-v5-c-options-menu__menu"
1821
- role="menu"
1822
- aria-labelledby="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-pagination-options-menu-toggle"
1823
- hidden
1824
- >
1825
- <li role="none">
1826
- <button
1827
- class="pf-v5-c-options-menu__menu-item"
1828
- type="button"
1829
- role="menuitem"
1830
- >5 per page</button>
1831
- </li>
1832
- <li role="none">
1833
- <button
1834
- class="pf-v5-c-options-menu__menu-item"
1835
- type="button"
1836
- role="menuitem"
1837
- >
1838
- 10 per page
1839
- <div class="pf-v5-c-options-menu__menu-item-icon">
1840
- <i class="fas fa-check" aria-hidden="true"></i>
1841
- </div>
1842
- </button>
1843
- </li>
1844
- <li role="none">
1845
- <button
1846
- class="pf-v5-c-options-menu__menu-item"
1847
- type="button"
1848
- role="menuitem"
1849
- >20 per page</button>
1850
- </li>
1851
- </ul>
1809
+ <div class="pf-v5-c-pagination__page-menu">
1810
+ <div class="pf-v5-c-options-menu">
1811
+ <button
1812
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1813
+ type="button"
1814
+ id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-pagination-options-menu-toggle"
1815
+ aria-haspopup="listbox"
1816
+ aria-expanded="false"
1817
+ >
1818
+ <span class="pf-v5-c-options-menu__toggle-text">
1819
+ <b>1 - 10</b>&nbsp;of&nbsp;
1820
+ <b>36</b>
1821
+ </span>
1822
+ <div class="pf-v5-c-options-menu__toggle-icon">
1823
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1824
+ </div>
1825
+ </button>
1826
+ <ul
1827
+ class="pf-v5-c-options-menu__menu"
1828
+ role="menu"
1829
+ aria-labelledby="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-pagination-options-menu-toggle"
1830
+ hidden
1831
+ >
1832
+ <li role="none">
1833
+ <button
1834
+ class="pf-v5-c-options-menu__menu-item"
1835
+ type="button"
1836
+ role="menuitem"
1837
+ >5 per page</button>
1838
+ </li>
1839
+ <li role="none">
1840
+ <button
1841
+ class="pf-v5-c-options-menu__menu-item"
1842
+ type="button"
1843
+ role="menuitem"
1844
+ >
1845
+ 10 per page
1846
+ <div class="pf-v5-c-options-menu__menu-item-icon">
1847
+ <i class="fas fa-check" aria-hidden="true"></i>
1848
+ </div>
1849
+ </button>
1850
+ </li>
1851
+ <li role="none">
1852
+ <button
1853
+ class="pf-v5-c-options-menu__menu-item"
1854
+ type="button"
1855
+ role="menuitem"
1856
+ >20 per page</button>
1857
+ </li>
1858
+ </ul>
1859
+ </div>
1852
1860
  </div>
1853
1861
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
1854
1862
  <div class="pf-v5-c-pagination__nav-control pf-m-prev">
@@ -2224,55 +2232,57 @@ section: components
2224
2232
  <div
2225
2233
  class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
2226
2234
  >
2227
- <div class="pf-v5-c-options-menu">
2228
- <button
2229
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2230
- type="button"
2231
- id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-pagination-options-menu-toggle"
2232
- aria-haspopup="listbox"
2233
- aria-expanded="false"
2234
- >
2235
- <span class="pf-v5-c-options-menu__toggle-text">
2236
- <b>1 - 10</b>&nbsp;of&nbsp;
2237
- <b>36</b>
2238
- </span>
2239
- <div class="pf-v5-c-options-menu__toggle-icon">
2240
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2241
- </div>
2242
- </button>
2243
- <ul
2244
- class="pf-v5-c-options-menu__menu"
2245
- role="menu"
2246
- aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-pagination-options-menu-toggle"
2247
- hidden
2248
- >
2249
- <li role="none">
2250
- <button
2251
- class="pf-v5-c-options-menu__menu-item"
2252
- type="button"
2253
- role="menuitem"
2254
- >5 per page</button>
2255
- </li>
2256
- <li role="none">
2257
- <button
2258
- class="pf-v5-c-options-menu__menu-item"
2259
- type="button"
2260
- role="menuitem"
2261
- >
2262
- 10 per page
2263
- <div class="pf-v5-c-options-menu__menu-item-icon">
2264
- <i class="fas fa-check" aria-hidden="true"></i>
2265
- </div>
2266
- </button>
2267
- </li>
2268
- <li role="none">
2269
- <button
2270
- class="pf-v5-c-options-menu__menu-item"
2271
- type="button"
2272
- role="menuitem"
2273
- >20 per page</button>
2274
- </li>
2275
- </ul>
2235
+ <div class="pf-v5-c-pagination__page-menu">
2236
+ <div class="pf-v5-c-options-menu">
2237
+ <button
2238
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2239
+ type="button"
2240
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-pagination-options-menu-toggle"
2241
+ aria-haspopup="listbox"
2242
+ aria-expanded="false"
2243
+ >
2244
+ <span class="pf-v5-c-options-menu__toggle-text">
2245
+ <b>1 - 10</b>&nbsp;of&nbsp;
2246
+ <b>36</b>
2247
+ </span>
2248
+ <div class="pf-v5-c-options-menu__toggle-icon">
2249
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2250
+ </div>
2251
+ </button>
2252
+ <ul
2253
+ class="pf-v5-c-options-menu__menu"
2254
+ role="menu"
2255
+ aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-pagination-options-menu-toggle"
2256
+ hidden
2257
+ >
2258
+ <li role="none">
2259
+ <button
2260
+ class="pf-v5-c-options-menu__menu-item"
2261
+ type="button"
2262
+ role="menuitem"
2263
+ >5 per page</button>
2264
+ </li>
2265
+ <li role="none">
2266
+ <button
2267
+ class="pf-v5-c-options-menu__menu-item"
2268
+ type="button"
2269
+ role="menuitem"
2270
+ >
2271
+ 10 per page
2272
+ <div class="pf-v5-c-options-menu__menu-item-icon">
2273
+ <i class="fas fa-check" aria-hidden="true"></i>
2274
+ </div>
2275
+ </button>
2276
+ </li>
2277
+ <li role="none">
2278
+ <button
2279
+ class="pf-v5-c-options-menu__menu-item"
2280
+ type="button"
2281
+ role="menuitem"
2282
+ >20 per page</button>
2283
+ </li>
2284
+ </ul>
2285
+ </div>
2276
2286
  </div>
2277
2287
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
2278
2288
  <div class="pf-v5-c-pagination__nav-control pf-m-prev">
@@ -2470,55 +2480,57 @@ section: components
2470
2480
  <div
2471
2481
  class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
2472
2482
  >
2473
- <div class="pf-v5-c-options-menu">
2474
- <button
2475
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2476
- type="button"
2477
- id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-pagination-options-menu-toggle"
2478
- aria-haspopup="listbox"
2479
- aria-expanded="false"
2480
- >
2481
- <span class="pf-v5-c-options-menu__toggle-text">
2482
- <b>1 - 10</b>&nbsp;of&nbsp;
2483
- <b>36</b>
2484
- </span>
2485
- <div class="pf-v5-c-options-menu__toggle-icon">
2486
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2487
- </div>
2488
- </button>
2489
- <ul
2490
- class="pf-v5-c-options-menu__menu"
2491
- role="menu"
2492
- aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-pagination-options-menu-toggle"
2493
- hidden
2494
- >
2495
- <li role="none">
2496
- <button
2497
- class="pf-v5-c-options-menu__menu-item"
2498
- type="button"
2499
- role="menuitem"
2500
- >5 per page</button>
2501
- </li>
2502
- <li role="none">
2503
- <button
2504
- class="pf-v5-c-options-menu__menu-item"
2505
- type="button"
2506
- role="menuitem"
2507
- >
2508
- 10 per page
2509
- <div class="pf-v5-c-options-menu__menu-item-icon">
2510
- <i class="fas fa-check" aria-hidden="true"></i>
2511
- </div>
2512
- </button>
2513
- </li>
2514
- <li role="none">
2515
- <button
2516
- class="pf-v5-c-options-menu__menu-item"
2517
- type="button"
2518
- role="menuitem"
2519
- >20 per page</button>
2520
- </li>
2521
- </ul>
2483
+ <div class="pf-v5-c-pagination__page-menu">
2484
+ <div class="pf-v5-c-options-menu">
2485
+ <button
2486
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2487
+ type="button"
2488
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-pagination-options-menu-toggle"
2489
+ aria-haspopup="listbox"
2490
+ aria-expanded="false"
2491
+ >
2492
+ <span class="pf-v5-c-options-menu__toggle-text">
2493
+ <b>1 - 10</b>&nbsp;of&nbsp;
2494
+ <b>36</b>
2495
+ </span>
2496
+ <div class="pf-v5-c-options-menu__toggle-icon">
2497
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2498
+ </div>
2499
+ </button>
2500
+ <ul
2501
+ class="pf-v5-c-options-menu__menu"
2502
+ role="menu"
2503
+ aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-pagination-options-menu-toggle"
2504
+ hidden
2505
+ >
2506
+ <li role="none">
2507
+ <button
2508
+ class="pf-v5-c-options-menu__menu-item"
2509
+ type="button"
2510
+ role="menuitem"
2511
+ >5 per page</button>
2512
+ </li>
2513
+ <li role="none">
2514
+ <button
2515
+ class="pf-v5-c-options-menu__menu-item"
2516
+ type="button"
2517
+ role="menuitem"
2518
+ >
2519
+ 10 per page
2520
+ <div class="pf-v5-c-options-menu__menu-item-icon">
2521
+ <i class="fas fa-check" aria-hidden="true"></i>
2522
+ </div>
2523
+ </button>
2524
+ </li>
2525
+ <li role="none">
2526
+ <button
2527
+ class="pf-v5-c-options-menu__menu-item"
2528
+ type="button"
2529
+ role="menuitem"
2530
+ >20 per page</button>
2531
+ </li>
2532
+ </ul>
2533
+ </div>
2522
2534
  </div>
2523
2535
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
2524
2536
  <div class="pf-v5-c-pagination__nav-control pf-m-prev">
@@ -3190,55 +3202,57 @@ section: components
3190
3202
  <div
3191
3203
  class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
3192
3204
  >
3193
- <div class="pf-v5-c-options-menu">
3194
- <button
3195
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3196
- type="button"
3197
- id="toolbar-pagination-management-example-toolbar-pagination-options-menu-toggle"
3198
- aria-haspopup="listbox"
3199
- aria-expanded="false"
3200
- >
3201
- <span class="pf-v5-c-options-menu__toggle-text">
3202
- <b>1 - 10</b>&nbsp;of&nbsp;
3203
- <b>36</b>
3204
- </span>
3205
- <div class="pf-v5-c-options-menu__toggle-icon">
3206
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3207
- </div>
3208
- </button>
3209
- <ul
3210
- class="pf-v5-c-options-menu__menu"
3211
- role="menu"
3212
- aria-labelledby="toolbar-pagination-management-example-toolbar-pagination-options-menu-toggle"
3213
- hidden
3214
- >
3215
- <li role="none">
3216
- <button
3217
- class="pf-v5-c-options-menu__menu-item"
3218
- type="button"
3219
- role="menuitem"
3220
- >5 per page</button>
3221
- </li>
3222
- <li role="none">
3223
- <button
3224
- class="pf-v5-c-options-menu__menu-item"
3225
- type="button"
3226
- role="menuitem"
3227
- >
3228
- 10 per page
3229
- <div class="pf-v5-c-options-menu__menu-item-icon">
3230
- <i class="fas fa-check" aria-hidden="true"></i>
3231
- </div>
3232
- </button>
3233
- </li>
3234
- <li role="none">
3235
- <button
3236
- class="pf-v5-c-options-menu__menu-item"
3237
- type="button"
3238
- role="menuitem"
3239
- >20 per page</button>
3240
- </li>
3241
- </ul>
3205
+ <div class="pf-v5-c-pagination__page-menu">
3206
+ <div class="pf-v5-c-options-menu">
3207
+ <button
3208
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3209
+ type="button"
3210
+ id="toolbar-pagination-management-example-toolbar-pagination-options-menu-toggle"
3211
+ aria-haspopup="listbox"
3212
+ aria-expanded="false"
3213
+ >
3214
+ <span class="pf-v5-c-options-menu__toggle-text">
3215
+ <b>1 - 10</b>&nbsp;of&nbsp;
3216
+ <b>36</b>
3217
+ </span>
3218
+ <div class="pf-v5-c-options-menu__toggle-icon">
3219
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3220
+ </div>
3221
+ </button>
3222
+ <ul
3223
+ class="pf-v5-c-options-menu__menu"
3224
+ role="menu"
3225
+ aria-labelledby="toolbar-pagination-management-example-toolbar-pagination-options-menu-toggle"
3226
+ hidden
3227
+ >
3228
+ <li role="none">
3229
+ <button
3230
+ class="pf-v5-c-options-menu__menu-item"
3231
+ type="button"
3232
+ role="menuitem"
3233
+ >5 per page</button>
3234
+ </li>
3235
+ <li role="none">
3236
+ <button
3237
+ class="pf-v5-c-options-menu__menu-item"
3238
+ type="button"
3239
+ role="menuitem"
3240
+ >
3241
+ 10 per page
3242
+ <div class="pf-v5-c-options-menu__menu-item-icon">
3243
+ <i class="fas fa-check" aria-hidden="true"></i>
3244
+ </div>
3245
+ </button>
3246
+ </li>
3247
+ <li role="none">
3248
+ <button
3249
+ class="pf-v5-c-options-menu__menu-item"
3250
+ type="button"
3251
+ role="menuitem"
3252
+ >20 per page</button>
3253
+ </li>
3254
+ </ul>
3255
+ </div>
3242
3256
  </div>
3243
3257
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
3244
3258
  <div class="pf-v5-c-pagination__nav-control pf-m-prev">
@@ -3870,55 +3884,57 @@ section: components
3870
3884
  </tbody>
3871
3885
  </table>
3872
3886
  <div class="pf-v5-c-pagination pf-m-bottom">
3873
- <div class="pf-v5-c-options-menu pf-m-top">
3874
- <button
3875
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3876
- type="button"
3877
- id="pagination-options-menu-bottom-collapsed-example-toggle"
3878
- aria-haspopup="listbox"
3879
- aria-expanded="false"
3880
- >
3881
- <span class="pf-v5-c-options-menu__toggle-text">
3882
- <b>1 - 10</b>&nbsp;of&nbsp;
3883
- <b>36</b>
3884
- </span>
3885
- <div class="pf-v5-c-options-menu__toggle-icon">
3886
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3887
- </div>
3888
- </button>
3889
- <ul
3890
- class="pf-v5-c-options-menu__menu pf-m-top"
3891
- role="menu"
3892
- aria-labelledby="pagination-options-menu-bottom-collapsed-example-toggle"
3893
- hidden
3894
- >
3895
- <li role="none">
3896
- <button
3897
- class="pf-v5-c-options-menu__menu-item"
3898
- type="button"
3899
- role="menuitem"
3900
- >5 per page</button>
3901
- </li>
3902
- <li role="none">
3903
- <button
3904
- class="pf-v5-c-options-menu__menu-item"
3905
- type="button"
3906
- role="menuitem"
3907
- >
3908
- 10 per page
3909
- <div class="pf-v5-c-options-menu__menu-item-icon">
3910
- <i class="fas fa-check" aria-hidden="true"></i>
3911
- </div>
3912
- </button>
3913
- </li>
3914
- <li role="none">
3915
- <button
3916
- class="pf-v5-c-options-menu__menu-item"
3917
- type="button"
3918
- role="menuitem"
3919
- >20 per page</button>
3920
- </li>
3921
- </ul>
3887
+ <div class="pf-v5-c-pagination__page-menu">
3888
+ <div class="pf-v5-c-options-menu pf-m-top">
3889
+ <button
3890
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3891
+ type="button"
3892
+ id="pagination-options-menu-bottom-collapsed-example-toggle"
3893
+ aria-haspopup="listbox"
3894
+ aria-expanded="false"
3895
+ >
3896
+ <span class="pf-v5-c-options-menu__toggle-text">
3897
+ <b>1 - 10</b>&nbsp;of&nbsp;
3898
+ <b>36</b>
3899
+ </span>
3900
+ <div class="pf-v5-c-options-menu__toggle-icon">
3901
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3902
+ </div>
3903
+ </button>
3904
+ <ul
3905
+ class="pf-v5-c-options-menu__menu pf-m-top"
3906
+ role="menu"
3907
+ aria-labelledby="pagination-options-menu-bottom-collapsed-example-toggle"
3908
+ hidden
3909
+ >
3910
+ <li role="none">
3911
+ <button
3912
+ class="pf-v5-c-options-menu__menu-item"
3913
+ type="button"
3914
+ role="menuitem"
3915
+ >5 per page</button>
3916
+ </li>
3917
+ <li role="none">
3918
+ <button
3919
+ class="pf-v5-c-options-menu__menu-item"
3920
+ type="button"
3921
+ role="menuitem"
3922
+ >
3923
+ 10 per page
3924
+ <div class="pf-v5-c-options-menu__menu-item-icon">
3925
+ <i class="fas fa-check" aria-hidden="true"></i>
3926
+ </div>
3927
+ </button>
3928
+ </li>
3929
+ <li role="none">
3930
+ <button
3931
+ class="pf-v5-c-options-menu__menu-item"
3932
+ type="button"
3933
+ role="menuitem"
3934
+ >20 per page</button>
3935
+ </li>
3936
+ </ul>
3937
+ </div>
3922
3938
  </div>
3923
3939
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
3924
3940
  <div class="pf-v5-c-pagination__nav-control pf-m-first">