@patternfly/patternfly 6.6.0-prerelease.34 → 6.6.0-prerelease.35
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/components/DataList/data-list.css +11 -9
- package/components/DataList/data-list.scss +7 -5
- package/components/_index.css +11 -9
- package/docs/components/DataList/examples/DataList.md +129 -126
- package/docs/demos/DataList/examples/DataList.md +27 -27
- package/docs/demos/Table/examples/Table.md +15 -15
- package/package.json +1 -1
- package/patternfly-no-globals.css +11 -9
- package/patternfly.css +11 -9
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -124,13 +124,13 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
124
124
|
<div class="pf-v6-c-data-list__check">
|
|
125
125
|
<label
|
|
126
126
|
class="pf-v6-c-check pf-m-standalone"
|
|
127
|
-
for="data-list-checkboxes-actions-addl-cells-item-1
|
|
127
|
+
for="data-list-checkboxes-actions-addl-cells-item-1-input"
|
|
128
128
|
>
|
|
129
129
|
<input
|
|
130
130
|
class="pf-v6-c-check__input"
|
|
131
131
|
type="checkbox"
|
|
132
|
-
id="data-list-checkboxes-actions-addl-cells-item-1
|
|
133
|
-
name="data-list-checkboxes-actions-addl-cells-item-1
|
|
132
|
+
id="data-list-checkboxes-actions-addl-cells-item-1-input"
|
|
133
|
+
name="data-list-checkboxes-actions-addl-cells-item-1-input"
|
|
134
134
|
aria-label="Standalone check"
|
|
135
135
|
/>
|
|
136
136
|
</label>
|
|
@@ -189,13 +189,13 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
189
189
|
<div class="pf-v6-c-data-list__check">
|
|
190
190
|
<label
|
|
191
191
|
class="pf-v6-c-check pf-m-standalone"
|
|
192
|
-
for="data-list-checkboxes-actions-addl-cells-item-2
|
|
192
|
+
for="data-list-checkboxes-actions-addl-cells-item-2-input"
|
|
193
193
|
>
|
|
194
194
|
<input
|
|
195
195
|
class="pf-v6-c-check__input"
|
|
196
196
|
type="checkbox"
|
|
197
|
-
id="data-list-checkboxes-actions-addl-cells-item-2
|
|
198
|
-
name="data-list-checkboxes-actions-addl-cells-item-2
|
|
197
|
+
id="data-list-checkboxes-actions-addl-cells-item-2-input"
|
|
198
|
+
name="data-list-checkboxes-actions-addl-cells-item-2-input"
|
|
199
199
|
aria-label="Standalone check"
|
|
200
200
|
/>
|
|
201
201
|
</label>
|
|
@@ -255,13 +255,13 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
255
255
|
<div class="pf-v6-c-data-list__check">
|
|
256
256
|
<label
|
|
257
257
|
class="pf-v6-c-check pf-m-standalone"
|
|
258
|
-
for="data-list-checkboxes-actions-addl-cells-item-3
|
|
258
|
+
for="data-list-checkboxes-actions-addl-cells-item-3-input"
|
|
259
259
|
>
|
|
260
260
|
<input
|
|
261
261
|
class="pf-v6-c-check__input"
|
|
262
262
|
type="checkbox"
|
|
263
|
-
id="data-list-checkboxes-actions-addl-cells-item-3
|
|
264
|
-
name="data-list-checkboxes-actions-addl-cells-item-3
|
|
263
|
+
id="data-list-checkboxes-actions-addl-cells-item-3-input"
|
|
264
|
+
name="data-list-checkboxes-actions-addl-cells-item-3-input"
|
|
265
265
|
aria-label="Standalone check"
|
|
266
266
|
/>
|
|
267
267
|
</label>
|
|
@@ -1410,13 +1410,13 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1410
1410
|
<div class="pf-v6-c-data-list__check">
|
|
1411
1411
|
<label
|
|
1412
1412
|
class="pf-v6-c-check pf-m-standalone"
|
|
1413
|
-
for="data-list-compact-item-1
|
|
1413
|
+
for="data-list-compact-item-1-input"
|
|
1414
1414
|
>
|
|
1415
1415
|
<input
|
|
1416
1416
|
class="pf-v6-c-check__input"
|
|
1417
1417
|
type="checkbox"
|
|
1418
|
-
id="data-list-compact-item-1
|
|
1419
|
-
name="data-list-compact-item-1
|
|
1418
|
+
id="data-list-compact-item-1-input"
|
|
1419
|
+
name="data-list-compact-item-1-input"
|
|
1420
1420
|
aria-label="Standalone check"
|
|
1421
1421
|
/>
|
|
1422
1422
|
</label>
|
|
@@ -1473,13 +1473,13 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1473
1473
|
<div class="pf-v6-c-data-list__check">
|
|
1474
1474
|
<label
|
|
1475
1475
|
class="pf-v6-c-check pf-m-standalone"
|
|
1476
|
-
for="data-list-compact-item-2
|
|
1476
|
+
for="data-list-compact-item-2-input"
|
|
1477
1477
|
>
|
|
1478
1478
|
<input
|
|
1479
1479
|
class="pf-v6-c-check__input"
|
|
1480
1480
|
type="checkbox"
|
|
1481
|
-
id="data-list-compact-item-2
|
|
1482
|
-
name="data-list-compact-item-2
|
|
1481
|
+
id="data-list-compact-item-2-input"
|
|
1482
|
+
name="data-list-compact-item-2-input"
|
|
1483
1483
|
aria-label="Standalone check"
|
|
1484
1484
|
/>
|
|
1485
1485
|
</label>
|
|
@@ -1537,13 +1537,13 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1537
1537
|
<div class="pf-v6-c-data-list__check">
|
|
1538
1538
|
<label
|
|
1539
1539
|
class="pf-v6-c-check pf-m-standalone"
|
|
1540
|
-
for="data-list-compact-item-3
|
|
1540
|
+
for="data-list-compact-item-3-input"
|
|
1541
1541
|
>
|
|
1542
1542
|
<input
|
|
1543
1543
|
class="pf-v6-c-check__input"
|
|
1544
1544
|
type="checkbox"
|
|
1545
|
-
id="data-list-compact-item-3
|
|
1546
|
-
name="data-list-compact-item-3
|
|
1545
|
+
id="data-list-compact-item-3-input"
|
|
1546
|
+
name="data-list-compact-item-3-input"
|
|
1547
1547
|
aria-label="Standalone check"
|
|
1548
1548
|
/>
|
|
1549
1549
|
</label>
|
|
@@ -1646,13 +1646,13 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1646
1646
|
<div class="pf-v6-c-data-list__check">
|
|
1647
1647
|
<label
|
|
1648
1648
|
class="pf-v6-c-check pf-m-standalone"
|
|
1649
|
-
for="data-list-modifiers-item-1
|
|
1649
|
+
for="data-list-modifiers-item-1-input"
|
|
1650
1650
|
>
|
|
1651
1651
|
<input
|
|
1652
1652
|
class="pf-v6-c-check__input"
|
|
1653
1653
|
type="checkbox"
|
|
1654
|
-
id="data-list-modifiers-item-1
|
|
1655
|
-
name="data-list-modifiers-item-1
|
|
1654
|
+
id="data-list-modifiers-item-1-input"
|
|
1655
|
+
name="data-list-modifiers-item-1-input"
|
|
1656
1656
|
aria-label="Standalone check"
|
|
1657
1657
|
/>
|
|
1658
1658
|
</label>
|
|
@@ -1680,13 +1680,13 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1680
1680
|
<div class="pf-v6-c-data-list__check">
|
|
1681
1681
|
<label
|
|
1682
1682
|
class="pf-v6-c-check pf-m-standalone"
|
|
1683
|
-
for="data-list-modifiers-item-2
|
|
1683
|
+
for="data-list-modifiers-item-2-input"
|
|
1684
1684
|
>
|
|
1685
1685
|
<input
|
|
1686
1686
|
class="pf-v6-c-check__input"
|
|
1687
1687
|
type="checkbox"
|
|
1688
|
-
id="data-list-modifiers-item-2
|
|
1689
|
-
name="data-list-modifiers-item-2
|
|
1688
|
+
id="data-list-modifiers-item-2-input"
|
|
1689
|
+
name="data-list-modifiers-item-2-input"
|
|
1690
1690
|
aria-label="Standalone check"
|
|
1691
1691
|
/>
|
|
1692
1692
|
</label>
|
|
@@ -1769,13 +1769,13 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1769
1769
|
<div class="pf-v6-c-data-list__check">
|
|
1770
1770
|
<label
|
|
1771
1771
|
class="pf-v6-c-check pf-m-standalone"
|
|
1772
|
-
for="data-list-modifiers-item-3
|
|
1772
|
+
for="data-list-modifiers-item-3-input"
|
|
1773
1773
|
>
|
|
1774
1774
|
<input
|
|
1775
1775
|
class="pf-v6-c-check__input"
|
|
1776
1776
|
type="checkbox"
|
|
1777
|
-
id="data-list-modifiers-item-3
|
|
1778
|
-
name="data-list-modifiers-item-3
|
|
1777
|
+
id="data-list-modifiers-item-3-input"
|
|
1778
|
+
name="data-list-modifiers-item-3-input"
|
|
1779
1779
|
aria-label="Standalone check"
|
|
1780
1780
|
/>
|
|
1781
1781
|
</label>
|
|
@@ -2228,9 +2228,6 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
2228
2228
|
### Draggable data list example
|
|
2229
2229
|
|
|
2230
2230
|
```html
|
|
2231
|
-
<div
|
|
2232
|
-
id="draggable-help"
|
|
2233
|
-
>Activate the reorder button and use the arrow keys to reorder the list or use your mouse to drag/reorder. Press escape to cancel the reordering.</div>
|
|
2234
2231
|
<ul
|
|
2235
2232
|
class="pf-v6-c-data-list pf-m-compact"
|
|
2236
2233
|
role="list"
|
|
@@ -2241,41 +2238,43 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
2241
2238
|
<div class="pf-v6-c-data-list__item-row">
|
|
2242
2239
|
<div class="pf-v6-c-data-list__item-control">
|
|
2243
2240
|
<button
|
|
2244
|
-
class="pf-v6-c-data-list__item-draggable-button pf-m-
|
|
2245
|
-
type="button"
|
|
2246
|
-
aria-label="Reorder"
|
|
2247
|
-
aria-pressed="false"
|
|
2241
|
+
class="pf-v6-c-button pf-v6-c-data-list__item-draggable-button pf-m-plain"
|
|
2248
2242
|
id="data-list-draggable-draggable-button-1"
|
|
2249
|
-
|
|
2243
|
+
type="button"
|
|
2250
2244
|
aria-labelledby="data-list-draggable-draggable-button-1 data-list-draggable-item-1"
|
|
2245
|
+
aria-label="Drag button"
|
|
2246
|
+
aria-describedby="draggable-help"
|
|
2251
2247
|
disabled
|
|
2248
|
+
aria-pressed="false"
|
|
2252
2249
|
>
|
|
2253
|
-
<span class="pf-v6-c-
|
|
2254
|
-
<
|
|
2255
|
-
|
|
2256
|
-
|
|
2257
|
-
|
|
2258
|
-
|
|
2259
|
-
|
|
2260
|
-
|
|
2261
|
-
|
|
2262
|
-
|
|
2263
|
-
|
|
2264
|
-
|
|
2265
|
-
|
|
2266
|
-
|
|
2250
|
+
<span class="pf-v6-c-button__icon">
|
|
2251
|
+
<span class="pf-v6-c-data-list__item-draggable-icon">
|
|
2252
|
+
<svg
|
|
2253
|
+
class="pf-v6-svg"
|
|
2254
|
+
fill="currentColor"
|
|
2255
|
+
viewBox="0 0 32 32"
|
|
2256
|
+
aria-hidden="true"
|
|
2257
|
+
role="img"
|
|
2258
|
+
width="1em"
|
|
2259
|
+
height="1em"
|
|
2260
|
+
>
|
|
2261
|
+
<path
|
|
2262
|
+
d="M13.75 2.25v5.5c0 .551-.448 1-1 1h-5.5c-.552 0-1-.449-1-1v-5.5c0-.551.448-1 1-1h5.5c.552 0 1 .449 1 1Zm11-1h-5.5c-.552 0-1 .449-1 1v5.5c0 .551.448 1 1 1h5.5c.552 0 1-.449 1-1v-5.5c0-.551-.448-1-1-1Zm-12 11h-5.5c-.552 0-1 .449-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5c0-.551-.448-1-1-1Zm12 0h-5.5c-.552 0-1 .449-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5c0-.551-.448-1-1-1Zm-12 11h-5.5a1 1 0 0 0-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5a1 1 0 0 0-1-1Zm12 0h-5.5a1 1 0 0 0-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5a1 1 0 0 0-1-1Z"
|
|
2263
|
+
/>
|
|
2264
|
+
</svg>
|
|
2265
|
+
</span>
|
|
2267
2266
|
</span>
|
|
2268
2267
|
</button>
|
|
2269
2268
|
<div class="pf-v6-c-data-list__check">
|
|
2270
2269
|
<label
|
|
2271
2270
|
class="pf-v6-c-check pf-m-standalone"
|
|
2272
|
-
for="data-list-draggable-item-1
|
|
2271
|
+
for="data-list-draggable-item-1-input"
|
|
2273
2272
|
>
|
|
2274
2273
|
<input
|
|
2275
2274
|
class="pf-v6-c-check__input"
|
|
2276
2275
|
type="checkbox"
|
|
2277
|
-
id="data-list-draggable-item-1
|
|
2278
|
-
name="data-list-draggable-item-1
|
|
2276
|
+
id="data-list-draggable-item-1-input"
|
|
2277
|
+
name="data-list-draggable-item-1-input"
|
|
2279
2278
|
aria-label="Standalone check"
|
|
2280
2279
|
/>
|
|
2281
2280
|
</label>
|
|
@@ -2296,40 +2295,42 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
2296
2295
|
<div class="pf-v6-c-data-list__item-row">
|
|
2297
2296
|
<div class="pf-v6-c-data-list__item-control">
|
|
2298
2297
|
<button
|
|
2299
|
-
class="pf-v6-c-data-list__item-draggable-button"
|
|
2300
|
-
type="button"
|
|
2301
|
-
aria-label="Reorder"
|
|
2302
|
-
aria-pressed="false"
|
|
2298
|
+
class="pf-v6-c-button pf-v6-c-data-list__item-draggable-button pf-m-plain"
|
|
2303
2299
|
id="data-list-draggable-draggable-button-2"
|
|
2304
|
-
|
|
2300
|
+
type="button"
|
|
2305
2301
|
aria-labelledby="data-list-draggable-draggable-button-2 data-list-draggable-item-2"
|
|
2302
|
+
aria-label="Drag button"
|
|
2303
|
+
aria-describedby="draggable-help"
|
|
2304
|
+
aria-pressed="false"
|
|
2306
2305
|
>
|
|
2307
|
-
<span class="pf-v6-c-
|
|
2308
|
-
<
|
|
2309
|
-
|
|
2310
|
-
|
|
2311
|
-
|
|
2312
|
-
|
|
2313
|
-
|
|
2314
|
-
|
|
2315
|
-
|
|
2316
|
-
|
|
2317
|
-
|
|
2318
|
-
|
|
2319
|
-
|
|
2320
|
-
|
|
2306
|
+
<span class="pf-v6-c-button__icon">
|
|
2307
|
+
<span class="pf-v6-c-data-list__item-draggable-icon">
|
|
2308
|
+
<svg
|
|
2309
|
+
class="pf-v6-svg"
|
|
2310
|
+
fill="currentColor"
|
|
2311
|
+
viewBox="0 0 32 32"
|
|
2312
|
+
aria-hidden="true"
|
|
2313
|
+
role="img"
|
|
2314
|
+
width="1em"
|
|
2315
|
+
height="1em"
|
|
2316
|
+
>
|
|
2317
|
+
<path
|
|
2318
|
+
d="M13.75 2.25v5.5c0 .551-.448 1-1 1h-5.5c-.552 0-1-.449-1-1v-5.5c0-.551.448-1 1-1h5.5c.552 0 1 .449 1 1Zm11-1h-5.5c-.552 0-1 .449-1 1v5.5c0 .551.448 1 1 1h5.5c.552 0 1-.449 1-1v-5.5c0-.551-.448-1-1-1Zm-12 11h-5.5c-.552 0-1 .449-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5c0-.551-.448-1-1-1Zm12 0h-5.5c-.552 0-1 .449-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5c0-.551-.448-1-1-1Zm-12 11h-5.5a1 1 0 0 0-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5a1 1 0 0 0-1-1Zm12 0h-5.5a1 1 0 0 0-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5a1 1 0 0 0-1-1Z"
|
|
2319
|
+
/>
|
|
2320
|
+
</svg>
|
|
2321
|
+
</span>
|
|
2321
2322
|
</span>
|
|
2322
2323
|
</button>
|
|
2323
2324
|
<div class="pf-v6-c-data-list__check">
|
|
2324
2325
|
<label
|
|
2325
2326
|
class="pf-v6-c-check pf-m-standalone"
|
|
2326
|
-
for="data-list-draggable-item-2
|
|
2327
|
+
for="data-list-draggable-item-2-input"
|
|
2327
2328
|
>
|
|
2328
2329
|
<input
|
|
2329
2330
|
class="pf-v6-c-check__input"
|
|
2330
2331
|
type="checkbox"
|
|
2331
|
-
id="data-list-draggable-item-2
|
|
2332
|
-
name="data-list-draggable-item-2
|
|
2332
|
+
id="data-list-draggable-item-2-input"
|
|
2333
|
+
name="data-list-draggable-item-2-input"
|
|
2333
2334
|
aria-label="Standalone check"
|
|
2334
2335
|
/>
|
|
2335
2336
|
</label>
|
|
@@ -2350,41 +2351,43 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
2350
2351
|
<div class="pf-v6-c-data-list__item-row">
|
|
2351
2352
|
<div class="pf-v6-c-data-list__item-control">
|
|
2352
2353
|
<button
|
|
2353
|
-
class="pf-v6-c-data-list__item-draggable-button"
|
|
2354
|
-
type="button"
|
|
2355
|
-
aria-label="Reorder"
|
|
2356
|
-
aria-pressed="false"
|
|
2354
|
+
class="pf-v6-c-button pf-v6-c-data-list__item-draggable-button pf-m-plain"
|
|
2357
2355
|
id="data-list-draggable-draggable-button-3"
|
|
2358
|
-
|
|
2356
|
+
type="button"
|
|
2359
2357
|
aria-labelledby="data-list-draggable-draggable-button-3 data-list-draggable-item-3"
|
|
2358
|
+
aria-label="Drag button"
|
|
2359
|
+
aria-describedby="draggable-help"
|
|
2360
2360
|
disabled
|
|
2361
|
+
aria-pressed="false"
|
|
2361
2362
|
>
|
|
2362
|
-
<span class="pf-v6-c-
|
|
2363
|
-
<
|
|
2364
|
-
|
|
2365
|
-
|
|
2366
|
-
|
|
2367
|
-
|
|
2368
|
-
|
|
2369
|
-
|
|
2370
|
-
|
|
2371
|
-
|
|
2372
|
-
|
|
2373
|
-
|
|
2374
|
-
|
|
2375
|
-
|
|
2363
|
+
<span class="pf-v6-c-button__icon">
|
|
2364
|
+
<span class="pf-v6-c-data-list__item-draggable-icon">
|
|
2365
|
+
<svg
|
|
2366
|
+
class="pf-v6-svg"
|
|
2367
|
+
fill="currentColor"
|
|
2368
|
+
viewBox="0 0 32 32"
|
|
2369
|
+
aria-hidden="true"
|
|
2370
|
+
role="img"
|
|
2371
|
+
width="1em"
|
|
2372
|
+
height="1em"
|
|
2373
|
+
>
|
|
2374
|
+
<path
|
|
2375
|
+
d="M13.75 2.25v5.5c0 .551-.448 1-1 1h-5.5c-.552 0-1-.449-1-1v-5.5c0-.551.448-1 1-1h5.5c.552 0 1 .449 1 1Zm11-1h-5.5c-.552 0-1 .449-1 1v5.5c0 .551.448 1 1 1h5.5c.552 0 1-.449 1-1v-5.5c0-.551-.448-1-1-1Zm-12 11h-5.5c-.552 0-1 .449-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5c0-.551-.448-1-1-1Zm12 0h-5.5c-.552 0-1 .449-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5c0-.551-.448-1-1-1Zm-12 11h-5.5a1 1 0 0 0-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5a1 1 0 0 0-1-1Zm12 0h-5.5a1 1 0 0 0-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5a1 1 0 0 0-1-1Z"
|
|
2376
|
+
/>
|
|
2377
|
+
</svg>
|
|
2378
|
+
</span>
|
|
2376
2379
|
</span>
|
|
2377
2380
|
</button>
|
|
2378
2381
|
<div class="pf-v6-c-data-list__check">
|
|
2379
2382
|
<label
|
|
2380
2383
|
class="pf-v6-c-check pf-m-standalone"
|
|
2381
|
-
for="data-list-draggable-item-3
|
|
2384
|
+
for="data-list-draggable-item-3-input"
|
|
2382
2385
|
>
|
|
2383
2386
|
<input
|
|
2384
2387
|
class="pf-v6-c-check__input"
|
|
2385
2388
|
type="checkbox"
|
|
2386
|
-
id="data-list-draggable-item-3
|
|
2387
|
-
name="data-list-draggable-item-3
|
|
2389
|
+
id="data-list-draggable-item-3-input"
|
|
2390
|
+
name="data-list-draggable-item-3-input"
|
|
2388
2391
|
aria-label="Standalone check"
|
|
2389
2392
|
/>
|
|
2390
2393
|
</label>
|
|
@@ -2405,40 +2408,43 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
2405
2408
|
<div class="pf-v6-c-data-list__item-row">
|
|
2406
2409
|
<div class="pf-v6-c-data-list__item-control">
|
|
2407
2410
|
<button
|
|
2408
|
-
class="pf-v6-c-data-list__item-draggable-button"
|
|
2409
|
-
type="button"
|
|
2410
|
-
aria-label="Reorder"
|
|
2411
|
-
aria-pressed="false"
|
|
2411
|
+
class="pf-v6-c-button pf-v6-c-data-list__item-draggable-button pf-m-plain"
|
|
2412
2412
|
id="data-list-draggable-draggable-button-4"
|
|
2413
|
-
|
|
2413
|
+
type="button"
|
|
2414
2414
|
aria-labelledby="data-list-draggable-draggable-button-4 data-list-draggable-item-4"
|
|
2415
|
+
aria-label="Drag button"
|
|
2416
|
+
aria-describedby="draggable-help"
|
|
2417
|
+
disabled
|
|
2418
|
+
aria-pressed="false"
|
|
2415
2419
|
>
|
|
2416
|
-
<span class="pf-v6-c-
|
|
2417
|
-
<
|
|
2418
|
-
|
|
2419
|
-
|
|
2420
|
-
|
|
2421
|
-
|
|
2422
|
-
|
|
2423
|
-
|
|
2424
|
-
|
|
2425
|
-
|
|
2426
|
-
|
|
2427
|
-
|
|
2428
|
-
|
|
2429
|
-
|
|
2420
|
+
<span class="pf-v6-c-button__icon">
|
|
2421
|
+
<span class="pf-v6-c-data-list__item-draggable-icon">
|
|
2422
|
+
<svg
|
|
2423
|
+
class="pf-v6-svg"
|
|
2424
|
+
fill="currentColor"
|
|
2425
|
+
viewBox="0 0 32 32"
|
|
2426
|
+
aria-hidden="true"
|
|
2427
|
+
role="img"
|
|
2428
|
+
width="1em"
|
|
2429
|
+
height="1em"
|
|
2430
|
+
>
|
|
2431
|
+
<path
|
|
2432
|
+
d="M13.75 2.25v5.5c0 .551-.448 1-1 1h-5.5c-.552 0-1-.449-1-1v-5.5c0-.551.448-1 1-1h5.5c.552 0 1 .449 1 1Zm11-1h-5.5c-.552 0-1 .449-1 1v5.5c0 .551.448 1 1 1h5.5c.552 0 1-.449 1-1v-5.5c0-.551-.448-1-1-1Zm-12 11h-5.5c-.552 0-1 .449-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5c0-.551-.448-1-1-1Zm12 0h-5.5c-.552 0-1 .449-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5c0-.551-.448-1-1-1Zm-12 11h-5.5a1 1 0 0 0-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5a1 1 0 0 0-1-1Zm12 0h-5.5a1 1 0 0 0-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5a1 1 0 0 0-1-1Z"
|
|
2433
|
+
/>
|
|
2434
|
+
</svg>
|
|
2435
|
+
</span>
|
|
2430
2436
|
</span>
|
|
2431
2437
|
</button>
|
|
2432
2438
|
<div class="pf-v6-c-data-list__check">
|
|
2433
2439
|
<label
|
|
2434
2440
|
class="pf-v6-c-check pf-m-standalone"
|
|
2435
|
-
for="data-list-draggable-item-4
|
|
2441
|
+
for="data-list-draggable-item-4-input"
|
|
2436
2442
|
>
|
|
2437
2443
|
<input
|
|
2438
2444
|
class="pf-v6-c-check__input"
|
|
2439
2445
|
type="checkbox"
|
|
2440
|
-
id="data-list-draggable-item-4
|
|
2441
|
-
name="data-list-draggable-item-4
|
|
2446
|
+
id="data-list-draggable-item-4-input"
|
|
2447
|
+
name="data-list-draggable-item-4-input"
|
|
2442
2448
|
aria-label="Standalone check"
|
|
2443
2449
|
/>
|
|
2444
2450
|
</label>
|
|
@@ -2456,9 +2462,8 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
2456
2462
|
</li>
|
|
2457
2463
|
</ul>
|
|
2458
2464
|
<div
|
|
2459
|
-
|
|
2460
|
-
|
|
2461
|
-
>This is the aria-live section that provides real-time feedback to the user.</div>
|
|
2465
|
+
id="draggable-help"
|
|
2466
|
+
>To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.</div>
|
|
2462
2467
|
|
|
2463
2468
|
```
|
|
2464
2469
|
|
|
@@ -2466,7 +2471,7 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
2466
2471
|
|
|
2467
2472
|
| Attribute | Applied to | Outcome |
|
|
2468
2473
|
| -- | -- | -- |
|
|
2469
|
-
| `aria-pressed="true or false"` | `.pf-v6-c-data-list__item-draggable-button` | Indicates that the button is a toggle.
|
|
2474
|
+
| `aria-pressed="true or false"` | `.pf-v6-c-data-list__item-draggable-button` | Indicates that the button is a toggle. |
|
|
2470
2475
|
| `aria-live` | `[element with live text]` | Gives screen reader users live feedback about what's happening during interaction with the data list, both during drag and drop interactions and keyboard interactions. **Highly Recommended** |
|
|
2471
2476
|
| `aria-describedby="[id value of applicable content]"` | `.pf-v6-c-data-list__item-draggable-button` | Gives the draggable button an accessible description by referring to the textual content that describes how to use the button to drag elements. The example here uses a `<div id="draggable-help"></div>`. **Highly recommended** |
|
|
2472
2477
|
| `aria-labelledby="[id value of .pf-v6-c-data-list__item-draggable-button] [id value of .pf-v6-c-data-list__cell-text]"` | `.pf-v6-c-data-list__item-draggable-button` | Provides an accessible name for the draggable button. |
|
|
@@ -2476,11 +2481,9 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
2476
2481
|
|
|
2477
2482
|
| Class | Applied to | Outcome |
|
|
2478
2483
|
| -- | -- | -- |
|
|
2479
|
-
| `.pf-v6-c-data-list__item-draggable-button` |
|
|
2484
|
+
| `.pf-v6-c-data-list__item-draggable-button` | `.pf-v6-c-button` | Initiates the draggable button. Use for drag and drop. |
|
|
2480
2485
|
| `.pf-v6-c-data-list__item-draggable-icon` | `<span>` | Initiates the draggable button icon. |
|
|
2481
|
-
| `.pf-m-
|
|
2482
|
-
| `.pf-m-ghost-row` | `.pf-v6-c-data-list__item.pf-m-draggable` | Modifies a draggable data list item to be the ghost row. |
|
|
2483
|
-
| `.pf-m-disabled` | `.pf-v6-c-data-list__item.pf-m-draggable` | Modifies a data list draggable item for the disabled state. |
|
|
2486
|
+
| `.pf-m-ghost-row` | `.pf-v6-c-data-list__item` | Modifies a draggable data list item to be the ghost row. |
|
|
2484
2487
|
| `.pf-m-drag-over` | `.pf-v6-c-data-list` | Modifies the data list to indicate that a draggable item is being dragged over the data list. |
|
|
2485
2488
|
|
|
2486
2489
|
## Plain data list
|
|
@@ -1772,13 +1772,13 @@ wrapperTag: div
|
|
|
1772
1772
|
<div class="pf-v6-c-data-list__check">
|
|
1773
1773
|
<label
|
|
1774
1774
|
class="pf-v6-c-check pf-m-standalone"
|
|
1775
|
-
for="data-list-actionable-example-data-list-item-1
|
|
1775
|
+
for="data-list-actionable-example-data-list-item-1-input"
|
|
1776
1776
|
>
|
|
1777
1777
|
<input
|
|
1778
1778
|
class="pf-v6-c-check__input"
|
|
1779
1779
|
type="checkbox"
|
|
1780
|
-
id="data-list-actionable-example-data-list-item-1
|
|
1781
|
-
name="data-list-actionable-example-data-list-item-1
|
|
1780
|
+
id="data-list-actionable-example-data-list-item-1-input"
|
|
1781
|
+
name="data-list-actionable-example-data-list-item-1-input"
|
|
1782
1782
|
aria-label="Standalone check"
|
|
1783
1783
|
/>
|
|
1784
1784
|
</label>
|
|
@@ -1869,13 +1869,13 @@ wrapperTag: div
|
|
|
1869
1869
|
<div class="pf-v6-c-data-list__check">
|
|
1870
1870
|
<label
|
|
1871
1871
|
class="pf-v6-c-check pf-m-standalone"
|
|
1872
|
-
for="data-list-actionable-example-data-list-item-2
|
|
1872
|
+
for="data-list-actionable-example-data-list-item-2-input"
|
|
1873
1873
|
>
|
|
1874
1874
|
<input
|
|
1875
1875
|
class="pf-v6-c-check__input"
|
|
1876
1876
|
type="checkbox"
|
|
1877
|
-
id="data-list-actionable-example-data-list-item-2
|
|
1878
|
-
name="data-list-actionable-example-data-list-item-2
|
|
1877
|
+
id="data-list-actionable-example-data-list-item-2-input"
|
|
1878
|
+
name="data-list-actionable-example-data-list-item-2-input"
|
|
1879
1879
|
aria-label="Standalone check"
|
|
1880
1880
|
/>
|
|
1881
1881
|
</label>
|
|
@@ -2011,13 +2011,13 @@ wrapperTag: div
|
|
|
2011
2011
|
<div class="pf-v6-c-data-list__check">
|
|
2012
2012
|
<label
|
|
2013
2013
|
class="pf-v6-c-check pf-m-standalone"
|
|
2014
|
-
for="data-list-actionable-example-data-list-item-3
|
|
2014
|
+
for="data-list-actionable-example-data-list-item-3-input"
|
|
2015
2015
|
>
|
|
2016
2016
|
<input
|
|
2017
2017
|
class="pf-v6-c-check__input"
|
|
2018
2018
|
type="checkbox"
|
|
2019
|
-
id="data-list-actionable-example-data-list-item-3
|
|
2020
|
-
name="data-list-actionable-example-data-list-item-3
|
|
2019
|
+
id="data-list-actionable-example-data-list-item-3-input"
|
|
2020
|
+
name="data-list-actionable-example-data-list-item-3-input"
|
|
2021
2021
|
aria-label="Standalone check"
|
|
2022
2022
|
/>
|
|
2023
2023
|
</label>
|
|
@@ -2051,13 +2051,13 @@ wrapperTag: div
|
|
|
2051
2051
|
<div class="pf-v6-c-data-list__check">
|
|
2052
2052
|
<label
|
|
2053
2053
|
class="pf-v6-c-check pf-m-standalone"
|
|
2054
|
-
for="data-list-actionable-example-data-list-item-4
|
|
2054
|
+
for="data-list-actionable-example-data-list-item-4-input"
|
|
2055
2055
|
>
|
|
2056
2056
|
<input
|
|
2057
2057
|
class="pf-v6-c-check__input"
|
|
2058
2058
|
type="checkbox"
|
|
2059
|
-
id="data-list-actionable-example-data-list-item-4
|
|
2060
|
-
name="data-list-actionable-example-data-list-item-4
|
|
2059
|
+
id="data-list-actionable-example-data-list-item-4-input"
|
|
2060
|
+
name="data-list-actionable-example-data-list-item-4-input"
|
|
2061
2061
|
aria-label="Standalone check"
|
|
2062
2062
|
/>
|
|
2063
2063
|
</label>
|
|
@@ -3042,13 +3042,13 @@ wrapperTag: div
|
|
|
3042
3042
|
<div class="pf-v6-c-data-list__check">
|
|
3043
3043
|
<label
|
|
3044
3044
|
class="pf-v6-c-check pf-m-standalone"
|
|
3045
|
-
for="data-list-expandable-example-data-list-item-1
|
|
3045
|
+
for="data-list-expandable-example-data-list-item-1-input"
|
|
3046
3046
|
>
|
|
3047
3047
|
<input
|
|
3048
3048
|
class="pf-v6-c-check__input"
|
|
3049
3049
|
type="checkbox"
|
|
3050
|
-
id="data-list-expandable-example-data-list-item-1
|
|
3051
|
-
name="data-list-expandable-example-data-list-item-1
|
|
3050
|
+
id="data-list-expandable-example-data-list-item-1-input"
|
|
3051
|
+
name="data-list-expandable-example-data-list-item-1-input"
|
|
3052
3052
|
aria-label="Standalone check"
|
|
3053
3053
|
/>
|
|
3054
3054
|
</label>
|
|
@@ -3618,13 +3618,13 @@ wrapperTag: div
|
|
|
3618
3618
|
<div class="pf-v6-c-data-list__check">
|
|
3619
3619
|
<label
|
|
3620
3620
|
class="pf-v6-c-check pf-m-standalone"
|
|
3621
|
-
for="data-list-expandable-example-data-list-item-2
|
|
3621
|
+
for="data-list-expandable-example-data-list-item-2-input"
|
|
3622
3622
|
>
|
|
3623
3623
|
<input
|
|
3624
3624
|
class="pf-v6-c-check__input"
|
|
3625
3625
|
type="checkbox"
|
|
3626
|
-
id="data-list-expandable-example-data-list-item-2
|
|
3627
|
-
name="data-list-expandable-example-data-list-item-2
|
|
3626
|
+
id="data-list-expandable-example-data-list-item-2-input"
|
|
3627
|
+
name="data-list-expandable-example-data-list-item-2-input"
|
|
3628
3628
|
aria-label="Standalone check"
|
|
3629
3629
|
/>
|
|
3630
3630
|
</label>
|
|
@@ -3800,13 +3800,13 @@ wrapperTag: div
|
|
|
3800
3800
|
<div class="pf-v6-c-data-list__check">
|
|
3801
3801
|
<label
|
|
3802
3802
|
class="pf-v6-c-check pf-m-standalone"
|
|
3803
|
-
for="data-list-expandable-example-data-list-item-3
|
|
3803
|
+
for="data-list-expandable-example-data-list-item-3-input"
|
|
3804
3804
|
>
|
|
3805
3805
|
<input
|
|
3806
3806
|
class="pf-v6-c-check__input"
|
|
3807
3807
|
type="checkbox"
|
|
3808
|
-
id="data-list-expandable-example-data-list-item-3
|
|
3809
|
-
name="data-list-expandable-example-data-list-item-3
|
|
3808
|
+
id="data-list-expandable-example-data-list-item-3-input"
|
|
3809
|
+
name="data-list-expandable-example-data-list-item-3-input"
|
|
3810
3810
|
aria-label="Standalone check"
|
|
3811
3811
|
/>
|
|
3812
3812
|
</label>
|
|
@@ -3868,13 +3868,13 @@ wrapperTag: div
|
|
|
3868
3868
|
<div class="pf-v6-c-data-list__check">
|
|
3869
3869
|
<label
|
|
3870
3870
|
class="pf-v6-c-check pf-m-standalone"
|
|
3871
|
-
for="data-list-expandable-example-data-list-item-4
|
|
3871
|
+
for="data-list-expandable-example-data-list-item-4-input"
|
|
3872
3872
|
>
|
|
3873
3873
|
<input
|
|
3874
3874
|
class="pf-v6-c-check__input"
|
|
3875
3875
|
type="checkbox"
|
|
3876
|
-
id="data-list-expandable-example-data-list-item-4
|
|
3877
|
-
name="data-list-expandable-example-data-list-item-4
|
|
3876
|
+
id="data-list-expandable-example-data-list-item-4-input"
|
|
3877
|
+
name="data-list-expandable-example-data-list-item-4-input"
|
|
3878
3878
|
aria-label="Standalone check"
|
|
3879
3879
|
/>
|
|
3880
3880
|
</label>
|
|
@@ -4005,13 +4005,13 @@ wrapperTag: div
|
|
|
4005
4005
|
<div class="pf-v6-c-data-list__check">
|
|
4006
4006
|
<label
|
|
4007
4007
|
class="pf-v6-c-check pf-m-standalone"
|
|
4008
|
-
for="data-list-expandable-example-data-list-item-5
|
|
4008
|
+
for="data-list-expandable-example-data-list-item-5-input"
|
|
4009
4009
|
>
|
|
4010
4010
|
<input
|
|
4011
4011
|
class="pf-v6-c-check__input"
|
|
4012
4012
|
type="checkbox"
|
|
4013
|
-
id="data-list-expandable-example-data-list-item-5
|
|
4014
|
-
name="data-list-expandable-example-data-list-item-5
|
|
4013
|
+
id="data-list-expandable-example-data-list-item-5-input"
|
|
4014
|
+
name="data-list-expandable-example-data-list-item-5-input"
|
|
4015
4015
|
aria-label="Standalone check"
|
|
4016
4016
|
/>
|
|
4017
4017
|
</label>
|