@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.
- package/components/Pagination/pagination.css +7 -4
- package/components/Pagination/pagination.scss +9 -8
- package/docs/components/Pagination/examples/Pagination.md +182 -708
- package/docs/components/Panel/examples/Panel.md +2 -2
- package/docs/components/Sidebar/examples/Sidebar.css +4 -2
- package/docs/components/Sidebar/examples/Sidebar.md +3 -3
- package/docs/components/Table/examples/Table.md +471 -44
- package/docs/components/Toolbar/examples/Toolbar.md +30 -98
- package/docs/demos/CardView/examples/CardView.md +30 -98
- package/docs/demos/DataList/examples/DataList.md +120 -392
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -32
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +90 -302
- package/docs/demos/Table/examples/Table.md +345 -1127
- package/docs/demos/Toolbar/examples/Toolbar.md +120 -392
- package/docs/utilities/Display/examples/Display.css +1 -8
- package/docs/utilities/Display/examples/Display.md +16 -7
- package/package.json +5 -5
- package/patternfly-addons.css +38 -0
- package/patternfly-no-globals.css +7 -4
- package/patternfly-theme-dark-unversioned.css +7 -4
- package/patternfly.css +7 -4
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/utilities/Display/display.css +38 -0
- package/utilities/Display/display.scss +3 -1
- package/docs/components/Pagination/examples/Pagination.css +0 -3
|
@@ -128,56 +128,22 @@ section: components
|
|
|
128
128
|
<div
|
|
129
129
|
class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
|
|
130
130
|
>
|
|
131
|
-
<
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
<
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
<div class="pf-v5-c-options-menu__toggle-icon">
|
|
131
|
+
<button
|
|
132
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
|
|
133
|
+
type="button"
|
|
134
|
+
aria-expanded="false"
|
|
135
|
+
id="toolbar-attribute-value-search-filter-desktop-example-pagination-menu-toggle"
|
|
136
|
+
>
|
|
137
|
+
<span class="pf-v5-c-menu-toggle__text">
|
|
138
|
+
<b>1 - 10</b> of
|
|
139
|
+
<b>36</b>
|
|
140
|
+
</span>
|
|
141
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
142
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
144
143
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
145
|
-
</
|
|
146
|
-
</
|
|
147
|
-
|
|
148
|
-
class="pf-v5-c-options-menu__menu"
|
|
149
|
-
role="menu"
|
|
150
|
-
aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-pagination-options-menu-toggle"
|
|
151
|
-
hidden
|
|
152
|
-
>
|
|
153
|
-
<li role="none">
|
|
154
|
-
<button
|
|
155
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
156
|
-
type="button"
|
|
157
|
-
role="menuitem"
|
|
158
|
-
>5 per page</button>
|
|
159
|
-
</li>
|
|
160
|
-
<li role="none">
|
|
161
|
-
<button
|
|
162
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
163
|
-
type="button"
|
|
164
|
-
role="menuitem"
|
|
165
|
-
>
|
|
166
|
-
10 per page
|
|
167
|
-
<div class="pf-v5-c-options-menu__menu-item-icon">
|
|
168
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
169
|
-
</div>
|
|
170
|
-
</button>
|
|
171
|
-
</li>
|
|
172
|
-
<li role="none">
|
|
173
|
-
<button
|
|
174
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
175
|
-
type="button"
|
|
176
|
-
role="menuitem"
|
|
177
|
-
>20 per page</button>
|
|
178
|
-
</li>
|
|
179
|
-
</ul>
|
|
180
|
-
</div>
|
|
144
|
+
</span>
|
|
145
|
+
</span>
|
|
146
|
+
</button>
|
|
181
147
|
<nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
|
|
182
148
|
<div class="pf-v5-c-pagination__nav-control pf-m-prev">
|
|
183
149
|
<button
|
|
@@ -1261,56 +1227,22 @@ section: components
|
|
|
1261
1227
|
<div
|
|
1262
1228
|
class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
|
|
1263
1229
|
>
|
|
1264
|
-
<
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
<
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
|
|
1276
|
-
<div class="pf-v5-c-options-menu__toggle-icon">
|
|
1230
|
+
<button
|
|
1231
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
|
|
1232
|
+
type="button"
|
|
1233
|
+
aria-expanded="false"
|
|
1234
|
+
id="toolbar-attribute-value-search-filter-mobile-example-pagination-menu-toggle"
|
|
1235
|
+
>
|
|
1236
|
+
<span class="pf-v5-c-menu-toggle__text">
|
|
1237
|
+
<b>1 - 10</b> of
|
|
1238
|
+
<b>36</b>
|
|
1239
|
+
</span>
|
|
1240
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
1241
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1277
1242
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1278
|
-
</
|
|
1279
|
-
</
|
|
1280
|
-
|
|
1281
|
-
class="pf-v5-c-options-menu__menu"
|
|
1282
|
-
role="menu"
|
|
1283
|
-
aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-pagination-options-menu-toggle"
|
|
1284
|
-
hidden
|
|
1285
|
-
>
|
|
1286
|
-
<li role="none">
|
|
1287
|
-
<button
|
|
1288
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
1289
|
-
type="button"
|
|
1290
|
-
role="menuitem"
|
|
1291
|
-
>5 per page</button>
|
|
1292
|
-
</li>
|
|
1293
|
-
<li role="none">
|
|
1294
|
-
<button
|
|
1295
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
1296
|
-
type="button"
|
|
1297
|
-
role="menuitem"
|
|
1298
|
-
>
|
|
1299
|
-
10 per page
|
|
1300
|
-
<div class="pf-v5-c-options-menu__menu-item-icon">
|
|
1301
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1302
|
-
</div>
|
|
1303
|
-
</button>
|
|
1304
|
-
</li>
|
|
1305
|
-
<li role="none">
|
|
1306
|
-
<button
|
|
1307
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
1308
|
-
type="button"
|
|
1309
|
-
role="menuitem"
|
|
1310
|
-
>20 per page</button>
|
|
1311
|
-
</li>
|
|
1312
|
-
</ul>
|
|
1313
|
-
</div>
|
|
1243
|
+
</span>
|
|
1244
|
+
</span>
|
|
1245
|
+
</button>
|
|
1314
1246
|
<nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
|
|
1315
1247
|
<div class="pf-v5-c-pagination__nav-control pf-m-prev">
|
|
1316
1248
|
<button
|
|
@@ -1566,56 +1498,22 @@ section: components
|
|
|
1566
1498
|
<div
|
|
1567
1499
|
class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
|
|
1568
1500
|
>
|
|
1569
|
-
<
|
|
1570
|
-
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
<
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
<div class="pf-v5-c-options-menu__toggle-icon">
|
|
1501
|
+
<button
|
|
1502
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
|
|
1503
|
+
type="button"
|
|
1504
|
+
aria-expanded="false"
|
|
1505
|
+
id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-pagination-menu-toggle"
|
|
1506
|
+
>
|
|
1507
|
+
<span class="pf-v5-c-menu-toggle__text">
|
|
1508
|
+
<b>1 - 10</b> of
|
|
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">
|
|
1582
1513
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1583
|
-
</
|
|
1584
|
-
</
|
|
1585
|
-
|
|
1586
|
-
class="pf-v5-c-options-menu__menu"
|
|
1587
|
-
role="menu"
|
|
1588
|
-
aria-labelledby="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-pagination-options-menu-toggle"
|
|
1589
|
-
hidden
|
|
1590
|
-
>
|
|
1591
|
-
<li role="none">
|
|
1592
|
-
<button
|
|
1593
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
1594
|
-
type="button"
|
|
1595
|
-
role="menuitem"
|
|
1596
|
-
>5 per page</button>
|
|
1597
|
-
</li>
|
|
1598
|
-
<li role="none">
|
|
1599
|
-
<button
|
|
1600
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
1601
|
-
type="button"
|
|
1602
|
-
role="menuitem"
|
|
1603
|
-
>
|
|
1604
|
-
10 per page
|
|
1605
|
-
<div class="pf-v5-c-options-menu__menu-item-icon">
|
|
1606
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1607
|
-
</div>
|
|
1608
|
-
</button>
|
|
1609
|
-
</li>
|
|
1610
|
-
<li role="none">
|
|
1611
|
-
<button
|
|
1612
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
1613
|
-
type="button"
|
|
1614
|
-
role="menuitem"
|
|
1615
|
-
>20 per page</button>
|
|
1616
|
-
</li>
|
|
1617
|
-
</ul>
|
|
1618
|
-
</div>
|
|
1514
|
+
</span>
|
|
1515
|
+
</span>
|
|
1516
|
+
</button>
|
|
1619
1517
|
<nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
|
|
1620
1518
|
<div class="pf-v5-c-pagination__nav-control pf-m-prev">
|
|
1621
1519
|
<button
|
|
@@ -1725,56 +1623,22 @@ section: components
|
|
|
1725
1623
|
<div
|
|
1726
1624
|
class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
|
|
1727
1625
|
>
|
|
1728
|
-
<
|
|
1729
|
-
|
|
1730
|
-
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
<
|
|
1737
|
-
|
|
1738
|
-
|
|
1739
|
-
|
|
1740
|
-
<div class="pf-v5-c-options-menu__toggle-icon">
|
|
1626
|
+
<button
|
|
1627
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
|
|
1628
|
+
type="button"
|
|
1629
|
+
aria-expanded="false"
|
|
1630
|
+
id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-pagination-menu-toggle"
|
|
1631
|
+
>
|
|
1632
|
+
<span class="pf-v5-c-menu-toggle__text">
|
|
1633
|
+
<b>1 - 10</b> of
|
|
1634
|
+
<b>36</b>
|
|
1635
|
+
</span>
|
|
1636
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
1637
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1741
1638
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1742
|
-
</
|
|
1743
|
-
</
|
|
1744
|
-
|
|
1745
|
-
class="pf-v5-c-options-menu__menu"
|
|
1746
|
-
role="menu"
|
|
1747
|
-
aria-labelledby="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-pagination-options-menu-toggle"
|
|
1748
|
-
hidden
|
|
1749
|
-
>
|
|
1750
|
-
<li role="none">
|
|
1751
|
-
<button
|
|
1752
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
1753
|
-
type="button"
|
|
1754
|
-
role="menuitem"
|
|
1755
|
-
>5 per page</button>
|
|
1756
|
-
</li>
|
|
1757
|
-
<li role="none">
|
|
1758
|
-
<button
|
|
1759
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
1760
|
-
type="button"
|
|
1761
|
-
role="menuitem"
|
|
1762
|
-
>
|
|
1763
|
-
10 per page
|
|
1764
|
-
<div class="pf-v5-c-options-menu__menu-item-icon">
|
|
1765
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1766
|
-
</div>
|
|
1767
|
-
</button>
|
|
1768
|
-
</li>
|
|
1769
|
-
<li role="none">
|
|
1770
|
-
<button
|
|
1771
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
1772
|
-
type="button"
|
|
1773
|
-
role="menuitem"
|
|
1774
|
-
>20 per page</button>
|
|
1775
|
-
</li>
|
|
1776
|
-
</ul>
|
|
1777
|
-
</div>
|
|
1639
|
+
</span>
|
|
1640
|
+
</span>
|
|
1641
|
+
</button>
|
|
1778
1642
|
<nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
|
|
1779
1643
|
<div class="pf-v5-c-pagination__nav-control pf-m-prev">
|
|
1780
1644
|
<button
|
|
@@ -2149,56 +2013,22 @@ section: components
|
|
|
2149
2013
|
<div
|
|
2150
2014
|
class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
|
|
2151
2015
|
>
|
|
2152
|
-
<
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
|
|
2159
|
-
|
|
2160
|
-
<
|
|
2161
|
-
|
|
2162
|
-
|
|
2163
|
-
|
|
2164
|
-
<div class="pf-v5-c-options-menu__toggle-icon">
|
|
2016
|
+
<button
|
|
2017
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
|
|
2018
|
+
type="button"
|
|
2019
|
+
aria-expanded="false"
|
|
2020
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-pagination-menu-toggle"
|
|
2021
|
+
>
|
|
2022
|
+
<span class="pf-v5-c-menu-toggle__text">
|
|
2023
|
+
<b>1 - 10</b> of
|
|
2024
|
+
<b>36</b>
|
|
2025
|
+
</span>
|
|
2026
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
2027
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
2165
2028
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2166
|
-
</
|
|
2167
|
-
</
|
|
2168
|
-
|
|
2169
|
-
class="pf-v5-c-options-menu__menu"
|
|
2170
|
-
role="menu"
|
|
2171
|
-
aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-pagination-options-menu-toggle"
|
|
2172
|
-
hidden
|
|
2173
|
-
>
|
|
2174
|
-
<li role="none">
|
|
2175
|
-
<button
|
|
2176
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
2177
|
-
type="button"
|
|
2178
|
-
role="menuitem"
|
|
2179
|
-
>5 per page</button>
|
|
2180
|
-
</li>
|
|
2181
|
-
<li role="none">
|
|
2182
|
-
<button
|
|
2183
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
2184
|
-
type="button"
|
|
2185
|
-
role="menuitem"
|
|
2186
|
-
>
|
|
2187
|
-
10 per page
|
|
2188
|
-
<div class="pf-v5-c-options-menu__menu-item-icon">
|
|
2189
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
2190
|
-
</div>
|
|
2191
|
-
</button>
|
|
2192
|
-
</li>
|
|
2193
|
-
<li role="none">
|
|
2194
|
-
<button
|
|
2195
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
2196
|
-
type="button"
|
|
2197
|
-
role="menuitem"
|
|
2198
|
-
>20 per page</button>
|
|
2199
|
-
</li>
|
|
2200
|
-
</ul>
|
|
2201
|
-
</div>
|
|
2029
|
+
</span>
|
|
2030
|
+
</span>
|
|
2031
|
+
</button>
|
|
2202
2032
|
<nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
|
|
2203
2033
|
<div class="pf-v5-c-pagination__nav-control pf-m-prev">
|
|
2204
2034
|
<button
|
|
@@ -2395,56 +2225,22 @@ section: components
|
|
|
2395
2225
|
<div
|
|
2396
2226
|
class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
|
|
2397
2227
|
>
|
|
2398
|
-
<
|
|
2399
|
-
|
|
2400
|
-
|
|
2401
|
-
|
|
2402
|
-
|
|
2403
|
-
|
|
2404
|
-
|
|
2405
|
-
|
|
2406
|
-
<
|
|
2407
|
-
|
|
2408
|
-
|
|
2409
|
-
|
|
2410
|
-
<div class="pf-v5-c-options-menu__toggle-icon">
|
|
2228
|
+
<button
|
|
2229
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
|
|
2230
|
+
type="button"
|
|
2231
|
+
aria-expanded="false"
|
|
2232
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-pagination-menu-toggle"
|
|
2233
|
+
>
|
|
2234
|
+
<span class="pf-v5-c-menu-toggle__text">
|
|
2235
|
+
<b>1 - 10</b> of
|
|
2236
|
+
<b>36</b>
|
|
2237
|
+
</span>
|
|
2238
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
2239
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
2411
2240
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2412
|
-
</
|
|
2413
|
-
</
|
|
2414
|
-
|
|
2415
|
-
class="pf-v5-c-options-menu__menu"
|
|
2416
|
-
role="menu"
|
|
2417
|
-
aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-pagination-options-menu-toggle"
|
|
2418
|
-
hidden
|
|
2419
|
-
>
|
|
2420
|
-
<li role="none">
|
|
2421
|
-
<button
|
|
2422
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
2423
|
-
type="button"
|
|
2424
|
-
role="menuitem"
|
|
2425
|
-
>5 per page</button>
|
|
2426
|
-
</li>
|
|
2427
|
-
<li role="none">
|
|
2428
|
-
<button
|
|
2429
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
2430
|
-
type="button"
|
|
2431
|
-
role="menuitem"
|
|
2432
|
-
>
|
|
2433
|
-
10 per page
|
|
2434
|
-
<div class="pf-v5-c-options-menu__menu-item-icon">
|
|
2435
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
2436
|
-
</div>
|
|
2437
|
-
</button>
|
|
2438
|
-
</li>
|
|
2439
|
-
<li role="none">
|
|
2440
|
-
<button
|
|
2441
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
2442
|
-
type="button"
|
|
2443
|
-
role="menuitem"
|
|
2444
|
-
>20 per page</button>
|
|
2445
|
-
</li>
|
|
2446
|
-
</ul>
|
|
2447
|
-
</div>
|
|
2241
|
+
</span>
|
|
2242
|
+
</span>
|
|
2243
|
+
</button>
|
|
2448
2244
|
<nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
|
|
2449
2245
|
<div class="pf-v5-c-pagination__nav-control pf-m-prev">
|
|
2450
2246
|
<button
|
|
@@ -3040,56 +2836,22 @@ section: components
|
|
|
3040
2836
|
<div
|
|
3041
2837
|
class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
|
|
3042
2838
|
>
|
|
3043
|
-
<
|
|
3044
|
-
|
|
3045
|
-
|
|
3046
|
-
|
|
3047
|
-
|
|
3048
|
-
|
|
3049
|
-
|
|
3050
|
-
|
|
3051
|
-
<
|
|
3052
|
-
|
|
3053
|
-
|
|
3054
|
-
|
|
3055
|
-
<div class="pf-v5-c-options-menu__toggle-icon">
|
|
2839
|
+
<button
|
|
2840
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
|
|
2841
|
+
type="button"
|
|
2842
|
+
aria-expanded="false"
|
|
2843
|
+
id="toolbar-pagination-management-example-toolbar-pagination-menu-toggle"
|
|
2844
|
+
>
|
|
2845
|
+
<span class="pf-v5-c-menu-toggle__text">
|
|
2846
|
+
<b>1 - 10</b> of
|
|
2847
|
+
<b>36</b>
|
|
2848
|
+
</span>
|
|
2849
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
2850
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
3056
2851
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
3057
|
-
</
|
|
3058
|
-
</
|
|
3059
|
-
|
|
3060
|
-
class="pf-v5-c-options-menu__menu"
|
|
3061
|
-
role="menu"
|
|
3062
|
-
aria-labelledby="toolbar-pagination-management-example-toolbar-pagination-options-menu-toggle"
|
|
3063
|
-
hidden
|
|
3064
|
-
>
|
|
3065
|
-
<li role="none">
|
|
3066
|
-
<button
|
|
3067
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
3068
|
-
type="button"
|
|
3069
|
-
role="menuitem"
|
|
3070
|
-
>5 per page</button>
|
|
3071
|
-
</li>
|
|
3072
|
-
<li role="none">
|
|
3073
|
-
<button
|
|
3074
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
3075
|
-
type="button"
|
|
3076
|
-
role="menuitem"
|
|
3077
|
-
>
|
|
3078
|
-
10 per page
|
|
3079
|
-
<div class="pf-v5-c-options-menu__menu-item-icon">
|
|
3080
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
3081
|
-
</div>
|
|
3082
|
-
</button>
|
|
3083
|
-
</li>
|
|
3084
|
-
<li role="none">
|
|
3085
|
-
<button
|
|
3086
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
3087
|
-
type="button"
|
|
3088
|
-
role="menuitem"
|
|
3089
|
-
>20 per page</button>
|
|
3090
|
-
</li>
|
|
3091
|
-
</ul>
|
|
3092
|
-
</div>
|
|
2852
|
+
</span>
|
|
2853
|
+
</span>
|
|
2854
|
+
</button>
|
|
3093
2855
|
<nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
|
|
3094
2856
|
<div class="pf-v5-c-pagination__nav-control pf-m-prev">
|
|
3095
2857
|
<button
|
|
@@ -3720,56 +3482,22 @@ section: components
|
|
|
3720
3482
|
</tbody>
|
|
3721
3483
|
</table>
|
|
3722
3484
|
<div class="pf-v5-c-pagination pf-m-bottom">
|
|
3723
|
-
<
|
|
3724
|
-
|
|
3725
|
-
|
|
3726
|
-
|
|
3727
|
-
|
|
3728
|
-
|
|
3729
|
-
|
|
3730
|
-
|
|
3731
|
-
<
|
|
3732
|
-
|
|
3733
|
-
|
|
3734
|
-
|
|
3735
|
-
<div class="pf-v5-c-options-menu__toggle-icon">
|
|
3485
|
+
<button
|
|
3486
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
|
|
3487
|
+
type="button"
|
|
3488
|
+
aria-expanded="false"
|
|
3489
|
+
id="pagination-menu-toggle-bottom-collapsed-example"
|
|
3490
|
+
>
|
|
3491
|
+
<span class="pf-v5-c-menu-toggle__text">
|
|
3492
|
+
<b>1 - 10</b> of
|
|
3493
|
+
<b>36</b>
|
|
3494
|
+
</span>
|
|
3495
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
3496
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
3736
3497
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
3737
|
-
</
|
|
3738
|
-
</
|
|
3739
|
-
|
|
3740
|
-
class="pf-v5-c-options-menu__menu pf-m-top"
|
|
3741
|
-
role="menu"
|
|
3742
|
-
aria-labelledby="pagination-options-menu-bottom-collapsed-example-toggle"
|
|
3743
|
-
hidden
|
|
3744
|
-
>
|
|
3745
|
-
<li role="none">
|
|
3746
|
-
<button
|
|
3747
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
3748
|
-
type="button"
|
|
3749
|
-
role="menuitem"
|
|
3750
|
-
>5 per page</button>
|
|
3751
|
-
</li>
|
|
3752
|
-
<li role="none">
|
|
3753
|
-
<button
|
|
3754
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
3755
|
-
type="button"
|
|
3756
|
-
role="menuitem"
|
|
3757
|
-
>
|
|
3758
|
-
10 per page
|
|
3759
|
-
<div class="pf-v5-c-options-menu__menu-item-icon">
|
|
3760
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
3761
|
-
</div>
|
|
3762
|
-
</button>
|
|
3763
|
-
</li>
|
|
3764
|
-
<li role="none">
|
|
3765
|
-
<button
|
|
3766
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
3767
|
-
type="button"
|
|
3768
|
-
role="menuitem"
|
|
3769
|
-
>20 per page</button>
|
|
3770
|
-
</li>
|
|
3771
|
-
</ul>
|
|
3772
|
-
</div>
|
|
3498
|
+
</span>
|
|
3499
|
+
</span>
|
|
3500
|
+
</button>
|
|
3773
3501
|
<nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
|
|
3774
3502
|
<div class="pf-v5-c-pagination__nav-control pf-m-first">
|
|
3775
3503
|
<button
|
|
@@ -1,11 +1,4 @@
|
|
|
1
|
-
.ws-core-u-display
|
|
2
|
-
.ws-core-u-display .pf-v5-u-display-block,
|
|
3
|
-
.ws-core-u-display .pf-v5-u-display-flex,
|
|
4
|
-
.ws-core-u-display .pf-v5-u-display-inline-flex,
|
|
5
|
-
.ws-core-u-display .pf-v5-u-display-grid,
|
|
6
|
-
.ws-core-u-display .pf-v5-u-display-inline,
|
|
7
|
-
.ws-core-u-display .pf-v5-u-display-table,
|
|
8
|
-
.ws-core-u-display .pf-v5-u-display-table-cell {
|
|
1
|
+
.ws-core-u-display [class*="pf-v5-u-display-"] {
|
|
9
2
|
padding: .5rem !important;
|
|
10
3
|
border: 2px dashed #393f44;
|
|
11
4
|
}
|
|
@@ -5,10 +5,10 @@ section: utility-classes
|
|
|
5
5
|
|
|
6
6
|
## Examples
|
|
7
7
|
|
|
8
|
-
### Inline
|
|
8
|
+
### Inline
|
|
9
9
|
|
|
10
10
|
```html
|
|
11
|
-
<div class="pf-v5-u-display-inline
|
|
11
|
+
<div class="pf-v5-u-display-inline">.pf-v5-u-display-inline</div>
|
|
12
12
|
|
|
13
13
|
```
|
|
14
14
|
|
|
@@ -19,6 +19,13 @@ section: utility-classes
|
|
|
19
19
|
|
|
20
20
|
```
|
|
21
21
|
|
|
22
|
+
### Inline block
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<div class="pf-v5-u-display-inline-block">.pf-v5-u-display-inline-block</div>
|
|
26
|
+
|
|
27
|
+
```
|
|
28
|
+
|
|
22
29
|
### Flex
|
|
23
30
|
|
|
24
31
|
```html
|
|
@@ -40,14 +47,14 @@ section: utility-classes
|
|
|
40
47
|
|
|
41
48
|
```
|
|
42
49
|
|
|
43
|
-
### Inline
|
|
50
|
+
### Inline grid
|
|
44
51
|
|
|
45
52
|
```html
|
|
46
|
-
<div class="pf-v5-u-display-inline">.pf-v5-u-display-inline</div>
|
|
53
|
+
<div class="pf-v5-u-display-inline-grid">.pf-v5-u-display-inline-grid</div>
|
|
47
54
|
|
|
48
55
|
```
|
|
49
56
|
|
|
50
|
-
### Table
|
|
57
|
+
### Table, table row, table cell
|
|
51
58
|
|
|
52
59
|
```html
|
|
53
60
|
<div class="pf-v5-u-display-table">
|
|
@@ -82,11 +89,13 @@ section: utility-classes
|
|
|
82
89
|
|
|
83
90
|
| Class | Applied to | Outcome |
|
|
84
91
|
| -- | -- | -- |
|
|
85
|
-
| `.pf-v5-u-display-inline-block{-on-[breakpoint]}` | `*` | Sets display: inline-block |
|
|
86
|
-
| `.pf-v5-u-display-block{-on-[breakpoint]}` | `*` | Sets display: block |
|
|
87
92
|
| `.pf-v5-u-display-inline{-on-[breakpoint]}` | `*` | Sets display: inline |
|
|
93
|
+
| `.pf-v5-u-display-block{-on-[breakpoint]}` | `*` | Sets display: block |
|
|
94
|
+
| `.pf-v5-u-display-inline-block{-on-[breakpoint]}` | `*` | Sets display: inline-block |
|
|
88
95
|
| `.pf-v5-u-display-flex{-on-[breakpoint]}` | `*` | Sets display: flex |
|
|
89
96
|
| `.pf-v5-u-display-inline-flex{-on-[breakpoint]}` | `*` | Sets display: inline-flex |
|
|
97
|
+
| `.pf-v5-u-display-grid{-on-[breakpoint]}` | `*` | Sets display: grid |
|
|
98
|
+
| `.pf-v5-u-display-inline-grid{-on-[breakpoint]}` | `*` | Sets display: inline-grid |
|
|
90
99
|
| `.pf-v5-u-display-table{-on-[breakpoint]}` | `*` | Sets display: table |
|
|
91
100
|
| `.pf-v5-u-display-table-row{-on-[breakpoint]}` | `*` | Sets display: table-row |
|
|
92
101
|
| `.pf-v5-u-display-table-cell{-on-[breakpoint]}` | `*` | Sets display: table-cell |
|