@patternfly/patternfly 5.0.0-alpha.1 → 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.
- package/RELEASE-NOTES.md +30 -0
- package/base/_common.scss +0 -22
- package/base/patternfly-common.css +0 -10
- package/components/Card/card.css +9 -12
- package/components/Card/card.scss +11 -17
- package/components/ChipGroup/chip-group.css +27 -17
- package/components/ChipGroup/chip-group.scss +36 -22
- package/components/Drawer/drawer.css +0 -1
- package/components/Drawer/drawer.scss +0 -1
- package/components/Dropdown/dropdown.css +15 -0
- package/components/Dropdown/dropdown.scss +20 -0
- package/components/EmptyState/empty-state.css +46 -52
- package/components/EmptyState/empty-state.scss +58 -57
- package/components/FormControl/form-control.css +1 -1
- package/components/FormControl/themes/dark/form-control.scss +1 -1
- package/components/InputGroup/input-group.css +14 -0
- package/components/InputGroup/input-group.scss +9 -0
- package/components/InputGroup/themes/dark/input-group.scss +8 -0
- package/components/LabelGroup/label-group.css +26 -22
- package/components/LabelGroup/label-group.scss +31 -26
- package/components/Menu/menu.css +4 -0
- package/components/Menu/menu.scss +5 -0
- package/components/Pagination/pagination.css +228 -0
- package/components/Pagination/pagination.scss +30 -1
- package/components/Popover/popover.css +2 -7
- package/components/Popover/themes/dark/popover.scss +2 -8
- package/components/Slider/slider.css +0 -7
- package/components/Slider/slider.scss +0 -9
- package/components/Toolbar/toolbar.css +30 -2
- package/components/Toolbar/toolbar.scss +37 -3
- package/components/Tooltip/themes/dark/tooltip.scss +1 -11
- package/components/Tooltip/tooltip.css +7 -12
- package/components/Tooltip/tooltip.scss +6 -3
- package/docs/components/Card/examples/Card.md +61 -44
- package/docs/components/Check/examples/Check.md +2 -6
- package/docs/components/ChipGroup/examples/ChipGroup.md +10 -339
- package/docs/components/CodeBlock/examples/CodeBlock.md +6 -6
- package/docs/components/CodeEditor/examples/CodeEditor.md +2 -6
- package/docs/components/DataList/examples/DataList.md +104 -65
- package/docs/components/Dropdown/examples/Dropdown.md +263 -23
- package/docs/components/EmptyState/examples/EmptyState.md +127 -79
- package/docs/components/InputGroup/examples/InputGroup.md +1 -0
- package/docs/components/LabelGroup/examples/LabelGroup.md +2 -14
- package/docs/components/Menu/examples/Menu.md +1 -1
- package/docs/components/MenuToggle/examples/MenuToggle.md +4 -4
- package/docs/components/Pagination/examples/Pagination.md +129 -30
- package/docs/components/Slider/examples/Slider.md +6 -6
- package/docs/components/Table/examples/Table.md +1117 -700
- package/docs/components/Tabs/examples/Tabs.md +1 -1
- package/docs/components/Toolbar/examples/Toolbar.md +67 -46
- package/docs/components/Wizard/examples/Wizard.md +4 -7
- package/docs/demos/Banner/examples/Banner.md +2 -2
- package/docs/demos/Card/examples/Card.md +144 -109
- package/docs/demos/CardView/examples/CardView.md +9 -8
- package/docs/demos/Dashboard/examples/Dashboard.md +1 -4
- package/docs/demos/DataList/examples/DataList.md +138 -89
- package/docs/demos/Masthead/examples/Masthead.md +3 -6
- package/docs/demos/Nav/examples/Nav.md +671 -718
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +17 -13
- package/docs/demos/Table/examples/Table.md +439 -297
- package/docs/demos/Tabs/examples/Tabs.md +90 -569
- package/docs/demos/Toolbar/examples/Toolbar.md +1773 -163
- package/docs/demos/Wizard/examples/Wizard.md +0 -4
- package/package.json +5 -5
- package/patternfly-base-no-reset.css +0 -10
- package/patternfly-base.css +0 -10
- package/patternfly-no-reset.css +409 -143
- package/patternfly.css +409 -143
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/scss-variables.scss +0 -1
|
@@ -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
|
-
<
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
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
|
-
<
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
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
|
-
<
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
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
|
-
<
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
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
|
-
<
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
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
|
-
<
|
|
1567
|
-
|
|
1568
|
-
|
|
1569
|
-
|
|
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
|
-
<
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
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
|
-
<
|
|
1720
|
-
|
|
1721
|
-
|
|
1722
|
-
|
|
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
|
-
<
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
|
|
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
|
-
<
|
|
2207
|
-
|
|
2208
|
-
|
|
2209
|
-
|
|
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
|
-
<
|
|
2242
|
-
|
|
2243
|
-
|
|
2244
|
-
|
|
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
|
-
<
|
|
2281
|
-
|
|
2282
|
-
|
|
2283
|
-
|
|
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
|
-
<
|
|
2316
|
-
|
|
2317
|
-
|
|
2318
|
-
|
|
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
|
-
<
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
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
|
-
<
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
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
|
-
<
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
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
|
-
<
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
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"
|
|
@@ -982,6 +994,232 @@ cssPrefix: pf-c-dropdown
|
|
|
982
994
|
|
|
983
995
|
```
|
|
984
996
|
|
|
997
|
+
### Split button (progress checkbox)
|
|
998
|
+
|
|
999
|
+
```html isBeta
|
|
1000
|
+
<div class="pf-c-dropdown">
|
|
1001
|
+
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
1002
|
+
<label
|
|
1003
|
+
class="pf-c-dropdown__toggle-check"
|
|
1004
|
+
for="dropdown-split-button-progress-toggle-check"
|
|
1005
|
+
>
|
|
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>
|
|
1014
|
+
<span class="pf-c-dropdown__toggle-progress">
|
|
1015
|
+
<svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
|
|
1016
|
+
<circle
|
|
1017
|
+
class="pf-c-spinner__path"
|
|
1018
|
+
cx="50"
|
|
1019
|
+
cy="50"
|
|
1020
|
+
r="45"
|
|
1021
|
+
fill="none"
|
|
1022
|
+
/>
|
|
1023
|
+
</svg>
|
|
1024
|
+
</span>
|
|
1025
|
+
</label>
|
|
1026
|
+
|
|
1027
|
+
<button
|
|
1028
|
+
class="pf-c-dropdown__toggle-button"
|
|
1029
|
+
type="button"
|
|
1030
|
+
aria-expanded="false"
|
|
1031
|
+
id="dropdown-split-button-progress-toggle-button"
|
|
1032
|
+
aria-label="Dropdown toggle"
|
|
1033
|
+
>
|
|
1034
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1035
|
+
</button>
|
|
1036
|
+
</div>
|
|
1037
|
+
<ul class="pf-c-dropdown__menu" hidden>
|
|
1038
|
+
<li>
|
|
1039
|
+
<button class="pf-c-dropdown__menu-item" type="button">Actions</button>
|
|
1040
|
+
</li>
|
|
1041
|
+
<li>
|
|
1042
|
+
<button
|
|
1043
|
+
class="pf-c-dropdown__menu-item"
|
|
1044
|
+
type="button"
|
|
1045
|
+
disabled
|
|
1046
|
+
>Disabled action</button>
|
|
1047
|
+
</li>
|
|
1048
|
+
<li>
|
|
1049
|
+
<button class="pf-c-dropdown__menu-item" type="button">Other action</button>
|
|
1050
|
+
</li>
|
|
1051
|
+
</ul>
|
|
1052
|
+
</div>
|
|
1053
|
+
<div class="pf-c-dropdown">
|
|
1054
|
+
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
1055
|
+
<label
|
|
1056
|
+
class="pf-c-dropdown__toggle-check pf-m-in-progress"
|
|
1057
|
+
for="dropdown-split-button-in-progress-toggle-check"
|
|
1058
|
+
>
|
|
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>
|
|
1068
|
+
<span class="pf-c-dropdown__toggle-progress">
|
|
1069
|
+
<svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
|
|
1070
|
+
<circle
|
|
1071
|
+
class="pf-c-spinner__path"
|
|
1072
|
+
cx="50"
|
|
1073
|
+
cy="50"
|
|
1074
|
+
r="45"
|
|
1075
|
+
fill="none"
|
|
1076
|
+
/>
|
|
1077
|
+
</svg>
|
|
1078
|
+
</span>
|
|
1079
|
+
</label>
|
|
1080
|
+
|
|
1081
|
+
<button
|
|
1082
|
+
class="pf-c-dropdown__toggle-button"
|
|
1083
|
+
type="button"
|
|
1084
|
+
aria-expanded="false"
|
|
1085
|
+
id="dropdown-split-button-in-progress-toggle-button"
|
|
1086
|
+
aria-label="Dropdown toggle"
|
|
1087
|
+
>
|
|
1088
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1089
|
+
</button>
|
|
1090
|
+
</div>
|
|
1091
|
+
<ul class="pf-c-dropdown__menu" hidden>
|
|
1092
|
+
<li>
|
|
1093
|
+
<button class="pf-c-dropdown__menu-item" type="button">Actions</button>
|
|
1094
|
+
</li>
|
|
1095
|
+
<li>
|
|
1096
|
+
<button
|
|
1097
|
+
class="pf-c-dropdown__menu-item"
|
|
1098
|
+
type="button"
|
|
1099
|
+
disabled
|
|
1100
|
+
>Disabled action</button>
|
|
1101
|
+
</li>
|
|
1102
|
+
<li>
|
|
1103
|
+
<button class="pf-c-dropdown__menu-item" type="button">Other action</button>
|
|
1104
|
+
</li>
|
|
1105
|
+
</ul>
|
|
1106
|
+
</div>
|
|
1107
|
+
<div class="pf-c-dropdown">
|
|
1108
|
+
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
1109
|
+
<label
|
|
1110
|
+
class="pf-c-dropdown__toggle-check"
|
|
1111
|
+
for="dropdown-split-button-progress-text-toggle-check"
|
|
1112
|
+
>
|
|
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>
|
|
1123
|
+
<span class="pf-c-dropdown__toggle-progress">
|
|
1124
|
+
<svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
|
|
1125
|
+
<circle
|
|
1126
|
+
class="pf-c-spinner__path"
|
|
1127
|
+
cx="50"
|
|
1128
|
+
cy="50"
|
|
1129
|
+
r="45"
|
|
1130
|
+
fill="none"
|
|
1131
|
+
/>
|
|
1132
|
+
</svg>
|
|
1133
|
+
</span>
|
|
1134
|
+
<span
|
|
1135
|
+
class="pf-c-dropdown__toggle-text"
|
|
1136
|
+
aria-hidden="true"
|
|
1137
|
+
id="dropdown-split-button-progress-text-toggle-check-text"
|
|
1138
|
+
>10 selected</span>
|
|
1139
|
+
</label>
|
|
1140
|
+
|
|
1141
|
+
<button
|
|
1142
|
+
class="pf-c-dropdown__toggle-button"
|
|
1143
|
+
type="button"
|
|
1144
|
+
aria-expanded="false"
|
|
1145
|
+
id="dropdown-split-button-progress-text-toggle-button"
|
|
1146
|
+
aria-label="Dropdown toggle"
|
|
1147
|
+
>
|
|
1148
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1149
|
+
</button>
|
|
1150
|
+
</div>
|
|
1151
|
+
<ul class="pf-c-dropdown__menu" hidden>
|
|
1152
|
+
<li>
|
|
1153
|
+
<button class="pf-c-dropdown__menu-item" type="button">Select all</button>
|
|
1154
|
+
</li>
|
|
1155
|
+
<li>
|
|
1156
|
+
<button class="pf-c-dropdown__menu-item" type="button">Select none</button>
|
|
1157
|
+
</li>
|
|
1158
|
+
<li>
|
|
1159
|
+
<button class="pf-c-dropdown__menu-item" type="button">Other action</button>
|
|
1160
|
+
</li>
|
|
1161
|
+
</ul>
|
|
1162
|
+
</div>
|
|
1163
|
+
<div class="pf-c-dropdown">
|
|
1164
|
+
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
1165
|
+
<label
|
|
1166
|
+
class="pf-c-dropdown__toggle-check pf-m-in-progress"
|
|
1167
|
+
for="dropdown-split-button-in-progress-text-toggle-check"
|
|
1168
|
+
>
|
|
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>
|
|
1180
|
+
<span class="pf-c-dropdown__toggle-progress">
|
|
1181
|
+
<svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
|
|
1182
|
+
<circle
|
|
1183
|
+
class="pf-c-spinner__path"
|
|
1184
|
+
cx="50"
|
|
1185
|
+
cy="50"
|
|
1186
|
+
r="45"
|
|
1187
|
+
fill="none"
|
|
1188
|
+
/>
|
|
1189
|
+
</svg>
|
|
1190
|
+
</span>
|
|
1191
|
+
<span
|
|
1192
|
+
class="pf-c-dropdown__toggle-text"
|
|
1193
|
+
aria-hidden="true"
|
|
1194
|
+
id="dropdown-split-button-in-progress-text-toggle-check-text"
|
|
1195
|
+
>10 selected</span>
|
|
1196
|
+
</label>
|
|
1197
|
+
|
|
1198
|
+
<button
|
|
1199
|
+
class="pf-c-dropdown__toggle-button"
|
|
1200
|
+
type="button"
|
|
1201
|
+
aria-expanded="false"
|
|
1202
|
+
id="dropdown-split-button-in-progress-text-toggle-button"
|
|
1203
|
+
aria-label="Dropdown toggle"
|
|
1204
|
+
>
|
|
1205
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1206
|
+
</button>
|
|
1207
|
+
</div>
|
|
1208
|
+
<ul class="pf-c-dropdown__menu" hidden>
|
|
1209
|
+
<li>
|
|
1210
|
+
<button class="pf-c-dropdown__menu-item" type="button">Select all</button>
|
|
1211
|
+
</li>
|
|
1212
|
+
<li>
|
|
1213
|
+
<button class="pf-c-dropdown__menu-item" type="button">Select none</button>
|
|
1214
|
+
</li>
|
|
1215
|
+
<li>
|
|
1216
|
+
<button class="pf-c-dropdown__menu-item" type="button">Other action</button>
|
|
1217
|
+
</li>
|
|
1218
|
+
</ul>
|
|
1219
|
+
</div>
|
|
1220
|
+
|
|
1221
|
+
```
|
|
1222
|
+
|
|
985
1223
|
### Split button (action)
|
|
986
1224
|
|
|
987
1225
|
```html
|
|
@@ -2080,6 +2318,7 @@ The dropdown menu can contain either links or buttons, depending on the expected
|
|
|
2080
2318
|
| `.pf-c-dropdown__toggle-text` | `<span>` | Defines the dropdown toggle text. **Required when text is present, adds truncation**. |
|
|
2081
2319
|
| `.pf-c-dropdown__toggle-check` | `<label>` | Defines a checkbox in the toggle area of a split button dropdown. |
|
|
2082
2320
|
| `.pf-c-dropdown__toggle-button` | `<button>` | Defines the toggle button for a split button dropdown. |
|
|
2321
|
+
| `.pf-c-dropdown__toggle-progress` | `<span>` | Defines the progress element to indicate a dropdown action is in progress. |
|
|
2083
2322
|
| `.pf-c-dropdown__menu` | `<ul>`, `<div>` | Defines the parent wrapper of the menu items. |
|
|
2084
2323
|
| `.pf-c-dropdown__menu-item` | `<a>` | Defines a menu item that navigates to another page. |
|
|
2085
2324
|
| `.pf-c-dropdown__menu-item-icon` | `<span>` | Defines the wrapper for the menu item icon. |
|
|
@@ -2107,3 +2346,4 @@ The dropdown menu can contain either links or buttons, depending on the expected
|
|
|
2107
2346
|
| `.pf-m-icon` | `.pf-c-dropdown__menu-item` | Modifies an item to support adding an icon. |
|
|
2108
2347
|
| `.pf-m-active` | `.pf-c-dropdown__toggle` | Modifies the dropdown menu toggle for the active state. |
|
|
2109
2348
|
| `.pf-m-description` | `.pf-c-dropdown__menu-item` | Modifies an item to support adding a description. |
|
|
2349
|
+
| `.pf-m-in-progress` | `.pf-c-dropdown__toggle-check` | Modifies a toggle check element to indicate the check action is in progress. |
|