@patternfly/patternfly 5.3.0 → 5.4.0-prerelease.2

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 (17) hide show
  1. package/components/Pagination/pagination.css +7 -4
  2. package/components/Pagination/pagination.scss +9 -8
  3. package/docs/components/Pagination/examples/Pagination.md +182 -708
  4. package/docs/components/Toolbar/examples/Toolbar.md +30 -98
  5. package/docs/components/TreeView/examples/TreeView.md +615 -45
  6. package/docs/demos/CardView/examples/CardView.md +30 -98
  7. package/docs/demos/DataList/examples/DataList.md +120 -392
  8. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +90 -302
  9. package/docs/demos/Table/examples/Table.md +345 -1127
  10. package/docs/demos/Toolbar/examples/Toolbar.md +120 -392
  11. package/package.json +5 -5
  12. package/patternfly-no-globals.css +7 -4
  13. package/patternfly-theme-dark-unversioned.css +7 -4
  14. package/patternfly.css +7 -4
  15. package/patternfly.min.css +1 -1
  16. package/patternfly.min.css.map +1 -1
  17. package/docs/components/Pagination/examples/Pagination.css +0 -3
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -336,56 +336,22 @@ wrapperTag: div
336
336
 
337
337
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
338
338
  <div class="pf-v5-c-pagination pf-m-compact">
339
- <div class="pf-v5-c-options-menu">
340
- <button
341
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
342
- type="button"
343
- id="data-list-basic-example-toolbar-top-pagination-toggle"
344
- aria-haspopup="listbox"
345
- aria-expanded="false"
346
- >
347
- <span class="pf-v5-c-options-menu__toggle-text">
348
- <b>1 - 10</b>&nbsp;of&nbsp;
349
- <b>36</b>
350
- </span>
351
- <div class="pf-v5-c-options-menu__toggle-icon">
339
+ <button
340
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
341
+ type="button"
342
+ aria-expanded="false"
343
+ id="data-list-basic-example-toolbar-top-pagination"
344
+ >
345
+ <span class="pf-v5-c-menu-toggle__text">
346
+ <b>1 - 10</b>&nbsp;of&nbsp;
347
+ <b>36</b>
348
+ </span>
349
+ <span class="pf-v5-c-menu-toggle__controls">
350
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
352
351
  <i class="fas fa-caret-down" aria-hidden="true"></i>
353
- </div>
354
- </button>
355
- <ul
356
- class="pf-v5-c-options-menu__menu"
357
- role="menu"
358
- aria-labelledby="data-list-basic-example-toolbar-top-pagination-toggle"
359
- hidden
360
- >
361
- <li role="none">
362
- <button
363
- class="pf-v5-c-options-menu__menu-item"
364
- type="button"
365
- role="menuitem"
366
- >5 per page</button>
367
- </li>
368
- <li role="none">
369
- <button
370
- class="pf-v5-c-options-menu__menu-item"
371
- type="button"
372
- role="menuitem"
373
- >
374
- 10 per page
375
- <div class="pf-v5-c-options-menu__menu-item-icon">
376
- <i class="fas fa-check" aria-hidden="true"></i>
377
- </div>
378
- </button>
379
- </li>
380
- <li role="none">
381
- <button
382
- class="pf-v5-c-options-menu__menu-item"
383
- type="button"
384
- role="menuitem"
385
- >20 per page</button>
386
- </li>
387
- </ul>
388
- </div>
352
+ </span>
353
+ </span>
354
+ </button>
389
355
  <nav
390
356
  class="pf-v5-c-pagination__nav"
391
357
  aria-label="Toolbar top pagination"
@@ -752,56 +718,22 @@ wrapperTag: div
752
718
  </li>
753
719
  </ul>
754
720
  <div class="pf-v5-c-pagination pf-m-bottom">
755
- <div class="pf-v5-c-options-menu pf-m-top">
756
- <button
757
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
758
- type="button"
759
- id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
760
- aria-haspopup="listbox"
761
- aria-expanded="false"
762
- >
763
- <span class="pf-v5-c-options-menu__toggle-text">
764
- <b>1 - 10</b>&nbsp;of&nbsp;
765
- <b>36</b>
766
- </span>
767
- <div class="pf-v5-c-options-menu__toggle-icon">
721
+ <button
722
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
723
+ type="button"
724
+ aria-expanded="false"
725
+ id="{{page--id}}-pagination-menu-toggle-bottom-example"
726
+ >
727
+ <span class="pf-v5-c-menu-toggle__text">
728
+ <b>1 - 10</b>&nbsp;of&nbsp;
729
+ <b>36</b>
730
+ </span>
731
+ <span class="pf-v5-c-menu-toggle__controls">
732
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
768
733
  <i class="fas fa-caret-down" aria-hidden="true"></i>
769
- </div>
770
- </button>
771
- <ul
772
- class="pf-v5-c-options-menu__menu pf-m-top"
773
- role="menu"
774
- aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
775
- hidden
776
- >
777
- <li role="none">
778
- <button
779
- class="pf-v5-c-options-menu__menu-item"
780
- type="button"
781
- role="menuitem"
782
- >5 per page</button>
783
- </li>
784
- <li role="none">
785
- <button
786
- class="pf-v5-c-options-menu__menu-item"
787
- type="button"
788
- role="menuitem"
789
- >
790
- 10 per page
791
- <div class="pf-v5-c-options-menu__menu-item-icon">
792
- <i class="fas fa-check" aria-hidden="true"></i>
793
- </div>
794
- </button>
795
- </li>
796
- <li role="none">
797
- <button
798
- class="pf-v5-c-options-menu__menu-item"
799
- type="button"
800
- role="menuitem"
801
- >20 per page</button>
802
- </li>
803
- </ul>
804
- </div>
734
+ </span>
735
+ </span>
736
+ </button>
805
737
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
806
738
  <div class="pf-v5-c-pagination__nav-control pf-m-first">
807
739
  <button
@@ -1219,56 +1151,22 @@ wrapperTag: div
1219
1151
 
1220
1152
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
1221
1153
  <div class="pf-v5-c-pagination pf-m-compact">
1222
- <div class="pf-v5-c-options-menu">
1223
- <button
1224
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1225
- type="button"
1226
- id="data-list-actionable-example-toolbar-top-pagination-toggle"
1227
- aria-haspopup="listbox"
1228
- aria-expanded="false"
1229
- >
1230
- <span class="pf-v5-c-options-menu__toggle-text">
1231
- <b>1 - 10</b>&nbsp;of&nbsp;
1232
- <b>36</b>
1233
- </span>
1234
- <div class="pf-v5-c-options-menu__toggle-icon">
1154
+ <button
1155
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
1156
+ type="button"
1157
+ aria-expanded="false"
1158
+ id="data-list-actionable-example-toolbar-top-pagination"
1159
+ >
1160
+ <span class="pf-v5-c-menu-toggle__text">
1161
+ <b>1 - 10</b>&nbsp;of&nbsp;
1162
+ <b>36</b>
1163
+ </span>
1164
+ <span class="pf-v5-c-menu-toggle__controls">
1165
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1235
1166
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1236
- </div>
1237
- </button>
1238
- <ul
1239
- class="pf-v5-c-options-menu__menu"
1240
- role="menu"
1241
- aria-labelledby="data-list-actionable-example-toolbar-top-pagination-toggle"
1242
- hidden
1243
- >
1244
- <li role="none">
1245
- <button
1246
- class="pf-v5-c-options-menu__menu-item"
1247
- type="button"
1248
- role="menuitem"
1249
- >5 per page</button>
1250
- </li>
1251
- <li role="none">
1252
- <button
1253
- class="pf-v5-c-options-menu__menu-item"
1254
- type="button"
1255
- role="menuitem"
1256
- >
1257
- 10 per page
1258
- <div class="pf-v5-c-options-menu__menu-item-icon">
1259
- <i class="fas fa-check" aria-hidden="true"></i>
1260
- </div>
1261
- </button>
1262
- </li>
1263
- <li role="none">
1264
- <button
1265
- class="pf-v5-c-options-menu__menu-item"
1266
- type="button"
1267
- role="menuitem"
1268
- >20 per page</button>
1269
- </li>
1270
- </ul>
1271
- </div>
1167
+ </span>
1168
+ </span>
1169
+ </button>
1272
1170
  <nav
1273
1171
  class="pf-v5-c-pagination__nav"
1274
1172
  aria-label="Toolbar top pagination"
@@ -1600,56 +1498,22 @@ wrapperTag: div
1600
1498
  </li>
1601
1499
  </ul>
1602
1500
  <div class="pf-v5-c-pagination pf-m-bottom">
1603
- <div class="pf-v5-c-options-menu pf-m-top">
1604
- <button
1605
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1606
- type="button"
1607
- id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
1608
- aria-haspopup="listbox"
1609
- aria-expanded="false"
1610
- >
1611
- <span class="pf-v5-c-options-menu__toggle-text">
1612
- <b>1 - 10</b>&nbsp;of&nbsp;
1613
- <b>36</b>
1614
- </span>
1615
- <div class="pf-v5-c-options-menu__toggle-icon">
1501
+ <button
1502
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
1503
+ type="button"
1504
+ aria-expanded="false"
1505
+ id="{{page--id}}-pagination-menu-toggle-bottom-example"
1506
+ >
1507
+ <span class="pf-v5-c-menu-toggle__text">
1508
+ <b>1 - 10</b>&nbsp;of&nbsp;
1509
+ <b>36</b>
1510
+ </span>
1511
+ <span class="pf-v5-c-menu-toggle__controls">
1512
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1616
1513
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1617
- </div>
1618
- </button>
1619
- <ul
1620
- class="pf-v5-c-options-menu__menu pf-m-top"
1621
- role="menu"
1622
- aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
1623
- hidden
1624
- >
1625
- <li role="none">
1626
- <button
1627
- class="pf-v5-c-options-menu__menu-item"
1628
- type="button"
1629
- role="menuitem"
1630
- >5 per page</button>
1631
- </li>
1632
- <li role="none">
1633
- <button
1634
- class="pf-v5-c-options-menu__menu-item"
1635
- type="button"
1636
- role="menuitem"
1637
- >
1638
- 10 per page
1639
- <div class="pf-v5-c-options-menu__menu-item-icon">
1640
- <i class="fas fa-check" aria-hidden="true"></i>
1641
- </div>
1642
- </button>
1643
- </li>
1644
- <li role="none">
1645
- <button
1646
- class="pf-v5-c-options-menu__menu-item"
1647
- type="button"
1648
- role="menuitem"
1649
- >20 per page</button>
1650
- </li>
1651
- </ul>
1652
- </div>
1514
+ </span>
1515
+ </span>
1516
+ </button>
1653
1517
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
1654
1518
  <div class="pf-v5-c-pagination__nav-control pf-m-first">
1655
1519
  <button
@@ -2066,56 +1930,22 @@ wrapperTag: div
2066
1930
 
2067
1931
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
2068
1932
  <div class="pf-v5-c-pagination pf-m-compact">
2069
- <div class="pf-v5-c-options-menu">
2070
- <button
2071
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2072
- type="button"
2073
- id="data-list-expandable-example-toolbar-top-pagination-toggle"
2074
- aria-haspopup="listbox"
2075
- aria-expanded="false"
2076
- >
2077
- <span class="pf-v5-c-options-menu__toggle-text">
2078
- <b>1 - 10</b>&nbsp;of&nbsp;
2079
- <b>36</b>
2080
- </span>
2081
- <div class="pf-v5-c-options-menu__toggle-icon">
1933
+ <button
1934
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
1935
+ type="button"
1936
+ aria-expanded="false"
1937
+ id="data-list-expandable-example-toolbar-top-pagination"
1938
+ >
1939
+ <span class="pf-v5-c-menu-toggle__text">
1940
+ <b>1 - 10</b>&nbsp;of&nbsp;
1941
+ <b>36</b>
1942
+ </span>
1943
+ <span class="pf-v5-c-menu-toggle__controls">
1944
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2082
1945
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2083
- </div>
2084
- </button>
2085
- <ul
2086
- class="pf-v5-c-options-menu__menu"
2087
- role="menu"
2088
- aria-labelledby="data-list-expandable-example-toolbar-top-pagination-toggle"
2089
- hidden
2090
- >
2091
- <li role="none">
2092
- <button
2093
- class="pf-v5-c-options-menu__menu-item"
2094
- type="button"
2095
- role="menuitem"
2096
- >5 per page</button>
2097
- </li>
2098
- <li role="none">
2099
- <button
2100
- class="pf-v5-c-options-menu__menu-item"
2101
- type="button"
2102
- role="menuitem"
2103
- >
2104
- 10 per page
2105
- <div class="pf-v5-c-options-menu__menu-item-icon">
2106
- <i class="fas fa-check" aria-hidden="true"></i>
2107
- </div>
2108
- </button>
2109
- </li>
2110
- <li role="none">
2111
- <button
2112
- class="pf-v5-c-options-menu__menu-item"
2113
- type="button"
2114
- role="menuitem"
2115
- >20 per page</button>
2116
- </li>
2117
- </ul>
2118
- </div>
1946
+ </span>
1947
+ </span>
1948
+ </button>
2119
1949
  <nav
2120
1950
  class="pf-v5-c-pagination__nav"
2121
1951
  aria-label="Toolbar top pagination"
@@ -3197,56 +3027,22 @@ wrapperTag: div
3197
3027
  </li>
3198
3028
  </ul>
3199
3029
  <div class="pf-v5-c-pagination pf-m-bottom">
3200
- <div class="pf-v5-c-options-menu pf-m-top">
3201
- <button
3202
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3203
- type="button"
3204
- id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
3205
- aria-haspopup="listbox"
3206
- aria-expanded="false"
3207
- >
3208
- <span class="pf-v5-c-options-menu__toggle-text">
3209
- <b>1 - 10</b>&nbsp;of&nbsp;
3210
- <b>36</b>
3211
- </span>
3212
- <div class="pf-v5-c-options-menu__toggle-icon">
3030
+ <button
3031
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
3032
+ type="button"
3033
+ aria-expanded="false"
3034
+ id="{{page--id}}-pagination-menu-toggle-bottom-example"
3035
+ >
3036
+ <span class="pf-v5-c-menu-toggle__text">
3037
+ <b>1 - 10</b>&nbsp;of&nbsp;
3038
+ <b>36</b>
3039
+ </span>
3040
+ <span class="pf-v5-c-menu-toggle__controls">
3041
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3213
3042
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3214
- </div>
3215
- </button>
3216
- <ul
3217
- class="pf-v5-c-options-menu__menu pf-m-top"
3218
- role="menu"
3219
- aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
3220
- hidden
3221
- >
3222
- <li role="none">
3223
- <button
3224
- class="pf-v5-c-options-menu__menu-item"
3225
- type="button"
3226
- role="menuitem"
3227
- >5 per page</button>
3228
- </li>
3229
- <li role="none">
3230
- <button
3231
- class="pf-v5-c-options-menu__menu-item"
3232
- type="button"
3233
- role="menuitem"
3234
- >
3235
- 10 per page
3236
- <div class="pf-v5-c-options-menu__menu-item-icon">
3237
- <i class="fas fa-check" aria-hidden="true"></i>
3238
- </div>
3239
- </button>
3240
- </li>
3241
- <li role="none">
3242
- <button
3243
- class="pf-v5-c-options-menu__menu-item"
3244
- type="button"
3245
- role="menuitem"
3246
- >20 per page</button>
3247
- </li>
3248
- </ul>
3249
- </div>
3043
+ </span>
3044
+ </span>
3045
+ </button>
3250
3046
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
3251
3047
  <div class="pf-v5-c-pagination__nav-control pf-m-first">
3252
3048
  <button
@@ -3625,56 +3421,22 @@ wrapperTag: div
3625
3421
 
3626
3422
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
3627
3423
  <div class="pf-v5-c-pagination pf-m-compact">
3628
- <div class="pf-v5-c-options-menu">
3629
- <button
3630
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3631
- type="button"
3632
- id="data-list-static-bottom-example-toolbar-top-pagination-toggle"
3633
- aria-haspopup="listbox"
3634
- aria-expanded="false"
3635
- >
3636
- <span class="pf-v5-c-options-menu__toggle-text">
3637
- <b>1 - 10</b>&nbsp;of&nbsp;
3638
- <b>36</b>
3639
- </span>
3640
- <div class="pf-v5-c-options-menu__toggle-icon">
3424
+ <button
3425
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
3426
+ type="button"
3427
+ aria-expanded="false"
3428
+ id="data-list-static-bottom-example-toolbar-top-pagination"
3429
+ >
3430
+ <span class="pf-v5-c-menu-toggle__text">
3431
+ <b>1 - 10</b>&nbsp;of&nbsp;
3432
+ <b>36</b>
3433
+ </span>
3434
+ <span class="pf-v5-c-menu-toggle__controls">
3435
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3641
3436
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3642
- </div>
3643
- </button>
3644
- <ul
3645
- class="pf-v5-c-options-menu__menu"
3646
- role="menu"
3647
- aria-labelledby="data-list-static-bottom-example-toolbar-top-pagination-toggle"
3648
- hidden
3649
- >
3650
- <li role="none">
3651
- <button
3652
- class="pf-v5-c-options-menu__menu-item"
3653
- type="button"
3654
- role="menuitem"
3655
- >5 per page</button>
3656
- </li>
3657
- <li role="none">
3658
- <button
3659
- class="pf-v5-c-options-menu__menu-item"
3660
- type="button"
3661
- role="menuitem"
3662
- >
3663
- 10 per page
3664
- <div class="pf-v5-c-options-menu__menu-item-icon">
3665
- <i class="fas fa-check" aria-hidden="true"></i>
3666
- </div>
3667
- </button>
3668
- </li>
3669
- <li role="none">
3670
- <button
3671
- class="pf-v5-c-options-menu__menu-item"
3672
- type="button"
3673
- role="menuitem"
3674
- >20 per page</button>
3675
- </li>
3676
- </ul>
3677
- </div>
3437
+ </span>
3438
+ </span>
3439
+ </button>
3678
3440
  <nav
3679
3441
  class="pf-v5-c-pagination__nav"
3680
3442
  aria-label="Toolbar top pagination"
@@ -4041,56 +3803,22 @@ wrapperTag: div
4041
3803
  </li>
4042
3804
  </ul>
4043
3805
  <div class="pf-v5-c-pagination pf-m-bottom pf-m-static">
4044
- <div class="pf-v5-c-options-menu pf-m-top">
4045
- <button
4046
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
4047
- type="button"
4048
- id="{{page--id}}pagination-options-menu-bottom-example-static-toggle"
4049
- aria-haspopup="listbox"
4050
- aria-expanded="false"
4051
- >
4052
- <span class="pf-v5-c-options-menu__toggle-text">
4053
- <b>1 - 10</b>&nbsp;of&nbsp;
4054
- <b>36</b>
4055
- </span>
4056
- <div class="pf-v5-c-options-menu__toggle-icon">
3806
+ <button
3807
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
3808
+ type="button"
3809
+ aria-expanded="false"
3810
+ id="{{page--id}}pagination-menu-toggle-bottom-example-static"
3811
+ >
3812
+ <span class="pf-v5-c-menu-toggle__text">
3813
+ <b>1 - 10</b>&nbsp;of&nbsp;
3814
+ <b>36</b>
3815
+ </span>
3816
+ <span class="pf-v5-c-menu-toggle__controls">
3817
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
4057
3818
  <i class="fas fa-caret-down" aria-hidden="true"></i>
4058
- </div>
4059
- </button>
4060
- <ul
4061
- class="pf-v5-c-options-menu__menu pf-m-top"
4062
- role="menu"
4063
- aria-labelledby="{{page--id}}pagination-options-menu-bottom-example-static-toggle"
4064
- hidden
4065
- >
4066
- <li role="none">
4067
- <button
4068
- class="pf-v5-c-options-menu__menu-item"
4069
- type="button"
4070
- role="menuitem"
4071
- >5 per page</button>
4072
- </li>
4073
- <li role="none">
4074
- <button
4075
- class="pf-v5-c-options-menu__menu-item"
4076
- type="button"
4077
- role="menuitem"
4078
- >
4079
- 10 per page
4080
- <div class="pf-v5-c-options-menu__menu-item-icon">
4081
- <i class="fas fa-check" aria-hidden="true"></i>
4082
- </div>
4083
- </button>
4084
- </li>
4085
- <li role="none">
4086
- <button
4087
- class="pf-v5-c-options-menu__menu-item"
4088
- type="button"
4089
- role="menuitem"
4090
- >20 per page</button>
4091
- </li>
4092
- </ul>
4093
- </div>
3819
+ </span>
3820
+ </span>
3821
+ </button>
4094
3822
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
4095
3823
  <div class="pf-v5-c-pagination__nav-control pf-m-first">
4096
3824
  <button