@patternfly/patternfly 6.0.0-alpha.30 → 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 (19) hide show
  1. package/components/HelperText/helper-text.css +28 -34
  2. package/components/HelperText/helper-text.scss +30 -40
  3. package/components/Pagination/pagination.css +61 -121
  4. package/components/Pagination/pagination.scss +48 -127
  5. package/docs/components/Pagination/examples/Pagination.md +663 -637
  6. package/docs/components/Toolbar/examples/Toolbar.md +102 -100
  7. package/docs/demos/CardView/examples/CardView.md +102 -98
  8. package/docs/demos/DataList/examples/DataList.md +408 -392
  9. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +319 -299
  10. package/docs/demos/Table/examples/Table.md +1239 -1193
  11. package/docs/demos/Toolbar/examples/Toolbar.md +408 -392
  12. package/package.json +1 -1
  13. package/patternfly-no-globals.css +89 -163
  14. package/patternfly-theme-dark-unversioned.css +89 -163
  15. package/patternfly.css +89 -163
  16. package/patternfly.min.css +1 -1
  17. package/patternfly.min.css.map +1 -1
  18. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  19. package/components/Pagination/themes/dark/pagination.scss +0 -7
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -1836,57 +1836,58 @@ 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">
1852
- <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>
1839
+ <div class="pf-v5-c-pagination__page-menu">
1840
+ <div class="pf-v5-c-options-menu">
1841
+ <button
1842
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1843
+ type="button"
1844
+ id="toolbar-stacked-example-pagination-options-menu-toggle"
1845
+ aria-haspopup="listbox"
1846
+ aria-expanded="false"
1847
+ >
1848
+ <span class="pf-v5-c-options-menu__toggle-text">
1849
+ <b>1 - 10</b>&nbsp;of&nbsp;
1850
+ <b>36</b>
1851
+ </span>
1852
+ <div class="pf-v5-c-options-menu__toggle-icon">
1853
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1854
+ </div>
1855
+ </button>
1856
+ <ul
1857
+ class="pf-v5-c-options-menu__menu"
1858
+ role="menu"
1859
+ aria-labelledby="toolbar-stacked-example-pagination-options-menu-toggle"
1860
+ hidden
1861
+ >
1862
+ <li role="none">
1863
+ <button
1864
+ class="pf-v5-c-options-menu__menu-item"
1865
+ type="button"
1866
+ role="menuitem"
1867
+ >5 per page</button>
1868
+ </li>
1869
+ <li role="none">
1870
+ <button
1871
+ class="pf-v5-c-options-menu__menu-item"
1872
+ type="button"
1873
+ role="menuitem"
1874
+ >
1875
+ 10 per page
1876
+ <div class="pf-v5-c-options-menu__menu-item-icon">
1877
+ <i class="fas fa-check" aria-hidden="true"></i>
1878
+ </div>
1879
+ </button>
1880
+ </li>
1881
+ <li role="none">
1882
+ <button
1883
+ class="pf-v5-c-options-menu__menu-item"
1884
+ type="button"
1885
+ role="menuitem"
1886
+ >20 per page</button>
1887
+ </li>
1888
+ </ul>
1889
+ </div>
1888
1890
  </div>
1889
-
1890
1891
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
1891
1892
  <div class="pf-v5-c-pagination__nav-control pf-m-first">
1892
1893
  <button
@@ -2129,57 +2130,58 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2129
2130
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
2130
2131
  <div class="pf-v5-c-pagination" aria-label="Element pagination">
2131
2132
  <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">
2145
- <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>
2133
+ <div class="pf-v5-c-pagination__page-menu">
2134
+ <div class="pf-v5-c-options-menu">
2135
+ <button
2136
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2137
+ type="button"
2138
+ id="toolbar-stacked-collapsed-example-pagination-options-menu-toggle"
2139
+ aria-haspopup="listbox"
2140
+ aria-expanded="false"
2141
+ >
2142
+ <span class="pf-v5-c-options-menu__toggle-text">
2143
+ <b>1 - 10</b>&nbsp;of&nbsp;
2144
+ <b>36</b>
2145
+ </span>
2146
+ <div class="pf-v5-c-options-menu__toggle-icon">
2147
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2148
+ </div>
2149
+ </button>
2150
+ <ul
2151
+ class="pf-v5-c-options-menu__menu"
2152
+ role="menu"
2153
+ aria-labelledby="toolbar-stacked-collapsed-example-pagination-options-menu-toggle"
2154
+ hidden
2155
+ >
2156
+ <li role="none">
2157
+ <button
2158
+ class="pf-v5-c-options-menu__menu-item"
2159
+ type="button"
2160
+ role="menuitem"
2161
+ >5 per page</button>
2162
+ </li>
2163
+ <li role="none">
2164
+ <button
2165
+ class="pf-v5-c-options-menu__menu-item"
2166
+ type="button"
2167
+ role="menuitem"
2168
+ >
2169
+ 10 per page
2170
+ <div class="pf-v5-c-options-menu__menu-item-icon">
2171
+ <i class="fas fa-check" aria-hidden="true"></i>
2172
+ </div>
2173
+ </button>
2174
+ </li>
2175
+ <li role="none">
2176
+ <button
2177
+ class="pf-v5-c-options-menu__menu-item"
2178
+ type="button"
2179
+ role="menuitem"
2180
+ >20 per page</button>
2181
+ </li>
2182
+ </ul>
2183
+ </div>
2181
2184
  </div>
2182
-
2183
2185
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
2184
2186
  <div class="pf-v5-c-pagination__nav-control pf-m-first">
2185
2187
  <button
package/docs/demos/CardView/examples/CardView.md CHANGED
@@ -563,55 +563,57 @@ section: patterns
563
563
 
564
564
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
565
565
  <div class="pf-v5-c-pagination pf-m-compact">
566
- <div class="pf-v5-c-options-menu">
567
- <button
568
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
569
- type="button"
570
- id="card-view-basic-example-toolbar-top-pagination-toggle"
571
- aria-haspopup="listbox"
572
- aria-expanded="false"
573
- >
574
- <span class="pf-v5-c-options-menu__toggle-text">
575
- <b>1 - 10</b>&nbsp;of&nbsp;
576
- <b>36</b>
577
- </span>
578
- <div class="pf-v5-c-options-menu__toggle-icon">
579
- <i class="fas fa-caret-down" aria-hidden="true"></i>
580
- </div>
581
- </button>
582
- <ul
583
- class="pf-v5-c-options-menu__menu"
584
- role="menu"
585
- aria-labelledby="card-view-basic-example-toolbar-top-pagination-toggle"
586
- hidden
587
- >
588
- <li role="none">
589
- <button
590
- class="pf-v5-c-options-menu__menu-item"
591
- type="button"
592
- role="menuitem"
593
- >5 per page</button>
594
- </li>
595
- <li role="none">
596
- <button
597
- class="pf-v5-c-options-menu__menu-item"
598
- type="button"
599
- role="menuitem"
600
- >
601
- 10 per page
602
- <div class="pf-v5-c-options-menu__menu-item-icon">
603
- <i class="fas fa-check" aria-hidden="true"></i>
604
- </div>
605
- </button>
606
- </li>
607
- <li role="none">
608
- <button
609
- class="pf-v5-c-options-menu__menu-item"
610
- type="button"
611
- role="menuitem"
612
- >20 per page</button>
613
- </li>
614
- </ul>
566
+ <div class="pf-v5-c-pagination__page-menu">
567
+ <div class="pf-v5-c-options-menu">
568
+ <button
569
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
570
+ type="button"
571
+ id="card-view-basic-example-toolbar-top-pagination-toggle"
572
+ aria-haspopup="listbox"
573
+ aria-expanded="false"
574
+ >
575
+ <span class="pf-v5-c-options-menu__toggle-text">
576
+ <b>1 - 10</b>&nbsp;of&nbsp;
577
+ <b>36</b>
578
+ </span>
579
+ <div class="pf-v5-c-options-menu__toggle-icon">
580
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
581
+ </div>
582
+ </button>
583
+ <ul
584
+ class="pf-v5-c-options-menu__menu"
585
+ role="menu"
586
+ aria-labelledby="card-view-basic-example-toolbar-top-pagination-toggle"
587
+ hidden
588
+ >
589
+ <li role="none">
590
+ <button
591
+ class="pf-v5-c-options-menu__menu-item"
592
+ type="button"
593
+ role="menuitem"
594
+ >5 per page</button>
595
+ </li>
596
+ <li role="none">
597
+ <button
598
+ class="pf-v5-c-options-menu__menu-item"
599
+ type="button"
600
+ role="menuitem"
601
+ >
602
+ 10 per page
603
+ <div class="pf-v5-c-options-menu__menu-item-icon">
604
+ <i class="fas fa-check" aria-hidden="true"></i>
605
+ </div>
606
+ </button>
607
+ </li>
608
+ <li role="none">
609
+ <button
610
+ class="pf-v5-c-options-menu__menu-item"
611
+ type="button"
612
+ role="menuitem"
613
+ >20 per page</button>
614
+ </li>
615
+ </ul>
616
+ </div>
615
617
  </div>
616
618
  <nav
617
619
  class="pf-v5-c-pagination__nav"
@@ -1593,55 +1595,57 @@ section: patterns
1593
1595
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-light pf-m-sticky-bottom pf-m-no-fill"
1594
1596
  >
1595
1597
  <div class="pf-v5-c-pagination pf-m-bottom">
1596
- <div class="pf-v5-c-options-menu pf-m-top">
1597
- <button
1598
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1599
- type="button"
1600
- id="pagination-options-menu-bottom-example-toggle"
1601
- aria-haspopup="listbox"
1602
- aria-expanded="false"
1603
- >
1604
- <span class="pf-v5-c-options-menu__toggle-text">
1605
- <b>1 - 10</b>&nbsp;of&nbsp;
1606
- <b>36</b>
1607
- </span>
1608
- <div class="pf-v5-c-options-menu__toggle-icon">
1609
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1610
- </div>
1611
- </button>
1612
- <ul
1613
- class="pf-v5-c-options-menu__menu pf-m-top"
1614
- role="menu"
1615
- aria-labelledby="pagination-options-menu-bottom-example-toggle"
1616
- hidden
1617
- >
1618
- <li role="none">
1619
- <button
1620
- class="pf-v5-c-options-menu__menu-item"
1621
- type="button"
1622
- role="menuitem"
1623
- >5 per page</button>
1624
- </li>
1625
- <li role="none">
1626
- <button
1627
- class="pf-v5-c-options-menu__menu-item"
1628
- type="button"
1629
- role="menuitem"
1630
- >
1631
- 10 per page
1632
- <div class="pf-v5-c-options-menu__menu-item-icon">
1633
- <i class="fas fa-check" aria-hidden="true"></i>
1634
- </div>
1635
- </button>
1636
- </li>
1637
- <li role="none">
1638
- <button
1639
- class="pf-v5-c-options-menu__menu-item"
1640
- type="button"
1641
- role="menuitem"
1642
- >20 per page</button>
1643
- </li>
1644
- </ul>
1598
+ <div class="pf-v5-c-pagination__page-menu">
1599
+ <div class="pf-v5-c-options-menu pf-m-top">
1600
+ <button
1601
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1602
+ type="button"
1603
+ id="pagination-options-menu-bottom-example-toggle"
1604
+ aria-haspopup="listbox"
1605
+ aria-expanded="false"
1606
+ >
1607
+ <span class="pf-v5-c-options-menu__toggle-text">
1608
+ <b>1 - 10</b>&nbsp;of&nbsp;
1609
+ <b>36</b>
1610
+ </span>
1611
+ <div class="pf-v5-c-options-menu__toggle-icon">
1612
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1613
+ </div>
1614
+ </button>
1615
+ <ul
1616
+ class="pf-v5-c-options-menu__menu pf-m-top"
1617
+ role="menu"
1618
+ aria-labelledby="pagination-options-menu-bottom-example-toggle"
1619
+ hidden
1620
+ >
1621
+ <li role="none">
1622
+ <button
1623
+ class="pf-v5-c-options-menu__menu-item"
1624
+ type="button"
1625
+ role="menuitem"
1626
+ >5 per page</button>
1627
+ </li>
1628
+ <li role="none">
1629
+ <button
1630
+ class="pf-v5-c-options-menu__menu-item"
1631
+ type="button"
1632
+ role="menuitem"
1633
+ >
1634
+ 10 per page
1635
+ <div class="pf-v5-c-options-menu__menu-item-icon">
1636
+ <i class="fas fa-check" aria-hidden="true"></i>
1637
+ </div>
1638
+ </button>
1639
+ </li>
1640
+ <li role="none">
1641
+ <button
1642
+ class="pf-v5-c-options-menu__menu-item"
1643
+ type="button"
1644
+ role="menuitem"
1645
+ >20 per page</button>
1646
+ </li>
1647
+ </ul>
1648
+ </div>
1645
1649
  </div>
1646
1650
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
1647
1651
  <div class="pf-v5-c-pagination__nav-control pf-m-first">