@patternfly/patternfly 6.6.0-prerelease.33 → 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/Table/table-grid.css +6 -6
- package/components/Table/table-grid.scss +2 -2
- package/components/_index.css +17 -15
- package/docs/components/DataList/examples/DataList.md +129 -126
- package/docs/components/Table/examples/Table.md +416 -416
- package/docs/demos/Card/examples/Card.md +16 -16
- package/docs/demos/DataList/examples/DataList.md +58 -58
- package/docs/demos/DescriptionList/examples/DescriptionList.md +8 -8
- package/docs/demos/Table/examples/Table.md +204 -188
- package/package.json +1 -1
- package/patternfly-no-globals.css +17 -15
- package/patternfly.css +17 -15
- 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
|