@patternfly/patternfly 6.0.0-alpha.159 → 6.0.0-alpha.160
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/base/patternfly-variables.css +216 -198
- package/base/patternfly-variables.scss +1 -1
- package/base/tokens/tokens-charts-dark.scss +1 -1
- package/base/tokens/tokens-charts.scss +1 -1
- package/base/tokens/tokens-dark.scss +31 -31
- package/base/tokens/tokens-default.scss +58 -40
- package/base/tokens/tokens-palette.scss +1 -1
- package/components/Banner/banner.css +10 -10
- package/components/Banner/banner.scss +10 -10
- package/components/Label/label.css +34 -34
- package/components/Label/label.scss +36 -36
- package/components/_index.css +44 -44
- package/docs/components/Banner/examples/Banner.md +6 -6
- package/docs/components/Content/examples/Content.md +1 -1
- package/docs/components/Label/examples/Label.md +193 -185
- package/docs/components/Table/examples/Table.md +40 -40
- package/docs/demos/Card/examples/Card.md +3 -3
- package/docs/demos/Dashboard/examples/Dashboard.md +1 -1
- package/docs/demos/DescriptionList/examples/DescriptionList.md +1 -1
- package/docs/demos/Tabs/examples/Tabs.md +2 -2
- package/package.json +1 -1
- package/patternfly-base-no-globals.css +216 -198
- package/patternfly-base.css +216 -198
- package/patternfly-no-globals.css +260 -242
- package/patternfly.css +260 -242
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -1440,117 +1440,117 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
|
|
|
1440
1440
|
<br />
|
|
1441
1441
|
<br />
|
|
1442
1442
|
|
|
1443
|
-
<span class="pf-v6-c-label pf-m-filled pf-m-
|
|
1443
|
+
<span class="pf-v6-c-label pf-m-filled pf-m-teal">
|
|
1444
1444
|
<span class="pf-v6-c-label__content">
|
|
1445
|
-
<span class="pf-v6-c-label__text">
|
|
1445
|
+
<span class="pf-v6-c-label__text">Teal</span>
|
|
1446
1446
|
</span>
|
|
1447
1447
|
</span>
|
|
1448
1448
|
|
|
1449
|
-
<span class="pf-v6-c-label pf-m-filled pf-m-
|
|
1449
|
+
<span class="pf-v6-c-label pf-m-filled pf-m-teal">
|
|
1450
1450
|
<span class="pf-v6-c-label__content">
|
|
1451
1451
|
<span class="pf-v6-c-label__icon">
|
|
1452
1452
|
<i class="fas fa-fw fa-cube" aria-hidden="true"></i>
|
|
1453
1453
|
</span>
|
|
1454
|
-
<span class="pf-v6-c-label__text">
|
|
1454
|
+
<span class="pf-v6-c-label__text">Teal icon</span>
|
|
1455
1455
|
</span>
|
|
1456
1456
|
</span>
|
|
1457
1457
|
|
|
1458
|
-
<span class="pf-v6-c-label pf-m-filled pf-m-
|
|
1458
|
+
<span class="pf-v6-c-label pf-m-filled pf-m-teal">
|
|
1459
1459
|
<span class="pf-v6-c-label__content">
|
|
1460
1460
|
<span
|
|
1461
1461
|
class="pf-v6-c-label__text"
|
|
1462
|
-
id="
|
|
1463
|
-
>
|
|
1462
|
+
id="teal-filled-removable-text"
|
|
1463
|
+
>Teal removable</span>
|
|
1464
1464
|
</span>
|
|
1465
1465
|
<span class="pf-v6-c-label__actions">
|
|
1466
1466
|
<button
|
|
1467
1467
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
1468
1468
|
type="button"
|
|
1469
|
-
id="
|
|
1469
|
+
id="teal-filled-removable-button"
|
|
1470
1470
|
aria-label="Remove"
|
|
1471
|
-
aria-labelledby="
|
|
1471
|
+
aria-labelledby="teal-filled-removable-button teal-filled-removable-text"
|
|
1472
1472
|
>
|
|
1473
1473
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1474
1474
|
</button>
|
|
1475
1475
|
</span>
|
|
1476
1476
|
</span>
|
|
1477
1477
|
|
|
1478
|
-
<span class="pf-v6-c-label pf-m-filled pf-m-
|
|
1478
|
+
<span class="pf-v6-c-label pf-m-filled pf-m-teal">
|
|
1479
1479
|
<span class="pf-v6-c-label__content">
|
|
1480
1480
|
<span class="pf-v6-c-label__icon">
|
|
1481
1481
|
<i class="fas fa-fw fa-cube" aria-hidden="true"></i>
|
|
1482
1482
|
</span>
|
|
1483
1483
|
<span
|
|
1484
1484
|
class="pf-v6-c-label__text"
|
|
1485
|
-
id="
|
|
1486
|
-
>
|
|
1485
|
+
id="teal-filled-icon-removable-text"
|
|
1486
|
+
>Teal icon removable</span>
|
|
1487
1487
|
</span>
|
|
1488
1488
|
<span class="pf-v6-c-label__actions">
|
|
1489
1489
|
<button
|
|
1490
1490
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
1491
1491
|
type="button"
|
|
1492
|
-
id="
|
|
1492
|
+
id="teal-filled-icon-removable-button"
|
|
1493
1493
|
aria-label="Remove"
|
|
1494
|
-
aria-labelledby="
|
|
1494
|
+
aria-labelledby="teal-filled-icon-removable-button teal-filled-icon-removable-text"
|
|
1495
1495
|
>
|
|
1496
1496
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1497
1497
|
</button>
|
|
1498
1498
|
</span>
|
|
1499
1499
|
</span>
|
|
1500
1500
|
|
|
1501
|
-
<span class="pf-v6-c-label pf-m-filled pf-m-
|
|
1501
|
+
<span class="pf-v6-c-label pf-m-filled pf-m-teal pf-m-clickable">
|
|
1502
1502
|
<a class="pf-v6-c-label__content pf-m-clickable" href="#">
|
|
1503
|
-
<span class="pf-v6-c-label__text">
|
|
1503
|
+
<span class="pf-v6-c-label__text">Teal link</span>
|
|
1504
1504
|
</a>
|
|
1505
1505
|
</span>
|
|
1506
1506
|
|
|
1507
|
-
<span class="pf-v6-c-label pf-m-filled pf-m-
|
|
1507
|
+
<span class="pf-v6-c-label pf-m-filled pf-m-teal pf-m-clickable">
|
|
1508
1508
|
<button class="pf-v6-c-label__content pf-m-clickable" type="button">
|
|
1509
|
-
<span class="pf-v6-c-label__text">
|
|
1509
|
+
<span class="pf-v6-c-label__text">Teal button</span>
|
|
1510
1510
|
</button>
|
|
1511
1511
|
</span>
|
|
1512
1512
|
|
|
1513
|
-
<span class="pf-v6-c-label pf-m-filled pf-m-
|
|
1513
|
+
<span class="pf-v6-c-label pf-m-filled pf-m-teal pf-m-clickable">
|
|
1514
1514
|
<a class="pf-v6-c-label__content pf-m-clickable" href="#">
|
|
1515
1515
|
<span
|
|
1516
1516
|
class="pf-v6-c-label__text"
|
|
1517
|
-
id="
|
|
1518
|
-
>
|
|
1517
|
+
id="teal-filled-link-removable-text"
|
|
1518
|
+
>Teal link removable</span>
|
|
1519
1519
|
</a>
|
|
1520
1520
|
<span class="pf-v6-c-label__actions">
|
|
1521
1521
|
<button
|
|
1522
1522
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
1523
1523
|
type="button"
|
|
1524
|
-
id="
|
|
1524
|
+
id="teal-filled-link-removable-button"
|
|
1525
1525
|
aria-label="Remove"
|
|
1526
|
-
aria-labelledby="
|
|
1526
|
+
aria-labelledby="teal-filled-link-removable-button teal-filled-link-removable-text"
|
|
1527
1527
|
>
|
|
1528
1528
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1529
1529
|
</button>
|
|
1530
1530
|
</span>
|
|
1531
1531
|
</span>
|
|
1532
1532
|
|
|
1533
|
-
<span class="pf-v6-c-label pf-m-filled pf-m-
|
|
1533
|
+
<span class="pf-v6-c-label pf-m-filled pf-m-teal pf-m-clickable">
|
|
1534
1534
|
<button class="pf-v6-c-label__content pf-m-clickable" type="button">
|
|
1535
1535
|
<span
|
|
1536
1536
|
class="pf-v6-c-label__text"
|
|
1537
|
-
id="
|
|
1538
|
-
>
|
|
1537
|
+
id="teal-filled-button-removable-text"
|
|
1538
|
+
>Teal button removable</span>
|
|
1539
1539
|
</button>
|
|
1540
1540
|
<span class="pf-v6-c-label__actions">
|
|
1541
1541
|
<button
|
|
1542
1542
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
1543
1543
|
type="button"
|
|
1544
|
-
id="
|
|
1544
|
+
id="teal-filled-button-removable-button"
|
|
1545
1545
|
aria-label="Remove"
|
|
1546
|
-
aria-labelledby="
|
|
1546
|
+
aria-labelledby="teal-filled-button-removable-button teal-filled-button-removable-text"
|
|
1547
1547
|
>
|
|
1548
1548
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1549
1549
|
</button>
|
|
1550
1550
|
</span>
|
|
1551
1551
|
</span>
|
|
1552
1552
|
|
|
1553
|
-
<span class="pf-v6-c-label pf-m-filled pf-m-
|
|
1553
|
+
<span class="pf-v6-c-label pf-m-filled pf-m-teal">
|
|
1554
1554
|
<span class="pf-v6-c-label__content">
|
|
1555
1555
|
<span class="pf-v6-c-label__icon">
|
|
1556
1556
|
<i class="fas fa-fw fa-cube" aria-hidden="true"></i>
|
|
@@ -1558,35 +1558,35 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
|
|
|
1558
1558
|
<span
|
|
1559
1559
|
class="pf-v6-c-label__text"
|
|
1560
1560
|
style="--pf-v6-c-label__text--MaxWidth: 28ch"
|
|
1561
|
-
>
|
|
1561
|
+
>Teal label, max-width truncation customization</span>
|
|
1562
1562
|
</span>
|
|
1563
1563
|
</span>
|
|
1564
1564
|
|
|
1565
|
-
<span class="pf-v6-c-label pf-m-filled pf-m-
|
|
1565
|
+
<span class="pf-v6-c-label pf-m-filled pf-m-teal">
|
|
1566
1566
|
<span class="pf-v6-c-label__content">
|
|
1567
1567
|
<span class="pf-v6-c-label__icon">
|
|
1568
1568
|
<i class="fas fa-fw fa-cube" aria-hidden="true"></i>
|
|
1569
1569
|
</span>
|
|
1570
1570
|
<span
|
|
1571
1571
|
class="pf-v6-c-label__text"
|
|
1572
|
-
id="
|
|
1572
|
+
id="teal-filled-truncated-with-icon-text"
|
|
1573
1573
|
style="--pf-v6-c-label__text--MaxWidth: 38ch"
|
|
1574
|
-
>
|
|
1574
|
+
>Teal label with icon and set max-width truncation customization</span>
|
|
1575
1575
|
</span>
|
|
1576
1576
|
<span class="pf-v6-c-label__actions">
|
|
1577
1577
|
<button
|
|
1578
1578
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
1579
1579
|
type="button"
|
|
1580
|
-
id="
|
|
1580
|
+
id="teal-filled-truncated-with-icon-button"
|
|
1581
1581
|
aria-label="Remove"
|
|
1582
|
-
aria-labelledby="
|
|
1582
|
+
aria-labelledby="teal-filled-truncated-with-icon-button teal-filled-truncated-with-icon-text"
|
|
1583
1583
|
>
|
|
1584
1584
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1585
1585
|
</button>
|
|
1586
1586
|
</span>
|
|
1587
1587
|
</span>
|
|
1588
1588
|
|
|
1589
|
-
<span class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-
|
|
1589
|
+
<span class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-teal pf-m-clickable">
|
|
1590
1590
|
<a
|
|
1591
1591
|
class="pf-v6-c-label__content pf-m-clickable"
|
|
1592
1592
|
href="#"
|
|
@@ -1598,41 +1598,41 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
|
|
|
1598
1598
|
</span>
|
|
1599
1599
|
<span
|
|
1600
1600
|
class="pf-v6-c-label__text"
|
|
1601
|
-
id="
|
|
1602
|
-
>
|
|
1601
|
+
id="teal-filled-link-removable-disabled-text"
|
|
1602
|
+
>Teal link removable (disabled)</span>
|
|
1603
1603
|
</a>
|
|
1604
1604
|
<span class="pf-v6-c-label__actions">
|
|
1605
1605
|
<button
|
|
1606
1606
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
1607
1607
|
type="button"
|
|
1608
1608
|
disabled
|
|
1609
|
-
id="
|
|
1609
|
+
id="teal-filled-link-removable-disabled-button"
|
|
1610
1610
|
aria-label="Remove"
|
|
1611
|
-
aria-labelledby="
|
|
1611
|
+
aria-labelledby="teal-filled-link-removable-disabled-button teal-filled-link-removable-disabled-text"
|
|
1612
1612
|
>
|
|
1613
1613
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1614
1614
|
</button>
|
|
1615
1615
|
</span>
|
|
1616
1616
|
</span>
|
|
1617
1617
|
|
|
1618
|
-
<span class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-
|
|
1618
|
+
<span class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-teal pf-m-clickable">
|
|
1619
1619
|
<button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
|
|
1620
1620
|
<span class="pf-v6-c-label__icon">
|
|
1621
1621
|
<i class="fas fa-fw fa-cube" aria-hidden="true"></i>
|
|
1622
1622
|
</span>
|
|
1623
1623
|
<span
|
|
1624
1624
|
class="pf-v6-c-label__text"
|
|
1625
|
-
id="
|
|
1626
|
-
>
|
|
1625
|
+
id="teal-filled-button-removable-disabled-text"
|
|
1626
|
+
>Teal button removable (disabled)</span>
|
|
1627
1627
|
</button>
|
|
1628
1628
|
<span class="pf-v6-c-label__actions">
|
|
1629
1629
|
<button
|
|
1630
1630
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
1631
1631
|
type="button"
|
|
1632
1632
|
disabled
|
|
1633
|
-
id="
|
|
1633
|
+
id="teal-filled-button-removable-disabled-button"
|
|
1634
1634
|
aria-label="Remove"
|
|
1635
|
-
aria-labelledby="
|
|
1635
|
+
aria-labelledby="teal-filled-button-removable-disabled-button teal-filled-button-removable-disabled-text"
|
|
1636
1636
|
>
|
|
1637
1637
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1638
1638
|
</button>
|
|
@@ -1642,117 +1642,117 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
|
|
|
1642
1642
|
<br />
|
|
1643
1643
|
<br />
|
|
1644
1644
|
|
|
1645
|
-
<span class="pf-v6-c-label pf-m-filled pf-m-
|
|
1645
|
+
<span class="pf-v6-c-label pf-m-filled pf-m-yellow">
|
|
1646
1646
|
<span class="pf-v6-c-label__content">
|
|
1647
|
-
<span class="pf-v6-c-label__text">
|
|
1647
|
+
<span class="pf-v6-c-label__text">Yellow</span>
|
|
1648
1648
|
</span>
|
|
1649
1649
|
</span>
|
|
1650
1650
|
|
|
1651
|
-
<span class="pf-v6-c-label pf-m-filled pf-m-
|
|
1651
|
+
<span class="pf-v6-c-label pf-m-filled pf-m-yellow">
|
|
1652
1652
|
<span class="pf-v6-c-label__content">
|
|
1653
1653
|
<span class="pf-v6-c-label__icon">
|
|
1654
1654
|
<i class="fas fa-fw fa-cube" aria-hidden="true"></i>
|
|
1655
1655
|
</span>
|
|
1656
|
-
<span class="pf-v6-c-label__text">
|
|
1656
|
+
<span class="pf-v6-c-label__text">Yellow icon</span>
|
|
1657
1657
|
</span>
|
|
1658
1658
|
</span>
|
|
1659
1659
|
|
|
1660
|
-
<span class="pf-v6-c-label pf-m-filled pf-m-
|
|
1660
|
+
<span class="pf-v6-c-label pf-m-filled pf-m-yellow">
|
|
1661
1661
|
<span class="pf-v6-c-label__content">
|
|
1662
1662
|
<span
|
|
1663
1663
|
class="pf-v6-c-label__text"
|
|
1664
|
-
id="
|
|
1665
|
-
>
|
|
1664
|
+
id="yellow-filled-removable-text"
|
|
1665
|
+
>Yellow removable</span>
|
|
1666
1666
|
</span>
|
|
1667
1667
|
<span class="pf-v6-c-label__actions">
|
|
1668
1668
|
<button
|
|
1669
1669
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
1670
1670
|
type="button"
|
|
1671
|
-
id="
|
|
1671
|
+
id="yellow-filled-removable-button"
|
|
1672
1672
|
aria-label="Remove"
|
|
1673
|
-
aria-labelledby="
|
|
1673
|
+
aria-labelledby="yellow-filled-removable-button yellow-filled-removable-text"
|
|
1674
1674
|
>
|
|
1675
1675
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1676
1676
|
</button>
|
|
1677
1677
|
</span>
|
|
1678
1678
|
</span>
|
|
1679
1679
|
|
|
1680
|
-
<span class="pf-v6-c-label pf-m-filled pf-m-
|
|
1680
|
+
<span class="pf-v6-c-label pf-m-filled pf-m-yellow">
|
|
1681
1681
|
<span class="pf-v6-c-label__content">
|
|
1682
1682
|
<span class="pf-v6-c-label__icon">
|
|
1683
1683
|
<i class="fas fa-fw fa-cube" aria-hidden="true"></i>
|
|
1684
1684
|
</span>
|
|
1685
1685
|
<span
|
|
1686
1686
|
class="pf-v6-c-label__text"
|
|
1687
|
-
id="
|
|
1688
|
-
>
|
|
1687
|
+
id="yellow-filled-icon-removable-text"
|
|
1688
|
+
>Yellow icon removable</span>
|
|
1689
1689
|
</span>
|
|
1690
1690
|
<span class="pf-v6-c-label__actions">
|
|
1691
1691
|
<button
|
|
1692
1692
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
1693
1693
|
type="button"
|
|
1694
|
-
id="
|
|
1694
|
+
id="yellow-filled-icon-removable-button"
|
|
1695
1695
|
aria-label="Remove"
|
|
1696
|
-
aria-labelledby="
|
|
1696
|
+
aria-labelledby="yellow-filled-icon-removable-button yellow-filled-icon-removable-text"
|
|
1697
1697
|
>
|
|
1698
1698
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1699
1699
|
</button>
|
|
1700
1700
|
</span>
|
|
1701
1701
|
</span>
|
|
1702
1702
|
|
|
1703
|
-
<span class="pf-v6-c-label pf-m-filled pf-m-
|
|
1703
|
+
<span class="pf-v6-c-label pf-m-filled pf-m-yellow pf-m-clickable">
|
|
1704
1704
|
<a class="pf-v6-c-label__content pf-m-clickable" href="#">
|
|
1705
|
-
<span class="pf-v6-c-label__text">
|
|
1705
|
+
<span class="pf-v6-c-label__text">Yellow link</span>
|
|
1706
1706
|
</a>
|
|
1707
1707
|
</span>
|
|
1708
1708
|
|
|
1709
|
-
<span class="pf-v6-c-label pf-m-filled pf-m-
|
|
1709
|
+
<span class="pf-v6-c-label pf-m-filled pf-m-yellow pf-m-clickable">
|
|
1710
1710
|
<button class="pf-v6-c-label__content pf-m-clickable" type="button">
|
|
1711
|
-
<span class="pf-v6-c-label__text">
|
|
1711
|
+
<span class="pf-v6-c-label__text">Yellow button</span>
|
|
1712
1712
|
</button>
|
|
1713
1713
|
</span>
|
|
1714
1714
|
|
|
1715
|
-
<span class="pf-v6-c-label pf-m-filled pf-m-
|
|
1715
|
+
<span class="pf-v6-c-label pf-m-filled pf-m-yellow pf-m-clickable">
|
|
1716
1716
|
<a class="pf-v6-c-label__content pf-m-clickable" href="#">
|
|
1717
1717
|
<span
|
|
1718
1718
|
class="pf-v6-c-label__text"
|
|
1719
|
-
id="
|
|
1720
|
-
>
|
|
1719
|
+
id="yellow-filled-link-removable-text"
|
|
1720
|
+
>Yellow link removable</span>
|
|
1721
1721
|
</a>
|
|
1722
1722
|
<span class="pf-v6-c-label__actions">
|
|
1723
1723
|
<button
|
|
1724
1724
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
1725
1725
|
type="button"
|
|
1726
|
-
id="
|
|
1726
|
+
id="yellow-filled-link-removable-button"
|
|
1727
1727
|
aria-label="Remove"
|
|
1728
|
-
aria-labelledby="
|
|
1728
|
+
aria-labelledby="yellow-filled-link-removable-button yellow-filled-link-removable-text"
|
|
1729
1729
|
>
|
|
1730
1730
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1731
1731
|
</button>
|
|
1732
1732
|
</span>
|
|
1733
1733
|
</span>
|
|
1734
1734
|
|
|
1735
|
-
<span class="pf-v6-c-label pf-m-filled pf-m-
|
|
1735
|
+
<span class="pf-v6-c-label pf-m-filled pf-m-yellow pf-m-clickable">
|
|
1736
1736
|
<button class="pf-v6-c-label__content pf-m-clickable" type="button">
|
|
1737
1737
|
<span
|
|
1738
1738
|
class="pf-v6-c-label__text"
|
|
1739
|
-
id="
|
|
1740
|
-
>
|
|
1739
|
+
id="yellow-filled-button-removable-text"
|
|
1740
|
+
>Yellow button removable</span>
|
|
1741
1741
|
</button>
|
|
1742
1742
|
<span class="pf-v6-c-label__actions">
|
|
1743
1743
|
<button
|
|
1744
1744
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
1745
1745
|
type="button"
|
|
1746
|
-
id="
|
|
1746
|
+
id="yellow-filled-button-removable-button"
|
|
1747
1747
|
aria-label="Remove"
|
|
1748
|
-
aria-labelledby="
|
|
1748
|
+
aria-labelledby="yellow-filled-button-removable-button yellow-filled-button-removable-text"
|
|
1749
1749
|
>
|
|
1750
1750
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1751
1751
|
</button>
|
|
1752
1752
|
</span>
|
|
1753
1753
|
</span>
|
|
1754
1754
|
|
|
1755
|
-
<span class="pf-v6-c-label pf-m-filled pf-m-
|
|
1755
|
+
<span class="pf-v6-c-label pf-m-filled pf-m-yellow">
|
|
1756
1756
|
<span class="pf-v6-c-label__content">
|
|
1757
1757
|
<span class="pf-v6-c-label__icon">
|
|
1758
1758
|
<i class="fas fa-fw fa-cube" aria-hidden="true"></i>
|
|
@@ -1760,35 +1760,37 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
|
|
|
1760
1760
|
<span
|
|
1761
1761
|
class="pf-v6-c-label__text"
|
|
1762
1762
|
style="--pf-v6-c-label__text--MaxWidth: 28ch"
|
|
1763
|
-
>
|
|
1763
|
+
>Yellow label, max-width truncation customization</span>
|
|
1764
1764
|
</span>
|
|
1765
1765
|
</span>
|
|
1766
1766
|
|
|
1767
|
-
<span class="pf-v6-c-label pf-m-filled pf-m-
|
|
1767
|
+
<span class="pf-v6-c-label pf-m-filled pf-m-yellow">
|
|
1768
1768
|
<span class="pf-v6-c-label__content">
|
|
1769
1769
|
<span class="pf-v6-c-label__icon">
|
|
1770
1770
|
<i class="fas fa-fw fa-cube" aria-hidden="true"></i>
|
|
1771
1771
|
</span>
|
|
1772
1772
|
<span
|
|
1773
1773
|
class="pf-v6-c-label__text"
|
|
1774
|
-
id="
|
|
1774
|
+
id="yellow-filled-truncated-with-icon-text"
|
|
1775
1775
|
style="--pf-v6-c-label__text--MaxWidth: 38ch"
|
|
1776
|
-
>
|
|
1776
|
+
>Yellow label with icon and set max-width truncation customization</span>
|
|
1777
1777
|
</span>
|
|
1778
1778
|
<span class="pf-v6-c-label__actions">
|
|
1779
1779
|
<button
|
|
1780
1780
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
1781
1781
|
type="button"
|
|
1782
|
-
id="
|
|
1782
|
+
id="yellow-filled-truncated-with-icon-button"
|
|
1783
1783
|
aria-label="Remove"
|
|
1784
|
-
aria-labelledby="
|
|
1784
|
+
aria-labelledby="yellow-filled-truncated-with-icon-button yellow-filled-truncated-with-icon-text"
|
|
1785
1785
|
>
|
|
1786
1786
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1787
1787
|
</button>
|
|
1788
1788
|
</span>
|
|
1789
1789
|
</span>
|
|
1790
1790
|
|
|
1791
|
-
<span
|
|
1791
|
+
<span
|
|
1792
|
+
class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-yellow pf-m-clickable"
|
|
1793
|
+
>
|
|
1792
1794
|
<a
|
|
1793
1795
|
class="pf-v6-c-label__content pf-m-clickable"
|
|
1794
1796
|
href="#"
|
|
@@ -1800,41 +1802,43 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
|
|
|
1800
1802
|
</span>
|
|
1801
1803
|
<span
|
|
1802
1804
|
class="pf-v6-c-label__text"
|
|
1803
|
-
id="
|
|
1804
|
-
>
|
|
1805
|
+
id="yellow-filled-link-removable-disabled-text"
|
|
1806
|
+
>Yellow link removable (disabled)</span>
|
|
1805
1807
|
</a>
|
|
1806
1808
|
<span class="pf-v6-c-label__actions">
|
|
1807
1809
|
<button
|
|
1808
1810
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
1809
1811
|
type="button"
|
|
1810
1812
|
disabled
|
|
1811
|
-
id="
|
|
1813
|
+
id="yellow-filled-link-removable-disabled-button"
|
|
1812
1814
|
aria-label="Remove"
|
|
1813
|
-
aria-labelledby="
|
|
1815
|
+
aria-labelledby="yellow-filled-link-removable-disabled-button yellow-filled-link-removable-disabled-text"
|
|
1814
1816
|
>
|
|
1815
1817
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1816
1818
|
</button>
|
|
1817
1819
|
</span>
|
|
1818
1820
|
</span>
|
|
1819
1821
|
|
|
1820
|
-
<span
|
|
1822
|
+
<span
|
|
1823
|
+
class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-yellow pf-m-clickable"
|
|
1824
|
+
>
|
|
1821
1825
|
<button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
|
|
1822
1826
|
<span class="pf-v6-c-label__icon">
|
|
1823
1827
|
<i class="fas fa-fw fa-cube" aria-hidden="true"></i>
|
|
1824
1828
|
</span>
|
|
1825
1829
|
<span
|
|
1826
1830
|
class="pf-v6-c-label__text"
|
|
1827
|
-
id="
|
|
1828
|
-
>
|
|
1831
|
+
id="yellow-filled-button-removable-disabled-text"
|
|
1832
|
+
>Yellow button removable (disabled)</span>
|
|
1829
1833
|
</button>
|
|
1830
1834
|
<span class="pf-v6-c-label__actions">
|
|
1831
1835
|
<button
|
|
1832
1836
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
1833
1837
|
type="button"
|
|
1834
1838
|
disabled
|
|
1835
|
-
id="
|
|
1839
|
+
id="yellow-filled-button-removable-disabled-button"
|
|
1836
1840
|
aria-label="Remove"
|
|
1837
|
-
aria-labelledby="
|
|
1841
|
+
aria-labelledby="yellow-filled-button-removable-disabled-button yellow-filled-button-removable-disabled-text"
|
|
1838
1842
|
>
|
|
1839
1843
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1840
1844
|
</button>
|
|
@@ -4242,117 +4246,117 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
|
|
|
4242
4246
|
<br />
|
|
4243
4247
|
<br />
|
|
4244
4248
|
|
|
4245
|
-
<span class="pf-v6-c-label pf-m-outline pf-m-
|
|
4249
|
+
<span class="pf-v6-c-label pf-m-outline pf-m-teal">
|
|
4246
4250
|
<span class="pf-v6-c-label__content">
|
|
4247
|
-
<span class="pf-v6-c-label__text">
|
|
4251
|
+
<span class="pf-v6-c-label__text">Teal</span>
|
|
4248
4252
|
</span>
|
|
4249
4253
|
</span>
|
|
4250
4254
|
|
|
4251
|
-
<span class="pf-v6-c-label pf-m-outline pf-m-
|
|
4255
|
+
<span class="pf-v6-c-label pf-m-outline pf-m-teal">
|
|
4252
4256
|
<span class="pf-v6-c-label__content">
|
|
4253
4257
|
<span class="pf-v6-c-label__icon">
|
|
4254
4258
|
<i class="fas fa-fw fa-cube" aria-hidden="true"></i>
|
|
4255
4259
|
</span>
|
|
4256
|
-
<span class="pf-v6-c-label__text">
|
|
4260
|
+
<span class="pf-v6-c-label__text">Teal icon</span>
|
|
4257
4261
|
</span>
|
|
4258
4262
|
</span>
|
|
4259
4263
|
|
|
4260
|
-
<span class="pf-v6-c-label pf-m-outline pf-m-
|
|
4264
|
+
<span class="pf-v6-c-label pf-m-outline pf-m-teal">
|
|
4261
4265
|
<span class="pf-v6-c-label__content">
|
|
4262
4266
|
<span
|
|
4263
4267
|
class="pf-v6-c-label__text"
|
|
4264
|
-
id="
|
|
4265
|
-
>
|
|
4268
|
+
id="teal-outline-removable-text"
|
|
4269
|
+
>Teal removable</span>
|
|
4266
4270
|
</span>
|
|
4267
4271
|
<span class="pf-v6-c-label__actions">
|
|
4268
4272
|
<button
|
|
4269
4273
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
4270
4274
|
type="button"
|
|
4271
|
-
id="
|
|
4275
|
+
id="teal-outline-removable-button"
|
|
4272
4276
|
aria-label="Remove"
|
|
4273
|
-
aria-labelledby="
|
|
4277
|
+
aria-labelledby="teal-outline-removable-button teal-outline-removable-text"
|
|
4274
4278
|
>
|
|
4275
4279
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
4276
4280
|
</button>
|
|
4277
4281
|
</span>
|
|
4278
4282
|
</span>
|
|
4279
4283
|
|
|
4280
|
-
<span class="pf-v6-c-label pf-m-outline pf-m-
|
|
4284
|
+
<span class="pf-v6-c-label pf-m-outline pf-m-teal">
|
|
4281
4285
|
<span class="pf-v6-c-label__content">
|
|
4282
4286
|
<span class="pf-v6-c-label__icon">
|
|
4283
4287
|
<i class="fas fa-fw fa-cube" aria-hidden="true"></i>
|
|
4284
4288
|
</span>
|
|
4285
4289
|
<span
|
|
4286
4290
|
class="pf-v6-c-label__text"
|
|
4287
|
-
id="
|
|
4288
|
-
>
|
|
4291
|
+
id="teal-outline-icon-removable-text"
|
|
4292
|
+
>Teal icon removable</span>
|
|
4289
4293
|
</span>
|
|
4290
4294
|
<span class="pf-v6-c-label__actions">
|
|
4291
4295
|
<button
|
|
4292
4296
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
4293
4297
|
type="button"
|
|
4294
|
-
id="
|
|
4298
|
+
id="teal-outline-icon-removable-button"
|
|
4295
4299
|
aria-label="Remove"
|
|
4296
|
-
aria-labelledby="
|
|
4300
|
+
aria-labelledby="teal-outline-icon-removable-button teal-outline-icon-removable-text"
|
|
4297
4301
|
>
|
|
4298
4302
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
4299
4303
|
</button>
|
|
4300
4304
|
</span>
|
|
4301
4305
|
</span>
|
|
4302
4306
|
|
|
4303
|
-
<span class="pf-v6-c-label pf-m-outline pf-m-
|
|
4307
|
+
<span class="pf-v6-c-label pf-m-outline pf-m-teal pf-m-clickable">
|
|
4304
4308
|
<a class="pf-v6-c-label__content pf-m-clickable" href="#">
|
|
4305
|
-
<span class="pf-v6-c-label__text">
|
|
4309
|
+
<span class="pf-v6-c-label__text">Teal link</span>
|
|
4306
4310
|
</a>
|
|
4307
4311
|
</span>
|
|
4308
4312
|
|
|
4309
|
-
<span class="pf-v6-c-label pf-m-outline pf-m-
|
|
4313
|
+
<span class="pf-v6-c-label pf-m-outline pf-m-teal pf-m-clickable">
|
|
4310
4314
|
<button class="pf-v6-c-label__content pf-m-clickable" type="button">
|
|
4311
|
-
<span class="pf-v6-c-label__text">
|
|
4315
|
+
<span class="pf-v6-c-label__text">Teal button</span>
|
|
4312
4316
|
</button>
|
|
4313
4317
|
</span>
|
|
4314
4318
|
|
|
4315
|
-
<span class="pf-v6-c-label pf-m-outline pf-m-
|
|
4319
|
+
<span class="pf-v6-c-label pf-m-outline pf-m-teal pf-m-clickable">
|
|
4316
4320
|
<a class="pf-v6-c-label__content pf-m-clickable" href="#">
|
|
4317
4321
|
<span
|
|
4318
4322
|
class="pf-v6-c-label__text"
|
|
4319
|
-
id="
|
|
4320
|
-
>
|
|
4323
|
+
id="teal-outline-link-removable-text"
|
|
4324
|
+
>Teal link removable</span>
|
|
4321
4325
|
</a>
|
|
4322
4326
|
<span class="pf-v6-c-label__actions">
|
|
4323
4327
|
<button
|
|
4324
4328
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
4325
4329
|
type="button"
|
|
4326
|
-
id="
|
|
4330
|
+
id="teal-outline-link-removable-button"
|
|
4327
4331
|
aria-label="Remove"
|
|
4328
|
-
aria-labelledby="
|
|
4332
|
+
aria-labelledby="teal-outline-link-removable-button teal-outline-link-removable-text"
|
|
4329
4333
|
>
|
|
4330
4334
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
4331
4335
|
</button>
|
|
4332
4336
|
</span>
|
|
4333
4337
|
</span>
|
|
4334
4338
|
|
|
4335
|
-
<span class="pf-v6-c-label pf-m-outline pf-m-
|
|
4339
|
+
<span class="pf-v6-c-label pf-m-outline pf-m-teal pf-m-clickable">
|
|
4336
4340
|
<button class="pf-v6-c-label__content pf-m-clickable" type="button">
|
|
4337
4341
|
<span
|
|
4338
4342
|
class="pf-v6-c-label__text"
|
|
4339
|
-
id="
|
|
4340
|
-
>
|
|
4343
|
+
id="teal-outline-button-removable-text"
|
|
4344
|
+
>Teal button removable</span>
|
|
4341
4345
|
</button>
|
|
4342
4346
|
<span class="pf-v6-c-label__actions">
|
|
4343
4347
|
<button
|
|
4344
4348
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
4345
4349
|
type="button"
|
|
4346
|
-
id="
|
|
4350
|
+
id="teal-outline-button-removable-button"
|
|
4347
4351
|
aria-label="Remove"
|
|
4348
|
-
aria-labelledby="
|
|
4352
|
+
aria-labelledby="teal-outline-button-removable-button teal-outline-button-removable-text"
|
|
4349
4353
|
>
|
|
4350
4354
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
4351
4355
|
</button>
|
|
4352
4356
|
</span>
|
|
4353
4357
|
</span>
|
|
4354
4358
|
|
|
4355
|
-
<span class="pf-v6-c-label pf-m-outline pf-m-
|
|
4359
|
+
<span class="pf-v6-c-label pf-m-outline pf-m-teal">
|
|
4356
4360
|
<span class="pf-v6-c-label__content">
|
|
4357
4361
|
<span class="pf-v6-c-label__icon">
|
|
4358
4362
|
<i class="fas fa-fw fa-cube" aria-hidden="true"></i>
|
|
@@ -4360,35 +4364,35 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
|
|
|
4360
4364
|
<span
|
|
4361
4365
|
class="pf-v6-c-label__text"
|
|
4362
4366
|
style="--pf-v6-c-label__text--MaxWidth: 28ch"
|
|
4363
|
-
>
|
|
4367
|
+
>Teal label, max-width truncation customization</span>
|
|
4364
4368
|
</span>
|
|
4365
4369
|
</span>
|
|
4366
4370
|
|
|
4367
|
-
<span class="pf-v6-c-label pf-m-outline pf-m-
|
|
4371
|
+
<span class="pf-v6-c-label pf-m-outline pf-m-teal">
|
|
4368
4372
|
<span class="pf-v6-c-label__content">
|
|
4369
4373
|
<span class="pf-v6-c-label__icon">
|
|
4370
4374
|
<i class="fas fa-fw fa-cube" aria-hidden="true"></i>
|
|
4371
4375
|
</span>
|
|
4372
4376
|
<span
|
|
4373
4377
|
class="pf-v6-c-label__text"
|
|
4374
|
-
id="
|
|
4378
|
+
id="teal-outline-truncated-with-icon-text"
|
|
4375
4379
|
style="--pf-v6-c-label__text--MaxWidth: 38ch"
|
|
4376
|
-
>
|
|
4380
|
+
>Teal label with icon and set max-width truncation customization</span>
|
|
4377
4381
|
</span>
|
|
4378
4382
|
<span class="pf-v6-c-label__actions">
|
|
4379
4383
|
<button
|
|
4380
4384
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
4381
4385
|
type="button"
|
|
4382
|
-
id="
|
|
4386
|
+
id="teal-outline-truncated-with-icon-button"
|
|
4383
4387
|
aria-label="Remove"
|
|
4384
|
-
aria-labelledby="
|
|
4388
|
+
aria-labelledby="teal-outline-truncated-with-icon-button teal-outline-truncated-with-icon-text"
|
|
4385
4389
|
>
|
|
4386
4390
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
4387
4391
|
</button>
|
|
4388
4392
|
</span>
|
|
4389
4393
|
</span>
|
|
4390
4394
|
|
|
4391
|
-
<span class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-
|
|
4395
|
+
<span class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-teal pf-m-clickable">
|
|
4392
4396
|
<a
|
|
4393
4397
|
class="pf-v6-c-label__content pf-m-clickable"
|
|
4394
4398
|
href="#"
|
|
@@ -4400,41 +4404,41 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
|
|
|
4400
4404
|
</span>
|
|
4401
4405
|
<span
|
|
4402
4406
|
class="pf-v6-c-label__text"
|
|
4403
|
-
id="
|
|
4404
|
-
>
|
|
4407
|
+
id="teal-outline-link-removable-disabled-text"
|
|
4408
|
+
>Teal link removable (disabled)</span>
|
|
4405
4409
|
</a>
|
|
4406
4410
|
<span class="pf-v6-c-label__actions">
|
|
4407
4411
|
<button
|
|
4408
4412
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
4409
4413
|
type="button"
|
|
4410
4414
|
disabled
|
|
4411
|
-
id="
|
|
4415
|
+
id="teal-outline-link-removable-disabled-button"
|
|
4412
4416
|
aria-label="Remove"
|
|
4413
|
-
aria-labelledby="
|
|
4417
|
+
aria-labelledby="teal-outline-link-removable-disabled-button teal-outline-link-removable-disabled-text"
|
|
4414
4418
|
>
|
|
4415
4419
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
4416
4420
|
</button>
|
|
4417
4421
|
</span>
|
|
4418
4422
|
</span>
|
|
4419
4423
|
|
|
4420
|
-
<span class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-
|
|
4424
|
+
<span class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-teal pf-m-clickable">
|
|
4421
4425
|
<button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
|
|
4422
4426
|
<span class="pf-v6-c-label__icon">
|
|
4423
4427
|
<i class="fas fa-fw fa-cube" aria-hidden="true"></i>
|
|
4424
4428
|
</span>
|
|
4425
4429
|
<span
|
|
4426
4430
|
class="pf-v6-c-label__text"
|
|
4427
|
-
id="
|
|
4428
|
-
>
|
|
4431
|
+
id="teal-outline-button-removable-disabled-text"
|
|
4432
|
+
>Teal button removable (disabled)</span>
|
|
4429
4433
|
</button>
|
|
4430
4434
|
<span class="pf-v6-c-label__actions">
|
|
4431
4435
|
<button
|
|
4432
4436
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
4433
4437
|
type="button"
|
|
4434
4438
|
disabled
|
|
4435
|
-
id="
|
|
4439
|
+
id="teal-outline-button-removable-disabled-button"
|
|
4436
4440
|
aria-label="Remove"
|
|
4437
|
-
aria-labelledby="
|
|
4441
|
+
aria-labelledby="teal-outline-button-removable-disabled-button teal-outline-button-removable-disabled-text"
|
|
4438
4442
|
>
|
|
4439
4443
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
4440
4444
|
</button>
|
|
@@ -4444,117 +4448,117 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
|
|
|
4444
4448
|
<br />
|
|
4445
4449
|
<br />
|
|
4446
4450
|
|
|
4447
|
-
<span class="pf-v6-c-label pf-m-outline pf-m-
|
|
4451
|
+
<span class="pf-v6-c-label pf-m-outline pf-m-yellow">
|
|
4448
4452
|
<span class="pf-v6-c-label__content">
|
|
4449
|
-
<span class="pf-v6-c-label__text">
|
|
4453
|
+
<span class="pf-v6-c-label__text">Yellow</span>
|
|
4450
4454
|
</span>
|
|
4451
4455
|
</span>
|
|
4452
4456
|
|
|
4453
|
-
<span class="pf-v6-c-label pf-m-outline pf-m-
|
|
4457
|
+
<span class="pf-v6-c-label pf-m-outline pf-m-yellow">
|
|
4454
4458
|
<span class="pf-v6-c-label__content">
|
|
4455
4459
|
<span class="pf-v6-c-label__icon">
|
|
4456
4460
|
<i class="fas fa-fw fa-cube" aria-hidden="true"></i>
|
|
4457
4461
|
</span>
|
|
4458
|
-
<span class="pf-v6-c-label__text">
|
|
4462
|
+
<span class="pf-v6-c-label__text">Yellow icon</span>
|
|
4459
4463
|
</span>
|
|
4460
4464
|
</span>
|
|
4461
4465
|
|
|
4462
|
-
<span class="pf-v6-c-label pf-m-outline pf-m-
|
|
4466
|
+
<span class="pf-v6-c-label pf-m-outline pf-m-yellow">
|
|
4463
4467
|
<span class="pf-v6-c-label__content">
|
|
4464
4468
|
<span
|
|
4465
4469
|
class="pf-v6-c-label__text"
|
|
4466
|
-
id="
|
|
4467
|
-
>
|
|
4470
|
+
id="yellow-outline-removable-text"
|
|
4471
|
+
>Yellow removable</span>
|
|
4468
4472
|
</span>
|
|
4469
4473
|
<span class="pf-v6-c-label__actions">
|
|
4470
4474
|
<button
|
|
4471
4475
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
4472
4476
|
type="button"
|
|
4473
|
-
id="
|
|
4477
|
+
id="yellow-outline-removable-button"
|
|
4474
4478
|
aria-label="Remove"
|
|
4475
|
-
aria-labelledby="
|
|
4479
|
+
aria-labelledby="yellow-outline-removable-button yellow-outline-removable-text"
|
|
4476
4480
|
>
|
|
4477
4481
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
4478
4482
|
</button>
|
|
4479
4483
|
</span>
|
|
4480
4484
|
</span>
|
|
4481
4485
|
|
|
4482
|
-
<span class="pf-v6-c-label pf-m-outline pf-m-
|
|
4486
|
+
<span class="pf-v6-c-label pf-m-outline pf-m-yellow">
|
|
4483
4487
|
<span class="pf-v6-c-label__content">
|
|
4484
4488
|
<span class="pf-v6-c-label__icon">
|
|
4485
4489
|
<i class="fas fa-fw fa-cube" aria-hidden="true"></i>
|
|
4486
4490
|
</span>
|
|
4487
4491
|
<span
|
|
4488
4492
|
class="pf-v6-c-label__text"
|
|
4489
|
-
id="
|
|
4490
|
-
>
|
|
4493
|
+
id="yellow-outline-icon-removable-text"
|
|
4494
|
+
>Yellow icon removable</span>
|
|
4491
4495
|
</span>
|
|
4492
4496
|
<span class="pf-v6-c-label__actions">
|
|
4493
4497
|
<button
|
|
4494
4498
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
4495
4499
|
type="button"
|
|
4496
|
-
id="
|
|
4500
|
+
id="yellow-outline-icon-removable-button"
|
|
4497
4501
|
aria-label="Remove"
|
|
4498
|
-
aria-labelledby="
|
|
4502
|
+
aria-labelledby="yellow-outline-icon-removable-button yellow-outline-icon-removable-text"
|
|
4499
4503
|
>
|
|
4500
4504
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
4501
4505
|
</button>
|
|
4502
4506
|
</span>
|
|
4503
4507
|
</span>
|
|
4504
4508
|
|
|
4505
|
-
<span class="pf-v6-c-label pf-m-outline pf-m-
|
|
4509
|
+
<span class="pf-v6-c-label pf-m-outline pf-m-yellow pf-m-clickable">
|
|
4506
4510
|
<a class="pf-v6-c-label__content pf-m-clickable" href="#">
|
|
4507
|
-
<span class="pf-v6-c-label__text">
|
|
4511
|
+
<span class="pf-v6-c-label__text">Yellow link</span>
|
|
4508
4512
|
</a>
|
|
4509
4513
|
</span>
|
|
4510
4514
|
|
|
4511
|
-
<span class="pf-v6-c-label pf-m-outline pf-m-
|
|
4515
|
+
<span class="pf-v6-c-label pf-m-outline pf-m-yellow pf-m-clickable">
|
|
4512
4516
|
<button class="pf-v6-c-label__content pf-m-clickable" type="button">
|
|
4513
|
-
<span class="pf-v6-c-label__text">
|
|
4517
|
+
<span class="pf-v6-c-label__text">Yellow button</span>
|
|
4514
4518
|
</button>
|
|
4515
4519
|
</span>
|
|
4516
4520
|
|
|
4517
|
-
<span class="pf-v6-c-label pf-m-outline pf-m-
|
|
4521
|
+
<span class="pf-v6-c-label pf-m-outline pf-m-yellow pf-m-clickable">
|
|
4518
4522
|
<a class="pf-v6-c-label__content pf-m-clickable" href="#">
|
|
4519
4523
|
<span
|
|
4520
4524
|
class="pf-v6-c-label__text"
|
|
4521
|
-
id="
|
|
4522
|
-
>
|
|
4525
|
+
id="yellow-outline-link-removable-text"
|
|
4526
|
+
>Yellow link removable</span>
|
|
4523
4527
|
</a>
|
|
4524
4528
|
<span class="pf-v6-c-label__actions">
|
|
4525
4529
|
<button
|
|
4526
4530
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
4527
4531
|
type="button"
|
|
4528
|
-
id="
|
|
4532
|
+
id="yellow-outline-link-removable-button"
|
|
4529
4533
|
aria-label="Remove"
|
|
4530
|
-
aria-labelledby="
|
|
4534
|
+
aria-labelledby="yellow-outline-link-removable-button yellow-outline-link-removable-text"
|
|
4531
4535
|
>
|
|
4532
4536
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
4533
4537
|
</button>
|
|
4534
4538
|
</span>
|
|
4535
4539
|
</span>
|
|
4536
4540
|
|
|
4537
|
-
<span class="pf-v6-c-label pf-m-outline pf-m-
|
|
4541
|
+
<span class="pf-v6-c-label pf-m-outline pf-m-yellow pf-m-clickable">
|
|
4538
4542
|
<button class="pf-v6-c-label__content pf-m-clickable" type="button">
|
|
4539
4543
|
<span
|
|
4540
4544
|
class="pf-v6-c-label__text"
|
|
4541
|
-
id="
|
|
4542
|
-
>
|
|
4545
|
+
id="yellow-outline-button-removable-text"
|
|
4546
|
+
>Yellow button removable</span>
|
|
4543
4547
|
</button>
|
|
4544
4548
|
<span class="pf-v6-c-label__actions">
|
|
4545
4549
|
<button
|
|
4546
4550
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
4547
4551
|
type="button"
|
|
4548
|
-
id="
|
|
4552
|
+
id="yellow-outline-button-removable-button"
|
|
4549
4553
|
aria-label="Remove"
|
|
4550
|
-
aria-labelledby="
|
|
4554
|
+
aria-labelledby="yellow-outline-button-removable-button yellow-outline-button-removable-text"
|
|
4551
4555
|
>
|
|
4552
4556
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
4553
4557
|
</button>
|
|
4554
4558
|
</span>
|
|
4555
4559
|
</span>
|
|
4556
4560
|
|
|
4557
|
-
<span class="pf-v6-c-label pf-m-outline pf-m-
|
|
4561
|
+
<span class="pf-v6-c-label pf-m-outline pf-m-yellow">
|
|
4558
4562
|
<span class="pf-v6-c-label__content">
|
|
4559
4563
|
<span class="pf-v6-c-label__icon">
|
|
4560
4564
|
<i class="fas fa-fw fa-cube" aria-hidden="true"></i>
|
|
@@ -4562,35 +4566,37 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
|
|
|
4562
4566
|
<span
|
|
4563
4567
|
class="pf-v6-c-label__text"
|
|
4564
4568
|
style="--pf-v6-c-label__text--MaxWidth: 28ch"
|
|
4565
|
-
>
|
|
4569
|
+
>Yellow label, max-width truncation customization</span>
|
|
4566
4570
|
</span>
|
|
4567
4571
|
</span>
|
|
4568
4572
|
|
|
4569
|
-
<span class="pf-v6-c-label pf-m-outline pf-m-
|
|
4573
|
+
<span class="pf-v6-c-label pf-m-outline pf-m-yellow">
|
|
4570
4574
|
<span class="pf-v6-c-label__content">
|
|
4571
4575
|
<span class="pf-v6-c-label__icon">
|
|
4572
4576
|
<i class="fas fa-fw fa-cube" aria-hidden="true"></i>
|
|
4573
4577
|
</span>
|
|
4574
4578
|
<span
|
|
4575
4579
|
class="pf-v6-c-label__text"
|
|
4576
|
-
id="
|
|
4580
|
+
id="yellow-outline-truncated-with-icon-text"
|
|
4577
4581
|
style="--pf-v6-c-label__text--MaxWidth: 38ch"
|
|
4578
|
-
>
|
|
4582
|
+
>Yellow label with icon and set max-width truncation customization</span>
|
|
4579
4583
|
</span>
|
|
4580
4584
|
<span class="pf-v6-c-label__actions">
|
|
4581
4585
|
<button
|
|
4582
4586
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
4583
4587
|
type="button"
|
|
4584
|
-
id="
|
|
4588
|
+
id="yellow-outline-truncated-with-icon-button"
|
|
4585
4589
|
aria-label="Remove"
|
|
4586
|
-
aria-labelledby="
|
|
4590
|
+
aria-labelledby="yellow-outline-truncated-with-icon-button yellow-outline-truncated-with-icon-text"
|
|
4587
4591
|
>
|
|
4588
4592
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
4589
4593
|
</button>
|
|
4590
4594
|
</span>
|
|
4591
4595
|
</span>
|
|
4592
4596
|
|
|
4593
|
-
<span
|
|
4597
|
+
<span
|
|
4598
|
+
class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-yellow pf-m-clickable"
|
|
4599
|
+
>
|
|
4594
4600
|
<a
|
|
4595
4601
|
class="pf-v6-c-label__content pf-m-clickable"
|
|
4596
4602
|
href="#"
|
|
@@ -4602,41 +4608,43 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
|
|
|
4602
4608
|
</span>
|
|
4603
4609
|
<span
|
|
4604
4610
|
class="pf-v6-c-label__text"
|
|
4605
|
-
id="
|
|
4606
|
-
>
|
|
4611
|
+
id="yellow-outline-link-removable-disabled-text"
|
|
4612
|
+
>Yellow link removable (disabled)</span>
|
|
4607
4613
|
</a>
|
|
4608
4614
|
<span class="pf-v6-c-label__actions">
|
|
4609
4615
|
<button
|
|
4610
4616
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
4611
4617
|
type="button"
|
|
4612
4618
|
disabled
|
|
4613
|
-
id="
|
|
4619
|
+
id="yellow-outline-link-removable-disabled-button"
|
|
4614
4620
|
aria-label="Remove"
|
|
4615
|
-
aria-labelledby="
|
|
4621
|
+
aria-labelledby="yellow-outline-link-removable-disabled-button yellow-outline-link-removable-disabled-text"
|
|
4616
4622
|
>
|
|
4617
4623
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
4618
4624
|
</button>
|
|
4619
4625
|
</span>
|
|
4620
4626
|
</span>
|
|
4621
4627
|
|
|
4622
|
-
<span
|
|
4628
|
+
<span
|
|
4629
|
+
class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-yellow pf-m-clickable"
|
|
4630
|
+
>
|
|
4623
4631
|
<button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
|
|
4624
4632
|
<span class="pf-v6-c-label__icon">
|
|
4625
4633
|
<i class="fas fa-fw fa-cube" aria-hidden="true"></i>
|
|
4626
4634
|
</span>
|
|
4627
4635
|
<span
|
|
4628
4636
|
class="pf-v6-c-label__text"
|
|
4629
|
-
id="
|
|
4630
|
-
>
|
|
4637
|
+
id="yellow-outline-button-removable-disabled-text"
|
|
4638
|
+
>Yellow button removable (disabled)</span>
|
|
4631
4639
|
</button>
|
|
4632
4640
|
<span class="pf-v6-c-label__actions">
|
|
4633
4641
|
<button
|
|
4634
4642
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
4635
4643
|
type="button"
|
|
4636
4644
|
disabled
|
|
4637
|
-
id="
|
|
4645
|
+
id="yellow-outline-button-removable-disabled-button"
|
|
4638
4646
|
aria-label="Remove"
|
|
4639
|
-
aria-labelledby="
|
|
4647
|
+
aria-labelledby="yellow-outline-button-removable-disabled-button yellow-outline-button-removable-disabled-text"
|
|
4640
4648
|
>
|
|
4641
4649
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
4642
4650
|
</button>
|
|
@@ -6262,7 +6270,7 @@ Use a label group to display multiple labels at once.
|
|
|
6262
6270
|
</span>
|
|
6263
6271
|
</li>
|
|
6264
6272
|
<li class="pf-v6-c-label-group__list-item">
|
|
6265
|
-
<span class="pf-v6-c-label pf-m-
|
|
6273
|
+
<span class="pf-v6-c-label pf-m-teal">
|
|
6266
6274
|
<span class="pf-v6-c-label__content">
|
|
6267
6275
|
<span class="pf-v6-c-label__icon">
|
|
6268
6276
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
@@ -6446,7 +6454,7 @@ The contents of a label group can be modified by removing labels or adding new o
|
|
|
6446
6454
|
</span>
|
|
6447
6455
|
</li>
|
|
6448
6456
|
<li class="pf-v6-c-label-group__list-item">
|
|
6449
|
-
<span class="pf-v6-c-label pf-m-
|
|
6457
|
+
<span class="pf-v6-c-label pf-m-teal">
|
|
6450
6458
|
<span class="pf-v6-c-label__content">
|
|
6451
6459
|
<span class="pf-v6-c-label__icon">
|
|
6452
6460
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
@@ -6632,7 +6640,7 @@ The contents of a label group can be modified by removing labels or adding new o
|
|
|
6632
6640
|
</span>
|
|
6633
6641
|
</li>
|
|
6634
6642
|
<li class="pf-v6-c-label-group__list-item">
|
|
6635
|
-
<span class="pf-v6-c-label pf-m-
|
|
6643
|
+
<span class="pf-v6-c-label pf-m-teal">
|
|
6636
6644
|
<span class="pf-v6-c-label__content">
|
|
6637
6645
|
<span class="pf-v6-c-label__icon">
|
|
6638
6646
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
@@ -7361,8 +7369,8 @@ In addition to the JavaScript management of [editable labels](/components/label#
|
|
|
7361
7369
|
| `.pf-m-orange` | `.pf-v6-c-label` | Modifies the label to have orange colored styling. |
|
|
7362
7370
|
| `.pf-m-red` | `.pf-v6-c-label` | Modifies the label to have red colored styling. |
|
|
7363
7371
|
| `.pf-m-purple` | `.pf-v6-c-label` | Modifies the label to have purple colored styling. |
|
|
7364
|
-
| `.pf-m-
|
|
7365
|
-
| `.pf-m-
|
|
7372
|
+
| `.pf-m-teal` | `.pf-v6-c-label` | Modifies the label to have teal colored styling. |
|
|
7373
|
+
| `.pf-m-yellow` | `.pf-v6-c-label` | Modifies the label to have yellow colored styling. |
|
|
7366
7374
|
| `.pf-m-success` | `.pf-v6-c-label` | Modifies the label to have success colored styling. |
|
|
7367
7375
|
| `.pf-m-warning` | `.pf-v6-c-label` | Modifies the label to have warning colored styling. |
|
|
7368
7376
|
| `.pf-m-danger` | `.pf-v6-c-label` | Modifies the label to have danger colored styling. |
|