@patternfly/patternfly 5.4.0-prerelease.1 → 5.4.0-prerelease.3

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 (26) 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/Panel/examples/Panel.md +2 -2
  5. package/docs/components/Sidebar/examples/Sidebar.css +4 -2
  6. package/docs/components/Sidebar/examples/Sidebar.md +3 -3
  7. package/docs/components/Table/examples/Table.md +471 -44
  8. package/docs/components/Toolbar/examples/Toolbar.md +30 -98
  9. package/docs/demos/CardView/examples/CardView.md +30 -98
  10. package/docs/demos/DataList/examples/DataList.md +120 -392
  11. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -32
  12. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +90 -302
  13. package/docs/demos/Table/examples/Table.md +345 -1127
  14. package/docs/demos/Toolbar/examples/Toolbar.md +120 -392
  15. package/docs/utilities/Display/examples/Display.css +1 -8
  16. package/docs/utilities/Display/examples/Display.md +16 -7
  17. package/package.json +5 -5
  18. package/patternfly-addons.css +38 -0
  19. package/patternfly-no-globals.css +7 -4
  20. package/patternfly-theme-dark-unversioned.css +7 -4
  21. package/patternfly.css +7 -4
  22. package/patternfly.min.css +1 -1
  23. package/patternfly.min.css.map +1 -1
  24. package/utilities/Display/display.css +38 -0
  25. package/utilities/Display/display.scss +3 -1
  26. package/docs/components/Pagination/examples/Pagination.css +0 -3
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -556,58 +556,22 @@ wrapperTag: div
556
556
 
557
557
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
558
558
  <div class="pf-v5-c-pagination pf-m-compact">
559
- <div class="pf-v5-c-options-menu">
560
- <button
561
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
562
- type="button"
563
- id="primary-detail-expanded-example-drawer-toolbar-top-pagination-toggle"
564
- aria-haspopup="listbox"
565
- aria-expanded="false"
566
- >
567
- <span class="pf-v5-c-options-menu__toggle-text">
568
- <b>1 - 10</b>&nbsp;of&nbsp;
569
- <b>36</b>
570
- </span>
571
- <div class="pf-v5-c-options-menu__toggle-icon">
559
+ <button
560
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
561
+ type="button"
562
+ aria-expanded="false"
563
+ id="primary-detail-expanded-example-drawer-toolbar-top-pagination"
564
+ >
565
+ <span class="pf-v5-c-menu-toggle__text">
566
+ <b>1 - 10</b>&nbsp;of&nbsp;
567
+ <b>36</b>
568
+ </span>
569
+ <span class="pf-v5-c-menu-toggle__controls">
570
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
572
571
  <i class="fas fa-caret-down" aria-hidden="true"></i>
573
- </div>
574
- </button>
575
- <ul
576
- class="pf-v5-c-options-menu__menu"
577
- role="menu"
578
- aria-labelledby="primary-detail-expanded-example-drawer-toolbar-top-pagination-toggle"
579
- hidden
580
- >
581
- <li role="none">
582
- <button
583
- class="pf-v5-c-options-menu__menu-item"
584
- type="button"
585
- role="menuitem"
586
- >5 per page</button>
587
- </li>
588
- <li role="none">
589
- <button
590
- class="pf-v5-c-options-menu__menu-item"
591
- type="button"
592
- role="menuitem"
593
- >
594
- 10 per page
595
- <div
596
- class="pf-v5-c-options-menu__menu-item-icon"
597
- >
598
- <i class="fas fa-check" aria-hidden="true"></i>
599
- </div>
600
- </button>
601
- </li>
602
- <li role="none">
603
- <button
604
- class="pf-v5-c-options-menu__menu-item"
605
- type="button"
606
- role="menuitem"
607
- >20 per page</button>
608
- </li>
609
- </ul>
610
- </div>
572
+ </span>
573
+ </span>
574
+ </button>
611
575
  <nav
612
576
  class="pf-v5-c-pagination__nav"
613
577
  aria-label="Toolbar top pagination"
@@ -1767,58 +1731,22 @@ wrapperTag: div
1767
1731
 
1768
1732
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
1769
1733
  <div class="pf-v5-c-pagination pf-m-compact">
1770
- <div class="pf-v5-c-options-menu">
1771
- <button
1772
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1773
- type="button"
1774
- id="primary-detail-collapsed-example-drawer-toolbar-top-pagination-toggle"
1775
- aria-haspopup="listbox"
1776
- aria-expanded="false"
1777
- >
1778
- <span class="pf-v5-c-options-menu__toggle-text">
1779
- <b>1 - 10</b>&nbsp;of&nbsp;
1780
- <b>36</b>
1781
- </span>
1782
- <div class="pf-v5-c-options-menu__toggle-icon">
1734
+ <button
1735
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
1736
+ type="button"
1737
+ aria-expanded="false"
1738
+ id="primary-detail-collapsed-example-drawer-toolbar-top-pagination"
1739
+ >
1740
+ <span class="pf-v5-c-menu-toggle__text">
1741
+ <b>1 - 10</b>&nbsp;of&nbsp;
1742
+ <b>36</b>
1743
+ </span>
1744
+ <span class="pf-v5-c-menu-toggle__controls">
1745
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1783
1746
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1784
- </div>
1785
- </button>
1786
- <ul
1787
- class="pf-v5-c-options-menu__menu"
1788
- role="menu"
1789
- aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-top-pagination-toggle"
1790
- hidden
1791
- >
1792
- <li role="none">
1793
- <button
1794
- class="pf-v5-c-options-menu__menu-item"
1795
- type="button"
1796
- role="menuitem"
1797
- >5 per page</button>
1798
- </li>
1799
- <li role="none">
1800
- <button
1801
- class="pf-v5-c-options-menu__menu-item"
1802
- type="button"
1803
- role="menuitem"
1804
- >
1805
- 10 per page
1806
- <div
1807
- class="pf-v5-c-options-menu__menu-item-icon"
1808
- >
1809
- <i class="fas fa-check" aria-hidden="true"></i>
1810
- </div>
1811
- </button>
1812
- </li>
1813
- <li role="none">
1814
- <button
1815
- class="pf-v5-c-options-menu__menu-item"
1816
- type="button"
1817
- role="menuitem"
1818
- >20 per page</button>
1819
- </li>
1820
- </ul>
1821
- </div>
1747
+ </span>
1748
+ </span>
1749
+ </button>
1822
1750
  <nav
1823
1751
  class="pf-v5-c-pagination__nav"
1824
1752
  aria-label="Toolbar top pagination"
@@ -2849,58 +2777,22 @@ wrapperTag: div
2849
2777
 
2850
2778
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
2851
2779
  <div class="pf-v5-c-pagination pf-m-compact">
2852
- <div class="pf-v5-c-options-menu">
2853
- <button
2854
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2855
- type="button"
2856
- id="primary-detail-content-body-padding-example-drawer-toolbar-top-pagination-toggle"
2857
- aria-haspopup="listbox"
2858
- aria-expanded="false"
2859
- >
2860
- <span class="pf-v5-c-options-menu__toggle-text">
2861
- <b>1 - 10</b>&nbsp;of&nbsp;
2862
- <b>36</b>
2863
- </span>
2864
- <div class="pf-v5-c-options-menu__toggle-icon">
2780
+ <button
2781
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
2782
+ type="button"
2783
+ aria-expanded="false"
2784
+ id="primary-detail-content-body-padding-example-drawer-toolbar-top-pagination"
2785
+ >
2786
+ <span class="pf-v5-c-menu-toggle__text">
2787
+ <b>1 - 10</b>&nbsp;of&nbsp;
2788
+ <b>36</b>
2789
+ </span>
2790
+ <span class="pf-v5-c-menu-toggle__controls">
2791
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2865
2792
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2866
- </div>
2867
- </button>
2868
- <ul
2869
- class="pf-v5-c-options-menu__menu"
2870
- role="menu"
2871
- aria-labelledby="primary-detail-content-body-padding-example-drawer-toolbar-top-pagination-toggle"
2872
- hidden
2873
- >
2874
- <li role="none">
2875
- <button
2876
- class="pf-v5-c-options-menu__menu-item"
2877
- type="button"
2878
- role="menuitem"
2879
- >5 per page</button>
2880
- </li>
2881
- <li role="none">
2882
- <button
2883
- class="pf-v5-c-options-menu__menu-item"
2884
- type="button"
2885
- role="menuitem"
2886
- >
2887
- 10 per page
2888
- <div
2889
- class="pf-v5-c-options-menu__menu-item-icon"
2890
- >
2891
- <i class="fas fa-check" aria-hidden="true"></i>
2892
- </div>
2893
- </button>
2894
- </li>
2895
- <li role="none">
2896
- <button
2897
- class="pf-v5-c-options-menu__menu-item"
2898
- type="button"
2899
- role="menuitem"
2900
- >20 per page</button>
2901
- </li>
2902
- </ul>
2903
- </div>
2793
+ </span>
2794
+ </span>
2795
+ </button>
2904
2796
  <nav
2905
2797
  class="pf-v5-c-pagination__nav"
2906
2798
  aria-label="Toolbar top pagination"
@@ -3816,56 +3708,22 @@ wrapperTag: div
3816
3708
 
3817
3709
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
3818
3710
  <div class="pf-v5-c-pagination pf-m-compact">
3819
- <div class="pf-v5-c-options-menu">
3820
- <button
3821
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3822
- type="button"
3823
- id="primary-detail-card-view-expanded-example-drawer-toolbar-top-pagination-toggle"
3824
- aria-haspopup="listbox"
3825
- aria-expanded="false"
3826
- >
3827
- <span class="pf-v5-c-options-menu__toggle-text">
3828
- <b>1 - 10</b>&nbsp;of&nbsp;
3829
- <b>36</b>
3830
- </span>
3831
- <div class="pf-v5-c-options-menu__toggle-icon">
3711
+ <button
3712
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
3713
+ type="button"
3714
+ aria-expanded="false"
3715
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-top-pagination"
3716
+ >
3717
+ <span class="pf-v5-c-menu-toggle__text">
3718
+ <b>1 - 10</b>&nbsp;of&nbsp;
3719
+ <b>36</b>
3720
+ </span>
3721
+ <span class="pf-v5-c-menu-toggle__controls">
3722
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3832
3723
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3833
- </div>
3834
- </button>
3835
- <ul
3836
- class="pf-v5-c-options-menu__menu"
3837
- role="menu"
3838
- aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-top-pagination-toggle"
3839
- hidden
3840
- >
3841
- <li role="none">
3842
- <button
3843
- class="pf-v5-c-options-menu__menu-item"
3844
- type="button"
3845
- role="menuitem"
3846
- >5 per page</button>
3847
- </li>
3848
- <li role="none">
3849
- <button
3850
- class="pf-v5-c-options-menu__menu-item"
3851
- type="button"
3852
- role="menuitem"
3853
- >
3854
- 10 per page
3855
- <div class="pf-v5-c-options-menu__menu-item-icon">
3856
- <i class="fas fa-check" aria-hidden="true"></i>
3857
- </div>
3858
- </button>
3859
- </li>
3860
- <li role="none">
3861
- <button
3862
- class="pf-v5-c-options-menu__menu-item"
3863
- type="button"
3864
- role="menuitem"
3865
- >20 per page</button>
3866
- </li>
3867
- </ul>
3868
- </div>
3724
+ </span>
3725
+ </span>
3726
+ </button>
3869
3727
  <nav
3870
3728
  class="pf-v5-c-pagination__nav"
3871
3729
  aria-label="Toolbar top pagination"
@@ -5595,58 +5453,22 @@ wrapperTag: div
5595
5453
  <b>1 - 10</b> of
5596
5454
  <b>37</b>
5597
5455
  </div>
5598
- <div class="pf-v5-c-options-menu">
5599
- <button
5600
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
5601
- type="button"
5602
- id="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-pagination-options-menu-toggle"
5603
- aria-haspopup="listbox"
5604
- aria-expanded="false"
5605
- >
5606
- <span class="pf-v5-c-options-menu__toggle-text">
5607
- <b>1 - 10</b>&nbsp;of&nbsp;
5608
- <b>36</b>
5609
- </span>
5610
- <div class="pf-v5-c-options-menu__toggle-icon">
5456
+ <button
5457
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
5458
+ type="button"
5459
+ aria-expanded="false"
5460
+ id="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-pagination-menu-toggle"
5461
+ >
5462
+ <span class="pf-v5-c-menu-toggle__text">
5463
+ <b>1 - 10</b>&nbsp;of&nbsp;
5464
+ <b>36</b>
5465
+ </span>
5466
+ <span class="pf-v5-c-menu-toggle__controls">
5467
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
5611
5468
  <i class="fas fa-caret-down" aria-hidden="true"></i>
5612
- </div>
5613
- </button>
5614
- <ul
5615
- class="pf-v5-c-options-menu__menu"
5616
- role="menu"
5617
- aria-labelledby="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-pagination-options-menu-toggle"
5618
- hidden
5619
- >
5620
- <li role="none">
5621
- <button
5622
- class="pf-v5-c-options-menu__menu-item"
5623
- type="button"
5624
- role="menuitem"
5625
- >5 per page</button>
5626
- </li>
5627
- <li role="none">
5628
- <button
5629
- class="pf-v5-c-options-menu__menu-item"
5630
- type="button"
5631
- role="menuitem"
5632
- >
5633
- 10 per page
5634
- <div
5635
- class="pf-v5-c-options-menu__menu-item-icon"
5636
- >
5637
- <i class="fas fa-check" aria-hidden="true"></i>
5638
- </div>
5639
- </button>
5640
- </li>
5641
- <li role="none">
5642
- <button
5643
- class="pf-v5-c-options-menu__menu-item"
5644
- type="button"
5645
- role="menuitem"
5646
- >20 per page</button>
5647
- </li>
5648
- </ul>
5649
- </div>
5469
+ </span>
5470
+ </span>
5471
+ </button>
5650
5472
  </div>
5651
5473
  </div>
5652
5474
  </div>
@@ -6263,56 +6085,22 @@ wrapperTag: div
6263
6085
 
6264
6086
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
6265
6087
  <div class="pf-v5-c-pagination pf-m-compact">
6266
- <div class="pf-v5-c-options-menu">
6267
- <button
6268
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
6269
- type="button"
6270
- id="primary-detail-inline-modifier-example-drawer-toolbar-top-pagination-toggle"
6271
- aria-haspopup="listbox"
6272
- aria-expanded="false"
6273
- >
6274
- <span class="pf-v5-c-options-menu__toggle-text">
6275
- <b>1 - 10</b>&nbsp;of&nbsp;
6276
- <b>36</b>
6277
- </span>
6278
- <div class="pf-v5-c-options-menu__toggle-icon">
6088
+ <button
6089
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
6090
+ type="button"
6091
+ aria-expanded="false"
6092
+ id="primary-detail-inline-modifier-example-drawer-toolbar-top-pagination"
6093
+ >
6094
+ <span class="pf-v5-c-menu-toggle__text">
6095
+ <b>1 - 10</b>&nbsp;of&nbsp;
6096
+ <b>36</b>
6097
+ </span>
6098
+ <span class="pf-v5-c-menu-toggle__controls">
6099
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
6279
6100
  <i class="fas fa-caret-down" aria-hidden="true"></i>
6280
- </div>
6281
- </button>
6282
- <ul
6283
- class="pf-v5-c-options-menu__menu"
6284
- role="menu"
6285
- aria-labelledby="primary-detail-inline-modifier-example-drawer-toolbar-top-pagination-toggle"
6286
- hidden
6287
- >
6288
- <li role="none">
6289
- <button
6290
- class="pf-v5-c-options-menu__menu-item"
6291
- type="button"
6292
- role="menuitem"
6293
- >5 per page</button>
6294
- </li>
6295
- <li role="none">
6296
- <button
6297
- class="pf-v5-c-options-menu__menu-item"
6298
- type="button"
6299
- role="menuitem"
6300
- >
6301
- 10 per page
6302
- <div class="pf-v5-c-options-menu__menu-item-icon">
6303
- <i class="fas fa-check" aria-hidden="true"></i>
6304
- </div>
6305
- </button>
6306
- </li>
6307
- <li role="none">
6308
- <button
6309
- class="pf-v5-c-options-menu__menu-item"
6310
- type="button"
6311
- role="menuitem"
6312
- >20 per page</button>
6313
- </li>
6314
- </ul>
6315
- </div>
6101
+ </span>
6102
+ </span>
6103
+ </button>
6316
6104
  <nav
6317
6105
  class="pf-v5-c-pagination__nav"
6318
6106
  aria-label="Toolbar top pagination"