@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/ContextSelector/examples/ContextSelector.md CHANGED
@@ -68,23 +68,20 @@ section: components
68
68
  </button>
69
69
  <div class="pf-c-context-selector__menu" hidden>
70
70
  <div class="pf-c-context-selector__menu-search">
71
- <div class="pf-c-input-group">
72
- <input
73
- class="pf-c-form-control"
74
- type="search"
75
- placeholder="Search"
76
- id="context-selector-in-masthead-masthead-context-selectortextInput1"
77
- name="context-selector-in-masthead-masthead-context-selectortextInput1"
78
- aria-labelledby="context-selector-in-masthead-masthead-context-selector-search-button"
79
- />
80
- <button
81
- class="pf-c-button pf-m-control"
82
- type="button"
83
- id="context-selector-in-masthead-masthead-context-selector-search-button"
84
- aria-label="Search menu items"
85
- >
86
- <i class="fas fa-search" aria-hidden="true"></i>
87
- </button>
71
+ <div class="pf-c-search-input">
72
+ <div class="pf-c-search-input__bar">
73
+ <span class="pf-c-search-input__text">
74
+ <span class="pf-c-search-input__icon">
75
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
76
+ </span>
77
+ <input
78
+ class="pf-c-search-input__text-input"
79
+ type="text"
80
+ placeholder="Search"
81
+ aria-label="Search"
82
+ />
83
+ </span>
84
+ </div>
88
85
  </div>
89
86
  </div>
90
87
  <ul class="pf-c-context-selector__menu-list">
@@ -404,14 +401,24 @@ section: components
404
401
  hidden
405
402
  >
406
403
  <div class="pf-c-app-launcher__menu-search">
407
- <input
408
- class="pf-c-form-control"
409
- type="search"
410
- aria-label="Type to filter"
411
- placeholder="Filter by name..."
412
- id="-application-launcher-text-input"
413
- name="textInput1"
414
- />
404
+ <div class="pf-c-search-input">
405
+ <div class="pf-c-search-input__bar">
406
+ <span class="pf-c-search-input__text">
407
+ <span class="pf-c-search-input__icon">
408
+ <i
409
+ class="fas fa-search fa-fw"
410
+ aria-hidden="true"
411
+ ></i>
412
+ </span>
413
+ <input
414
+ class="pf-c-search-input__text-input"
415
+ type="text"
416
+ placeholder="Filter by name"
417
+ aria-label="Filter by name"
418
+ />
419
+ </span>
420
+ </div>
421
+ </div>
415
422
  </div>
416
423
  <section class="pf-c-app-launcher__group">
417
424
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -926,13 +933,24 @@ section: components
926
933
  </div>
927
934
  <div class="pf-c-menu__search">
928
935
  <div class="pf-c-menu__search-input">
929
- <input
930
- class="pf-c-form-control pf-m-search"
931
- type="search"
932
- id="-drilldown-menu-list-3-search-input"
933
- name="-drilldown-menu-list-3-search-input"
934
- aria-label="Search"
935
- />
936
+ <div class="pf-c-search-input">
937
+ <div class="pf-c-search-input__bar">
938
+ <span class="pf-c-search-input__text">
939
+ <span class="pf-c-search-input__icon">
940
+ <i
941
+ class="fas fa-search fa-fw"
942
+ aria-hidden="true"
943
+ ></i>
944
+ </span>
945
+ <input
946
+ class="pf-c-search-input__text-input"
947
+ type="text"
948
+ placeholder="Search"
949
+ aria-label="Search"
950
+ />
951
+ </span>
952
+ </div>
953
+ </div>
936
954
  </div>
937
955
  </div>
938
956
  <hr class="pf-c-divider" />
@@ -1183,23 +1201,20 @@ section: components
1183
1201
  </button>
1184
1202
  <div class="pf-c-context-selector__menu" hidden>
1185
1203
  <div class="pf-c-context-selector__menu-search">
1186
- <div class="pf-c-input-group">
1187
- <input
1188
- class="pf-c-form-control"
1189
- type="search"
1190
- placeholder="Search"
1191
- id="textInput1"
1192
- name="textInput1"
1193
- aria-labelledby="context-selector-collapsed-example-search-button"
1194
- />
1195
- <button
1196
- class="pf-c-button pf-m-control"
1197
- type="button"
1198
- id="context-selector-collapsed-example-search-button"
1199
- aria-label="Search menu items"
1200
- >
1201
- <i class="fas fa-search" aria-hidden="true"></i>
1202
- </button>
1204
+ <div class="pf-c-search-input">
1205
+ <div class="pf-c-search-input__bar">
1206
+ <span class="pf-c-search-input__text">
1207
+ <span class="pf-c-search-input__icon">
1208
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1209
+ </span>
1210
+ <input
1211
+ class="pf-c-search-input__text-input"
1212
+ type="text"
1213
+ placeholder="Search"
1214
+ aria-label="Search"
1215
+ />
1216
+ </span>
1217
+ </div>
1203
1218
  </div>
1204
1219
  </div>
1205
1220
  <ul class="pf-c-context-selector__menu-list">
@@ -1485,14 +1500,24 @@ section: components
1485
1500
  hidden
1486
1501
  >
1487
1502
  <div class="pf-c-app-launcher__menu-search">
1488
- <input
1489
- class="pf-c-form-control"
1490
- type="search"
1491
- aria-label="Type to filter"
1492
- placeholder="Filter by name..."
1493
- id="-application-launcher-text-input"
1494
- name="textInput1"
1495
- />
1503
+ <div class="pf-c-search-input">
1504
+ <div class="pf-c-search-input__bar">
1505
+ <span class="pf-c-search-input__text">
1506
+ <span class="pf-c-search-input__icon">
1507
+ <i
1508
+ class="fas fa-search fa-fw"
1509
+ aria-hidden="true"
1510
+ ></i>
1511
+ </span>
1512
+ <input
1513
+ class="pf-c-search-input__text-input"
1514
+ type="text"
1515
+ placeholder="Filter by name"
1516
+ aria-label="Filter by name"
1517
+ />
1518
+ </span>
1519
+ </div>
1520
+ </div>
1496
1521
  </div>
1497
1522
  <section class="pf-c-app-launcher__group">
1498
1523
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -2007,13 +2032,24 @@ section: components
2007
2032
  </div>
2008
2033
  <div class="pf-c-menu__search">
2009
2034
  <div class="pf-c-menu__search-input">
2010
- <input
2011
- class="pf-c-form-control pf-m-search"
2012
- type="search"
2013
- id="-drilldown-menu-list-3-search-input"
2014
- name="-drilldown-menu-list-3-search-input"
2015
- aria-label="Search"
2016
- />
2035
+ <div class="pf-c-search-input">
2036
+ <div class="pf-c-search-input__bar">
2037
+ <span class="pf-c-search-input__text">
2038
+ <span class="pf-c-search-input__icon">
2039
+ <i
2040
+ class="fas fa-search fa-fw"
2041
+ aria-hidden="true"
2042
+ ></i>
2043
+ </span>
2044
+ <input
2045
+ class="pf-c-search-input__text-input"
2046
+ type="text"
2047
+ placeholder="Search"
2048
+ aria-label="Search"
2049
+ />
2050
+ </span>
2051
+ </div>
2052
+ </div>
2017
2053
  </div>
2018
2054
  </div>
2019
2055
  <hr class="pf-c-divider" />
@@ -2266,23 +2302,20 @@ section: components
2266
2302
  </button>
2267
2303
  <div class="pf-c-context-selector__menu">
2268
2304
  <div class="pf-c-context-selector__menu-search">
2269
- <div class="pf-c-input-group">
2270
- <input
2271
- class="pf-c-form-control"
2272
- type="search"
2273
- placeholder="Search"
2274
- id="textInput1"
2275
- name="textInput1"
2276
- aria-labelledby="context-selector-collapsed-example-search-button"
2277
- />
2278
- <button
2279
- class="pf-c-button pf-m-control"
2280
- type="button"
2281
- id="context-selector-collapsed-example-search-button"
2282
- aria-label="Search menu items"
2283
- >
2284
- <i class="fas fa-search" aria-hidden="true"></i>
2285
- </button>
2305
+ <div class="pf-c-search-input">
2306
+ <div class="pf-c-search-input__bar">
2307
+ <span class="pf-c-search-input__text">
2308
+ <span class="pf-c-search-input__icon">
2309
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
2310
+ </span>
2311
+ <input
2312
+ class="pf-c-search-input__text-input"
2313
+ type="text"
2314
+ placeholder="Search"
2315
+ aria-label="Search"
2316
+ />
2317
+ </span>
2318
+ </div>
2286
2319
  </div>
2287
2320
  </div>
2288
2321
  <ul class="pf-c-context-selector__menu-list">
@@ -2573,14 +2606,24 @@ section: components
2573
2606
  hidden
2574
2607
  >
2575
2608
  <div class="pf-c-app-launcher__menu-search">
2576
- <input
2577
- class="pf-c-form-control"
2578
- type="search"
2579
- aria-label="Type to filter"
2580
- placeholder="Filter by name..."
2581
- id="context-selector-in-page-content-demo-masthead-application-launcher-text-input"
2582
- name="textInput1"
2583
- />
2609
+ <div class="pf-c-search-input">
2610
+ <div class="pf-c-search-input__bar">
2611
+ <span class="pf-c-search-input__text">
2612
+ <span class="pf-c-search-input__icon">
2613
+ <i
2614
+ class="fas fa-search fa-fw"
2615
+ aria-hidden="true"
2616
+ ></i>
2617
+ </span>
2618
+ <input
2619
+ class="pf-c-search-input__text-input"
2620
+ type="text"
2621
+ placeholder="Filter by name"
2622
+ aria-label="Filter by name"
2623
+ />
2624
+ </span>
2625
+ </div>
2626
+ </div>
2584
2627
  </div>
2585
2628
  <section class="pf-c-app-launcher__group">
2586
2629
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -3062,13 +3105,24 @@ section: components
3062
3105
  </div>
3063
3106
  <div class="pf-c-menu__search">
3064
3107
  <div class="pf-c-menu__search-input">
3065
- <input
3066
- class="pf-c-form-control pf-m-search"
3067
- type="search"
3068
- id="context-selector-in-page-content-demo-masthead-drilldown-menu-list-3-search-input"
3069
- name="context-selector-in-page-content-demo-masthead-drilldown-menu-list-3-search-input"
3070
- aria-label="Search"
3071
- />
3108
+ <div class="pf-c-search-input">
3109
+ <div class="pf-c-search-input__bar">
3110
+ <span class="pf-c-search-input__text">
3111
+ <span class="pf-c-search-input__icon">
3112
+ <i
3113
+ class="fas fa-search fa-fw"
3114
+ aria-hidden="true"
3115
+ ></i>
3116
+ </span>
3117
+ <input
3118
+ class="pf-c-search-input__text-input"
3119
+ type="text"
3120
+ placeholder="Search"
3121
+ aria-label="Search"
3122
+ />
3123
+ </span>
3124
+ </div>
3125
+ </div>
3072
3126
  </div>
3073
3127
  </div>
3074
3128
  <hr class="pf-c-divider" />
@@ -3339,23 +3393,20 @@ section: components
3339
3393
  </button>
3340
3394
  <div class="pf-c-context-selector__menu" hidden>
3341
3395
  <div class="pf-c-context-selector__menu-search">
3342
- <div class="pf-c-input-group">
3343
- <input
3344
- class="pf-c-form-control"
3345
- type="search"
3346
- placeholder="Search"
3347
- id="textInput1"
3348
- name="textInput1"
3349
- aria-labelledby="-context-selector-search-button"
3350
- />
3351
- <button
3352
- class="pf-c-button pf-m-control"
3353
- type="button"
3354
- id="-context-selector-search-button"
3355
- aria-label="Search menu items"
3356
- >
3357
- <i class="fas fa-search" aria-hidden="true"></i>
3358
- </button>
3396
+ <div class="pf-c-search-input">
3397
+ <div class="pf-c-search-input__bar">
3398
+ <span class="pf-c-search-input__text">
3399
+ <span class="pf-c-search-input__icon">
3400
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
3401
+ </span>
3402
+ <input
3403
+ class="pf-c-search-input__text-input"
3404
+ type="text"
3405
+ placeholder="Search"
3406
+ aria-label="Search"
3407
+ />
3408
+ </span>
3409
+ </div>
3359
3410
  </div>
3360
3411
  </div>
3361
3412
  <ul class="pf-c-context-selector__menu-list">