@patternfly/patternfly 4.176.1 → 4.177.1

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 (61) hide show
  1. package/UPGRADE-GUIDE.md +3 -0
  2. package/components/Avatar/avatar.css +224 -0
  3. package/components/Avatar/avatar.scss +18 -0
  4. package/components/CodeEditor/code-editor.css +8 -0
  5. package/components/CodeEditor/code-editor.scss +11 -1
  6. package/components/Dropdown/dropdown.css +10 -9
  7. package/components/Dropdown/dropdown.scss +17 -16
  8. package/components/Nav/nav.css +11 -0
  9. package/components/Nav/nav.scss +14 -0
  10. package/components/Table/table.css +2 -1
  11. package/components/Table/table.scss +8 -5
  12. package/docs/components/Avatar/examples/Avatar.md +53 -5
  13. package/docs/components/Brand/examples/Brand.md +6 -6
  14. package/docs/components/CodeEditor/examples/CodeEditor.md +71 -10
  15. package/docs/components/DataList/examples/DataList.md +11 -11
  16. package/docs/components/DescriptionList/examples/DescriptionList.md +19 -19
  17. package/docs/components/Divider/examples/Divider.md +2 -2
  18. package/docs/components/Drawer/examples/Drawer.md +27 -27
  19. package/docs/components/Dropdown/examples/Dropdown.md +2 -2
  20. package/docs/components/JumpLinks/examples/JumpLinks.md +19 -19
  21. package/docs/components/LogViewer/examples/LogViewer.md +28 -28
  22. package/docs/components/Masthead/examples/masthead.md +10 -10
  23. package/docs/components/Menu/examples/Menu.md +45 -44
  24. package/docs/components/Nav/examples/Navigation.md +23 -44
  25. package/docs/components/Page/examples/Page.md +4 -4
  26. package/docs/components/Pagination/examples/Pagination.md +2 -2
  27. package/docs/components/Sidebar/examples/Sidebar.md +14 -14
  28. package/docs/components/Table/examples/Table.md +20 -9
  29. package/docs/components/Tabs/examples/Tabs.md +27 -27
  30. package/docs/components/Toolbar/examples/Toolbar.md +31 -31
  31. package/docs/demos/Alert/examples/Alert.md +1 -2
  32. package/docs/demos/BackToTop/examples/BackToTop.md +1 -202
  33. package/docs/demos/Card/examples/Card.md +42 -14
  34. package/docs/demos/ContextSelector/examples/ContextSelector.md +1166 -17
  35. package/docs/demos/Drawer/examples/Drawer.md +3 -3
  36. package/docs/demos/JumpLinks/examples/JumpLinks.md +4 -8
  37. package/docs/demos/Masthead/examples/Masthead.md +14 -6
  38. package/docs/demos/Nav/examples/Nav.md +8 -9
  39. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
  40. package/docs/demos/Page/examples/Page.md +4004 -989
  41. package/docs/demos/Table/examples/Table.md +16516 -12176
  42. package/docs/demos/Tabs/examples/Tabs.md +0 -94
  43. package/docs/demos/Toolbar/examples/Toolbar.md +1 -2
  44. package/docs/demos/Wizard/examples/Wizard.md +2 -2
  45. package/docs/layouts/Flex/examples/Flex.md +1 -1
  46. package/docs/layouts/Gallery/examples/Gallery.md +2 -2
  47. package/docs/layouts/Grid/examples/Grid.md +9 -9
  48. package/docs/utilities/Accessibility/examples/Accessibility.md +1 -1
  49. package/docs/utilities/Alignment/examples/Alignment.md +1 -1
  50. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +1 -1
  51. package/docs/utilities/Display/examples/Display.md +1 -1
  52. package/docs/utilities/Flex/examples/Flex.md +1 -1
  53. package/docs/utilities/Float/examples/Float.md +1 -1
  54. package/docs/utilities/Sizing/examples/Sizing.md +12 -0
  55. package/docs/utilities/Spacing/examples/Spacing.md +1 -1
  56. package/docs/utilities/Text/examples/Text.md +1 -1
  57. package/package.json +1 -1
  58. package/patternfly-no-reset.css +255 -10
  59. package/patternfly.css +255 -10
  60. package/patternfly.min.css +1 -1
  61. package/patternfly.min.css.map +1 -1
package/docs/components/Nav/examples/Navigation.md CHANGED
@@ -854,7 +854,7 @@ cssPrefix: pf-c-nav
854
854
  <div class="pf-c-menu">
855
855
  <div class="pf-c-menu__content">
856
856
  <ul class="pf-c-menu__list">
857
- <li class="pf-c-menu__list-item">
857
+ <li class="pf-c-menu__list-item pf-m-drill-up">
858
858
  <button class="pf-c-menu__item" type="button" tabindex="0">
859
859
  <span class="pf-c-menu__item-main">
860
860
  <span class="pf-c-menu__item-toggle-icon">
@@ -864,7 +864,6 @@ cssPrefix: pf-c-nav
864
864
  </span>
865
865
  </button>
866
866
  </li>
867
- <li class="pf-c-divider" role="separator"></li>
868
867
  <li class="pf-c-menu__list-item">
869
868
  <button
870
869
  class="pf-c-menu__item"
@@ -881,7 +880,7 @@ cssPrefix: pf-c-nav
881
880
  <div class="pf-c-menu">
882
881
  <div class="pf-c-menu__content">
883
882
  <ul class="pf-c-menu__list">
884
- <li class="pf-c-menu__list-item">
883
+ <li class="pf-c-menu__list-item pf-m-drill-up">
885
884
  <button
886
885
  class="pf-c-menu__item"
887
886
  type="button"
@@ -895,7 +894,6 @@ cssPrefix: pf-c-nav
895
894
  </span>
896
895
  </button>
897
896
  </li>
898
- <li class="pf-c-divider" role="separator"></li>
899
897
  <li class="pf-c-menu__list-item">
900
898
  <button class="pf-c-menu__item" type="button">
901
899
  <span class="pf-c-menu__item-main">
@@ -935,7 +933,7 @@ cssPrefix: pf-c-nav
935
933
  <div class="pf-c-menu">
936
934
  <div class="pf-c-menu__content">
937
935
  <ul class="pf-c-menu__list">
938
- <li class="pf-c-menu__list-item">
936
+ <li class="pf-c-menu__list-item pf-m-drill-up">
939
937
  <button
940
938
  class="pf-c-menu__item"
941
939
  type="button"
@@ -951,7 +949,6 @@ cssPrefix: pf-c-nav
951
949
  </span>
952
950
  </button>
953
951
  </li>
954
- <li class="pf-c-divider" role="separator"></li>
955
952
  <li class="pf-c-menu__list-item">
956
953
  <button class="pf-c-menu__item" type="button">
957
954
  <span class="pf-c-menu__item-main">
@@ -999,7 +996,7 @@ cssPrefix: pf-c-nav
999
996
  <div class="pf-c-menu">
1000
997
  <div class="pf-c-menu__content">
1001
998
  <ul class="pf-c-menu__list">
1002
- <li class="pf-c-menu__list-item">
999
+ <li class="pf-c-menu__list-item pf-m-drill-up">
1003
1000
  <button class="pf-c-menu__item" type="button">
1004
1001
  <span class="pf-c-menu__item-main">
1005
1002
  <span class="pf-c-menu__item-toggle-icon">
@@ -1009,7 +1006,6 @@ cssPrefix: pf-c-nav
1009
1006
  </span>
1010
1007
  </button>
1011
1008
  </li>
1012
- <li class="pf-c-divider" role="separator"></li>
1013
1009
  <li class="pf-c-menu__list-item">
1014
1010
  <button class="pf-c-menu__item" type="button">
1015
1011
  <span class="pf-c-menu__item-main">
@@ -1060,7 +1056,7 @@ cssPrefix: pf-c-nav
1060
1056
  <div class="pf-c-menu">
1061
1057
  <div class="pf-c-menu__content">
1062
1058
  <ul class="pf-c-menu__list">
1063
- <li class="pf-c-menu__list-item">
1059
+ <li class="pf-c-menu__list-item pf-m-drill-up">
1064
1060
  <button class="pf-c-menu__item" type="button">
1065
1061
  <span class="pf-c-menu__item-main">
1066
1062
  <span class="pf-c-menu__item-toggle-icon">
@@ -1070,7 +1066,6 @@ cssPrefix: pf-c-nav
1070
1066
  </span>
1071
1067
  </button>
1072
1068
  </li>
1073
- <li class="pf-c-divider" role="separator"></li>
1074
1069
  <li class="pf-c-menu__list-item">
1075
1070
  <button
1076
1071
  class="pf-c-menu__item"
@@ -1087,7 +1082,7 @@ cssPrefix: pf-c-nav
1087
1082
  <div class="pf-c-menu">
1088
1083
  <div class="pf-c-menu__content">
1089
1084
  <ul class="pf-c-menu__list">
1090
- <li class="pf-c-menu__list-item">
1085
+ <li class="pf-c-menu__list-item pf-m-drill-up">
1091
1086
  <button class="pf-c-menu__item" type="button">
1092
1087
  <span class="pf-c-menu__item-main">
1093
1088
  <span class="pf-c-menu__item-toggle-icon">
@@ -1097,7 +1092,6 @@ cssPrefix: pf-c-nav
1097
1092
  </span>
1098
1093
  </button>
1099
1094
  </li>
1100
- <li class="pf-c-divider" role="separator"></li>
1101
1095
  <li class="pf-c-menu__list-item">
1102
1096
  <button class="pf-c-menu__item" type="button">
1103
1097
  <span class="pf-c-menu__item-main">
@@ -1162,7 +1156,7 @@ cssPrefix: pf-c-nav
1162
1156
  <div class="pf-c-menu">
1163
1157
  <div class="pf-c-menu__content">
1164
1158
  <ul class="pf-c-menu__list">
1165
- <li class="pf-c-menu__list-item">
1159
+ <li class="pf-c-menu__list-item pf-m-drill-up">
1166
1160
  <button class="pf-c-menu__item" type="button">
1167
1161
  <span class="pf-c-menu__item-main">
1168
1162
  <span class="pf-c-menu__item-toggle-icon">
@@ -1174,7 +1168,6 @@ cssPrefix: pf-c-nav
1174
1168
  </span>
1175
1169
  </button>
1176
1170
  </li>
1177
- <li class="pf-c-divider" role="separator"></li>
1178
1171
  <li class="pf-c-menu__list-item">
1179
1172
  <button class="pf-c-menu__item" type="button">
1180
1173
  <span class="pf-c-menu__item-main">
@@ -1211,7 +1204,7 @@ cssPrefix: pf-c-nav
1211
1204
  <div class="pf-c-menu pf-m-drilldown pf-m-drilled-in">
1212
1205
  <div
1213
1206
  class="pf-c-menu__content"
1214
- style="--pf-c-menu__content--Height: 226px;"
1207
+ style="--pf-c-menu__content--Height: 228px;"
1215
1208
  >
1216
1209
  <ul class="pf-c-menu__list">
1217
1210
  <li class="pf-c-menu__list-item">
@@ -1254,7 +1247,7 @@ cssPrefix: pf-c-nav
1254
1247
  <div class="pf-c-menu">
1255
1248
  <div class="pf-c-menu__content">
1256
1249
  <ul class="pf-c-menu__list">
1257
- <li class="pf-c-menu__list-item">
1250
+ <li class="pf-c-menu__list-item pf-m-drill-up">
1258
1251
  <button class="pf-c-menu__item" type="button" tabindex="0">
1259
1252
  <span class="pf-c-menu__item-main">
1260
1253
  <span class="pf-c-menu__item-toggle-icon">
@@ -1264,7 +1257,6 @@ cssPrefix: pf-c-nav
1264
1257
  </span>
1265
1258
  </button>
1266
1259
  </li>
1267
- <li class="pf-c-divider" role="separator"></li>
1268
1260
  <li class="pf-c-menu__list-item">
1269
1261
  <button
1270
1262
  class="pf-c-menu__item"
@@ -1281,7 +1273,7 @@ cssPrefix: pf-c-nav
1281
1273
  <div class="pf-c-menu">
1282
1274
  <div class="pf-c-menu__content">
1283
1275
  <ul class="pf-c-menu__list">
1284
- <li class="pf-c-menu__list-item">
1276
+ <li class="pf-c-menu__list-item pf-m-drill-up">
1285
1277
  <button
1286
1278
  class="pf-c-menu__item"
1287
1279
  type="button"
@@ -1295,7 +1287,6 @@ cssPrefix: pf-c-nav
1295
1287
  </span>
1296
1288
  </button>
1297
1289
  </li>
1298
- <li class="pf-c-divider" role="separator"></li>
1299
1290
  <li class="pf-c-menu__list-item">
1300
1291
  <button class="pf-c-menu__item" type="button">
1301
1292
  <span class="pf-c-menu__item-main">
@@ -1335,7 +1326,7 @@ cssPrefix: pf-c-nav
1335
1326
  <div class="pf-c-menu">
1336
1327
  <div class="pf-c-menu__content">
1337
1328
  <ul class="pf-c-menu__list">
1338
- <li class="pf-c-menu__list-item">
1329
+ <li class="pf-c-menu__list-item pf-m-drill-up">
1339
1330
  <button
1340
1331
  class="pf-c-menu__item"
1341
1332
  type="button"
@@ -1351,7 +1342,6 @@ cssPrefix: pf-c-nav
1351
1342
  </span>
1352
1343
  </button>
1353
1344
  </li>
1354
- <li class="pf-c-divider" role="separator"></li>
1355
1345
  <li class="pf-c-menu__list-item">
1356
1346
  <button class="pf-c-menu__item" type="button">
1357
1347
  <span class="pf-c-menu__item-main">
@@ -1399,7 +1389,7 @@ cssPrefix: pf-c-nav
1399
1389
  <div class="pf-c-menu">
1400
1390
  <div class="pf-c-menu__content">
1401
1391
  <ul class="pf-c-menu__list">
1402
- <li class="pf-c-menu__list-item">
1392
+ <li class="pf-c-menu__list-item pf-m-drill-up">
1403
1393
  <button class="pf-c-menu__item" type="button">
1404
1394
  <span class="pf-c-menu__item-main">
1405
1395
  <span class="pf-c-menu__item-toggle-icon">
@@ -1409,7 +1399,6 @@ cssPrefix: pf-c-nav
1409
1399
  </span>
1410
1400
  </button>
1411
1401
  </li>
1412
- <li class="pf-c-divider" role="separator"></li>
1413
1402
  <li class="pf-c-menu__list-item">
1414
1403
  <button class="pf-c-menu__item" type="button">
1415
1404
  <span class="pf-c-menu__item-main">
@@ -1460,7 +1449,7 @@ cssPrefix: pf-c-nav
1460
1449
  <div class="pf-c-menu">
1461
1450
  <div class="pf-c-menu__content">
1462
1451
  <ul class="pf-c-menu__list">
1463
- <li class="pf-c-menu__list-item">
1452
+ <li class="pf-c-menu__list-item pf-m-drill-up">
1464
1453
  <button class="pf-c-menu__item" type="button">
1465
1454
  <span class="pf-c-menu__item-main">
1466
1455
  <span class="pf-c-menu__item-toggle-icon">
@@ -1470,7 +1459,6 @@ cssPrefix: pf-c-nav
1470
1459
  </span>
1471
1460
  </button>
1472
1461
  </li>
1473
- <li class="pf-c-divider" role="separator"></li>
1474
1462
  <li class="pf-c-menu__list-item">
1475
1463
  <button
1476
1464
  class="pf-c-menu__item"
@@ -1487,7 +1475,7 @@ cssPrefix: pf-c-nav
1487
1475
  <div class="pf-c-menu">
1488
1476
  <div class="pf-c-menu__content">
1489
1477
  <ul class="pf-c-menu__list">
1490
- <li class="pf-c-menu__list-item">
1478
+ <li class="pf-c-menu__list-item pf-m-drill-up">
1491
1479
  <button class="pf-c-menu__item" type="button">
1492
1480
  <span class="pf-c-menu__item-main">
1493
1481
  <span class="pf-c-menu__item-toggle-icon">
@@ -1497,7 +1485,6 @@ cssPrefix: pf-c-nav
1497
1485
  </span>
1498
1486
  </button>
1499
1487
  </li>
1500
- <li class="pf-c-divider" role="separator"></li>
1501
1488
  <li class="pf-c-menu__list-item">
1502
1489
  <button class="pf-c-menu__item" type="button">
1503
1490
  <span class="pf-c-menu__item-main">
@@ -1562,7 +1549,7 @@ cssPrefix: pf-c-nav
1562
1549
  <div class="pf-c-menu">
1563
1550
  <div class="pf-c-menu__content">
1564
1551
  <ul class="pf-c-menu__list">
1565
- <li class="pf-c-menu__list-item">
1552
+ <li class="pf-c-menu__list-item pf-m-drill-up">
1566
1553
  <button class="pf-c-menu__item" type="button">
1567
1554
  <span class="pf-c-menu__item-main">
1568
1555
  <span class="pf-c-menu__item-toggle-icon">
@@ -1574,7 +1561,6 @@ cssPrefix: pf-c-nav
1574
1561
  </span>
1575
1562
  </button>
1576
1563
  </li>
1577
- <li class="pf-c-divider" role="separator"></li>
1578
1564
  <li class="pf-c-menu__list-item">
1579
1565
  <button class="pf-c-menu__item" type="button">
1580
1566
  <span class="pf-c-menu__item-main">
@@ -1611,7 +1597,7 @@ cssPrefix: pf-c-nav
1611
1597
  <div class="pf-c-menu pf-m-drilldown pf-m-drilled-in">
1612
1598
  <div
1613
1599
  class="pf-c-menu__content"
1614
- style="--pf-c-menu__content--Height: 282px;"
1600
+ style="--pf-c-menu__content--Height: 284px;"
1615
1601
  >
1616
1602
  <ul class="pf-c-menu__list">
1617
1603
  <li class="pf-c-menu__list-item">
@@ -1654,7 +1640,7 @@ cssPrefix: pf-c-nav
1654
1640
  <div class="pf-c-menu pf-m-drilled-in">
1655
1641
  <div class="pf-c-menu__content">
1656
1642
  <ul class="pf-c-menu__list">
1657
- <li class="pf-c-menu__list-item">
1643
+ <li class="pf-c-menu__list-item pf-m-drill-up">
1658
1644
  <button class="pf-c-menu__item" type="button" tabindex="0">
1659
1645
  <span class="pf-c-menu__item-main">
1660
1646
  <span class="pf-c-menu__item-toggle-icon">
@@ -1664,7 +1650,6 @@ cssPrefix: pf-c-nav
1664
1650
  </span>
1665
1651
  </button>
1666
1652
  </li>
1667
- <li class="pf-c-divider" role="separator"></li>
1668
1653
  <li class="pf-c-menu__list-item pf-m-current-path">
1669
1654
  <button
1670
1655
  class="pf-c-menu__item"
@@ -1681,7 +1666,7 @@ cssPrefix: pf-c-nav
1681
1666
  <div class="pf-c-menu">
1682
1667
  <div class="pf-c-menu__content">
1683
1668
  <ul class="pf-c-menu__list">
1684
- <li class="pf-c-menu__list-item">
1669
+ <li class="pf-c-menu__list-item pf-m-drill-up">
1685
1670
  <button
1686
1671
  class="pf-c-menu__item"
1687
1672
  type="button"
@@ -1695,7 +1680,6 @@ cssPrefix: pf-c-nav
1695
1680
  </span>
1696
1681
  </button>
1697
1682
  </li>
1698
- <li class="pf-c-divider" role="separator"></li>
1699
1683
  <li class="pf-c-menu__list-item">
1700
1684
  <button class="pf-c-menu__item" type="button">
1701
1685
  <span class="pf-c-menu__item-main">
@@ -1735,7 +1719,7 @@ cssPrefix: pf-c-nav
1735
1719
  <div class="pf-c-menu">
1736
1720
  <div class="pf-c-menu__content">
1737
1721
  <ul class="pf-c-menu__list">
1738
- <li class="pf-c-menu__list-item">
1722
+ <li class="pf-c-menu__list-item pf-m-drill-up">
1739
1723
  <button
1740
1724
  class="pf-c-menu__item"
1741
1725
  type="button"
@@ -1751,7 +1735,6 @@ cssPrefix: pf-c-nav
1751
1735
  </span>
1752
1736
  </button>
1753
1737
  </li>
1754
- <li class="pf-c-divider" role="separator"></li>
1755
1738
  <li class="pf-c-menu__list-item">
1756
1739
  <button class="pf-c-menu__item" type="button">
1757
1740
  <span class="pf-c-menu__item-main">
@@ -1799,7 +1782,7 @@ cssPrefix: pf-c-nav
1799
1782
  <div class="pf-c-menu">
1800
1783
  <div class="pf-c-menu__content">
1801
1784
  <ul class="pf-c-menu__list">
1802
- <li class="pf-c-menu__list-item">
1785
+ <li class="pf-c-menu__list-item pf-m-drill-up">
1803
1786
  <button class="pf-c-menu__item" type="button">
1804
1787
  <span class="pf-c-menu__item-main">
1805
1788
  <span class="pf-c-menu__item-toggle-icon">
@@ -1809,7 +1792,6 @@ cssPrefix: pf-c-nav
1809
1792
  </span>
1810
1793
  </button>
1811
1794
  </li>
1812
- <li class="pf-c-divider" role="separator"></li>
1813
1795
  <li class="pf-c-menu__list-item">
1814
1796
  <button class="pf-c-menu__item" type="button">
1815
1797
  <span class="pf-c-menu__item-main">
@@ -1860,7 +1842,7 @@ cssPrefix: pf-c-nav
1860
1842
  <div class="pf-c-menu">
1861
1843
  <div class="pf-c-menu__content">
1862
1844
  <ul class="pf-c-menu__list">
1863
- <li class="pf-c-menu__list-item">
1845
+ <li class="pf-c-menu__list-item pf-m-drill-up">
1864
1846
  <button class="pf-c-menu__item" type="button">
1865
1847
  <span class="pf-c-menu__item-main">
1866
1848
  <span class="pf-c-menu__item-toggle-icon">
@@ -1870,7 +1852,6 @@ cssPrefix: pf-c-nav
1870
1852
  </span>
1871
1853
  </button>
1872
1854
  </li>
1873
- <li class="pf-c-divider" role="separator"></li>
1874
1855
  <li class="pf-c-menu__list-item">
1875
1856
  <button
1876
1857
  class="pf-c-menu__item"
@@ -1887,7 +1868,7 @@ cssPrefix: pf-c-nav
1887
1868
  <div class="pf-c-menu">
1888
1869
  <div class="pf-c-menu__content">
1889
1870
  <ul class="pf-c-menu__list">
1890
- <li class="pf-c-menu__list-item">
1871
+ <li class="pf-c-menu__list-item pf-m-drill-up">
1891
1872
  <button class="pf-c-menu__item" type="button">
1892
1873
  <span class="pf-c-menu__item-main">
1893
1874
  <span class="pf-c-menu__item-toggle-icon">
@@ -1897,7 +1878,6 @@ cssPrefix: pf-c-nav
1897
1878
  </span>
1898
1879
  </button>
1899
1880
  </li>
1900
- <li class="pf-c-divider" role="separator"></li>
1901
1881
  <li class="pf-c-menu__list-item">
1902
1882
  <button class="pf-c-menu__item" type="button">
1903
1883
  <span class="pf-c-menu__item-main">
@@ -1962,7 +1942,7 @@ cssPrefix: pf-c-nav
1962
1942
  <div class="pf-c-menu">
1963
1943
  <div class="pf-c-menu__content">
1964
1944
  <ul class="pf-c-menu__list">
1965
- <li class="pf-c-menu__list-item">
1945
+ <li class="pf-c-menu__list-item pf-m-drill-up">
1966
1946
  <button class="pf-c-menu__item" type="button">
1967
1947
  <span class="pf-c-menu__item-main">
1968
1948
  <span class="pf-c-menu__item-toggle-icon">
@@ -1974,7 +1954,6 @@ cssPrefix: pf-c-nav
1974
1954
  </span>
1975
1955
  </button>
1976
1956
  </li>
1977
- <li class="pf-c-divider" role="separator"></li>
1978
1957
  <li class="pf-c-menu__list-item">
1979
1958
  <button class="pf-c-menu__item" type="button">
1980
1959
  <span class="pf-c-menu__item-main">
package/docs/components/Page/examples/Page.md CHANGED
@@ -205,12 +205,12 @@ This component provides the basic chrome for a page, including sidebar, header,
205
205
  | `.pf-m-light` | `.pf-c-page__main-section` | Modifies a main page section to have a light theme. |
206
206
  | `.pf-m-dark-200` | `.pf-c-page__main-section` | Modifies a main page section to have a dark theme and a dark transparent background. |
207
207
  | `.pf-m-dark-100` | `.pf-c-page__main-section` | Modifies a main page section to have a dark theme and a darker transparent background. |
208
- | `.pf-m-no-padding`, `.pf-m-no-padding{-on-[breakpoint]}` | `.pf-c-page__main-section` | Removes padding from the main page section at an optional breakpoint |
209
- | `.pf-m-padding{-on-[breakpoint]}` | `.pf-c-page__main-section` | Modifies the main page section to add padding back in at a specified breakpoint. Should be used with pf-m-no-padding. |
208
+ | `.pf-m-no-padding`, `.pf-m-no-padding{-on-[breakpoint]}` | `.pf-c-page__main-section` | Removes padding from the main page section at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
209
+ | `.pf-m-padding{-on-[breakpoint]}` | `.pf-c-page__main-section` | Modifies the main page section to add padding back in at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). Should be used with pf-m-no-padding. |
210
210
  | `.pf-m-fill` | `.pf-c-page__main-section` | Modifies a main page section to grow to fill the available vertical space. |
211
211
  | `.pf-m-no-fill` | `.pf-c-page__main-section` | Modifies a main page section to not grow to fill the available vertical space. |
212
- | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-page__header-tools-group`, `.pf-c-page__header-tools-item` | Hides a header tools group or item at a specified breakpoint, or hides it at all breakpoints with `.pf-m-hidden`. |
213
- | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-page__header-tools-group`, `.pf-c-page__header-tools-item` | Shows a header tools group or item at a specified breakpoint. |
212
+ | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-page__header-tools-group`, `.pf-c-page__header-tools-item` | Hides a header tools group or item at an optional breakpoint, or hides it at all [breakpoints](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) with `.pf-m-hidden`. |
213
+ | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-page__header-tools-group`, `.pf-c-page__header-tools-item` | Shows a header tools group or item at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
214
214
  | `.pf-m-limit-width` | `.pf-c-page__main-section` | Modifies a page section to limit the `max-width` of the content inside. |
215
215
  | `.pf-m-align-center` | `.pf-c-page__main-section.pf-m-limit-width` | Modifies a page section body to align center. |
216
216
  | `.pf-m-sticky-top` | `.pf-c-page__main-*` | Modifies a section/group to be sticky to the top of its container. |
package/docs/components/Pagination/examples/Pagination.md CHANGED
@@ -1213,8 +1213,8 @@ Note: `<button>` or `<a>` elements can be used in `.pf-c-pagination__nav-page-se
1213
1213
  | `.pf-c-pagination__nav` | `<nav>` | Initiates pagination nav. |
1214
1214
  | `.pf-c-pagination__nav-control` | `<div>` | Initiates pagination nav control. |
1215
1215
  | `.pf-c-pagination__nav-page-select` | `<div>` | Initiates pagination nav page select. |
1216
- | `.pf-m-display-summary{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies for summary display pagination component styles. |
1217
- | `.pf-m-display-full{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies for full display pagination component styles. |
1216
+ | `.pf-m-display-summary{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies for summary display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
1217
+ | `.pf-m-display-full{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies for full display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
1218
1218
  | `.pf-m-bottom` | `.pf-c-pagination` | Modifies for bottom pagination component styles. |
1219
1219
  | `.pf-m-compact` | `.pf-c-pagination` | Modifies for compact pagination component styles. |
1220
1220
  | `.pf-m-static` | `.pf-c-pagination.pf-m-bottom` | Modifies bottom pagination to not be positioned sticky on summary. |
package/docs/components/Sidebar/examples/Sidebar.md CHANGED
@@ -179,17 +179,17 @@ cssPrefix: pf-c-sidebar
179
179
 
180
180
  ### Usage
181
181
 
182
- | Class | Applied to | Outcome |
183
- | ------------------------------------------------------------------ | --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
184
- | `.pf-c-sidebar` | `<div>` | Initiates the sidebar component. **Required** |
185
- | `.pf-c-sidebar__main` | `<div>` | Initiates the sidebar main element. **Required** |
186
- | `.pf-c-sidebar__panel` | `<div>` | Initiates the sidebar panel element. **Required** |
187
- | `.pf-c-sidebar__content` | `<div>` | Initiates the sidebar content element. **Required** |
188
- | `.pf-m-gutter` | `.pf-c-sidebar` | Modifies the sidebar component to add a gutter between the panel and content. |
189
- | `.pf-m-stack` | `.pf-c-sidebar` | Modifies the sidebar to stack the panel on top of the content. |
190
- | `.pf-m-split` | `.pf-c-sidebar` | Modifies the sidebar to position the panel and content side by side. |
191
- | `.pf-m-panel-right` | `.pf-c-sidebar` | Modifies the sidebar to place the panel to the right of the content. |
192
- | `.pf-m-sticky` | `.pf-c-sidebar__panel` | Modifies the panel to be sticky to the top of the layout. |
193
- | `.pf-m-static` | `.pf-c-sidebar__panel` | Modifies the panel to be positioned statically. |
194
- | `.pf-m-width-{default, 25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-c-sidebar__panel` | Modifies the panel width. **Note:** does not apply when the panel is stacked on top of the content. |
195
- | `.pf-m-no-background` | `.pf-c-sidebar`, `.pf-c-sidebar__panel, .pf-c-sidebar__content` | Modifies the element to have a transparent background. |
182
+ | Class | Applied to | Outcome |
183
+ | ------------------------------------------------------------------ | --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
184
+ | `.pf-c-sidebar` | `<div>` | Initiates the sidebar component. **Required** |
185
+ | `.pf-c-sidebar__main` | `<div>` | Initiates the sidebar main element. **Required** |
186
+ | `.pf-c-sidebar__panel` | `<div>` | Initiates the sidebar panel element. **Required** |
187
+ | `.pf-c-sidebar__content` | `<div>` | Initiates the sidebar content element. **Required** |
188
+ | `.pf-m-gutter` | `.pf-c-sidebar` | Modifies the sidebar component to add a gutter between the panel and content. |
189
+ | `.pf-m-stack` | `.pf-c-sidebar` | Modifies the sidebar to stack the panel on top of the content. |
190
+ | `.pf-m-split` | `.pf-c-sidebar` | Modifies the sidebar to position the panel and content side by side. |
191
+ | `.pf-m-panel-right` | `.pf-c-sidebar` | Modifies the sidebar to place the panel to the right of the content. |
192
+ | `.pf-m-sticky` | `.pf-c-sidebar__panel` | Modifies the panel to be sticky to the top of the layout. |
193
+ | `.pf-m-static` | `.pf-c-sidebar__panel` | Modifies the panel to be positioned statically. |
194
+ | `.pf-m-width-{default, 25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-c-sidebar__panel` | Modifies the panel width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** does not apply when the panel is stacked on top of the content. |
195
+ | `.pf-m-no-background` | `.pf-c-sidebar`, `.pf-c-sidebar__panel, .pf-c-sidebar__content` | Modifies the element to have a transparent background. |
package/docs/components/Table/examples/Table.md CHANGED
@@ -87,10 +87,10 @@ cssPrefix: pf-c-table
87
87
 
88
88
  These classes can be used to ensure that the table changes between the tabular and grid-based layout at an appropriate screen width.
89
89
 
90
- | Class | Applied to | Outcome |
91
- | ------------------------------------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
92
- | `.pf-m-grid-md`, `.pf-m-grid-lg`, `.pf-m-grid-xl`, `.pf-m-grid-2xl` | `.pf-c-table` | Changes tabular layout to responsive, grid based layout at suffixed breakpoint. |
93
- | `.pf-m-grid` | `.pf-c-table` | Changes tabular layout to responsive, grid based layout. This approach requires JavaScript to set this class at some prescribed viewport width value. |
90
+ | Class | Applied to | Outcome |
91
+ | ------------------------------------------------------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
92
+ | `.pf-m-grid-md`, `.pf-m-grid-lg`, `.pf-m-grid-xl`, `.pf-m-grid-2xl` | `.pf-c-table` | Changes tabular layout to responsive, grid based layout at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
93
+ | `.pf-m-grid` | `.pf-c-table` | Changes tabular layout to responsive, grid based layout. This approach requires JavaScript to set this class at some prescribed viewport width value. |
94
94
 
95
95
  ## Sortable
96
96
 
@@ -5644,7 +5644,18 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
5644
5644
  >
5645
5645
  <thead>
5646
5646
  <tr role="row">
5647
- <td></td>
5647
+ <td class="pf-c-table__toggle" role="cell">
5648
+ <button
5649
+ class="pf-c-button pf-m-plain"
5650
+ id="table-compact-expandable-expandable-toggle-thead"
5651
+ aria-label="Expand all"
5652
+ >
5653
+ <div class="pf-c-table__toggle-icon">
5654
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
5655
+ </div>
5656
+ </button>
5657
+ </td>
5658
+
5648
5659
  <td class="pf-c-table__check" role="cell">
5649
5660
  <label>
5650
5661
  <input
@@ -19545,10 +19556,10 @@ Width modifiers control the width of the columns. To control the responsive beha
19545
19556
 
19546
19557
  ### Hidden/visible breakpoint modifiers usage
19547
19558
 
19548
- | Class | Applied to | Outcome |
19549
- | --------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
19550
- | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-table tr > *` | Hides a table cell at a given breakpoint, or hides it at all breakpoints with `.pf-m-hidden`. **Note: Needs to apply to all cells in the column you want to hide.** |
19551
- | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-table tr > *` | Shows a table cell at a given breakpoint. |
19559
+ | Class | Applied to | Outcome |
19560
+ | --------------------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
19561
+ | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-table tr > *` | Hides a table cell at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes), or hides it at all breakpoints with `.pf-m-hidden`. **Note: Needs to apply to all cells in the column you want to hide.** |
19562
+ | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-table tr > *` | Shows a table cell at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
19552
19563
 
19553
19564
  ## Text control modifiers
19554
19565
 
package/docs/components/Tabs/examples/Tabs.md CHANGED
@@ -1895,30 +1895,30 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
1895
1895
 
1896
1896
  ### Usage
1897
1897
 
1898
- | Class | Applied to | Outcome |
1899
- | ---------------------------------------------------------------- | ------------------- | --------------------------------------------------------------------------------------------------- |
1900
- | `.pf-c-tabs` | `<nav>`, `<div>` | Initiates the tabs component. **Required** |
1901
- | `.pf-c-tabs__list` | `<ul>` | Initiates a tabs component list. **Required** |
1902
- | `.pf-c-tabs__item` | `<li>` | Initiates a tabs component item. **Required** |
1903
- | `.pf-c-tabs__item-text` | `<span>` | Initiates a tabs component item icon. **Required** |
1904
- | `.pf-c-tabs__item-icon` | `<span>` | Initiates a tabs component item text. **Required** |
1905
- | `.pf-c-tabs__link` | `<button>`, `<a>` | Initiates a tabs component link. **Required** |
1906
- | `.pf-c-tabs__scroll-button` | `<button>` | Initiates a tabs component scroll button. |
1907
- | `.pf-c-tabs__toggle` | `<div>` | Initiates a tabs expandable toggle. |
1908
- | `.pf-c-tabs__toggle-button` | `<button>` | Initiates a tabs expandable toggle button. |
1909
- | `.pf-c-tabs__toggle-icon` | `<span>` | Initiates a tabs expandable toggle icon. |
1910
- | `.pf-c-tabs__toggle-text` | `<span>` | Initiates a tabs expandable toggle text. |
1911
- | `.pf-m-secondary` | `.pf-c-tabs` | Applies secondary styling to the tab component. |
1912
- | `.pf-m-no-border-bottom` | `.pf-c-tabs` | Removes bottom border from a tab component. |
1913
- | `.pf-m-box` | `.pf-c-tabs` | Applies box styling to the tab component. |
1914
- | `.pf-m-vertical` | `.pf-c-tabs` | Applies vertical styling to the tab component. |
1915
- | `.pf-m-fill` | `.pf-c-tabs` | Modifies the tabs to fill the available space. |
1916
- | `.pf-m-current` | `.pf-c-tabs__item` | Indicates that a tab item is currently selected. |
1917
- | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of other adjacent components. |
1918
- | `.pf-m-page-insets` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. |
1919
- | `.pf-m-color-scheme--light-300` | `.pf-c-tabs` | Modifies the tabs component tab background colors. |
1920
- | `.pf-m-expandable{-on-[breakpoint]}` | `.pf-c-tabs` | Modifies the tabs component to be expandable via a toggle. **Note:** works with vertical tabs only. |
1921
- | `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-c-tabs` | Modifies the tabs component to be non-expandable. |
1922
- | `.pf-m-expanded` | `.pf-c-tabs` | Modifies the expandable tabs component for the expanded state. |
1923
- | `.pf-m-disabled` | `a.pf-c-tabs__link` | Modifies a tabs link for disabled styles. |
1924
- | `.pf-m-aria-disabled` | `.pf-c-tabs__link` | Modifies a tabs link for disabled styles, but is still hoverable/focusable. |
1898
+ | Class | Applied to | Outcome |
1899
+ | ---------------------------------------------------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1900
+ | `.pf-c-tabs` | `<nav>`, `<div>` | Initiates the tabs component. **Required** |
1901
+ | `.pf-c-tabs__list` | `<ul>` | Initiates a tabs component list. **Required** |
1902
+ | `.pf-c-tabs__item` | `<li>` | Initiates a tabs component item. **Required** |
1903
+ | `.pf-c-tabs__item-text` | `<span>` | Initiates a tabs component item icon. **Required** |
1904
+ | `.pf-c-tabs__item-icon` | `<span>` | Initiates a tabs component item text. **Required** |
1905
+ | `.pf-c-tabs__link` | `<button>`, `<a>` | Initiates a tabs component link. **Required** |
1906
+ | `.pf-c-tabs__scroll-button` | `<button>` | Initiates a tabs component scroll button. |
1907
+ | `.pf-c-tabs__toggle` | `<div>` | Initiates a tabs expandable toggle. |
1908
+ | `.pf-c-tabs__toggle-button` | `<button>` | Initiates a tabs expandable toggle button. |
1909
+ | `.pf-c-tabs__toggle-icon` | `<span>` | Initiates a tabs expandable toggle icon. |
1910
+ | `.pf-c-tabs__toggle-text` | `<span>` | Initiates a tabs expandable toggle text. |
1911
+ | `.pf-m-secondary` | `.pf-c-tabs` | Applies secondary styling to the tab component. |
1912
+ | `.pf-m-no-border-bottom` | `.pf-c-tabs` | Removes bottom border from a tab component. |
1913
+ | `.pf-m-box` | `.pf-c-tabs` | Applies box styling to the tab component. |
1914
+ | `.pf-m-vertical` | `.pf-c-tabs` | Applies vertical styling to the tab component. |
1915
+ | `.pf-m-fill` | `.pf-c-tabs` | Modifies the tabs to fill the available space. |
1916
+ | `.pf-m-current` | `.pf-c-tabs__item` | Indicates that a tab item is currently selected. |
1917
+ | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of other adjacent components. |
1918
+ | `.pf-m-page-insets` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. |
1919
+ | `.pf-m-color-scheme--light-300` | `.pf-c-tabs` | Modifies the tabs component tab background colors. |
1920
+ | `.pf-m-expandable{-on-[breakpoint]}` | `.pf-c-tabs` | Modifies the tabs component to be expandable via a toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** works with vertical tabs only. |
1921
+ | `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-c-tabs` | Modifies the tabs component to be non-expandable at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
1922
+ | `.pf-m-expanded` | `.pf-c-tabs` | Modifies the expandable tabs component for the expanded state. |
1923
+ | `.pf-m-disabled` | `a.pf-c-tabs__link` | Modifies a tabs link for disabled styles. |
1924
+ | `.pf-m-aria-disabled` | `.pf-c-tabs__link` | Modifies a tabs link for disabled styles, but is still hoverable/focusable. |