@patternfly/patternfly 6.0.0-alpha.132 → 6.0.0-alpha.133

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 (49) hide show
  1. package/components/Breadcrumb/breadcrumb.css +10 -10
  2. package/components/Breadcrumb/breadcrumb.scss +10 -10
  3. package/components/Hint/hint.css +2 -2
  4. package/components/Hint/hint.scss +2 -3
  5. package/components/Login/login.css +4 -2
  6. package/components/Login/login.scss +2 -1
  7. package/components/Menu/menu.css +4 -1
  8. package/components/Menu/menu.scss +5 -1
  9. package/components/_index.css +20 -15
  10. package/docs/components/ActionList/examples/ActionList.md +4 -4
  11. package/docs/components/Breadcrumb/examples/Breadcrumb.md +2 -1
  12. package/docs/components/Card/examples/Card.md +80 -416
  13. package/docs/components/DataList/examples/DataList.md +170 -952
  14. package/docs/components/DualListSelector/examples/DualListSelector.md +160 -896
  15. package/docs/components/Hint/examples/Hint.md +30 -156
  16. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -2
  17. package/docs/components/LogViewer/examples/LogViewer.css +9 -2
  18. package/docs/components/LogViewer/examples/LogViewer.md +315 -3313
  19. package/docs/components/Menu/examples/Menu.md +6 -76
  20. package/docs/components/MenuToggle/examples/MenuToggle.md +4 -0
  21. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +370 -2064
  22. package/docs/components/OverflowMenu/examples/overflow-menu.css +3 -27
  23. package/docs/components/OverflowMenu/examples/overflow-menu.md +56 -143
  24. package/docs/components/Table/examples/Table.css +7 -0
  25. package/docs/components/Table/examples/Table.md +281 -405
  26. package/docs/components/Toolbar/examples/Toolbar.md +32 -239
  27. package/docs/demos/CardView/examples/CardView.md +110 -583
  28. package/docs/demos/Dashboard/examples/Dashboard.md +10 -56
  29. package/docs/demos/DataList/examples/DataList.md +44 -96
  30. package/docs/demos/DescriptionList/examples/DescriptionList.md +10 -56
  31. package/docs/demos/Drawer/examples/Drawer.md +10 -56
  32. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +647 -3504
  33. package/docs/demos/Page/examples/Penta.md +5 -5
  34. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +150 -675
  35. package/docs/demos/Table/examples/Table.md +142 -220
  36. package/docs/demos/Tabs/examples/Tabs.md +15 -28
  37. package/docs/demos/Toolbar/examples/Toolbar.css +0 -16
  38. package/docs/demos/Toolbar/examples/Toolbar.md +88 -609
  39. package/docs/utilities/Display/examples/Display.css +1 -8
  40. package/docs/utilities/Display/examples/Display.md +16 -7
  41. package/package.json +1 -1
  42. package/patternfly-addons.css +38 -0
  43. package/patternfly-no-globals.css +20 -15
  44. package/patternfly.css +20 -15
  45. package/patternfly.min.css +1 -1
  46. package/patternfly.min.css.map +1 -1
  47. package/utilities/Display/display.css +38 -0
  48. package/utilities/Display/display.scss +3 -1
  49. package/utilities/_index.css +38 -0
package/docs/components/Card/examples/Card.md CHANGED
@@ -82,59 +82,17 @@ cssPrefix: pf-v6-c-card
82
82
  </svg>
83
83
  </div>
84
84
  <div class="pf-v6-c-card__actions">
85
- <div class="pf-v6-c-dropdown">
86
- <button
87
- class="pf-v6-c-dropdown__toggle pf-m-plain"
88
- id="card-action-example-1-dropdown-kebab-button"
89
- aria-expanded="false"
90
- type="button"
91
- aria-label="Actions"
92
- >
85
+ <button
86
+ class="pf-v6-c-menu-toggle pf-m-plain"
87
+ type="button"
88
+ aria-expanded="false"
89
+ aria-label="Menu toggle"
90
+ id="card-action-example-1menu-toggle-kebab"
91
+ >
92
+ <span class="pf-v6-c-menu-toggle__icon">
93
93
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
94
- </button>
95
- <ul
96
- class="pf-v6-c-dropdown__menu pf-m-align-right"
97
- aria-labelledby="card-action-example-1-dropdown-kebab-button"
98
- hidden
99
- role="menu"
100
- >
101
- <li role="none">
102
- <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
103
- </li>
104
- <li role="none">
105
- <button
106
- class="pf-v6-c-dropdown__menu-item"
107
- role="menuitem"
108
- type="button"
109
- >Action</button>
110
- </li>
111
- <li role="none">
112
- <a
113
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
114
- role="menuitem"
115
- href="#"
116
- aria-disabled="true"
117
- tabindex="-1"
118
- >Disabled link</a>
119
- </li>
120
- <li role="none">
121
- <button
122
- class="pf-v6-c-dropdown__menu-item"
123
- role="menuitem"
124
- type="button"
125
- disabled
126
- >Disabled action</button>
127
- </li>
128
- <li class="pf-v6-c-divider" role="separator"></li>
129
- <li role="none">
130
- <a
131
- class="pf-v6-c-dropdown__menu-item"
132
- role="menuitem"
133
- href="#"
134
- >Separated link</a>
135
- </li>
136
- </ul>
137
- </div>
94
+ </span>
95
+ </button>
138
96
  <div class="pf-v6-c-check pf-m-standalone">
139
97
  <input
140
98
  class="pf-v6-c-check__input"
@@ -165,59 +123,17 @@ cssPrefix: pf-v6-c-card
165
123
  <div class="pf-v6-c-card" id="card-action-example-2">
166
124
  <div class="pf-v6-c-card__header">
167
125
  <div class="pf-v6-c-card__actions">
168
- <div class="pf-v6-c-dropdown">
169
- <button
170
- class="pf-v6-c-dropdown__toggle pf-m-plain"
171
- id="card-action-example-2-dropdown-kebab-button"
172
- aria-expanded="false"
173
- type="button"
174
- aria-label="Actions"
175
- >
126
+ <button
127
+ class="pf-v6-c-menu-toggle pf-m-plain"
128
+ type="button"
129
+ aria-expanded="false"
130
+ aria-label="Menu toggle"
131
+ id="card-action-example-2menu-toggle-kebab"
132
+ >
133
+ <span class="pf-v6-c-menu-toggle__icon">
176
134
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
177
- </button>
178
- <ul
179
- class="pf-v6-c-dropdown__menu pf-m-align-right"
180
- aria-labelledby="card-action-example-2-dropdown-kebab-button"
181
- hidden
182
- role="menu"
183
- >
184
- <li role="none">
185
- <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
186
- </li>
187
- <li role="none">
188
- <button
189
- class="pf-v6-c-dropdown__menu-item"
190
- role="menuitem"
191
- type="button"
192
- >Action</button>
193
- </li>
194
- <li role="none">
195
- <a
196
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
197
- role="menuitem"
198
- href="#"
199
- aria-disabled="true"
200
- tabindex="-1"
201
- >Disabled link</a>
202
- </li>
203
- <li role="none">
204
- <button
205
- class="pf-v6-c-dropdown__menu-item"
206
- role="menuitem"
207
- type="button"
208
- disabled
209
- >Disabled action</button>
210
- </li>
211
- <li class="pf-v6-c-divider" role="separator"></li>
212
- <li role="none">
213
- <a
214
- class="pf-v6-c-dropdown__menu-item"
215
- role="menuitem"
216
- href="#"
217
- >Separated link</a>
218
- </li>
219
- </ul>
220
- </div>
135
+ </span>
136
+ </button>
221
137
  <div class="pf-v6-c-check pf-m-standalone">
222
138
  <input
223
139
  class="pf-v6-c-check__input"
@@ -250,59 +166,17 @@ cssPrefix: pf-v6-c-card
250
166
  <div class="pf-v6-c-card" id="card-action-example-3">
251
167
  <div class="pf-v6-c-card__header">
252
168
  <div class="pf-v6-c-card__actions">
253
- <div class="pf-v6-c-dropdown">
254
- <button
255
- class="pf-v6-c-dropdown__toggle pf-m-plain"
256
- id="card-action-example-3-dropdown-kebab-button"
257
- aria-expanded="false"
258
- type="button"
259
- aria-label="Actions"
260
- >
169
+ <button
170
+ class="pf-v6-c-menu-toggle pf-m-plain"
171
+ type="button"
172
+ aria-expanded="false"
173
+ aria-label="Menu toggle"
174
+ id="card-action-example-3menu-toggle-kebab"
175
+ >
176
+ <span class="pf-v6-c-menu-toggle__icon">
261
177
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
262
- </button>
263
- <ul
264
- class="pf-v6-c-dropdown__menu pf-m-align-right"
265
- aria-labelledby="card-action-example-3-dropdown-kebab-button"
266
- hidden
267
- role="menu"
268
- >
269
- <li role="none">
270
- <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
271
- </li>
272
- <li role="none">
273
- <button
274
- class="pf-v6-c-dropdown__menu-item"
275
- role="menuitem"
276
- type="button"
277
- >Action</button>
278
- </li>
279
- <li role="none">
280
- <a
281
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
282
- role="menuitem"
283
- href="#"
284
- aria-disabled="true"
285
- tabindex="-1"
286
- >Disabled link</a>
287
- </li>
288
- <li role="none">
289
- <button
290
- class="pf-v6-c-dropdown__menu-item"
291
- role="menuitem"
292
- type="button"
293
- disabled
294
- >Disabled action</button>
295
- </li>
296
- <li class="pf-v6-c-divider" role="separator"></li>
297
- <li role="none">
298
- <a
299
- class="pf-v6-c-dropdown__menu-item"
300
- role="menuitem"
301
- href="#"
302
- >Separated link</a>
303
- </li>
304
- </ul>
305
- </div>
178
+ </span>
179
+ </button>
306
180
  <div class="pf-v6-c-check pf-m-standalone">
307
181
  <input
308
182
  class="pf-v6-c-check__input"
@@ -1483,59 +1357,17 @@ cssPrefix: pf-v6-c-card
1483
1357
  </button>
1484
1358
  </div>
1485
1359
  <div class="pf-v6-c-card__actions">
1486
- <div class="pf-v6-c-dropdown">
1487
- <button
1488
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1489
- id="card-expandable-example-dropdown-kebab-button"
1490
- aria-expanded="false"
1491
- type="button"
1492
- aria-label="Actions"
1493
- >
1360
+ <button
1361
+ class="pf-v6-c-menu-toggle pf-m-plain"
1362
+ type="button"
1363
+ aria-expanded="false"
1364
+ aria-label="Menu toggle"
1365
+ id="card-expandable-examplemenu-toggle-kebab"
1366
+ >
1367
+ <span class="pf-v6-c-menu-toggle__icon">
1494
1368
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1495
- </button>
1496
- <ul
1497
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1498
- aria-labelledby="card-expandable-example-dropdown-kebab-button"
1499
- hidden
1500
- role="menu"
1501
- >
1502
- <li role="none">
1503
- <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
1504
- </li>
1505
- <li role="none">
1506
- <button
1507
- class="pf-v6-c-dropdown__menu-item"
1508
- role="menuitem"
1509
- type="button"
1510
- >Action</button>
1511
- </li>
1512
- <li role="none">
1513
- <a
1514
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1515
- role="menuitem"
1516
- href="#"
1517
- aria-disabled="true"
1518
- tabindex="-1"
1519
- >Disabled link</a>
1520
- </li>
1521
- <li role="none">
1522
- <button
1523
- class="pf-v6-c-dropdown__menu-item"
1524
- role="menuitem"
1525
- type="button"
1526
- disabled
1527
- >Disabled action</button>
1528
- </li>
1529
- <li class="pf-v6-c-divider" role="separator"></li>
1530
- <li role="none">
1531
- <a
1532
- class="pf-v6-c-dropdown__menu-item"
1533
- role="menuitem"
1534
- href="#"
1535
- >Separated link</a>
1536
- </li>
1537
- </ul>
1538
- </div>
1369
+ </span>
1370
+ </button>
1539
1371
  <div class="pf-v6-c-check pf-m-standalone">
1540
1372
  <input
1541
1373
  class="pf-v6-c-check__input"
@@ -1586,59 +1418,17 @@ cssPrefix: pf-v6-c-card
1586
1418
  />
1587
1419
  </div>
1588
1420
  <div class="pf-v6-c-card__actions">
1589
- <div class="pf-v6-c-dropdown">
1590
- <button
1591
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1592
- id="card-expandable-image-example-dropdown-kebab-button"
1593
- aria-expanded="false"
1594
- type="button"
1595
- aria-label="Actions"
1596
- >
1421
+ <button
1422
+ class="pf-v6-c-menu-toggle pf-m-plain"
1423
+ type="button"
1424
+ aria-expanded="false"
1425
+ aria-label="Menu toggle"
1426
+ id="card-expandable-image-examplemenu-toggle-kebab"
1427
+ >
1428
+ <span class="pf-v6-c-menu-toggle__icon">
1597
1429
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1598
- </button>
1599
- <ul
1600
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1601
- aria-labelledby="card-expandable-image-example-dropdown-kebab-button"
1602
- hidden
1603
- role="menu"
1604
- >
1605
- <li role="none">
1606
- <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
1607
- </li>
1608
- <li role="none">
1609
- <button
1610
- class="pf-v6-c-dropdown__menu-item"
1611
- role="menuitem"
1612
- type="button"
1613
- >Action</button>
1614
- </li>
1615
- <li role="none">
1616
- <a
1617
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1618
- role="menuitem"
1619
- href="#"
1620
- aria-disabled="true"
1621
- tabindex="-1"
1622
- >Disabled link</a>
1623
- </li>
1624
- <li role="none">
1625
- <button
1626
- class="pf-v6-c-dropdown__menu-item"
1627
- role="menuitem"
1628
- type="button"
1629
- disabled
1630
- >Disabled action</button>
1631
- </li>
1632
- <li class="pf-v6-c-divider" role="separator"></li>
1633
- <li role="none">
1634
- <a
1635
- class="pf-v6-c-dropdown__menu-item"
1636
- role="menuitem"
1637
- href="#"
1638
- >Separated link</a>
1639
- </li>
1640
- </ul>
1641
- </div>
1430
+ </span>
1431
+ </button>
1642
1432
  <div class="pf-v6-c-check pf-m-standalone">
1643
1433
  <input
1644
1434
  class="pf-v6-c-check__input"
@@ -1674,59 +1464,17 @@ cssPrefix: pf-v6-c-card
1674
1464
  </button>
1675
1465
  </div>
1676
1466
  <div class="pf-v6-c-card__actions">
1677
- <div class="pf-v6-c-dropdown">
1678
- <button
1679
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1680
- id="card-expanded-example-dropdown-kebab-button"
1681
- aria-expanded="false"
1682
- type="button"
1683
- aria-label="Actions"
1684
- >
1467
+ <button
1468
+ class="pf-v6-c-menu-toggle pf-m-plain"
1469
+ type="button"
1470
+ aria-expanded="false"
1471
+ aria-label="Menu toggle"
1472
+ id="card-expanded-examplemenu-toggle-kebab"
1473
+ >
1474
+ <span class="pf-v6-c-menu-toggle__icon">
1685
1475
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1686
- </button>
1687
- <ul
1688
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1689
- aria-labelledby="card-expanded-example-dropdown-kebab-button"
1690
- hidden
1691
- role="menu"
1692
- >
1693
- <li role="none">
1694
- <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
1695
- </li>
1696
- <li role="none">
1697
- <button
1698
- class="pf-v6-c-dropdown__menu-item"
1699
- role="menuitem"
1700
- type="button"
1701
- >Action</button>
1702
- </li>
1703
- <li role="none">
1704
- <a
1705
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1706
- role="menuitem"
1707
- href="#"
1708
- aria-disabled="true"
1709
- tabindex="-1"
1710
- >Disabled link</a>
1711
- </li>
1712
- <li role="none">
1713
- <button
1714
- class="pf-v6-c-dropdown__menu-item"
1715
- role="menuitem"
1716
- type="button"
1717
- disabled
1718
- >Disabled action</button>
1719
- </li>
1720
- <li class="pf-v6-c-divider" role="separator"></li>
1721
- <li role="none">
1722
- <a
1723
- class="pf-v6-c-dropdown__menu-item"
1724
- role="menuitem"
1725
- href="#"
1726
- >Separated link</a>
1727
- </li>
1728
- </ul>
1729
- </div>
1476
+ </span>
1477
+ </button>
1730
1478
  <div class="pf-v6-c-check pf-m-standalone">
1731
1479
  <input
1732
1480
  class="pf-v6-c-check__input"
@@ -1759,59 +1507,17 @@ cssPrefix: pf-v6-c-card
1759
1507
  <div class="pf-v6-c-card pf-m-full-height" id="card-full-height-example">
1760
1508
  <div class="pf-v6-c-card__header">
1761
1509
  <div class="pf-v6-c-card__actions">
1762
- <div class="pf-v6-c-dropdown">
1763
- <button
1764
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1765
- id="card-full-height-example-dropdown-kebab-button"
1766
- aria-expanded="false"
1767
- type="button"
1768
- aria-label="Actions"
1769
- >
1510
+ <button
1511
+ class="pf-v6-c-menu-toggle pf-m-plain"
1512
+ type="button"
1513
+ aria-expanded="false"
1514
+ aria-label="Menu toggle"
1515
+ id="card-full-height-examplemenu-toggle-kebab"
1516
+ >
1517
+ <span class="pf-v6-c-menu-toggle__icon">
1770
1518
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1771
- </button>
1772
- <ul
1773
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1774
- aria-labelledby="card-full-height-example-dropdown-kebab-button"
1775
- hidden
1776
- role="menu"
1777
- >
1778
- <li role="none">
1779
- <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
1780
- </li>
1781
- <li role="none">
1782
- <button
1783
- class="pf-v6-c-dropdown__menu-item"
1784
- role="menuitem"
1785
- type="button"
1786
- >Action</button>
1787
- </li>
1788
- <li role="none">
1789
- <a
1790
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1791
- role="menuitem"
1792
- href="#"
1793
- aria-disabled="true"
1794
- tabindex="-1"
1795
- >Disabled link</a>
1796
- </li>
1797
- <li role="none">
1798
- <button
1799
- class="pf-v6-c-dropdown__menu-item"
1800
- role="menuitem"
1801
- type="button"
1802
- disabled
1803
- >Disabled action</button>
1804
- </li>
1805
- <li class="pf-v6-c-divider" role="separator"></li>
1806
- <li role="none">
1807
- <a
1808
- class="pf-v6-c-dropdown__menu-item"
1809
- role="menuitem"
1810
- href="#"
1811
- >Separated link</a>
1812
- </li>
1813
- </ul>
1814
- </div>
1519
+ </span>
1520
+ </button>
1815
1521
  <div class="pf-v6-c-check pf-m-standalone">
1816
1522
  <input
1817
1523
  class="pf-v6-c-check__input"
@@ -1844,59 +1550,17 @@ cssPrefix: pf-v6-c-card
1844
1550
  <div class="pf-v6-c-card" id="card-toggle-on-right-example">
1845
1551
  <div class="pf-v6-c-card__header pf-m-toggle-right">
1846
1552
  <div class="pf-v6-c-card__actions">
1847
- <div class="pf-v6-c-dropdown">
1848
- <button
1849
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1850
- id="card-toggle-on-right-example-dropdown-kebab-button"
1851
- aria-expanded="false"
1852
- type="button"
1853
- aria-label="Actions"
1854
- >
1553
+ <button
1554
+ class="pf-v6-c-menu-toggle pf-m-plain"
1555
+ type="button"
1556
+ aria-expanded="false"
1557
+ aria-label="Menu toggle"
1558
+ id="card-toggle-on-right-examplemenu-toggle-kebab"
1559
+ >
1560
+ <span class="pf-v6-c-menu-toggle__icon">
1855
1561
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1856
- </button>
1857
- <ul
1858
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1859
- aria-labelledby="card-toggle-on-right-example-dropdown-kebab-button"
1860
- hidden
1861
- role="menu"
1862
- >
1863
- <li role="none">
1864
- <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
1865
- </li>
1866
- <li role="none">
1867
- <button
1868
- class="pf-v6-c-dropdown__menu-item"
1869
- role="menuitem"
1870
- type="button"
1871
- >Action</button>
1872
- </li>
1873
- <li role="none">
1874
- <a
1875
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1876
- role="menuitem"
1877
- href="#"
1878
- aria-disabled="true"
1879
- tabindex="-1"
1880
- >Disabled link</a>
1881
- </li>
1882
- <li role="none">
1883
- <button
1884
- class="pf-v6-c-dropdown__menu-item"
1885
- role="menuitem"
1886
- type="button"
1887
- disabled
1888
- >Disabled action</button>
1889
- </li>
1890
- <li class="pf-v6-c-divider" role="separator"></li>
1891
- <li role="none">
1892
- <a
1893
- class="pf-v6-c-dropdown__menu-item"
1894
- role="menuitem"
1895
- href="#"
1896
- >Separated link</a>
1897
- </li>
1898
- </ul>
1899
- </div>
1562
+ </span>
1563
+ </button>
1900
1564
  <div class="pf-v6-c-check pf-m-standalone">
1901
1565
  <input
1902
1566
  class="pf-v6-c-check__input"