@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.
Files changed (29) hide show
  1. package/components/Dropdown/dropdown.css +4 -2
  2. package/components/Dropdown/dropdown.scss +4 -2
  3. package/components/FormControl/form-control.scss +3 -0
  4. package/components/MenuToggle/menu-toggle.css +4 -1
  5. package/components/MenuToggle/menu-toggle.scss +4 -3
  6. package/components/SearchInput/search-input.css +1 -0
  7. package/components/SearchInput/search-input.scss +1 -0
  8. package/docs/components/AppLauncher/examples/application-launcher.md +15 -8
  9. package/docs/components/ContextSelector/examples/context-selector.md +84 -102
  10. package/docs/components/DualListSelector/examples/DualListSelector.md +240 -112
  11. package/docs/components/FormControl/examples/FormControl.md +0 -11
  12. package/docs/components/InputGroup/examples/InputGroup.md +6 -22
  13. package/docs/components/Menu/examples/Menu.md +60 -28
  14. package/docs/components/MenuToggle/examples/MenuToggle.md +77 -44
  15. package/docs/components/Select/examples/Select.md +30 -14
  16. package/docs/components/Toolbar/examples/Toolbar.md +300 -180
  17. package/docs/components/TreeView/examples/TreeView.md +15 -7
  18. package/docs/demos/ContextSelector/examples/ContextSelector.md +164 -113
  19. package/docs/demos/DataList/examples/DataList.md +159 -114
  20. package/docs/demos/Masthead/examples/Masthead.md +284 -167
  21. package/docs/demos/Page/examples/Page.md +252 -105
  22. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +207 -126
  23. package/docs/demos/Table/examples/Table.md +1176 -639
  24. package/docs/demos/Toolbar/examples/Toolbar.md +55 -55
  25. package/package.json +1 -1
  26. package/patternfly-no-reset.css +9 -3
  27. package/patternfly.css +9 -3
  28. package/patternfly.min.css +1 -1
  29. package/patternfly.min.css.map +1 -1
package/docs/demos/Page/examples/Page.md CHANGED
@@ -85,14 +85,24 @@ wrapperTag: div
85
85
  hidden
86
86
  >
87
87
  <div class="pf-c-app-launcher__menu-search">
88
- <input
89
- class="pf-c-form-control"
90
- type="search"
91
- aria-label="Type to filter"
92
- placeholder="Filter by name..."
93
- id="page-demo-basic-masthead-application-launcher-text-input"
94
- name="textInput1"
95
- />
88
+ <div class="pf-c-search-input">
89
+ <div class="pf-c-search-input__bar">
90
+ <span class="pf-c-search-input__text">
91
+ <span class="pf-c-search-input__icon">
92
+ <i
93
+ class="fas fa-search fa-fw"
94
+ aria-hidden="true"
95
+ ></i>
96
+ </span>
97
+ <input
98
+ class="pf-c-search-input__text-input"
99
+ type="text"
100
+ placeholder="Filter by name"
101
+ aria-label="Filter by name"
102
+ />
103
+ </span>
104
+ </div>
105
+ </div>
96
106
  </div>
97
107
  <section class="pf-c-app-launcher__group">
98
108
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -574,13 +584,24 @@ wrapperTag: div
574
584
  </div>
575
585
  <div class="pf-c-menu__search">
576
586
  <div class="pf-c-menu__search-input">
577
- <input
578
- class="pf-c-form-control pf-m-search"
579
- type="search"
580
- id="page-demo-basic-masthead-drilldown-menu-list-3-search-input"
581
- name="page-demo-basic-masthead-drilldown-menu-list-3-search-input"
582
- aria-label="Search"
583
- />
587
+ <div class="pf-c-search-input">
588
+ <div class="pf-c-search-input__bar">
589
+ <span class="pf-c-search-input__text">
590
+ <span class="pf-c-search-input__icon">
591
+ <i
592
+ class="fas fa-search fa-fw"
593
+ aria-hidden="true"
594
+ ></i>
595
+ </span>
596
+ <input
597
+ class="pf-c-search-input__text-input"
598
+ type="text"
599
+ placeholder="Search"
600
+ aria-label="Search"
601
+ />
602
+ </span>
603
+ </div>
604
+ </div>
584
605
  </div>
585
606
  </div>
586
607
  <hr class="pf-c-divider" />
@@ -1008,14 +1029,24 @@ wrapperTag: div
1008
1029
  hidden
1009
1030
  >
1010
1031
  <div class="pf-c-app-launcher__menu-search">
1011
- <input
1012
- class="pf-c-form-control"
1013
- type="search"
1014
- aria-label="Type to filter"
1015
- placeholder="Filter by name..."
1016
- id="page-demo-sticky-top-horizontal-subnav-masthead-application-launcher-text-input"
1017
- name="textInput1"
1018
- />
1032
+ <div class="pf-c-search-input">
1033
+ <div class="pf-c-search-input__bar">
1034
+ <span class="pf-c-search-input__text">
1035
+ <span class="pf-c-search-input__icon">
1036
+ <i
1037
+ class="fas fa-search fa-fw"
1038
+ aria-hidden="true"
1039
+ ></i>
1040
+ </span>
1041
+ <input
1042
+ class="pf-c-search-input__text-input"
1043
+ type="text"
1044
+ placeholder="Filter by name"
1045
+ aria-label="Filter by name"
1046
+ />
1047
+ </span>
1048
+ </div>
1049
+ </div>
1019
1050
  </div>
1020
1051
  <section class="pf-c-app-launcher__group">
1021
1052
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -1497,13 +1528,24 @@ wrapperTag: div
1497
1528
  </div>
1498
1529
  <div class="pf-c-menu__search">
1499
1530
  <div class="pf-c-menu__search-input">
1500
- <input
1501
- class="pf-c-form-control pf-m-search"
1502
- type="search"
1503
- id="page-demo-sticky-top-horizontal-subnav-masthead-drilldown-menu-list-3-search-input"
1504
- name="page-demo-sticky-top-horizontal-subnav-masthead-drilldown-menu-list-3-search-input"
1505
- aria-label="Search"
1506
- />
1531
+ <div class="pf-c-search-input">
1532
+ <div class="pf-c-search-input__bar">
1533
+ <span class="pf-c-search-input__text">
1534
+ <span class="pf-c-search-input__icon">
1535
+ <i
1536
+ class="fas fa-search fa-fw"
1537
+ aria-hidden="true"
1538
+ ></i>
1539
+ </span>
1540
+ <input
1541
+ class="pf-c-search-input__text-input"
1542
+ type="text"
1543
+ placeholder="Search"
1544
+ aria-label="Search"
1545
+ />
1546
+ </span>
1547
+ </div>
1548
+ </div>
1507
1549
  </div>
1508
1550
  </div>
1509
1551
  <hr class="pf-c-divider" />
@@ -2172,14 +2214,24 @@ wrapperTag: div
2172
2214
  hidden
2173
2215
  >
2174
2216
  <div class="pf-c-app-launcher__menu-search">
2175
- <input
2176
- class="pf-c-form-control"
2177
- type="search"
2178
- aria-label="Type to filter"
2179
- placeholder="Filter by name..."
2180
- id="page-demo-sticky-top-breadcrumb-masthead-application-launcher-text-input"
2181
- name="textInput1"
2182
- />
2217
+ <div class="pf-c-search-input">
2218
+ <div class="pf-c-search-input__bar">
2219
+ <span class="pf-c-search-input__text">
2220
+ <span class="pf-c-search-input__icon">
2221
+ <i
2222
+ class="fas fa-search fa-fw"
2223
+ aria-hidden="true"
2224
+ ></i>
2225
+ </span>
2226
+ <input
2227
+ class="pf-c-search-input__text-input"
2228
+ type="text"
2229
+ placeholder="Filter by name"
2230
+ aria-label="Filter by name"
2231
+ />
2232
+ </span>
2233
+ </div>
2234
+ </div>
2183
2235
  </div>
2184
2236
  <section class="pf-c-app-launcher__group">
2185
2237
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -2661,13 +2713,24 @@ wrapperTag: div
2661
2713
  </div>
2662
2714
  <div class="pf-c-menu__search">
2663
2715
  <div class="pf-c-menu__search-input">
2664
- <input
2665
- class="pf-c-form-control pf-m-search"
2666
- type="search"
2667
- id="page-demo-sticky-top-breadcrumb-masthead-drilldown-menu-list-3-search-input"
2668
- name="page-demo-sticky-top-breadcrumb-masthead-drilldown-menu-list-3-search-input"
2669
- aria-label="Search"
2670
- />
2716
+ <div class="pf-c-search-input">
2717
+ <div class="pf-c-search-input__bar">
2718
+ <span class="pf-c-search-input__text">
2719
+ <span class="pf-c-search-input__icon">
2720
+ <i
2721
+ class="fas fa-search fa-fw"
2722
+ aria-hidden="true"
2723
+ ></i>
2724
+ </span>
2725
+ <input
2726
+ class="pf-c-search-input__text-input"
2727
+ type="text"
2728
+ placeholder="Search"
2729
+ aria-label="Search"
2730
+ />
2731
+ </span>
2732
+ </div>
2733
+ </div>
2671
2734
  </div>
2672
2735
  </div>
2673
2736
  <hr class="pf-c-divider" />
@@ -3301,14 +3364,24 @@ wrapperTag: div
3301
3364
  hidden
3302
3365
  >
3303
3366
  <div class="pf-c-app-launcher__menu-search">
3304
- <input
3305
- class="pf-c-form-control"
3306
- type="search"
3307
- aria-label="Type to filter"
3308
- placeholder="Filter by name..."
3309
- id="page-demo-sticky-top-section-group-masthead-application-launcher-text-input"
3310
- name="textInput1"
3311
- />
3367
+ <div class="pf-c-search-input">
3368
+ <div class="pf-c-search-input__bar">
3369
+ <span class="pf-c-search-input__text">
3370
+ <span class="pf-c-search-input__icon">
3371
+ <i
3372
+ class="fas fa-search fa-fw"
3373
+ aria-hidden="true"
3374
+ ></i>
3375
+ </span>
3376
+ <input
3377
+ class="pf-c-search-input__text-input"
3378
+ type="text"
3379
+ placeholder="Filter by name"
3380
+ aria-label="Filter by name"
3381
+ />
3382
+ </span>
3383
+ </div>
3384
+ </div>
3312
3385
  </div>
3313
3386
  <section class="pf-c-app-launcher__group">
3314
3387
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -3790,13 +3863,24 @@ wrapperTag: div
3790
3863
  </div>
3791
3864
  <div class="pf-c-menu__search">
3792
3865
  <div class="pf-c-menu__search-input">
3793
- <input
3794
- class="pf-c-form-control pf-m-search"
3795
- type="search"
3796
- id="page-demo-sticky-top-section-group-masthead-drilldown-menu-list-3-search-input"
3797
- name="page-demo-sticky-top-section-group-masthead-drilldown-menu-list-3-search-input"
3798
- aria-label="Search"
3799
- />
3866
+ <div class="pf-c-search-input">
3867
+ <div class="pf-c-search-input__bar">
3868
+ <span class="pf-c-search-input__text">
3869
+ <span class="pf-c-search-input__icon">
3870
+ <i
3871
+ class="fas fa-search fa-fw"
3872
+ aria-hidden="true"
3873
+ ></i>
3874
+ </span>
3875
+ <input
3876
+ class="pf-c-search-input__text-input"
3877
+ type="text"
3878
+ placeholder="Search"
3879
+ aria-label="Search"
3880
+ />
3881
+ </span>
3882
+ </div>
3883
+ </div>
3800
3884
  </div>
3801
3885
  </div>
3802
3886
  <hr class="pf-c-divider" />
@@ -4427,14 +4511,24 @@ wrapperTag: div
4427
4511
  hidden
4428
4512
  >
4429
4513
  <div class="pf-c-app-launcher__menu-search">
4430
- <input
4431
- class="pf-c-form-control"
4432
- type="search"
4433
- aria-label="Type to filter"
4434
- placeholder="Filter by name..."
4435
- id="page-demo-sticky-section-bottom-masthead-application-launcher-text-input"
4436
- name="textInput1"
4437
- />
4514
+ <div class="pf-c-search-input">
4515
+ <div class="pf-c-search-input__bar">
4516
+ <span class="pf-c-search-input__text">
4517
+ <span class="pf-c-search-input__icon">
4518
+ <i
4519
+ class="fas fa-search fa-fw"
4520
+ aria-hidden="true"
4521
+ ></i>
4522
+ </span>
4523
+ <input
4524
+ class="pf-c-search-input__text-input"
4525
+ type="text"
4526
+ placeholder="Filter by name"
4527
+ aria-label="Filter by name"
4528
+ />
4529
+ </span>
4530
+ </div>
4531
+ </div>
4438
4532
  </div>
4439
4533
  <section class="pf-c-app-launcher__group">
4440
4534
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -4916,13 +5010,24 @@ wrapperTag: div
4916
5010
  </div>
4917
5011
  <div class="pf-c-menu__search">
4918
5012
  <div class="pf-c-menu__search-input">
4919
- <input
4920
- class="pf-c-form-control pf-m-search"
4921
- type="search"
4922
- id="page-demo-sticky-section-bottom-masthead-drilldown-menu-list-3-search-input"
4923
- name="page-demo-sticky-section-bottom-masthead-drilldown-menu-list-3-search-input"
4924
- aria-label="Search"
4925
- />
5013
+ <div class="pf-c-search-input">
5014
+ <div class="pf-c-search-input__bar">
5015
+ <span class="pf-c-search-input__text">
5016
+ <span class="pf-c-search-input__icon">
5017
+ <i
5018
+ class="fas fa-search fa-fw"
5019
+ aria-hidden="true"
5020
+ ></i>
5021
+ </span>
5022
+ <input
5023
+ class="pf-c-search-input__text-input"
5024
+ type="text"
5025
+ placeholder="Search"
5026
+ aria-label="Search"
5027
+ />
5028
+ </span>
5029
+ </div>
5030
+ </div>
4926
5031
  </div>
4927
5032
  </div>
4928
5033
  <hr class="pf-c-divider" />
@@ -5558,14 +5663,24 @@ wrapperTag: div
5558
5663
  hidden
5559
5664
  >
5560
5665
  <div class="pf-c-app-launcher__menu-search">
5561
- <input
5562
- class="pf-c-form-control"
5563
- type="search"
5564
- aria-label="Type to filter"
5565
- placeholder="Filter by name..."
5566
- id="page-demo-overflow-scroll-masthead-application-launcher-text-input"
5567
- name="textInput1"
5568
- />
5666
+ <div class="pf-c-search-input">
5667
+ <div class="pf-c-search-input__bar">
5668
+ <span class="pf-c-search-input__text">
5669
+ <span class="pf-c-search-input__icon">
5670
+ <i
5671
+ class="fas fa-search fa-fw"
5672
+ aria-hidden="true"
5673
+ ></i>
5674
+ </span>
5675
+ <input
5676
+ class="pf-c-search-input__text-input"
5677
+ type="text"
5678
+ placeholder="Filter by name"
5679
+ aria-label="Filter by name"
5680
+ />
5681
+ </span>
5682
+ </div>
5683
+ </div>
5569
5684
  </div>
5570
5685
  <section class="pf-c-app-launcher__group">
5571
5686
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -6047,13 +6162,24 @@ wrapperTag: div
6047
6162
  </div>
6048
6163
  <div class="pf-c-menu__search">
6049
6164
  <div class="pf-c-menu__search-input">
6050
- <input
6051
- class="pf-c-form-control pf-m-search"
6052
- type="search"
6053
- id="page-demo-overflow-scroll-masthead-drilldown-menu-list-3-search-input"
6054
- name="page-demo-overflow-scroll-masthead-drilldown-menu-list-3-search-input"
6055
- aria-label="Search"
6056
- />
6165
+ <div class="pf-c-search-input">
6166
+ <div class="pf-c-search-input__bar">
6167
+ <span class="pf-c-search-input__text">
6168
+ <span class="pf-c-search-input__icon">
6169
+ <i
6170
+ class="fas fa-search fa-fw"
6171
+ aria-hidden="true"
6172
+ ></i>
6173
+ </span>
6174
+ <input
6175
+ class="pf-c-search-input__text-input"
6176
+ type="text"
6177
+ placeholder="Search"
6178
+ aria-label="Search"
6179
+ />
6180
+ </span>
6181
+ </div>
6182
+ </div>
6057
6183
  </div>
6058
6184
  </div>
6059
6185
  <hr class="pf-c-divider" />
@@ -6693,14 +6819,24 @@ wrapperTag: div
6693
6819
  hidden
6694
6820
  >
6695
6821
  <div class="pf-c-app-launcher__menu-search">
6696
- <input
6697
- class="pf-c-form-control"
6698
- type="search"
6699
- aria-label="Type to filter"
6700
- placeholder="Filter by name..."
6701
- id="page-demo-centered-contentt-masthead-application-launcher-text-input"
6702
- name="textInput1"
6703
- />
6822
+ <div class="pf-c-search-input">
6823
+ <div class="pf-c-search-input__bar">
6824
+ <span class="pf-c-search-input__text">
6825
+ <span class="pf-c-search-input__icon">
6826
+ <i
6827
+ class="fas fa-search fa-fw"
6828
+ aria-hidden="true"
6829
+ ></i>
6830
+ </span>
6831
+ <input
6832
+ class="pf-c-search-input__text-input"
6833
+ type="text"
6834
+ placeholder="Filter by name"
6835
+ aria-label="Filter by name"
6836
+ />
6837
+ </span>
6838
+ </div>
6839
+ </div>
6704
6840
  </div>
6705
6841
  <section class="pf-c-app-launcher__group">
6706
6842
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -7182,13 +7318,24 @@ wrapperTag: div
7182
7318
  </div>
7183
7319
  <div class="pf-c-menu__search">
7184
7320
  <div class="pf-c-menu__search-input">
7185
- <input
7186
- class="pf-c-form-control pf-m-search"
7187
- type="search"
7188
- id="page-demo-centered-contentt-masthead-drilldown-menu-list-3-search-input"
7189
- name="page-demo-centered-contentt-masthead-drilldown-menu-list-3-search-input"
7190
- aria-label="Search"
7191
- />
7321
+ <div class="pf-c-search-input">
7322
+ <div class="pf-c-search-input__bar">
7323
+ <span class="pf-c-search-input__text">
7324
+ <span class="pf-c-search-input__icon">
7325
+ <i
7326
+ class="fas fa-search fa-fw"
7327
+ aria-hidden="true"
7328
+ ></i>
7329
+ </span>
7330
+ <input
7331
+ class="pf-c-search-input__text-input"
7332
+ type="text"
7333
+ placeholder="Search"
7334
+ aria-label="Search"
7335
+ />
7336
+ </span>
7337
+ </div>
7338
+ </div>
7192
7339
  </div>
7193
7340
  </div>
7194
7341
  <hr class="pf-c-divider" />