@patternfly/patternfly 6.0.0-alpha.158 → 6.0.0-alpha.159

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 +6 -3
  2. package/components/Pagination/pagination.scss +6 -3
  3. package/components/_index.css +6 -3
  4. package/docs/components/Pagination/examples/Pagination.md +196 -713
  5. package/docs/components/Toolbar/examples/Toolbar.md +34 -98
  6. package/docs/demos/CardView/examples/CardView.md +32 -98
  7. package/docs/demos/DataList/examples/DataList.md +128 -392
  8. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +96 -320
  9. package/docs/demos/Table/examples/Table.md +369 -1132
  10. package/docs/demos/Toolbar/examples/Toolbar.md +128 -392
  11. package/package.json +1 -1
  12. package/patternfly-no-globals.css +6 -3
  13. package/patternfly.css +6 -3
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
  16. package/docs/components/Pagination/examples/Pagination.css +0 -3
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -362,56 +362,23 @@ wrapperTag: div
362
362
  <div class="pf-v6-c-toolbar__item pf-m-pagination">
363
363
  <div class="pf-v6-c-pagination pf-m-compact">
364
364
  <div class="pf-v6-c-pagination__page-menu">
365
- <div class="pf-v6-c-options-menu">
366
- <button
367
- class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
368
- type="button"
369
- id="data-list-basic-example-toolbar-top-pagination-toggle"
370
- aria-haspopup="listbox"
371
- aria-expanded="false"
372
- >
373
- <span class="pf-v6-c-options-menu__toggle-text">
374
- <b>1 - 10</b>&nbsp;of&nbsp;
375
- <b>36</b>
376
- </span>
377
- <div class="pf-v6-c-options-menu__toggle-icon">
365
+ <button
366
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
367
+ type="button"
368
+ aria-expanded="false"
369
+ aria-label="Menu toggle"
370
+ id="data-list-basic-example-toolbar-top-pagination"
371
+ >
372
+ <span class="pf-v6-c-menu-toggle__text">
373
+ <b>1 - 10</b>&nbsp;of&nbsp;
374
+ <b>36</b>
375
+ </span>
376
+ <span class="pf-v6-c-menu-toggle__controls">
377
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
378
378
  <i class="fas fa-caret-down" aria-hidden="true"></i>
379
- </div>
380
- </button>
381
- <ul
382
- class="pf-v6-c-options-menu__menu"
383
- role="menu"
384
- aria-labelledby="data-list-basic-example-toolbar-top-pagination-toggle"
385
- hidden
386
- >
387
- <li role="none">
388
- <button
389
- class="pf-v6-c-options-menu__menu-item"
390
- type="button"
391
- role="menuitem"
392
- >5 per page</button>
393
- </li>
394
- <li role="none">
395
- <button
396
- class="pf-v6-c-options-menu__menu-item"
397
- type="button"
398
- role="menuitem"
399
- >
400
- 10 per page
401
- <div class="pf-v6-c-options-menu__menu-item-icon">
402
- <i class="fas fa-check" aria-hidden="true"></i>
403
- </div>
404
- </button>
405
- </li>
406
- <li role="none">
407
- <button
408
- class="pf-v6-c-options-menu__menu-item"
409
- type="button"
410
- role="menuitem"
411
- >20 per page</button>
412
- </li>
413
- </ul>
414
- </div>
379
+ </span>
380
+ </span>
381
+ </button>
415
382
  </div>
416
383
  <nav
417
384
  class="pf-v6-c-pagination__nav"
@@ -788,56 +755,23 @@ wrapperTag: div
788
755
  </ul>
789
756
  <div class="pf-v6-c-pagination pf-m-bottom">
790
757
  <div class="pf-v6-c-pagination__page-menu">
791
- <div class="pf-v6-c-options-menu pf-m-top">
792
- <button
793
- class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
794
- type="button"
795
- id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
796
- aria-haspopup="listbox"
797
- aria-expanded="false"
798
- >
799
- <span class="pf-v6-c-options-menu__toggle-text">
800
- <b>1 - 10</b>&nbsp;of&nbsp;
801
- <b>36</b>
802
- </span>
803
- <div class="pf-v6-c-options-menu__toggle-icon">
758
+ <button
759
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
760
+ type="button"
761
+ aria-expanded="false"
762
+ aria-label="Menu toggle"
763
+ id="{{page--id}}-pagination-menu-toggle-bottom-example"
764
+ >
765
+ <span class="pf-v6-c-menu-toggle__text">
766
+ <b>1 - 10</b>&nbsp;of&nbsp;
767
+ <b>36</b>
768
+ </span>
769
+ <span class="pf-v6-c-menu-toggle__controls">
770
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
804
771
  <i class="fas fa-caret-down" aria-hidden="true"></i>
805
- </div>
806
- </button>
807
- <ul
808
- class="pf-v6-c-options-menu__menu pf-m-top"
809
- role="menu"
810
- aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
811
- hidden
812
- >
813
- <li role="none">
814
- <button
815
- class="pf-v6-c-options-menu__menu-item"
816
- type="button"
817
- role="menuitem"
818
- >5 per page</button>
819
- </li>
820
- <li role="none">
821
- <button
822
- class="pf-v6-c-options-menu__menu-item"
823
- type="button"
824
- role="menuitem"
825
- >
826
- 10 per page
827
- <div class="pf-v6-c-options-menu__menu-item-icon">
828
- <i class="fas fa-check" aria-hidden="true"></i>
829
- </div>
830
- </button>
831
- </li>
832
- <li role="none">
833
- <button
834
- class="pf-v6-c-options-menu__menu-item"
835
- type="button"
836
- role="menuitem"
837
- >20 per page</button>
838
- </li>
839
- </ul>
840
- </div>
772
+ </span>
773
+ </span>
774
+ </button>
841
775
  </div>
842
776
  <nav class="pf-v6-c-pagination__nav" aria-label="Pagination">
843
777
  <div class="pf-v6-c-pagination__nav-control pf-m-first">
@@ -1285,56 +1219,23 @@ wrapperTag: div
1285
1219
  <div class="pf-v6-c-toolbar__item pf-m-pagination">
1286
1220
  <div class="pf-v6-c-pagination pf-m-compact">
1287
1221
  <div class="pf-v6-c-pagination__page-menu">
1288
- <div class="pf-v6-c-options-menu">
1289
- <button
1290
- class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
1291
- type="button"
1292
- id="data-list-actionable-example-toolbar-top-pagination-toggle"
1293
- aria-haspopup="listbox"
1294
- aria-expanded="false"
1295
- >
1296
- <span class="pf-v6-c-options-menu__toggle-text">
1297
- <b>1 - 10</b>&nbsp;of&nbsp;
1298
- <b>36</b>
1299
- </span>
1300
- <div class="pf-v6-c-options-menu__toggle-icon">
1222
+ <button
1223
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1224
+ type="button"
1225
+ aria-expanded="false"
1226
+ aria-label="Menu toggle"
1227
+ id="data-list-actionable-example-toolbar-top-pagination"
1228
+ >
1229
+ <span class="pf-v6-c-menu-toggle__text">
1230
+ <b>1 - 10</b>&nbsp;of&nbsp;
1231
+ <b>36</b>
1232
+ </span>
1233
+ <span class="pf-v6-c-menu-toggle__controls">
1234
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1301
1235
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1302
- </div>
1303
- </button>
1304
- <ul
1305
- class="pf-v6-c-options-menu__menu"
1306
- role="menu"
1307
- aria-labelledby="data-list-actionable-example-toolbar-top-pagination-toggle"
1308
- hidden
1309
- >
1310
- <li role="none">
1311
- <button
1312
- class="pf-v6-c-options-menu__menu-item"
1313
- type="button"
1314
- role="menuitem"
1315
- >5 per page</button>
1316
- </li>
1317
- <li role="none">
1318
- <button
1319
- class="pf-v6-c-options-menu__menu-item"
1320
- type="button"
1321
- role="menuitem"
1322
- >
1323
- 10 per page
1324
- <div class="pf-v6-c-options-menu__menu-item-icon">
1325
- <i class="fas fa-check" aria-hidden="true"></i>
1326
- </div>
1327
- </button>
1328
- </li>
1329
- <li role="none">
1330
- <button
1331
- class="pf-v6-c-options-menu__menu-item"
1332
- type="button"
1333
- role="menuitem"
1334
- >20 per page</button>
1335
- </li>
1336
- </ul>
1337
- </div>
1236
+ </span>
1237
+ </span>
1238
+ </button>
1338
1239
  </div>
1339
1240
  <nav
1340
1241
  class="pf-v6-c-pagination__nav"
@@ -1694,56 +1595,23 @@ wrapperTag: div
1694
1595
  </ul>
1695
1596
  <div class="pf-v6-c-pagination pf-m-bottom">
1696
1597
  <div class="pf-v6-c-pagination__page-menu">
1697
- <div class="pf-v6-c-options-menu pf-m-top">
1698
- <button
1699
- class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
1700
- type="button"
1701
- id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
1702
- aria-haspopup="listbox"
1703
- aria-expanded="false"
1704
- >
1705
- <span class="pf-v6-c-options-menu__toggle-text">
1706
- <b>1 - 10</b>&nbsp;of&nbsp;
1707
- <b>36</b>
1708
- </span>
1709
- <div class="pf-v6-c-options-menu__toggle-icon">
1598
+ <button
1599
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
1600
+ type="button"
1601
+ aria-expanded="false"
1602
+ aria-label="Menu toggle"
1603
+ id="{{page--id}}-pagination-menu-toggle-bottom-example"
1604
+ >
1605
+ <span class="pf-v6-c-menu-toggle__text">
1606
+ <b>1 - 10</b>&nbsp;of&nbsp;
1607
+ <b>36</b>
1608
+ </span>
1609
+ <span class="pf-v6-c-menu-toggle__controls">
1610
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1710
1611
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1711
- </div>
1712
- </button>
1713
- <ul
1714
- class="pf-v6-c-options-menu__menu pf-m-top"
1715
- role="menu"
1716
- aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
1717
- hidden
1718
- >
1719
- <li role="none">
1720
- <button
1721
- class="pf-v6-c-options-menu__menu-item"
1722
- type="button"
1723
- role="menuitem"
1724
- >5 per page</button>
1725
- </li>
1726
- <li role="none">
1727
- <button
1728
- class="pf-v6-c-options-menu__menu-item"
1729
- type="button"
1730
- role="menuitem"
1731
- >
1732
- 10 per page
1733
- <div class="pf-v6-c-options-menu__menu-item-icon">
1734
- <i class="fas fa-check" aria-hidden="true"></i>
1735
- </div>
1736
- </button>
1737
- </li>
1738
- <li role="none">
1739
- <button
1740
- class="pf-v6-c-options-menu__menu-item"
1741
- type="button"
1742
- role="menuitem"
1743
- >20 per page</button>
1744
- </li>
1745
- </ul>
1746
- </div>
1612
+ </span>
1613
+ </span>
1614
+ </button>
1747
1615
  </div>
1748
1616
  <nav class="pf-v6-c-pagination__nav" aria-label="Pagination">
1749
1617
  <div class="pf-v6-c-pagination__nav-control pf-m-first">
@@ -2247,56 +2115,23 @@ wrapperTag: div
2247
2115
  <div class="pf-v6-c-toolbar__item pf-m-pagination">
2248
2116
  <div class="pf-v6-c-pagination pf-m-compact">
2249
2117
  <div class="pf-v6-c-pagination__page-menu">
2250
- <div class="pf-v6-c-options-menu">
2251
- <button
2252
- class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
2253
- type="button"
2254
- id="data-list-expandable-example-toolbar-top-pagination-toggle"
2255
- aria-haspopup="listbox"
2256
- aria-expanded="false"
2257
- >
2258
- <span class="pf-v6-c-options-menu__toggle-text">
2259
- <b>1 - 10</b>&nbsp;of&nbsp;
2260
- <b>36</b>
2261
- </span>
2262
- <div class="pf-v6-c-options-menu__toggle-icon">
2118
+ <button
2119
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
2120
+ type="button"
2121
+ aria-expanded="false"
2122
+ aria-label="Menu toggle"
2123
+ id="data-list-expandable-example-toolbar-top-pagination"
2124
+ >
2125
+ <span class="pf-v6-c-menu-toggle__text">
2126
+ <b>1 - 10</b>&nbsp;of&nbsp;
2127
+ <b>36</b>
2128
+ </span>
2129
+ <span class="pf-v6-c-menu-toggle__controls">
2130
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
2263
2131
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2264
- </div>
2265
- </button>
2266
- <ul
2267
- class="pf-v6-c-options-menu__menu"
2268
- role="menu"
2269
- aria-labelledby="data-list-expandable-example-toolbar-top-pagination-toggle"
2270
- hidden
2271
- >
2272
- <li role="none">
2273
- <button
2274
- class="pf-v6-c-options-menu__menu-item"
2275
- type="button"
2276
- role="menuitem"
2277
- >5 per page</button>
2278
- </li>
2279
- <li role="none">
2280
- <button
2281
- class="pf-v6-c-options-menu__menu-item"
2282
- type="button"
2283
- role="menuitem"
2284
- >
2285
- 10 per page
2286
- <div class="pf-v6-c-options-menu__menu-item-icon">
2287
- <i class="fas fa-check" aria-hidden="true"></i>
2288
- </div>
2289
- </button>
2290
- </li>
2291
- <li role="none">
2292
- <button
2293
- class="pf-v6-c-options-menu__menu-item"
2294
- type="button"
2295
- role="menuitem"
2296
- >20 per page</button>
2297
- </li>
2298
- </ul>
2299
- </div>
2132
+ </span>
2133
+ </span>
2134
+ </button>
2300
2135
  </div>
2301
2136
  <nav
2302
2137
  class="pf-v6-c-pagination__nav"
@@ -3271,56 +3106,23 @@ wrapperTag: div
3271
3106
  </ul>
3272
3107
  <div class="pf-v6-c-pagination pf-m-bottom">
3273
3108
  <div class="pf-v6-c-pagination__page-menu">
3274
- <div class="pf-v6-c-options-menu pf-m-top">
3275
- <button
3276
- class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
3277
- type="button"
3278
- id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
3279
- aria-haspopup="listbox"
3280
- aria-expanded="false"
3281
- >
3282
- <span class="pf-v6-c-options-menu__toggle-text">
3283
- <b>1 - 10</b>&nbsp;of&nbsp;
3284
- <b>36</b>
3285
- </span>
3286
- <div class="pf-v6-c-options-menu__toggle-icon">
3109
+ <button
3110
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
3111
+ type="button"
3112
+ aria-expanded="false"
3113
+ aria-label="Menu toggle"
3114
+ id="{{page--id}}-pagination-menu-toggle-bottom-example"
3115
+ >
3116
+ <span class="pf-v6-c-menu-toggle__text">
3117
+ <b>1 - 10</b>&nbsp;of&nbsp;
3118
+ <b>36</b>
3119
+ </span>
3120
+ <span class="pf-v6-c-menu-toggle__controls">
3121
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
3287
3122
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3288
- </div>
3289
- </button>
3290
- <ul
3291
- class="pf-v6-c-options-menu__menu pf-m-top"
3292
- role="menu"
3293
- aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
3294
- hidden
3295
- >
3296
- <li role="none">
3297
- <button
3298
- class="pf-v6-c-options-menu__menu-item"
3299
- type="button"
3300
- role="menuitem"
3301
- >5 per page</button>
3302
- </li>
3303
- <li role="none">
3304
- <button
3305
- class="pf-v6-c-options-menu__menu-item"
3306
- type="button"
3307
- role="menuitem"
3308
- >
3309
- 10 per page
3310
- <div class="pf-v6-c-options-menu__menu-item-icon">
3311
- <i class="fas fa-check" aria-hidden="true"></i>
3312
- </div>
3313
- </button>
3314
- </li>
3315
- <li role="none">
3316
- <button
3317
- class="pf-v6-c-options-menu__menu-item"
3318
- type="button"
3319
- role="menuitem"
3320
- >20 per page</button>
3321
- </li>
3322
- </ul>
3323
- </div>
3123
+ </span>
3124
+ </span>
3125
+ </button>
3324
3126
  </div>
3325
3127
  <nav class="pf-v6-c-pagination__nav" aria-label="Pagination">
3326
3128
  <div class="pf-v6-c-pagination__nav-control pf-m-first">
@@ -3783,56 +3585,23 @@ wrapperTag: div
3783
3585
  <div class="pf-v6-c-toolbar__item pf-m-pagination">
3784
3586
  <div class="pf-v6-c-pagination pf-m-compact">
3785
3587
  <div class="pf-v6-c-pagination__page-menu">
3786
- <div class="pf-v6-c-options-menu">
3787
- <button
3788
- class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
3789
- type="button"
3790
- id="data-list-static-bottom-example-toolbar-top-pagination-toggle"
3791
- aria-haspopup="listbox"
3792
- aria-expanded="false"
3793
- >
3794
- <span class="pf-v6-c-options-menu__toggle-text">
3795
- <b>1 - 10</b>&nbsp;of&nbsp;
3796
- <b>36</b>
3797
- </span>
3798
- <div class="pf-v6-c-options-menu__toggle-icon">
3588
+ <button
3589
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
3590
+ type="button"
3591
+ aria-expanded="false"
3592
+ aria-label="Menu toggle"
3593
+ id="data-list-static-bottom-example-toolbar-top-pagination"
3594
+ >
3595
+ <span class="pf-v6-c-menu-toggle__text">
3596
+ <b>1 - 10</b>&nbsp;of&nbsp;
3597
+ <b>36</b>
3598
+ </span>
3599
+ <span class="pf-v6-c-menu-toggle__controls">
3600
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
3799
3601
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3800
- </div>
3801
- </button>
3802
- <ul
3803
- class="pf-v6-c-options-menu__menu"
3804
- role="menu"
3805
- aria-labelledby="data-list-static-bottom-example-toolbar-top-pagination-toggle"
3806
- hidden
3807
- >
3808
- <li role="none">
3809
- <button
3810
- class="pf-v6-c-options-menu__menu-item"
3811
- type="button"
3812
- role="menuitem"
3813
- >5 per page</button>
3814
- </li>
3815
- <li role="none">
3816
- <button
3817
- class="pf-v6-c-options-menu__menu-item"
3818
- type="button"
3819
- role="menuitem"
3820
- >
3821
- 10 per page
3822
- <div class="pf-v6-c-options-menu__menu-item-icon">
3823
- <i class="fas fa-check" aria-hidden="true"></i>
3824
- </div>
3825
- </button>
3826
- </li>
3827
- <li role="none">
3828
- <button
3829
- class="pf-v6-c-options-menu__menu-item"
3830
- type="button"
3831
- role="menuitem"
3832
- >20 per page</button>
3833
- </li>
3834
- </ul>
3835
- </div>
3602
+ </span>
3603
+ </span>
3604
+ </button>
3836
3605
  </div>
3837
3606
  <nav
3838
3607
  class="pf-v6-c-pagination__nav"
@@ -4209,56 +3978,23 @@ wrapperTag: div
4209
3978
  </ul>
4210
3979
  <div class="pf-v6-c-pagination pf-m-bottom pf-m-static">
4211
3980
  <div class="pf-v6-c-pagination__page-menu">
4212
- <div class="pf-v6-c-options-menu pf-m-top">
4213
- <button
4214
- class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
4215
- type="button"
4216
- id="{{page--id}}pagination-options-menu-bottom-example-static-toggle"
4217
- aria-haspopup="listbox"
4218
- aria-expanded="false"
4219
- >
4220
- <span class="pf-v6-c-options-menu__toggle-text">
4221
- <b>1 - 10</b>&nbsp;of&nbsp;
4222
- <b>36</b>
4223
- </span>
4224
- <div class="pf-v6-c-options-menu__toggle-icon">
3981
+ <button
3982
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
3983
+ type="button"
3984
+ aria-expanded="false"
3985
+ aria-label="Menu toggle"
3986
+ id="{{page--id}}pagination-menu-toggle-bottom-example-static"
3987
+ >
3988
+ <span class="pf-v6-c-menu-toggle__text">
3989
+ <b>1 - 10</b>&nbsp;of&nbsp;
3990
+ <b>36</b>
3991
+ </span>
3992
+ <span class="pf-v6-c-menu-toggle__controls">
3993
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
4225
3994
  <i class="fas fa-caret-down" aria-hidden="true"></i>
4226
- </div>
4227
- </button>
4228
- <ul
4229
- class="pf-v6-c-options-menu__menu pf-m-top"
4230
- role="menu"
4231
- aria-labelledby="{{page--id}}pagination-options-menu-bottom-example-static-toggle"
4232
- hidden
4233
- >
4234
- <li role="none">
4235
- <button
4236
- class="pf-v6-c-options-menu__menu-item"
4237
- type="button"
4238
- role="menuitem"
4239
- >5 per page</button>
4240
- </li>
4241
- <li role="none">
4242
- <button
4243
- class="pf-v6-c-options-menu__menu-item"
4244
- type="button"
4245
- role="menuitem"
4246
- >
4247
- 10 per page
4248
- <div class="pf-v6-c-options-menu__menu-item-icon">
4249
- <i class="fas fa-check" aria-hidden="true"></i>
4250
- </div>
4251
- </button>
4252
- </li>
4253
- <li role="none">
4254
- <button
4255
- class="pf-v6-c-options-menu__menu-item"
4256
- type="button"
4257
- role="menuitem"
4258
- >20 per page</button>
4259
- </li>
4260
- </ul>
4261
- </div>
3995
+ </span>
3996
+ </span>
3997
+ </button>
4262
3998
  </div>
4263
3999
  <nav class="pf-v6-c-pagination__nav" aria-label="Pagination">
4264
4000
  <div class="pf-v6-c-pagination__nav-control pf-m-first">