@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
package/docs/components/Select/examples/Select.md CHANGED
@@ -1003,87 +1003,107 @@ The single select typeahead should be used when the user is selecting one option
1003
1003
  >
1004
1004
  <li class="pf-c-chip-group__list-item">
1005
1005
  <div class="pf-c-chip">
1006
- <span
1007
- class="pf-c-chip__text"
1008
- id="select-multi-typeahead-expanded-chip_one"
1009
- >Arkansas</span>
1010
- <button
1011
- class="pf-c-button pf-m-plain"
1012
- type="button"
1013
- aria-labelledby="remove_select-multi-typeahead-expanded_chip_one select-multi-typeahead-expanded-chip_two"
1014
- aria-label="Remove"
1015
- id="remove_select-multi-typeahead-expanded_chip_one"
1016
- >
1017
- <i class="fas fa-times" aria-hidden="true"></i>
1018
- </button>
1006
+ <span class="pf-c-chip__content">
1007
+ <span
1008
+ class="pf-c-chip__text"
1009
+ id="select-multi-typeahead-expanded-chip_one"
1010
+ >Arkansas</span>
1011
+ </span>
1012
+ <span class="pf-c-chip__actions">
1013
+ <button
1014
+ class="pf-c-button pf-m-plain"
1015
+ type="button"
1016
+ aria-labelledby="remove_select-multi-typeahead-expanded_chip_one select-multi-typeahead-expanded-chip_two"
1017
+ aria-label="Remove"
1018
+ id="remove_select-multi-typeahead-expanded_chip_one"
1019
+ >
1020
+ <i class="fas fa-times" aria-hidden="true"></i>
1021
+ </button>
1022
+ </span>
1019
1023
  </div>
1020
1024
  </li>
1021
1025
  <li class="pf-c-chip-group__list-item">
1022
1026
  <div class="pf-c-chip">
1023
- <span
1024
- class="pf-c-chip__text"
1025
- id="select-multi-typeahead-expanded-chip_two"
1026
- >Massachusetts</span>
1027
- <button
1028
- class="pf-c-button pf-m-plain"
1029
- type="button"
1030
- aria-labelledby="remove_select-multi-typeahead-expanded_chip_two select-multi-typeahead-expanded-chip_two"
1031
- aria-label="Remove"
1032
- id="remove_select-multi-typeahead-expanded_chip_two"
1033
- >
1034
- <i class="fas fa-times" aria-hidden="true"></i>
1035
- </button>
1027
+ <span class="pf-c-chip__content">
1028
+ <span
1029
+ class="pf-c-chip__text"
1030
+ id="select-multi-typeahead-expanded-chip_two"
1031
+ >Massachusetts</span>
1032
+ </span>
1033
+ <span class="pf-c-chip__actions">
1034
+ <button
1035
+ class="pf-c-button pf-m-plain"
1036
+ type="button"
1037
+ aria-labelledby="remove_select-multi-typeahead-expanded_chip_two select-multi-typeahead-expanded-chip_two"
1038
+ aria-label="Remove"
1039
+ id="remove_select-multi-typeahead-expanded_chip_two"
1040
+ >
1041
+ <i class="fas fa-times" aria-hidden="true"></i>
1042
+ </button>
1043
+ </span>
1036
1044
  </div>
1037
1045
  </li>
1038
1046
  <li class="pf-c-chip-group__list-item">
1039
1047
  <div class="pf-c-chip">
1040
- <span
1041
- class="pf-c-chip__text"
1042
- id="select-multi-typeahead-expanded-chip_three"
1043
- >New Mexico</span>
1044
- <button
1045
- class="pf-c-button pf-m-plain"
1046
- type="button"
1047
- aria-labelledby="remove_select-multi-typeahead-expanded_chip_three select-multi-typeahead-expanded-chip_three"
1048
- aria-label="Remove"
1049
- id="remove_select-multi-typeahead-expanded_chip_three"
1050
- >
1051
- <i class="fas fa-times" aria-hidden="true"></i>
1052
- </button>
1048
+ <span class="pf-c-chip__content">
1049
+ <span
1050
+ class="pf-c-chip__text"
1051
+ id="select-multi-typeahead-expanded-chip_three"
1052
+ >New Mexico</span>
1053
+ </span>
1054
+ <span class="pf-c-chip__actions">
1055
+ <button
1056
+ class="pf-c-button pf-m-plain"
1057
+ type="button"
1058
+ aria-labelledby="remove_select-multi-typeahead-expanded_chip_three select-multi-typeahead-expanded-chip_three"
1059
+ aria-label="Remove"
1060
+ id="remove_select-multi-typeahead-expanded_chip_three"
1061
+ >
1062
+ <i class="fas fa-times" aria-hidden="true"></i>
1063
+ </button>
1064
+ </span>
1053
1065
  </div>
1054
1066
  </li>
1055
1067
  <li class="pf-c-chip-group__list-item">
1056
1068
  <div class="pf-c-chip">
1057
- <span
1058
- class="pf-c-chip__text"
1059
- id="select-multi-typeahead-expanded-chip_four"
1060
- >Ohio</span>
1061
- <button
1062
- class="pf-c-button pf-m-plain"
1063
- type="button"
1064
- aria-labelledby="remove_select-multi-typeahead-expanded_chip_four select-multi-typeahead-expanded-chip_four"
1065
- aria-label="Remove"
1066
- id="remove_select-multi-typeahead-expanded_chip_four"
1067
- >
1068
- <i class="fas fa-times" aria-hidden="true"></i>
1069
- </button>
1069
+ <span class="pf-c-chip__content">
1070
+ <span
1071
+ class="pf-c-chip__text"
1072
+ id="select-multi-typeahead-expanded-chip_four"
1073
+ >Ohio</span>
1074
+ </span>
1075
+ <span class="pf-c-chip__actions">
1076
+ <button
1077
+ class="pf-c-button pf-m-plain"
1078
+ type="button"
1079
+ aria-labelledby="remove_select-multi-typeahead-expanded_chip_four select-multi-typeahead-expanded-chip_four"
1080
+ aria-label="Remove"
1081
+ id="remove_select-multi-typeahead-expanded_chip_four"
1082
+ >
1083
+ <i class="fas fa-times" aria-hidden="true"></i>
1084
+ </button>
1085
+ </span>
1070
1086
  </div>
1071
1087
  </li>
1072
1088
  <li class="pf-c-chip-group__list-item">
1073
1089
  <div class="pf-c-chip">
1074
- <span
1075
- class="pf-c-chip__text"
1076
- id="select-multi-typeahead-expanded-chip_five"
1077
- >Washington</span>
1078
- <button
1079
- class="pf-c-button pf-m-plain"
1080
- type="button"
1081
- aria-labelledby="remove_select-multi-typeahead-expanded_chip_five select-multi-typeahead-expanded-chip_five"
1082
- aria-label="Remove"
1083
- id="remove_select-multi-typeahead-expanded_chip_five"
1084
- >
1085
- <i class="fas fa-times" aria-hidden="true"></i>
1086
- </button>
1090
+ <span class="pf-c-chip__content">
1091
+ <span
1092
+ class="pf-c-chip__text"
1093
+ id="select-multi-typeahead-expanded-chip_five"
1094
+ >Washington</span>
1095
+ </span>
1096
+ <span class="pf-c-chip__actions">
1097
+ <button
1098
+ class="pf-c-button pf-m-plain"
1099
+ type="button"
1100
+ aria-labelledby="remove_select-multi-typeahead-expanded_chip_five select-multi-typeahead-expanded-chip_five"
1101
+ aria-label="Remove"
1102
+ id="remove_select-multi-typeahead-expanded_chip_five"
1103
+ >
1104
+ <i class="fas fa-times" aria-hidden="true"></i>
1105
+ </button>
1106
+ </span>
1087
1107
  </div>
1088
1108
  </li>
1089
1109
  </ul>
@@ -1165,58 +1185,72 @@ The single select typeahead should be used when the user is selecting one option
1165
1185
  >
1166
1186
  <li class="pf-c-chip-group__list-item">
1167
1187
  <div class="pf-c-chip">
1168
- <span
1169
- class="pf-c-chip__text"
1170
- id="select-multi-typeahead-expanded-selected-chip_one"
1171
- >Arkansas</span>
1172
- <button
1173
- class="pf-c-button pf-m-plain"
1174
- type="button"
1175
- aria-labelledby="remove_select-multi-typeahead-expanded-selected_chip_one select-multi-typeahead-expanded-selected-chip_one"
1176
- aria-label="Remove"
1177
- id="remove_select-multi-typeahead-expanded-selected_chip_one"
1178
- >
1179
- <i class="fas fa-times" aria-hidden="true"></i>
1180
- </button>
1188
+ <span class="pf-c-chip__content">
1189
+ <span
1190
+ class="pf-c-chip__text"
1191
+ id="select-multi-typeahead-expanded-selected-chip_one"
1192
+ >Arkansas</span>
1193
+ </span>
1194
+ <span class="pf-c-chip__actions">
1195
+ <button
1196
+ class="pf-c-button pf-m-plain"
1197
+ type="button"
1198
+ aria-labelledby="remove_select-multi-typeahead-expanded-selected_chip_one select-multi-typeahead-expanded-selected-chip_one"
1199
+ aria-label="Remove"
1200
+ id="remove_select-multi-typeahead-expanded-selected_chip_one"
1201
+ >
1202
+ <i class="fas fa-times" aria-hidden="true"></i>
1203
+ </button>
1204
+ </span>
1181
1205
  </div>
1182
1206
  </li>
1183
1207
  <li class="pf-c-chip-group__list-item">
1184
1208
  <div class="pf-c-chip">
1185
- <span
1186
- class="pf-c-chip__text"
1187
- id="select-multi-typeahead-expanded-selected-chip_two"
1188
- >Massachusetts</span>
1189
- <button
1190
- class="pf-c-button pf-m-plain"
1191
- type="button"
1192
- aria-labelledby="remove_select-multi-typeahead-expanded-selected_chip_two select-multi-typeahead-expanded-selected-chip_two"
1193
- aria-label="Remove"
1194
- id="remove_select-multi-typeahead-expanded-selected_chip_two"
1195
- >
1196
- <i class="fas fa-times" aria-hidden="true"></i>
1197
- </button>
1209
+ <span class="pf-c-chip__content">
1210
+ <span
1211
+ class="pf-c-chip__text"
1212
+ id="select-multi-typeahead-expanded-selected-chip_two"
1213
+ >Massachusetts</span>
1214
+ </span>
1215
+ <span class="pf-c-chip__actions">
1216
+ <button
1217
+ class="pf-c-button pf-m-plain"
1218
+ type="button"
1219
+ aria-labelledby="remove_select-multi-typeahead-expanded-selected_chip_two select-multi-typeahead-expanded-selected-chip_two"
1220
+ aria-label="Remove"
1221
+ id="remove_select-multi-typeahead-expanded-selected_chip_two"
1222
+ >
1223
+ <i class="fas fa-times" aria-hidden="true"></i>
1224
+ </button>
1225
+ </span>
1198
1226
  </div>
1199
1227
  </li>
1200
1228
  <li class="pf-c-chip-group__list-item">
1201
1229
  <div class="pf-c-chip">
1202
- <span
1203
- class="pf-c-chip__text"
1204
- id="select-multi-typeahead-expanded-selected-chip_three"
1205
- >New Mexico</span>
1206
- <button
1207
- class="pf-c-button pf-m-plain"
1208
- type="button"
1209
- aria-labelledby="remove_select-multi-typeahead-expanded-selected_chip_three select-multi-typeahead-expanded-selected-chip_three"
1210
- aria-label="Remove"
1211
- id="remove_select-multi-typeahead-expanded-selected_chip_three"
1212
- >
1213
- <i class="fas fa-times" aria-hidden="true"></i>
1214
- </button>
1230
+ <span class="pf-c-chip__content">
1231
+ <span
1232
+ class="pf-c-chip__text"
1233
+ id="select-multi-typeahead-expanded-selected-chip_three"
1234
+ >New Mexico</span>
1235
+ </span>
1236
+ <span class="pf-c-chip__actions">
1237
+ <button
1238
+ class="pf-c-button pf-m-plain"
1239
+ type="button"
1240
+ aria-labelledby="remove_select-multi-typeahead-expanded-selected_chip_three select-multi-typeahead-expanded-selected-chip_three"
1241
+ aria-label="Remove"
1242
+ id="remove_select-multi-typeahead-expanded-selected_chip_three"
1243
+ >
1244
+ <i class="fas fa-times" aria-hidden="true"></i>
1245
+ </button>
1246
+ </span>
1215
1247
  </div>
1216
1248
  </li>
1217
1249
  <li class="pf-c-chip-group__list-item">
1218
1250
  <button class="pf-c-chip pf-m-overflow">
1219
- <span class="pf-c-chip__text">2 more</span>
1251
+ <span class="pf-c-chip__content">
1252
+ <span class="pf-c-chip__text">2 more</span>
1253
+ </span>
1220
1254
  </button>
1221
1255
  </li>
1222
1256
  </ul>
@@ -1289,87 +1323,107 @@ The single select typeahead should be used when the user is selecting one option
1289
1323
  >
1290
1324
  <li class="pf-c-chip-group__list-item">
1291
1325
  <div class="pf-c-chip">
1292
- <span
1293
- class="pf-c-chip__text"
1294
- id="select-multi-typeahead-invalid-chip_one"
1295
- >Arkansas</span>
1296
- <button
1297
- class="pf-c-button pf-m-plain"
1298
- type="button"
1299
- aria-labelledby="remove_select-multi-typeahead-invalid_chip_one select-multi-typeahead-invalid-chip_two"
1300
- aria-label="Remove"
1301
- id="remove_select-multi-typeahead-invalid_chip_one"
1302
- >
1303
- <i class="fas fa-times" aria-hidden="true"></i>
1304
- </button>
1326
+ <span class="pf-c-chip__content">
1327
+ <span
1328
+ class="pf-c-chip__text"
1329
+ id="select-multi-typeahead-invalid-chip_one"
1330
+ >Arkansas</span>
1331
+ </span>
1332
+ <span class="pf-c-chip__actions">
1333
+ <button
1334
+ class="pf-c-button pf-m-plain"
1335
+ type="button"
1336
+ aria-labelledby="remove_select-multi-typeahead-invalid_chip_one select-multi-typeahead-invalid-chip_two"
1337
+ aria-label="Remove"
1338
+ id="remove_select-multi-typeahead-invalid_chip_one"
1339
+ >
1340
+ <i class="fas fa-times" aria-hidden="true"></i>
1341
+ </button>
1342
+ </span>
1305
1343
  </div>
1306
1344
  </li>
1307
1345
  <li class="pf-c-chip-group__list-item">
1308
1346
  <div class="pf-c-chip">
1309
- <span
1310
- class="pf-c-chip__text"
1311
- id="select-multi-typeahead-invalid-chip_two"
1312
- >Massachusetts</span>
1313
- <button
1314
- class="pf-c-button pf-m-plain"
1315
- type="button"
1316
- aria-labelledby="remove_select-multi-typeahead-invalid_chip_two select-multi-typeahead-invalid-chip_two"
1317
- aria-label="Remove"
1318
- id="remove_select-multi-typeahead-invalid_chip_two"
1319
- >
1320
- <i class="fas fa-times" aria-hidden="true"></i>
1321
- </button>
1347
+ <span class="pf-c-chip__content">
1348
+ <span
1349
+ class="pf-c-chip__text"
1350
+ id="select-multi-typeahead-invalid-chip_two"
1351
+ >Massachusetts</span>
1352
+ </span>
1353
+ <span class="pf-c-chip__actions">
1354
+ <button
1355
+ class="pf-c-button pf-m-plain"
1356
+ type="button"
1357
+ aria-labelledby="remove_select-multi-typeahead-invalid_chip_two select-multi-typeahead-invalid-chip_two"
1358
+ aria-label="Remove"
1359
+ id="remove_select-multi-typeahead-invalid_chip_two"
1360
+ >
1361
+ <i class="fas fa-times" aria-hidden="true"></i>
1362
+ </button>
1363
+ </span>
1322
1364
  </div>
1323
1365
  </li>
1324
1366
  <li class="pf-c-chip-group__list-item">
1325
1367
  <div class="pf-c-chip">
1326
- <span
1327
- class="pf-c-chip__text"
1328
- id="select-multi-typeahead-invalid-chip_three"
1329
- >New Mexico</span>
1330
- <button
1331
- class="pf-c-button pf-m-plain"
1332
- type="button"
1333
- aria-labelledby="remove_select-multi-typeahead-invalid_chip_three select-multi-typeahead-invalid-chip_three"
1334
- aria-label="Remove"
1335
- id="remove_select-multi-typeahead-invalid_chip_three"
1336
- >
1337
- <i class="fas fa-times" aria-hidden="true"></i>
1338
- </button>
1368
+ <span class="pf-c-chip__content">
1369
+ <span
1370
+ class="pf-c-chip__text"
1371
+ id="select-multi-typeahead-invalid-chip_three"
1372
+ >New Mexico</span>
1373
+ </span>
1374
+ <span class="pf-c-chip__actions">
1375
+ <button
1376
+ class="pf-c-button pf-m-plain"
1377
+ type="button"
1378
+ aria-labelledby="remove_select-multi-typeahead-invalid_chip_three select-multi-typeahead-invalid-chip_three"
1379
+ aria-label="Remove"
1380
+ id="remove_select-multi-typeahead-invalid_chip_three"
1381
+ >
1382
+ <i class="fas fa-times" aria-hidden="true"></i>
1383
+ </button>
1384
+ </span>
1339
1385
  </div>
1340
1386
  </li>
1341
1387
  <li class="pf-c-chip-group__list-item">
1342
1388
  <div class="pf-c-chip">
1343
- <span
1344
- class="pf-c-chip__text"
1345
- id="select-multi-typeahead-invalid-chip_four"
1346
- >Ohio</span>
1347
- <button
1348
- class="pf-c-button pf-m-plain"
1349
- type="button"
1350
- aria-labelledby="remove_select-multi-typeahead-invalid_chip_four select-multi-typeahead-invalid-chip_four"
1351
- aria-label="Remove"
1352
- id="remove_select-multi-typeahead-invalid_chip_four"
1353
- >
1354
- <i class="fas fa-times" aria-hidden="true"></i>
1355
- </button>
1389
+ <span class="pf-c-chip__content">
1390
+ <span
1391
+ class="pf-c-chip__text"
1392
+ id="select-multi-typeahead-invalid-chip_four"
1393
+ >Ohio</span>
1394
+ </span>
1395
+ <span class="pf-c-chip__actions">
1396
+ <button
1397
+ class="pf-c-button pf-m-plain"
1398
+ type="button"
1399
+ aria-labelledby="remove_select-multi-typeahead-invalid_chip_four select-multi-typeahead-invalid-chip_four"
1400
+ aria-label="Remove"
1401
+ id="remove_select-multi-typeahead-invalid_chip_four"
1402
+ >
1403
+ <i class="fas fa-times" aria-hidden="true"></i>
1404
+ </button>
1405
+ </span>
1356
1406
  </div>
1357
1407
  </li>
1358
1408
  <li class="pf-c-chip-group__list-item">
1359
1409
  <div class="pf-c-chip">
1360
- <span
1361
- class="pf-c-chip__text"
1362
- id="select-multi-typeahead-invalid-chip_five"
1363
- >Washington</span>
1364
- <button
1365
- class="pf-c-button pf-m-plain"
1366
- type="button"
1367
- aria-labelledby="remove_select-multi-typeahead-invalid_chip_five select-multi-typeahead-invalid-chip_five"
1368
- aria-label="Remove"
1369
- id="remove_select-multi-typeahead-invalid_chip_five"
1370
- >
1371
- <i class="fas fa-times" aria-hidden="true"></i>
1372
- </button>
1410
+ <span class="pf-c-chip__content">
1411
+ <span
1412
+ class="pf-c-chip__text"
1413
+ id="select-multi-typeahead-invalid-chip_five"
1414
+ >Washington</span>
1415
+ </span>
1416
+ <span class="pf-c-chip__actions">
1417
+ <button
1418
+ class="pf-c-button pf-m-plain"
1419
+ type="button"
1420
+ aria-labelledby="remove_select-multi-typeahead-invalid_chip_five select-multi-typeahead-invalid-chip_five"
1421
+ aria-label="Remove"
1422
+ id="remove_select-multi-typeahead-invalid_chip_five"
1423
+ >
1424
+ <i class="fas fa-times" aria-hidden="true"></i>
1425
+ </button>
1426
+ </span>
1373
1427
  </div>
1374
1428
  </li>
1375
1429
  </ul>