@patternfly/patternfly 5.0.0-alpha.20 → 5.0.0-alpha.22

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 (29) hide show
  1. package/components/Chip/chip.css +33 -24
  2. package/components/Chip/chip.scss +40 -31
  3. package/components/Label/label.css +35 -24
  4. package/components/Label/label.scss +40 -27
  5. package/components/Table/table-tree-view.css +10 -0
  6. package/components/Table/table-tree-view.scss +15 -0
  7. package/components/Table/table.css +4 -0
  8. package/components/Table/table.scss +4 -0
  9. package/docs/components/Chip/examples/Chip.md +61 -43
  10. package/docs/components/ChipGroup/examples/ChipGroup.md +437 -329
  11. package/docs/components/InlineEdit/examples/InlineEdit.md +5 -3
  12. package/docs/components/Label/examples/Label.md +1399 -718
  13. package/docs/components/LabelGroup/examples/LabelGroup.md +274 -209
  14. package/docs/components/Select/examples/Select.md +224 -170
  15. package/docs/components/Table/examples/Table.md +565 -41
  16. package/docs/components/TextInputGroup/examples/TextInputGroup.md +343 -261
  17. package/docs/components/Toolbar/examples/Toolbar.md +306 -234
  18. package/docs/demos/Card/examples/Card.md +29 -27
  19. package/docs/demos/Dashboard/examples/Dashboard.md +23 -15
  20. package/docs/demos/DescriptionList/examples/DescriptionList.md +21 -9
  21. package/docs/demos/Drawer/examples/Drawer.md +4 -2
  22. package/docs/demos/Form/examples/BasicForms.md +28 -22
  23. package/docs/demos/Tabs/examples/Tabs.md +39 -16
  24. package/docs/demos/Toolbar/examples/Toolbar.md +102 -78
  25. package/package.json +2 -2
  26. package/patternfly-no-reset.css +82 -48
  27. package/patternfly.css +82 -48
  28. package/patternfly.min.css +1 -1
  29. package/patternfly.min.css.map +1 -1
@@ -1507,53 +1507,65 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1507
1507
  >
1508
1508
  <li class="pf-c-chip-group__list-item">
1509
1509
  <div class="pf-c-chip">
1510
- <span
1511
- class="pf-c-chip__text"
1512
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-one"
1513
- >Chip one</span>
1514
- <button
1515
- class="pf-c-button pf-m-plain"
1516
- type="button"
1517
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-one toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-one"
1518
- aria-label="Remove"
1519
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-one"
1520
- >
1521
- <i class="fas fa-times" aria-hidden="true"></i>
1522
- </button>
1510
+ <span class="pf-c-chip__content">
1511
+ <span
1512
+ class="pf-c-chip__text"
1513
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-one"
1514
+ >Chip one</span>
1515
+ </span>
1516
+ <span class="pf-c-chip__actions">
1517
+ <button
1518
+ class="pf-c-button pf-m-plain"
1519
+ type="button"
1520
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-one toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-one"
1521
+ aria-label="Remove"
1522
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-one"
1523
+ >
1524
+ <i class="fas fa-times" aria-hidden="true"></i>
1525
+ </button>
1526
+ </span>
1523
1527
  </div>
1524
1528
  </li>
1525
1529
  <li class="pf-c-chip-group__list-item">
1526
1530
  <div class="pf-c-chip">
1527
- <span
1528
- class="pf-c-chip__text"
1529
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-two"
1530
- >Chip two</span>
1531
- <button
1532
- class="pf-c-button pf-m-plain"
1533
- type="button"
1534
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-two toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-two"
1535
- aria-label="Remove"
1536
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-two"
1537
- >
1538
- <i class="fas fa-times" aria-hidden="true"></i>
1539
- </button>
1531
+ <span class="pf-c-chip__content">
1532
+ <span
1533
+ class="pf-c-chip__text"
1534
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-two"
1535
+ >Chip two</span>
1536
+ </span>
1537
+ <span class="pf-c-chip__actions">
1538
+ <button
1539
+ class="pf-c-button pf-m-plain"
1540
+ type="button"
1541
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-two toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-two"
1542
+ aria-label="Remove"
1543
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-two"
1544
+ >
1545
+ <i class="fas fa-times" aria-hidden="true"></i>
1546
+ </button>
1547
+ </span>
1540
1548
  </div>
1541
1549
  </li>
1542
1550
  <li class="pf-c-chip-group__list-item">
1543
1551
  <div class="pf-c-chip">
1544
- <span
1545
- class="pf-c-chip__text"
1546
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-three"
1547
- >Chip three</span>
1548
- <button
1549
- class="pf-c-button pf-m-plain"
1550
- type="button"
1551
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-three toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-three"
1552
- aria-label="Remove"
1553
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-three"
1554
- >
1555
- <i class="fas fa-times" aria-hidden="true"></i>
1556
- </button>
1552
+ <span class="pf-c-chip__content">
1553
+ <span
1554
+ class="pf-c-chip__text"
1555
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-three"
1556
+ >Chip three</span>
1557
+ </span>
1558
+ <span class="pf-c-chip__actions">
1559
+ <button
1560
+ class="pf-c-button pf-m-plain"
1561
+ type="button"
1562
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-three toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-three"
1563
+ aria-label="Remove"
1564
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-three"
1565
+ >
1566
+ <i class="fas fa-times" aria-hidden="true"></i>
1567
+ </button>
1568
+ </span>
1557
1569
  </div>
1558
1570
  </li>
1559
1571
  </ul>
@@ -1575,53 +1587,65 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1575
1587
  >
1576
1588
  <li class="pf-c-chip-group__list-item">
1577
1589
  <div class="pf-c-chip">
1578
- <span
1579
- class="pf-c-chip__text"
1580
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-one"
1581
- >Chip one</span>
1582
- <button
1583
- class="pf-c-button pf-m-plain"
1584
- type="button"
1585
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-one toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-one"
1586
- aria-label="Remove"
1587
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-one"
1588
- >
1589
- <i class="fas fa-times" aria-hidden="true"></i>
1590
- </button>
1590
+ <span class="pf-c-chip__content">
1591
+ <span
1592
+ class="pf-c-chip__text"
1593
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-one"
1594
+ >Chip one</span>
1595
+ </span>
1596
+ <span class="pf-c-chip__actions">
1597
+ <button
1598
+ class="pf-c-button pf-m-plain"
1599
+ type="button"
1600
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-one toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-one"
1601
+ aria-label="Remove"
1602
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-one"
1603
+ >
1604
+ <i class="fas fa-times" aria-hidden="true"></i>
1605
+ </button>
1606
+ </span>
1591
1607
  </div>
1592
1608
  </li>
1593
1609
  <li class="pf-c-chip-group__list-item">
1594
1610
  <div class="pf-c-chip">
1595
- <span
1596
- class="pf-c-chip__text"
1597
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-two"
1598
- >Chip two</span>
1599
- <button
1600
- class="pf-c-button pf-m-plain"
1601
- type="button"
1602
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-two toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-two"
1603
- aria-label="Remove"
1604
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-two"
1605
- >
1606
- <i class="fas fa-times" aria-hidden="true"></i>
1607
- </button>
1611
+ <span class="pf-c-chip__content">
1612
+ <span
1613
+ class="pf-c-chip__text"
1614
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-two"
1615
+ >Chip two</span>
1616
+ </span>
1617
+ <span class="pf-c-chip__actions">
1618
+ <button
1619
+ class="pf-c-button pf-m-plain"
1620
+ type="button"
1621
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-two toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-two"
1622
+ aria-label="Remove"
1623
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-two"
1624
+ >
1625
+ <i class="fas fa-times" aria-hidden="true"></i>
1626
+ </button>
1627
+ </span>
1608
1628
  </div>
1609
1629
  </li>
1610
1630
  <li class="pf-c-chip-group__list-item">
1611
1631
  <div class="pf-c-chip">
1612
- <span
1613
- class="pf-c-chip__text"
1614
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-three"
1615
- >Chip three</span>
1616
- <button
1617
- class="pf-c-button pf-m-plain"
1618
- type="button"
1619
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-three toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-three"
1620
- aria-label="Remove"
1621
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-three"
1622
- >
1623
- <i class="fas fa-times" aria-hidden="true"></i>
1624
- </button>
1632
+ <span class="pf-c-chip__content">
1633
+ <span
1634
+ class="pf-c-chip__text"
1635
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-three"
1636
+ >Chip three</span>
1637
+ </span>
1638
+ <span class="pf-c-chip__actions">
1639
+ <button
1640
+ class="pf-c-button pf-m-plain"
1641
+ type="button"
1642
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-three toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-three"
1643
+ aria-label="Remove"
1644
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-three"
1645
+ >
1646
+ <i class="fas fa-times" aria-hidden="true"></i>
1647
+ </button>
1648
+ </span>
1625
1649
  </div>
1626
1650
  </li>
1627
1651
  </ul>
@@ -2050,53 +2074,65 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2050
2074
  >
2051
2075
  <li class="pf-c-chip-group__list-item">
2052
2076
  <div class="pf-c-chip">
2053
- <span
2054
- class="pf-c-chip__text"
2055
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-one"
2056
- >Chip one</span>
2057
- <button
2058
- class="pf-c-button pf-m-plain"
2059
- type="button"
2060
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-one toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-one"
2061
- aria-label="Remove"
2062
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-one"
2063
- >
2064
- <i class="fas fa-times" aria-hidden="true"></i>
2065
- </button>
2077
+ <span class="pf-c-chip__content">
2078
+ <span
2079
+ class="pf-c-chip__text"
2080
+ id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-one"
2081
+ >Chip one</span>
2082
+ </span>
2083
+ <span class="pf-c-chip__actions">
2084
+ <button
2085
+ class="pf-c-button pf-m-plain"
2086
+ type="button"
2087
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-one toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-one"
2088
+ aria-label="Remove"
2089
+ id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-one"
2090
+ >
2091
+ <i class="fas fa-times" aria-hidden="true"></i>
2092
+ </button>
2093
+ </span>
2066
2094
  </div>
2067
2095
  </li>
2068
2096
  <li class="pf-c-chip-group__list-item">
2069
2097
  <div class="pf-c-chip">
2070
- <span
2071
- class="pf-c-chip__text"
2072
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-two"
2073
- >Chip two</span>
2074
- <button
2075
- class="pf-c-button pf-m-plain"
2076
- type="button"
2077
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-two toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-two"
2078
- aria-label="Remove"
2079
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-two"
2080
- >
2081
- <i class="fas fa-times" aria-hidden="true"></i>
2082
- </button>
2098
+ <span class="pf-c-chip__content">
2099
+ <span
2100
+ class="pf-c-chip__text"
2101
+ id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-two"
2102
+ >Chip two</span>
2103
+ </span>
2104
+ <span class="pf-c-chip__actions">
2105
+ <button
2106
+ class="pf-c-button pf-m-plain"
2107
+ type="button"
2108
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-two toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-two"
2109
+ aria-label="Remove"
2110
+ id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-two"
2111
+ >
2112
+ <i class="fas fa-times" aria-hidden="true"></i>
2113
+ </button>
2114
+ </span>
2083
2115
  </div>
2084
2116
  </li>
2085
2117
  <li class="pf-c-chip-group__list-item">
2086
2118
  <div class="pf-c-chip">
2087
- <span
2088
- class="pf-c-chip__text"
2089
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-three"
2090
- >Chip three</span>
2091
- <button
2092
- class="pf-c-button pf-m-plain"
2093
- type="button"
2094
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-three toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-three"
2095
- aria-label="Remove"
2096
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-three"
2097
- >
2098
- <i class="fas fa-times" aria-hidden="true"></i>
2099
- </button>
2119
+ <span class="pf-c-chip__content">
2120
+ <span
2121
+ class="pf-c-chip__text"
2122
+ id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-three"
2123
+ >Chip three</span>
2124
+ </span>
2125
+ <span class="pf-c-chip__actions">
2126
+ <button
2127
+ class="pf-c-button pf-m-plain"
2128
+ type="button"
2129
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-three toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-three"
2130
+ aria-label="Remove"
2131
+ id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-three"
2132
+ >
2133
+ <i class="fas fa-times" aria-hidden="true"></i>
2134
+ </button>
2135
+ </span>
2100
2136
  </div>
2101
2137
  </li>
2102
2138
  </ul>
@@ -2118,53 +2154,65 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2118
2154
  >
2119
2155
  <li class="pf-c-chip-group__list-item">
2120
2156
  <div class="pf-c-chip">
2121
- <span
2122
- class="pf-c-chip__text"
2123
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-one"
2124
- >Chip one</span>
2125
- <button
2126
- class="pf-c-button pf-m-plain"
2127
- type="button"
2128
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-one toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-one"
2129
- aria-label="Remove"
2130
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-one"
2131
- >
2132
- <i class="fas fa-times" aria-hidden="true"></i>
2133
- </button>
2157
+ <span class="pf-c-chip__content">
2158
+ <span
2159
+ class="pf-c-chip__text"
2160
+ id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-one"
2161
+ >Chip one</span>
2162
+ </span>
2163
+ <span class="pf-c-chip__actions">
2164
+ <button
2165
+ class="pf-c-button pf-m-plain"
2166
+ type="button"
2167
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-one toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-one"
2168
+ aria-label="Remove"
2169
+ id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-one"
2170
+ >
2171
+ <i class="fas fa-times" aria-hidden="true"></i>
2172
+ </button>
2173
+ </span>
2134
2174
  </div>
2135
2175
  </li>
2136
2176
  <li class="pf-c-chip-group__list-item">
2137
2177
  <div class="pf-c-chip">
2138
- <span
2139
- class="pf-c-chip__text"
2140
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-two"
2141
- >Chip two</span>
2142
- <button
2143
- class="pf-c-button pf-m-plain"
2144
- type="button"
2145
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-two toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-two"
2146
- aria-label="Remove"
2147
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-two"
2148
- >
2149
- <i class="fas fa-times" aria-hidden="true"></i>
2150
- </button>
2178
+ <span class="pf-c-chip__content">
2179
+ <span
2180
+ class="pf-c-chip__text"
2181
+ id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-two"
2182
+ >Chip two</span>
2183
+ </span>
2184
+ <span class="pf-c-chip__actions">
2185
+ <button
2186
+ class="pf-c-button pf-m-plain"
2187
+ type="button"
2188
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-two toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-two"
2189
+ aria-label="Remove"
2190
+ id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-two"
2191
+ >
2192
+ <i class="fas fa-times" aria-hidden="true"></i>
2193
+ </button>
2194
+ </span>
2151
2195
  </div>
2152
2196
  </li>
2153
2197
  <li class="pf-c-chip-group__list-item">
2154
2198
  <div class="pf-c-chip">
2155
- <span
2156
- class="pf-c-chip__text"
2157
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-three"
2158
- >Chip three</span>
2159
- <button
2160
- class="pf-c-button pf-m-plain"
2161
- type="button"
2162
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-three toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-three"
2163
- aria-label="Remove"
2164
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-three"
2165
- >
2166
- <i class="fas fa-times" aria-hidden="true"></i>
2167
- </button>
2199
+ <span class="pf-c-chip__content">
2200
+ <span
2201
+ class="pf-c-chip__text"
2202
+ id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-three"
2203
+ >Chip three</span>
2204
+ </span>
2205
+ <span class="pf-c-chip__actions">
2206
+ <button
2207
+ class="pf-c-button pf-m-plain"
2208
+ type="button"
2209
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-three toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-three"
2210
+ aria-label="Remove"
2211
+ id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-three"
2212
+ >
2213
+ <i class="fas fa-times" aria-hidden="true"></i>
2214
+ </button>
2215
+ </span>
2168
2216
  </div>
2169
2217
  </li>
2170
2218
  </ul>
@@ -2551,53 +2599,65 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2551
2599
  >
2552
2600
  <li class="pf-c-chip-group__list-item">
2553
2601
  <div class="pf-c-chip">
2554
- <span
2555
- class="pf-c-chip__text"
2556
- id="toolbar-selected-filters-example-chip-group-statuschip-one"
2557
- >Chip one</span>
2558
- <button
2559
- class="pf-c-button pf-m-plain"
2560
- type="button"
2561
- aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-one toolbar-selected-filters-example-chip-group-statuschip-one"
2562
- aria-label="Remove"
2563
- id="toolbar-selected-filters-example-chip-group-statusremove-chip-one"
2564
- >
2565
- <i class="fas fa-times" aria-hidden="true"></i>
2566
- </button>
2602
+ <span class="pf-c-chip__content">
2603
+ <span
2604
+ class="pf-c-chip__text"
2605
+ id="toolbar-selected-filters-example-chip-group-statuschip-one"
2606
+ >Chip one</span>
2607
+ </span>
2608
+ <span class="pf-c-chip__actions">
2609
+ <button
2610
+ class="pf-c-button pf-m-plain"
2611
+ type="button"
2612
+ aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-one toolbar-selected-filters-example-chip-group-statuschip-one"
2613
+ aria-label="Remove"
2614
+ id="toolbar-selected-filters-example-chip-group-statusremove-chip-one"
2615
+ >
2616
+ <i class="fas fa-times" aria-hidden="true"></i>
2617
+ </button>
2618
+ </span>
2567
2619
  </div>
2568
2620
  </li>
2569
2621
  <li class="pf-c-chip-group__list-item">
2570
2622
  <div class="pf-c-chip">
2571
- <span
2572
- class="pf-c-chip__text"
2573
- id="toolbar-selected-filters-example-chip-group-statuschip-two"
2574
- >Chip two</span>
2575
- <button
2576
- class="pf-c-button pf-m-plain"
2577
- type="button"
2578
- aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-two toolbar-selected-filters-example-chip-group-statuschip-two"
2579
- aria-label="Remove"
2580
- id="toolbar-selected-filters-example-chip-group-statusremove-chip-two"
2581
- >
2582
- <i class="fas fa-times" aria-hidden="true"></i>
2583
- </button>
2623
+ <span class="pf-c-chip__content">
2624
+ <span
2625
+ class="pf-c-chip__text"
2626
+ id="toolbar-selected-filters-example-chip-group-statuschip-two"
2627
+ >Chip two</span>
2628
+ </span>
2629
+ <span class="pf-c-chip__actions">
2630
+ <button
2631
+ class="pf-c-button pf-m-plain"
2632
+ type="button"
2633
+ aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-two toolbar-selected-filters-example-chip-group-statuschip-two"
2634
+ aria-label="Remove"
2635
+ id="toolbar-selected-filters-example-chip-group-statusremove-chip-two"
2636
+ >
2637
+ <i class="fas fa-times" aria-hidden="true"></i>
2638
+ </button>
2639
+ </span>
2584
2640
  </div>
2585
2641
  </li>
2586
2642
  <li class="pf-c-chip-group__list-item">
2587
2643
  <div class="pf-c-chip">
2588
- <span
2589
- class="pf-c-chip__text"
2590
- id="toolbar-selected-filters-example-chip-group-statuschip-three"
2591
- >Chip three</span>
2592
- <button
2593
- class="pf-c-button pf-m-plain"
2594
- type="button"
2595
- aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-three toolbar-selected-filters-example-chip-group-statuschip-three"
2596
- aria-label="Remove"
2597
- id="toolbar-selected-filters-example-chip-group-statusremove-chip-three"
2598
- >
2599
- <i class="fas fa-times" aria-hidden="true"></i>
2600
- </button>
2644
+ <span class="pf-c-chip__content">
2645
+ <span
2646
+ class="pf-c-chip__text"
2647
+ id="toolbar-selected-filters-example-chip-group-statuschip-three"
2648
+ >Chip three</span>
2649
+ </span>
2650
+ <span class="pf-c-chip__actions">
2651
+ <button
2652
+ class="pf-c-button pf-m-plain"
2653
+ type="button"
2654
+ aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-three toolbar-selected-filters-example-chip-group-statuschip-three"
2655
+ aria-label="Remove"
2656
+ id="toolbar-selected-filters-example-chip-group-statusremove-chip-three"
2657
+ >
2658
+ <i class="fas fa-times" aria-hidden="true"></i>
2659
+ </button>
2660
+ </span>
2601
2661
  </div>
2602
2662
  </li>
2603
2663
  </ul>
@@ -2619,53 +2679,65 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2619
2679
  >
2620
2680
  <li class="pf-c-chip-group__list-item">
2621
2681
  <div class="pf-c-chip">
2622
- <span
2623
- class="pf-c-chip__text"
2624
- id="toolbar-selected-filters-example-chip-group-riskchip-one"
2625
- >Chip one</span>
2626
- <button
2627
- class="pf-c-button pf-m-plain"
2628
- type="button"
2629
- aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-one toolbar-selected-filters-example-chip-group-riskchip-one"
2630
- aria-label="Remove"
2631
- id="toolbar-selected-filters-example-chip-group-riskremove-chip-one"
2632
- >
2633
- <i class="fas fa-times" aria-hidden="true"></i>
2634
- </button>
2682
+ <span class="pf-c-chip__content">
2683
+ <span
2684
+ class="pf-c-chip__text"
2685
+ id="toolbar-selected-filters-example-chip-group-riskchip-one"
2686
+ >Chip one</span>
2687
+ </span>
2688
+ <span class="pf-c-chip__actions">
2689
+ <button
2690
+ class="pf-c-button pf-m-plain"
2691
+ type="button"
2692
+ aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-one toolbar-selected-filters-example-chip-group-riskchip-one"
2693
+ aria-label="Remove"
2694
+ id="toolbar-selected-filters-example-chip-group-riskremove-chip-one"
2695
+ >
2696
+ <i class="fas fa-times" aria-hidden="true"></i>
2697
+ </button>
2698
+ </span>
2635
2699
  </div>
2636
2700
  </li>
2637
2701
  <li class="pf-c-chip-group__list-item">
2638
2702
  <div class="pf-c-chip">
2639
- <span
2640
- class="pf-c-chip__text"
2641
- id="toolbar-selected-filters-example-chip-group-riskchip-two"
2642
- >Chip two</span>
2643
- <button
2644
- class="pf-c-button pf-m-plain"
2645
- type="button"
2646
- aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-two toolbar-selected-filters-example-chip-group-riskchip-two"
2647
- aria-label="Remove"
2648
- id="toolbar-selected-filters-example-chip-group-riskremove-chip-two"
2649
- >
2650
- <i class="fas fa-times" aria-hidden="true"></i>
2651
- </button>
2703
+ <span class="pf-c-chip__content">
2704
+ <span
2705
+ class="pf-c-chip__text"
2706
+ id="toolbar-selected-filters-example-chip-group-riskchip-two"
2707
+ >Chip two</span>
2708
+ </span>
2709
+ <span class="pf-c-chip__actions">
2710
+ <button
2711
+ class="pf-c-button pf-m-plain"
2712
+ type="button"
2713
+ aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-two toolbar-selected-filters-example-chip-group-riskchip-two"
2714
+ aria-label="Remove"
2715
+ id="toolbar-selected-filters-example-chip-group-riskremove-chip-two"
2716
+ >
2717
+ <i class="fas fa-times" aria-hidden="true"></i>
2718
+ </button>
2719
+ </span>
2652
2720
  </div>
2653
2721
  </li>
2654
2722
  <li class="pf-c-chip-group__list-item">
2655
2723
  <div class="pf-c-chip">
2656
- <span
2657
- class="pf-c-chip__text"
2658
- id="toolbar-selected-filters-example-chip-group-riskchip-three"
2659
- >Chip three</span>
2660
- <button
2661
- class="pf-c-button pf-m-plain"
2662
- type="button"
2663
- aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-three toolbar-selected-filters-example-chip-group-riskchip-three"
2664
- aria-label="Remove"
2665
- id="toolbar-selected-filters-example-chip-group-riskremove-chip-three"
2666
- >
2667
- <i class="fas fa-times" aria-hidden="true"></i>
2668
- </button>
2724
+ <span class="pf-c-chip__content">
2725
+ <span
2726
+ class="pf-c-chip__text"
2727
+ id="toolbar-selected-filters-example-chip-group-riskchip-three"
2728
+ >Chip three</span>
2729
+ </span>
2730
+ <span class="pf-c-chip__actions">
2731
+ <button
2732
+ class="pf-c-button pf-m-plain"
2733
+ type="button"
2734
+ aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-three toolbar-selected-filters-example-chip-group-riskchip-three"
2735
+ aria-label="Remove"
2736
+ id="toolbar-selected-filters-example-chip-group-riskremove-chip-three"
2737
+ >
2738
+ <i class="fas fa-times" aria-hidden="true"></i>
2739
+ </button>
2740
+ </span>
2669
2741
  </div>
2670
2742
  </li>
2671
2743
  </ul>