@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/components/Toolbar/examples/Toolbar.md CHANGED
@@ -1836,56 +1836,22 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1836
1836
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
1837
1837
  <div class="pf-v5-c-pagination" aria-label="Element pagination">
1838
1838
  <div class="pf-v5-c-pagination__total-items">37 items</div>
1839
- <div class="pf-v5-c-options-menu">
1840
- <button
1841
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1842
- type="button"
1843
- id="toolbar-stacked-example-pagination-options-menu-toggle"
1844
- aria-haspopup="listbox"
1845
- aria-expanded="false"
1846
- >
1847
- <span class="pf-v5-c-options-menu__toggle-text">
1848
- <b>1 - 10</b>&nbsp;of&nbsp;
1849
- <b>36</b>
1850
- </span>
1851
- <div class="pf-v5-c-options-menu__toggle-icon">
1839
+ <button
1840
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
1841
+ type="button"
1842
+ aria-expanded="false"
1843
+ id="toolbar-stacked-example-pagination-menu-toggle"
1844
+ >
1845
+ <span class="pf-v5-c-menu-toggle__text">
1846
+ <b>1 - 10</b>&nbsp;of&nbsp;
1847
+ <b>36</b>
1848
+ </span>
1849
+ <span class="pf-v5-c-menu-toggle__controls">
1850
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1852
1851
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1853
- </div>
1854
- </button>
1855
- <ul
1856
- class="pf-v5-c-options-menu__menu"
1857
- role="menu"
1858
- aria-labelledby="toolbar-stacked-example-pagination-options-menu-toggle"
1859
- hidden
1860
- >
1861
- <li role="none">
1862
- <button
1863
- class="pf-v5-c-options-menu__menu-item"
1864
- type="button"
1865
- role="menuitem"
1866
- >5 per page</button>
1867
- </li>
1868
- <li role="none">
1869
- <button
1870
- class="pf-v5-c-options-menu__menu-item"
1871
- type="button"
1872
- role="menuitem"
1873
- >
1874
- 10 per page
1875
- <div class="pf-v5-c-options-menu__menu-item-icon">
1876
- <i class="fas fa-check" aria-hidden="true"></i>
1877
- </div>
1878
- </button>
1879
- </li>
1880
- <li role="none">
1881
- <button
1882
- class="pf-v5-c-options-menu__menu-item"
1883
- type="button"
1884
- role="menuitem"
1885
- >20 per page</button>
1886
- </li>
1887
- </ul>
1888
- </div>
1852
+ </span>
1853
+ </span>
1854
+ </button>
1889
1855
 
1890
1856
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
1891
1857
  <div class="pf-v5-c-pagination__nav-control pf-m-first">
@@ -2129,56 +2095,22 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2129
2095
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
2130
2096
  <div class="pf-v5-c-pagination" aria-label="Element pagination">
2131
2097
  <div class="pf-v5-c-pagination__total-items">37 items</div>
2132
- <div class="pf-v5-c-options-menu">
2133
- <button
2134
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2135
- type="button"
2136
- id="toolbar-stacked-collapsed-example-pagination-options-menu-toggle"
2137
- aria-haspopup="listbox"
2138
- aria-expanded="false"
2139
- >
2140
- <span class="pf-v5-c-options-menu__toggle-text">
2141
- <b>1 - 10</b>&nbsp;of&nbsp;
2142
- <b>36</b>
2143
- </span>
2144
- <div class="pf-v5-c-options-menu__toggle-icon">
2098
+ <button
2099
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
2100
+ type="button"
2101
+ aria-expanded="false"
2102
+ id="toolbar-stacked-collapsed-example-pagination-menu-toggle"
2103
+ >
2104
+ <span class="pf-v5-c-menu-toggle__text">
2105
+ <b>1 - 10</b>&nbsp;of&nbsp;
2106
+ <b>36</b>
2107
+ </span>
2108
+ <span class="pf-v5-c-menu-toggle__controls">
2109
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2145
2110
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2146
- </div>
2147
- </button>
2148
- <ul
2149
- class="pf-v5-c-options-menu__menu"
2150
- role="menu"
2151
- aria-labelledby="toolbar-stacked-collapsed-example-pagination-options-menu-toggle"
2152
- hidden
2153
- >
2154
- <li role="none">
2155
- <button
2156
- class="pf-v5-c-options-menu__menu-item"
2157
- type="button"
2158
- role="menuitem"
2159
- >5 per page</button>
2160
- </li>
2161
- <li role="none">
2162
- <button
2163
- class="pf-v5-c-options-menu__menu-item"
2164
- type="button"
2165
- role="menuitem"
2166
- >
2167
- 10 per page
2168
- <div class="pf-v5-c-options-menu__menu-item-icon">
2169
- <i class="fas fa-check" aria-hidden="true"></i>
2170
- </div>
2171
- </button>
2172
- </li>
2173
- <li role="none">
2174
- <button
2175
- class="pf-v5-c-options-menu__menu-item"
2176
- type="button"
2177
- role="menuitem"
2178
- >20 per page</button>
2179
- </li>
2180
- </ul>
2181
- </div>
2111
+ </span>
2112
+ </span>
2113
+ </button>
2182
2114
 
2183
2115
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
2184
2116
  <div class="pf-v5-c-pagination__nav-control pf-m-first">
package/docs/demos/CardView/examples/CardView.md CHANGED
@@ -488,56 +488,22 @@ section: patterns
488
488
 
489
489
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
490
490
  <div class="pf-v5-c-pagination pf-m-compact">
491
- <div class="pf-v5-c-options-menu">
492
- <button
493
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
494
- type="button"
495
- id="card-view-basic-example-toolbar-top-pagination-toggle"
496
- aria-haspopup="listbox"
497
- aria-expanded="false"
498
- >
499
- <span class="pf-v5-c-options-menu__toggle-text">
500
- <b>1 - 10</b>&nbsp;of&nbsp;
501
- <b>36</b>
502
- </span>
503
- <div class="pf-v5-c-options-menu__toggle-icon">
491
+ <button
492
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
493
+ type="button"
494
+ aria-expanded="false"
495
+ id="card-view-basic-example-toolbar-top-pagination"
496
+ >
497
+ <span class="pf-v5-c-menu-toggle__text">
498
+ <b>1 - 10</b>&nbsp;of&nbsp;
499
+ <b>36</b>
500
+ </span>
501
+ <span class="pf-v5-c-menu-toggle__controls">
502
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
504
503
  <i class="fas fa-caret-down" aria-hidden="true"></i>
505
- </div>
506
- </button>
507
- <ul
508
- class="pf-v5-c-options-menu__menu"
509
- role="menu"
510
- aria-labelledby="card-view-basic-example-toolbar-top-pagination-toggle"
511
- hidden
512
- >
513
- <li role="none">
514
- <button
515
- class="pf-v5-c-options-menu__menu-item"
516
- type="button"
517
- role="menuitem"
518
- >5 per page</button>
519
- </li>
520
- <li role="none">
521
- <button
522
- class="pf-v5-c-options-menu__menu-item"
523
- type="button"
524
- role="menuitem"
525
- >
526
- 10 per page
527
- <div class="pf-v5-c-options-menu__menu-item-icon">
528
- <i class="fas fa-check" aria-hidden="true"></i>
529
- </div>
530
- </button>
531
- </li>
532
- <li role="none">
533
- <button
534
- class="pf-v5-c-options-menu__menu-item"
535
- type="button"
536
- role="menuitem"
537
- >20 per page</button>
538
- </li>
539
- </ul>
540
- </div>
504
+ </span>
505
+ </span>
506
+ </button>
541
507
  <nav
542
508
  class="pf-v5-c-pagination__nav"
543
509
  aria-label="Toolbar top pagination"
@@ -1518,56 +1484,22 @@ section: patterns
1518
1484
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-light pf-m-sticky-bottom pf-m-no-fill"
1519
1485
  >
1520
1486
  <div class="pf-v5-c-pagination pf-m-bottom">
1521
- <div class="pf-v5-c-options-menu pf-m-top">
1522
- <button
1523
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1524
- type="button"
1525
- id="pagination-options-menu-bottom-example-toggle"
1526
- aria-haspopup="listbox"
1527
- aria-expanded="false"
1528
- >
1529
- <span class="pf-v5-c-options-menu__toggle-text">
1530
- <b>1 - 10</b>&nbsp;of&nbsp;
1531
- <b>36</b>
1532
- </span>
1533
- <div class="pf-v5-c-options-menu__toggle-icon">
1487
+ <button
1488
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
1489
+ type="button"
1490
+ aria-expanded="false"
1491
+ id="pagination-menu-toggle-bottom-example"
1492
+ >
1493
+ <span class="pf-v5-c-menu-toggle__text">
1494
+ <b>1 - 10</b>&nbsp;of&nbsp;
1495
+ <b>36</b>
1496
+ </span>
1497
+ <span class="pf-v5-c-menu-toggle__controls">
1498
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1534
1499
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1535
- </div>
1536
- </button>
1537
- <ul
1538
- class="pf-v5-c-options-menu__menu pf-m-top"
1539
- role="menu"
1540
- aria-labelledby="pagination-options-menu-bottom-example-toggle"
1541
- hidden
1542
- >
1543
- <li role="none">
1544
- <button
1545
- class="pf-v5-c-options-menu__menu-item"
1546
- type="button"
1547
- role="menuitem"
1548
- >5 per page</button>
1549
- </li>
1550
- <li role="none">
1551
- <button
1552
- class="pf-v5-c-options-menu__menu-item"
1553
- type="button"
1554
- role="menuitem"
1555
- >
1556
- 10 per page
1557
- <div class="pf-v5-c-options-menu__menu-item-icon">
1558
- <i class="fas fa-check" aria-hidden="true"></i>
1559
- </div>
1560
- </button>
1561
- </li>
1562
- <li role="none">
1563
- <button
1564
- class="pf-v5-c-options-menu__menu-item"
1565
- type="button"
1566
- role="menuitem"
1567
- >20 per page</button>
1568
- </li>
1569
- </ul>
1570
- </div>
1500
+ </span>
1501
+ </span>
1502
+ </button>
1571
1503
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
1572
1504
  <div class="pf-v5-c-pagination__nav-control pf-m-first">
1573
1505
  <button