@patternfly/patternfly 4.179.3 → 4.181.0
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/assets/images/status-icon-sprite.svg +38 -0
- package/components/Dropdown/dropdown.css +4 -2
- package/components/Dropdown/dropdown.scss +4 -2
- package/components/FormControl/form-control.css +26 -0
- package/components/FormControl/form-control.scss +33 -1
- package/components/Menu/menu.css +10 -0
- package/components/Menu/menu.scss +14 -0
- package/components/MenuToggle/menu-toggle.css +10 -7
- package/components/MenuToggle/menu-toggle.scss +11 -9
- package/components/SearchInput/search-input.css +1 -0
- package/components/SearchInput/search-input.scss +1 -0
- package/docs/components/AppLauncher/examples/application-launcher.md +15 -8
- package/docs/components/ContextSelector/examples/context-selector.md +84 -102
- package/docs/components/DualListSelector/examples/DualListSelector.md +240 -112
- package/docs/components/FormControl/examples/FormControl.md +151 -11
- package/docs/components/InputGroup/examples/InputGroup.md +6 -22
- package/docs/components/Menu/examples/Menu.md +127 -30
- package/docs/components/MenuToggle/examples/MenuToggle.md +77 -44
- package/docs/components/Page/examples/Page.md +11 -2
- package/docs/components/Select/examples/Select.md +30 -14
- package/docs/components/Table/examples/Table.md +8 -0
- package/docs/components/Toolbar/examples/Toolbar.md +300 -180
- package/docs/components/TreeView/examples/TreeView.md +15 -7
- package/docs/components/Wizard/examples/Wizard.md +6 -6
- package/docs/demos/Alert/examples/Alert.md +20 -40
- package/docs/demos/BackToTop/examples/BackToTop.md +149 -249
- package/docs/demos/ContextSelector/examples/ContextSelector.md +247 -276
- package/docs/demos/DataList/examples/DataList.md +159 -114
- package/docs/demos/DescriptionList/examples/DescriptionList.md +3358 -0
- package/docs/demos/Drawer/examples/Drawer.md +60 -120
- package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -31
- package/docs/demos/Masthead/examples/Masthead.md +426 -449
- package/docs/demos/Nav/examples/Nav.md +203 -343
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +100 -200
- package/docs/demos/Page/examples/Page.md +834 -1235
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +207 -126
- package/docs/demos/Table/examples/Table.md +1189 -652
- package/docs/demos/Tabs/examples/Tabs.md +11 -19
- package/docs/demos/Toolbar/examples/Toolbar.md +55 -55
- package/docs/demos/Wizard/examples/Wizard.md +6 -2
- package/package.json +1 -1
- package/patternfly-no-reset.css +51 -9
- package/patternfly.css +51 -9
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -17,13 +17,21 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
17
17
|
</div>
|
|
18
18
|
<div class="pf-c-dual-list-selector__tools">
|
|
19
19
|
<div class="pf-c-dual-list-selector__tools-filter">
|
|
20
|
-
<input
|
|
21
|
-
class="pf-c-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
20
|
+
<div class="pf-c-search-input">
|
|
21
|
+
<div class="pf-c-search-input__bar">
|
|
22
|
+
<span class="pf-c-search-input__text">
|
|
23
|
+
<span class="pf-c-search-input__icon">
|
|
24
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
25
|
+
</span>
|
|
26
|
+
<input
|
|
27
|
+
class="pf-c-search-input__text-input"
|
|
28
|
+
type="text"
|
|
29
|
+
placeholder="Filter options"
|
|
30
|
+
aria-label="Filter options"
|
|
31
|
+
/>
|
|
32
|
+
</span>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
27
35
|
</div>
|
|
28
36
|
<div class="pf-c-dual-list-selector__tools-actions">
|
|
29
37
|
<button class="pf-c-button pf-m-plain" type="button" aria-label="Sort">
|
|
@@ -200,13 +208,21 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
200
208
|
</div>
|
|
201
209
|
<div class="pf-c-dual-list-selector__tools">
|
|
202
210
|
<div class="pf-c-dual-list-selector__tools-filter">
|
|
203
|
-
<input
|
|
204
|
-
class="pf-c-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
211
|
+
<div class="pf-c-search-input">
|
|
212
|
+
<div class="pf-c-search-input__bar">
|
|
213
|
+
<span class="pf-c-search-input__text">
|
|
214
|
+
<span class="pf-c-search-input__icon">
|
|
215
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
216
|
+
</span>
|
|
217
|
+
<input
|
|
218
|
+
class="pf-c-search-input__text-input"
|
|
219
|
+
type="text"
|
|
220
|
+
placeholder="Filter options"
|
|
221
|
+
aria-label="Filter options"
|
|
222
|
+
/>
|
|
223
|
+
</span>
|
|
224
|
+
</div>
|
|
225
|
+
</div>
|
|
210
226
|
</div>
|
|
211
227
|
<div class="pf-c-dual-list-selector__tools-actions">
|
|
212
228
|
<button class="pf-c-button pf-m-plain" type="button" aria-label="Sort">
|
|
@@ -288,13 +304,21 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
288
304
|
</div>
|
|
289
305
|
<div class="pf-c-dual-list-selector__tools">
|
|
290
306
|
<div class="pf-c-dual-list-selector__tools-filter">
|
|
291
|
-
<input
|
|
292
|
-
class="pf-c-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
307
|
+
<div class="pf-c-search-input">
|
|
308
|
+
<div class="pf-c-search-input__bar">
|
|
309
|
+
<span class="pf-c-search-input__text">
|
|
310
|
+
<span class="pf-c-search-input__icon">
|
|
311
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
312
|
+
</span>
|
|
313
|
+
<input
|
|
314
|
+
class="pf-c-search-input__text-input"
|
|
315
|
+
type="text"
|
|
316
|
+
placeholder="Filter options"
|
|
317
|
+
aria-label="Filter options"
|
|
318
|
+
/>
|
|
319
|
+
</span>
|
|
320
|
+
</div>
|
|
321
|
+
</div>
|
|
298
322
|
</div>
|
|
299
323
|
<div class="pf-c-dual-list-selector__tools-actions">
|
|
300
324
|
<button class="pf-c-button pf-m-plain" type="button" aria-label="Sort">
|
|
@@ -465,13 +489,21 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
465
489
|
</div>
|
|
466
490
|
<div class="pf-c-dual-list-selector__tools">
|
|
467
491
|
<div class="pf-c-dual-list-selector__tools-filter">
|
|
468
|
-
<input
|
|
469
|
-
class="pf-c-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
492
|
+
<div class="pf-c-search-input">
|
|
493
|
+
<div class="pf-c-search-input__bar">
|
|
494
|
+
<span class="pf-c-search-input__text">
|
|
495
|
+
<span class="pf-c-search-input__icon">
|
|
496
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
497
|
+
</span>
|
|
498
|
+
<input
|
|
499
|
+
class="pf-c-search-input__text-input"
|
|
500
|
+
type="text"
|
|
501
|
+
placeholder="Filter options"
|
|
502
|
+
aria-label="Filter options"
|
|
503
|
+
/>
|
|
504
|
+
</span>
|
|
505
|
+
</div>
|
|
506
|
+
</div>
|
|
475
507
|
</div>
|
|
476
508
|
<div class="pf-c-dual-list-selector__tools-actions">
|
|
477
509
|
<button class="pf-c-button pf-m-plain" type="button" aria-label="Sort">
|
|
@@ -553,13 +585,21 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
553
585
|
</div>
|
|
554
586
|
<div class="pf-c-dual-list-selector__tools">
|
|
555
587
|
<div class="pf-c-dual-list-selector__tools-filter">
|
|
556
|
-
<input
|
|
557
|
-
class="pf-c-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
588
|
+
<div class="pf-c-search-input">
|
|
589
|
+
<div class="pf-c-search-input__bar">
|
|
590
|
+
<span class="pf-c-search-input__text">
|
|
591
|
+
<span class="pf-c-search-input__icon">
|
|
592
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
593
|
+
</span>
|
|
594
|
+
<input
|
|
595
|
+
class="pf-c-search-input__text-input"
|
|
596
|
+
type="text"
|
|
597
|
+
placeholder="Filter options"
|
|
598
|
+
aria-label="Filter options"
|
|
599
|
+
/>
|
|
600
|
+
</span>
|
|
601
|
+
</div>
|
|
602
|
+
</div>
|
|
563
603
|
</div>
|
|
564
604
|
<div class="pf-c-dual-list-selector__tools-actions">
|
|
565
605
|
<button class="pf-c-button pf-m-plain" type="button" aria-label="Sort">
|
|
@@ -730,13 +770,21 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
730
770
|
</div>
|
|
731
771
|
<div class="pf-c-dual-list-selector__tools">
|
|
732
772
|
<div class="pf-c-dual-list-selector__tools-filter">
|
|
733
|
-
<input
|
|
734
|
-
class="pf-c-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
773
|
+
<div class="pf-c-search-input">
|
|
774
|
+
<div class="pf-c-search-input__bar">
|
|
775
|
+
<span class="pf-c-search-input__text">
|
|
776
|
+
<span class="pf-c-search-input__icon">
|
|
777
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
778
|
+
</span>
|
|
779
|
+
<input
|
|
780
|
+
class="pf-c-search-input__text-input"
|
|
781
|
+
type="text"
|
|
782
|
+
placeholder="Filter options"
|
|
783
|
+
aria-label="Filter options"
|
|
784
|
+
/>
|
|
785
|
+
</span>
|
|
786
|
+
</div>
|
|
787
|
+
</div>
|
|
740
788
|
</div>
|
|
741
789
|
<div class="pf-c-dual-list-selector__tools-actions">
|
|
742
790
|
<button class="pf-c-button pf-m-plain" type="button" aria-label="Sort">
|
|
@@ -818,13 +866,21 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
818
866
|
</div>
|
|
819
867
|
<div class="pf-c-dual-list-selector__tools">
|
|
820
868
|
<div class="pf-c-dual-list-selector__tools-filter">
|
|
821
|
-
<input
|
|
822
|
-
class="pf-c-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
869
|
+
<div class="pf-c-search-input">
|
|
870
|
+
<div class="pf-c-search-input__bar">
|
|
871
|
+
<span class="pf-c-search-input__text">
|
|
872
|
+
<span class="pf-c-search-input__icon">
|
|
873
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
874
|
+
</span>
|
|
875
|
+
<input
|
|
876
|
+
class="pf-c-search-input__text-input"
|
|
877
|
+
type="text"
|
|
878
|
+
placeholder="Filter options"
|
|
879
|
+
aria-label="Filter options"
|
|
880
|
+
/>
|
|
881
|
+
</span>
|
|
882
|
+
</div>
|
|
883
|
+
</div>
|
|
828
884
|
</div>
|
|
829
885
|
<div class="pf-c-dual-list-selector__tools-actions">
|
|
830
886
|
<button class="pf-c-button pf-m-plain" type="button" aria-label="Sort">
|
|
@@ -995,13 +1051,21 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
995
1051
|
</div>
|
|
996
1052
|
<div class="pf-c-dual-list-selector__tools">
|
|
997
1053
|
<div class="pf-c-dual-list-selector__tools-filter">
|
|
998
|
-
<input
|
|
999
|
-
class="pf-c-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1054
|
+
<div class="pf-c-search-input">
|
|
1055
|
+
<div class="pf-c-search-input__bar">
|
|
1056
|
+
<span class="pf-c-search-input__text">
|
|
1057
|
+
<span class="pf-c-search-input__icon">
|
|
1058
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
1059
|
+
</span>
|
|
1060
|
+
<input
|
|
1061
|
+
class="pf-c-search-input__text-input"
|
|
1062
|
+
type="text"
|
|
1063
|
+
placeholder="Filter options"
|
|
1064
|
+
aria-label="Filter options"
|
|
1065
|
+
/>
|
|
1066
|
+
</span>
|
|
1067
|
+
</div>
|
|
1068
|
+
</div>
|
|
1005
1069
|
</div>
|
|
1006
1070
|
<div class="pf-c-dual-list-selector__tools-actions">
|
|
1007
1071
|
<button class="pf-c-button pf-m-plain" type="button" aria-label="Sort">
|
|
@@ -1096,13 +1160,21 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1096
1160
|
</div>
|
|
1097
1161
|
<div class="pf-c-dual-list-selector__tools">
|
|
1098
1162
|
<div class="pf-c-dual-list-selector__tools-filter">
|
|
1099
|
-
<input
|
|
1100
|
-
class="pf-c-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1163
|
+
<div class="pf-c-search-input">
|
|
1164
|
+
<div class="pf-c-search-input__bar">
|
|
1165
|
+
<span class="pf-c-search-input__text">
|
|
1166
|
+
<span class="pf-c-search-input__icon">
|
|
1167
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
1168
|
+
</span>
|
|
1169
|
+
<input
|
|
1170
|
+
class="pf-c-search-input__text-input"
|
|
1171
|
+
type="text"
|
|
1172
|
+
placeholder="Filter options"
|
|
1173
|
+
aria-label="Filter options"
|
|
1174
|
+
/>
|
|
1175
|
+
</span>
|
|
1176
|
+
</div>
|
|
1177
|
+
</div>
|
|
1106
1178
|
</div>
|
|
1107
1179
|
<div class="pf-c-dual-list-selector__tools-actions">
|
|
1108
1180
|
<button class="pf-c-button pf-m-plain" type="button" aria-label="Sort">
|
|
@@ -1272,13 +1344,21 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1272
1344
|
</div>
|
|
1273
1345
|
<div class="pf-c-dual-list-selector__tools">
|
|
1274
1346
|
<div class="pf-c-dual-list-selector__tools-filter">
|
|
1275
|
-
<input
|
|
1276
|
-
class="pf-c-
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
|
|
1347
|
+
<div class="pf-c-search-input">
|
|
1348
|
+
<div class="pf-c-search-input__bar">
|
|
1349
|
+
<span class="pf-c-search-input__text">
|
|
1350
|
+
<span class="pf-c-search-input__icon">
|
|
1351
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
1352
|
+
</span>
|
|
1353
|
+
<input
|
|
1354
|
+
class="pf-c-search-input__text-input"
|
|
1355
|
+
type="text"
|
|
1356
|
+
placeholder="Filter options"
|
|
1357
|
+
aria-label="Filter options"
|
|
1358
|
+
/>
|
|
1359
|
+
</span>
|
|
1360
|
+
</div>
|
|
1361
|
+
</div>
|
|
1282
1362
|
</div>
|
|
1283
1363
|
<div class="pf-c-dual-list-selector__tools-actions">
|
|
1284
1364
|
<button class="pf-c-button pf-m-plain" type="button" aria-label="Sort">
|
|
@@ -1373,13 +1453,21 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1373
1453
|
</div>
|
|
1374
1454
|
<div class="pf-c-dual-list-selector__tools">
|
|
1375
1455
|
<div class="pf-c-dual-list-selector__tools-filter">
|
|
1376
|
-
<input
|
|
1377
|
-
class="pf-c-
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1456
|
+
<div class="pf-c-search-input">
|
|
1457
|
+
<div class="pf-c-search-input__bar">
|
|
1458
|
+
<span class="pf-c-search-input__text">
|
|
1459
|
+
<span class="pf-c-search-input__icon">
|
|
1460
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
1461
|
+
</span>
|
|
1462
|
+
<input
|
|
1463
|
+
class="pf-c-search-input__text-input"
|
|
1464
|
+
type="text"
|
|
1465
|
+
placeholder="Filter options"
|
|
1466
|
+
aria-label="Filter options"
|
|
1467
|
+
/>
|
|
1468
|
+
</span>
|
|
1469
|
+
</div>
|
|
1470
|
+
</div>
|
|
1383
1471
|
</div>
|
|
1384
1472
|
<div class="pf-c-dual-list-selector__tools-actions">
|
|
1385
1473
|
<button class="pf-c-button pf-m-plain" type="button" aria-label="Sort">
|
|
@@ -1801,13 +1889,21 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1801
1889
|
</div>
|
|
1802
1890
|
<div class="pf-c-dual-list-selector__tools">
|
|
1803
1891
|
<div class="pf-c-dual-list-selector__tools-filter">
|
|
1804
|
-
<input
|
|
1805
|
-
class="pf-c-
|
|
1806
|
-
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
|
|
1810
|
-
|
|
1892
|
+
<div class="pf-c-search-input">
|
|
1893
|
+
<div class="pf-c-search-input__bar">
|
|
1894
|
+
<span class="pf-c-search-input__text">
|
|
1895
|
+
<span class="pf-c-search-input__icon">
|
|
1896
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
1897
|
+
</span>
|
|
1898
|
+
<input
|
|
1899
|
+
class="pf-c-search-input__text-input"
|
|
1900
|
+
type="text"
|
|
1901
|
+
placeholder="Filter options"
|
|
1902
|
+
aria-label="Filter options"
|
|
1903
|
+
/>
|
|
1904
|
+
</span>
|
|
1905
|
+
</div>
|
|
1906
|
+
</div>
|
|
1811
1907
|
</div>
|
|
1812
1908
|
<div class="pf-c-dual-list-selector__tools-actions">
|
|
1813
1909
|
<button class="pf-c-button pf-m-plain" type="button" aria-label="Sort">
|
|
@@ -1889,13 +1985,21 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1889
1985
|
</div>
|
|
1890
1986
|
<div class="pf-c-dual-list-selector__tools">
|
|
1891
1987
|
<div class="pf-c-dual-list-selector__tools-filter">
|
|
1892
|
-
<input
|
|
1893
|
-
class="pf-c-
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
|
|
1897
|
-
|
|
1898
|
-
|
|
1988
|
+
<div class="pf-c-search-input">
|
|
1989
|
+
<div class="pf-c-search-input__bar">
|
|
1990
|
+
<span class="pf-c-search-input__text">
|
|
1991
|
+
<span class="pf-c-search-input__icon">
|
|
1992
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
1993
|
+
</span>
|
|
1994
|
+
<input
|
|
1995
|
+
class="pf-c-search-input__text-input"
|
|
1996
|
+
type="text"
|
|
1997
|
+
placeholder="Filter options"
|
|
1998
|
+
aria-label="Filter options"
|
|
1999
|
+
/>
|
|
2000
|
+
</span>
|
|
2001
|
+
</div>
|
|
2002
|
+
</div>
|
|
1899
2003
|
</div>
|
|
1900
2004
|
<div class="pf-c-dual-list-selector__tools-actions">
|
|
1901
2005
|
<button class="pf-c-button pf-m-plain" type="button" aria-label="Sort">
|
|
@@ -2298,13 +2402,21 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
2298
2402
|
</div>
|
|
2299
2403
|
<div class="pf-c-dual-list-selector__tools">
|
|
2300
2404
|
<div class="pf-c-dual-list-selector__tools-filter">
|
|
2301
|
-
<input
|
|
2302
|
-
class="pf-c-
|
|
2303
|
-
|
|
2304
|
-
|
|
2305
|
-
|
|
2306
|
-
|
|
2307
|
-
|
|
2405
|
+
<div class="pf-c-search-input">
|
|
2406
|
+
<div class="pf-c-search-input__bar">
|
|
2407
|
+
<span class="pf-c-search-input__text">
|
|
2408
|
+
<span class="pf-c-search-input__icon">
|
|
2409
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
2410
|
+
</span>
|
|
2411
|
+
<input
|
|
2412
|
+
class="pf-c-search-input__text-input"
|
|
2413
|
+
type="text"
|
|
2414
|
+
placeholder="Filter options"
|
|
2415
|
+
aria-label="Filter options"
|
|
2416
|
+
/>
|
|
2417
|
+
</span>
|
|
2418
|
+
</div>
|
|
2419
|
+
</div>
|
|
2308
2420
|
</div>
|
|
2309
2421
|
<div class="pf-c-dual-list-selector__tools-actions">
|
|
2310
2422
|
<button class="pf-c-button pf-m-plain" type="button" aria-label="Sort">
|
|
@@ -2453,13 +2565,21 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
2453
2565
|
</div>
|
|
2454
2566
|
<div class="pf-c-dual-list-selector__tools">
|
|
2455
2567
|
<div class="pf-c-dual-list-selector__tools-filter">
|
|
2456
|
-
<input
|
|
2457
|
-
class="pf-c-
|
|
2458
|
-
|
|
2459
|
-
|
|
2460
|
-
|
|
2461
|
-
|
|
2462
|
-
|
|
2568
|
+
<div class="pf-c-search-input">
|
|
2569
|
+
<div class="pf-c-search-input__bar">
|
|
2570
|
+
<span class="pf-c-search-input__text">
|
|
2571
|
+
<span class="pf-c-search-input__icon">
|
|
2572
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
2573
|
+
</span>
|
|
2574
|
+
<input
|
|
2575
|
+
class="pf-c-search-input__text-input"
|
|
2576
|
+
type="text"
|
|
2577
|
+
placeholder="Filter options"
|
|
2578
|
+
aria-label="Filter options"
|
|
2579
|
+
/>
|
|
2580
|
+
</span>
|
|
2581
|
+
</div>
|
|
2582
|
+
</div>
|
|
2463
2583
|
</div>
|
|
2464
2584
|
<div class="pf-c-dual-list-selector__tools-actions">
|
|
2465
2585
|
<button class="pf-c-button pf-m-plain" type="button" aria-label="Sort">
|
|
@@ -2607,13 +2727,21 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
2607
2727
|
</div>
|
|
2608
2728
|
<div class="pf-c-dual-list-selector__tools">
|
|
2609
2729
|
<div class="pf-c-dual-list-selector__tools-filter">
|
|
2610
|
-
<input
|
|
2611
|
-
class="pf-c-
|
|
2612
|
-
|
|
2613
|
-
|
|
2614
|
-
|
|
2615
|
-
|
|
2616
|
-
|
|
2730
|
+
<div class="pf-c-search-input">
|
|
2731
|
+
<div class="pf-c-search-input__bar">
|
|
2732
|
+
<span class="pf-c-search-input__text">
|
|
2733
|
+
<span class="pf-c-search-input__icon">
|
|
2734
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
2735
|
+
</span>
|
|
2736
|
+
<input
|
|
2737
|
+
class="pf-c-search-input__text-input"
|
|
2738
|
+
type="text"
|
|
2739
|
+
placeholder="Filter options"
|
|
2740
|
+
aria-label="Filter options"
|
|
2741
|
+
/>
|
|
2742
|
+
</span>
|
|
2743
|
+
</div>
|
|
2744
|
+
</div>
|
|
2617
2745
|
</div>
|
|
2618
2746
|
<div class="pf-c-dual-list-selector__tools-actions">
|
|
2619
2747
|
<button class="pf-c-button pf-m-plain" type="button" aria-label="Sort">
|
|
@@ -85,16 +85,6 @@ cssPrefix: pf-c-form-control
|
|
|
85
85
|
/>
|
|
86
86
|
<br />
|
|
87
87
|
<br />
|
|
88
|
-
<input
|
|
89
|
-
class="pf-c-form-control pf-m-search"
|
|
90
|
-
type="search"
|
|
91
|
-
value="Search"
|
|
92
|
-
id="input-search"
|
|
93
|
-
name="search-input"
|
|
94
|
-
aria-label="Search input example"
|
|
95
|
-
/>
|
|
96
|
-
<br />
|
|
97
|
-
<br />
|
|
98
88
|
<input
|
|
99
89
|
class="pf-c-form-control pf-m-icon pf-m-calendar"
|
|
100
90
|
type="text"
|
|
@@ -291,6 +281,156 @@ cssPrefix: pf-c-form-control
|
|
|
291
281
|
|
|
292
282
|
```
|
|
293
283
|
|
|
284
|
+
### Icon sprite
|
|
285
|
+
|
|
286
|
+
**Note:** The icons for the success, invalid, calendar, etc varations in form control elemements are applied as background images to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `.pf-m-icon-sprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
|
|
287
|
+
|
|
288
|
+
```html isBeta
|
|
289
|
+
<input
|
|
290
|
+
class="pf-c-form-control pf-m-success pf-m-icon-sprite"
|
|
291
|
+
type="text"
|
|
292
|
+
value="Success"
|
|
293
|
+
id="input-success"
|
|
294
|
+
aria-label="Success state input example"
|
|
295
|
+
/>
|
|
296
|
+
<br />
|
|
297
|
+
<br />
|
|
298
|
+
<input
|
|
299
|
+
class="pf-c-form-control pf-m-warning pf-m-icon-sprite"
|
|
300
|
+
type="text"
|
|
301
|
+
value="Warning"
|
|
302
|
+
id="input-warning"
|
|
303
|
+
aria-label="Warning state input example"
|
|
304
|
+
/>
|
|
305
|
+
<br />
|
|
306
|
+
<br />
|
|
307
|
+
<input
|
|
308
|
+
class="pf-c-form-control pf-m-icon-sprite"
|
|
309
|
+
required
|
|
310
|
+
type="text"
|
|
311
|
+
value="Error"
|
|
312
|
+
id="input-error"
|
|
313
|
+
aria-invalid="true"
|
|
314
|
+
aria-label="Error state input example"
|
|
315
|
+
/>
|
|
316
|
+
<br />
|
|
317
|
+
<br />
|
|
318
|
+
<input
|
|
319
|
+
class="pf-c-form-control pf-m-search pf-m-icon-sprite"
|
|
320
|
+
type="search"
|
|
321
|
+
value="Search"
|
|
322
|
+
id="input-search"
|
|
323
|
+
name="search-input"
|
|
324
|
+
aria-label="Search input example"
|
|
325
|
+
/>
|
|
326
|
+
<br />
|
|
327
|
+
<br />
|
|
328
|
+
<input
|
|
329
|
+
class="pf-c-form-control pf-m-icon pf-m-calendar pf-m-icon-sprite"
|
|
330
|
+
type="text"
|
|
331
|
+
value="Calendar"
|
|
332
|
+
id="input-calendar"
|
|
333
|
+
name="input-calendar"
|
|
334
|
+
aria-label="Calendar input example"
|
|
335
|
+
/>
|
|
336
|
+
<br />
|
|
337
|
+
<br />
|
|
338
|
+
<input
|
|
339
|
+
class="pf-c-form-control pf-m-icon pf-m-clock pf-m-icon-sprite"
|
|
340
|
+
type="text"
|
|
341
|
+
value="Clock"
|
|
342
|
+
id="input-clock"
|
|
343
|
+
name="input-clock"
|
|
344
|
+
aria-label="Clock input example"
|
|
345
|
+
/>
|
|
346
|
+
<br />
|
|
347
|
+
<br />
|
|
348
|
+
<select
|
|
349
|
+
class="pf-c-form-control pf-m-success pf-m-icon-sprite"
|
|
350
|
+
id="select-group-success"
|
|
351
|
+
name="select-group-success"
|
|
352
|
+
aria-label="Success state select group example"
|
|
353
|
+
>
|
|
354
|
+
<option value>Valid option</option>
|
|
355
|
+
<optgroup label="Group 1">
|
|
356
|
+
<option value="Option 1">The first option</option>
|
|
357
|
+
<option value="Option 2">The second option</option>
|
|
358
|
+
</optgroup>
|
|
359
|
+
<optgroup label="Group 2">
|
|
360
|
+
<option value="Option 3">The third option</option>
|
|
361
|
+
<option value="Option 4">The fourth option</option>
|
|
362
|
+
</optgroup>
|
|
363
|
+
</select>
|
|
364
|
+
<br />
|
|
365
|
+
<br />
|
|
366
|
+
<select
|
|
367
|
+
class="pf-c-form-control pf-m-warning pf-m-icon-sprite"
|
|
368
|
+
id="select-group-warning"
|
|
369
|
+
name="select-group-warning"
|
|
370
|
+
aria-label="Warning state select group example"
|
|
371
|
+
>
|
|
372
|
+
<option value>Warning option</option>
|
|
373
|
+
<optgroup label="Group 1">
|
|
374
|
+
<option value="Option 1">The first option</option>
|
|
375
|
+
<option value="Option 2">The second option</option>
|
|
376
|
+
</optgroup>
|
|
377
|
+
<optgroup label="Group 2">
|
|
378
|
+
<option value="Option 3">The third option</option>
|
|
379
|
+
<option value="Option 4">The fourth option</option>
|
|
380
|
+
</optgroup>
|
|
381
|
+
</select>
|
|
382
|
+
<br />
|
|
383
|
+
<br />
|
|
384
|
+
<select
|
|
385
|
+
class="pf-c-form-control"
|
|
386
|
+
required
|
|
387
|
+
aria-invalid="true"
|
|
388
|
+
id="select-group-error"
|
|
389
|
+
name="select-group-error"
|
|
390
|
+
aria-label="Error state select group example"
|
|
391
|
+
>
|
|
392
|
+
<option value>Invalid option</option>
|
|
393
|
+
<optgroup label="Group 1">
|
|
394
|
+
<option value="Option 1">The first option</option>
|
|
395
|
+
<option value="Option 2">The second option</option>
|
|
396
|
+
</optgroup>
|
|
397
|
+
<optgroup label="Group 2">
|
|
398
|
+
<option value="Option 3">The third option</option>
|
|
399
|
+
<option value="Option 4">The fourth option</option>
|
|
400
|
+
</optgroup>
|
|
401
|
+
</select>
|
|
402
|
+
<br />
|
|
403
|
+
<br />
|
|
404
|
+
<textarea
|
|
405
|
+
class="pf-c-form-control pf-m-success pf-m-icon-sprite"
|
|
406
|
+
name="textarea-success"
|
|
407
|
+
id="textarea-success"
|
|
408
|
+
aria-label="Success state textarea example"
|
|
409
|
+
>Success
|
|
410
|
+
</textarea>
|
|
411
|
+
<br />
|
|
412
|
+
<br />
|
|
413
|
+
<textarea
|
|
414
|
+
class="pf-c-form-control pf-m-warning pf-m-icon-sprite"
|
|
415
|
+
name="textarea-warning"
|
|
416
|
+
id="textarea-warning"
|
|
417
|
+
aria-label="Warning state textarea example"
|
|
418
|
+
>Warning
|
|
419
|
+
</textarea>
|
|
420
|
+
<br />
|
|
421
|
+
<br />
|
|
422
|
+
<textarea
|
|
423
|
+
class="pf-c-form-control"
|
|
424
|
+
required
|
|
425
|
+
name="textarea-error"
|
|
426
|
+
id="textarea-error"
|
|
427
|
+
aria-label="Error state textarea example"
|
|
428
|
+
aria-invalid="true"
|
|
429
|
+
>Error
|
|
430
|
+
</textarea>
|
|
431
|
+
|
|
432
|
+
```
|
|
433
|
+
|
|
294
434
|
## Documentation
|
|
295
435
|
|
|
296
436
|
### Accessibility
|
|
@@ -311,7 +451,7 @@ cssPrefix: pf-c-form-control
|
|
|
311
451
|
| `.pf-m-resize-horizontal` | `textarea.pf-m-form-control` | Modifies a `textarea.pf-c-form-control` element so it can only be resized horizontally along the x-axis. |
|
|
312
452
|
| `.pf-m-success` | `.pf-c-form-control` | Modifies a form control for the success state. |
|
|
313
453
|
| `.pf-m-warning` | `.pf-c-form-control` | Modifies a form control for the warning state. |
|
|
314
|
-
| `.pf-m-
|
|
454
|
+
| `.pf-m-icon-sprite` | `.pf-c-form-control` | Modifies form control element to use an external SVG sprite instead of embedded data URIs for icons. For use with apps whose content security policies disallow the use of data URIs. |
|
|
315
455
|
| `.pf-m-icon` | `input.pf-c-form-control` | Modifies a form control text input to be able to specify a custom SVG background via `--pf-c-form-control--m-icon--BackgroundUrl`, and other optional vars for other background properties. |
|
|
316
456
|
| `.pf-m-calendar` | `.pf-c-form-control.pf-m-icon` | Modifies a form control to support the calendar icon. |
|
|
317
457
|
| `.pf-m-clock` | `.pf-c-form-control.pf-m-icon` | Modifies a form control to support the clock icon. |
|