@patternfly/patternfly 5.0.0-alpha.10 → 5.0.0-alpha.11

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.
@@ -127,11 +127,14 @@ When a list item includes more than one block of content, it can be difficult fo
127
127
  <div class="pf-c-data-list__item-row">
128
128
  <div class="pf-c-data-list__item-control">
129
129
  <div class="pf-c-data-list__check">
130
- <input
131
- type="checkbox"
132
- name="data-list-checkboxes-actions-addl-cells-item-1-checkbox"
133
- aria-labelledby="data-list-checkboxes-actions-addl-cells-item-1"
134
- />
130
+ <div class="pf-c-check pf-m-standalone">
131
+ <input
132
+ class="pf-c-check__input"
133
+ type="checkbox"
134
+ name="data-list-checkboxes-actions-addl-cells-item-1-checkbox"
135
+ aria-labelledby="data-list-checkboxes-actions-addl-cells-item-1"
136
+ />
137
+ </div>
135
138
  </div>
136
139
  </div>
137
140
  <div class="pf-c-data-list__item-content">
@@ -209,11 +212,14 @@ When a list item includes more than one block of content, it can be difficult fo
209
212
  <div class="pf-c-data-list__item-row">
210
213
  <div class="pf-c-data-list__item-control">
211
214
  <div class="pf-c-data-list__check">
212
- <input
213
- type="checkbox"
214
- name="data-list-checkboxes-actions-addl-cells-item-2-checkbox"
215
- aria-labelledby="data-list-checkboxes-actions-addl-cells-item-2"
216
- />
215
+ <div class="pf-c-check pf-m-standalone">
216
+ <input
217
+ class="pf-c-check__input"
218
+ type="checkbox"
219
+ name="data-list-checkboxes-actions-addl-cells-item-2-checkbox"
220
+ aria-labelledby="data-list-checkboxes-actions-addl-cells-item-2"
221
+ />
222
+ </div>
217
223
  </div>
218
224
  </div>
219
225
  <div class="pf-c-data-list__item-content">
@@ -286,11 +292,14 @@ When a list item includes more than one block of content, it can be difficult fo
286
292
  <div class="pf-c-data-list__item-row">
287
293
  <div class="pf-c-data-list__item-control">
288
294
  <div class="pf-c-data-list__check">
289
- <input
290
- type="checkbox"
291
- name="data-list-checkboxes-actions-addl-cells-item-3-checkbox"
292
- aria-labelledby="data-list-checkboxes-actions-addl-cells-item-3"
293
- />
295
+ <div class="pf-c-check pf-m-standalone">
296
+ <input
297
+ class="pf-c-check__input"
298
+ type="checkbox"
299
+ name="data-list-checkboxes-actions-addl-cells-item-3-checkbox"
300
+ aria-labelledby="data-list-checkboxes-actions-addl-cells-item-3"
301
+ />
302
+ </div>
294
303
  </div>
295
304
  </div>
296
305
  <div class="pf-c-data-list__item-content">
@@ -1414,11 +1423,14 @@ When a list item includes more than one block of content, it can be difficult fo
1414
1423
  <div class="pf-c-data-list__item-row">
1415
1424
  <div class="pf-c-data-list__item-control">
1416
1425
  <div class="pf-c-data-list__check">
1417
- <input
1418
- type="checkbox"
1419
- name="data-list-compact-item-1-checkbox"
1420
- aria-labelledby="data-list-compact-item-1"
1421
- />
1426
+ <div class="pf-c-check pf-m-standalone">
1427
+ <input
1428
+ class="pf-c-check__input"
1429
+ type="checkbox"
1430
+ name="data-list-compact-item-1-checkbox"
1431
+ aria-labelledby="data-list-compact-item-1"
1432
+ />
1433
+ </div>
1422
1434
  </div>
1423
1435
  </div>
1424
1436
  <div class="pf-c-data-list__item-content">
@@ -1491,11 +1503,14 @@ When a list item includes more than one block of content, it can be difficult fo
1491
1503
  <div class="pf-c-data-list__item-row">
1492
1504
  <div class="pf-c-data-list__item-control">
1493
1505
  <div class="pf-c-data-list__check">
1494
- <input
1495
- type="checkbox"
1496
- name="data-list-compact-item-2-checkbox"
1497
- aria-labelledby="data-list-compact-item-2"
1498
- />
1506
+ <div class="pf-c-check pf-m-standalone">
1507
+ <input
1508
+ class="pf-c-check__input"
1509
+ type="checkbox"
1510
+ name="data-list-compact-item-2-checkbox"
1511
+ aria-labelledby="data-list-compact-item-2"
1512
+ />
1513
+ </div>
1499
1514
  </div>
1500
1515
  </div>
1501
1516
  <div class="pf-c-data-list__item-content">
@@ -1563,11 +1578,14 @@ When a list item includes more than one block of content, it can be difficult fo
1563
1578
  <div class="pf-c-data-list__item-row">
1564
1579
  <div class="pf-c-data-list__item-control">
1565
1580
  <div class="pf-c-data-list__check">
1566
- <input
1567
- type="checkbox"
1568
- name="data-list-compact-item-3-checkbox"
1569
- aria-labelledby="data-list-compact-item-3"
1570
- />
1581
+ <div class="pf-c-check pf-m-standalone">
1582
+ <input
1583
+ class="pf-c-check__input"
1584
+ type="checkbox"
1585
+ name="data-list-compact-item-3-checkbox"
1586
+ aria-labelledby="data-list-compact-item-3"
1587
+ />
1588
+ </div>
1571
1589
  </div>
1572
1590
  </div>
1573
1591
  <div class="pf-c-data-list__item-content">
@@ -1678,11 +1696,14 @@ When a list item includes more than one block of content, it can be difficult fo
1678
1696
  <div class="pf-c-data-list__item-row">
1679
1697
  <div class="pf-c-data-list__item-control">
1680
1698
  <div class="pf-c-data-list__check">
1681
- <input
1682
- type="checkbox"
1683
- name="data-list-default-fitting-item-1-checkbox"
1684
- aria-labelledby="data-list-default-fitting-item-1"
1685
- />
1699
+ <div class="pf-c-check pf-m-standalone">
1700
+ <input
1701
+ class="pf-c-check__input"
1702
+ type="checkbox"
1703
+ name="data-list-default-fitting-item-1-checkbox"
1704
+ aria-labelledby="data-list-default-fitting-item-1"
1705
+ />
1706
+ </div>
1686
1707
  </div>
1687
1708
  </div>
1688
1709
  <div class="pf-c-data-list__item-content">
@@ -1716,11 +1737,14 @@ When a list item includes more than one block of content, it can be difficult fo
1716
1737
  <div class="pf-c-data-list__item-row">
1717
1738
  <div class="pf-c-data-list__item-control">
1718
1739
  <div class="pf-c-data-list__check">
1719
- <input
1720
- type="checkbox"
1721
- name="data-list-flex-modifiers-item-1-checkbox"
1722
- aria-labelledby="data-list-flex-modifiers-item-1"
1723
- />
1740
+ <div class="pf-c-check pf-m-standalone">
1741
+ <input
1742
+ class="pf-c-check__input"
1743
+ type="checkbox"
1744
+ name="data-list-flex-modifiers-item-1-checkbox"
1745
+ aria-labelledby="data-list-flex-modifiers-item-1"
1746
+ />
1747
+ </div>
1724
1748
  </div>
1725
1749
  </div>
1726
1750
  <div class="pf-c-data-list__item-content">
@@ -1816,11 +1840,14 @@ When a list item includes more than one block of content, it can be difficult fo
1816
1840
  </div>
1817
1841
 
1818
1842
  <div class="pf-c-data-list__check">
1819
- <input
1820
- type="checkbox"
1821
- name="data-list-flex-modifiers-2-item-1-checkbox"
1822
- aria-labelledby="data-list-flex-modifiers-2-item-1"
1823
- />
1843
+ <div class="pf-c-check pf-m-standalone">
1844
+ <input
1845
+ class="pf-c-check__input"
1846
+ type="checkbox"
1847
+ name="data-list-flex-modifiers-2-item-1-checkbox"
1848
+ aria-labelledby="data-list-flex-modifiers-2-item-1"
1849
+ />
1850
+ </div>
1824
1851
  </div>
1825
1852
  </div>
1826
1853
  <div class="pf-c-data-list__item-content">
@@ -2203,11 +2230,14 @@ When a list item includes more than one block of content, it can be difficult fo
2203
2230
  </span>
2204
2231
  </button>
2205
2232
  <div class="pf-c-data-list__check">
2206
- <input
2207
- type="checkbox"
2208
- name="data-list-draggable-item-1-checkbox"
2209
- aria-labelledby="data-list-draggable-item-1"
2210
- />
2233
+ <div class="pf-c-check pf-m-standalone">
2234
+ <input
2235
+ class="pf-c-check__input"
2236
+ type="checkbox"
2237
+ name="data-list-draggable-item-1-checkbox"
2238
+ aria-labelledby="data-list-draggable-item-1"
2239
+ />
2240
+ </div>
2211
2241
  </div>
2212
2242
  </div>
2213
2243
  <div class="pf-c-data-list__item-content">
@@ -2238,11 +2268,14 @@ When a list item includes more than one block of content, it can be difficult fo
2238
2268
  </span>
2239
2269
  </button>
2240
2270
  <div class="pf-c-data-list__check">
2241
- <input
2242
- type="checkbox"
2243
- name="data-list-draggable-item-2-checkbox"
2244
- aria-labelledby="data-list-draggable-item-2"
2245
- />
2271
+ <div class="pf-c-check pf-m-standalone">
2272
+ <input
2273
+ class="pf-c-check__input"
2274
+ type="checkbox"
2275
+ name="data-list-draggable-item-2-checkbox"
2276
+ aria-labelledby="data-list-draggable-item-2"
2277
+ />
2278
+ </div>
2246
2279
  </div>
2247
2280
  </div>
2248
2281
  <div class="pf-c-data-list__item-content">
@@ -2277,11 +2310,14 @@ When a list item includes more than one block of content, it can be difficult fo
2277
2310
  </span>
2278
2311
  </button>
2279
2312
  <div class="pf-c-data-list__check">
2280
- <input
2281
- type="checkbox"
2282
- name="data-list-draggable-item-3-checkbox"
2283
- aria-labelledby="data-list-draggable-item-3"
2284
- />
2313
+ <div class="pf-c-check pf-m-standalone">
2314
+ <input
2315
+ class="pf-c-check__input"
2316
+ type="checkbox"
2317
+ name="data-list-draggable-item-3-checkbox"
2318
+ aria-labelledby="data-list-draggable-item-3"
2319
+ />
2320
+ </div>
2285
2321
  </div>
2286
2322
  </div>
2287
2323
  <div class="pf-c-data-list__item-content">
@@ -2312,11 +2348,14 @@ When a list item includes more than one block of content, it can be difficult fo
2312
2348
  </span>
2313
2349
  </button>
2314
2350
  <div class="pf-c-data-list__check">
2315
- <input
2316
- type="checkbox"
2317
- name="data-list-draggable-item-4-checkbox"
2318
- aria-labelledby="data-list-draggable-item-4"
2319
- />
2351
+ <div class="pf-c-check pf-m-standalone">
2352
+ <input
2353
+ class="pf-c-check__input"
2354
+ type="checkbox"
2355
+ name="data-list-draggable-item-4-checkbox"
2356
+ aria-labelledby="data-list-draggable-item-4"
2357
+ />
2358
+ </div>
2320
2359
  </div>
2321
2360
  </div>
2322
2361
  <div class="pf-c-data-list__item-content">
@@ -818,12 +818,15 @@ cssPrefix: pf-c-dropdown
818
818
  class="pf-c-dropdown__toggle-check"
819
819
  for="dropdown-split-button-disabled-toggle-check"
820
820
  >
821
- <input
822
- type="checkbox"
823
- id="dropdown-split-button-disabled-toggle-check"
824
- disabled
825
- aria-label="Select all"
826
- />
821
+ <div class="pf-c-check pf-m-standalone">
822
+ <input
823
+ class="pf-c-check__input"
824
+ type="checkbox"
825
+ disabled
826
+ id="dropdown-split-button-disabled-toggle-check"
827
+ aria-label="Select all"
828
+ />
829
+ </div>
827
830
  </label>
828
831
 
829
832
  <button
@@ -859,11 +862,14 @@ cssPrefix: pf-c-dropdown
859
862
  class="pf-c-dropdown__toggle-check"
860
863
  for="dropdown-split-button-toggle-check"
861
864
  >
862
- <input
863
- type="checkbox"
864
- id="dropdown-split-button-toggle-check"
865
- aria-label="Select all"
866
- />
865
+ <div class="pf-c-check pf-m-standalone">
866
+ <input
867
+ class="pf-c-check__input"
868
+ type="checkbox"
869
+ id="dropdown-split-button-toggle-check"
870
+ aria-label="Select all"
871
+ />
872
+ </div>
867
873
  </label>
868
874
 
869
875
  <button
@@ -898,11 +904,14 @@ cssPrefix: pf-c-dropdown
898
904
  class="pf-c-dropdown__toggle-check"
899
905
  for="dropdown-split-button-expanded-toggle-check"
900
906
  >
901
- <input
902
- type="checkbox"
903
- id="dropdown-split-button-expanded-toggle-check"
904
- aria-label="Select all"
905
- />
907
+ <div class="pf-c-check pf-m-standalone">
908
+ <input
909
+ class="pf-c-check__input"
910
+ type="checkbox"
911
+ id="dropdown-split-button-expanded-toggle-check"
912
+ aria-label="Select all"
913
+ />
914
+ </div>
906
915
  </label>
907
916
 
908
917
  <button
@@ -943,13 +952,16 @@ cssPrefix: pf-c-dropdown
943
952
  class="pf-c-dropdown__toggle-check"
944
953
  for="dropdown-split-button-text-toggle-check"
945
954
  >
946
- <input
947
- type="checkbox"
948
- id="dropdown-split-button-text-toggle-check"
949
- aria-label="Select all"
950
- checked
951
- aria-labelledby="dropdown-split-button-text-toggle-check dropdown-split-button-text-toggle-check-text"
952
- />
955
+ <div class="pf-c-check pf-m-standalone">
956
+ <input
957
+ class="pf-c-check__input"
958
+ type="checkbox"
959
+ checked
960
+ id="dropdown-split-button-text-toggle-check"
961
+ aria-label="Select all"
962
+ aria-labelledby="dropdown-split-button-text-toggle-check dropdown-split-button-text-toggle-check-text"
963
+ />
964
+ </div>
953
965
  <span
954
966
  class="pf-c-dropdown__toggle-text"
955
967
  aria-hidden="true"
@@ -991,11 +1003,14 @@ cssPrefix: pf-c-dropdown
991
1003
  class="pf-c-dropdown__toggle-check"
992
1004
  for="dropdown-split-button-progress-toggle-check"
993
1005
  >
994
- <input
995
- type="checkbox"
996
- id="dropdown-split-button-progress-toggle-check"
997
- aria-label="Select all"
998
- />
1006
+ <div class="pf-c-check pf-m-standalone">
1007
+ <input
1008
+ class="pf-c-check__input"
1009
+ type="checkbox"
1010
+ id="dropdown-split-button-progress-toggle-check"
1011
+ aria-label="Select all"
1012
+ />
1013
+ </div>
999
1014
  <span class="pf-c-dropdown__toggle-progress">
1000
1015
  <svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
1001
1016
  <circle
@@ -1041,12 +1056,15 @@ cssPrefix: pf-c-dropdown
1041
1056
  class="pf-c-dropdown__toggle-check pf-m-in-progress"
1042
1057
  for="dropdown-split-button-in-progress-toggle-check"
1043
1058
  >
1044
- <input
1045
- type="checkbox"
1046
- id="dropdown-split-button-in-progress-toggle-check"
1047
- disabled
1048
- aria-label="Select all"
1049
- />
1059
+ <div class="pf-c-check pf-m-standalone">
1060
+ <input
1061
+ class="pf-c-check__input"
1062
+ type="checkbox"
1063
+ disabled
1064
+ id="dropdown-split-button-in-progress-toggle-check"
1065
+ aria-label="Select all"
1066
+ />
1067
+ </div>
1050
1068
  <span class="pf-c-dropdown__toggle-progress">
1051
1069
  <svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
1052
1070
  <circle
@@ -1092,13 +1110,16 @@ cssPrefix: pf-c-dropdown
1092
1110
  class="pf-c-dropdown__toggle-check"
1093
1111
  for="dropdown-split-button-progress-text-toggle-check"
1094
1112
  >
1095
- <input
1096
- type="checkbox"
1097
- id="dropdown-split-button-progress-text-toggle-check"
1098
- aria-label="Select all"
1099
- checked
1100
- aria-labelledby="dropdown-split-button-progress-text-toggle-check dropdown-split-button-progress-text-toggle-check-text"
1101
- />
1113
+ <div class="pf-c-check pf-m-standalone">
1114
+ <input
1115
+ class="pf-c-check__input"
1116
+ type="checkbox"
1117
+ checked
1118
+ id="dropdown-split-button-progress-text-toggle-check"
1119
+ aria-label="Select all"
1120
+ aria-labelledby="dropdown-split-button-progress-text-toggle-check dropdown-split-button-progress-text-toggle-check-text"
1121
+ />
1122
+ </div>
1102
1123
  <span class="pf-c-dropdown__toggle-progress">
1103
1124
  <svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
1104
1125
  <circle
@@ -1145,14 +1166,17 @@ cssPrefix: pf-c-dropdown
1145
1166
  class="pf-c-dropdown__toggle-check pf-m-in-progress"
1146
1167
  for="dropdown-split-button-in-progress-text-toggle-check"
1147
1168
  >
1148
- <input
1149
- type="checkbox"
1150
- id="dropdown-split-button-in-progress-text-toggle-check"
1151
- disabled
1152
- aria-label="Select all"
1153
- checked
1154
- aria-labelledby="dropdown-split-button-in-progress-text-toggle-check dropdown-split-button-in-progress-text-toggle-check-text"
1155
- />
1169
+ <div class="pf-c-check pf-m-standalone">
1170
+ <input
1171
+ class="pf-c-check__input"
1172
+ type="checkbox"
1173
+ checked
1174
+ disabled
1175
+ id="dropdown-split-button-in-progress-text-toggle-check"
1176
+ aria-label="Select all"
1177
+ aria-labelledby="dropdown-split-button-in-progress-text-toggle-check dropdown-split-button-in-progress-text-toggle-check-text"
1178
+ />
1179
+ </div>
1156
1180
  <span class="pf-c-dropdown__toggle-progress">
1157
1181
  <svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
1158
1182
  <circle
@@ -740,9 +740,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
740
740
  </span>
741
741
  </li>
742
742
  <li class="pf-c-label-group__list-item">
743
- <span
744
- class="pf-c-label pf-m-blue pf-m-active pf-m-editable pf-m-editable-active"
745
- >
743
+ <span class="pf-c-label pf-m-blue pf-m-editable pf-m-editable-active">
746
744
  <input
747
745
  class="pf-c-label__content"
748
746
  id="editable-labels-label-active-editable-group-example-editable-label-active-editable-content"
@@ -751,16 +749,6 @@ In addition to the JavaScript management of [editable labels](/components/label#
751
749
  "
752
750
  aria-label="Editable text"
753
751
  />
754
-
755
- <button
756
- class="pf-c-button pf-m-plain"
757
- type="button"
758
- id="editable-labels-label-active-editable-group-example-editable-label-active-button"
759
- aria-label="Remove"
760
- aria-labelledby="editable-labels-label-active-editable-group-example-editable-label-active-button editable-labels-label-active-editable-group-example-editable-label-active-text"
761
- >
762
- <i class="fas fa-times" aria-hidden="true"></i>
763
- </button>
764
752
  </span>
765
753
  </li>
766
754
  <li class="pf-c-label-group__list-item pf-m-textarea">
@@ -916,7 +904,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
916
904
  </span>
917
905
  </li>
918
906
  <li class="pf-c-label-group__list-item">
919
- <span class="pf-c-label pf-m-blue pf-m-active pf-m-editable">
907
+ <span class="pf-c-label pf-m-blue pf-m-editable">
920
908
  <button
921
909
  class="pf-c-label__content"
922
910
  id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-editable-content"
@@ -178,9 +178,9 @@ cssPrefix: pf-c-menu
178
178
  <input
179
179
  class="pf-c-check__input"
180
180
  type="checkbox"
181
+ disabled
181
182
  id="with-checkbox-example-check-3"
182
183
  name="with-checkbox-example-check-3"
183
- disabled
184
184
  />
185
185
  </span>
186
186
  </span>
@@ -273,10 +273,10 @@ cssPrefix: pf-c-menu-toggle
273
273
  <input
274
274
  class="pf-c-check__input"
275
275
  type="checkbox"
276
+ disabled
276
277
  id="split-button-checkbox-disabled-example-input"
277
278
  name="split-button-checkbox-disabled-example-input"
278
279
  aria-label="Standalone input"
279
- disabled
280
280
  />
281
281
  </label>
282
282
  <button
@@ -358,9 +358,9 @@ cssPrefix: pf-c-menu-toggle
358
358
  <input
359
359
  class="pf-c-check__input"
360
360
  type="checkbox"
361
+ disabled
361
362
  id="split-button-checkbox-with-toggle-text-disabled-example-input"
362
363
  name="split-button-checkbox-with-toggle-text-disabled-example-input"
363
- disabled
364
364
  />
365
365
  <span class="pf-c-check__label pf-m-disabled">10 selected</span>
366
366
  </label>
@@ -449,9 +449,9 @@ cssPrefix: pf-c-menu-toggle
449
449
  <input
450
450
  class="pf-c-check__input"
451
451
  type="checkbox"
452
+ disabled
452
453
  id="split-button-checkbox-primary-disabled-example-input"
453
454
  name="split-button-checkbox-primary-disabled-example-input"
454
- disabled
455
455
  />
456
456
  <span class="pf-c-check__label pf-m-disabled">10 selected</span>
457
457
  </label>
@@ -537,9 +537,9 @@ cssPrefix: pf-c-menu-toggle
537
537
  <input
538
538
  class="pf-c-check__input"
539
539
  type="checkbox"
540
+ disabled
540
541
  id="split-button-checkbox-secondary-disabled-example-input"
541
542
  name="split-button-checkbox-secondary-disabled-example-input"
542
- disabled
543
543
  />
544
544
  <span class="pf-c-check__label pf-m-disabled">10 selected</span>
545
545
  </label>