@patternfly/patternfly 5.0.0-alpha.21 → 5.0.0-alpha.23

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 (31) 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/Popover/popover.css +21 -24
  6. package/components/Popover/popover.scss +25 -32
  7. package/components/Table/table-tree-view.css +10 -0
  8. package/components/Table/table-tree-view.scss +15 -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/LogViewer/examples/LogViewer.md +10 -4
  15. package/docs/components/Popover/examples/Popover.md +175 -104
  16. package/docs/components/Select/examples/Select.md +224 -170
  17. package/docs/components/Table/examples/Table.md +565 -41
  18. package/docs/components/TextInputGroup/examples/TextInputGroup.md +343 -261
  19. package/docs/components/Toolbar/examples/Toolbar.md +306 -234
  20. package/docs/demos/Card/examples/Card.md +46 -38
  21. package/docs/demos/Dashboard/examples/Dashboard.md +23 -15
  22. package/docs/demos/DescriptionList/examples/DescriptionList.md +21 -9
  23. package/docs/demos/Drawer/examples/Drawer.md +4 -2
  24. package/docs/demos/Form/examples/BasicForms.md +28 -22
  25. package/docs/demos/Tabs/examples/Tabs.md +39 -16
  26. package/docs/demos/Toolbar/examples/Toolbar.md +102 -78
  27. package/package.json +2 -2
  28. package/patternfly-no-reset.css +99 -72
  29. package/patternfly.css +99 -72
  30. package/patternfly.min.css +1 -1
  31. package/patternfly.min.css.map +1 -1
package/docs/demos/Card/examples/Card.md CHANGED
@@ -82,41 +82,43 @@ wrapperTag: div
82
82
  aria-label="Group of labels"
83
83
  >
84
84
  <li class="pf-c-label-group__list-item">
85
- <span class="pf-c-label pf-m-blue pf-m-compact">
85
+ <span class="pf-c-label pf-m-compact">
86
86
  <span class="pf-c-label__content">
87
87
  <span class="pf-c-label__icon">
88
88
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
89
89
  </span>
90
- Set up your cluster
90
+ <span class="pf-c-label__text">Set up your cluster</span>
91
91
  </span>
92
92
  </span>
93
93
  </li>
94
94
  <li class="pf-c-label-group__list-item">
95
- <span class="pf-c-label pf-m-purple pf-m-compact">
95
+ <span class="pf-c-label pf-m-compact pf-m-purple">
96
96
  <span class="pf-c-label__content">
97
97
  <span class="pf-c-label__icon">
98
98
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
99
99
  </span>
100
- Guided tours
100
+ <span class="pf-c-label__text">Guided tours</span>
101
101
  </span>
102
102
  </span>
103
103
  </li>
104
104
  <li class="pf-c-label-group__list-item">
105
- <span class="pf-c-label pf-m-green pf-m-compact">
105
+ <span class="pf-c-label pf-m-compact pf-m-green">
106
106
  <span class="pf-c-label__content">
107
107
  <span class="pf-c-label__icon">
108
108
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
109
109
  </span>
110
- Quick starts
110
+ <span class="pf-c-label__text">Quick starts</span>
111
111
  </span>
112
112
  </span>
113
113
  </li>
114
114
  <li class="pf-c-label-group__list-item">
115
115
  <button
116
- class="pf-c-label pf-m-overflow pf-m-compact"
116
+ class="pf-c-label pf-m-compact pf-m-overflow"
117
117
  type="button"
118
118
  >
119
- <span class="pf-c-label__content">1 more</span>
119
+ <span class="pf-c-label__content">
120
+ <span class="pf-c-label__text">1 more</span>
121
+ </span>
120
122
  </button>
121
123
  </li>
122
124
  </ul>
@@ -217,7 +219,7 @@ wrapperTag: div
217
219
  <span class="pf-c-label__icon">
218
220
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
219
221
  </span>
220
- Set up your cluster
222
+ <span class="pf-c-label__text">Set up your cluster</span>
221
223
  </span>
222
224
  </span>
223
225
  <p>Continue setting up your cluster to access all you cain in the Console</p>
@@ -253,7 +255,7 @@ wrapperTag: div
253
255
  <span class="pf-c-label__icon">
254
256
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
255
257
  </span>
256
- Guided tours
258
+ <span class="pf-c-label__text">Guided tours</span>
257
259
  </span>
258
260
  </span>
259
261
  <p>Tour some of the key features around the console</p>
@@ -284,7 +286,7 @@ wrapperTag: div
284
286
  <span class="pf-c-label__icon">
285
287
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
286
288
  </span>
287
- Quick starts
289
+ <span class="pf-c-label__text">Quick starts</span>
288
290
  </span>
289
291
  </span>
290
292
  <p>Get started with features using our step-by-step documentation</p>
@@ -318,7 +320,7 @@ wrapperTag: div
318
320
  <span class="pf-c-label__icon">
319
321
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
320
322
  </span>
321
- Learning resources
323
+ <span class="pf-c-label__text">Learning resources</span>
322
324
  </span>
323
325
  </span>
324
326
  <p>Learn about new features within the Console and get started with demo apps</p>
@@ -993,7 +995,7 @@ wrapperTag: div
993
995
  aria-hidden="true"
994
996
  ></i>
995
997
  </span>
996
- 1
998
+ <span class="pf-c-label__text">1</span>
997
999
  </span>
998
1000
  </span>
999
1001
  <span class="pf-c-label pf-m-orange">
@@ -1004,7 +1006,7 @@ wrapperTag: div
1004
1006
  aria-hidden="true"
1005
1007
  ></i>
1006
1008
  </span>
1007
- 3
1009
+ <span class="pf-c-label__text">3</span>
1008
1010
  </span>
1009
1011
  </span>
1010
1012
  <span class="pf-c-label pf-m-green">
@@ -1012,7 +1014,7 @@ wrapperTag: div
1012
1014
  <span class="pf-c-label__icon">
1013
1015
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
1014
1016
  </span>
1015
- 3
1017
+ <span class="pf-c-label__text">3</span>
1016
1018
  </span>
1017
1019
  </span>
1018
1020
  <span class="pf-c-label pf-m-blue">
@@ -1020,7 +1022,7 @@ wrapperTag: div
1020
1022
  <span class="pf-c-label__icon">
1021
1023
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1022
1024
  </span>
1023
- 3
1025
+ <span class="pf-c-label__text">3</span>
1024
1026
  </span>
1025
1027
  </span>
1026
1028
  <span class="pf-c-label pf-m-cyan">
@@ -1028,7 +1030,7 @@ wrapperTag: div
1028
1030
  <span class="pf-c-label__icon">
1029
1031
  <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
1030
1032
  </span>
1031
- 3
1033
+ <span class="pf-c-label__text">3</span>
1032
1034
  </span>
1033
1035
  </span>
1034
1036
  </div>
@@ -1186,7 +1188,7 @@ wrapperTag: div
1186
1188
  aria-hidden="true"
1187
1189
  ></i>
1188
1190
  </span>
1189
- 1
1191
+ <span class="pf-c-label__text">1</span>
1190
1192
  </span>
1191
1193
  </span>
1192
1194
  <span class="pf-c-label pf-m-orange">
@@ -1197,7 +1199,7 @@ wrapperTag: div
1197
1199
  aria-hidden="true"
1198
1200
  ></i>
1199
1201
  </span>
1200
- 3
1202
+ <span class="pf-c-label__text">3</span>
1201
1203
  </span>
1202
1204
  </span>
1203
1205
  <span class="pf-c-label pf-m-green">
@@ -1205,7 +1207,7 @@ wrapperTag: div
1205
1207
  <span class="pf-c-label__icon">
1206
1208
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
1207
1209
  </span>
1208
- 3
1210
+ <span class="pf-c-label__text">3</span>
1209
1211
  </span>
1210
1212
  </span>
1211
1213
  <span class="pf-c-label pf-m-blue">
@@ -1213,7 +1215,7 @@ wrapperTag: div
1213
1215
  <span class="pf-c-label__icon">
1214
1216
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1215
1217
  </span>
1216
- 3
1218
+ <span class="pf-c-label__text">3</span>
1217
1219
  </span>
1218
1220
  </span>
1219
1221
  <span class="pf-c-label pf-m-cyan">
@@ -1221,7 +1223,7 @@ wrapperTag: div
1221
1223
  <span class="pf-c-label__icon">
1222
1224
  <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
1223
1225
  </span>
1224
- 3
1226
+ <span class="pf-c-label__text">3</span>
1225
1227
  </span>
1226
1228
  </span>
1227
1229
  </div>
@@ -1324,17 +1326,23 @@ wrapperTag: div
1324
1326
  >
1325
1327
  <div class="pf-c-popover__arrow"></div>
1326
1328
  <div class="pf-c-popover__content">
1327
- <button
1328
- class="pf-c-button pf-m-plain"
1329
- type="button"
1330
- aria-label="Close"
1331
- >
1332
- <i class="fas fa-times" aria-hidden="true"></i>
1333
- </button>
1334
- <h1
1335
- class="pf-c-title pf-m-md"
1336
- id="status-card-expanded-with-popover-example-popover-popover-right-header"
1337
- >Control Panel Status</h1>
1329
+ <div class="pf-c-popover__close">
1330
+ <button
1331
+ class="pf-c-button pf-m-plain"
1332
+ type="button"
1333
+ aria-label="Close"
1334
+ >
1335
+ <i class="fas fa-times" aria-hidden="true"></i>
1336
+ </button>
1337
+ </div>
1338
+ <header class="pf-c-popover__header">
1339
+ <div
1340
+ class="pf-c-popover__title"
1341
+ id="status-card-expanded-with-popover-example-popover-popover-right-header"
1342
+ >
1343
+ <h1 class="pf-c-popover__title-text">Control Panel Status</h1>
1344
+ </div>
1345
+ </header>
1338
1346
  <div
1339
1347
  class="pf-c-popover__body"
1340
1348
  id="status-card-expanded-with-popover-example-popover-popover-right-body"
@@ -1633,7 +1641,7 @@ wrapperTag: div
1633
1641
  aria-hidden="true"
1634
1642
  ></i>
1635
1643
  </span>
1636
- 1
1644
+ <span class="pf-c-label__text">1</span>
1637
1645
  </span>
1638
1646
  </span>
1639
1647
  <span class="pf-c-label pf-m-orange">
@@ -1644,7 +1652,7 @@ wrapperTag: div
1644
1652
  aria-hidden="true"
1645
1653
  ></i>
1646
1654
  </span>
1647
- 3
1655
+ <span class="pf-c-label__text">3</span>
1648
1656
  </span>
1649
1657
  </span>
1650
1658
  <span class="pf-c-label pf-m-green">
@@ -1652,7 +1660,7 @@ wrapperTag: div
1652
1660
  <span class="pf-c-label__icon">
1653
1661
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
1654
1662
  </span>
1655
- 3
1663
+ <span class="pf-c-label__text">3</span>
1656
1664
  </span>
1657
1665
  </span>
1658
1666
  <span class="pf-c-label pf-m-blue">
@@ -1660,7 +1668,7 @@ wrapperTag: div
1660
1668
  <span class="pf-c-label__icon">
1661
1669
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1662
1670
  </span>
1663
- 3
1671
+ <span class="pf-c-label__text">3</span>
1664
1672
  </span>
1665
1673
  </span>
1666
1674
  <span class="pf-c-label pf-m-cyan">
@@ -1668,7 +1676,7 @@ wrapperTag: div
1668
1676
  <span class="pf-c-label__icon">
1669
1677
  <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
1670
1678
  </span>
1671
- 3
1679
+ <span class="pf-c-label__text">3</span>
1672
1680
  </span>
1673
1681
  </span>
1674
1682
  </div>
package/docs/demos/Dashboard/examples/Dashboard.md CHANGED
@@ -966,7 +966,7 @@ cssPrefix: pf-d-dashboard
966
966
  >
967
967
  <li class="pf-c-label-group__list-item">
968
968
  <span
969
- class="pf-c-label pf-m-blue pf-m-outline"
969
+ class="pf-c-label pf-m-outline pf-m-blue"
970
970
  >
971
971
  <span class="pf-c-label__content">
972
972
  <span class="pf-c-label__icon">
@@ -975,7 +975,7 @@ cssPrefix: pf-d-dashboard
975
975
  aria-hidden="true"
976
976
  ></i>
977
977
  </span>
978
- Performance
978
+ <span class="pf-c-label__text">Performance</span>
979
979
  </span>
980
980
  </span>
981
981
  </li>
@@ -996,7 +996,9 @@ cssPrefix: pf-d-dashboard
996
996
  style="margin-bottom: -.25em"
997
997
  >
998
998
  <span class="pf-c-label pf-m-red">
999
- <span class="pf-c-label__content">Incident</span>
999
+ <span class="pf-c-label__content">
1000
+ <span class="pf-c-label__text">Incident</span>
1001
+ </span>
1000
1002
  </span>
1001
1003
  </div>
1002
1004
  <div
@@ -1047,7 +1049,7 @@ cssPrefix: pf-d-dashboard
1047
1049
  >
1048
1050
  <li class="pf-c-label-group__list-item">
1049
1051
  <span
1050
- class="pf-c-label pf-m-blue pf-m-outline"
1052
+ class="pf-c-label pf-m-outline pf-m-blue"
1051
1053
  >
1052
1054
  <span class="pf-c-label__content">
1053
1055
  <span class="pf-c-label__icon">
@@ -1056,7 +1058,7 @@ cssPrefix: pf-d-dashboard
1056
1058
  aria-hidden="true"
1057
1059
  ></i>
1058
1060
  </span>
1059
- Stablility
1061
+ <span class="pf-c-label__text">Stablility</span>
1060
1062
  </span>
1061
1063
  </span>
1062
1064
  </li>
@@ -1065,7 +1067,9 @@ cssPrefix: pf-d-dashboard
1065
1067
  class="pf-c-label pf-m-overflow"
1066
1068
  type="button"
1067
1069
  >
1068
- <span class="pf-c-label__content">1 more</span>
1070
+ <span class="pf-c-label__content">
1071
+ <span class="pf-c-label__text">1 more</span>
1072
+ </span>
1069
1073
  </button>
1070
1074
  </li>
1071
1075
  </ul>
@@ -1128,7 +1132,7 @@ cssPrefix: pf-d-dashboard
1128
1132
  >
1129
1133
  <li class="pf-c-label-group__list-item">
1130
1134
  <span
1131
- class="pf-c-label pf-m-blue pf-m-outline"
1135
+ class="pf-c-label pf-m-outline pf-m-blue"
1132
1136
  >
1133
1137
  <span class="pf-c-label__content">
1134
1138
  <span class="pf-c-label__icon">
@@ -1137,7 +1141,9 @@ cssPrefix: pf-d-dashboard
1137
1141
  aria-hidden="true"
1138
1142
  ></i>
1139
1143
  </span>
1140
- Availability
1144
+ <span
1145
+ class="pf-c-label__text"
1146
+ >Availability</span>
1141
1147
  </span>
1142
1148
  </span>
1143
1149
  </li>
@@ -1158,7 +1164,9 @@ cssPrefix: pf-d-dashboard
1158
1164
  style="margin-bottom: -.25em"
1159
1165
  >
1160
1166
  <span class="pf-c-label pf-m-red">
1161
- <span class="pf-c-label__content">Incident</span>
1167
+ <span class="pf-c-label__content">
1168
+ <span class="pf-c-label__text">Incident</span>
1169
+ </span>
1162
1170
  </span>
1163
1171
  </div>
1164
1172
  <div
@@ -1339,7 +1347,7 @@ cssPrefix: pf-d-dashboard
1339
1347
  aria-hidden="true"
1340
1348
  ></i>
1341
1349
  </span>
1342
- 1
1350
+ <span class="pf-c-label__text">1</span>
1343
1351
  </span>
1344
1352
  </span>
1345
1353
  </li>
@@ -1348,11 +1356,11 @@ cssPrefix: pf-d-dashboard
1348
1356
  <span class="pf-c-label__content">
1349
1357
  <span class="pf-c-label__icon">
1350
1358
  <i
1351
- class="fas fa-fw fa-exclamation-triangle"
1359
+ class="fas fa-fw fa-exclamation-circle"
1352
1360
  aria-hidden="true"
1353
1361
  ></i>
1354
1362
  </span>
1355
- 3
1363
+ <span class="pf-c-label__text">1</span>
1356
1364
  </span>
1357
1365
  </span>
1358
1366
  </li>
@@ -1365,7 +1373,7 @@ cssPrefix: pf-d-dashboard
1365
1373
  aria-hidden="true"
1366
1374
  ></i>
1367
1375
  </span>
1368
- 3
1376
+ <span class="pf-c-label__text">3</span>
1369
1377
  </span>
1370
1378
  </span>
1371
1379
  </li>
@@ -1378,7 +1386,7 @@ cssPrefix: pf-d-dashboard
1378
1386
  aria-hidden="true"
1379
1387
  ></i>
1380
1388
  </span>
1381
- 3
1389
+ <span class="pf-c-label__text">3</span>
1382
1390
  </span>
1383
1391
  </span>
1384
1392
  </li>
@@ -1391,7 +1399,7 @@ cssPrefix: pf-d-dashboard
1391
1399
  aria-hidden="true"
1392
1400
  ></i>
1393
1401
  </span>
1394
- 3
1402
+ <span class="pf-c-label__text">3</span>
1395
1403
  </span>
1396
1404
  </span>
1397
1405
  </li>
package/docs/demos/DescriptionList/examples/DescriptionList.md CHANGED
@@ -1960,8 +1960,10 @@ cssPrefix: pf-d-description-list
1960
1960
  </div>
1961
1961
  <div class="pf-l-flex pf-m-space-items-sm">
1962
1962
  <div class="pf-l-flex__item">
1963
- <span class="pf-c-label pf-m-blue pf-m-compact">
1964
- <span class="pf-c-label__content">DC</span>
1963
+ <span class="pf-c-label pf-m-compact pf-m-blue">
1964
+ <span class="pf-c-label__content">
1965
+ <span class="pf-c-label__text">DC</span>
1966
+ </span>
1965
1967
  </span>
1966
1968
  </div>
1967
1969
  <div class="pf-l-flex__item">
@@ -2026,7 +2028,9 @@ cssPrefix: pf-d-description-list
2026
2028
  <div class="pf-l-flex pf-m-space-items-sm">
2027
2029
  <div class="pf-l-flex__item">
2028
2030
  <span class="pf-c-label pf-m-green">
2029
- <span class="pf-c-label__content">NS</span>
2031
+ <span class="pf-c-label__content">
2032
+ <span class="pf-c-label__text">NS</span>
2033
+ </span>
2030
2034
  </span>
2031
2035
  </div>
2032
2036
  <div class="pf-l-flex__item">
@@ -2043,7 +2047,9 @@ cssPrefix: pf-d-description-list
2043
2047
  <dd class="pf-c-description-list__description">
2044
2048
  <div class="pf-c-description-list__text">
2045
2049
  <div class="pf-c-chip">
2046
- <span class="pf-c-chip__text">app=mary-test</span>
2050
+ <span class="pf-c-chip__content">
2051
+ <span class="pf-c-chip__text">app=mary-test</span>
2052
+ </span>
2047
2053
  </div>
2048
2054
  </div>
2049
2055
  </dd>
@@ -3137,7 +3143,9 @@ cssPrefix: pf-d-description-list
3137
3143
  <div class="pf-l-flex pf-m-space-items-sm">
3138
3144
  <div class="pf-l-flex__item">
3139
3145
  <span class="pf-c-label pf-m-green">
3140
- <span class="pf-c-label__content">NS</span>
3146
+ <span class="pf-c-label__content">
3147
+ <span class="pf-c-label__text">NS</span>
3148
+ </span>
3141
3149
  </span>
3142
3150
  </div>
3143
3151
  <div class="pf-l-flex__item">
@@ -3282,9 +3290,11 @@ cssPrefix: pf-d-description-list
3282
3290
  <div class="pf-l-flex pf-m-space-items-sm">
3283
3291
  <div class="pf-l-flex__item">
3284
3292
  <span
3285
- class="pf-c-label pf-m-green pf-m-compact"
3293
+ class="pf-c-label pf-m-compact pf-m-green"
3286
3294
  >
3287
- <span class="pf-c-label__content">S</span>
3295
+ <span class="pf-c-label__content">
3296
+ <span class="pf-c-label__text">S</span>
3297
+ </span>
3288
3298
  </span>
3289
3299
  </div>
3290
3300
  <div class="pf-l-flex__item">80</div>
@@ -3299,9 +3309,11 @@ cssPrefix: pf-d-description-list
3299
3309
  <div class="pf-l-flex pf-m-space-items-sm">
3300
3310
  <div class="pf-l-flex__item">
3301
3311
  <span
3302
- class="pf-c-label pf-m-cyan pf-m-compact"
3312
+ class="pf-c-label pf-m-compact pf-m-cyan"
3303
3313
  >
3304
- <span class="pf-c-label__content">P</span>
3314
+ <span class="pf-c-label__content">
3315
+ <span class="pf-c-label__text">P</span>
3316
+ </span>
3305
3317
  </span>
3306
3318
  </div>
3307
3319
  <div class="pf-l-flex__item">80</div>
package/docs/demos/Drawer/examples/Drawer.md CHANGED
@@ -986,8 +986,10 @@ wrapperTag: div
986
986
  </div>
987
987
  <div class="pf-l-flex pf-m-space-items-sm">
988
988
  <div class="pf-l-flex__item">
989
- <span class="pf-c-label pf-m-blue pf-m-compact">
990
- <span class="pf-c-label__content">DC</span>
989
+ <span class="pf-c-label pf-m-compact pf-m-blue">
990
+ <span class="pf-c-label__content">
991
+ <span class="pf-c-label__text">DC</span>
992
+ </span>
991
993
  </span>
992
994
  </div>
993
995
  <div class="pf-l-flex__item">
package/docs/demos/Form/examples/BasicForms.md CHANGED
@@ -758,41 +758,47 @@ section: components
758
758
  <span class="pf-c-label__icon">
759
759
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
760
760
  </span>
761
- prometheus=k8s
761
+ <span class="pf-c-label__text">prometheus=k8s</span>
762
+ </span>
763
+ <span class="pf-c-label__actions">
764
+ <button
765
+ class="pf-c-button pf-m-plain"
766
+ type="button"
767
+ id="-label-1-button"
768
+ aria-label="Remove"
769
+ aria-labelledby="-label-1-button -label-1-text"
770
+ >
771
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
772
+ </button>
762
773
  </span>
763
- <button
764
- class="pf-c-button pf-m-plain"
765
- type="button"
766
- id="-label-1-button"
767
- aria-label="Remove"
768
- aria-labelledby="-label-1-button -label-1-text"
769
- >
770
- <i class="fas fa-times" aria-hidden="true"></i>
771
- </button>
772
774
  </span>
773
775
  </li>
774
776
  <li class="pf-c-label-group__list-item">
775
- <span class="pf-c-label pf-m-blue">
777
+ <span class="pf-c-label">
776
778
  <span class="pf-c-label__content">
777
779
  <span class="pf-c-label__icon">
778
780
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
779
781
  </span>
780
- new
782
+ <span class="pf-c-label__text">new</span>
783
+ </span>
784
+ <span class="pf-c-label__actions">
785
+ <button
786
+ class="pf-c-button pf-m-plain"
787
+ type="button"
788
+ id="-label-2-button"
789
+ aria-label="Remove"
790
+ aria-labelledby="-label-2-button -label-2-text"
791
+ >
792
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
793
+ </button>
781
794
  </span>
782
- <button
783
- class="pf-c-button pf-m-plain"
784
- type="button"
785
- id="-label-2-button"
786
- aria-label="Remove"
787
- aria-labelledby="-label-2-button -label-2-text"
788
- >
789
- <i class="fas fa-times" aria-hidden="true"></i>
790
- </button>
791
795
  </span>
792
796
  </li>
793
797
  <li class="pf-c-label-group__list-item">
794
798
  <button class="pf-c-label pf-m-add" type="button">
795
- <span class="pf-c-label__content">Add Label</span>
799
+ <span class="pf-c-label__content">
800
+ <span class="pf-c-label__text">Add Label</span>
801
+ </span>
796
802
  </button>
797
803
  </li>
798
804
  </ul>