@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/demos/DataList/examples/DataList.md CHANGED
@@ -397,23 +397,20 @@ wrapperTag: div
397
397
  </button>
398
398
  <div class="pf-c-context-selector__menu" hidden>
399
399
  <div class="pf-c-context-selector__menu-search">
400
- <div class="pf-c-input-group">
401
- <input
402
- class="pf-c-form-control"
403
- type="search"
404
- placeholder="Search"
405
- id="textInput1"
406
- name="textInput1"
407
- aria-labelledby="-context-selector-search-button"
408
- />
409
- <button
410
- class="pf-c-button pf-m-control"
411
- type="button"
412
- id="-context-selector-search-button"
413
- aria-label="Search menu items"
414
- >
415
- <i class="fas fa-search" aria-hidden="true"></i>
416
- </button>
400
+ <div class="pf-c-search-input">
401
+ <div class="pf-c-search-input__bar">
402
+ <span class="pf-c-search-input__text">
403
+ <span class="pf-c-search-input__icon">
404
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
405
+ </span>
406
+ <input
407
+ class="pf-c-search-input__text-input"
408
+ type="text"
409
+ placeholder="Search"
410
+ aria-label="Search"
411
+ />
412
+ </span>
413
+ </div>
417
414
  </div>
418
415
  </div>
419
416
  <ul class="pf-c-context-selector__menu-list">
@@ -1388,23 +1385,23 @@ wrapperTag: div
1388
1385
  </button>
1389
1386
  <div class="pf-c-context-selector__menu" hidden>
1390
1387
  <div class="pf-c-context-selector__menu-search">
1391
- <div class="pf-c-input-group">
1392
- <input
1393
- class="pf-c-form-control"
1394
- type="search"
1395
- placeholder="Search"
1396
- id="textInput1"
1397
- name="textInput1"
1398
- aria-labelledby="-context-selector-search-button"
1399
- />
1400
- <button
1401
- class="pf-c-button pf-m-control"
1402
- type="button"
1403
- id="-context-selector-search-button"
1404
- aria-label="Search menu items"
1405
- >
1406
- <i class="fas fa-search" aria-hidden="true"></i>
1407
- </button>
1388
+ <div class="pf-c-search-input">
1389
+ <div class="pf-c-search-input__bar">
1390
+ <span class="pf-c-search-input__text">
1391
+ <span class="pf-c-search-input__icon">
1392
+ <i
1393
+ class="fas fa-search fa-fw"
1394
+ aria-hidden="true"
1395
+ ></i>
1396
+ </span>
1397
+ <input
1398
+ class="pf-c-search-input__text-input"
1399
+ type="text"
1400
+ placeholder="Search"
1401
+ aria-label="Search"
1402
+ />
1403
+ </span>
1404
+ </div>
1408
1405
  </div>
1409
1406
  </div>
1410
1407
  <ul class="pf-c-context-selector__menu-list">
@@ -2326,64 +2323,88 @@ wrapperTag: div
2326
2323
  aria-label="search filter"
2327
2324
  role="group"
2328
2325
  >
2329
- <div class="pf-c-dropdown">
2326
+ <div class="pf-c-select" style="width: 175px">
2327
+ <span id="-select-name-label" hidden>Choose one</span>
2328
+
2330
2329
  <button
2331
- class="pf-c-dropdown__toggle"
2332
- id="--button"
2333
- aria-expanded="false"
2330
+ class="pf-c-select__toggle"
2334
2331
  type="button"
2332
+ id="-select-name-toggle"
2333
+ aria-haspopup="true"
2334
+ aria-expanded="false"
2335
+ aria-labelledby="-select-name-label -select-name-toggle"
2335
2336
  >
2336
- <span class="pf-c-dropdown__toggle-text">Name</span>
2337
- <span class="pf-c-dropdown__toggle-icon">
2337
+ <div class="pf-c-select__toggle-wrapper">
2338
+ <span class="pf-c-select__toggle-icon">
2339
+ <i class="fas fa-filter" aria-hidden="true"></i>
2340
+ </span>
2341
+ <span class="pf-c-select__toggle-text">Name</span>
2342
+ </div>
2343
+ <span class="pf-c-select__toggle-arrow">
2338
2344
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2339
2345
  </span>
2340
2346
  </button>
2347
+
2341
2348
  <ul
2342
- class="pf-c-dropdown__menu"
2343
- aria-labelledby="--button"
2349
+ class="pf-c-select__menu"
2350
+ role="listbox"
2351
+ aria-labelledby="-select-name-label"
2344
2352
  hidden
2353
+ style="width: 175px"
2345
2354
  >
2346
- <li>
2347
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
2355
+ <li role="presentation">
2356
+ <button
2357
+ class="pf-c-select__menu-item"
2358
+ role="option"
2359
+ >Running</button>
2348
2360
  </li>
2349
- <li>
2361
+ <li role="presentation">
2350
2362
  <button
2351
- class="pf-c-dropdown__menu-item"
2352
- type="button"
2353
- >Action</button>
2363
+ class="pf-c-select__menu-item pf-m-selected"
2364
+ role="option"
2365
+ aria-selected="true"
2366
+ >
2367
+ Stopped
2368
+ <span class="pf-c-select__menu-item-icon">
2369
+ <i class="fas fa-check" aria-hidden="true"></i>
2370
+ </span>
2371
+ </button>
2354
2372
  </li>
2355
- <li>
2356
- <a
2357
- class="pf-c-dropdown__menu-item pf-m-disabled"
2358
- href="#"
2359
- aria-disabled="true"
2360
- tabindex="-1"
2361
- >Disabled link</a>
2373
+ <li role="presentation">
2374
+ <button
2375
+ class="pf-c-select__menu-item"
2376
+ role="option"
2377
+ >Down</button>
2362
2378
  </li>
2363
- <li>
2379
+ <li role="presentation">
2364
2380
  <button
2365
- class="pf-c-dropdown__menu-item"
2366
- type="button"
2367
- disabled
2368
- >Disabled action</button>
2381
+ class="pf-c-select__menu-item"
2382
+ role="option"
2383
+ >Degraded</button>
2369
2384
  </li>
2370
- <li class="pf-c-divider" role="separator"></li>
2371
- <li>
2372
- <a
2373
- class="pf-c-dropdown__menu-item"
2374
- href="#"
2375
- >Separated link</a>
2385
+ <li role="presentation">
2386
+ <button
2387
+ class="pf-c-select__menu-item"
2388
+ role="option"
2389
+ >Needs maintenance</button>
2376
2390
  </li>
2377
2391
  </ul>
2378
2392
  </div>
2379
- <input
2380
- class="pf-c-form-control"
2381
- type="search"
2382
- id="--search-filter-input"
2383
- name="-search-filter-input"
2384
- aria-label="input with dropdown and button"
2385
- aria-describedby="--button"
2386
- />
2393
+ <div class="pf-c-search-input">
2394
+ <div class="pf-c-search-input__bar">
2395
+ <span class="pf-c-search-input__text">
2396
+ <span class="pf-c-search-input__icon">
2397
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
2398
+ </span>
2399
+ <input
2400
+ class="pf-c-search-input__text-input"
2401
+ type="text"
2402
+ placeholder="Filter by name"
2403
+ aria-label="Filter by name"
2404
+ />
2405
+ </span>
2406
+ </div>
2407
+ </div>
2387
2408
  </div>
2388
2409
  </div>
2389
2410
  </div>
@@ -3802,64 +3823,88 @@ wrapperTag: div
3802
3823
  aria-label="search filter"
3803
3824
  role="group"
3804
3825
  >
3805
- <div class="pf-c-dropdown">
3826
+ <div class="pf-c-select" style="width: 175px">
3827
+ <span id="-select-name-label" hidden>Choose one</span>
3828
+
3806
3829
  <button
3807
- class="pf-c-dropdown__toggle"
3808
- id="--button"
3809
- aria-expanded="false"
3830
+ class="pf-c-select__toggle"
3810
3831
  type="button"
3832
+ id="-select-name-toggle"
3833
+ aria-haspopup="true"
3834
+ aria-expanded="false"
3835
+ aria-labelledby="-select-name-label -select-name-toggle"
3811
3836
  >
3812
- <span class="pf-c-dropdown__toggle-text">Name</span>
3813
- <span class="pf-c-dropdown__toggle-icon">
3837
+ <div class="pf-c-select__toggle-wrapper">
3838
+ <span class="pf-c-select__toggle-icon">
3839
+ <i class="fas fa-filter" aria-hidden="true"></i>
3840
+ </span>
3841
+ <span class="pf-c-select__toggle-text">Name</span>
3842
+ </div>
3843
+ <span class="pf-c-select__toggle-arrow">
3814
3844
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3815
3845
  </span>
3816
3846
  </button>
3847
+
3817
3848
  <ul
3818
- class="pf-c-dropdown__menu"
3819
- aria-labelledby="--button"
3849
+ class="pf-c-select__menu"
3850
+ role="listbox"
3851
+ aria-labelledby="-select-name-label"
3820
3852
  hidden
3853
+ style="width: 175px"
3821
3854
  >
3822
- <li>
3823
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
3855
+ <li role="presentation">
3856
+ <button
3857
+ class="pf-c-select__menu-item"
3858
+ role="option"
3859
+ >Running</button>
3824
3860
  </li>
3825
- <li>
3861
+ <li role="presentation">
3826
3862
  <button
3827
- class="pf-c-dropdown__menu-item"
3828
- type="button"
3829
- >Action</button>
3863
+ class="pf-c-select__menu-item pf-m-selected"
3864
+ role="option"
3865
+ aria-selected="true"
3866
+ >
3867
+ Stopped
3868
+ <span class="pf-c-select__menu-item-icon">
3869
+ <i class="fas fa-check" aria-hidden="true"></i>
3870
+ </span>
3871
+ </button>
3830
3872
  </li>
3831
- <li>
3832
- <a
3833
- class="pf-c-dropdown__menu-item pf-m-disabled"
3834
- href="#"
3835
- aria-disabled="true"
3836
- tabindex="-1"
3837
- >Disabled link</a>
3873
+ <li role="presentation">
3874
+ <button
3875
+ class="pf-c-select__menu-item"
3876
+ role="option"
3877
+ >Down</button>
3838
3878
  </li>
3839
- <li>
3879
+ <li role="presentation">
3840
3880
  <button
3841
- class="pf-c-dropdown__menu-item"
3842
- type="button"
3843
- disabled
3844
- >Disabled action</button>
3881
+ class="pf-c-select__menu-item"
3882
+ role="option"
3883
+ >Degraded</button>
3845
3884
  </li>
3846
- <li class="pf-c-divider" role="separator"></li>
3847
- <li>
3848
- <a
3849
- class="pf-c-dropdown__menu-item"
3850
- href="#"
3851
- >Separated link</a>
3885
+ <li role="presentation">
3886
+ <button
3887
+ class="pf-c-select__menu-item"
3888
+ role="option"
3889
+ >Needs maintenance</button>
3852
3890
  </li>
3853
3891
  </ul>
3854
3892
  </div>
3855
- <input
3856
- class="pf-c-form-control"
3857
- type="search"
3858
- id="--search-filter-input"
3859
- name="-search-filter-input"
3860
- aria-label="input with dropdown and button"
3861
- aria-describedby="--button"
3862
- />
3893
+ <div class="pf-c-search-input">
3894
+ <div class="pf-c-search-input__bar">
3895
+ <span class="pf-c-search-input__text">
3896
+ <span class="pf-c-search-input__icon">
3897
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
3898
+ </span>
3899
+ <input
3900
+ class="pf-c-search-input__text-input"
3901
+ type="text"
3902
+ placeholder="Filter by name"
3903
+ aria-label="Filter by name"
3904
+ />
3905
+ </span>
3906
+ </div>
3907
+ </div>
3863
3908
  </div>
3864
3909
  </div>
3865
3910
  </div>