@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/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -272,67 +272,94 @@ wrapperTag: div
272
272
  aria-label="search filter"
273
273
  role="group"
274
274
  >
275
- <div class="pf-c-dropdown">
275
+ <div class="pf-c-select" style="width: 175px">
276
+ <span
277
+ id="primary-detail-expanded-example-toolbar-select-name-label"
278
+ hidden
279
+ >Choose one</span>
280
+
276
281
  <button
277
- class="pf-c-dropdown__toggle"
278
- id="primary-detail-expanded-example-toolbar--button"
279
- aria-expanded="false"
282
+ class="pf-c-select__toggle"
280
283
  type="button"
284
+ id="primary-detail-expanded-example-toolbar-select-name-toggle"
285
+ aria-haspopup="true"
286
+ aria-expanded="false"
287
+ aria-labelledby="primary-detail-expanded-example-toolbar-select-name-label primary-detail-expanded-example-toolbar-select-name-toggle"
281
288
  >
282
- <span class="pf-c-dropdown__toggle-text">Name</span>
283
- <span class="pf-c-dropdown__toggle-icon">
289
+ <div class="pf-c-select__toggle-wrapper">
290
+ <span class="pf-c-select__toggle-icon">
291
+ <i class="fas fa-filter" aria-hidden="true"></i>
292
+ </span>
293
+ <span class="pf-c-select__toggle-text">Name</span>
294
+ </div>
295
+ <span class="pf-c-select__toggle-arrow">
284
296
  <i class="fas fa-caret-down" aria-hidden="true"></i>
285
297
  </span>
286
298
  </button>
299
+
287
300
  <ul
288
- class="pf-c-dropdown__menu"
289
- aria-labelledby="primary-detail-expanded-example-toolbar--button"
301
+ class="pf-c-select__menu"
302
+ role="listbox"
303
+ aria-labelledby="primary-detail-expanded-example-toolbar-select-name-label"
290
304
  hidden
305
+ style="width: 175px"
291
306
  >
292
- <li>
293
- <a
294
- class="pf-c-dropdown__menu-item"
295
- href="#"
296
- >Link</a>
307
+ <li role="presentation">
308
+ <button
309
+ class="pf-c-select__menu-item"
310
+ role="option"
311
+ >Running</button>
297
312
  </li>
298
- <li>
313
+ <li role="presentation">
299
314
  <button
300
- class="pf-c-dropdown__menu-item"
301
- type="button"
302
- >Action</button>
315
+ class="pf-c-select__menu-item pf-m-selected"
316
+ role="option"
317
+ aria-selected="true"
318
+ >
319
+ Stopped
320
+ <span class="pf-c-select__menu-item-icon">
321
+ <i class="fas fa-check" aria-hidden="true"></i>
322
+ </span>
323
+ </button>
303
324
  </li>
304
- <li>
305
- <a
306
- class="pf-c-dropdown__menu-item pf-m-disabled"
307
- href="#"
308
- aria-disabled="true"
309
- tabindex="-1"
310
- >Disabled link</a>
325
+ <li role="presentation">
326
+ <button
327
+ class="pf-c-select__menu-item"
328
+ role="option"
329
+ >Down</button>
311
330
  </li>
312
- <li>
331
+ <li role="presentation">
313
332
  <button
314
- class="pf-c-dropdown__menu-item"
315
- type="button"
316
- disabled
317
- >Disabled action</button>
333
+ class="pf-c-select__menu-item"
334
+ role="option"
335
+ >Degraded</button>
318
336
  </li>
319
- <li class="pf-c-divider" role="separator"></li>
320
- <li>
321
- <a
322
- class="pf-c-dropdown__menu-item"
323
- href="#"
324
- >Separated link</a>
337
+ <li role="presentation">
338
+ <button
339
+ class="pf-c-select__menu-item"
340
+ role="option"
341
+ >Needs maintenance</button>
325
342
  </li>
326
343
  </ul>
327
344
  </div>
328
- <input
329
- class="pf-c-form-control"
330
- type="search"
331
- id="primary-detail-expanded-example-toolbar--search-filter-input"
332
- name="primary-detail-expanded-example-toolbar-search-filter-input"
333
- aria-label="input with dropdown and button"
334
- aria-describedby="primary-detail-expanded-example-toolbar--button"
335
- />
345
+ <div class="pf-c-search-input">
346
+ <div class="pf-c-search-input__bar">
347
+ <span class="pf-c-search-input__text">
348
+ <span class="pf-c-search-input__icon">
349
+ <i
350
+ class="fas fa-search fa-fw"
351
+ aria-hidden="true"
352
+ ></i>
353
+ </span>
354
+ <input
355
+ class="pf-c-search-input__text-input"
356
+ type="text"
357
+ placeholder="Filter by name"
358
+ aria-label="Filter by name"
359
+ />
360
+ </span>
361
+ </div>
362
+ </div>
336
363
  </div>
337
364
  </div>
338
365
 
@@ -1484,67 +1511,94 @@ wrapperTag: div
1484
1511
  aria-label="search filter"
1485
1512
  role="group"
1486
1513
  >
1487
- <div class="pf-c-dropdown">
1514
+ <div class="pf-c-select" style="width: 175px">
1515
+ <span
1516
+ id="primary-detail-collapsed-example-toolbar-select-name-label"
1517
+ hidden
1518
+ >Choose one</span>
1519
+
1488
1520
  <button
1489
- class="pf-c-dropdown__toggle"
1490
- id="primary-detail-collapsed-example-toolbar--button"
1491
- aria-expanded="false"
1521
+ class="pf-c-select__toggle"
1492
1522
  type="button"
1523
+ id="primary-detail-collapsed-example-toolbar-select-name-toggle"
1524
+ aria-haspopup="true"
1525
+ aria-expanded="false"
1526
+ aria-labelledby="primary-detail-collapsed-example-toolbar-select-name-label primary-detail-collapsed-example-toolbar-select-name-toggle"
1493
1527
  >
1494
- <span class="pf-c-dropdown__toggle-text">Name</span>
1495
- <span class="pf-c-dropdown__toggle-icon">
1528
+ <div class="pf-c-select__toggle-wrapper">
1529
+ <span class="pf-c-select__toggle-icon">
1530
+ <i class="fas fa-filter" aria-hidden="true"></i>
1531
+ </span>
1532
+ <span class="pf-c-select__toggle-text">Name</span>
1533
+ </div>
1534
+ <span class="pf-c-select__toggle-arrow">
1496
1535
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1497
1536
  </span>
1498
1537
  </button>
1538
+
1499
1539
  <ul
1500
- class="pf-c-dropdown__menu"
1501
- aria-labelledby="primary-detail-collapsed-example-toolbar--button"
1540
+ class="pf-c-select__menu"
1541
+ role="listbox"
1542
+ aria-labelledby="primary-detail-collapsed-example-toolbar-select-name-label"
1502
1543
  hidden
1544
+ style="width: 175px"
1503
1545
  >
1504
- <li>
1505
- <a
1506
- class="pf-c-dropdown__menu-item"
1507
- href="#"
1508
- >Link</a>
1546
+ <li role="presentation">
1547
+ <button
1548
+ class="pf-c-select__menu-item"
1549
+ role="option"
1550
+ >Running</button>
1509
1551
  </li>
1510
- <li>
1552
+ <li role="presentation">
1511
1553
  <button
1512
- class="pf-c-dropdown__menu-item"
1513
- type="button"
1514
- >Action</button>
1554
+ class="pf-c-select__menu-item pf-m-selected"
1555
+ role="option"
1556
+ aria-selected="true"
1557
+ >
1558
+ Stopped
1559
+ <span class="pf-c-select__menu-item-icon">
1560
+ <i class="fas fa-check" aria-hidden="true"></i>
1561
+ </span>
1562
+ </button>
1515
1563
  </li>
1516
- <li>
1517
- <a
1518
- class="pf-c-dropdown__menu-item pf-m-disabled"
1519
- href="#"
1520
- aria-disabled="true"
1521
- tabindex="-1"
1522
- >Disabled link</a>
1564
+ <li role="presentation">
1565
+ <button
1566
+ class="pf-c-select__menu-item"
1567
+ role="option"
1568
+ >Down</button>
1523
1569
  </li>
1524
- <li>
1570
+ <li role="presentation">
1525
1571
  <button
1526
- class="pf-c-dropdown__menu-item"
1527
- type="button"
1528
- disabled
1529
- >Disabled action</button>
1572
+ class="pf-c-select__menu-item"
1573
+ role="option"
1574
+ >Degraded</button>
1530
1575
  </li>
1531
- <li class="pf-c-divider" role="separator"></li>
1532
- <li>
1533
- <a
1534
- class="pf-c-dropdown__menu-item"
1535
- href="#"
1536
- >Separated link</a>
1576
+ <li role="presentation">
1577
+ <button
1578
+ class="pf-c-select__menu-item"
1579
+ role="option"
1580
+ >Needs maintenance</button>
1537
1581
  </li>
1538
1582
  </ul>
1539
1583
  </div>
1540
- <input
1541
- class="pf-c-form-control"
1542
- type="search"
1543
- id="primary-detail-collapsed-example-toolbar--search-filter-input"
1544
- name="primary-detail-collapsed-example-toolbar-search-filter-input"
1545
- aria-label="input with dropdown and button"
1546
- aria-describedby="primary-detail-collapsed-example-toolbar--button"
1547
- />
1584
+ <div class="pf-c-search-input">
1585
+ <div class="pf-c-search-input__bar">
1586
+ <span class="pf-c-search-input__text">
1587
+ <span class="pf-c-search-input__icon">
1588
+ <i
1589
+ class="fas fa-search fa-fw"
1590
+ aria-hidden="true"
1591
+ ></i>
1592
+ </span>
1593
+ <input
1594
+ class="pf-c-search-input__text-input"
1595
+ type="text"
1596
+ placeholder="Filter by name"
1597
+ aria-label="Filter by name"
1598
+ />
1599
+ </span>
1600
+ </div>
1601
+ </div>
1548
1602
  </div>
1549
1603
  </div>
1550
1604
 
@@ -3811,64 +3865,91 @@ wrapperTag: div
3811
3865
  aria-label="search filter"
3812
3866
  role="group"
3813
3867
  >
3814
- <div class="pf-c-dropdown">
3868
+ <div class="pf-c-select" style="width: 175px">
3869
+ <span
3870
+ id="primary-detail-card-view-expanded-example-toolbar-select-name-label"
3871
+ hidden
3872
+ >Choose one</span>
3873
+
3815
3874
  <button
3816
- class="pf-c-dropdown__toggle"
3817
- id="primary-detail-card-view-expanded-example-toolbar--button"
3818
- aria-expanded="false"
3875
+ class="pf-c-select__toggle"
3819
3876
  type="button"
3877
+ id="primary-detail-card-view-expanded-example-toolbar-select-name-toggle"
3878
+ aria-haspopup="true"
3879
+ aria-expanded="false"
3880
+ aria-labelledby="primary-detail-card-view-expanded-example-toolbar-select-name-label primary-detail-card-view-expanded-example-toolbar-select-name-toggle"
3820
3881
  >
3821
- <span class="pf-c-dropdown__toggle-text">Name</span>
3822
- <span class="pf-c-dropdown__toggle-icon">
3882
+ <div class="pf-c-select__toggle-wrapper">
3883
+ <span class="pf-c-select__toggle-icon">
3884
+ <i class="fas fa-filter" aria-hidden="true"></i>
3885
+ </span>
3886
+ <span class="pf-c-select__toggle-text">Name</span>
3887
+ </div>
3888
+ <span class="pf-c-select__toggle-arrow">
3823
3889
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3824
3890
  </span>
3825
3891
  </button>
3892
+
3826
3893
  <ul
3827
- class="pf-c-dropdown__menu"
3828
- aria-labelledby="primary-detail-card-view-expanded-example-toolbar--button"
3894
+ class="pf-c-select__menu"
3895
+ role="listbox"
3896
+ aria-labelledby="primary-detail-card-view-expanded-example-toolbar-select-name-label"
3829
3897
  hidden
3898
+ style="width: 175px"
3830
3899
  >
3831
- <li>
3832
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
3900
+ <li role="presentation">
3901
+ <button
3902
+ class="pf-c-select__menu-item"
3903
+ role="option"
3904
+ >Running</button>
3833
3905
  </li>
3834
- <li>
3906
+ <li role="presentation">
3835
3907
  <button
3836
- class="pf-c-dropdown__menu-item"
3837
- type="button"
3838
- >Action</button>
3908
+ class="pf-c-select__menu-item pf-m-selected"
3909
+ role="option"
3910
+ aria-selected="true"
3911
+ >
3912
+ Stopped
3913
+ <span class="pf-c-select__menu-item-icon">
3914
+ <i class="fas fa-check" aria-hidden="true"></i>
3915
+ </span>
3916
+ </button>
3839
3917
  </li>
3840
- <li>
3841
- <a
3842
- class="pf-c-dropdown__menu-item pf-m-disabled"
3843
- href="#"
3844
- aria-disabled="true"
3845
- tabindex="-1"
3846
- >Disabled link</a>
3918
+ <li role="presentation">
3919
+ <button
3920
+ class="pf-c-select__menu-item"
3921
+ role="option"
3922
+ >Down</button>
3847
3923
  </li>
3848
- <li>
3924
+ <li role="presentation">
3849
3925
  <button
3850
- class="pf-c-dropdown__menu-item"
3851
- type="button"
3852
- disabled
3853
- >Disabled action</button>
3926
+ class="pf-c-select__menu-item"
3927
+ role="option"
3928
+ >Degraded</button>
3854
3929
  </li>
3855
- <li class="pf-c-divider" role="separator"></li>
3856
- <li>
3857
- <a
3858
- class="pf-c-dropdown__menu-item"
3859
- href="#"
3860
- >Separated link</a>
3930
+ <li role="presentation">
3931
+ <button
3932
+ class="pf-c-select__menu-item"
3933
+ role="option"
3934
+ >Needs maintenance</button>
3861
3935
  </li>
3862
3936
  </ul>
3863
3937
  </div>
3864
- <input
3865
- class="pf-c-form-control"
3866
- type="search"
3867
- id="primary-detail-card-view-expanded-example-toolbar--search-filter-input"
3868
- name="primary-detail-card-view-expanded-example-toolbar-search-filter-input"
3869
- aria-label="input with dropdown and button"
3870
- aria-describedby="primary-detail-card-view-expanded-example-toolbar--button"
3871
- />
3938
+ <div class="pf-c-search-input">
3939
+ <div class="pf-c-search-input__bar">
3940
+ <span class="pf-c-search-input__text">
3941
+ <span class="pf-c-search-input__icon">
3942
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
3943
+ </span>
3944
+ <input
3945
+ class="pf-c-search-input__text-input"
3946
+ type="text"
3947
+ placeholder="Filter by name"
3948
+ aria-label="Filter by name"
3949
+ />
3950
+ </span>
3951
+ </div>
3952
+ </div>
3872
3953
  </div>
3873
3954
  </div>
3874
3955
  </div>