@patternfly/patternfly 4.179.3 → 4.180.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/components/Dropdown/dropdown.css +4 -2
- package/components/Dropdown/dropdown.scss +4 -2
- package/components/FormControl/form-control.scss +3 -0
- package/components/MenuToggle/menu-toggle.css +4 -1
- package/components/MenuToggle/menu-toggle.scss +4 -3
- 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 +0 -11
- package/docs/components/InputGroup/examples/InputGroup.md +6 -22
- package/docs/components/Menu/examples/Menu.md +60 -28
- package/docs/components/MenuToggle/examples/MenuToggle.md +77 -44
- package/docs/components/Select/examples/Select.md +30 -14
- package/docs/components/Toolbar/examples/Toolbar.md +300 -180
- package/docs/components/TreeView/examples/TreeView.md +15 -7
- package/docs/demos/ContextSelector/examples/ContextSelector.md +164 -113
- package/docs/demos/DataList/examples/DataList.md +159 -114
- package/docs/demos/Masthead/examples/Masthead.md +284 -167
- package/docs/demos/Page/examples/Page.md +252 -105
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +207 -126
- package/docs/demos/Table/examples/Table.md +1176 -639
- package/docs/demos/Toolbar/examples/Toolbar.md +55 -55
- package/package.json +1 -1
- package/patternfly-no-reset.css +9 -3
- package/patternfly.css +9 -3
- 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"
|
|
@@ -311,7 +301,6 @@ cssPrefix: pf-c-form-control
|
|
|
311
301
|
| `.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
302
|
| `.pf-m-success` | `.pf-c-form-control` | Modifies a form control for the success state. |
|
|
313
303
|
| `.pf-m-warning` | `.pf-c-form-control` | Modifies a form control for the warning state. |
|
|
314
|
-
| `.pf-m-search` | `.pf-c-form-control` | Modifies a form control for the search input. |
|
|
315
304
|
| `.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
305
|
| `.pf-m-calendar` | `.pf-c-form-control.pf-m-icon` | Modifies a form control to support the calendar icon. |
|
|
317
306
|
| `.pf-m-clock` | `.pf-c-form-control.pf-m-icon` | Modifies a form control to support the clock icon. |
|
|
@@ -164,23 +164,6 @@ cssPrefix: pf-c-input-group
|
|
|
164
164
|
/>
|
|
165
165
|
</div>
|
|
166
166
|
<br />
|
|
167
|
-
<div class="pf-c-input-group">
|
|
168
|
-
<input
|
|
169
|
-
class="pf-c-form-control"
|
|
170
|
-
type="search"
|
|
171
|
-
id="textInput11"
|
|
172
|
-
name="textInput11"
|
|
173
|
-
aria-label="Search input example"
|
|
174
|
-
/>
|
|
175
|
-
<button
|
|
176
|
-
class="pf-c-button pf-m-control"
|
|
177
|
-
type="button"
|
|
178
|
-
aria-label="Search button for search input"
|
|
179
|
-
>
|
|
180
|
-
<i class="fas fa-search" aria-hidden="true"></i>
|
|
181
|
-
</button>
|
|
182
|
-
</div>
|
|
183
|
-
<br />
|
|
184
167
|
<div class="pf-c-input-group">
|
|
185
168
|
<input
|
|
186
169
|
class="pf-c-form-control"
|
|
@@ -201,7 +184,7 @@ cssPrefix: pf-c-input-group
|
|
|
201
184
|
<div class="pf-c-input-group">
|
|
202
185
|
<input
|
|
203
186
|
class="pf-c-form-control"
|
|
204
|
-
type="
|
|
187
|
+
type="text"
|
|
205
188
|
id="textInput12"
|
|
206
189
|
name="textInput12"
|
|
207
190
|
aria-label="Input example with popover"
|
|
@@ -218,7 +201,7 @@ cssPrefix: pf-c-input-group
|
|
|
218
201
|
<div class="pf-c-input-group">
|
|
219
202
|
<input
|
|
220
203
|
class="pf-c-form-control"
|
|
221
|
-
type="
|
|
204
|
+
type="number"
|
|
222
205
|
id="textInput14"
|
|
223
206
|
name="textInput14"
|
|
224
207
|
aria-label="Input example with plain unit"
|
|
@@ -237,9 +220,10 @@ Use the input group to extend form controls by adding text, buttons, selects, et
|
|
|
237
220
|
### Accessibility
|
|
238
221
|
|
|
239
222
|
When using the `.pf-c-input-group` always ensure labels are used outside the input group with the `.pf-screen-reader` class applied. You can also make use of the `aria-describedby`, `aria-label`, or `aria-labelledby` attributes. For more information on accessibility and forms see the [form component](/components/form).
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
223
|
+
|
|
224
|
+
| Attribute | Applied to | Outcome |
|
|
225
|
+
| ------------------ | -------------------- | -------------------------------------------------------------------------------------------------------- |
|
|
226
|
+
| `aria-describedby` | `.pf-c-form-control` | When using `.pf-c-input-group__text` or `.pf-c-input-group__action` make use of this on the input field. |
|
|
243
227
|
|
|
244
228
|
### Usage
|
|
245
229
|
|