@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.
Files changed (45) hide show
  1. package/assets/images/status-icon-sprite.svg +38 -0
  2. package/components/Dropdown/dropdown.css +4 -2
  3. package/components/Dropdown/dropdown.scss +4 -2
  4. package/components/FormControl/form-control.css +26 -0
  5. package/components/FormControl/form-control.scss +33 -1
  6. package/components/Menu/menu.css +10 -0
  7. package/components/Menu/menu.scss +14 -0
  8. package/components/MenuToggle/menu-toggle.css +10 -7
  9. package/components/MenuToggle/menu-toggle.scss +11 -9
  10. package/components/SearchInput/search-input.css +1 -0
  11. package/components/SearchInput/search-input.scss +1 -0
  12. package/docs/components/AppLauncher/examples/application-launcher.md +15 -8
  13. package/docs/components/ContextSelector/examples/context-selector.md +84 -102
  14. package/docs/components/DualListSelector/examples/DualListSelector.md +240 -112
  15. package/docs/components/FormControl/examples/FormControl.md +151 -11
  16. package/docs/components/InputGroup/examples/InputGroup.md +6 -22
  17. package/docs/components/Menu/examples/Menu.md +127 -30
  18. package/docs/components/MenuToggle/examples/MenuToggle.md +77 -44
  19. package/docs/components/Page/examples/Page.md +11 -2
  20. package/docs/components/Select/examples/Select.md +30 -14
  21. package/docs/components/Table/examples/Table.md +8 -0
  22. package/docs/components/Toolbar/examples/Toolbar.md +300 -180
  23. package/docs/components/TreeView/examples/TreeView.md +15 -7
  24. package/docs/components/Wizard/examples/Wizard.md +6 -6
  25. package/docs/demos/Alert/examples/Alert.md +20 -40
  26. package/docs/demos/BackToTop/examples/BackToTop.md +149 -249
  27. package/docs/demos/ContextSelector/examples/ContextSelector.md +247 -276
  28. package/docs/demos/DataList/examples/DataList.md +159 -114
  29. package/docs/demos/DescriptionList/examples/DescriptionList.md +3358 -0
  30. package/docs/demos/Drawer/examples/Drawer.md +60 -120
  31. package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -31
  32. package/docs/demos/Masthead/examples/Masthead.md +426 -449
  33. package/docs/demos/Nav/examples/Nav.md +203 -343
  34. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +100 -200
  35. package/docs/demos/Page/examples/Page.md +834 -1235
  36. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +207 -126
  37. package/docs/demos/Table/examples/Table.md +1189 -652
  38. package/docs/demos/Tabs/examples/Tabs.md +11 -19
  39. package/docs/demos/Toolbar/examples/Toolbar.md +55 -55
  40. package/docs/demos/Wizard/examples/Wizard.md +6 -2
  41. package/package.json +1 -1
  42. package/patternfly-no-reset.css +51 -9
  43. package/patternfly.css +51 -9
  44. package/patternfly.min.css +1 -1
  45. package/patternfly.min.css.map +1 -1
package/docs/components/ContextSelector/examples/context-selector.md CHANGED
@@ -24,23 +24,20 @@ cssPrefix: pf-c-context-selector
24
24
  </button>
25
25
  <div class="pf-c-context-selector__menu" hidden>
26
26
  <div class="pf-c-context-selector__menu-search">
27
- <div class="pf-c-input-group">
28
- <input
29
- class="pf-c-form-control"
30
- type="search"
31
- placeholder="Search"
32
- id="textInput1"
33
- name="textInput1"
34
- aria-labelledby="context-selector-collapsed-example-search-button"
35
- />
36
- <button
37
- class="pf-c-button pf-m-control"
38
- type="button"
39
- id="context-selector-collapsed-example-search-button"
40
- aria-label="Search menu items"
41
- >
42
- <i class="fas fa-search" aria-hidden="true"></i>
43
- </button>
27
+ <div class="pf-c-search-input">
28
+ <div class="pf-c-search-input__bar">
29
+ <span class="pf-c-search-input__text">
30
+ <span class="pf-c-search-input__icon">
31
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
32
+ </span>
33
+ <input
34
+ class="pf-c-search-input__text-input"
35
+ type="text"
36
+ placeholder="Search"
37
+ aria-label="Search"
38
+ />
39
+ </span>
40
+ </div>
44
41
  </div>
45
42
  </div>
46
43
  <ul class="pf-c-context-selector__menu-list">
@@ -141,23 +138,20 @@ cssPrefix: pf-c-context-selector
141
138
  </button>
142
139
  <div class="pf-c-context-selector__menu">
143
140
  <div class="pf-c-context-selector__menu-search">
144
- <div class="pf-c-input-group">
145
- <input
146
- class="pf-c-form-control"
147
- type="search"
148
- placeholder="Search"
149
- id="textInput2"
150
- name="textInput2"
151
- aria-labelledby="context-selector-expanded-example-search-button"
152
- />
153
- <button
154
- class="pf-c-button pf-m-control"
155
- type="button"
156
- id="context-selector-expanded-example-search-button"
157
- aria-label="Search menu items"
158
- >
159
- <i class="fas fa-search" aria-hidden="true"></i>
160
- </button>
141
+ <div class="pf-c-search-input">
142
+ <div class="pf-c-search-input__bar">
143
+ <span class="pf-c-search-input__text">
144
+ <span class="pf-c-search-input__icon">
145
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
146
+ </span>
147
+ <input
148
+ class="pf-c-search-input__text-input"
149
+ type="text"
150
+ placeholder="Search"
151
+ aria-label="Search"
152
+ />
153
+ </span>
154
+ </div>
161
155
  </div>
162
156
  </div>
163
157
  <ul class="pf-c-context-selector__menu-list">
@@ -266,23 +260,20 @@ cssPrefix: pf-c-context-selector
266
260
  </button>
267
261
  <div class="pf-c-context-selector__menu" hidden>
268
262
  <div class="pf-c-context-selector__menu-search">
269
- <div class="pf-c-input-group">
270
- <input
271
- class="pf-c-form-control"
272
- type="search"
273
- placeholder="Search"
274
- id="textInput1"
275
- name="textInput1"
276
- aria-labelledby="context-selector-plain-with-text-collapsed-example-search-button"
277
- />
278
- <button
279
- class="pf-c-button pf-m-control"
280
- type="button"
281
- id="context-selector-plain-with-text-collapsed-example-search-button"
282
- aria-label="Search menu items"
283
- >
284
- <i class="fas fa-search" aria-hidden="true"></i>
285
- </button>
263
+ <div class="pf-c-search-input">
264
+ <div class="pf-c-search-input__bar">
265
+ <span class="pf-c-search-input__text">
266
+ <span class="pf-c-search-input__icon">
267
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
268
+ </span>
269
+ <input
270
+ class="pf-c-search-input__text-input"
271
+ type="text"
272
+ placeholder="Search"
273
+ aria-label="Search"
274
+ />
275
+ </span>
276
+ </div>
286
277
  </div>
287
278
  </div>
288
279
  <ul class="pf-c-context-selector__menu-list">
@@ -386,23 +377,20 @@ cssPrefix: pf-c-context-selector
386
377
  </button>
387
378
  <div class="pf-c-context-selector__menu">
388
379
  <div class="pf-c-context-selector__menu-search">
389
- <div class="pf-c-input-group">
390
- <input
391
- class="pf-c-form-control"
392
- type="search"
393
- placeholder="Search"
394
- id="textInput2"
395
- name="textInput2"
396
- aria-labelledby="context-selector-plain-with-text-expanded-example-search-button"
397
- />
398
- <button
399
- class="pf-c-button pf-m-control"
400
- type="button"
401
- id="context-selector-plain-with-text-expanded-example-search-button"
402
- aria-label="Search menu items"
403
- >
404
- <i class="fas fa-search" aria-hidden="true"></i>
405
- </button>
380
+ <div class="pf-c-search-input">
381
+ <div class="pf-c-search-input__bar">
382
+ <span class="pf-c-search-input__text">
383
+ <span class="pf-c-search-input__icon">
384
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
385
+ </span>
386
+ <input
387
+ class="pf-c-search-input__text-input"
388
+ type="text"
389
+ placeholder="Search"
390
+ aria-label="Search"
391
+ />
392
+ </span>
393
+ </div>
406
394
  </div>
407
395
  </div>
408
396
  <ul class="pf-c-context-selector__menu-list">
@@ -508,23 +496,20 @@ cssPrefix: pf-c-context-selector
508
496
  </button>
509
497
  <div class="pf-c-context-selector__menu">
510
498
  <div class="pf-c-context-selector__menu-search">
511
- <div class="pf-c-input-group">
512
- <input
513
- class="pf-c-form-control"
514
- type="search"
515
- placeholder="Search"
516
- id="context-selector-with-footer-example-textInput3"
517
- name="textInput3"
518
- aria-labelledby="context-selector-with-footer-example-search-button"
519
- />
520
- <button
521
- class="pf-c-button pf-m-control"
522
- type="button"
523
- id="context-selector-with-footer-example-search-button"
524
- aria-label="Search menu items"
525
- >
526
- <i class="fas fa-search" aria-hidden="true"></i>
527
- </button>
499
+ <div class="pf-c-search-input">
500
+ <div class="pf-c-search-input__bar">
501
+ <span class="pf-c-search-input__text">
502
+ <span class="pf-c-search-input__icon">
503
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
504
+ </span>
505
+ <input
506
+ class="pf-c-search-input__text-input"
507
+ type="text"
508
+ placeholder="Search"
509
+ aria-label="Search"
510
+ />
511
+ </span>
512
+ </div>
528
513
  </div>
529
514
  </div>
530
515
  <ul class="pf-c-context-selector__menu-list">
@@ -632,23 +617,20 @@ cssPrefix: pf-c-context-selector
632
617
  </button>
633
618
  <div class="pf-c-context-selector__menu">
634
619
  <div class="pf-c-context-selector__menu-search">
635
- <div class="pf-c-input-group">
636
- <input
637
- class="pf-c-form-control"
638
- type="search"
639
- placeholder="Search"
640
- id="context-selector-with-footer-example-two-textInput3"
641
- name="textInput3"
642
- aria-labelledby="context-selector-with-footer-example-two-search-button"
643
- />
644
- <button
645
- class="pf-c-button pf-m-control"
646
- type="button"
647
- id="context-selector-with-footer-example-two-search-button"
648
- aria-label="Search menu items"
649
- >
650
- <i class="fas fa-search" aria-hidden="true"></i>
651
- </button>
620
+ <div class="pf-c-search-input">
621
+ <div class="pf-c-search-input__bar">
622
+ <span class="pf-c-search-input__text">
623
+ <span class="pf-c-search-input__icon">
624
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
625
+ </span>
626
+ <input
627
+ class="pf-c-search-input__text-input"
628
+ type="text"
629
+ placeholder="Search"
630
+ aria-label="Search"
631
+ />
632
+ </span>
633
+ </div>
652
634
  </div>
653
635
  </div>
654
636
  <ul class="pf-c-context-selector__menu-list">